/* Participant UI, "call" layout (design/DESIGN_NOTES.md, Direction C).
 * One stylesheet for every participant. Visual states are driven only by <html data-v="..."> which app.js and
 * voice.js set from their existing states; animations are decorative and never gate or delay anything.
 * No external resources (CSP 'self'): system fonts, inline SVG icons.
 *
 * Colour palettes are token sets. The default (:root) is palette A "slate + blue". B and C exist for the PI's
 * choice; in the dev phase only, ?palette=b|c previews them (app.js). Switching the default = one line
 * (copy the chosen block into :root). */
:root, [data-palette="a"] {                      /* A: cool slate + blue */
  --bg: #EEF2F6;
  --surface: #FFFFFF;
  --surface-2: #F4F6F9;
  --ink: #152030;
  --ink-2: #4A5769;
  --line: #D3DAE3;
  --tile-ai: #14233B;
  --tile-ai-2: #1D3352;
  --tile-you: #F8FAFC;
  --wave: #9EC2F5;
  --tag-ai-bg: rgba(6, 14, 28, .78);
  --accent: #1E5BB8;
  --accent-hover: #174A96;
  --accent-soft: #E2EBF8;
  --ring: rgba(30, 91, 184, .16);
  --active: #7DB0FF;
  --rec: #C0272D;
  --rec-soft: rgba(192, 39, 45, .15);
  --end-border: #EBC1C3;
  --warn-ink: #6B4A00;
  --warn-bg: #FFF3CD;
  --ok: #17703A;
  --disabled-bg: #E3E8EE;
  --disabled-ink: #56626F;
  --dot: #8C98A8;
  --backdrop: rgba(12, 20, 32, .5);
}
[data-palette="b"] {                             /* B: fresh white + teal */
  --bg: #F6FAFA;
  --surface: #FFFFFF;
  --surface-2: #EFF5F5;
  --ink: #0F2627;
  --ink-2: #435859;
  --line: #D2E0E0;
  --tile-ai: #0C3A3C;
  --tile-ai-2: #12504F;
  --tile-you: #FFFFFF;
  --wave: #8BE0D4;
  --tag-ai-bg: rgba(3, 22, 23, .75);
  --accent: #0A726D;
  --accent-hover: #085C58;
  --accent-soft: #DDF1EF;
  --ring: rgba(10, 114, 109, .16);
  --active: #5BD8C7;
  --rec: #C0272D;
  --rec-soft: rgba(192, 39, 45, .15);
  --end-border: #EBC1C3;
  --warn-ink: #6B4A00;
  --warn-bg: #FFF3CD;
  --ok: #17703A;
  --disabled-bg: #E2ECEC;
  --disabled-ink: #506363;
  --dot: #86A0A0;
  --backdrop: rgba(5, 25, 26, .5);
}
[data-palette="c"] {                             /* C: deep indigo + soft violet */
  --bg: #F3F2FA;
  --surface: #FFFFFF;
  --surface-2: #F1EFFA;
  --ink: #1C1934;
  --ink-2: #514C6D;
  --line: #DAD6EC;
  --tile-ai: #211B48;
  --tile-ai-2: #2E2665;
  --tile-you: #FBFAFF;
  --wave: #C4B5FF;
  --tag-ai-bg: rgba(12, 9, 32, .75);
  --accent: #5537C9;
  --accent-hover: #452BA8;
  --accent-soft: #ECE7FD;
  --ring: rgba(85, 55, 201, .15);
  --active: #B39CFF;
  --rec: #C0272D;
  --rec-soft: rgba(192, 39, 45, .15);
  --end-border: #EBC1C3;
  --warn-ink: #6B4A00;
  --warn-bg: #FFF3CD;
  --ok: #17703A;
  --disabled-bg: #E6E3F1;
  --disabled-ink: #5A5572;
  --dot: #9790B0;
  --backdrop: rgba(18, 14, 40, .5);
}
:root {
  --error: var(--rec);
  --level: 0;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
.hidden, [hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--font); overflow-x: hidden; }
p { margin: 0; }
h1, h2 { margin: 0; line-height: 1.25; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.error { color: var(--error); font-weight: 700; }
.lead { font-size: 21px; line-height: 1.5; }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; border-radius: 10px; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
  stroke-linejoin: round; flex: none; }
