/* Study chat. Shares guide.css for the header, breadcrumb and footer. The one
   loud element is the answer card's source tabs; everything else stays quiet. */
.chat-page{--ocean:var(--brand-field);--aqua:var(--brand-aqua);--aqua-hover:#7EDDD1;--paper:var(--brand-ground);--line:var(--brand-line);--line-strong:var(--brand-line-strong);--ink:var(--brand-ink);--muted:var(--brand-ink-2);--teal:var(--brand-primary);--amber:#d99a27;--amber-soft:#fbf1dc;--error:#ba5a59;--error-soft:#fbecea;--on-error-soft:#7a2e2d;--error-verdict:#9a4443;--good:var(--brand-primary);--good-soft:var(--brand-primary-soft)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .chat-page{--error-verdict:#f0a18e}}
/* New replies and focused links stop above the sticky question box. */
:root{scroll-padding-bottom:calc(var(--composer-h,140px) + 16px)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.chat-main{padding-bottom:56px}
.chat-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:40px;align-items:start}
.chat-panel{background:var(--brand-surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 7px 26px #123b3510;display:flex;flex-direction:column;min-width:0}
.chat-heading{padding:30px 34px 20px;border-bottom:1px solid var(--brand-line)}
.chat-heading h1{font-family:var(--brand-font);font-weight:600;font-size:clamp(1.6rem,2.7vw,2.15rem);line-height:1.12;letter-spacing:-.04em;color:var(--brand-ink);margin:0 0 14px;max-width:27ch;text-wrap:balance}
.chat-status{display:inline-flex;align-items:center;gap:9px;margin:0;padding:6px 13px 6px 11px;border-radius:14px;background:var(--brand-primary-soft);color:var(--brand-ink-2);font-size:.84rem;font-weight:650;line-height:1.35}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--brand-line-strong);flex:none}
.chat-status[data-state=online]{background:var(--brand-primary-soft);color:var(--brand-label)}.chat-status[data-state=online] .status-dot{background:var(--brand-primary);box-shadow:0 0 0 3px #2f9e6f26}
.chat-status[data-state=offline]{background:var(--amber-soft);color:#6b4a0c}.chat-status[data-state=offline] .status-dot{background:var(--amber)}

.transcript{flex:1;min-height:300px;padding:26px 34px 12px;display:flex;flex-direction:column;gap:22px}
.chat-empty{max-width:62ch}
.empty-lead{color:var(--muted);font-size:1rem;margin:0 0 20px}
.empty-label{font-size:.82rem;font-weight:750;color:var(--brand-ink-2);margin:0 0 10px}
.suggestions{display:flex;flex-wrap:wrap;gap:9px}
.suggestions button,.chip-button{border:1px solid var(--line-strong);background:var(--brand-ground);color:var(--brand-ink);border-radius:999px;padding:9px 15px;font-size:.9rem;font-weight:600;text-align:left;line-height:1.3;min-height:44px}
.suggestions button:hover,.chip-button:hover{background:var(--brand-primary-soft);border-color:var(--brand-primary)}

.msg-user{align-self:flex-end;max-width:min(78%,560px);background:var(--ocean);color:var(--brand-paper);border-radius:18px 18px 5px 18px;padding:12px 17px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.98rem}
.msg-helper{align-self:flex-start;width:min(100%,640px);position:relative}
.answer{position:relative;background:var(--paper);border:1px solid var(--brand-line);border-radius:5px 16px 16px 16px;padding:18px 22px 16px 26px;font-family:var(--brand-font);font-size:1.04rem;line-height:1.64;color:var(--ink);overflow-wrap:anywhere}
/* A lime binding on the left: these are study notes, not chat bubbles. */
.answer::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--aqua-hover)}
.answer p{margin:0 0 .75em}.answer p:last-child{margin-bottom:0}
.answer ul,.answer ol{margin:.2em 0 .8em;padding-left:1.3em}.answer li{margin:.25em 0}
.answer strong{font-weight:700}
.cite{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .3em;margin:0 .08em;border-radius:.4em;background:var(--aqua);color:var(--brand-midnight);font:700 .7rem/1 var(--brand-font);text-decoration:none;vertical-align:.15em}
.cite:hover{background:var(--ocean);color:var(--brand-on-primary)}
.typing{display:flex;align-items:center;gap:10px;color:var(--muted);font:italic .95rem/1.4 var(--brand-font)}
.dots{display:inline-flex;gap:5px;align-items:center}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--brand-line-strong);animation:chat-dot 1.1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* Source tabs stand off the card's right edge like index-card tabs. They repeat
   the cited links for pointer users; the source list below is the accessible path. */
