:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#202338;background:#faf9f6;line-height:1.6}*{box-sizing:border-box}body{margin:0}header{max-width:1050px;margin:auto;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7e5e1}.brand{color:#4f46e5;font-size:26px;font-weight:800;text-decoration:none;display:flex;align-items:center;gap:15px}.tag{font-size:11px;font-weight:600;background:#eeecff;padding:4px 10px;border-radius:20px;letter-spacing:.03em;color:#6058a7}main{max-width:800px;margin:auto;padding:55px 28px 35px}h1{font-size:48px;line-height:1.15;letter-spacing:-.035em;margin:12px 0 22px}h2{font-size:20px;margin:0}.eyebrow{text-transform:uppercase;letter-spacing:.1em;color:#645fc0;font-size:12px;font-weight:700}.intro{font-size:18px;max-width:580px;color:#666778}.signin{background:white;padding:28px;border:1px solid #e4e2eb;border-radius:18px;margin-top:30px;box-shadow:0 10px 40px #25204a07}.signin p{color:#666778}.consent{display:block;margin:20px 0;font-size:14px}.consent input{margin:0 9px 0 0;accent-color:#4f46e5;width:18px;height:18px;vertical-align:middle}a{color:#5147cf}.small,#signhint{font-size:12px}.notice{background:#f4f1ff;padding:14px;border-radius:9px}.chat-heading h1{font-size:34px}.chat-heading p{color:#666778}button{font:inherit;font-size:14px;font-weight:650;border:0;background:#4f46e5;color:white;padding:10px 16px;border-radius:10px;cursor:pointer}button:disabled{opacity:.5;cursor:wait}#logout{background:#eeecff;color:#4f46e5}#messages{display:flex;flex-direction:column;gap:16px;padding:18px 0;min-height:80px}.bubble{padding:17px 20px;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:15px;max-width:90%;font-size:16px}.user{align-self:flex-end;background:#4f46e5;color:white}.assistant{align-self:flex-start;background:white;border:1px solid #e4e2eb}.role{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;opacity:.7}#compose{margin-top:26px;padding:20px;border:1px solid #dcd9eb;border-radius:16px;background:white}#compose label{display:block;font-weight:650;font-size:13px;margin-bottom:8px}textarea{width:100%;font:inherit;resize:vertical;border:0;outline:0;min-height:84px;color:#202338}textarea:focus{outline:2px solid #a49ffa;outline-offset:3px;border-radius:3px}.compose-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}.compose-bottom span{font-size:12px;color:#565b6e}#status{font-size:14px;color:#6453a5;min-height:25px}footer{max-width:850px;margin:20px auto;padding:22px 28px;border-top:1px solid #e7e5e1;font-size:12px;color:#81818c;text-align:center}[hidden]{display:none!important}@media(max-width:600px){header{padding:18px 20px}.tag{display:none}main{padding:30px 20px}h1{font-size:38px}.signin{padding:20px}.bubble{max-width:100%}.chat-heading h1{font-size:28px}.compose-bottom{align-items:flex-start}.compose-bottom span{max-width:110px}}

#upload{background:#eeecff;color:#4f46e5;margin-right:10px}#filehint{display:block;margin-top:6px}#file-preview{display:flex;align-items:center;gap:12px;padding:12px;background:#f5f3ff;border-radius:10px;margin-bottom:14px;overflow-wrap:anywhere}#preview-image{max-width:100px;max-height:100px;border-radius:8px}#file-name{flex:1;font-size:13px}#remove-file{background:transparent;color:#5147cf}.attachment-label{font-size:12px;opacity:.8}

#upload{width:42px;height:42px;padding:0;font-size:28px;font-weight:400;line-height:1;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}

.coach-avatar{display:block;width:48px;height:48px;object-fit:cover;border-radius:50%;margin-bottom:9px}

#send{width:42px;height:42px;padding:0;font-size:27px;font-weight:500;line-height:1;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

