/* Separate conversation screen. Entry styles and behavior remain in style.css. */
body[data-screen="coach"] .wrap { width: min(calc(100% - 32px), 600px); }
body[data-screen="coach"] .topbar { min-height: 76px; padding: 12px 0 0; }
body[data-screen="coach"] #brand-logo { width: 180px; height: 54px; }
body[data-screen="coach"] .brand-fallback { font-size: 30px; }
body[data-screen="coach"] .intro,
body[data-screen="coach"] #chest { display: none; }
body[data-screen="coach"] #coach-heading { display: block !important; position: relative; padding: 12px 0 23px; text-align: center; }
body[data-screen="coach"] #back-to-start { display: flex; width: fit-content; min-height: 44px; margin-bottom: 7px; text-decoration: none; }
body[data-screen="coach"] #coach-heading h1 { font-size: clamp(34px, 7vw, 43px); line-height: 1.1; letter-spacing: -.015em; }
body[data-screen="coach"] #coach-heading small { display: block; margin-top: 9px; }
body[data-screen="coach"] .paper { padding: 0 22px; border-radius: 0; box-shadow: 0 4px 0 #e9e8e0; }
body[data-screen="coach"] #story-section { padding: 20px 0 16px; }
body[data-screen="coach"] #call-panel { display: flex; flex-direction: column; max-width: 100%; }
/* Idle is visible on direct /coach navigation; this does not start a call. */
body[data-screen="coach"] #coach-presence { display: flex !important; flex-direction: column; gap: 10px; padding-bottom: 19px; text-align: center; }
body[data-screen="coach"] .mascot-scene { display: grid; justify-items: center; gap: 9px; width: 150px; }
body[data-screen="coach"] .coach-mascot { display: block; width: 112px; height: 160px; object-fit: contain; image-rendering: pixelated; }
body[data-screen="coach"] .coach-name { font-family: 'Pixelify Sans', monospace; font-size: 21px; font-weight: 600; }
body[data-screen="coach"] .coach-state { min-height: 19px; margin-top: 3px; font-size: 12px; }
/* #voice-orb is kept as an SDK hook, but is now only three small pixel blocks. */
body[data-screen="coach"] #voice-orb { width: 46px; height: 23px; flex: none; border: 0; border-radius: 0; background: transparent; color: #7893a9; }
body[data-screen="coach"] .pixel-bars { width: 38px; height: 23px; gap: 5px; }
body[data-screen="coach"] .pixel-bars > i { width: 6px; height: calc(4px + 13px * var(--voice-level, 0)); transition: height 80ms steps(3, end); }
body[data-screen="coach"] .pixel-bars > i:nth-child(2) { height: calc(4px + 19px * var(--voice-level, 0)); }
body[data-screen="coach"] .pixel-bars > i:nth-child(3) { height: calc(4px + 10px * var(--voice-level, 0)); }
body[data-screen="coach"] #coach-presence[data-state="speaking"] #voice-orb { color: #8b799d; }
body[data-screen="coach"] #coach-presence[data-state="thinking"] #voice-orb { color: #aa8c3f; }
body[data-screen="coach"] #coach-presence[data-state="thinking"] .pixel-bars > i,
body[data-screen="coach"] #coach-presence[data-state="idle"] .pixel-bars > i,
body[data-screen="coach"] #coach-presence[data-state="connecting"] .pixel-bars > i,
body[data-screen="coach"] #coach-presence[data-state="ending"] .pixel-bars > i,
body[data-screen="coach"] #coach-presence[data-state="ended"] .pixel-bars > i,
body[data-screen="coach"] #coach-presence[data-state="muted"] .pixel-bars > i { height: 4px; }
body[data-screen="coach"] #coach-presence[data-state="idle"] #voice-orb,
body[data-screen="coach"] #coach-presence[data-state="ended"] #voice-orb,
body[data-screen="coach"] #coach-presence[data-state="muted"] #voice-orb { color: #96998e; }
body[data-screen="coach"] .call-heading { order: 1; }
body[data-screen="coach"] .call-state { font-size: 12px; }
body[data-screen="coach"] #recording-state { font-size: 9px; }
body[data-screen="coach"] #start { order: 2; width: min(calc(100% - 12px), 350px); margin-block: 10px 18px; font-size: 22px; }
body[data-screen="coach"] #call-controls { order: 5; gap: 10px; margin-top: 17px; }
body[data-screen="coach"] #call-controls button { flex: 1 1 0; min-width: 0; min-height: 46px; padding-inline: 8px; border-radius: 0; font-size: 12px; }
body[data-screen="coach"] #end-call { background: #f6f0eb; color: #714a3d; }
/* Use the already speaker-labeled live hook, not the duplicate unlabeled caption. */
body[data-screen="coach"] #coach-caption { display: none !important; }
body[data-screen="coach"] #transcript-current:not([hidden]) { display: block; order: 3; margin: 0 0 9px; padding: 13px 15px; border: 1px solid #d5cddd; border-left: 3px solid #a99ab9; border-radius: 0; background: #f3f0f6; color: #403b46; font-size: 14px; line-height: 1.65; }
body[data-screen="coach"] #transcript-details { display: block !important; order: 4; margin-top: 0; }
body[data-screen="coach"] #transcript-details > summary { min-height: 42px; font-size: 11px; }
body[data-screen="coach"] #transcript-log { max-height: 235px; padding: 7px 0 4px; border-top: 0; scroll-padding: 10px; scrollbar-width: thin; }
body[data-screen="coach"] #transcript-log > p,
body[data-screen="coach"] #transcript-log .transcript-turn { margin: 0 0 10px; padding: 11px 13px; border: 1px solid #e3e0d7; background: #faf9f3; color: #42443f; font-size: 14px; line-height: 1.6; }
body[data-screen="coach"] #transcript-log strong,
body[data-screen="coach"] #transcript-log .speaker { display: block; margin-bottom: 4px; font-size: 11px; color: #62645e; }
/* Parent can add data-speaker to final turns for subtle coach / user distinction. */
body[data-screen="coach"] #transcript-log [data-speaker="assistant"],
body[data-screen="coach"] #transcript-log [data-speaker="coach"] { margin-right: 18px; background: #f3f0f6; border-color: #e1d9e8; }
body[data-screen="coach"] #transcript-log [data-speaker="user"] { margin-left: 18px; background: #f2f5ef; border-color: #dce3d5; }
body[data-screen="coach"] .privacy-details { max-width: 100%; margin-top: 7px; }
body[data-screen="coach"] .privacy-details > summary { font-size: 10px; }
/* Only this empty evidence area is visible ahead of actual observations. */
body[data-screen="coach"] #report { display: block !important; padding: 22px 0 25px; }
body[data-screen="coach"] #report-title { font-family: 'Pixelify Sans', monospace; font-size: 25px; font-weight: 600; letter-spacing: 0; }
body[data-screen="coach"] #report[data-state="empty"] .section-head,
body[data-screen="coach"] #report[data-state="empty"] .evidence-note { display: none; }
body[data-screen="coach"] #report[data-state="empty"] #skills-empty { display: block !important; color: var(--muted); font-size: 13px; line-height: 1.6; }
body[data-screen="coach"] .skill-map { --map-gap: 26px; grid-template-columns: 66px minmax(0, 1fr); }
body[data-screen="coach"] .skill-avatar { padding: 9px 4px 8px; background: #f3f0f6; border: 0; border-radius: 0; }
body[data-screen="coach"] .skill-avatar svg { width: 46px; }
body[data-screen="coach"] .skill-avatar span { font-family: 'Pixelify Sans', monospace; font-size: 17px; }
body[data-screen="coach"] .skill { border-radius: 0; background: #fcfbf5; }
body[data-screen="coach"] .skill h3 { font-size: 15px; }
body[data-screen="coach"] .skill p { font-size: 13px; }
body[data-screen="coach"] .evidence-note { margin-bottom: 16px; font-size: 12px; }
body[data-screen="coach"] .page-footer { min-height: 62px; padding-bottom: 4px; }
body[data-screen="coach"] #based-on { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
body[data-screen="coach"] #based-on summary { font-size: 11px; }
body[data-screen="coach"] #based-on p { font-size: 12px; }
@media (min-width: 520px) {
  body[data-screen="coach"] .paper { padding-inline: 32px; }
  body[data-screen="coach"] #story-section { padding-top: 25px; }
  body[data-screen="coach"] .coach-mascot { width: 112px; height: 160px; }
  body[data-screen="coach"] #transcript-log { max-height: 270px; }
  body[data-screen="coach"] #call-controls { width: 330px; align-self: center; }
}
@media (max-width: 360px) {
  body[data-screen="coach"] .paper { padding-inline: 16px; }
  body[data-screen="coach"] #coach-heading h1 { font-size: 31px; }
  body[data-screen="coach"] .skill-map { --map-gap: 20px; grid-template-columns: 58px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-screen="coach"] .pixel-bars > i { transition: none; }
}
/* New mascot artwork is coach-only; the existing entry presence remains compact. */
body:not([data-screen="coach"]) .mascot-scene > .coach-mascot { display: none; }

/* Final lavender mascot presentation. No fake lip-sync or invented progress. */
body[data-screen='coach'] #coach-heading { padding-bottom: 12px; }
body[data-screen='coach'] .mascot-scene { width: 200px; }
body[data-screen='coach'] #coach-mascot { width: 200px; height: 200px; object-fit: contain; mix-blend-mode: multiply; }
body[data-screen='coach'] #coach-mascot-fallback { display: none !important; }
body[data-screen='coach'] #coach-presence { gap: 4px; padding-bottom: 12px; }
body[data-screen='coach'] #voice-orb { height: 16px; }
body[data-screen='coach'] .coach-state { color: #806399; }
body[data-screen='coach'] #coach-caption:not([hidden]) { display: block !important; order: 2; padding: 16px 18px; margin: 4px 0 10px; border: 2px solid #c4afd8; border-radius: 0; background: #f0e7f8; color: #4a365b; text-align: center; line-height: 1.5; }
body[data-screen='coach'] #transcript-current:not([hidden]) { display: block !important; border: 0; border-left: 3px solid #c1abd5; background: #faf7fd; font-size: 13px; padding: 10px 13px; }
body[data-screen='coach'] #call-controls { order: 3; margin-top: 8px; width: 260px; align-self: center; }
body[data-screen='coach'] #call-controls button { font-family: 'Pixelify Sans', monospace; font-size: 20px; border: 2px solid #ab91c2; background: #f4edf9; color: #64447e; box-shadow: 0 3px 0 #c9b6da; }
body[data-screen='coach'] #transcript-details { margin-top: 13px; }
body[data-screen='coach'] #transcript-log { max-height: 140px; }
body[data-screen='coach'] #transcript-log > p { font-size: 12px; padding: 9px 11px; }
body[data-screen='coach'] .call-heading { display: none; }
body[data-screen='coach'] #report { border-top: 2px solid #e4d7ef; }
body[data-screen='coach'] .skill { border: 2px solid #d2bfdf; background: #f9f4fd; box-shadow: 3px 3px 0 #e0d3eb; }

/* The skills stay beside the conversation, not below it, on desktop. */
@media (min-width: 860px) {
  body[data-screen='coach'] .wrap { width: min(calc(100% - 56px), 1180px); }
  body[data-screen='coach'] .topbar { justify-content: flex-start; }
  body[data-screen='coach'] #coach-heading { display: flex !important; align-items: center; gap: 22px; padding: 12px 0 20px; text-align: left; }
  body[data-screen='coach'] #back-to-start { margin: 0; }
  body[data-screen='coach'] #coach-heading h1 { font-size: 34px; }
  body[data-screen='coach'] #coach-heading small { margin: 0 0 0 auto; }
  body[data-screen='coach'] .paper { display: grid; grid-template-columns: 300px minmax(0, 1fr); padding: 0; align-items: start; }
  body[data-screen='coach'] #story-section { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 16px; padding: 22px 22px 20px; max-height: calc(100vh - 145px); overflow-y: auto; scrollbar-width: thin; }
  body[data-screen='coach'] #coach-mascot { width: 170px; height: 170px; }
  body[data-screen='coach'] .mascot-scene { width: 170px; }
  body[data-screen='coach'] #coach-caption:not([hidden]) { font-size: 14px; padding: 12px; }
  body[data-screen='coach'] #call-controls { width: 100%; }
  body[data-screen='coach'] #transcript-log { max-height: 155px; }
  body[data-screen='coach'] #report { grid-column: 2; grid-row: 1; min-height: 460px; border-top: 0; border-left: 2px solid #e4d7ef; padding: 30px !important; }
  body[data-screen='coach'] #report[data-state='empty'] .section-head { display: flex; }
  body[data-screen='coach'] #report[data-state='empty'] .evidence-note { display: block; }
  body[data-screen='coach'] .skill-map { margin-top: 25px; --map-gap: 35px; grid-template-columns: 78px minmax(0, 1fr); }
  body[data-screen='coach'] .skill-avatar { padding: 16px 5px; }
  body[data-screen='coach'] .skill-avatar svg { width: 56px; }
  body[data-screen='coach'] .skill h3 { font-size: 18px; }
  body[data-screen='coach'] .skill p { font-size: 14px; }
  body[data-screen='coach'] #role-section { grid-column: 2; grid-row: 2; border-left: 2px solid #e4d7ef; padding: 25px 30px 30px; }
}

body[data-screen='coach'] .skill-feed-status { color: #785695; margin: 10px 0 20px; }
body[data-screen='coach'] .skill--arrived { animation: skill-pop 500ms steps(6, end) both; border-color: #aa82ca; }
@keyframes skill-pop { 0% { opacity: 0; transform: translateY(12px) scale(.94); } 65% { opacity: 1; transform: translateY(0) scale(1.025); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body[data-screen='coach'] .skill--arrived { animation: none; } }