.source-tabs{position:absolute;top:14px;right:-15px;display:flex;flex-direction:column;gap:6px}
.source-tabs a{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:0 .55rem .55rem 0;background:var(--aqua);color:var(--brand-midnight);font:800 .78rem/1 var(--brand-font);text-decoration:none;box-shadow:2px 2px 0 #10383c1a}
.source-tabs a:hover{background:var(--ocean);color:var(--brand-paper)}
.sources{margin:16px 0 0;padding:14px 0 0;border-top:1px dashed var(--brand-line);font-family:var(--brand-font);font-size:.86rem;line-height:1.45}
.sources-label{font-weight:750;color:var(--brand-ink-2);margin:0 0 8px}
.sources ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sources li{display:grid;grid-template-columns:1.6em 1fr;gap:9px;align-items:start;border-radius:8px;padding:3px 4px;margin:-3px -4px;transition:background-color .4s}
.sources li.is-lit{background:var(--brand-primary-soft)}
.sources .n{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:.4em;background:var(--brand-primary-soft);color:var(--brand-midnight);font-weight:800;font-size:.8em}
.sources a{color:var(--teal);font-weight:650}
.sources .official,.note-list .official{display:block;color:var(--muted);font-weight:500;margin-top:2px}
.sources .official a,.note-list .official a{font-weight:500}
.other-notes{margin-top:10px}
.other-notes summary{cursor:pointer;color:var(--brand-ink-2);font-weight:650;width:fit-content;padding:4px 0}
.other-notes summary:hover{color:var(--teal)}
.other-notes ol{margin-top:8px}

.notes-card .answer::before{background:var(--amber)}
.notes-intro{font-family:var(--brand-font);font-size:.92rem;color:#5a4410;background:var(--amber-soft);border-radius:9px;padding:9px 12px;margin:0 0 14px}
.answer .note-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.note-list li{padding-bottom:14px;border-bottom:1px solid var(--brand-line)}.note-list li:last-child{padding-bottom:0;border-bottom:0}
.answer .note-title{font:700 .98rem/1.35 var(--brand-font);margin:0 0 4px}
.note-title a{color:var(--teal)}
.note-list p{margin:0 0 4px;font-size:.96rem}
.note-list .official{font:500 .84rem/1.4 var(--brand-font)}
.language-links{font-family:var(--brand-font);font-weight:650}
.safety-card .answer{background:var(--error-soft);border-color:#ecc9c6}.safety-card .answer::before{background:var(--error)}

.quiz-card .answer{padding-top:16px}
.quiz-meta{font:750 .8rem/1.3 var(--brand-font);color:var(--brand-ink-2);margin:0 0 6px}
.quiz-stem{font-size:1.12rem;line-height:1.45;margin:0 0 14px;color:var(--brand-ink)}
.quiz-choices{display:grid;gap:8px;margin:0 0 4px}
.quiz-choices button{display:grid;grid-template-columns:1.9em 1fr 1.4em;gap:10px;align-items:center;text-align:left;width:100%;min-height:48px;border:1px solid var(--brand-line);border-radius:10px;background:var(--brand-surface);color:var(--ink);padding:9px 12px;font:500 .95rem/1.35 var(--brand-font)}
.quiz-choices button:hover:not(:disabled){border-color:var(--brand-primary);background:var(--brand-ground)}
.quiz-choices .letter{display:grid;place-items:center;width:1.75em;height:1.75em;border-radius:.45em;background:var(--brand-primary-soft);color:var(--brand-midnight);font-weight:800;font-size:.8em}
.quiz-choices .mark{font-weight:800;text-align:center}
.quiz-choices button:disabled{cursor:default}
.quiz-choices button.is-right{border-color:var(--brand-primary);background:var(--good-soft)}.quiz-choices button.is-right .mark{color:var(--good)}
.quiz-choices button.is-wrong{border-color:#d9a3a1;background:var(--error-soft);color:var(--on-error-soft)}.quiz-choices button.is-wrong .mark{color:var(--on-error-soft)}
.quiz-feedback{margin-top:14px;padding-top:12px;border-top:1px dashed var(--brand-line)}
.quiz-feedback:focus{outline:none}
.quiz-feedback .verdict{font:800 .95rem/1.4 var(--brand-font);margin:0 0 6px}
.quiz-feedback .verdict.is-right{color:var(--good)}.quiz-feedback .verdict.is-wrong{color:var(--error-verdict)}
.quiz-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px;font:500 .88rem/1.4 var(--brand-font)}

.chat-error{align-self:stretch;font-size:.92rem;color:#7a2e2d;background:var(--error-soft);border:1px solid #ecc9c6;border-radius:10px;padding:10px 13px;margin:0}

.composer{position:sticky;bottom:0;z-index:2;padding:12px max(34px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(34px,env(safe-area-inset-left));background:var(--brand-surface);box-shadow:0 -1px 0 var(--brand-line);border-radius:0 0 20px 20px}
.composer-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.composer-box{display:flex;align-items:flex-end;gap:10px;border:1.5px solid var(--brand-line-strong);border-radius:16px;background:var(--brand-surface);padding:7px 7px 7px 15px}
.composer-box:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px #8ed5c866}
.composer textarea{flex:1;border:0;outline:0;resize:none;background:transparent;color:var(--ink);font-size:1rem;line-height:1.45;padding:7px 0;max-height:9.5em;min-height:1.45em}
.composer textarea::placeholder{color:var(--brand-ink-2)}
.composer button{flex:none;border:0;border-radius:999px;background:var(--brand-primary);color:var(--brand-on-primary);font-weight:800;padding:10px 20px;min-height:42px}
.composer button:hover:not(:disabled){background:var(--brand-primary-hover)}
.composer button:disabled{background:var(--brand-line-strong);cursor:not-allowed}
.composer-hint{display:flex;justify-content:space-between;gap:12px;margin:8px 4px 0;font-size:.8rem;color:var(--brand-ink-2)}
.char-count{font-variant-numeric:tabular-nums;white-space:nowrap}.char-count.is-near{color:var(--brand-label);font-weight:700}

.chat-aside{display:grid;gap:22px;font-size:.92rem;color:var(--brand-ink-2);padding-top:4px}
.chat-aside section{border-top:1px solid var(--brand-line);padding-top:16px}
.chat-aside h2{font-family:var(--brand-font);font-weight:600;font-size:1.18rem;letter-spacing:-.025em;color:var(--brand-ink);margin:0 0 8px}
.chat-aside p{margin:0 0 8px}
.how-list{margin:0 0 10px;padding-left:1.25em}.how-list li{margin:0 0 6px;padding-left:2px}.how-list li::marker{color:var(--teal);font-weight:800}
.chat-aside .aside-note{border-top:0;background:var(--brand-primary-soft);border-radius:12px;padding:16px 17px}
.chat-noscript{max-width:1130px;margin:0 auto 30px;padding:0 20px}

/* A teal ring (3:1 or more on every surface here) that keeps each control's own shape. */
.chat-panel a:focus-visible,.chat-panel button:focus-visible,.chat-panel summary:focus-visible,.chat-aside a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

@media(max-width:900px){.chat-layout{grid-template-columns:1fr;gap:30px}.chat-aside{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}}
@media(max-width:600px){
  .chat-main{padding-bottom:30px}.breadcrumb{margin:18px 0 14px}
  .chat-panel{border-radius:16px;margin:0 -6px}
  .chat-heading{padding:22px 18px 16px}
  .transcript{padding:20px 16px 10px;gap:18px;min-height:240px}
  .msg-user{max-width:88%}
  .answer{padding:16px 16px 14px 20px;font-size:1rem}
  .source-tabs{display:none}
  .composer{padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-radius:0 0 16px 16px}
  .composer-hint{margin-top:6px}
  .chat-aside{grid-template-columns:1fr}
}
/* Keyboard tips mean nothing on a touch keyboard. */
@media(pointer:coarse){.kbd-hint{display:none}}
@media(prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.6}.sources li{transition:none}}

.msg-user { color:var(--brand-paper) }
.cite:hover { color:var(--brand-paper) }

.safety-card .answer { color:#7a2e2d }
.sources .n,.quiz-choices .letter { color:var(--brand-ink) }