/* ---------- interview room ----------
   An immersive layer over the interview workspace. In room mode the transcript, notebook and top bar
   are hidden (they still run underneath, for reconnects and the debrief) and the work panel becomes a
   slide-up "shared screen". The room is deliberately dark in every theme: it is a darkened room. */
:root {
  --room-bg: #0e100e;
  --room-ink: #ecebe4;
  --room-dim: #8d9086;
  --room-line: #2a2d28;
  --room-raised: rgba(29, 32, 27, .88);
  --room-accent: #7fc2a5;
  --room-danger: #f0b3a8;
}

body.room-mode { background: var(--room-bg); overflow: hidden; }
body.room-mode .workspace { padding: 0; min-height: 100vh; background: var(--room-bg); }
body.room-mode .topbar,
body.room-mode .conversation-panel,
body.room-mode .notebook-panel,
body.room-mode #hintButton { display: none !important; }
body.room-mode .interview-grid { display: block; height: auto; min-height: 0; }

/* The work panel becomes the shared screen. */
body.room-mode .work-panel {
  position: fixed; left: 50%; bottom: 0; z-index: 30;
  width: min(1100px, calc(100vw - 32px)); height: min(72vh, 760px); min-height: 0; max-height: calc(100vh - 96px);
  transform: translate(-50%, calc(100% + 24px));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  border-radius: 16px 16px 0 0; box-shadow: 0 -24px 80px rgba(0, 0, 0, .55);
}
body.room-mode.room-sheet-open .work-panel { transform: translate(-50%, 0); }
body.room-mode.room-sheet-open .room-bar { bottom: calc(min(72vh, 760px) + 12px); }

.room-stage { position: fixed; inset: 0; z-index: 20; background: var(--room-bg); color: var(--room-ink); font-family: "Manrope", system-ui, sans-serif; overflow: hidden; }
.room-aura { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 24px 18px; font-family: "DM Mono", monospace; font-size: 12.5px; color: var(--room-dim); z-index: 2; }
.room-clock { font-variant-numeric: tabular-nums; }
.room-clock.over { color: var(--room-danger); }
.room-presence { position: absolute; left: 0; right: 0; top: 64%; text-align: center; display: grid; gap: 4px; z-index: 2; }
.room-presence strong { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 30px; color: var(--room-ink); }
.room-state { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--room-accent); }
.room-caption { position: absolute; left: 50%; top: 74%; transform: translateX(-50%); width: min(640px, calc(100vw - 48px)); margin: 0; text-align: center; font-size: 16px; line-height: 1.5; color: var(--room-ink); background: var(--room-raised); border: 1px solid var(--room-line); border-radius: 12px; padding: 10px 14px; z-index: 3; }
.room-notice { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); margin-top: 40px; display: grid; gap: 10px; justify-items: center; width: min(520px, calc(100vw - 48px)); text-align: center; background: var(--room-raised); border: 1px solid var(--room-line); border-radius: 12px; padding: 12px 16px; z-index: 6; }
.room-notice p { margin: 0; font-size: 14px; }

.room-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); z-index: 31; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; background: var(--room-raised); border: 1px solid var(--room-line); border-radius: 999px; padding: 8px 10px; transition: bottom .45s cubic-bezier(.2, .8, .2, 1); width: max-content; max-width: calc(100vw - 24px); }
.room-button { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--room-ink); background: transparent; border: 1px solid var(--room-line); border-radius: 999px; padding: 9px 15px; cursor: pointer; white-space: nowrap; }
.room-button:hover { border-color: var(--room-dim); }
.room-button[aria-pressed="true"] { background: var(--room-ink); color: var(--room-bg); border-color: var(--room-ink); }
.room-button:focus-visible, .room-link:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 2px; }
.room-leave { color: var(--room-danger); border-color: #6b2b23; }
.room-primary { background: var(--room-ink); color: var(--room-bg); border-color: var(--room-ink); padding: 12px 20px; font-size: 15px; }
.room-primary:hover { background: #ffffff; }
.room-link { font: inherit; font-size: 13px; color: var(--room-dim); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.room-mic { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--room-line); display: grid; place-items: center; flex: none; }
.room-mic > span { width: 10px; height: 10px; border-radius: 50%; background: var(--room-dim); }
.room-mic::before { content: ""; position: absolute; inset: calc(-1 * var(--level, 1px)); border-radius: 50%; border: 2px solid var(--room-accent); opacity: .75; transition: inset .06s linear; }
.room-mic.live > span { background: var(--room-accent); }
.room-mic.muted::before { border-color: var(--room-danger); inset: -1px; }
.room-mic-large { width: 72px; height: 72px; }
.room-mic-large > span { width: 16px; height: 16px; }

.room-lobby { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(ellipse at center, #1a1d19 0%, var(--room-bg) 70%); transition: opacity .6s ease; padding: 24px; }
.room-lobby.leaving { opacity: 0; pointer-events: none; }
.room-lobby-box { width: min(460px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; }
.room-kicker { font-family: "DM Mono", monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--room-accent); }
.room-lobby h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(34px, 6vw, 44px); line-height: 1.05; margin: 0; color: var(--room-ink); }
.room-lobby-meta { margin: 0; color: var(--room-dim); font-size: 14px; }
.room-checklist { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 8px; text-align: left; font-size: 14px; color: var(--room-ink); }
.room-checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; }
.room-checklist li::before { content: "○"; color: var(--room-dim); font-family: "DM Mono", monospace; }
.room-checklist li[data-done="true"]::before { content: "✓"; color: var(--room-accent); }
.room-lobby-mic { padding: 6px 0; }

/* Setup screen: the room option. */
.choice-room .new-tag { font-style: normal; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--green-soft, #dbe8df); color: var(--green, #215b47); padding: 2px 6px; border-radius: 5px; margin-left: 6px; }

@media (max-width: 760px) {
  body.room-mode .work-panel { width: 100vw; height: 82vh; max-height: calc(100vh - 110px); border-radius: 14px 14px 0 0; }
  body.room-mode.room-sheet-open .room-bar { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 52px); }
  .room-bar { gap: 6px; padding: 6px; border-radius: 18px; }
  .room-button { padding: 8px 11px; font-size: 12.5px; }
  .room-presence { top: 58%; }
  .room-presence strong { font-size: 26px; }
  .room-caption { top: 68%; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  body.room-mode .work-panel, .room-bar, .room-lobby, .room-mic::before { transition: none; }
}

/* Debrief: the room's transcript, revealed after the interview. */
.report-transcript { display: grid; gap: 10px; max-width: 760px; }
.report-transcript summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted, #5f6259); margin-bottom: 6px; }
.transcript-turn { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line, #d9d6cb); }
.transcript-turn span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #5f6259); }
.transcript-turn.interviewer span { color: var(--orange, #c45f31); }
.transcript-turn p { margin: 0; font-size: 14px; line-height: 1.6; }