/* A modeless bottom sheet; geometry follows the keyboard without transitions. */
body #social-chat-dialog.social-compact-chat {
  position:fixed; z-index:90;
  inset:var(--social-chat-top,calc(100dvh - 320px)) auto auto var(--social-chat-left,8px);
  width:var(--social-chat-width,min(320px,calc(100vw - 16px)));
  max-width:100vw;
  height:var(--social-chat-height,min(248px,46dvh));
  max-height:calc(100dvh - 8px); min-height:0;
  margin:0; padding:10px 9px 8px; border:1px solid #9b91be80; border-radius:19px 19px 12px 12px;
  color:#f2edf9; background:#202037f7;
  box-shadow:0 8px 25px #03061966,inset 0 1px 0 #eee6ff12;
  overflow:hidden; backdrop-filter:none; -webkit-backdrop-filter:none; transition:none;
}
body #social-chat-dialog.social-compact-chat[open] { display:flex; flex-direction:column; gap:5px; animation:social-chat-rise .2s cubic-bezier(.2,.8,.2,1) both; }
body #social-chat-dialog.social-compact-chat.is-keyboard-docked { border-bottom:0; border-radius:19px 19px 0 0; padding-bottom:6px; }
@keyframes social-chat-rise { from { opacity:0; transform:translateY(35px); } to { opacity:1; transform:translateY(0); } }
body #social-chat-dialog.social-compact-chat::backdrop { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; pointer-events:none; }
body #social-chat-dialog .social-dialog-header { min-height:29px; gap:6px; }
body #social-chat-dialog .social-dialog-header h2 { margin:0; font-size:14px; line-height:1.2; letter-spacing:0; color:#f0ebf9; text-shadow:none; }
body #social-chat-dialog .social-close { flex:0 0 29px; width:29px; height:29px; padding:0; border-radius:9px; font-size:22px!important; color:#d5cce9; background:#3a304b; border-color:#b29bcc3b; }
body #social-chat-dialog .social-bubble-switch { margin-left:auto; min-height:29px; gap:4px; font-size:9px; color:#b6aac9; }
body #social-chat-dialog .social-bubble-switch input { width:12px; height:12px; accent-color:#8fdde6; }
body #social-chat-dialog .social-chat-toolbar { flex:none; min-height:30px; margin:0; padding:0; gap:5px; }
body #social-chat-dialog .social-chat-toolbar .social-soft-button { min-height:30px; padding:4px 9px; gap:4px; border-radius:8px; font-size:11px; line-height:1.2; color:#dfd4ef; background:#32283f; border-color:#b5a0d033; box-shadow:none; }
body #social-chat-dialog .social-chat-toolbar .social-soft-button[aria-expanded=true] { background:#23434e; color:#c5faf6; border-color:#7acbd387; }
body #social-chat-dialog .social-chat-toolbar .social-soft-button>span { font-size:17px; }
body #social-chat-dialog .social-character-count { font-size:9px; color:#9f99b7; }
body #social-chat-dialog .social-messages { flex:1 1 0; min-height:0; margin:0; padding:7px 6px; border-color:#a299be25; border-radius:9px; background:#11182b; overflow-anchor:none; -webkit-overflow-scrolling:touch; }
body #social-chat-dialog .social-message { margin-bottom:10px; gap:5px; }
body #social-chat-dialog .social-message-avatar { width:24px; height:24px; font-size:18px; flex:0 0 24px; }
body #social-chat-dialog .social-message-content { max-width:calc(100% - 29px); }
body #social-chat-dialog .social-message-meta { min-height:13px; margin-bottom:3px; gap:4px; font-size:9px; }
body #social-chat-dialog .social-message-meta strong { max-width:105px; font-size:10px; }
body #social-chat-dialog .social-message-meta time { font-size:8px; }
body #social-chat-dialog .social-person-tag { padding:0 3px; font-size:8px; }
body #social-chat-dialog .social-message-body { padding:5px 7px; font-size:11px; line-height:1.5; }
body #social-chat-dialog .social-message-body.is-sticker { padding:0; }
body #social-chat-dialog .social-chat-empty { min-height:100%; padding:7px; gap:3px; }
body #social-chat-dialog .social-chat-empty>span { display:none; }
body #social-chat-dialog .social-chat-empty strong { font-size:12px; }
body #social-chat-dialog .social-chat-empty p { font-size:10px; }
body #social-chat-dialog .social-sticker-panel { flex:1 1 0; min-height:0; max-height:none; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; margin:0; padding:5px 3px; border-color:#ac9bc32e; border-radius:9px; background:#171a2f; align-content:start; }
body #social-chat-dialog .social-sticker-panel button { min-height:51px; height:51px; padding:2px; border-radius:8px; }
body #social-chat-dialog .social-sticker-panel button>span:last-child:not(.social-emoji) { display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;line-height:12px;color:#dac7e9; }
body #social-chat-dialog .social-sticker-panel button:hover { background:#473050; border-color:#b699d366; }
body #social-chat-dialog .social-quick-panel { flex:1 1 0; min-height:0; max-height:none; align-content:flex-start; margin:0; padding:6px; gap:5px; border-color:#ac9bc32e; border-radius:9px; background:#171a2f; }
body #social-chat-dialog .social-quick-panel button { min-height:30px; padding:5px 7px; font-size:10px; color:#e1d6ec; border-color:#b79ad333; background:#322840; }
body #social-chat-dialog .social-composer { flex:none; gap:5px; margin:0; }
body #social-chat-dialog .social-composer input { height:35px; padding:6px 9px; border-radius:9px; font-size:16px; background:#151c30; color:#f4edf9; border-color:#9e98c54d; }
body #social-chat-dialog .social-composer input::placeholder { color:#aaa5be; font-size:11px; }
body #social-chat-dialog .social-composer .social-primary-button { min-height:35px; min-width:47px; padding:6px 8px; border-radius:9px; font-size:11px; box-shadow:none; color:#163743; background:#7fdbe0; border-color:#a1eef0; }
body #social-chat-dialog.has-open-panel .social-composer,body #social-chat-dialog.has-open-panel .social-character-count { display:none; }
body #social-chat-dialog>.social-feedback { flex:none; margin:0; min-height:0; font-size:10px; line-height:1.3; }
body #social-chat-dialog>.social-feedback:empty { display:none; }
body #social-chat-dialog :is(button,input):focus-visible { outline:2px solid #8ee3e7; outline-offset:2px; }
body #social-chat-dialog.is-short-sheet .social-dialog-header { min-height:25px; }
body #social-chat-dialog.is-short-sheet .social-close { height:25px; width:25px; flex-basis:25px; }
body #social-chat-dialog.is-short-sheet .social-chat-toolbar { min-height:26px; }
body #social-chat-dialog.is-short-sheet .social-chat-toolbar .social-soft-button { min-height:26px; padding-top:3px; padding-bottom:3px; }