.ico .fill { fill: currentColor; stroke: none; }

/* ---------- top bar ---------- */
.topbar { height: 56px; display: flex; align-items: center; padding: 0 24px; }
.brand { font-size: 15px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

main { padding: 0 24px 24px; min-height: calc(100vh - 56px); display: flex; flex-direction: column; }

/* ---------- buttons ---------- */
button { font: inherit; cursor: pointer; color: var(--ink); }
button:disabled { cursor: not-allowed; }
.buttons button, #completion-redirect, #final-redirect, #send, .dialog button {
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; }
button.primary, #send.primary, #completion-redirect.primary, #final-redirect.primary, .buttons button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover:not(:disabled), #send.primary:hover:not(:disabled) { background: var(--accent-hover); }
button.secondary:hover:not(:disabled) { border-color: var(--ink-2); }
button.danger, .dialog button.danger { background: var(--rec); border-color: var(--rec); color: #fff; }
button.quiet { background: transparent; border-color: transparent; color: var(--ink-2); text-decoration: underline; font-weight: 400; }
.buttons button:disabled, #send:disabled, #completion-redirect:disabled { background: var(--disabled-bg);
  border-color: var(--disabled-bg); color: var(--disabled-ink); }
button.wide { min-width: 220px; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.buttons.end { justify-content: flex-end; }
.buttons.centered { justify-content: center; }
.buttons.tight { margin-top: 10px; }

/* ---------- panels: consent, framing, messages, closing ---------- */
.panel { width: 100%; max-width: 720px; margin: 32px auto 0; background: var(--surface); border-radius: 20px; padding: 36px 40px;
  display: flex; flex-direction: column; gap: 16px; box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .35); }
.panel h1 { font-size: 26px; }
.consent-text { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  max-height: 45vh; overflow-y: auto; }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 10px 0; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.completion { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 4px 0; padding: 20px 22px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
/* ---------- participant flow pages (D#100): consent sections, choices, survey, debrief, final ---------- */
h1[tabindex="-1"]:focus { outline: none; box-shadow: none; }   /* programmatic focus for screen readers only */
.subtitle { font-size: 18px; font-weight: 700; color: var(--ink-2); margin-top: -8px; }
.consent-text { white-space: normal; display: flex; flex-direction: column; gap: 10px; max-height: none; overflow: visible; }  /* the whole sheet in the page flow (D#100) */
.consent-text h2 { font-size: 17px; margin-top: 10px; }
#consent-sections { display: flex; flex-direction: column; gap: 10px; }
.consent-text p { white-space: pre-wrap; }
fieldset.q { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* D#211 (survey v4): a required rating item left unanswered when Continue was pressed */
fieldset.q.q-missing { outline: 2px solid var(--error); outline-offset: 8px; border-radius: 4px; }
fieldset.q.q-missing .q-prompt { color: var(--error); }
.q-prompt { padding: 0; font-weight: 700; font-size: 18px; line-height: 1.4; margin-bottom: 6px; }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); cursor: pointer; }
.choice:hover { border-color: var(--ink-2); }
.choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
/* D#105 7-point items: one row, "Strongly disagree" -> "Strongly agree" in order, then "Prefer not to say" set apart
   by a gap and a dashed divider style (phones: a vertical list, see the 760 px media query) */
.choices.scale { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 6px; }
/* labels wrap only between words (never "Somewha / t"); narrower rows get a slightly smaller label, not below 12.5px */
.choices.scale .choice { flex-direction: column; justify-content: flex-start; text-align: center; gap: 6px; padding: 10px 4px;
  font-size: 13.5px; line-height: 1.25; word-break: normal; overflow-wrap: normal; hyphens: none; }
@media (max-width: 1100px) { .choices.scale .choice { font-size: 12.5px; padding: 10px 2px; } }
.choices.scale .choice-prefer { margin-left: 12px; border-style: dashed; background: var(--surface-2); color: var(--ink-2); }
.survey form { display: flex; flex-direction: column; gap: 26px; }
/* D#112 interview progress: a thin bar under the header, no numbers; eases between steps (no motion if reduced) */
.progress { height: 6px; width: 100%; max-width: 1280px; margin: 0 auto 10px; background: var(--line); border-radius: 999px;
  overflow: hidden; flex: none; }