.explanation-diagram{display:block;width:100%;max-width:640px;height:auto;margin-top:14px;border-radius:10px;border:1px solid #e4e2eb}

.markdown-content{white-space:normal;overflow-wrap:anywhere}.markdown-content p{margin:.7em 0}.markdown-content p:first-child{margin-top:0}.markdown-content p:last-child{margin-bottom:0}.markdown-content ul,.markdown-content ol{margin:.7em 0;padding-left:1.5em}.markdown-content li{margin:.25em 0}.markdown-content strong{font-weight:750}.markdown-content code{font-size:.9em;background:#eeecff;padding:.1em .3em;border-radius:4px}.markdown-content pre{white-space:pre-wrap;overflow:auto;background:#f2f1fb;padding:12px;border-radius:8px}.markdown-content pre code{background:transparent;padding:0}.markdown-content h3{font-size:1.08em;margin:.7em 0}.markdown-content blockquote{border-left:3px solid #b7b1ff;padding-left:12px;margin:.7em 0;color:#55556b}

.markdown-content .katex-display{overflow-x:auto;overflow-y:hidden;padding:.4em 0}.diagram-frame{position:relative;width:100%;container-type:inline-size;white-space:normal}.diagram-frame .explanation-diagram{display:block;width:100%;height:auto;margin:0}.diagram-label{position:absolute;transform:translateY(-80%);font-size:2.5cqw;line-height:1.1;white-space:nowrap;pointer-events:none}.diagram-label .katex{font-size:1em}.diagram-label .katex-display{margin:0}

.table-scroll{overflow-x:auto;max-width:100%;margin:.9em 0;border:1px solid #dedbec;border-radius:8px;white-space:normal}.markdown-content table{border-collapse:collapse;width:100%;min-width:240px}.markdown-content th,.markdown-content td{padding:.5em .8em;border-bottom:1px solid #e6e3ef;vertical-align:middle;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}.markdown-content th{background:#f1efff;font-weight:700}.markdown-content tr:last-child td{border-bottom:0}.table-scroll:focus{outline:2px solid #aaa3ff}.markdown-content td .katex-display{margin:0}

.coach-widget{border:1px solid #d9d5ee;border-radius:10px;overflow:hidden;margin:.8em 0;white-space:normal}.widget-title{background:#f1efff;padding:8px 12px;font-size:.85em;font-weight:650}.coach-widget iframe{display:block;width:100%;border:0;background:#fff}

.widget-demo-button{margin-top:8px;padding:8px 12px;background:#f1efff;color:#4f46e5;border:1px solid #d8d2fc;border-radius:8px;font:inherit;cursor:pointer}

.demo-page main{margin:24px auto}.demo-page .coach-widget iframe{height:520px}@media(max-width:500px){.demo-page main{margin:14px auto}.demo-page .coach-widget iframe{height:600px}}

.coach-widget iframe{max-height:none}.coach-widget{width:100%}

.quick-ack{display:block;margin-top:12px;padding:5px 10px;background:#f6f5fc;border:1px solid #e4e2ee;border-radius:8px;font-size:17px;line-height:1.3}.quick-ack:hover{background:#eeecff}.quick-ack:focus-visible{outline:2px solid #786aff;outline-offset:2px}

.quick-ack{color:#4f46e5;min-width:44px;min-height:36px}

.quick-ack{display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:6px;width:36px;min-width:36px;height:36px}.quick-ack:hover{background:#fff6d4}

/* Messages-style conversation */
#messages{gap:12px}.bubble{position:relative;border:0;border-radius:20px;padding:12px 16px;max-width:88%;line-height:1.45;white-space:pre-wrap}.bubble.user{background:#0a66d8;color:white;border-bottom-right-radius:5px}.bubble.assistant{background:#e9e9eb;color:#202124;border-bottom-left-radius:5px}.bubble.user::after{content:"";position:absolute;right:-6px;bottom:0;width:16px;height:16px;background:#0a66d8;border-bottom-left-radius:14px;z-index:-1}.bubble.assistant::after{content:"";position:absolute;left:-6px;bottom:0;width:16px;height:16px;background:#e9e9eb;border-bottom-right-radius:14px;z-index:-1}.role{font-size:10px;letter-spacing:.06em;margin-bottom:5px}.user .role{display:none}.coach-avatar{width:44px;height:44px;margin-bottom:6px}.coach-widget{background:white;max-width:100%}.markdown-content p{margin:.35em 0}.quick-ack{margin-top:8px;padding:4px;width:32px;height:32px;min-width:32px;min-height:32px}#compose{border:1px solid #c8c8cd;border-radius:24px;padding:12px 14px;background:white}#compose>label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#question{min-height:44px;font-size:16px;line-height:1.4}#question:focus-visible{outline:2px solid transparent}.compose-bottom{align-items:center}#upload,#send{width:32px;height:32px;min-width:32px;border-radius:50%;padding:4px;display:inline-flex;align-items:center;justify-content:center}#upload{background:#6b6b70;color:white}#send{background:#0a66d8;color:white}.compose-bottom>div{display:flex;align-items:center;gap:8px}#filehint{margin:0;font-size:11px;max-width:none}#compose:focus-within{border-color:#8e8e93}@media(max-width:600px){.bubble{max-width:94%;padding:11px 14px}#filehint{max-width:160px;font-size:10px}main{padding-left:16px;padding-right:16px}}

.bubble.user::after{clip-path:polygon(0 0,0 100%,100% 100%,45% 60%)}.bubble.assistant::after{clip-path:polygon(100% 0,100% 100%,0 100%,55% 60%)}

.quick-ack{width:40px;min-width:40px;height:40px;border-radius:50%}.quick-ack .tb-bg{fill:#fff;stroke:#d1d1d6;stroke-width:1}.quick-ack .tb-thumb{fill:#8e8e93}.quick-ack:hover{background:transparent}.quick-ack:hover .tb-bg{fill:#f2f2f7}.quick-ack:active .tb-bg,.quick-ack.ack-pressed .tb-bg{fill:#0a66d8;stroke:#0a66d8}.quick-ack:active .tb-thumb,.quick-ack.ack-pressed .tb-thumb{fill:#fff}.quick-ack.ack-pressed:disabled{opacity:1}



.brand{flex-direction:column;align-items:flex-start;gap:0;line-height:1.25}
.signin-group{margin:18px 0 6px;font-weight:650;color:#202338!important}.wa-button,.wa-open{display:inline-block;background:#0e7a3e;color:white;border:0;border-radius:10px;padding:10px 16px;font-weight:650;text-decoration:none;margin:0 0 6px}.wa-button:disabled{opacity:.5;cursor:not-allowed}#google-button{margin-top:10px}.signin-note{font-size:12px}#wa-panel{margin-top:18px;padding:16px;border-radius:12px;background:#f2fbf5}.wa-code{font:700 24px/1.3 ui-monospace,monospace;letter-spacing:.06em;color:#202338!important;margin:6px 0 12px}
.header-actions{display:flex;gap:8px;align-items:center}#add-wa{background:#e8f7ee;color:#1f7a45}.wa-add{max-width:760px;margin:12px auto 0;padding:16px;border-radius:12px;background:#f2fbf5;border:1px solid #cdeedb}.wa-add p{margin:4px 0}
@media (max-width:800px){.wa-add{margin:12px 16px 0}}
.widget-error{margin-top:8px;padding:10px 12px;border-radius:10px;background:#fff4f4;border:1px solid #f3c9c9;font-size:14px}.widget-error p{margin:0 0 6px}
/* A reply with a widget or diagram uses the full chat width; otherwise the bubble shrinks to its text and the frame falls back to 300px. */
.bubble.has-widget{width:100%;max-width:min(100%,760px);box-sizing:border-box}
.widget-vote{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:#555}.widget-vote .vote-btn{background:#f2f2f7;color:#202124;border:1px solid #d1d1d6;padding:5px 10px;border-radius:14px;font-size:13px;font-weight:600}.widget-vote .vote-btn[aria-pressed=true]{background:#0a66d8;color:white;border-color:#0a66d8}.vote-note{flex-basis:100%;display:flex;gap:8px;align-items:flex-end}.vote-note textarea{flex:1;min-height:44px;border:1px solid #d1d1d6;border-radius:10px;padding:6px 8px;font:inherit;font-size:14px}.vote-thanks{color:#0b6b4f}
/* Sign-in page (owner redesign, Oct 7): one centred card, the Google button first, WhatsApp second, agreement as a line. */
body:has(#welcome:not([hidden])){background:#f5f5f7}
body:has(#welcome:not([hidden])) header,body:has(#welcome:not([hidden])) footer{display:none}
body:has(#welcome:not([hidden])) main{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;max-width:none}
#welcome .signin{width:100%;max-width:400px;margin:0 auto;padding:40px 32px 28px;text-align:center;border:0;border-radius:24px;background:#fff;box-shadow:0 1px 2px #0000000a,0 12px 40px #1f1d3a14}
.signin-logo{width:72px;height:72px;border-radius:50%;display:block;margin:0 auto 14px}
.signin-title{font-size:32px;line-height:1.1;margin:0 0 8px;letter-spacing:-.02em;color:#1d1d1f}
.signin-lead{font-size:17px;line-height:1.45;color:#515154!important;margin:0 auto 28px;max-width:300px}
.signin-google{display:flex;justify-content:center;min-height:44px}
.signin-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:#565b6e;font-size:13px}
.signin-or::before,.signin-or::after{content:"";flex:1;height:1px;background:#e5e5ea}
.signin-wa{display:flex!important;align-items:center;justify-content:center;gap:10px;width:100%;max-width:320px;margin:0 auto!important;height:44px;border-radius:22px!important;font-size:15px;background:#0e7a3e!important;color:#fff}
.signin-wa:hover{background:#0b6531!important}
.wa-panel{margin-top:16px;padding:16px;border-radius:16px;background:#f2fbf5;text-align:center}
.wa-panel .wa-code{font-size:22px;font-weight:700;letter-spacing:.06em;margin:8px 0 12px;color:#1d1d1f}
.wa-panel .wa-open{border-radius:20px}
.signin-terms{font-size:12.5px;line-height:1.5;color:#565b6e!important;margin:24px auto 0;max-width:300px}
.signin-terms a{color:#515154}
@media(max-width:600px){#welcome .signin{padding:32px 20px 22px;border-radius:20px}.signin-title{font-size:28px}}
/* Google draws an unstyled fallback (a huge "G") before its real button loads: keep the slot fixed and hidden until ready. */
#google-button{height:44px;overflow:hidden;opacity:0;transition:opacity .2s}#google-button.ready{opacity:1}#google-button svg{max-width:20px;max-height:20px}
body:has(#welcome:not([hidden])) main{flex-direction:column}
body:has(#welcome:not([hidden])) #status{text-align:center;max-width:400px;margin:14px auto 0;color:#b42318}
.signin-sms{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:320px;margin:10px auto 0;height:44px;border-radius:22px;font-size:15px;font-weight:650;background:#fff;color:#1d1d1f;border:1px solid #d1d1d6}
.signin-sms:hover{background:#f5f5f7}
.sms-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:8px}
.sms-number{font-size:22px;font-weight:700;color:#0a58c2;text-decoration:none;letter-spacing:.01em}
.sms-copy{background:#fff;color:#1d1d1f;border:1px solid #d1d1d6;border-radius:14px;padding:4px 10px;font-size:13px;font-weight:600}
.signin-title{margin-bottom:28px}
/* Owner (Oct 8): iMessage-style typing indicator with Coach's avatar. */
.typing{display:flex;align-items:flex-end;gap:8px;margin:2px 0}
.typing-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.typing-bubble{display:flex;align-items:center;gap:5px;background:#e9e9eb;border-radius:18px;border-bottom-left-radius:5px;padding:12px 15px;min-height:38px}
.lookup-status{font-size:13px;color:#636366;align-self:center;max-width:210px}
.typing-bubble span{width:8px;height:8px;border-radius:50%;background:#8e8e93;opacity:.4;animation:typing-dot 1.2s infinite ease-in-out}
.typing-bubble span:nth-child(2){animation-delay:.2s}.typing-bubble span:nth-child(3){animation-delay:.4s}
@keyframes typing-dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.typing-bubble span{animation:none;opacity:.7}}
/* Owner (Oct 8): the "Not helpful" comment box matches the main message box. */
.vote-note{flex-basis:100%;display:flex;gap:8px;align-items:flex-end;border:1px solid #c8c8cd;border-radius:24px;padding:10px 12px 10px 14px;background:#fff;margin-top:6px}
.vote-note:focus-within{border-color:#8e8e93}
.vote-note textarea{flex:1;min-height:44px;border:0;border-radius:0;padding:4px 0;font:inherit;font-size:16px;line-height:1.4;resize:none;background:transparent}
.vote-note textarea:focus-visible{outline:2px solid transparent}
.vote-send{width:32px;height:32px;min-width:32px;border-radius:50%;padding:4px;display:inline-flex;align-items:center;justify-content:center;background:#0a66d8;color:#fff;border:0;font-size:22px;line-height:1;cursor:pointer}
.vote-send[hidden]{display:none}
/* Owner (Oct 8): "when there is a very long chat, you cannot get to the top to log out ... it should be easy to log out at
   any time". The header (brand, Add WhatsApp, Sign out) stays at the top of the screen; the band behind it spans the
   full width so messages scroll cleanly underneath. */
/* Above the tab bar (#chat-tabs, z 31), so the open menu is never covered (owner's screenshot, Oct 26). */
body>header{position:sticky;top:0;z-index:40;background:#faf9f6;border-bottom:0}
/* The full-width band is a layer behind the header (not a clipped shadow) so the Menu can drop below it (Oct 9). */
body>header::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:#faf9f6;border-bottom:1px solid #e7e5e1;z-index:-1}
body{overflow-x:clip}
@media(max-width:600px){body>header{padding:10px 16px}.brand{font-size:21px;gap:10px}.brand img{width:34px;height:34px}.header-actions button{padding:8px 12px}}
/* Owner (Oct 14): Feedback in the row with Helpful and Not helpful, under every widget and diagram in the chat */
.widget-vote .vote-btn.wf-open{background:#eef0ff;color:#3730a3;border-color:#c7cbfa}
.widget-vote .vote-btn.wf-open[aria-expanded=true]{background:#4f46e5;color:#fff;border-color:#4f46e5}

/* ---- UI study quick wins (Oct 8) ---- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 5: focused items stay clear of the sticky header and the pinned message box; a strong ring on the message box. */
html{scroll-padding-top:calc(var(--hdr,72px) + 8px);scroll-padding-bottom:calc(var(--dock,90px) + 8px)}
#compose:focus-within{border-color:#0a58c2;outline:3px solid #0a58c2;outline-offset:2px}
.vote-note:focus-within{border-color:#0a58c2;outline:3px solid #0a58c2;outline-offset:2px}
button:focus-visible,a:focus-visible,.table-scroll:focus-visible,.katex-display:focus-visible{outline:3px solid #0a58c2;outline-offset:2px}
/* 4: the message box is pinned to the bottom of the screen (above the phone keyboard), grows with its text, and the send
   button is always there (disabled while empty). */
body:has(#chat:not([hidden])) main{padding-bottom:0}
.dock{position:sticky;bottom:var(--kb,0px);z-index:20;padding:10px 0 max(12px,env(safe-area-inset-bottom));background:#faf9f6}
.dock #status{margin:0 4px 6px;min-height:0}.dock #status:empty{display:none}
#compose{margin-top:0;padding:8px 8px 8px 10px}
.compose-row{display:flex;align-items:flex-end;gap:8px}
#question{flex:1;min-height:40px;height:40px;max-height:40vh;resize:none;padding:8px 4px;overflow-y:hidden;line-height:1.4;background:transparent}
#upload,#send{flex:none;width:36px;height:36px;min-width:36px;margin:2px 0}
#upload{margin-right:0}
#send:disabled{background:#c7c7cc;opacity:1;cursor:default}
/* Voice input (owner, Oct 22): the microphone beside Send; red while recording, with the timer under the box. */
#mic{flex:none;width:36px;height:36px;min-width:36px;margin:2px 0;padding:0;border-radius:50%;background:#6b6b70;color:#fff;display:inline-flex;align-items:center;justify-content:center}
#mic[hidden]{display:none}
#mic.recording{background:#d93025;animation:mic-pulse 1.4s ease-out infinite}
#mic:disabled{background:#c7c7cc;cursor:default}
#mic:focus-visible{outline:2px solid #0a66d8;outline-offset:2px}
.mic-state{display:block;margin:6px 4px 0;font-size:13px;color:#5f6368;font-variant-numeric:tabular-nums}
.mic-state[hidden]{display:none}
.mic-state.live{color:#b3261e}.mic-state.live::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#d93025;vertical-align:1px}
@keyframes mic-pulse{0%{box-shadow:0 0 0 0 #d9302566}70%{box-shadow:0 0 0 8px #d9302500}100%{box-shadow:0 0 0 0 #d9302500}}
@media (prefers-reduced-motion:reduce){#mic.recording{animation:none}}
#file-preview{margin-bottom:8px}
/* Latest floats over the chat just above the dock, so its appearing never resizes the chat mid-scroll (owner, Oct 24:
   scrolling up from the bottom wasn't smooth). */
.latest{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);z-index:21;margin:0 0 8px;background:#1d2033;color:#fff;border-radius:999px;padding:7px 16px;font-size:14px;font-weight:700;box-shadow:0 4px 14px #0003;white-space:nowrap}
.latest:hover{background:#000}
/* 9: Add WhatsApp opens as a sheet just under the header, where the student is. */
.wa-add{position:fixed;z-index:40;top:calc(var(--hdr,72px) + 8px);left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));margin:0;box-shadow:0 12px 40px #1f1d3a33;max-height:calc(100dvh - var(--hdr,72px) - 24px);overflow:auto}
.wa-add h2{font-size:17px;margin:0 0 6px}
.wa-add:focus{outline:none}
@media (max-width:800px){.wa-add{margin:0}}
#add-wa[aria-expanded=true]{outline:2px solid #1f7a45;outline-offset:1px}
/* 10: the frame's label: Interactive example or Diagram, then the widget's title. */
.widget-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.widget-kind{font-size:.8em;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:#3730a3}
.widget-name{font-weight:700;color:#1d2033}
/* 12: wide formulas and tables scroll in their own box; a shadow marks the side with more to see. */
.hscroll{position:relative;display:block;max-width:100%}
.hscroll::before,.hscroll::after{content:"";position:absolute;top:0;bottom:0;width:22px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1}
.hscroll::before{left:0;background:linear-gradient(to right,#0000002e,#0000)}
.hscroll::after{right:0;background:linear-gradient(to left,#0000002e,#0000)}
.hscroll.more-left::before,.hscroll.more-right::after{opacity:1}
.hscroll>.table-scroll{margin:0}.hscroll:has(>.table-scroll){margin:.9em 0;border-radius:8px;overflow:hidden}
.markdown-content .katex-display{overflow-x:auto;overflow-y:hidden;max-width:100%}
/* Owner, Oct 14 ("an equation was cut off"): on a phone a formula too wide to fit widened Coach's bubble to its 94%, and
   94% plus the avatar's gutter ran past the message list, which clips it. The bubble now stops at the list's edge. */
@media(max-width:600px){#messages .bubble.assistant{max-width:min(94%,calc(100% - var(--gutter)))}}
/* A display formula is a block with its own margins: the line break after it (two formulas on consecutive lines) would
   only add an empty line between them. */
.markdown-content span:has(.katex-display)+br{display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hscroll::before,.hscroll::after{transition:none}}
/* The header and the message box are pinned, so focusing something inside them must not scroll the page to clear them. */
body>header *,.wa-add,.wa-add *{scroll-margin-top:calc(-1 * (var(--hdr,72px) + 8px))}
.dock,.dock *{scroll-margin-bottom:calc(-1 * (var(--dock,90px) + 8px))}
body:has(#chat:not([hidden])){padding-bottom:var(--kb,0px)}  /* room to scroll the last message above the box while the phone keyboard is open */

/* UI study (Oct 8, applied Oct 9): links under the sign-in card */
.signin-links{font-size:14px;margin:14px auto 0;max-width:300px;color:#565b6e}.signin-links a{color:#3f3aa8;font-weight:600}
/* ---- Chat decisions (owner, Oct 9): Menu, avatar once per run, Got it label ---- */
.header-actions{gap:10px}.menu{position:static}.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 14px;border-radius:10px;background:#eeecff;color:#3730a3;font-weight:650;font-size:15px}.menu summary::-webkit-details-marker{display:none}
.menu summary:focus-visible{outline:3px solid #0a58c2;outline-offset:2px}
.menu .pop{position:absolute;right:28px;top:calc(100% + 6px);z-index:60;min-width:260px;max-width:calc(100vw - 32px);background:#fff;border:1px solid #e0dff0;border-radius:12px;box-shadow:0 12px 40px #1f1d3a33;padding:6px}
.menu .pop a,.menu .pop button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:10px 12px;color:#202338;font:inherit;font-size:15px;text-decoration:none;cursor:pointer}
.menu .pop a:hover,.menu .pop button:hover{background:#f2f0ff}.menu .pop a:focus-visible,.menu .pop button:focus-visible{outline:3px solid #0a58c2;outline-offset:-2px}
.menu .pop small{display:block;font-size:12px;color:#5b5d70;margin-top:1px}
.menu .pop #add-wa{background:none;color:#202338}.menu .pop a[hidden],.menu .pop button[hidden]{display:none}
.menu #menu-privacy{color:#4f46e5;border-top:1px solid #eceaf6;border-radius:0 0 8px 8px;margin-top:4px}
.topic-divider{display:flex;align-items:center;gap:12px;color:#5b5d70;font-size:13px;margin:14px 0 4px}.topic-divider::before,.topic-divider::after{content:"";flex:1;border-top:1px solid #dcdae8}
.topic-divider.auto{font-size:12px;color:#62657a;font-style:italic;margin:10px 0 2px}.topic-divider.auto::before,.topic-divider.auto::after{border-top:1px dashed #e3e1ee}
/* Avatar: once per run of Coach messages, beside the last bubble of the run (size kept, no COACH label). */
#messages{--gutter:54px}.bubble.assistant{margin-left:var(--gutter)}.bubble.assistant .role{display:none}
.bubble.assistant .coach-avatar{position:absolute;left:calc(-1 * var(--gutter));bottom:0;margin:0;width:44px;height:44px}
.bubble.assistant:has(+ .bubble.assistant:not(.char-bubble)) .coach-avatar{display:none}
.bubble.assistant.has-widget{width:calc(100% - var(--gutter))}
.bubble.assistant::after{display:none}
/* Reply chips share a quiet outline; only the selected answer gets a solid fill. */
.reply-controls{margin-top:12px;white-space:normal}
.reply-controls:empty{display:none}
.choice-controls{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}
.reply-choice,.quick-ack{display:inline-flex;align-items:center;justify-content:center;min-height:40px;max-width:100%;margin:0;padding:8px 13px;border:1px solid #cbd0da;border-radius:22px;background:#fff;color:#344258;font:inherit;font-size:14px;font-weight:500;line-height:1.4;text-align:left;overflow-wrap:anywhere;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,opacity .15s,transform .1s}
.reply-controls[data-type="suggestions"] .reply-choice{background:#f7f9fc;border-color:#d4dae3;color:#365579}
.reply-choice:disabled,.quick-ack:disabled{cursor:default}
@media(hover:hover){.reply-choice:hover:not(:disabled),.quick-ack:hover:not(:disabled){background:#edf4ff;border-color:#8caed8}}
.reply-choice:focus-visible,.quick-ack:focus-visible{outline:3px solid #0a58c2;outline-offset:3px}
.reply-choice:active:not(:disabled),.quick-ack:active:not(:disabled){transform:scale(.97);background:#deebfc;border-color:#0a58c2}
.reply-controls .reply-choice.ack-pressed,.reply-controls .reply-choice.chosen,.reply-controls .quick-ack.ack-pressed{background:#0a58c2;border-color:#0a58c2;color:#fff;opacity:1}
.reply-controls:has(.ack-pressed) button:not(.ack-pressed),.reply-controls.composing button,.reply-controls.past .reply-choice:disabled{opacity:.45}
.reply-controls.composing button:focus-visible{opacity:1}
.reply-controls.past .reply-choice.chosen{opacity:1}
.quick-ack{gap:5px;width:auto;height:auto;min-width:40px;padding:7px 11px 7px 7px;font-size:13px;color:#596579}
.quick-ack svg{width:24px;height:24px;flex:none}
.quick-ack .ack-label{line-height:1}
.quick-ack .tb-bg,.quick-ack:hover .tb-bg{fill:transparent;stroke:none}
.quick-ack .tb-thumb{fill:currentColor}
.quick-ack:active .tb-bg,.quick-ack.ack-pressed .tb-bg{fill:transparent;stroke:none}
.quick-ack:active .tb-thumb,.quick-ack.ack-pressed .tb-thumb{fill:currentColor}
@media(prefers-reduced-motion:reduce){.reply-choice,.quick-ack{transition:none}}
@media(max-width:600px){.menu .pop{right:16px}}
/* ---- Chat, round 2 (owner: apply the design study, Oct 9) ---- */
/* Day dividers */
.day-divider{display:flex;align-items:center;gap:12px;color:#5b5d70;font-size:13px;font-weight:600;margin:18px 0 6px}
.day-divider::before,.day-divider::after{content:"";flex:1;border-top:1px solid #e3e1ee}
/* Past quizzes keep their options, read-only; the student's pick is marked */
.reply-controls.past .reply-choice.chosen::before{content:"\2713\00a0"}
/* Welcome back: under the last message, above the message box; not part of the history */
.welcome-back{margin:16px 0 6px;padding:14px 16px;border:1px solid var(--chrome-line);border-radius:14px;background:var(--chrome-card);color:var(--chrome-ink);box-shadow:0 1px 3px rgba(30,30,60,.06)}
.welcome-back p{margin:0}.welcome-back .wb-title{font-weight:700;color:var(--chrome-ink);margin-bottom:4px}
.welcome-back .wb-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* In this chat: the Topics tab (Fable's progress design 1.4, Oct 14), beside the chat on wide screens, in the drawer on phones */
.outline{font-size:14px}
.outline ol{list-style:none;margin:0 0 6px;padding:0;border-left:2px solid #e3e1ee}
.outline li a{display:flex;align-items:center;min-height:36px;padding:5px 10px;color:#2b2d42;text-decoration:none;border-radius:0 8px 8px 0;line-height:1.3}
.outline li a:hover{background:#f2f0ff;color:#1d2033}
.outline .outline-subject{margin:16px 0 6px;font-size:14px;font-weight:750;color:#1d2033}.outline .outline-subject:first-child{margin-top:0}
.outline .outline-section{margin:12px 0 4px;font-size:13px;font-weight:700;color:#3a3d55}.outline .outline-section:first-child{margin-top:0}
.outline li a:focus-visible{outline:3px solid #0a58c2;outline-offset:-3px}
.bubble.flash{animation:cgflash 1.6s ease}
@keyframes cgflash{0%,40%{box-shadow:0 0 0 3px #a5b4fc}100%{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.bubble.flash{animation:none;outline:3px solid #a5b4fc}}
/* Widget card: Full screen at the top */
.widget-fs{margin-left:auto;background:none;border:1px solid #d1d1d6;border-radius:999px;padding:3px 10px;font:600 13px system-ui;color:#3f3aa8;cursor:pointer}
.widget-fs:hover{background:#f2f0ff}.widget-fs:focus-visible{outline:3px solid #0a58c2;outline-offset:2px}
.coach-widget iframe:fullscreen{width:100vw;height:100vh;background:#fff}
/* Owner, Oct 24: phone Full screen stays in the chat, above containment and clipping, with room for Close. */
.coach-widget.widget-fullscreen{position:fixed;inset:0;z-index:2147483647;display:flex;flex-direction:column;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;background:var(--chrome-card);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overflow:hidden;box-sizing:border-box}
.coach-widget.widget-fullscreen>.widget-title{display:none}
.coach-widget.widget-fullscreen>iframe{flex:1;min-height:0;width:100%;height:0!important;max-height:none}
.widget-fs-close{flex:none;align-self:flex-end;min-height:44px;min-width:44px;margin:0;padding:10px 16px;background:var(--chrome-card);color:var(--chrome-brand);border-radius:0}
.widget-fullscreen::backdrop{background:var(--chrome-card)}
.frame-view-ancestor{transform:none!important;translate:none!important;rotate:none!important;scale:none!important;filter:none!important;backdrop-filter:none!important;perspective:none!important;contain:none!important;container-type:normal!important;content-visibility:visible!important;will-change:auto!important;isolation:auto!important;z-index:auto!important}
body.frame-view-open #latest{visibility:hidden}
/* Sign-in from a widget */
.signin-next{font-size:14px;margin:12px auto 0;max-width:300px;color:#3b3e52}

/* Email sign-in (owner, Oct 9): the same quiet button as SMS, and a two-step panel (address, then the 6-digit code). */
.signin-email{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:320px;margin:10px auto 0;height:44px;border-radius:22px;font-size:15px;font-weight:650;background:#fff;color:#1d1d1f;border:1px solid #d1d1d6;cursor:pointer}
.signin-email:hover{background:#f5f5f7}
.signin-email:focus-visible,.email-panel input:focus-visible,.email-panel button:focus-visible,.wl-email-toggle:focus-visible{outline:3px solid #0a58c2;outline-offset:2px}
.email-panel{margin:14px auto 0;max-width:320px;padding:16px;border-radius:16px;background:#f5f5fb;text-align:left}
.email-step{display:flex;flex-direction:column;gap:8px}
.email-step label{font-size:14px;font-weight:600;color:#1d1d1f}
.email-step input{font:inherit;font-size:16px;padding:10px 12px;border:1px solid #c7c7cc;border-radius:12px;background:#fff;color:#1d1d1f;width:100%;box-sizing:border-box}
#email-code{letter-spacing:.3em;font-size:20px;text-align:center}
.email-send{height:42px;border-radius:21px;border:0;background:#4f46e5;color:#fff;font:inherit;font-weight:650;cursor:pointer}
.email-send:disabled{opacity:.6}
.email-back{background:none;border:0;color:#3f3aa8;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:4px 0}
.email-error{color:#b42318;font-size:14px;margin:8px 0 0;min-height:0}
.email-error:empty{display:none}
.wl-email{margin-top:14px;font-size:15px}
.wl-email-toggle{background:none;border:0;color:#3f3aa8;font:inherit;text-decoration:underline;cursor:pointer;padding:0}
#email-add form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:6px 0}
#email-add label{width:100%;font-size:14px;font-weight:600}
#email-add input{font:inherit;font-size:16px;padding:8px 10px;border:1px solid #c7c7cc;border-radius:10px;flex:1;min-width:0}

/* Owner, Oct 11: the chat as an app shell (config chat_shell, default on). The page never scrolls; the header and the
   composer stay put and #messages is the only vertical scroller. The shell is the visible viewport's height (--vvh, set
   from visualViewport so the composer sits on the iPhone keyboard; 100dvh otherwise). Bounce stays inside #messages and
   there is no pull-to-refresh. Sign-in and waitlist screens keep normal page scrolling. */
html:has(body.shell-on){height:100%;overflow:hidden;overscroll-behavior:none}
body.shell-on{height:100vh;height:var(--vvh,100dvh);overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column}
body.shell-on:has(#chat:not([hidden])){padding-bottom:0}
body.shell-on>header{position:relative;flex:none;margin:0 auto;width:100%;padding-top:max(24px,env(safe-area-inset-top))}
body.shell-on>main{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;padding-bottom:0}
body.shell-on #chat{flex:1;min-height:0;display:flex;flex-direction:column}
body.shell-on #messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-padding:8px 0;padding-left:2px;padding-right:2px}
body.shell-on #messages>*{flex-shrink:0}
/* Owner, Oct 13: "the scroll bar on the right is annoying on the web" and "goes over my messages". The list reaches 14px
   past the column (into main's side padding) and keeps that strip as padding, so a scrollbar, overlay (Mac, iPhone) or
   classic (Windows, Linux), sits beside the student's right-aligned bubbles, never on them. It is thin and faint, and
   darker while the pointer is over the list. Bubbles stay aligned with the message box. */
body.shell-on #messages{margin-right:-14px;padding-right:14px;scrollbar-width:thin;scrollbar-color:#d6d4e0 transparent}
body.shell-on #messages:hover,body.shell-on #messages:focus-visible{scrollbar-color:#a9a6bb transparent}
@supports not (scrollbar-width:thin){body.shell-on #messages::-webkit-scrollbar{width:8px}body.shell-on #messages::-webkit-scrollbar-thumb{background:#d6d4e0;border-radius:4px}body.shell-on #messages:hover::-webkit-scrollbar-thumb{background:#a9a6bb}}
body.shell-on #messages:focus-visible{outline:3px solid #0a58c2;outline-offset:-3px;border-radius:8px}
body.shell-on .dock{position:relative;bottom:auto;flex:none}
@media (prefers-reduced-motion:reduce){body.shell-on #messages{scroll-behavior:auto}}

/* Queued messages (owner, Oct 11): sent while Coach is replying; they go out together when the reply lands. */
.queue{display:flex;flex-direction:column;gap:6px;margin:0 4px 8px}
.queue-item{display:flex;align-items:flex-start;gap:8px;background:#f2f0ff;border:1px dashed #b9b3ea;border-radius:12px;padding:6px 8px 6px 10px;font-size:14px;color:#2b2a3a}
.queue-label{flex:none;font-size:12px;font-weight:700;color:#5147cf;text-transform:uppercase;letter-spacing:.03em;padding-top:1px}
.queue-text{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:4.5em;overflow:hidden}
.queue-cancel{flex:none;background:none;border:0;font-size:18px;line-height:1;color:#5b5d70;cursor:pointer;padding:0 2px}
.queue-cancel:focus-visible{outline:3px solid #0a58c2;outline-offset:2px;border-radius:4px}
/* "Your data" (owner, Oct 9): the panel, its confirmations, and choosing a message in the chat. */
.data-panel{background:#fff;border-color:#e0dff0}
.data-opt{display:block;width:100%;text-align:left;background:#f7f6fd;border:1px solid #e6e4f3;border-radius:10px;padding:10px 12px;margin:0 0 8px;color:#202338;font:inherit;font-size:15px;cursor:pointer}
.data-opt small{display:block;font-size:12px;color:#5b5d70;margin-top:1px}
.data-opt:disabled{opacity:.55;cursor:not-allowed}
.data-opt.data-danger{color:#b42318}
.data-opt:focus-visible,.data-actions button:focus-visible,#data-close:focus-visible{outline:3px solid #0a58c2;outline-offset:2px}
.data-forget{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:8px 0}
.data-forget[hidden]{display:none}
.data-forget input{margin-top:3px}
.data-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.data-actions button{font:inherit;font-size:15px;border-radius:10px;padding:9px 14px;border:1px solid #d1d1d6;background:#fff;color:#202338;cursor:pointer}
.data-actions .data-go{background:#b42318;border-color:#b42318;color:#fff;font-weight:650}
.data-actions button:disabled{opacity:.6}
#data-close{font:inherit;background:none;border:0;color:#4f46e5;padding:6px 0;cursor:pointer}
.pick-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:8px 12px;border-radius:10px;background:#fff4e5;border:1px solid #f5d29a;font-size:14px;color:#5a3b00}
.pick-bar[hidden]{display:none}
.pick-bar button{font:inherit;font-size:14px;border:0;background:none;color:#4f46e5;font-weight:650;cursor:pointer}
body.picking #messages .bubble[id^="m-"]{cursor:pointer;outline:2px dashed #f0b35a;outline-offset:2px}
body.picking #messages .bubble[id^="m-"] *{pointer-events:none}
/* Connected accounts (owner, Oct 13): one row per connection, phone-first like Your data. */
.acct-list{list-style:none;margin:4px 0 12px;padding:0}
.acct-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;margin:0 0 8px;border:1px solid #e6e4f3;border-radius:10px;background:#f7f6fd;font-size:15px}
.acct-kind{font-weight:650;color:#202338}.acct-value{color:#5b5d70;overflow-wrap:anywhere;text-align:right}
.acct-offer{margin:0 0 12px;padding:12px;border-radius:10px;background:#f2fbf5;border:1px solid #cdeedb}
.acct-offer .wa-button,.acct-offer #add-wa{margin:6px 0 4px;background:#0e7a3e;color:#fff}
#acct-close:focus-visible,.acct-offer button:focus-visible{outline:3px solid #0a58c2;outline-offset:2px}
/* The one-time "Use Coach on WhatsApp?" tip, above the message box until dismissed. */
.link-tip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:8px 12px;border-radius:10px;background:#f2fbf5;border:1px solid #cdeedb;font-size:14px;color:#1f4d33}
.link-tip[hidden]{display:none}
.link-tip button{flex:none;font:inherit;font-size:16px;line-height:1;border:0;background:none;color:#1f4d33;padding:6px 8px;cursor:pointer;min-width:32px;min-height:32px}
.link-tip button:focus-visible{outline:3px solid #0a58c2;outline-offset:2px}
.link-account .link-later{margin-left:12px}
/* Invite links (owner, Oct 14): a working invite says so above sign-in; an expired, retired or full one shows the
   invite-only sentence and the email waitlist instead. */
.signin-invite{font-size:15px;margin:4px auto 14px;max-width:320px;color:#3b3e52;font-weight:600}
.invite-closed{text-align:left;background:#f4f1ff;border-radius:12px;padding:14px 16px;margin:4px 0 18px}
.invite-closed .invite-only{color:#202338;font-weight:600;margin-top:0}
.invite-closed .email-panel{margin-top:8px}
/* The side panel (owner, Oct 14; Fable's final design docs/fable/progress/progress-final.md 1 and 6; one panel since
   Oct 21, side panel v2 §3.3, §4.2). Wide screens (1000 px and up): a 56 px strip with one tab fixed at the left edge
   under the header, and a 300 px panel beside it that pushes the chat column right (never covers it). Phones and
   tablets: one 44 px header button opens the panel in a drawer from the left over a dimmed chat, with its title and ✕.
   Both live outside #messages, so the app shell's scrolling is unchanged. */
.side[hidden],.side-backdrop[hidden],.hdr-tab[hidden],.count-badge[hidden],.side-panel[hidden],.side-body[hidden],.prow[hidden]{display:none}
.side{display:none}
.side-tab,.hdr-tab{position:relative}
.side-tab svg,.hdr-tab svg{flex:none}
.count-badge{display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#4f46e5;color:#fff;font-size:11px;font-weight:750;line-height:18px;text-align:center}
.side-tab .count-badge,.hdr-tab .count-badge{position:absolute;top:2px;right:2px}
@keyframes cbpulse{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.count-badge.pulse{animation:cbpulse .6s ease}
.hdr-tab{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:10px;background:#eeecff;color:#3730a3}
.hdr-tab .count-badge{top:-4px;right:-6px}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.side-head h2{font-size:16px;margin:0;color:#1d2033}
.side-hide{background:none;color:#3a3d55;font-size:24px;line-height:1;min-width:36px;min-height:36px;padding:0 4px;border-radius:8px}
.side-hide:hover{background:#f2f0ff}
.side-panel{background:#fff;overflow-y:auto;overscroll-behavior:contain}
.side-intro{font-size:13px;color:#5b5d70;margin:0 0 16px;line-height:1.45}
.side-empty{font-size:14px;color:#3a3d55;margin:0;line-height:1.45}
.side-note{font-size:12.5px;color:#5b5d70;margin:4px 0;line-height:1.4}
.pgroup{margin:0 0 24px}
.pgroup-title{font-size:15px;margin:0 0 8px;color:#1d2033;line-height:1.35}
.pbar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#e3e1ee}
.pbar span{flex-basis:0;min-width:3px}.pbar-solid{background:#4f46e5}.pbar-seen{background:#7c76f2}.pbar-working{background:#a49ffa}.pbar-rest{background:#e3e1ee}
.pcounts{font-size:13px;margin:6px 0 2px;color:#2b2d42}
.pweek{font-size:13px;color:#2b2d42;margin:4px 0 6px;font-weight:600}
.pset-title{font-size:13px;font-weight:750;margin:14px 0 6px;color:#3a3d55}
.prows{display:flex;flex-direction:column;gap:6px}
.prow{display:block;width:100%;min-height:44px;text-align:left;background:#f7f6fd;border:1px solid #e6e4f3;border-radius:10px;padding:8px 10px;color:#202338;font-weight:400;line-height:1.35}
.prow:hover{background:#efedfc;border-color:#d6d2f3}
.prow-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.prow-name{font-weight:650;font-size:14px;overflow-wrap:anywhere}
.prow-tag{font-size:11.5px;color:#7a4b00;background:#fff4e5;border-radius:6px;padding:0 6px}
.prow-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:2px;font-size:12.5px}
.prow-detail{color:#5b5d70;min-width:0}.prow-act{color:#4f46e5;font-weight:650;white-space:nowrap}
.pmore{background:none;color:#4f46e5;padding:6px 0;font-size:13px}
.puntouched{font-size:12.5px;color:#5b5d70;margin:12px 0 0;line-height:1.4}
/* Navigation (Fable's design 4.1, 4.2, owner Oct 14): the goal line, Up next names, Quiz me on this, Go back to this. */
.pgoal{font-size:13.5px;color:#1d2033;background:#f7f6fd;border:1px solid #e6e4f3;border-radius:10px;padding:8px 10px;margin:0 0 16px;line-height:1.4;overflow-wrap:anywhere}
.pgoal-text{font-weight:600}
.pgoal-change,.pquiz,.outline-back{background:none;color:#4f46e5;padding:0 2px;font-size:13px;font-weight:650;min-height:32px;white-space:nowrap}
.pgoal-change:hover,.pquiz:hover,.outline-back:hover{text-decoration:underline}
.pquiz{font-size:12.5px}
.pgroup-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 8px;margin:0 0 8px}.pgroup-head .pgroup-title{margin:0}
.pnext{background:#f7f6fd;border:1px solid #e6e4f3;border-radius:999px;color:#3730a3;font-size:12.5px;font-weight:600;padding:4px 10px;margin:4px 2px 0 0;min-height:32px;text-align:left}
.pnext:hover{background:#efedfc;border-color:#d6d2f3}
.outline .outline-now{font-weight:500;color:#5b5d70}
.outline .outline-back{font-size:12.5px;font-weight:600}
/* The folded Topics tab (Fable's side-panel design 4.5, owner Oct 20): one row per topic, a ▸/▾ glyph by aria-expanded,
   day headings, "and N more", "Earlier", and the filter, in the .pmore / .pgoal-change family. */
.outline-item{margin:0 0 2px}
.outline .outline-topic{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:6px 6px 6px 4px;background:none;color:#2b2d42;font-size:13.5px;font-weight:650;text-align:left;line-height:1.3;border-radius:8px}
.outline .outline-topic:hover{background:#f2f0ff}
.outline .outline-topic::before{content:"▸";flex:none;width:12px;color:#5b5d70;font-size:11px}
.outline .outline-topic[aria-expanded=true]::before{content:"▾"}
.outline .outline-label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.outline .outline-meta{flex:none;color:#5b5d70;font-weight:500;font-size:12.5px;white-space:nowrap}
.outline .outline-return .outline-label{font-weight:550;color:#3a3d55}
.outline .outline-item>ol{margin:0 0 4px 10px}
.outline .outline-item>.outline-back{display:block;margin:0 0 4px auto}
.outline .outline-day{font-size:12.5px;color:#5b5d70;margin:14px 0 2px}.outline .outline-day:first-child{margin-top:0}
.outline .outline-more,.outline .outline-earlier{background:none;color:#4f46e5;padding:6px 0 6px 12px;font-size:13px;font-weight:650;min-height:32px;text-align:left}
.outline .outline-more{padding-left:22px}
.outline .outline-more:hover,.outline .outline-earlier:hover{text-decoration:underline}
.outline .outline-earlier{display:block;margin:10px 0 0;padding-left:4px}
.outline-find{display:block;width:100%;font:inherit;font-size:14px;min-height:40px;padding:8px 10px;margin:0 0 12px;border:1px solid #d6d2f3;border-radius:10px;background:#fff;color:#202338}
.outline-find:focus-visible{outline:3px solid #0a58c2;outline-offset:2px}
.outline .outline-topic:focus-visible,.outline .outline-more:focus-visible,.outline .outline-earlier:focus-visible{outline:3px solid #0a58c2;outline-offset:-3px}
.pset-area{font-size:12.5px;font-weight:650;margin:10px 0 6px;color:#5b5d70}
.welcome-back .wb-goal{margin-top:8px;color:var(--chrome-ink)}
.pchart-cap{font-size:12.5px;font-weight:650;margin:14px 0 4px;color:#3a3d55}
.pchart-row{display:flex;align-items:flex-end;gap:6px}.pchart-row svg{flex:1 1 auto;min-width:0;height:auto}
.pchart-end{font-size:12px;color:#5b5d70;line-height:1}.pchart-bar{fill:#4f46e5}.pchart-zero{fill:#e3e1ee}
/* The "now solid" line under Coach's reply: a button that opens the Progress tab; not stored. */
.solid-lines{align-self:flex-start;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:-6px 0 0 var(--gutter)}
.solid-line{background:#eef0ff;color:#3730a3;border:1px solid #c7cbfa;border-radius:999px;padding:6px 12px;font-size:14px;text-align:left}
.solid-line:hover{background:#e2e5ff}
.welcome-back .wb-progress{margin-top:8px;color:var(--chrome-ink)}
.wb-link{background:none;color:var(--chrome-brand);padding:0;font-weight:650;text-decoration:underline}
@media(min-width:1000px){
 .hdr-tab{display:none}
 body.chat-on{--aside:56px}
 body.chat-on.side-open{--aside:356px}
 body.chat-on>main{margin-left:max(calc(var(--aside) + 16px),calc((100vw - var(--aside) - 800px) / 2 + var(--aside)));margin-right:auto}
 .side{display:flex;position:fixed;left:0;top:var(--hdr,72px);bottom:0;z-index:25}
 .side-strip{width:56px;flex:none;background:#f3f2fa;border-right:1px solid #e3e1ee;padding:10px 2px}
 .side-drawer-title{display:none}
 .side-tab{display:flex;flex-direction:column;align-items:center;gap:3px;width:52px;padding:9px 0 7px;border-radius:10px;background:none;color:#3a3d55;font-size:10.5px;font-weight:650;line-height:1.1;letter-spacing:-.01em}
 .side-tab:hover{background:#e9e7f7}
 body.side-open .side-tab[aria-expanded=true]{background:#e0ddfb;color:#3730a3}
 .side-close{display:none}
 .side-panel{width:300px;border-right:1px solid #e3e1ee;padding:12px 16px 28px}
}
@media(max-width:999px){
 .side{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:min(88%,360px);z-index:50;background:#fff;box-shadow:0 0 40px #1f1d3a40;transform:translateX(-105%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
 body.drawer-open .side{transform:none;visibility:visible;transition:transform .2s ease}
 .side-strip{display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) 8px 10px 16px;border-bottom:1px solid #e3e1ee}
 .side-tab{display:none}
 .side-drawer-title{flex:1;min-width:0;margin:0;font-size:17px;color:#1d2033}
 .side-close{flex:none;min-width:44px;min-height:44px;padding:0;background:none;color:#3a3d55;font-size:18px}
 .side-head{display:none}
 .side-panel{flex:1;min-height:0;padding:14px 16px max(24px,env(safe-area-inset-bottom))}
 .side-backdrop{position:fixed;inset:0;background:#1d203366;z-index:49}
}
/* Keep the phone header controls together. Sign out is in the Menu below 700 px. */
@media(max-width:600px){
 .header-actions{gap:8px}
}
/* The one panel (side panel v2 §4.1, §4.2): the strip at the top (the exam card or goal line, then a line per group),
   "In this chat" with each concept's standing, then the closed rows; a closed row is a button, ▸/▾ by aria-expanded,
   as the outline's topic rows. */
.pfold-title{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;margin:6px 0 2px;padding:6px 6px 6px 4px;background:none;border-radius:8px;text-align:left;font-size:13px;font-weight:750;color:#3a3d55;line-height:1.3}
.pfold-title:hover{background:#f2f0ff}
.pfold-title::before{content:"▸";flex:none;width:12px;color:#5b5d70;font-size:11px}
.pfold-title[aria-expanded=true]::before{content:"▾"}
.pfold-label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.pfold-count{flex:none;font-weight:500;color:#5b5d70;font-size:12.5px}
.pfold-body{padding:0 0 6px 16px}.pfold-body[hidden]{display:none}
.pfold-body>.pset:first-child{margin-top:0}
.pfold-title:focus-visible{outline:3px solid #0a58c2;outline-offset:-3px}
.pstrip{background:#f7f6fd;border:1px solid #e6e4f3;border-radius:10px;padding:6px 10px;margin:0 0 16px}
.pstrip>.pgoal{background:none;border:0;border-bottom:1px solid #e6e4f3;border-radius:0;padding:4px 0 8px;margin:0 0 4px}
.pstrip-line{display:flex;align-items:baseline;justify-content:space-between;gap:0 8px;font-size:13px;color:#2b2d42;padding:2px 0}
.pstrip-group{min-width:0;flex:1}.pstrip-group b{font-weight:700;color:#1d2033}
.pstrip-bar{margin-top:4px}.pstrip-bar .pcounts{margin-bottom:0}
.panel-in-chat{font-size:14px;font-weight:750;margin:0 0 8px;color:#1d2033}
.outline .orow a{min-height:30px;padding-bottom:0;font-weight:500}
.orow-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 10px 4px;font-size:12.5px}
.orow-status{color:#5b5d70;display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline}
.orow-act{background:none;color:#4f46e5;padding:0 2px;font-size:12.5px;font-weight:650;min-height:28px;white-space:nowrap}
.orow-act:hover{text-decoration:underline}
.ptail{border-top:1px solid #e3e1ee;margin-top:14px;padding-top:6px}
.prow-mark{font-size:12px;color:#5b5d70}
/* The exam card (exam prep design §3), in the strip's slot. */
.exam-card{background:#fff;border:1px solid #d6d2f3;border-radius:12px;padding:10px 12px;margin:2px -4px 10px;box-shadow:0 1px 0 #e6e4f3}
.exam-card>.pgoal{background:none;border:0;padding:0 0 6px;margin:0}
.exam-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;padding-bottom:6px;border-bottom:1px solid #e6e4f3}
.exam-title{flex:1 1 0;min-width:0;font-weight:750;font-size:14px;color:#1d2033}
.exam-info{flex:none;background:none;color:#5b5d70;padding:0 2px;font-size:12px;font-weight:600;min-height:28px;min-width:28px}
.exam-info:hover{color:#3730a3}
.exam-info-lines[hidden]{display:none}
.exam-info-line{font-size:12.5px;color:#5b5d70;margin:6px 0 0;line-height:1.4}
.exam-sec{display:flex;align-items:center;gap:8px;margin:10px 0 2px;padding:0 6px 0 4px;font-size:13px;font-weight:750;color:#3a3d55}
.exam-sec>span:first-child{flex:1 1 auto}
.exam-head>.exam-sec{flex:1 1 auto;margin:0}
/* "Already got right": the fold row with its Quiz me beside it, the names below when open. */
.exam-done{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px}
.exam-done>.pfold-title{flex:1 1 auto;width:auto}
.exam-done>.pfold-body{flex:1 1 100%}
.exam-not{font-size:12.5px;color:#5b5d70;margin:10px 0 4px;line-height:1.4}
.exam-card .pfold-body{padding-left:8px}
@media (prefers-reduced-motion:reduce){.count-badge.pulse{animation:none}.side,body.drawer-open .side{transition:none}}
/* Oct 16 (crossed-messages.md §4): Try again after a failed turn, a small link-like button beside the error. */
#status .retry-turn{background:none;color:#4f46e5;padding:0 2px;font-size:14px;font-weight:650;text-decoration:underline;border-radius:4px}
/* Send feedback (Fable's docs/fable/feedback/general.md, Oct 20): the Menu's dialog in the "Your data" family. */
#fb-text{display:block;box-sizing:border-box;width:100%;min-height:72px;max-height:40vh;margin:10px 0 2px;padding:10px 12px;border:1px solid #d1d1d6;border-radius:10px;font:inherit;font-size:16px;line-height:1.4;resize:none;background:#fff;color:#202338}
#fb-text:focus-visible{outline:3px solid #0a58c2;outline-offset:1px}
.fb-actions{justify-content:flex-end}
.fb-actions #fb-send{background:#0a66d8;border-color:#0a66d8;color:#fff;font-weight:650}
.fb-actions #fb-send:disabled{background:#c7c7cc;border-color:#c7c7cc;opacity:1;cursor:default}
/* Coach's personalities (docs/fable/personalities/design.md §4.1, §5, §7; owner, Oct 21: "approve all the personality
   decisions"), under prompt v7 only (body.persona-on, set by coach.js when the session names a personality): the face
   beside Progress, as mocked on /app/admin/designs section 1 (web_static/designs.css), and the chooser dialog. */
.persona-face{display:block;width:32px;height:32px;border-radius:50%;object-fit:cover}
.persona-tab{background:none;color:#3a3d55}
.side-strip .persona-tab{margin-bottom:6px}
.persona-head{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;padding:4px 6px;border-radius:10px;font-size:10.5px;font-weight:650;line-height:1.1}
.persona-head:hover,.side-strip .persona-tab:hover{background:#e9e7f7}
body.persona-on .side-head h2{flex:1;min-width:0}
.persona-hdr{background:#eeecff;padding:0}
.persona-hdr .persona-face{width:34px;height:34px}
/* The strip is 56 px: "Personality" is the longest tab label, so it is set a little tighter than Progress. */
.side-strip .persona-tab .side-tab-label,.persona-head .side-tab-label{font-size:9.5px;letter-spacing:-.03em}
.persona-panel{max-width:520px}
.persona-intro{font-size:14px;color:#3a3d55}
.persona-cards{list-style:none;margin:10px 0 4px;padding:0;display:flex;flex-direction:column;gap:8px}
.persona-card{display:flex;align-items:center;gap:12px;background:#f7f6fd;border:1px solid #e6e4f3;border-radius:12px;padding:10px 12px}
.persona-card.chosen{border:2px solid #4f46e5;background:#f1efff;padding:9px 11px}
.persona-card-face{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover}
.persona-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.persona-name{font-size:15px;color:#1d2033}
.persona-line{font-size:13px;color:#5b5d70}
.persona-pick{flex:none;min-height:40px;padding:8px 14px;border-radius:20px}
.persona-card.chosen .persona-pick{background:#e0dcff;color:#3f36b8}
.persona-done{font-size:14px;color:#145a2c;margin:8px 0 2px}
.persona-close{font:inherit;background:none;border:0;color:#4f46e5;padding:6px 0;cursor:pointer}
.persona-pick:focus-visible,.persona-close:focus-visible,.persona-tab:focus-visible,.persona-hdr:focus-visible{outline:3px solid #0a58c2;outline-offset:2px}
/* Phones: a fourth button in the header (face, ring, Menu, Sign out) leaves no slack at 390 px. */
@media(max-width:600px){
 body.persona-on .header-actions{gap:6px}
 body.persona-on #logout{white-space:nowrap}
 .persona-card{gap:10px;padding:8px 10px}.persona-card.chosen{padding:7px 9px}
 .persona-card-face{width:40px;height:40px}
 .persona-pick{padding:8px 12px}
}
/* Prompt v13: the Map (docs/design/progress-map.md). Places, not grades: plain rows with when each came up, the next
   suggestions as buttons, the exam's topics marked ● come up / ○ not yet. */
.map-sec{margin:0 0 16px}
.map-head{font-size:14px;font-weight:750;margin:0 0 8px;color:#1d2033}
.map-sec>.pset-title{margin:10px 0 6px}
.mrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 10px;border-bottom:1px solid #eeedf5;font-size:14px;line-height:1.35}
.mrow:last-child{border-bottom:0}
.mrow[hidden]{display:none}
.mrow-name{min-width:0;overflow-wrap:anywhere;color:#202338}
.mrow-when{flex:none;font-size:12.5px;color:#5b5d70}
.mnext{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;text-align:left;background:#f7f6fd;border:1px solid #e6e4f3;border-radius:10px;padding:8px 10px;color:#202338;font-weight:650;line-height:1.35}
.mnext:hover{background:#efedfc;border-color:#d6d2f3}
.mnext-name{min-width:0;overflow-wrap:anywhere}
.mnext-go{flex:none;color:#4f46e5}
.map-topics{list-style:none;margin:8px 0 0;padding:0}
.map-topic{display:flex;align-items:baseline;gap:8px;padding:3px 2px;font-size:13.5px;line-height:1.35;color:#3a3d55}
.map-topic[hidden]{display:none}
.map-topic.on{color:#1d2033}
.map-mark{flex:none;width:1em;color:#8b88b8}
.map-topic.on .map-mark{color:#4f46e5}
.map-name{min-width:0;overflow-wrap:anywhere}

.history-status{min-height:36px;padding:8px;text-align:center;color:#777;font-size:12px;overflow-anchor:none}
/* Prompt v14: a reply is ordered parts; text that follows a visual (and its vote bar) starts a little below it. */
.bubble .widget-vote+.markdown-content{margin-top:12px}

/* Compact map: one panel scroller; lists replace six rows at a time. */
.side-panel{padding:10px 12px 24px}
.map-sec,.map-exam,.map-fold{margin:0 0 8px}
.map-head{margin:0 0 4px;font-size:14px;line-height:1.35}
.mnext{display:flex;width:100%;min-height:44px;gap:8px;padding:5px 4px;border:0;border-radius:3px;background:none;color:#202338;text-align:left;font-size:14px;font-weight:400;line-height:1.35}
.mnext:hover,.map-toggle:hover{background:#f2f0fa}
.mnext:focus-visible,.map-toggle:focus-visible{outline:2px solid #4f46e5;outline-offset:-2px}
.mnext:disabled{opacity:.5}
.mnext-name{flex:1}.mnext-go{color:#9895aa}.mrow-when{font-size:12px}
.map-toggle{min-height:44px;padding:4px;background:none;color:#55516f;font-size:14px;text-align:left;line-height:1.35}
.map-pager{display:flex;justify-content:space-between}.map-pager button:disabled{opacity:.4}
.map-page,.map-fold{overflow:visible}.map-exam .exam-head{display:block}.map-exam .map-fold{display:inline-block;vertical-align:top}.map-exam .map-fold:has(.map-page){display:block}
.map-page .pset-title{font-size:12px;margin:4px 0 0}
@media(hover:hover) and (pointer:fine){.mnext,.map-toggle{min-height:32px}}

/* Safari-style strip: equal widths until the minimum requires horizontal scrolling. */
#chat-tabs{display:flex;align-items:stretch;padding:2px 8px 0;border-bottom:1px solid #dedce3;height:46px;flex:none;background:#eeedf1;z-index:31}
#chat-tab-list{display:flex;align-items:stretch;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;min-width:0;flex:0 1 auto}
#chat-tab-list::-webkit-scrollbar{display:none}
.chat-tab{touch-action:pan-x;position:relative;display:flex;align-items:center;flex:0 1 220px;min-width:120px;border-radius:8px 8px 0 0;color:#666375}
.chat-tab:not(.is-current)::after{content:"";position:absolute;right:0;top:12px;bottom:12px;width:1px;background:#d1cfd8;pointer-events:none}
.chat-tab.is-current{min-width:164px;background:#faf9f6;box-shadow:0 -1px 3px #25204a0d;color:#302c47;z-index:1}
.tab-select{flex:1;min-width:0;min-height:44px;padding:0 32px;background:none;color:inherit;font-weight:400;border-radius:8px 8px 0 0}
.tab-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tab-close{position:absolute;left:4px;top:8px;width:28px;height:28px;min-width:0;padding:0;background:none;color:inherit;font-size:19px;line-height:1;opacity:0;pointer-events:none;border-radius:5px}
.chat-tab.is-current .tab-close,.chat-tab:focus-within .tab-close{opacity:1;pointer-events:auto}
@media(hover:hover) and (pointer:fine){.chat-tab:hover .tab-close{opacity:1;pointer-events:auto}.tab-close:hover{background:#25204a12}}
#tab-add{flex:none;width:44px;min-height:44px;padding:0;background:none;color:#666375;font-size:24px;font-weight:400;border-radius:6px}
.tab-name-edit{font:inherit;font-size:14px;color:#302c47;width:calc(100% - 42px);min-width:0;height:32px;margin:6px 6px 6px 36px;border:1px solid #a49ffa;border-radius:4px;padding:0 4px;background:white}
.chat-tab.is-dragging{opacity:.45}.chat-tab.drop-target{box-shadow:inset 3px 0 #645fc0}.chat-tab.drop-target.drop-after{box-shadow:inset -3px 0 #645fc0}
#upload:focus-visible,#send:focus-visible,#mic:focus-visible,#remove-file:focus-visible{outline:3px solid var(--chrome-brand);outline-offset:2px}
.tab-select:focus-visible,.tab-close:focus-visible,#tab-add:focus-visible{outline:2px solid #a49ffa;outline-offset:-3px}
.tab-undo{flex:none;align-self:center;margin:0 4px;background:#302c47;border-radius:8px}
.tab-undo button{background:none;color:white;min-height:40px;padding:4px 12px;font-weight:500;white-space:nowrap}
@media(pointer:coarse),(max-width:600px){.chat-tab{flex-basis:156px}.tab-close{left:0;top:0;width:44px;height:44px}.tab-select{padding-left:44px;padding-right:16px}.tab-name-edit{margin-left:44px;width:calc(100% - 50px)}}
body.has-tabs .side{top:calc(var(--hdr,82px) + 54px)}
.source-chats{padding:12px;border:1px solid #e7e5e1;border-radius:8px}.source-chats summary{min-height:44px;cursor:pointer}.source-messages .bubble{margin:8px 0}.source-messages .role{display:block}
.map-exam .exam-info{min-width:44px;min-height:44px}
@media(hover:hover) and (pointer:fine){.map-exam .exam-info{min-width:32px;min-height:32px}}
.tab-dialog{max-width:min(420px,95vw);border:1px solid #ddd;border-radius:12px}
.tab-dialog button{display:block;margin:8px 0;min-height:44px}

/* Draft growth is pinned by keepPinned only while the student follows the reply. */
.provisional{overflow-anchor:none}
.draft-content>.markdown-content{margin-bottom:.35em}

/* Topic labels jump to the chat; the adjacent count opens its concepts. */
.map-section-row{display:flex;align-items:center;gap:4px}
.map-section-jump{min-width:0;overflow-wrap:anywhere}
.map-toggle.map-section-marker{flex:none;min-width:32px;min-height:32px;padding:4px 6px;border-radius:16px;background:#f2f0fa;color:#68627e;font-size:12px;text-align:center}
.map-section-marker:hover,.map-section-marker[aria-expanded=true]{background:#e7e3f4;color:#4f46e5}

/* Owner (Oct 26): only new reply text may advance the view; browser anchoring must not move it too. */
body.reading-reply #messages,html:has(body.reading-reply){overflow-anchor:none}

/* First-conversation form, inside the messages scroller above the composer. */
.intro-card{background:white;border:1px solid #c8c8cd;border-radius:20px;padding:20px;margin:4px 0 12px;width:100%;max-width:660px;align-self:center;color:#202338}
.intro-card h2{font-size:20px;margin:0 0 16px}.intro-field{margin:0 0 14px;padding:0;border:0;min-width:0}
.intro-field label,.intro-field legend{display:block;font-size:14px;font-weight:650;margin-bottom:6px;padding:0}
.intro-field input{width:100%;min-width:0;font:inherit;font-size:16px;border:1px solid #c8c8cd;border-radius:10px;padding:8px 10px;background:#faf9f6;color:inherit}
.intro-chips{display:flex;flex-wrap:wrap;gap:7px}.intro-chips button{font-size:14px;font-weight:500;padding:8px 12px;min-height:44px;border:1px solid #c8c8cd;background:white;color:#202338;border-radius:22px}
.intro-chips button[aria-pressed="true"]{background:#e7f0ff;border-color:#0a66d8;color:#064ba1;box-shadow:inset 0 0 0 1px #0a66d8}
.intro-actions{display:flex;gap:12px;flex-wrap:wrap}.intro-actions button{min-height:44px;background:#0a66d8}.intro-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.intro-head .intro-close{background:transparent;color:inherit;padding:4px 8px;font-size:16px}
.intro-card :focus-visible{outline:3px solid #0a58c2;outline-offset:2px}
@media(max-width:600px){.intro-card{padding:16px}.intro-chips{gap:6px}}

/* The session survey stays small inside the conversation column. */
.feedback-card{box-sizing:border-box;width:100%;max-width:620px;margin:12px 0;padding:12px 14px;border:1px solid var(--chrome-line);border-radius:14px;background:var(--chrome-card);color:var(--chrome-ink)}
.feedback-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.feedback-head h2{font-size:15px;line-height:1.3;margin:0}.feedback-head span{font-size:12px;color:var(--chrome-mute)}
.feedback-card button{font:inherit;cursor:pointer}.feedback-dismiss{margin-left:auto;background:none;color:inherit;border:0;padding:4px 8px;min-width:32px;min-height:32px}
.feedback-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.feedback-chips button{border:1px solid #c9ceca;border-radius:20px;background:transparent;padding:6px 10px;font-size:13px;line-height:1.25;color:inherit}.feedback-chips button[aria-pressed=true]{background:#e2efe6;border-color:#477153;color:#244a30}
.feedback-entry{display:flex;gap:8px}.feedback-entry+.feedback-entry{margin-top:8px}.feedback-entry input{box-sizing:border-box;min-width:0;flex:1;border:1px solid #c9ceca;border-radius:7px;padding:7px 9px;font:inherit;font-size:13px}.feedback-entry button{border:0;border-radius:7px;padding:7px 14px;background:#355e43;color:white;font-size:13px}
.feedback-card :focus-visible{outline:2px solid #355e43;outline-offset:2px}.feedback-card button:disabled{opacity:.6}

/* Owner, Oct 24: one compact question at a time, on phones and desktop. */
.intro-card{padding:10px 12px;line-height:1.3}
.intro-card h2{font-size:13px;font-weight:500;margin:0}
.intro-head{align-items:center;margin-bottom:8px;gap:8px}
.intro-head .intro-close{min-height:0;line-height:1;padding:2px 4px}
.intro-count{font-size:12px;white-space:nowrap;margin-left:auto;color:#666778}
.intro-field{margin-bottom:8px}
.intro-field label,.intro-field legend{margin-bottom:4px}
.intro-field input{min-height:44px}
.intro-chips{gap:4px}
.intro-chips button{font-size:13px;padding:4px 9px;min-height:32px;line-height:1.2}
.intro-actions{justify-content:space-between}
.intro-actions button:last-child{margin-left:auto}
.feedback-entry{flex-wrap:wrap}
.feedback-entry input{font-size:16px;min-height:44px;flex-basis:70%}
.feedback-entry button{min-height:44px}
.feedback-entry button[type=submit]{margin-left:auto}
#menu-logout{display:none}
@media(max-width:699px){
 body>header,body.shell-on>header{height:calc(44px + env(safe-area-inset-top,0px));min-height:calc(44px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(4px,env(safe-area-inset-right,0px)) 0 max(4px,env(safe-area-inset-left,0px));transition:height .15s,min-height .15s,opacity .15s,transform .18s}
 .brand{font-size:21px}
 .header-actions{gap:6px}
 .header-actions #open-progress,.menu summary{min-height:44px;height:44px}
 body:has(#chat:not([hidden])) .header-actions>#logout{display:none}
 #menu-logout{display:block}
 .dock{padding:4px 0 max(4px,env(safe-area-inset-bottom))}
 #compose{padding:2px 4px}
 #compose label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
 #upload,#send,#mic{min-width:44px;width:44px;height:44px;margin:0}
 #question{min-height:44px;padding:10px 4px}
 #chat-tabs{transition:max-height .15s,opacity .15s;max-height:80px}
 body.keyboard-open>header{height:0;min-height:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;visibility:hidden}
 body.keyboard-open #chat-tabs{max-height:0;min-height:0;padding:0;margin:0;border:0;opacity:0;overflow:hidden;visibility:hidden}
}
@media(prefers-reduced-motion:reduce){body>header,#chat-tabs{transition:none!important}}

#question{min-width:0;width:0}
#question::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* Coach's reply decorations. Stamps remain still in history; overlays never intercept input. */
.coach-reaction{position:absolute;right:5px;bottom:-12px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:28px;max-width:100%;height:28px;padding:2px;border:2px solid #faf9f6;border-radius:22px;background:#fff;color:#99600f;box-shadow:0 3px 9px #182c3226;font:700 15px/1 system-ui,sans-serif;white-space:nowrap;pointer-events:none;z-index:2;isolation:isolate}
.coach-reaction svg{width:22px;height:22px;flex:none;overflow:visible}.reaction-count{padding:0 5px 0 2px;font-variant-numeric:tabular-nums}.reaction-live{min-width:38px;height:38px;padding:3px;animation:coach-stamp .65s cubic-bezier(.2,.7,.3,1) both;filter:drop-shadow(0 3px 6px #82622b24)}.reaction-live svg{width:28px;height:28px}.reaction-live::before{content:"";position:absolute;inset:-5px;border:2px solid #efbf5780;border-radius:50%;animation:coach-ring .85s .15s ease-out both;z-index:-1}
@keyframes coach-stamp{0%{transform:scale(0) rotate(-16deg);opacity:0}48%{transform:scale(1.25) rotate(6deg);opacity:1}72%{transform:scale(.94) rotate(-3deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes coach-ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.reaction-live .check-stroke{stroke-dasharray:1;animation:coach-check .55s .22s ease-out both}
@keyframes coach-check{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.target-ripple{opacity:0;transform-origin:24px 24px}.reaction-live .target-disc{transform-origin:24px 24px;animation:coach-target-hit .5s .42s both}.reaction-live .target-arrow{animation:coach-arrow .5s cubic-bezier(.35,0,.8,.6) both}.reaction-live .target-ripple{animation:coach-impact .8s .43s ease-out both}.reaction-live .arrow-feathers{transform-origin:42px 6px;animation:coach-quiver .55s .48s ease-out both}
@keyframes coach-arrow{0%,35%{transform:translate(90px,-60px);opacity:0}36%{opacity:1}88%{transform:translate(-2px,2px)}100%{transform:translate(0,0);opacity:1}}
@keyframes coach-target-hit{0%,100%{transform:translateX(0) rotate(0)}18%{transform:translateX(-3px) rotate(-8deg)}40%{transform:translateX(2px) rotate(6deg)}65%{transform:translateX(-1px) rotate(-3deg)}}
@keyframes coach-impact{from{transform:scale(.8);opacity:.9}to{transform:scale(2);opacity:0}}
@keyframes coach-quiver{0%,100%{transform:rotate(0)}15%,45%{transform:rotate(12deg)}30%,65%{transform:rotate(-9deg)}80%{transform:rotate(4deg)}}
.reaction-spark i{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:2px;animation:coach-spark .95s var(--delay) ease-out both}
.reaction-live.reaction-spark svg{animation:coach-twinkle .9s .18s ease-in-out both}
@keyframes coach-spark{0%{transform:translate(-50%,-50%) scale(0);opacity:0}18%{opacity:1}55%{opacity:.9}75%{opacity:.35}85%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(150deg) scale(.2);opacity:0}}
@keyframes coach-twinkle{0%,100%{filter:brightness(1)}40%,75%{filter:brightness(1.5) drop-shadow(0 0 5px #ffbf35)}}
.reaction-live .streak-flame{transform-origin:24px 44px;animation:coach-flicker .18s ease-in-out 7 alternate;filter:drop-shadow(0 0 4px #ff9d36)}.reaction-live .reaction-count{animation:coach-count .6s .15s both}
@keyframes coach-flicker{from{transform:scale(.94,1.05) rotate(-3deg)}to{transform:scale(1.05,.94) rotate(3deg);filter:drop-shadow(0 0 7px #ff713d)}}
@keyframes coach-count{from{transform:translateY(7px);opacity:.2}to{transform:translateY(0);opacity:1}}
.reaction-live .bulb-glass{animation:coach-switch .95s .12s both}.reaction-live .bulb-rays{transform-origin:24px 24px;animation:coach-rays 1s .2s both}
@keyframes coach-switch{0%,18%{fill:#cbd0d8;filter:none}24%,38%,100%{fill:#ffe386;filter:drop-shadow(0 0 6px #ffc94a)}30%{fill:#e4d4a4;filter:none}}
@keyframes coach-rays{0%,20%{opacity:0;transform:scale(.75)}45%,75%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
.coach-effect,.coach-effect *{pointer-events:none!important}.coach-effect{position:fixed;inset:0;overflow:hidden;z-index:52;contain:strict}.effect-canvas{display:block;width:100%;height:100%}#messages>.bubble{z-index:1}
.effect-map-button{animation:coach-map-ring 1.1s ease-in-out 3;box-shadow:0 0 0 4px #c3b9f0,0 0 25px #9584cf99!important}.effect-map-node{position:relative;animation:coach-map-glow 1.1s ease-in-out 3}.effect-map-lines{width:100%;height:100%;overflow:visible}.effect-map-lines path{fill:none;stroke:#a28aff;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;filter:drop-shadow(0 0 4px #9d7dff);animation:coach-map-line 3.4s ease-out both}.effect-map-spark{fill:#fff4ba;filter:drop-shadow(0 0 5px #a28aff)}
@keyframes coach-map-ring{0%,100%{outline:0 solid #b69aff00;outline-offset:0}50%{outline:8px solid #b69aff66;outline-offset:6px;filter:drop-shadow(0 0 9px #b69aff)}}
@keyframes coach-map-glow{0%,100%{box-shadow:inset 0 0 0 2px #a28ccf,0 0 10px #a18ade66;background:#f1ebfb}50%{box-shadow:inset 0 0 0 2px #a28ccf,0 0 0 6px #b7a1d633,0 0 25px #a18adebb;background:#e7ddff}}
@keyframes coach-map-line{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}49%,83%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.coach-reaction,.coach-reaction *,.coach-reaction::before,.effect-map-node,.effect-map-button{animation:none!important;transition:none!important}.coach-reaction::before,.coach-reaction i,.coach-effect{display:none!important}}
/* The map introduction is a nonmodal bubble; its bounds stay above the composer. */
.map-intro{position:fixed;z-index:55;box-sizing:border-box;padding:16px;border:1px solid #c9c4f2;border-radius:14px;background:#faf9ff;color:#292541;box-shadow:0 6px 24px #342b6c26;font-size:14px;line-height:1.45;overflow:auto}
.map-intro[hidden]{display:none}
.map-intro::before{content:"";position:fixed;left:var(--map-tip-left);top:var(--map-tip-top);width:10px;height:10px;background:#faf9ff;border-top:1px solid #c9c4f2;border-right:1px solid #c9c4f2;transform:rotate(-135deg)}
.map-intro p{margin:7px 0 14px}
.map-intro-actions{display:flex;gap:10px}
.map-intro-actions button{font:inherit;min-height:44px;padding:8px 14px;border-radius:8px;border:1px solid #5147cf;background:#5147cf;color:#fff}
.map-intro-actions button:last-child{background:transparent;color:#5147cf}
.map-intro :focus-visible{outline:3px solid #0a58c2;outline-offset:2px}
.map-intro.walkthrough{overflow-wrap:break-word}
.map-intro.walkthrough::before{transform:rotate(-45deg)}
.map-intro.walkthrough[data-above="true"]::before{transform:rotate(135deg)}
.map-intro.walkthrough p{margin-top:0}
/* Local game-style cue: 1.6 seconds of pop/orbit/burst, then a quiet reminder until dismissed. */
.map-intro-target{box-shadow:0 0 0 3px #8b5cf6,0 0 0 6px #f5c34e,0 0 25px 8px #a78bfa70;animation:map-intro-glow 2.6s ease-in-out infinite}
.map-intro-target.map-intro-pop{animation:map-intro-pop 1.6s ease-out both;transform-origin:center}
@keyframes map-intro-pop{0%{transform:scale(1)}20%,32%{transform:scale(1.25);filter:brightness(1.2)}48%{transform:scale(.96)}64%,100%{transform:scale(1);filter:none}}
@keyframes map-intro-glow{50%{box-shadow:0 0 0 3px #8b5cf6,0 0 0 5px #f5c34e90,0 0 16px 4px #a78bfa40}}
.map-intro-effect,.map-intro-effect *{pointer-events:none!important}
.map-intro-effect{position:fixed;z-index:54;overflow:hidden}
.map-intro-marker{position:absolute;border-radius:12px}
.map-intro-ring{position:absolute;inset:-5px;border:3px solid #f5b82e;border-radius:inherit;opacity:0;animation:map-intro-ring .85s ease-out both}
@keyframes map-intro-ring{0%{transform:scale(.85);opacity:.95}100%{transform:scale(2.5);opacity:0}}
.map-intro-star{position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8.5px;color:var(--star-color);opacity:0;animation:map-intro-burst 1.6s ease-out both;filter:drop-shadow(0 0 4px currentColor)}
.map-intro-star::before{content:"";position:absolute;inset:0;background:currentColor;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@keyframes map-intro-burst{0%{transform:translate(var(--start-x),var(--start-y)) scale(.1) rotate(0);opacity:0}18%{opacity:1}45%{transform:translate(var(--orbit-x),var(--orbit-y)) scale(1.1) rotate(100deg);opacity:1}65%{opacity:.5}78%{opacity:1}100%{transform:translate(var(--burst-x),var(--burst-y)) scale(.2) rotate(220deg);opacity:0}}
.map-intro-idle .map-intro-star{width:12px;height:12px;margin:-6px;animation:map-intro-twinkle 2.6s ease-in-out var(--twinkle) infinite}
@keyframes map-intro-twinkle{0%,28%,100%{transform:translate(var(--orbit-x),var(--orbit-y)) scale(.2) rotate(0);opacity:0}12%{transform:translate(var(--orbit-x),var(--orbit-y)) scale(1) rotate(90deg);opacity:.85}}
@media(min-width:1000px){#tab-progress.map-intro-pop{transform-origin:left center}}
@media(max-width:999px){.map-intro::before{transform:rotate(-45deg)}}
@media(prefers-reduced-motion:reduce){.map-intro-target,.map-intro-target.map-intro-pop{animation:none!important;transform:none;filter:none}.map-intro-star,.map-intro-ring{display:none!important}}
/* The approved survey hint has a full sentence and needs its own line on phones. */
.feedback-head{flex-wrap:wrap}
.feedback-head h2{flex:1}
.feedback-head span{order:3;flex-basis:100%}

/* Closed tabs on the tab bar, next to + (owner, Oct 26: "Closed tabs should not be hiding in the menu. It should be something you access on the tab bar"). */
#chat-tabs .tab-closed{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;margin-left:2px;border:0;background:none;color:#4b4f63;cursor:pointer;border-radius:8px}
#chat-tabs .tab-closed:hover{background:#e3e1ea;color:#202338}
#chat-tabs .tab-closed:focus-visible{outline:3px solid #0a58c2;outline-offset:-2px}
/* Owner, Oct 29: the Menu invite dialog puts Copy link ahead of the QR. */
.invite-panel{background:var(--chrome-card);color:var(--chrome-ink);border-color:var(--chrome-line);box-sizing:border-box}
.invite-panel label{display:block;font-size:14px}
.invite-panel input{display:block;width:100%;min-width:0;box-sizing:border-box;font:inherit;margin:4px 0 12px;padding:10px;border:1px solid var(--chrome-line);background:var(--chrome-bg);color:inherit;border-radius:8px;user-select:text;-webkit-user-select:text}
.invite-panel button{font:inherit;min-height:44px;padding:8px 12px;background:var(--chrome-soft);color:var(--chrome-brand)}
.invite-panel a{color:var(--chrome-brand)}
.invite-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
#invite-share-copy{background:var(--chrome-brand);color:var(--chrome-on-brand);font-weight:650}
#invite-share-copy:disabled{opacity:1;cursor:default}
#invite-share-status{min-height:24px}
#invite-share-code{margin:12px 0}
#invite-share-qr{display:block;width:160px;height:160px;max-width:100%;margin:8px 0;background:#fff;image-rendering:pixelated}
.invite-panel ul{padding-left:20px}
#invite-share-close{margin-top:12px}

.compose-row{position:relative}

/* Scene records contain sibling chat bubbles, with the same avatar gutter as Coach. */
.reply-group{background:transparent;border:0;margin:0;padding:0;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;min-width:0;white-space:normal}
.reply-group[hidden],.reply-group [hidden]{display:none!important}
.scene-arrival{display:grid;grid-template-rows:1fr;width:100%;min-width:0}
.scene-arrival-body{min-height:0;display:flex;flex-direction:column;align-items:flex-start}
.scene-revealing{animation:scene-arrive 300ms ease-out both}
.scene-revealing>.scene-arrival-body{overflow:hidden}
@keyframes scene-arrive{from{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}
@media(prefers-reduced-motion:reduce){.scene-revealing{animation:none}}
.scene-divider{width:100%;margin:14px 0 4px}
.scene-intro{white-space:pre-wrap;overflow-wrap:anywhere;width:100%;font-size:15px;color:#5b5d70}
#messages .char-bubble{background:var(--scene-light,#e9e9eb);color:#202338;border:2px solid transparent;max-width:calc(100% - var(--gutter));white-space:normal}
.char-avatar{position:absolute;left:calc(-1 * var(--gutter));bottom:0;width:44px;height:44px;object-fit:cover;border-radius:50%}
.char-name{display:block;font-weight:650;font-size:13px;margin-bottom:5px}
.scene-text{white-space:pre-wrap;overflow-wrap:anywhere}
.scene-gloss{margin-top:6px;font-size:13px;font-style:italic;line-height:1.45;color:#585a6b;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.scene-speaker{position:absolute;left:100%;bottom:-2px;width:44px;height:44px;min-width:44px;padding:0;margin-left:4px;background:none;color:#2f6fde;display:grid;place-items:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none}
.scene-speaker svg{width:18px;height:18px;overflow:visible}
.scene-playing .scene-speaker .w{animation:scene-wave 1s ease-in-out infinite}
.scene-playing .scene-speaker .w2{animation-delay:.25s}
.scene-speaker:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
.scene-tortoise{display:none;position:absolute;right:0;top:-7px;font-size:13px}
.scene-slow-playing .scene-tortoise{display:block}
#messages .char-bubble.has-scene-audio{max-width:calc(100% - var(--gutter) - 48px)}
.scene-playable{cursor:pointer;text-decoration:underline;text-decoration-color:#2f6fde33;text-decoration-thickness:3px;text-underline-offset:3px;user-select:text;-webkit-user-select:text}
.scene-playable:hover{text-decoration-color:#2f6fde66}
.scene-playing .scene-playable{background:#2f6fde1f;border-radius:3px;text-decoration-color:#2f6fde99}
@keyframes scene-wave{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.scene-playing .scene-speaker .w{animation:none}}
.your-turn{margin-top:10px;font-weight:650;font-size:12px}
.scene-open #mic{box-shadow:0 0 0 3px #b8d5ff;width:44px;height:44px;min-width:44px}
.reply-group>.reply-controls{margin-left:var(--gutter)}
body.picking #messages .reply-group[id^="m-"]{cursor:pointer;outline:2px dashed #f0b35a;outline-offset:2px}
body.picking #messages .reply-group[id^="m-"] *{pointer-events:none}
@media(prefers-color-scheme:dark){
 #messages .char-bubble{background:var(--scene-dark,#343438);color:#f5f5f7}
 .scene-intro{color:#c3c3d0}
 .scene-gloss{color:#c2c2cc}
}

/* Spanish objects (owner's style A): selectable paper props and flat tools in the stream. */
.item-event{width:90%;max-width:680px;align-self:center;margin:12px auto;min-width:0;white-space:normal}
.item-hand{font-size:14px;color:#575b66;font-style:italic;line-height:1.5;margin:0 4px 10px;overflow-wrap:anywhere}
.item-card{box-sizing:border-box;width:100%;padding:22px;border-radius:12px;overflow-wrap:anywhere;position:relative;color:#202333;user-select:text;-webkit-user-select:text}
.item-prop{background:#fffaf0;border:1px solid #dfd2ba;box-shadow:0 7px 20px #30220f1c;transform:rotate(-.45deg);animation:item-reveal .45s ease-out}
.item-tool{background:#fff;border:1px solid #ccd1da;box-shadow:none;transform:none}
.item-title{font-size:20px;margin:0 0 16px;line-height:1.3}.item-menu .item-title{font:600 25px/1.3 Georgia,serif;text-align:center}
.item-held{display:flex;align-items:center;gap:7px;font:12px/1.4 system-ui;margin:-10px 0 12px}.item-held img{width:28px;height:28px;border-radius:50%}.scene-held{border-left:3px solid var(--item-holder,#406da5)}
.item-menu-row{display:flex;gap:8px;align-items:center;border-bottom:1px dotted #c8bda8;padding:8px 0}.item-menu-row .item-spoken{flex:1;min-width:0;font-family:Georgia,serif}.item-price{font:13px/1.4 ui-monospace,monospace;white-space:nowrap}.item-action{min-width:44px;min-height:44px;padding:8px;background:transparent;color:#245bb2;border:1px solid #bac5d5;border-radius:9px;font:inherit;cursor:pointer}.item-action:focus-visible{outline:3px solid #2864ba;outline-offset:2px}
.item-notice{font:12px/1.5 system-ui;color:#55594e;margin:14px 0 0}.item-spoken{display:flex;align-items:center;gap:4px;min-width:0}.item-words{min-width:0}.item-speaker.scene-speaker{position:relative;left:auto;bottom:auto;margin:0;display:inline-grid;flex-shrink:0;vertical-align:middle}.item-speaker.scene-speaker svg{width:22px;height:22px}
.item-ticket{font-family:ui-monospace,monospace;border-top:2px dashed #b9ac94;border-bottom:2px dashed #b9ac94;border-radius:2px}.item-route{font-weight:700;line-height:1.5}.item-ticket-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px}.item-ticket-row span{text-transform:capitalize}
.item-sign{background:#125638;color:#fff;border:5px double #fff;text-align:center;transform:rotate(.4deg)}.item-sign .scene-speaker{color:#fff}.item-sign .item-spoken{justify-content:center;margin:10px 0}.item-sign .item-spoken:first-of-type{font-size:24px;font-weight:700}
.item-message{width:86%;margin:auto;background:#e9eee9;border:7px solid #303743;border-radius:25px;font-family:system-ui}.item-phone-message{background:#fff;border-radius:12px;padding:12px;margin:10px 0}.item-phone-message p{margin:5px 0}.item-phone-message small{display:block;text-align:right;color:#525b65}
.item-listening{background:#182c44;color:#f6f8ff}.item-listening .item-action,.item-listening .scene-speaker{color:#cce0ff;border-color:#7890aa}.item-listening-controls{display:flex;align-items:center;gap:8px}.item-listening-controls>.scene-playable{font-size:19px}.item-transcript{margin-top:16px}.item-transcript summary,.item-reference summary{cursor:pointer;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:4px}.item-transcript p{line-height:1.6}.item-table-scroll{overflow-x:auto;max-width:100%}.item-reference table{border-collapse:collapse;font-size:15px;min-width:100%}.item-reference th,.item-reference td{padding:10px;border-bottom:1px solid #ccd1da;text-align:left}.item-card .coach-widget{max-width:100%;margin:0}.item-card iframe{max-width:100%}
.item-inert{filter:saturate(.35);opacity:.76}.item-inert .scene-playable{cursor:text;text-decoration:none}.item-inert button{opacity:.45;cursor:default}.item-inert iframe{pointer-events:none}
.say-span{display:inline;white-space:normal}.say-text{color:inherit}.say-span .scene-speaker{display:inline-grid;position:relative;left:auto;bottom:auto;margin:0;vertical-align:-.125em;width:1em;height:1em;min-width:0;font:inherit;line-height:1;padding:0;border-radius:0}.say-span .scene-speaker svg{width:1em;height:1em}.say-span .scene-speaker::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}.say-span.scene-playing .say-text{text-decoration-color:#245bb2;background:#2f6fde1f}.say-span .scene-playable{text-decoration-color:#2f6fde50}
@keyframes item-reveal{from{opacity:0;translate:0 8px;rotate:-.4deg}to{opacity:1;translate:0 0;rotate:0deg}}
@media(max-width:600px){.item-event{width:90%}.item-card{padding:16px}.item-menu-row{gap:4px}.item-price{font-size:11px}.item-menu-row .item-action{padding:3px;min-width:44px}.item-menu-row .item-spoken{display:block}.item-message{width:88%}}
@media(prefers-reduced-motion:reduce){.item-prop{animation:none;transform:none}.item-sign{transform:none}.item-card .scene-speaker .w,.say-span .scene-speaker .w{animation:none}}
@media(prefers-color-scheme:dark){.item-hand{color:#c3c7d1}.item-tool{background:#242834;color:#f3f5ff;border-color:#566072}.item-listening{background:#15273f}.item-tool .item-action{color:#cadfff}.item-tool .scene-speaker{color:#a7caff}.item-tool .item-notice{color:#c3c8d2}}
/* Spanish map: its own palette follows the approved sheet, with the STEM map untouched. */
.lang-map .side{--lm-ink:#202338;--lm-ink2:#3a3d55;--lm-mute:#666778;--lm-bg:#faf9f6;--lm-card:#fff;--lm-line:#e4e2eb;--lm-brand:#4f46e5;--lm-soft:#eeecff;--lm-soft2:#f2f0fa;color:var(--lm-ink);background:var(--lm-card)}
.lang-map .side-panel{background:var(--lm-card);color:var(--lm-ink)}
.lang-map .side-head,.lang-map .side-strip{background:var(--lm-card);color:var(--lm-ink)}
.lang-map .side-head{display:flex;align-items:center;gap:4px;padding-bottom:10px}
.lang-map .side-head h2,.lang-map .side-drawer-title{color:var(--lm-ink);font-size:20px;flex:1;margin:0}
.lang-tools{display:flex;gap:4px;align-items:center}
.lang-icon{display:inline-flex;justify-content:center;align-items:center;width:44px;min-width:44px;height:44px;padding:0;flex-shrink:0;border:0;border-radius:10px;position:relative}
.lang-icon.on{color:var(--lm-brand);background:var(--lm-soft)}.lang-icon.off{color:var(--lm-mute);background:var(--lm-soft2)}
.lang-icon svg{width:30px;height:30px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lang-icon svg>*{vector-effect:non-scaling-stroke}
.lang-icon:hover::after,.lang-icon.tipshow::after{content:attr(data-tip);position:absolute;top:110%;right:0;width:210px;background:var(--lm-ink);color:var(--lm-bg);font-size:12px;padding:6px 8px;border-radius:8px;z-index:9;text-align:left;line-height:1.35}
.lang-choices{border:1px solid var(--lm-line);border-radius:12px;padding:8px 10px;margin-bottom:16px}
.lang-choices>summary{font-size:13px;cursor:pointer;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.lang-current{font-size:12px;color:var(--lm-mute);font-weight:400;max-width:59%;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-choices h4{font-size:12px;margin:12px 0 6px;color:var(--lm-mute);font-weight:500}
.lang-chips{display:flex;flex-wrap:wrap;gap:5px}
.lang-chip{border:1px solid var(--lm-line);border-radius:16px;padding:5px 10px;font-size:12.5px;min-height:32px;background:none;color:var(--lm-ink2)}
.lang-chip[aria-pressed=true],.lang-correction button[aria-pressed=true]{background:var(--lm-soft);border-color:var(--lm-brand);color:var(--lm-brand);font-weight:650}
.lang-correction{display:flex;border:1px solid var(--lm-line);border-radius:10px;overflow:hidden}
.lang-correction button{flex:1;padding:8px 4px;font-size:12.5px;min-height:40px;background:none;color:var(--lm-ink2);border-radius:0;border:0;border-right:1px solid var(--lm-line)}.lang-correction button:last-child{border-right:0}
.lang-hint,.lang-empty{font-size:12px;color:var(--lm-mute);margin:8px 0 0;line-height:1.5}.lang-empty{font-style:italic}
.lang-section{margin:0 0 16px}.lang-section h3{font-size:14px;font-weight:750;margin:0 0 6px;color:var(--lm-ink)}
.lang-entry{display:flex;gap:6px;align-items:baseline;width:100%;padding:5px 2px;line-height:1.35;background:none;border:0;border-radius:4px;text-align:left;font-size:13.5px;color:var(--lm-ink2)}
.lang-entry:hover .lang-label{color:var(--lm-brand);text-decoration:underline}.lang-mark{width:1em;flex:none;color:var(--lm-brand)}.lang-label{flex:1;overflow-wrap:anywhere}
.lang-scene{display:flex;gap:8px;align-items:center;padding:6px;border:1px solid var(--lm-line);border-radius:10px;margin-bottom:6px;width:100%;text-align:left;font-size:13.5px;background:none;color:var(--lm-ink2)}
.lang-avatar{width:32px;height:32px;border-radius:50%;background:var(--lm-soft);flex:none}.lang-scene small{display:block;color:var(--lm-mute);font-size:11.5px}
.lang-search{width:100%;padding:8px 10px;border:1px solid var(--lm-line);border-radius:10px;font:inherit;font-size:14px;background:var(--lm-bg);color:var(--lm-ink);margin-bottom:8px;box-sizing:border-box}
.lang-search::placeholder{color:var(--lm-mute);opacity:1}
.lang-fold{border-top:1px solid var(--lm-line)}
.lang-fold>summary,.lang-group>summary{cursor:pointer;display:flex;gap:6px;align-items:center;justify-content:space-between;list-style:none;text-align:left;min-height:44px;line-height:1.3;font-size:14px;font-weight:700;padding:4px 2px;color:var(--lm-ink)}
.lang-fold>summary::-webkit-details-marker,.lang-group>summary::-webkit-details-marker{display:none}
.lang-fold>summary::before,.lang-group>summary::before{content:'▸';font-size:11px}.lang-fold[open]>summary::before,.lang-group[open]>summary::before{content:'▾'}
.lang-fold>summary>span,.lang-group>summary>span{flex:1}.lang-fold small,.lang-group small{color:var(--lm-mute);font-weight:400;font-size:12px}
.lang-group{margin:0 0 6px 6px}.lang-group>summary{font-size:12.5px;min-height:36px;font-weight:650;color:var(--lm-ink2)}
.lang-topic>button{background:none;color:var(--lm-ink2);padding:6px 0;font-size:13.5px;text-align:left}
.lang-map :is(button,input,summary):focus-visible{outline:2px solid var(--lm-brand);outline-offset:2px}
.sound-off :is(.scene-speaker,.lang-listening-controls),.mic-off :is(#mic,.item-mic){display:none!important}
.sound-off .scene-playable{cursor:text}.sound-off .scene-playable:hover{background:none}
.listen-reveal{display:inline-block;min-height:44px;margin:0 4px;padding:0 6px;background:transparent;color:inherit;font:inherit;font-size:.85em;text-decoration:underline;text-underline-offset:3px;vertical-align:middle}.listen-reveal:focus-visible{outline:2px solid currentColor;outline-offset:2px}.listen-span .say-text{white-space:pre-wrap}.listen-span .scene-speaker{width:44px;height:44px;vertical-align:middle}.listen-span .scene-speaker[aria-busy="true"]{opacity:.5;cursor:progress}
@media(min-width:1000px){.lang-map .side-panel{width:356px}.lang-map.side-open .side-strip{display:none}.lang-map .side-strip .lang-tools{display:none}}
@media(max-width:999px){
 .lang-map .side{width:100%;max-width:none;box-shadow:none}.lang-map .side-panel{padding:14px 14px max(24px,env(safe-area-inset-bottom))}.lang-map .side-head{display:none}
 .lang-map .side-strip{position:sticky;top:0;z-index:2;padding-left:14px}.lang-map .side-body{padding:0}
}
@media(prefers-color-scheme:dark){
 .lang-map .side{--lm-ink:#e8e7f2;--lm-ink2:#cfcde0;--lm-mute:#aaa9bd;--lm-bg:#16161d;--lm-card:#1f1f2a;--lm-line:#3e3e54;--lm-brand:#a49fff;--lm-soft:#2b2950;--lm-soft2:#25243a}
}
.lang-scene-link{border:0;padding:2px 0;margin:0 0 5px 1.6em;width:calc(100% - 1.6em);font-size:12px;color:var(--lm-brand)}
.lang-map #chat-tabs>.hdr-tab{flex:none;margin-left:auto;align-self:center}

/* Owner, Oct 27: tabs and composer follow the approved map mockup, for every subject.
   Keep 44px controls even where the mockup uses smaller decorative buttons. */
:root{--chrome-bg:#faf9f6;--chrome-card:#fff;--chrome-ink:#202338;--chrome-mute:#666778;--chrome-line:#e4e2eb;--chrome-brand:#4f46e5;--chrome-soft:#eeecff;--chrome-disabled:#e4e2eb;--chrome-disabled-ink:#5b5d70;--chrome-on-brand:#fff}
#chat-tabs{gap:4px;height:54px;padding:8px 12px 0;background:var(--chrome-bg);border-color:var(--chrome-line)}
#chat-tab-list{gap:4px}
.chat-tab{border:1px solid transparent;border-bottom:0;color:var(--chrome-mute)}
.chat-tab:not(.is-current)::after{content:none}
.chat-tab.is-current{background:var(--chrome-card);border-color:var(--chrome-line);color:var(--chrome-ink);box-shadow:none}
.tab-select{min-height:44px;padding:6px 12px 6px 32px;font-size:13px;line-height:1.5;text-align:left}
.chat-tab.is-current .tab-select{font-weight:650}
.tab-close{top:7px}
#tab-add,#chat-tabs .tab-closed{width:44px;min-width:44px;min-height:44px;margin:0;border-radius:10px;color:var(--chrome-mute)}
#tab-add:hover,#chat-tabs .tab-closed:hover,.tab-close:hover{background:var(--chrome-soft);color:var(--chrome-brand)}
.tab-name-edit{color:var(--chrome-ink);background:var(--chrome-card);border-color:var(--chrome-brand);font-size:13px}
.dock{background:var(--chrome-bg)}
#compose{padding:10px;border:1px solid var(--chrome-line);border-radius:14px;background:var(--chrome-card);color:var(--chrome-ink)}
#question{min-height:44px;height:44px;padding:10px 0;color:var(--chrome-ink)}
#question::placeholder{color:var(--chrome-mute);opacity:1}
#upload,#mic,#send{width:44px;min-width:44px;height:44px;margin:0;padding:0;border-radius:10px}
#upload,#mic{background:transparent;color:var(--chrome-brand)}
#upload:hover:not(:disabled),#mic:hover:not(:disabled):not(.recording){background:var(--chrome-soft)}
#upload svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#send{width:auto;min-width:64px;padding:9px 14px;background:var(--chrome-brand);color:var(--chrome-on-brand);font-size:14px;line-height:1.5;font-weight:650}
#send:disabled{background:var(--chrome-disabled);color:var(--chrome-disabled-ink);opacity:1;cursor:default}
#upload:disabled,#mic:disabled{background:transparent;color:var(--chrome-mute);opacity:.5;cursor:default}
#mic.recording{background:#d93025;color:#fff}
#file-preview{background:var(--chrome-soft);gap:8px;padding:10px}
#file-name{min-width:0}
#preview-image{max-width:64px;max-height:64px}
#remove-file{flex:none;min-height:44px;padding:6px;color:var(--chrome-brand)}
#filehint,.mic-state,.dock #status{color:var(--chrome-mute)}
.mic-state.live{color:#b3261e}
#compose:focus-within{border-color:var(--chrome-brand);outline:2px solid var(--chrome-brand);outline-offset:2px}
#question:focus-visible{outline:0}
.tab-select:focus-visible,.tab-close:focus-visible,#tab-add:focus-visible,#chat-tabs .tab-closed:focus-visible{outline:2px solid var(--chrome-brand);outline-offset:-3px}
.scene-open #mic{box-shadow:0 0 0 3px var(--chrome-soft)}
@media(pointer:coarse),(max-width:600px){.tab-select{padding-left:44px;padding-right:12px}.tab-close{top:0}.tab-name-edit{height:44px;margin-top:0;margin-bottom:0}.tab-undo button{min-height:44px}}
@media(max-width:360px){.compose-row{gap:6px}#compose{padding:8px}#send{padding-left:10px;padding-right:10px}}

/* owner, Oct 27: one phone row; the same controls return to their desktop homes above 699px. */
.menu-desktop{display:contents}
.menu-phone,.menu .pop .menu-brand,.closed-tabs-label{display:none}
@media(max-width:699px){
 body.chat-on>header{gap:2px;max-width:none}
 body.chat-on>header>.brand{display:none}
 body.chat-on .header-actions{gap:0;flex:none}
 body.chat-on #menu{flex:none}
 body.chat-on #menu summary{position:relative;width:44px;min-width:44px;padding:0;justify-content:center;background:transparent;color:var(--chrome-brand);font-size:24px;font-weight:400}
 .menu-desktop{display:none}.menu-phone{display:inline}
 #menu.menu-unseen summary::after{content:"";position:absolute;right:7px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--chrome-brand)}
 body.chat-on #open-progress{width:44px;min-width:44px;height:44px;padding:0;justify-content:center}
 body.chat-on #chat-tabs{flex:1;min-width:0;height:44px;max-height:44px;padding:0;border:0;gap:2px;background:transparent;z-index:auto}
 body.chat-on #chat-tab-list{flex:1;gap:4px;margin-left:6px;overscroll-behavior-x:contain}
 body.chat-on #chat-tab-list.scrolled-start{-webkit-mask-image:linear-gradient(to right,transparent,#000 20px);mask-image:linear-gradient(to right,transparent,#000 20px)}
 body.chat-on .chat-tab{flex:1 0 104px;min-width:104px;max-width:180px;height:44px;border:0;border-radius:14px;background:var(--chrome-soft)}
 /* Keep short active names readable, within the space left by the header controls. */
 body.chat-on .chat-tab.is-current{min-width:min(164px,100%);background:var(--chrome-card);box-shadow:inset 0 0 0 1px var(--chrome-line);color:var(--chrome-brand)}
 body.chat-on .tab-select{height:44px;min-height:44px;padding:0 10px;border-radius:14px}
 body.chat-on .chat-tab.is-current .tab-select{padding-left:44px}
 body.chat-on .tab-close{left:0;top:0;width:44px;height:44px;opacity:0;pointer-events:none}
 /* Focusing an inactive tab must not move its label or put Close under the first Safari tap. */
 body.chat-on .chat-tab:not(.is-current) .tab-close{opacity:0;pointer-events:none}
 body.chat-on .chat-tab.is-current .tab-close{opacity:1;pointer-events:auto}
 body.chat-on .tab-name-edit{margin-left:44px;width:calc(100% - 50px)}
 body.chat-on #tab-add{height:44px;min-height:44px}
 #menu[open]::before{content:"";position:fixed;inset:var(--hdr,44px) 0 0;background:#20233833;z-index:59}
 #menu .pop{position:absolute;top:100%;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);width:auto;min-width:0;max-width:none;max-height:calc(var(--vvh,100dvh) - var(--hdr,44px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;border-radius:0 0 18px 18px;padding:8px 12px max(12px,env(safe-area-inset-bottom,0px));background:var(--chrome-card);color:var(--chrome-ink);border-color:var(--chrome-line)}
 #menu .pop a,#menu .pop button{min-height:44px;color:var(--chrome-ink)}
 #menu .pop a:hover,#menu .pop button:hover{background:var(--chrome-soft)}
 #menu .pop small{color:var(--chrome-mute)}
 #menu .pop .menu-brand{display:block;color:var(--chrome-brand);font-size:21px;font-weight:800}
 #menu .pop #closed-tabs{display:flex;align-items:center;gap:10px}
 #menu .closed-tabs-label{display:inline}
 #menu .pop .persona-hdr{display:flex;align-items:center;justify-content:flex-start;width:100%}
 body.shell-on.phone-header-hidden>header{transform:translateY(-100%)}
 body.has-tabs .side{top:0}
 body.keyboard-open>header,body.shell-on.keyboard-open>header{height:0;min-height:0;padding:0}
}
@media(max-width:600px){
 /* main's 16px gutters keep the rounded form inset; the dock's background reaches both screen edges. */
 body.chat-on .dock{margin-left:-16px;margin-right:-16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));min-width:0}
 body.chat-on #compose{min-width:0}
}
@media(prefers-color-scheme:dark){
 :root{--chrome-bg:#171821;--chrome-card:#252633;--chrome-ink:#f1f0f8;--chrome-mute:#bab8cc;--chrome-line:#414052;--chrome-brand:#b7afff;--chrome-soft:#343049;--chrome-disabled:#383744;--chrome-disabled-ink:#aaa7ba;--chrome-on-brand:#252633}
 /* Theme the canvas before authentication restores, including the safe area and the gap under a hidden header. */
 :root,body{background:var(--chrome-bg);color:var(--chrome-ink);color-scheme:dark}
 body>header,body>header::before{background:var(--chrome-bg);border-color:var(--chrome-line)}
 body.chat-on #open-progress{background:var(--chrome-soft);color:var(--chrome-brand)}
 /* Coach's text surfaces share the chrome palette; scene characters retain their own colors. */
 .bubble.assistant:not(.char-bubble){background:var(--chrome-card);color:var(--chrome-ink)}
 .bubble.assistant:not(.char-bubble)::after{background:var(--chrome-card)}
 .assistant .markdown-content a{color:var(--chrome-brand)}
 .assistant .markdown-content code,.assistant .markdown-content pre,.assistant .markdown-content th{background:var(--chrome-soft)}
 .assistant .markdown-content pre code{background:transparent}
 .assistant .markdown-content blockquote{color:var(--chrome-mute);border-color:var(--chrome-brand)}
 .assistant .table-scroll,.assistant .markdown-content th,.assistant .markdown-content td,.assistant .coach-widget{border-color:var(--chrome-line)}
 .assistant .widget-title{background:var(--chrome-soft);color:var(--chrome-ink)}
 .assistant .widget-kind{color:var(--chrome-brand)}
 .assistant .widget-name{color:var(--chrome-ink)}
 .reply-choice,.quick-ack,.reply-controls[data-type="suggestions"] .reply-choice{background:var(--chrome-soft);border-color:var(--chrome-line);color:var(--chrome-ink)}
 .reply-choice:hover:not(:disabled),.quick-ack:hover:not(:disabled){background:var(--chrome-card);border-color:var(--chrome-brand)}
 .reply-controls .reply-choice.ack-pressed,.reply-controls .reply-choice.chosen,.reply-controls .quick-ack.ack-pressed{background:var(--chrome-brand);border-color:var(--chrome-brand);color:var(--chrome-card)}
}

/* English is opt-in per stored scene line, from a quiet inline text button. */
.scene-gloss-reveal{display:inline-block;min-width:44px;min-height:44px;margin:0;padding:0 4px;background:transparent;color:#636575;border:0;border-radius:0;font-family:inherit;font-weight:400;font-size:.8em;line-height:1;vertical-align:baseline;cursor:pointer;touch-action:manipulation}
.scene-gloss-reveal:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media(prefers-color-scheme:dark){.scene-gloss-reveal{color:#abaaba}}

/* The report action shares the header's tokens and 44px touch target. */
#report-problem{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-width:44px;padding:0;background:transparent;color:var(--chrome-brand);border-radius:10px}
#report-problem:hover{background:var(--chrome-soft)}
#report-problem:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
#bug-dialog{position:fixed;inset:var(--bug-top,12px) 12px auto;margin:0 auto;width:calc(100% - 24px);max-width:440px;max-height:var(--bug-height,calc(100dvh - 24px));overflow-y:auto;overscroll-behavior:contain;padding:20px;border:1px solid var(--chrome-line);border-radius:16px;background:var(--chrome-card);color:var(--chrome-ink);box-shadow:0 12px 48px #0004;line-height:1.5}
#bug-dialog::backdrop{background:#0005}
#bug-dialog h2{font-size:19px;margin:0 0 16px}
#bug-dialog label{display:block;font-size:15px;font-weight:650;margin-bottom:6px}
#bug-composer{border:1px solid var(--chrome-line);border-radius:8px;background:var(--chrome-bg)}
#bug-composer:focus-within{outline:2px solid var(--chrome-brand);outline-offset:1px}
#bug-comment{display:block;min-height:96px;max-height:25vh;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;width:100%;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--chrome-ink);font-size:16px;line-height:1.4}
#bug-comment:empty::before{content:attr(data-placeholder);color:var(--chrome-mute);pointer-events:none}
#bug-comment:focus{outline:0}
#bug-preview{position:relative;width:96px;margin:12px 12px 0}
#bug-spinner{display:grid;place-items:center;width:96px;height:68px;border:1px solid var(--chrome-line);border-radius:8px;background:var(--chrome-bg)}
#bug-spinner::after{content:"";width:20px;height:20px;border:2px solid var(--chrome-line);border-top-color:var(--chrome-brand);border-radius:50%;animation:bug-spin .8s linear infinite}
@keyframes bug-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#bug-spinner::after{animation:none}}
#bug-image{display:block;width:96px;height:68px;object-fit:cover;border:1px solid var(--chrome-line);border-radius:8px;background:var(--chrome-bg)}
#bug-dialog button:not(#bug-remove){min-height:44px;padding:8px 16px;background:var(--chrome-soft);color:var(--chrome-ink)}
#bug-dialog button#bug-attach{margin:0 4px 4px;background:transparent;color:var(--chrome-brand);font-size:14px}
#bug-remove{position:absolute;top:-12px;right:-12px;display:grid;place-items:center;width:32px;height:32px;min-height:32px;padding:6px;background:transparent;color:var(--chrome-ink);border:0;border-radius:50%;line-height:1}
#bug-remove span{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--chrome-line);border-radius:50%;background:var(--chrome-card);font-size:18px;font-weight:400}
#bug-dialog #bug-send{background:var(--chrome-brand);color:var(--chrome-card)}
#bug-dialog button:focus-visible{outline:2px solid var(--chrome-brand);outline-offset:2px}
#bug-dialog p{font-size:14px;margin:12px 0;overflow-wrap:anywhere}
#bug-dialog p:empty{display:none}
#bug-capture-note{color:var(--chrome-mute)}
#bug-error{color:var(--chrome-ink)}
.bug-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
#bug-toast{position:fixed;bottom:calc(var(--dock,0px) + 12px);left:50%;transform:translateX(-50%);z-index:100;padding:10px 18px;border:1px solid var(--chrome-line);border-radius:12px;background:var(--chrome-card);color:var(--chrome-ink);box-shadow:0 4px 20px #0003}
@media(prefers-color-scheme:dark){
 #bug-dialog,#bug-toast,#report-problem{--chrome-bg:#171821;--chrome-card:#252633;--chrome-ink:#f1f0f8;--chrome-mute:#bab8cc;--chrome-line:#414052;--chrome-brand:#b7afff;--chrome-soft:#343049}
}
@media(max-width:699px){
 body.chat-on.keyboard-open>header,body.shell-on.chat-on.keyboard-open>header{height:calc(44px + env(safe-area-inset-top,0px));min-height:calc(44px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(4px,env(safe-area-inset-right,0px)) 0 max(4px,env(safe-area-inset-left,0px));opacity:1;overflow:visible;pointer-events:auto;visibility:visible}
 /* The phone tab strip shares the header; Spanish also puts the globe inside it. */
 body.chat-on.keyboard-open #chat-tabs{opacity:1;overflow:visible;visibility:visible}
 body.shell-on.phone-header-hidden>header{transform:none}
}

@media(prefers-color-scheme:dark){.invite-panel{--chrome-bg:#171821;--chrome-card:#252633;--chrome-ink:#f1f0f8;--chrome-line:#414052;--chrome-brand:#b7afff;--chrome-soft:#343049}}

/* Protocol 38 scene cards: the opening reply waits for a sentence or a typed message, without autoplay. */
.scene-card{--scene-accent:#0a66d8;width:100%;max-width:390px;align-self:center;border:1px solid var(--chrome-line);border-radius:20px;overflow:hidden;background:var(--chrome-card);color:var(--chrome-ink)}
.scene-setting{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center}
.scene-card-content{padding:20px 18px 18px}
.scene-location{margin:0 0 4px;font-size:12px;font-weight:650;letter-spacing:.075em;color:var(--chrome-mute);text-transform:uppercase}
.scene-card-title{overflow-wrap:anywhere;font-size:22px;line-height:1.25;letter-spacing:-.025em;margin:0 0 18px;font-weight:700}
.scene-card-cast{display:grid;gap:12px;margin-bottom:18px}
.scene-card-person{display:flex;gap:12px;align-items:flex-start;min-width:0}
.scene-card-person>div{min-width:0;overflow-wrap:anywhere}
.scene-card-person img{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover}
.scene-card-person strong{display:block;font-size:14px;font-weight:650;line-height:1.4}
.scene-card-person p{margin:2px 0 0;color:var(--chrome-mute);font-size:13px;line-height:1.45}
.scene-card-intro{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.5;margin:0 0 20px;padding-top:16px;border-top:1px solid var(--chrome-line)}
.scene-card fieldset{border:0;padding:0;margin:0;min-width:0}
.scene-card legend{font-weight:650;font-size:17px;line-height:1.4;padding:0;margin:0 0 4px}
.scene-help-note{margin:0 0 12px;color:var(--chrome-mute);font-size:13px;line-height:1.4}
.scene-card fieldset:not(:has(input:enabled)) .scene-help-note{display:none}
.scene-help-option{display:flex;gap:10px;align-items:center;min-height:52px;margin:8px 0 0;border:1px solid var(--chrome-mute);border-radius:12px;padding:12px;font-size:17px;line-height:1.4;cursor:pointer;background:var(--chrome-bg)}
.scene-help-option:has(input:checked){border-color:var(--scene-accent);background:color-mix(in srgb,var(--chrome-card) 90%,var(--scene-accent));box-shadow:inset 0 0 0 1px var(--scene-accent)}
.scene-help-option input{appearance:none;width:20px;height:20px;flex:none;margin:0;border:1.5px solid var(--chrome-mute);border-radius:50%;background:var(--chrome-card);cursor:inherit;outline:0}
.scene-help-option input:checked{border-color:var(--scene-accent);background:var(--scene-accent);box-shadow:inset 0 0 0 4px var(--chrome-card)}
.scene-help-option:has(input:focus-visible){outline:3px solid var(--chrome-brand);outline-offset:3px}
@media(hover:hover){.scene-help-option:has(input:enabled):hover{background:color-mix(in srgb,var(--chrome-card) 90%,var(--scene-accent))}}
.scene-help-option:has(input:disabled){cursor:default}
.scene-help-option input:disabled{opacity:1}
.scene-card-chosen{font-size:12px;margin:0;color:var(--chrome-mute)}
.scene-card-tail>.reply-controls{margin-left:var(--gutter)}
.scene-card-tail{display:flex;flex-direction:column;gap:12px;width:100%}
@media(min-width:700px){.scene-card{max-width:560px}.scene-card .scene-setting{max-height:234px}.scene-card-cast{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:600px) and (max-height:740px){.scene-setting{aspect-ratio:2/1}}

@media(prefers-color-scheme:dark){.scene-card{--chrome-bg:#171821;--chrome-card:#252633;--chrome-ink:#f1f0f8;--chrome-mute:#bab8cc;--chrome-line:#414052;--chrome-brand:#b7afff;--scene-accent:#87baff}}

.bubble-translation{white-space:normal}
/* Chat surfaces share one palette at every width, including desktop dark preference.
   Paper props and embedded lesson documents retain their own explicit ink/paper pairs. */
.welcome-back a{color:var(--chrome-brand)}
.feedback-entry input{background:var(--chrome-bg);color:var(--chrome-ink);border-color:var(--chrome-line)}
.feedback-entry input::placeholder,.intro-field input::placeholder,.vote-note textarea::placeholder,
#email-add input::placeholder,#fb-text::placeholder{color:var(--chrome-mute);opacity:1}
.mnext-go,.map-mark{color:var(--chrome-mute)}
.history-status{color:var(--chrome-mute)}
/* Disabled and historical options remain readable; border/fill and disabled semantics show state. */
.reply-controls:has(.ack-pressed) button:not(.ack-pressed),.reply-controls.composing button,
.reply-controls.past .reply-choice:disabled{opacity:1;color:var(--chrome-mute)}
.reply-controls.past .reply-choice.chosen{color:var(--chrome-on-brand)}
.invite-panel button:disabled,.feedback-card button:disabled,.intro-card button:disabled,
.map-pager button:disabled,.mnext:disabled,.data-opt:disabled,.data-actions button:disabled,
.persona-pick:disabled{opacity:1}
.fb-actions #fb-send:disabled{background:var(--chrome-disabled);border-color:var(--chrome-disabled);color:var(--chrome-disabled-ink)}
@media(prefers-color-scheme:dark){
 a,.wb-link{color:var(--chrome-brand)}
 .outline li a{color:var(--chrome-ink)}
 .signin{color:#202338;color-scheme:light}
 .brand,.menu summary,.hdr-tab,.persona-tab,.side-tab,.side-close,.side-hide{color:var(--chrome-brand)}
 .menu summary,.hdr-tab,.persona-hdr{background:var(--chrome-soft)}
 .menu .pop,.wa-add,.data-panel,.tab-dialog,.intro-card,.map-intro,.side,.side-panel,.side-strip,.exam-card{
  background:var(--chrome-card);color:var(--chrome-ink);border-color:var(--chrome-line)}
 .map-intro::before{background:var(--chrome-card);border-color:var(--chrome-line)}
 .menu #menu-privacy{color:var(--chrome-brand);border-color:var(--chrome-line)}
 .exam-info:hover,.widget-fs:hover,.side-strip .persona-tab:hover{background:var(--chrome-soft);color:var(--chrome-brand)}
 .menu .pop a,.menu .pop button,.side-head h2,.side-drawer-title,.pgroup-title,.pset-title,
 .pgoal,.pcounts,.pweek,.pstrip-line,.pstrip-group b,.panel-in-chat,.exam-title,.exam-sec,
 .map-head,.mrow-name,.map-topic,.map-topic.on,.side-empty,.outline .outline-topic,.outline .outline-subject,.outline .outline-section,
 .outline .outline-return .outline-label,.acct-kind,.persona-name,.persona-intro{color:var(--chrome-ink)}
 .pfold-title::before,.outline .outline-topic::before{color:var(--chrome-mute)}
 .menu .pop small,.side-intro,.side-note,.prow-detail,.prow-mark,.puntouched,.pchart-cap,.pchart-end,
 .pset-area,.pfold-count,.outline .outline-now,.outline .outline-meta,.outline .outline-day,.orow-status,
 .exam-info,.exam-info-line,.exam-not,.mrow-when,.acct-value,.persona-line,.intro-count,
 .topic-divider,.topic-divider.auto,.day-divider,.lookup-status,.widget-vote,.scene-intro,.item-hand,
 .scene-gloss-reveal,.wa-add .signin-note{color:var(--chrome-mute)}
 .prow,.pgoal,.pnext,.pstrip,.data-opt,.acct-list li,.acct-offer,.persona-card,.queue-item,
 .intro-chips button,.feedback-chips button,.vote-note,.widget-vote .vote-btn,.widget-error,
 .coach-widget,.map-section-marker,.map-intro-actions button:last-child{
  background:var(--chrome-soft);color:var(--chrome-ink);border-color:var(--chrome-line)}
 .data-opt small{color:var(--chrome-mute)}
 .wa-add .wa-code{color:var(--chrome-ink)!important}
 .pgoal-change,.pquiz,.pmore,.prow-act,.outline .outline-back,.outline .outline-more,.outline .outline-earlier,
 .orow-act,.pfold-title,.map-toggle,.mnext,.mnext-go,.map-topic.on .map-mark,.queue-label,.queue-cancel,
 #data-close,.persona-close,.scene-speaker,.widget-fs,.widget-demo-button,
 .widget-kind,#status .retry-turn{color:var(--chrome-brand)}
 .outline-find,.intro-field input,.vote-note textarea,#fb-text,#email-add input{
  background:var(--chrome-bg);color:var(--chrome-ink);border-color:var(--chrome-line)}
 .intro-field input::placeholder,.vote-note textarea::placeholder,#fb-text::placeholder,#email-add input::placeholder{
  color:var(--chrome-mute);opacity:1}
 .menu .pop a:hover,.menu .pop button:hover,.side-tab:hover,.side-hide:hover,.persona-head:hover,
 .outline .outline-topic:hover,.pfold-title:hover,.mnext:hover,.map-toggle:hover,.prow:hover,.pnext:hover{
  background:var(--chrome-soft);color:var(--chrome-ink)}
 body.side-open .side-tab[aria-expanded=true],.intro-chips button[aria-pressed=true],
 .feedback-chips button[aria-pressed=true],.persona-card.chosen,.persona-card.chosen .persona-pick,
 .widget-vote .vote-btn[aria-pressed=true],.widget-vote .vote-btn.wf-open[aria-expanded=true],
 .map-section-marker[aria-expanded=true]{background:var(--chrome-brand);color:var(--chrome-on-brand);border-color:var(--chrome-brand)}
 .persona-card.chosen .persona-name,.persona-card.chosen .persona-line{color:var(--chrome-on-brand)}
 .widget-title,.assistant .widget-title{background:var(--chrome-soft);color:var(--chrome-ink)}
 .widget-name{color:var(--chrome-ink)}
 .widget-fs,.widget-demo-button,.widget-vote .vote-btn.wf-open{background:var(--chrome-soft);color:var(--chrome-brand);border-color:var(--chrome-line)}
 .map-intro-actions button,.intro-actions button{background:var(--chrome-brand);color:var(--chrome-on-brand);border-color:var(--chrome-brand)}
 .map-intro-actions button:last-child{color:var(--chrome-brand)}
 .feedback-entry button{background:#355e43;color:#fff}
 .data-opt.data-danger,.email-error,.mic-state.live{color:#ffb4ab}
 .vote-thanks,.persona-done{color:#a6dfbd}
 .prow-tag{background:#574019;color:#ffe0a6}
 .coach-reaction{background:var(--chrome-card);border-color:var(--chrome-bg);color:#ffe0a6}
 .day-divider::before,.day-divider::after,.topic-divider::before,.topic-divider::after,
 .source-chats,.side-strip,.pstrip>.pgoal,.exam-head,.mrow,.ptail{border-color:var(--chrome-line)}
 .typing-bubble{background:var(--chrome-card)}
 .item-prop:not(.item-sign):not(.item-listening) .scene-speaker,.item-prop a{color:#245bb2}
}

/* The opener keeps its configured order, independent of reply choices. */
.subject-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.subject-choice{font:inherit;color:inherit;background:var(--bg);border:1px solid currentColor;border-radius:1.25rem;padding:.55rem .9rem;min-height:44px;cursor:pointer}
.subject-choice:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.feedback-scope{display:flex;min-height:44px;align-items:center;gap:.5rem;margin:.6rem 0;font-size:.9rem;overflow-wrap:anywhere}.feedback-scope input{width:1.1rem;height:1.1rem;flex-shrink:0}

/* #43: one Menu page, with independent messaging and selected quotations. */
.profile-page{position:fixed;inset:var(--hdr,64px) 0 0;z-index:35;overflow-y:auto;background:var(--chrome-bg);color:var(--chrome-ink);padding:16px max(16px,env(safe-area-inset-right)) 32px;overscroll-behavior:contain;max-height:calc(var(--vvh,100dvh) - var(--hdr,64px))}
.profile-inner{max-width:700px;margin:0 auto}.profile-page h1{font-size:28px;line-height:1.2;margin:18px 0 24px}.profile-page h2{font-size:20px}.profile-page button{min-height:44px;min-width:44px}.profile-page p{line-height:1.5;overflow-wrap:anywhere}.profile-page textarea{display:block;background:var(--chrome-card);color:var(--chrome-ink);border:1px solid var(--chrome-mute);border-radius:10px;min-height:96px;font-size:16px;padding:12px;line-height:1.5;box-sizing:border-box}.profile-page textarea::placeholder{color:var(--chrome-mute);opacity:1}.profile-page label{display:block;font-weight:650;margin-bottom:8px}.about-actions,.profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.profile-page button{background:var(--chrome-brand);color:var(--chrome-on-brand)}.profile-page #profile-back,.profile-page #intro-questions,.profile-actions button{background:var(--chrome-soft);color:var(--chrome-brand)}.profile-page #intro-questions{text-decoration:underline;flex:1;text-align:left}.about-form{padding:0 0 18px;border-bottom:1px solid var(--chrome-line)}#about-status:empty,#profile-notice:empty{display:none}.profile-explain,#profile-help,.profile-scope,.profile-origin{color:var(--chrome-mute);font-size:14px}.profile-entry{padding:18px 0;border-bottom:1px solid var(--chrome-line)}.profile-entry blockquote{margin:8px 0;font-size:18px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}.profile-entry .profile-basis{font-size:12px;font-weight:700;margin:0}.profile-entry .profile-scope,.profile-entry .profile-origin{margin:6px 0}.profile-forget{color:var(--chrome-brand);background:var(--chrome-soft);padding:8px 12px;border-radius:8px;font-size:14px}.profile-editor{margin-top:12px}.profile-editor p{font-size:14px;color:var(--chrome-mute)}.profile-open{overflow:hidden}.profile-open #dock{visibility:hidden}.profile-intro{z-index:60}