/* Live voice — the mic controls and call chrome shared by Couples Debate and Couples Court.
 *
 * ONE stylesheet, two prefixes. The two scenes keep their own `de-`/`co-` class names so their
 * existing CSS still reads as one file each, but every rule below is written once and grouped —
 * a second copy of this would drift within a week.
 *
 * The visual rule: speaking is a state you can see from across a room (a pulsing dot, a lit seat),
 * and typing never looks like a downgrade — the mode toggle is a pair of equals, not a fallback
 * notice with a button on it. */

/* ---------- mode toggle: type | speak ---------- */
.de-voice, .co-voice { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.de-vmode, .co-vmode {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
}
.de-vmode__btn, .co-vmode__btn {
  min-height: var(--tap); border-radius: 999px; border: 0; background: transparent;
  font: 700 13px var(--mono); letter-spacing: .04em; color: var(--ink-soft); cursor: pointer;
}
.de-vmode__btn[aria-pressed="true"], .co-vmode__btn[aria-pressed="true"] {
  background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow-1);
}
.de-vmode__btn:disabled, .co-vmode__btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- the live transcript board ---------- */
.de-vboard, .co-vboard {
  border: 1px solid var(--ink); border-radius: var(--r8); background: var(--paper-raised);
  overflow: hidden;
}
.de-vboard__head, .co-vboard__head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px dashed var(--line); background: var(--paper);
}
.de-vboard__head .eyebrow, .co-vboard__head .eyebrow { flex: 1; text-align: left; }
.de-vboard__body, .co-vboard__body {
  min-height: 96px; max-height: 200px; overflow-y: auto; padding: 12px 14px;
  font-size: 15px; line-height: 1.45; text-align: left; word-break: break-word;
}
.de-vtext, .co-vtext { margin: 0; display: inline; white-space: pre-wrap; }
.de-vtext.is-empty, .co-vtext.is-empty { color: var(--ink-faint); font-style: italic; }
/* The tail the engine is still revising — visibly provisional, so nobody thinks it is final. */
.de-vtext__interim, .co-vtext__interim { color: var(--ink-faint); font-style: italic; }

/* ---------- mic button ---------- */
.de-vmic, .co-vmic {
  min-width: var(--tap); min-height: 32px; padding: 4px 10px; font-size: 15px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper-raised);
}
.de-vmic[aria-pressed="true"], .co-vmic[aria-pressed="true"] {
  background: var(--red-tint); border-color: var(--red);
}

/* ---------- the speaking dot ---------- */
.de-vdot, .co-vdot,
.de-seat__speak, .co-seat__speak {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ink-faint); flex: 0 0 auto;
}
.de-vdot.is-on, .co-vdot.is-on,
.de-seat__speak, .co-seat__speak { background: var(--green); }
.de-vdot.is-on, .co-vdot.is-on,
.de-seat.is-speaking .de-seat__speak, .co-seat.is-speaking .co-seat__speak {
  animation: voice-pulse 1s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 160, 107, .45); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(34, 160, 107, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .de-vdot.is-on, .co-vdot.is-on,
  .de-seat.is-speaking .de-seat__speak, .co-seat.is-speaking .co-seat__speak { animation: none; }
}

/* ---------- seat footer: dot + mic pill + name ---------- */
.de-seat__foot, .co-seat__foot {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 6px;
}
.de-seat__foot .de-seat__name, .co-seat__foot .co-seat__name { position: static; }
.de-seat__mic, .co-seat__mic {
  font: 700 10px var(--mono); letter-spacing: .06em; padding: 3px 7px; border-radius: 999px;
  background: var(--green-tint); color: var(--on-green-tint); white-space: nowrap;
}
.de-seat__mic.is-muted, .co-seat__mic.is-muted { background: var(--red-tint); color: var(--on-red-tint); }
.de-seat.is-speaking, .co-seat.is-speaking { box-shadow: 0 0 0 3px rgba(34, 160, 107, .25); }

/* ---------- partner video in a seat ---------- */
/* The feed sits BEHIND the seat's content. `isolation` is what makes that safe: it gives the seat
 * its own stacking context, so the z-index:-1 below lands above the seat's own gradient and below
 * everything in it — instead of escaping to the page and disappearing behind the background.
 *
 * Do NOT do this by forcing `position: relative` on the seat's children: the banner, the name pill
 * and the footer are all absolutely positioned by the game's own CSS, and overriding that collapses
 * them into the text. (It did. The screenshots showed it.) */
.de-seat, .co-seat { isolation: isolate; }
.de-seat__av, .co-seat__av {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; opacity: .18;
  pointer-events: none;
}
.de-seat__video, .co-seat__video,
.de-seat__still, .co-seat__still { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

/* ---------- the local call strip ---------- */
.de-av, .co-av { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); }
.de-me, .co-me {
  width: 84px; height: 63px; object-fit: cover; transform: scaleX(-1);
  border: 1px solid var(--line); border-radius: var(--r8); background: var(--paper);
}
.de-avnote, .co-avnote { flex: 1; text-align: left; margin: 0; }
.de-avnote.is-warn, .co-avnote.is-warn { color: #A32227; }

/* ---------- degradation notes ---------- */
/* Never red, never an alarm: not having a speech engine is a way to play, not a fault. */
.de-vnote, .co-vnote { text-align: left; margin: 0; }

@media (max-width: 640px) {
  .de-av, .co-av { flex-wrap: wrap; }
  .de-vboard__body, .co-vboard__body { min-height: 76px; max-height: 150px; }
  .de-seat__mic, .co-seat__mic { font-size: 9px; padding: 2px 5px; }
}