/* Party text chat and voice (public/chat.js, public/voice.js): the desk dock, the phone sheet, the TV ticker. */

/* ---------- desk: the dock at the bottom left ---------- */
.chat-dock {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: calc(var(--z-react) + 1);
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--sp-2);
  max-width: min(360px, calc(100vw - 2 * var(--sp-4)));
  pointer-events: none;
}
.chat-dock > * { pointer-events: auto; }
.chat-dock .chat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.chat-dock.in-round .chat-bar { display: none; }
.chat-dock.open .chat-bar .voice-bar { display: none; } /* the open panel has the full voice controls */ /* the round's HUD has the toggles */
.chat-dock.in-round { bottom: var(--sp-5); }
.chat-launch { position: relative; padding: 8px 14px; font-size: var(--fs-small); }
.chat-badge {
  display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; margin-left: 6px; padding: 0 .35em;
  border-radius: var(--r-pill); background: var(--stop); color: #fff; font-size: .72rem; line-height: 1;
}
.chat-badge.hidden { display: none; }

.chat-panel {
  color-scheme: light;
  width: min(360px, calc(100vw - 2 * var(--sp-4)));
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--cream); color: var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--outline), var(--toy-2);
}
.chat-panel.hidden { display: none; }
.chat-dock .chat-panel { max-height: min(460px, calc(100dvh - 140px)); } /* dvh: shrinks with the on-screen keyboard (game.html interactive-widget) */
.chat-head { display: flex; align-items: center; gap: var(--sp-2); }
.chat-title { margin: 0; font-size: var(--fs-h3); flex: 1; }
.chat-people-btn { padding: 4px 10px; font-size: var(--fs-tag); }
.chat-close { padding: 4px 10px; background: var(--clay); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }

.chat-log { list-style: none; margin: 0; padding: 0 2px; overflow-y: auto; flex: 1 1 auto; min-height: 80px; max-height: 260px; overscroll-behavior: contain; }
.chat-msg { padding: 3px 0; overflow-wrap: anywhere; line-height: 1.35; }
.chat-who { color: color-mix(in srgb, var(--c, var(--ink)) 45%, var(--ink)); }
.chat-msg.mine .chat-who { color: var(--ink-2); }
.chat-empty, .chat-note, .chat-hint, .chat-error { margin: 0; }
.chat-empty.hidden, .chat-note.hidden { display: none; }
.chat-note { padding: 6px 10px; border-radius: var(--r-sm); background: var(--clay); }
.chat-error { color: var(--stop); }
.chat-error:empty { display: none; }
.chat-form { display: flex; gap: var(--sp-2); }
.chat-input { flex: 1; min-width: 0; padding: 8px 10px; }
/* the panel stays a daylight card over the dusk round: its own field and buttons, not the dusk ones */
.chat-panel .chat-input { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.chat-panel .chat-input:focus { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--lemon); }
.chat-panel .chat-input:disabled { background: var(--clay); color: var(--ink-2); }
.dusk .chat-panel button.ghost { background: var(--cream); color: var(--ink); box-shadow: var(--outline), var(--toy-1); }
.dusk .chat-panel { --muted: var(--ink-2); --text: var(--ink); }
.chat-panel .muted { color: var(--ink-2); }
.chat-send { padding: 8px 14px; }

.chat-people { padding: var(--sp-2); border-radius: var(--r-sm); background: var(--clay); }
.chat-people.hidden { display: none; }
.chat-people p { margin: 0 0 6px; }
.chat-people ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 140px; overflow-y: auto; }
.chat-person label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.voice-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--ink-2)); }

/* ---------- voice controls ---------- */
.voice-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.voice-bar:empty, .chat-voice.hidden { display: none; }
.voice-bar button { padding: 6px 12px; font-size: var(--fs-small); }
.voice-mic { background: var(--clay); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.voice-mic.on { background: var(--leaf); }
.voice-tap { background: var(--lemon); }
.chat-voice { flex-direction: row; }
.voice-note, .voice-talking { flex-basis: 100%; margin: 0; }

/* ---------- desk round HUD toggles (like the HUD's sound toggle) ---------- */
.hud-pill .hud-chat, .hud-pill .hud-mic {
  position: relative; width: 34px; height: 34px; padding: 0; flex: none; display: grid; place-items: center;
  background: transparent; color: var(--cream); box-shadow: none; translate: none; font-size: 1rem;
}
.hud-pill .hud-chat:hover, .hud-pill .hud-mic:hover, .hud-pill .hud-chat[aria-expanded="true"] { background: var(--cocoa-3); }
.hud-pill .hud-mic:disabled { opacity: .5; }
.hud-chat .chat-badge { position: absolute; top: -6px; right: -6px; margin: 0; }
.hud-mic.hidden { display: none; }
.hud-mic.on { box-shadow: 0 0 0 2.5px var(--go-bright); }

/* ---------- phone: launcher row and sheet ---------- */
.chat-launchers { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.chat-launchers .voice-mic.hidden { display: none; }
.chat-launchers .voice-mic.on { background: var(--leaf); }
dialog.chat-sheet { width: min(440px, calc(100vw - 24px)); padding: 0; background: transparent; box-shadow: none; }
dialog.chat-sheet .chat-panel { width: 100%; max-height: min(80vh, 620px); }
dialog.chat-sheet .chat-log { max-height: none; min-height: 140px; }
.guess .chat-launchers { margin: 6px 0; }

/* ---------- big screen: the newest lines ---------- */
.chat-ticker {
  position: fixed; right: 24px; top: 72px; z-index: 20; /* over the stage, under the party code chip, away from the controls */
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(520px, 36vw); pointer-events: none;
}
.chat-ticker.hidden { display: none; }
.chat-line {
  margin: 0; padding: 6px 12px; border-radius: var(--r-sm); background: var(--cream); color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink), var(--toy-1); font-size: 1.05rem; overflow-wrap: anywhere;
  animation: chat-line-in var(--t-base) var(--ease-out) both;
}
.chat-line b { color: color-mix(in srgb, var(--c, var(--ink)) 45%, var(--ink)); }
@keyframes chat-line-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .chat-line { animation: none; } }

/* the big screen's roster: mute a seat in chat and voice (host:mute) */
.host .chip-name .mute { font-size: .9em; padding: 0 .3em; background: transparent; box-shadow: none; border-radius: var(--r-sm); opacity: .55; }
.host .chip-name .mute:hover, .host .chip-name .mute:focus-visible { opacity: 1; translate: none; }
.host .chip-name .mute.on { opacity: 1; }
/* the desk's players sheet: Mute / Unmute next to Remove */
.manage-row .manage-mute { padding: 4px 10px; font-size: var(--fs-small); }
.manage-row .manage-mute[aria-pressed="true"] { background: var(--clay-2); }

/* ---------- desk lobby: the dock sits in the left column under the roster (chat.js screen()) ---------- */
.chat-dock.in-slot { position: static; max-width: none; }
.chat-dock.in-slot .chat-panel { width: 100%; }

/* phones: the reveal and final panels scroll under the floating launcher; their last buttons stay clear of it */
@media (max-width: 900px) {
  body.chat-floats .split-panel { padding-bottom: calc(2 * var(--sp-4) + 48px); }
}