.progress-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .6s ease; }
@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } }
/* D#111 "Before We Begin": age dropdown, short text boxes, and the IU completion code with its Copy button */
.select, .text-input { font: inherit; font-size: 16px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); color: var(--ink); width: 100%; max-width: 360px; }
.select:focus-visible, .text-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.copy-btn { min-height: 44px; min-width: 88px; }
.survey .section-title { font-size: 20px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.survey .group-title { font-size: 18px; font-weight: 700; line-height: 1.25; margin: 26px 0 4px; padding-bottom: 6px;
                      border-bottom: 1px solid var(--line); }   /* D#214: 18px bold, thin line under (PI) */
.survey hr.group-end { border: 0; border-top: 1px solid var(--line); margin: 24px 0 8px; }   /* D#214 */
.survey textarea, .q-text textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); color: var(--ink); resize: vertical; }
.survey textarea:focus-visible { border-color: var(--accent); outline-offset: 0; box-shadow: none; }
.q-text { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.stack-left { display: flex; flex-direction: column; gap: 12px; }
.choice-box { background: var(--surface-2); border: 1px solid var(--line) !important; border-radius: 14px; padding: 18px 18px 16px !important; }
.choice-box .q-prompt { float: left; width: 100%; }
.choice-box .q-prompt + * { clear: both; }
.code { overflow-wrap: anywhere; }
.code { font: 700 26px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace; letter-spacing: .06em; }

/* waiting area (PLAN_SCALE §6; styles only until the backend exists) */
.waitroom { text-align: center; max-width: 560px; margin-top: 10vh; }
.eyebrow { font-size: 14px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.stack { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.big-line { font-size: 24px; font-weight: 700; }
.queue-dots { display: flex; gap: 12px; margin: 8px 0; }
.queue-dots i { width: 18px; height: 18px; border-radius: 50%; background: var(--dot); }
.queue-dots i.me { background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.queue-dots i.later { background: transparent; border: 2px dashed var(--dot); }

/* ================= tiles ================= */
.tile { position: relative; border-radius: 22px; overflow: hidden; display: grid; place-items: center; min-height: 0; }
.ai-tile { background: radial-gradient(90% 90% at 50% 40%, var(--tile-ai-2), var(--tile-ai)); }
.you-tile { background: var(--tile-you); border: 1px solid var(--line); }
.tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); }
.ai-tile .tag { background: var(--tag-ai-bg); color: #fff; border-color: transparent; }
.tag-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }

/* abstract interviewer presence: a fixed CSS loop, NOT driven by the audio, identical for every question */
.wave { display: flex; align-items: center; gap: 10px; height: 120px; }
.wave i { width: 12px; height: 16px; border-radius: 6px; background: var(--wave); opacity: .5; }
[data-v="speaking"] .wave i { opacity: 1; animation: bar 1.1s ease-in-out infinite alternate; }
[data-v="speaking"] .wave i:nth-child(1) { height: 30px; animation-delay: -.2s; }
[data-v="speaking"] .wave i:nth-child(2) { height: 64px; animation-delay: -.5s; }
[data-v="speaking"] .wave i:nth-child(3) { height: 96px; animation-delay: -.1s; }
[data-v="speaking"] .wave i:nth-child(4) { height: 70px; animation-delay: -.7s; }
[data-v="speaking"] .wave i:nth-child(5) { height: 104px; animation-delay: -.3s; }
[data-v="speaking"] .wave i:nth-child(6) { height: 56px; animation-delay: -.6s; }
[data-v="speaking"] .wave i:nth-child(7) { height: 26px; animation-delay: -.4s; }
@keyframes bar { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
[data-v="thinking"] .wave i, [data-v="processing"] .wave i { animation: pulse 1.4s ease-in-out infinite; }
[data-v="thinking"] .wave i:nth-child(odd), [data-v="processing"] .wave i:nth-child(odd) { animation-delay: .35s; }
@keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
/* D#126: Listening - a soft, slow pulse of the interviewer's bars while the participant records */
[data-v="recording"] .wave i { animation: listen 2.6s ease-in-out infinite; }
[data-v="recording"] .wave i:nth-child(even) { animation-delay: .4s; }
@keyframes listen { 0%, 100% { opacity: .3; transform: scaleY(1); } 50% { opacity: .65; transform: scaleY(1.6); } }
/* D#126: the status word under the interviewer visual (Speaking / Listening / Thinking; empty when idle) */
.ai-tile { align-content: center; row-gap: 2px; }
.ai-state { min-height: 1.3em; font-size: 14px; letter-spacing: .02em; color: #fff; opacity: .85; }
[data-v="speaking"] .ai-tile { box-shadow: inset 0 0 0 4px var(--active); }
[data-v="speaking"] .ai-tile .tag-dot { background: var(--active); }
[data-v="ready"] .you-tile { box-shadow: inset 0 0 0 4px var(--accent); }
[data-v="recording"] .you-tile { box-shadow: inset 0 0 0 4px var(--rec); }

/* the participant's tile: microphone + live level ring only (no video placeholder, no camera).
 * In voice mode the microphone IS the record control (#v-mic): tap to start, tap again to stop. */
#screen-voice .you-tile { grid-template-rows: auto auto auto; align-content: center; justify-items: center; gap: 8px;
  padding: 16px 16px 56px; }
.mic-wrap { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.ring { position: absolute; inset: 22px; border-radius: 50%; background: var(--ring);
  transform: scale(calc(1 + var(--level) * .5)); pointer-events: none; }
.mic-face { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--disabled-bg);
  color: var(--disabled-ink); display: grid; place-items: center; }
.mic-face .ico { width: 32px; height: 32px; }
.preview .mic-face { background: var(--accent); color: #fff; }

button.tile-mic { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; background: var(--accent); color: #fff;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); }
button.tile-mic .ico { width: 38px; height: 38px; }
button.tile-mic .rec-dot { display: none; width: 30px; height: 30px; border-radius: 7px; background: #fff; }
button.tile-mic:hover:not(:disabled) { background: var(--accent-hover); }
button.tile-mic:focus-visible { border-radius: 50%; }
button.tile-mic:disabled { background: var(--disabled-bg); color: var(--disabled-ink); box-shadow: none; }
button.tile-mic.recording { background: var(--rec); }
button.tile-mic.recording .mic-ico { display: none; }
button.tile-mic.recording .rec-dot { display: block; }
[data-v="speaking"] .you-tile .ring, [data-v="thinking"] .you-tile .ring, [data-v="processing"] .you-tile .ring { opacity: 0; }
[data-v="recording"] .you-tile .ring { background: var(--rec-soft); }
.mic-hint { min-height: 24px; font-weight: 700; color: var(--ink); text-align: center; }
[data-v="recording"] .mic-hint { color: var(--rec); }
.you-tile .warning { max-width: calc(100% - 16px); font-size: 15px; padding: 8px 12px; }
.rec { position: absolute; top: 14px; right: 16px; display: flex; gap: 8px; align-items: center; color: var(--rec);
  font-weight: 700; font-variant-numeric: tabular-nums; }
.rec .meter { display: none; }         /* the ring shows the level; the bar is kept for voice.js */
.rec .rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--rec); }

/* ================= call layout ================= */
.call { flex: 1; display: flex; flex-direction: column; gap: 16px; max-width: 1280px; width: 100%; margin: 0 auto; }
.notes-open .call { padding-right: 380px; max-width: none; }
.stage { display: flex; flex-direction: column; gap: 14px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: min(46vh, 420px); }
.caption { background: var(--surface); border-radius: 18px; padding: 20px 26px 22px; box-shadow: 0 12px 30px -24px rgba(0, 0, 0, .5); }
.caption:has(.cap-q:empty) { display: none; }
.cap-who, .cap-heard .who { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cap-q { font-size: 26px; line-height: 1.42; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-v="thinking"] .cap-q, [data-v="processing"] .cap-q { color: var(--ink-2); }
.cap-heard { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px;
  overflow-wrap: anywhere; }
.cap-heard .who { display: block; color: var(--accent); }
/* Study 2 choice turns (D#132): two numbered options under the caption; the AI's pick / the participant's click is
   highlighted (.picked). Same look in both Study 2 arms. */
.choice { display: grid; gap: 10px; margin-top: 14px; }
.choice-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; font-size: 17px;
  color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px;
  cursor: pointer; }
.choice-opt:disabled { cursor: default; color: inherit; opacity: 1; }
.choice-opt:not(:disabled):hover { border-color: var(--accent); }
.choice-n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); font-weight: 700; }
.choice-opt.picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.choice-opt.picked .choice-n { background: var(--accent); border-color: var(--accent); color: var(--surface); }
#v-transcript-text { white-space: pre-wrap; }

.status { color: var(--ink-2); text-align: center; min-height: 26px; }
.status .wait-notice { font-style: italic; margin-top: 2px; }
.dots { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.dots span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .3; animation: blink 1.4s infinite; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.notice, .warning { align-self: center; max-width: 720px; background: var(--warn-bg); color: var(--warn-ink); border-radius: 12px;
  padding: 10px 16px; font-weight: 700; text-align: center; }

/* ---------- control dock: Replay · Questions so far · End interview ---------- */
.dock { align-self: center; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px;
  padding: 10px; background: var(--surface); border-radius: 999px; box-shadow: 0 16px 36px -22px rgba(0, 0, 0, .5); }
.dock-btn { min-height: 52px; min-width: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px;
  font-weight: 700; color: var(--ink); text-decoration: none; }
.dock-btn:hover { border-color: var(--ink-2); }
.dock-btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.dock-btn.end { color: var(--rec); border-color: var(--end-border); background: var(--surface); }
.dock-btn.play { background: var(--accent); border-color: var(--accent); color: #fff; }
#v-replay { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }

/* ---------- text mode: the "You" tile holds the input ---------- */
.you-text { place-items: stretch; padding: 18px 18px 58px; }
.reply { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.reply textarea { flex: 1; width: 100%; min-height: 96px; resize: none; font: inherit; font-size: 17px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); }
.reply textarea:disabled { background: var(--surface-2); }
.reply textarea:focus-visible { border-color: var(--accent); outline-offset: 0; box-shadow: none; }
.reply-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.reply-bar #counter { font-size: 14px; }
[data-v="ready"] .you-text { box-shadow: inset 0 0 0 4px var(--accent); }

/* ---------- notes panel (earlier questions; text mode: the conversation) ---------- */
.notes { position: fixed; top: 56px; right: 16px; bottom: 16px; width: 360px; background: var(--surface); border-radius: 20px;
  padding: 16px 20px 20px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35); overflow: auto; z-index: 20; }
.notes-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.notes-head h2 { font-size: 18px; }
.icon-btn { width: 48px; height: 48px; border: 0; background: transparent; border-radius: 12px; display: grid; place-items: center; }
.icon-btn:hover { background: var(--surface-2); }
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { border-radius: 12px; padding: 10px 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; }
.msg .who { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.msg.interviewer { background: var(--surface-2); }
.msg.participant { background: var(--accent-soft); margin-left: 24px; }
#vchat .msg:last-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- device check ("check your microphone and speaker") ---------- */
.prejoin { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; max-width: 1180px; width: 100%; margin: 24px auto 0;
  align-items: stretch; }
.prejoin .you-tile { min-height: 460px; }
.prejoin .meter { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); width: 220px; height: 8px;
  border-radius: 4px; background: var(--disabled-bg); overflow: hidden; }
.meter-bar { height: 100%; width: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); }
.prejoin .side { margin: 0; max-width: none; }
.ac-step { display: flex; gap: 14px; }
.step-mark { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); }
.step-mark .ico { width: 20px; height: 20px; }
.step-mark .ok-ico { display: none; }
.ac-step.done .step-mark { background: var(--accent); color: #fff; }
.ac-step.done .step-mark .ico:not(.ok-ico) { display: none; }
.ac-step.done .step-mark .ok-ico { display: block; stroke-width: 2.6; }
.step-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ok { color: var(--ok); font-weight: 700; margin-top: 8px; }
.quiet-hint { background: var(--accent-soft); color: var(--ink); border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.side .buttons + .buttons { margin-top: 0; }
button.giveup { padding-left: 0; padding-right: 0; min-height: 48px; text-align: left; color: var(--rec); }

/* ---------- end-interview dialog ---------- */
.dialog { border: 0; border-radius: 20px; padding: 26px 28px 22px; max-width: 440px; width: calc(100% - 32px); font-size: 18px;
  color: var(--ink); background: var(--surface); }
.dialog::backdrop { background: var(--backdrop); }
.dialog .buttons { margin-top: 20px; }

/* DEV-ONLY debug badge (study.debug_show_arm, dev phase only): unchanged look, never clickable */
.debug-badge { position: fixed; right: 8px; bottom: 8px; z-index: 1000; background: #b42318; color: #ffffff;
  font: 12px/1.3 monospace; padding: 4px 8px; border-radius: 4px; opacity: 0.9; pointer-events: none; }

/* ================= phone ================= */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .topbar { height: 48px; padding: 0 16px; }
  main { padding: 0 12px 12px; min-height: calc(100vh - 48px); }
  .panel { padding: 24px 20px; margin-top: 8px; border-radius: 16px; }
  .panel h1 { font-size: 22px; }
  .lead { font-size: 19px; }
  .buttons button { flex: 1 1 auto; }
  button.wide { width: 100%; }
  .waitroom { margin-top: 6vh; }
  .choices.scale { grid-template-columns: 1fr; }
  .choices.scale .choice { flex-direction: row; justify-content: flex-start; text-align: left; padding: 10px 14px; font-size: 16px; }
  .choices.scale .choice-prefer { margin-left: 0; margin-top: 8px; }
  .q-prompt { font-size: 17px; }

  /* stacked: interviewer tile, question, status, then YOUR tile (the record control) within thumb reach, then the dock */
  .call { gap: 10px; }
  .notes-open .call { padding-right: 0; }
  .stage, .tiles { display: contents; }
  .ai-tile { order: 1; height: 128px; }
  .caption { order: 2; padding: 16px 18px; }
  .status { order: 3; }
  .notice { order: 4; }
  .you-tile { order: 5; }
  #screen-voice .you-tile { padding: 12px 12px 52px; }
  #screen-interview .you-text { min-height: 230px; }
  .dock { order: 6; width: 100%; border-radius: 22px; }
  .wave { height: 64px; gap: 8px; margin-bottom: 28px; }      /* clear of the "AI interviewer" tag */
  .wave i { width: 10px; }
  .ai-tile .wave { height: 80px; }
  .ai-state { font-size: 12px; }
  [data-v="speaking"] .wave i:nth-child(1), [data-v="speaking"] .wave i:nth-child(7) { height: 22px; }
  [data-v="speaking"] .wave i:nth-child(2), [data-v="speaking"] .wave i:nth-child(4), [data-v="speaking"] .wave i:nth-child(6) { height: 42px; }
  [data-v="speaking"] .wave i:nth-child(3), [data-v="speaking"] .wave i:nth-child(5) { height: 60px; }
  .rec { top: auto; bottom: 16px; right: 16px; }
  .mic-wrap { width: 128px; height: 128px; }
  .ring { inset: 18px; }
  button.tile-mic { width: 88px; height: 88px; }
  .mic-face { width: 60px; height: 60px; }
  .mic-face .ico { width: 26px; height: 26px; }
  .cap-q { font-size: 20px; }
  .cap-heard { font-size: 15px; }
  .dock-btn { padding: 0 14px; font-size: 14px; flex: 1 1 auto; }
  .notes-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .notes-toggle { flex: 0 0 auto; }

  .prejoin { grid-template-columns: 1fr; margin-top: 8px; gap: 12px; }
  .prejoin .you-tile { min-height: 190px; order: 0; }
  .prejoin .meter { bottom: 20px; width: 150px; right: 16px; left: auto; transform: none; }
  /* UBUG-002: on phones the panel drops from the TOP (over the interviewer tile and caption), so the You tile
     (microphone or reply box) and the control dock stay visible and usable while it is open */
  .notes { top: 0; left: 0; right: 0; bottom: auto; width: auto; max-height: min(50vh, 420px); border-radius: 0 0 22px 22px;
    z-index: 30; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); }
  .notes .icon-btn { border: 1px solid var(--line); }

  /* debug badge moves to the top so it never covers the controls */
  .debug-badge { top: 8px; bottom: auto; max-width: calc(100% - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}