/* Native funny emoji replace the sticker bitmap while retaining message IDs. */
.social-emoji { display:inline-grid; place-items:center; width:40px; height:40px; flex-shrink:0; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; font-size:34px; font-style:normal; line-height:1; vertical-align:middle; }
body #social-chat-dialog .social-sticker-panel .social-emoji { width:33px; height:33px; font-size:29px; }
body #social-chat-dialog .social-message-body .social-emoji { width:37px; height:37px; font-size:31px; }

/* The overlay lives inside the avatar, never in the narrow-screen hidden bubble. */
body .seat .seat-avatar.social-avatar { position:relative; }
body .seat .social-avatar-emoji { position:absolute; z-index:5; inset:0; display:grid; place-items:center; border-radius:inherit; background:#202037bf; pointer-events:none; overflow:hidden; }
body .seat .social-avatar-emoji>.social-emoji { position:relative;width:100%; height:100%; font-size:42px; filter:drop-shadow(0 2px 2px #080a1766); transform-origin:50% 58%; animation:var(--social-reaction-motion,social-avatar-reaction) 4000ms ease-in-out both; animation-delay:var(--social-emoji-delay,0ms); }
/* Stable sticker IDs choose distinct reactions and survive every table redraw. */
body .seat .social-avatar-emoji>.social-emoji[data-sticker-id="laugh"] { --social-reaction-motion:social-laugh-roll; }
body .seat .social-avatar-emoji>.social-emoji[data-sticker-id="suspect"] { --social-reaction-motion:social-smug-lean; }
body .seat .social-avatar-emoji>.social-emoji[data-sticker-id="cheer"] { --social-reaction-motion:social-catch-me; }
body .seat .social-avatar-emoji>.social-emoji[data-sticker-id="shock"] { --social-reaction-motion:social-caught-jump; }
body .seat .social-avatar-emoji>.social-emoji[data-sticker-id="cry"] { --social-reaction-motion:social-please-wobble; }
body .seat .social-avatar-emoji>.social-emoji[data-sticker-id="cool"] { --social-reaction-motion:social-cool-nod; }
body .seat .social-avatar-emoji>.social-emoji[data-sticker-id="love"] { --social-reaction-motion:social-blow-kiss; }
body .seat .social-avatar-emoji>.social-emoji[data-sticker-id="think"] { --social-reaction-motion:social-guess-flip; }
body .seat .social-avatar-emoji>.social-emoji[data-sticker-id="gg"] { --social-reaction-motion:social-tongue-wag; }
body .seat .social-avatar-emoji>.social-emoji[data-sticker-id="love"]::after {
  content:'♥';position:absolute;right:8%;top:18%;color:#ff95c6;font:800 15px/1 sans-serif;
  text-shadow:0 0 5px #e74b9b66;opacity:0;animation:social-kiss-heart 4000ms ease-out both;animation-delay:var(--social-emoji-delay,0ms);
}
@keyframes social-avatar-reaction {
  0% { opacity:0; transform:scale(.45) rotate(-14deg); }
  9% { opacity:1; transform:translateY(-3px) scale(1.08) rotate(8deg); }
  18% { transform:translateY(1px) scale(.97) rotate(-7deg); }
  30% { transform:translateY(-2px) scale(1.04) rotate(6deg); }
  43% { transform:translateY(1px) rotate(-5deg); }
  56% { transform:translateY(-2px) rotate(4deg); }
  72% { transform:rotate(-2deg); }
  86% { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(.78) translateY(3px); }
}
@keyframes social-laugh-roll {
  0% {opacity:0;transform:scale(.55) rotate(-30deg)}
  10%,86% {opacity:1}
  14%,42%,70% {transform:translate(-2px,1px) rotate(-20deg) scale(1.02)}
  28%,56% {transform:translate(2px,-2px) rotate(18deg) scale(.98)}
  86% {transform:rotate(-8deg)}
  100% {opacity:0;transform:scale(.8) rotate(-22deg)}
}
@keyframes social-smug-lean {
  0% {opacity:0;transform:translateX(-8px) scale(.7)}
  14%,86% {opacity:1}
  18% {transform:translateX(3px) rotate(-10deg)}
  32% {transform:translateX(3px) rotate(-10deg) scale(1.07)}
  46% {transform:translateX(2px) rotate(-6deg) scale(.98)}
  64% {transform:translateX(4px) rotate(-12deg) scale(1.04)}
  86% {transform:translateX(2px) rotate(-8deg)}
  100% {opacity:0;transform:translateX(7px) scale(.8)}
}
@keyframes social-catch-me {
  0% {opacity:0;transform:translateY(9px) scale(.55)}
  10%,86% {opacity:1}
  14%,45%,75% {transform:translateY(-3px) rotate(12deg) scale(.98,1.04)}
  28%,59% {transform:translateY(3px) rotate(-12deg) scale(1.07,.91)}
  86% {transform:rotate(6deg)}
  100% {opacity:0;transform:translateY(8px) scale(.65)}
}
@keyframes social-caught-jump {
  0% {opacity:0;transform:scale(.45)}
  10% {opacity:1;transform:translateY(-5px) scale(1.12)}
  18% {transform:translateY(2px) scale(.96)}
  26% {transform:translateY(-3px) scale(1.06)}
  34% {transform:translateY(1px)}
  43%,61% {transform:translateX(-2px) rotate(-3deg)}
  52%,70% {transform:translateX(2px) rotate(3deg)}
  86% {opacity:1;transform:none}
  100% {opacity:0;transform:scale(.7)}
}
@keyframes social-please-wobble {
  0% {opacity:0;transform:scale(.65)}
  12%,86% {opacity:1}
  20%,50%,78% {transform:rotate(-8deg) scale(1.02,.96)}
  35%,65% {transform:rotate(8deg) scale(.97,1.03)}
  86% {transform:translateY(2px) scale(1.03)}
  100% {opacity:0;transform:translateY(5px) scale(.8)}
}
@keyframes social-cool-nod {
  0% {opacity:0;transform:translateY(-5px) scale(.8)}
  14%,88% {opacity:1}
  22%,60% {transform:translateY(2px) rotate(4deg) scale(.98)}
  40%,78% {transform:translateY(-1px) rotate(-3deg) scale(1.03)}
  88% {transform:rotate(-5deg)}
  100% {opacity:0;transform:scale(.87)}
}
@keyframes social-blow-kiss {
  0% {opacity:0;transform:scale(.6) rotate(-10deg)}
  12%,86% {opacity:1}
  20% {transform:rotate(-7deg) scale(1.04)}
  38% {transform:translateX(3px) rotate(5deg) scale(1.09)}
  52% {transform:translateX(-1px) rotate(-6deg) scale(.98)}
  70% {transform:translateX(2px) rotate(3deg) scale(1.06)}
  86% {transform:rotate(-4deg)}
  100% {opacity:0;transform:scale(.7)}
}
@keyframes social-kiss-heart {
  0%,26% {opacity:0;transform:translate(-5px,7px) scale(.3)}
  37% {opacity:1;transform:translate(0,0) scale(1)}
  61% {opacity:0;transform:translate(4px,-9px) scale(.6)}
  62% {opacity:0;transform:translate(-5px,7px) scale(.3)}
  73% {opacity:1;transform:translate(0,0) scale(.9)}
  96%,100% {opacity:0;transform:translate(4px,-9px) scale(.6)}
}
@keyframes social-guess-flip {
  0% {opacity:0;transform:scale(.6) rotate(180deg)}
  16% {opacity:1;transform:rotate(0deg)}
  33% {transform:rotate(-12deg)}
  53% {transform:rotate(12deg)}
  72% {transform:rotate(180deg) scale(.94)}
  87% {opacity:1;transform:rotate(180deg)}
  100% {opacity:0;transform:rotate(205deg) scale(.7)}
}
@keyframes social-tongue-wag {
  0% {opacity:0;transform:scale(.6)}
  10%,86% {opacity:1}
  16%,38%,60% {transform:translateX(-3px) rotate(-10deg) scale(1.03)}
  27%,49%,71% {transform:translateX(3px) rotate(10deg) scale(.97)}
  86% {transform:translateX(-1px) rotate(-4deg)}
  100% {opacity:0;transform:translateY(4px) scale(.75)}
}
body:is(.ktv-motion-off,.ktv-page-hidden) .seat .social-avatar-emoji>.social-emoji,
body:is(.ktv-motion-off,.ktv-page-hidden) .seat .social-avatar-emoji>.social-emoji::after {
  animation:none!important;transform:none;opacity:1;
}
body:is(.ktv-motion-off,.ktv-page-hidden) .seat .social-avatar-emoji>.social-emoji::after {display:none}
@media (max-width:360px),(max-height:530px) {
 body .seat .social-avatar-emoji>.social-emoji { font-size:35px; }
}
@media (prefers-reduced-motion:reduce) {
 body #social-chat-dialog.social-compact-chat[open] { animation:none; }
 body .seat .social-avatar-emoji>.social-emoji { animation:none!important; transform:none; opacity:1; }
 body .seat .social-avatar-emoji>.social-emoji::after { animation:none!important;display:none; }
 body #social-chat-dialog * { transition:none; }
}