/* Emotes: the cheer chips near a head, the picker, the line the receiver reads and the badge a person in
   Focus sees. Frosted glass like every HUD. Floating things are placed with transform from emote-ui.js and
   animate with opacity and the separate scale property, so nothing moves the layout. */
.emote-layer { position: fixed; inset: 0; z-index: 13; pointer-events: none; }
.emote-chip, .emote-note, .emote-picker { position: fixed; left: 0; top: 0; margin: 0; will-change: transform; }

.emote-chip.hud { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 14px 4px 10px; border-radius: 999px; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; pointer-events: auto; opacity: 0; scale: .88; transition: opacity .22s ease, scale .24s cubic-bezier(.2, .8, .2, 1.2), border-color .2s; }
.emote-chip.on { opacity: 1; scale: 1; }
.emote-chip:hover { border-color: var(--accent); }
.emote-chip:active { scale: .96; }
.emote-chip:disabled { opacity: .55; cursor: default; }
.emote-chip .g { font-size: 18px; line-height: 1; }

.emote-note.hud { z-index: 13; max-width: min(360px, calc(100vw - 24px)); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; text-align: center; pointer-events: none; opacity: 0; scale: .94; transition: opacity .25s ease, scale .25s cubic-bezier(.2, .8, .2, 1); }
.emote-note.on { opacity: 1; scale: 1; }

.emote-picker { z-index: 31; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; visibility: hidden; opacity: 0; scale: .92; transition: opacity .2s ease, scale .22s cubic-bezier(.2, .8, .2, 1), visibility 0s .22s; }
.emote-picker.open { visibility: visible; opacity: 1; scale: 1; transition-delay: 0s; }
.emote-pick-title { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; font-size: 12.5px; white-space: nowrap; }
.emote-pick-title b { max-width: 14em; overflow: hidden; text-overflow: ellipsis; }
.emote-pick-title small { color: var(--hud-muted); font-size: 12px; }
.emote-pick-title small::before { content: "· "; }
.emote-pick-row { display: flex; gap: 4px; }
.emote-pick-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); font-size: 21px; line-height: 1; cursor: pointer; transition: transform .16s ease, border-color .16s, opacity .16s; }
.emote-pick-btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.08); border-color: var(--accent); }
.emote-pick-btn:active:not(:disabled) { transform: scale(.94); }
.emote-pick-btn:disabled { opacity: .35; filter: grayscale(1); cursor: default; }

.own { position: relative; }

/* A row of the People panel opens the picker. */
body.in-room .srow:not(.me) { cursor: pointer; min-height: 40px; transition: background .2s; }
body.in-room .srow:not(.me):hover, body.in-room .srow:not(.me):focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); }
body.in-room .srow:not(.me)::after { content: "🙂"; flex: none; font-size: 14px; opacity: .45; filter: grayscale(.4); transition: opacity .2s; }
body.in-room .srow:not(.me):hover::after, body.in-room .srow:not(.me):focus-visible::after { opacity: 1; }

/* The library is quieter: smaller chips and picker, on a desktop; a phone keeps its 44 px targets. */
@media (min-width: 761px) and (pointer: fine) {
  body.emote-library .emote-chip.hud { min-height: 36px; font-size: 12.5px; }
  body.emote-library .emote-pick-btn { width: 38px; height: 38px; font-size: 18px; }
}

@media (max-width: 760px), (pointer: coarse) {
  .emote-chip.hud { min-height: 44px; }
  .emote-pick-btn { width: 44px; height: 44px; }
  body.in-room .srow:not(.me) { min-height: 44px; }
  .emote-pick-row { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .emote-chip, .emote-note, .emote-picker { scale: 1; transition: opacity .12s linear; }
  .emote-pick-btn { transition: none; }
  .emote-pick-btn:hover:not(:disabled) { transform: none; }
}
body.pip .emote-layer, body.pip .emote-note, body.pip .emote-picker,
body.record .emote-layer, body.record .emote-note, body.record .emote-picker { display: none !important; }