[hidden] { display: none !important; }
#stage { position: relative; overflow: hidden; }
#avatarCanvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; background: #171716; }
#stage.live { padding: 0; min-height: 0; background: #171716; }
#stage.live #liveBadge { position: absolute; top: 12px; left: 12px; display: block; padding: 6px 10px; border-radius: 999px; color: white; background: rgba(20,20,19,.76); font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); }
.messageActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.messageActions[hidden] { display: none; }
.messageActions button { padding: 5px 9px; border: 1px solid rgba(67,55,40,.18); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.messageActions button:hover { background: rgba(67,55,40,.07); }
.messageActions button:disabled { opacity: .5; cursor: default; }
@media (max-width: 650px) {
  #stage.live { margin-left: -16px; margin-right: -16px; border-radius: 0; }
  #stage.live #liveBadge { top: 8px; left: 8px; }
  #messages { max-height: none; overflow: visible; }
  #quickActions { margin-right: 0; max-width: 100%; }
}
/* Karaoke transcript: words appear as Joe says them; "Show text" reveals everything. */
.message .unspoken { color: transparent; user-select: none; }
.message.pending .body::after { content: ' …'; color: var(--muted); animation: pulse 1.2s infinite; }
/* Rehearsal metrics */
.delivery { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.delivery b { color: var(--ink); }
.delivery i { font-style: normal; color: #4f7a6c; }
#attemptMetrics { font-size: 12px; margin: 6px 0 2px; color: var(--ink); }
#attemptMetrics span { display: inline-block; background: white; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; margin: 3px 4px 3px 0; }
#attemptMetrics em { display: block; font-style: normal; color: #4f7a6c; margin-top: 3px; }
#recordAttempt { background: var(--rust); color: white; border-color: var(--rust); font-weight: 600; }
/* The live stage stays in view while Joe talks instead of yanking the page to the top. */
#stage.live { position: sticky; top: 0; z-index: 5; box-shadow: 0 10px 28px #0006; margin-bottom: 14px; }
#stage.live #avatarCanvas { max-height: 46vh; object-fit: cover; }
@media (max-width: 650px) { #stage.live #avatarCanvas { max-height: 34vh; } #stage.live { position: sticky; } }
/* Rehearsal scenario */
#scenarioPanel { margin: 6px 0 10px; font-size: 14px; }
#scenarioPanel summary { cursor: pointer; color: var(--ink); }
#scenarioPanel .muted { color: var(--muted); font-weight: 400; }
.scenarioForm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.scenarioForm label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 3px; }
.scenarioForm input { font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
@media (max-width: 650px) { .scenarioForm { grid-template-columns: 1fr; } }
/* Attempt playback + live preview */
.delivery .play { font-size: 11px; padding: 1px 7px; margin-right: 6px; border-radius: 999px; border: 1px solid var(--line); background: white; cursor: pointer; }
#livePreview { font-size: 13px; color: var(--muted); margin: 6px 4px 0; font-style: italic; }
#attemptMetrics em.warn { color: #a3562b; }
/* Wrap-up plan */
.message.wrapup { border-left: 4px solid #4f7a6c; }
#wrapUp { border-color: #4f7a6c; color: #2f5548; font-weight: 600; }
/* Product framing: one-line disclosure, About panel, starters, first-run screen, phone polish */
#disclosure { font-size: 13px; line-height: 1.45; }
#disclosure .link { background: none; border: none; padding: 0; margin-left: 6px; color: #7a5a1e; text-decoration: underline; cursor: pointer; font: inherit; }
#aboutPanel { font-size: 13px; margin: 6px 0 10px; }
#aboutBody div { display: grid; grid-template-columns: 140px 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
#aboutBody b { color: var(--muted); font-weight: 600; }
#starters p { margin: 6px 0 8px; color: var(--muted); font-size: 14px; }
.starterGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.starterGrid button { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: white; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.starterGrid button:hover { border-color: var(--sage); }
#welcome { position: fixed; inset: 0; background: #1b1f1ecc; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.welcomeCard { background: var(--paper, #fdfcf8); color: var(--ink); max-width: 560px; border-radius: 16px; padding: 22px 24px; box-shadow: 0 20px 60px #0008; font-size: 15px; line-height: 1.5; }
.welcomeCard h2 { margin: 0 0 10px; font-size: 22px; }
.welcomeCard p { margin: 0 0 10px; }
#welcomeOk { margin-top: 6px; padding: 10px 16px; border-radius: 999px; border: none; background: var(--rust); color: white; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
#quickActions { flex-wrap: wrap; overflow: visible; }
@media (max-width: 650px) {
  .starterGrid { grid-template-columns: 1fr; }
  header button.quiet { white-space: nowrap; font-size: 13px; padding: 8px 12px; }
  #stage { min-height: 0; }
  .toolbar { gap: 8px 12px; }
  #messages { min-height: 40px; }
}
/* Learner memory */
.memorySentence { margin: 4px 0 8px; font-size: 15px; color: var(--ink); }
.memoryFacts div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; font-size: 13px; padding: 3px 0; }
.memoryFacts b { color: var(--muted); font-weight: 600; }
#learnerSummary small { display: block; color: var(--muted); margin-top: 6px; font-size: 12px; }
#learnerSummary textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; margin: 4px 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
#learnerSummary button { margin: 4px 6px 4px 0; }
.lastTime { background: #eef3f0; border-radius: 10px; padding: 8px 12px; font-size: 14px; color: #2f5548; margin: 0 0 8px; }
/* No empty gap before the starters on a new lesson */
#messages:empty { min-height: 0; padding: 0; }
/* Idle loop: Joe is on screen listening between turns; the live canvas takes over while he speaks */
#stage.idle { position: relative; padding: 0; background: #000; border-radius: 16px; overflow: hidden; }
#stage.idle #idleLoop { display: block; width: 100%; max-height: 46vh; object-fit: cover; }
@media (max-width: 650px) { #stage.idle #idleLoop { max-height: 34vh; } }
/* Idle/live stage: one full-width 16:9 frame; the reference footage's letterbox bars are cropped away */
#stage.idle, #stage.live { display: block; padding: 0; min-height: 0; background: #0b0d0c; border-radius: 16px; overflow: hidden; position: relative; }
#stage.idle #idleLoop, #stage.live #avatarCanvas { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: 46vh; object-fit: cover; object-position: center 40%; }
#stage.idle .stageCopy, #stage.live .stageCopy, #stage.idle .portrait, #stage.live .portrait { display: none; }
#stage.idle #liveBadge, #stage.live #liveBadge { position: absolute; top: 12px; left: 12px; }
@media (max-width: 650px) { #stage.idle #idleLoop, #stage.live #avatarCanvas { max-height: 34vh; } }
#stage.idle #liveBadge { display: block; padding: 6px 10px; border-radius: 999px; color: white; background: rgba(20,20,19,.76); font-size: 12px; font-weight: 600; }
/* ---- Joe's review, September 2026 ---- */
/* Presence and words together: the stage (portrait or video, plus status) stays pinned while the newest bubble is kept under it. */
#stage { position: sticky; top: 0; z-index: 5; min-height: 0; padding: 14px 18px; margin-bottom: 10px; }
#stage:not(.idle):not(.live) { box-shadow: 0 6px 18px #0002; }
.face { width: 64px; height: 64px; font-size: 30px; }
/* Recording state is unmistakable: red mic, a red bar with the running timer and one big Stop button, pinned to the bottom. */
#mic.recording { background: #b3261e !important; animation: recordPulse 1.4s ease-in-out infinite; box-shadow: 0 0 0 5px #b3261e44; }
@keyframes recordPulse { 50% { box-shadow: 0 0 0 10px #b3261e22; } }
#recordBar { position: sticky; bottom: 8px; z-index: 6; display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 12px 16px; border-radius: 14px; background: #b3261e; color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 8px 24px #0006; }
#recordBar .dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; animation: pulse 1s infinite; flex: none; }
#recordStop { margin-left: auto; border: 0; border-radius: 10px; padding: 10px 16px; background: #fff; color: #7a1710; font: inherit; font-weight: 700; font-size: 15px; white-space: nowrap; }
/* Send readiness: the composer's Send is grey until there is text; the transcript review turns green with one clear action. */
#send:disabled { background: #8f9a93; opacity: 1; }
body[data-state="thinking"] #send, body[data-state="speaking"] #send { background: #8f9a93; }
body[data-state="reviewing"] #transcriptReview { border-color: #2f7a4f; box-shadow: 0 0 0 4px #2f7a4f33; }
#reviewHint { margin: 0 0 6px; font-weight: 700; color: #2f7a4f; font-size: 15px; }
#sendTranscript { background: #2f7a4f; font-weight: 700; font-size: 15px; padding: 10px 16px; }
#transcriptReview div:last-child { display: flex; justify-content: flex-end; gap: 8px; }
#recordingHelp { font-size: 13px; }
body[data-state="listening"] #recordingHelp { color: #b3261e; font-weight: 600; }
body[data-state="reviewing"] #recordingHelp { color: #2f7a4f; font-weight: 600; }
/* Dim display: lower glare for sore eyes. Follows the OS dark preference and can be switched by hand. */
html[data-theme="dim"] { color-scheme: dark; --ink: #e4dfd4; --muted: #a8a295; --cream: #121416; --paper: #1b1e21; --sage: #5f8579; --rust: #c0704c; --line: #363b40; }
html[data-theme="dim"] main { box-shadow: none; }
html[data-theme="dim"] #disclosure { background: #2a2411; border-left-color: #8a6a24; color: #e3d9bd; }
html[data-theme="dim"] #disclosure .link { color: #d8b56a; }
html[data-theme="dim"] #stage { background: #23292c; }
html[data-theme="dim"] .user { background: #263238; }
html[data-theme="dim"] .assistant { background: #2d2823; }
html[data-theme="dim"] .quiet, html[data-theme="dim"] #quickActions button, html[data-theme="dim"] #lessonHistory button, html[data-theme="dim"] select,
html[data-theme="dim"] .starterGrid button, html[data-theme="dim"] #attemptMetrics span, html[data-theme="dim"] .delivery .play,
html[data-theme="dim"] #transcriptReview textarea, html[data-theme="dim"] .scenarioForm input, html[data-theme="dim"] #learnerSummary textarea { background: #262b2f; color: var(--ink); border-color: var(--line); }
html[data-theme="dim"] #composer { background: #262b2f; box-shadow: none; }
html[data-theme="dim"] textarea { background: transparent; color: var(--ink); }
html[data-theme="dim"] #transcriptReview { background: #1e2a25; border-color: #3d5a50; }
html[data-theme="dim"] .lastTime { background: #1e2a25; color: #bcd8cb; }
html[data-theme="dim"] .error { background: #4a2a26 !important; }
html[data-theme="dim"] .welcomeCard { background: #1b1e21; }
html[data-theme="dim"] .messageActions button { border-color: #4a4f54; }
html[data-theme="dim"] .avatarAction { background: #2d2823; border-color: #5a4a3a; }
html[data-theme="dim"] .delivery i, html[data-theme="dim"] #attemptMetrics em, html[data-theme="dim"] #reviewHint, html[data-theme="dim"] body[data-state="reviewing"] #recordingHelp { color: #8fc7ad; }
html[data-theme="dim"] #wrapUp { color: #8fc7ad; border-color: #4f7a6c; }
html[data-theme="dim"] #stage:not(.idle):not(.live) { box-shadow: none; }
/* ---- First-visit positioning and a persistent presence (September 2026 feedback) ---- */
/* The stage always shows Joe: a still photo from his consented lesson recording when generated video is off, unavailable or
   still loading. The ring says what he is doing (listening, thinking, speaking) without any head motion. */
.portrait { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.portrait .face { display: none; }
#portraitPhoto { display: block; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; object-position: 50% 42%; box-shadow: 0 0 0 3px var(--paper, #fffdf7), 0 0 0 6px #6b8e8355, 0 8px 22px #17323822; transition: box-shadow .35s ease; background: #cfd8d3; }
.portrait span { font-size: 11px; margin: 0; color: var(--muted); white-space: nowrap; }
.portrait[data-state="listening"] #portraitPhoto { box-shadow: 0 0 0 3px var(--paper, #fffdf7), 0 0 0 7px #b3261e88, 0 8px 22px #17323822; }
.portrait[data-state="thinking"] #portraitPhoto { box-shadow: 0 0 0 3px var(--paper, #fffdf7), 0 0 0 6px #6b8e83aa, 0 8px 22px #17323822; animation: breathe 1.6s ease-in-out infinite; }
.portrait[data-state="speaking"] #portraitPhoto { animation: speakRing 1.1s ease-in-out infinite; }
@keyframes speakRing { 0%, 100% { box-shadow: 0 0 0 3px var(--paper, #fffdf7), 0 0 0 6px #6b8e83aa, 0 8px 22px #17323822; } 50% { box-shadow: 0 0 0 3px var(--paper, #fffdf7), 0 0 0 11px #6b8e8366, 0 8px 22px #17323822; } }
@media (prefers-reduced-motion: reduce) { .portrait[data-state] #portraitPhoto, .portrait[data-state=thinking] .face { animation: none; } }
.stageNote { font-size: 12.5px; color: var(--muted); margin-top: 4px !important; }
#stage .stageCopy h2 { font-size: 21px; }
#disclosure .link + .link { margin-left: 10px; }
.welcomeCard { max-height: 92vh; overflow: auto; }
.welcomePhoto { float: right; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 42%; margin: 0 0 8px 12px; box-shadow: 0 0 0 3px #6b8e8355; }
.welcomeCard p { font-size: 14.5px; }
.welcomeCard h2 { padding-right: 84px; }
html[data-theme="dim"] #portraitPhoto { box-shadow: 0 0 0 3px #23292c, 0 0 0 6px #5f857966; }
html[data-theme="dim"] .portrait[data-state="listening"] #portraitPhoto { box-shadow: 0 0 0 3px #23292c, 0 0 0 7px #d05a50aa; }
@media (max-width: 650px) {
  #stage { flex-wrap: nowrap; align-items: center; gap: 14px; padding: 12px 14px; }
  #portraitPhoto { width: 72px; height: 72px; }
  .portrait { min-width: 72px; }
  #stage .stageCopy h2 { font-size: 17px; margin-bottom: 2px; }
  .stageNote { display: none; }
  .welcomeCard { padding: 18px 16px; font-size: 14px; }
  .welcomeCard h2 { font-size: 19px; padding-right: 0; }
  .welcomePhoto { width: 56px; height: 56px; }
}
/* The confirm button stays reachable while the card scrolls on a phone. */
#welcomeOk { position: sticky; bottom: 0; box-shadow: 0 -12px 16px -6px var(--paper, #fdfcf8), 0 0 0 6px var(--paper, #fdfcf8); }
/* Straight-answer hint after two Socratic turns; multi-line memory facts */
#answerHint { font-size: 13px; color: #2f5548; background: #eef3f0; border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
#answerHint .link { background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; margin-left: 6px; }
.memoryFacts span { white-space: pre-line; }
/* Durable take recovery stays readable and touchable in both themes. */
.recordLimit { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 14px; }
.recordLimit select, #transcriptReview button, #recoveryItems button, #recordPause, #recordStop, #keepTypedDraft { min-height: 44px; }
#continueRecording, #retryRecording, #keepRecording, #exportRecording, #recoveryItems button { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); padding: 10px 14px; font: inherit; }
#sendTranscript { border: 0; border-radius: 12px; }
#reviewAudio { display: block; width: 100%; margin: 10px 0; }
#transcriptReview > div, #transcriptReview details { margin-top: 12px; }
#transcriptReview > div { display: flex; flex-wrap: wrap; gap: 8px; }
#transcriptReview details > button, #transcriptReview details > a { margin: 6px 8px 6px 0; }
#transcriptReview a, #localRecordingExports a { color: var(--ink); text-decoration: underline; display: inline-block; padding: 12px 4px; }
#localRecordingExports { display: flex; flex-direction: column; align-items: flex-start; }
#captureStorage { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
#captureStorage:empty { display: none; }
#previousDrafts textarea { width: 100%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 10px; }
#previousDrafts label { display: block; margin: 10px 0; }
#recoveryItems > div { border-top: 1px solid var(--line); padding: 12px 0; overflow-wrap: anywhere; }
#recoveryItems p { margin: 0 0 8px; }
#recordBar { flex-wrap: wrap; }
#recordBarText { flex: 1 1 160px; }
body[data-state="paused"] #recordBar { border-color: var(--sage); background: var(--paper); color: var(--ink); }
body[data-state="paused"] #recordBar .dot { animation: none; background: var(--sage); }
:is(#transcriptReview, #recoveryPanel, #previousDraftPanel, #recordBar) :is(button, a, textarea, summary):focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #recordBar .dot { animation: none; } }

#legacySettingsNotice { margin: 12px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 14px; }
#legacySettingsNotice p { margin: 0 0 8px; }

.feedbackForm{display:flex;flex-direction:column;gap:.4rem;margin:.5rem 0;padding:.5rem;border:1px solid var(--line,#ccc);border-radius:.5rem;max-width:36rem}.feedbackForm textarea{font:inherit;width:100%;box-sizing:border-box}.feedbackForm button{align-self:flex-start}.feedbackState{font-size:.9em}

/* Playground link (2026-10-13) */
header a.playgroundLink{text-decoration:none;white-space:nowrap;font-size:13px;padding:8px 12px;background:#2f6fd6;border-color:#2f6fd6;color:#fff;font-weight:600}
header a.playgroundLink + #newChat{margin-left:8px}
header a.skillsLink{background:#1f4fa3;border-color:#1f4fa3;margin-right:6px}
@media (max-width:650px){header a.skillsLink{padding:7px 9px;font-size:12px}}
@media (max-width:650px){header:has(a.skillsLink:not([hidden])){flex-wrap:wrap;row-gap:10px}header:has(a.skillsLink:not([hidden]))>div:nth-child(2){flex:1 1 calc(100% - 64px)}header:has(a.skillsLink:not([hidden])) a.skillsLink{margin-left:auto}}