/* A transparent performance layer keeps the chat visible behind the character. */
.outburst.breakout{display:block;position:fixed;inset:0;pointer-events:none;isolation:isolate;overflow:hidden;z-index:30}
.breakout-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#fff8f51a 0%,#eed9e368 70%);opacity:0}
.breakout-actor{position:absolute;transform-origin:50% 50%;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 16px 8px #54333b20)}
.breakout-shout{position:absolute;text-align:center;font-size:clamp(34px,6.4vw,76px);font-weight:900;line-height:1.2;letter-spacing:-.07em;color:#472b34;text-shadow:3px 3px 0 #fffdf7,-2px -2px 0 #fffdf7,2px -2px 0 #fffdf7,-2px 2px 0 #fffdf7;opacity:0;transform-origin:50% 70%;overflow-wrap:anywhere;text-wrap:balance;will-change:transform,opacity}
.breakout-opening{position:absolute;width:125px;height:100px;background:#a978899c;opacity:0;clip-path:polygon(50% 0,58% 22%,81% 9%,77% 33%,100% 37%,83% 53%,97% 79%,70% 76%,64% 100%,49% 81%,25% 97%,27% 73%,0 66%,20% 49%,6% 21%,34% 28%);filter:drop-shadow(0 0 2px #fff)}
.breakout-opening:after{content:'';position:absolute;inset:9px;background:#fff8f8;clip-path:inherit}
.breakout-chip{position:absolute;width:16px;height:11px;background:#fffaf8;border:1px solid #dcb3c0;clip-path:polygon(0 15%,80% 0,100% 95%,18% 78%);opacity:0;will-change:transform,opacity}
.breakout-chip:nth-of-type(2n){width:10px;height:19px;background:#efb7c8}
@media(max-width:540px){.breakout-shout{font-size:clamp(32px,10.5vw,47px)}}
@media(prefers-reduced-motion:reduce){.outburst.breakout{display:none!important}}
.message-row[data-emotion="amused"] .message-avatar{animation:snicker .22s 5 alternate;transform-origin:50% 85%}
.message-row[data-emotion="smug"] .message-avatar{animation:smugTilt 1.1s .7s both;transform-origin:50% 80%}
.sprite.original[data-emotion="amused"],.sprite.original[data-emotion="smug"]{--cell-x:845}
.sprite.original[data-emotion="speechless"]{--cell-x:435}
@keyframes snicker{from{transform:rotate(-5deg) translateY(0)}to{transform:rotate(5deg) translateY(-2px)}}
@keyframes smugTilt{0%{transform:rotate(0)}50%,100%{transform:rotate(-9deg)}}
/* Laughter fills the background; opaque bubbles keep the conversation readable. */
.chat-app{z-index:1;transition:background-color .25s}
.chat-app.laughing{background-color:#fff8f86b}
.emotion-background{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;user-select:none}
.laugh-lane{position:absolute;left:0;white-space:nowrap;font-weight:900;color:#c17797;letter-spacing:.045em;line-height:1;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.emotion-background{display:none}}
.hani-generated-motion{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}