/* SAEDANIC — RAG v1 question page (/v2/ask).
 *
 * The first block is the approved mockup's stylesheet
 * (apps/api/design/saedanic-ui-mockup.html), unchanged except for local font
 * fallbacks: the page makes no external request, so Sora/Inter are used only
 * if installed. Everything after "Phase 4 additions" is new.
 *
 * Served under a CSP of style-src 'self': no inline style attributes anywhere.
 */
:root{
  --navy-950:#0A1929; --navy-900:#0F2138; --navy-850:#132A45; --navy-800:#183253;
  --teal-400:#4FE3C8; --teal-500:#2BB89E; --teal-600:#1F9A85;
  --line:#22405f; --ink:#EAF2F8; --ink-dim:#9FB4C7; --ink-faint:#65809A;
  --sidebar:#0B1B2E; --field:#132A45; --card:#122844;
  --bg:var(--navy-900); --accent:var(--teal-400); --accent-2:var(--teal-500);
}
[data-theme="light"]{
  --navy-950:#EDF2F6; --navy-900:#F4F7FA; --navy-850:#FFFFFF; --navy-800:#E6EEF4;
  --line:#D3E0EA; --ink:#0F2138; --ink-dim:#4A6076; --ink-faint:#8399AC;
  --teal-400:#1F9A85; --teal-500:#2BB89E; --teal-600:#17806D;
  --sidebar:#EAF1F6; --field:#FFFFFF; --card:#FFFFFF;
  --bg:var(--navy-900); --accent:var(--teal-500); --accent-2:var(--teal-600);
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden}
.app{display:flex;height:100%}

/* ---------- sidebar ---------- */
.sidebar{width:270px;flex-shrink:0;background:var(--sidebar);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;transition:margin-inline-start .25s ease}
.sidebar.hidden{margin-inline-start:-270px}
.side-head{padding:16px 14px 10px;display:flex;align-items:center;gap:10px}
.mark{width:30px;height:30px;flex-shrink:0;color:var(--accent)}
.wordmark{font-family:"Sora","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;font-weight:700;letter-spacing:.14em;font-size:15px}
.new-btn{margin:6px 12px 4px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:linear-gradient(135deg,var(--teal-500),var(--teal-600));color:#04121C;font-weight:600;font-size:14px;cursor:pointer;border:none;width:calc(100% - 24px);transition:filter .15s}
.new-btn:hover{filter:brightness(1.08)}
.new-btn svg{width:16px;height:16px}
.side-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);padding:16px 18px 6px}
.history{flex:1;overflow-y:auto;padding:0 8px 12px}
.hist-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;color:var(--ink-dim);font-size:13.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-item:hover{background:var(--navy-800);color:var(--ink)}
.hist-item.active{background:var(--navy-800);color:var(--ink)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--teal-500);flex-shrink:0;opacity:.7}
.history::-webkit-scrollbar{width:8px}
.history::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

/* ---------- main ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.topbar{display:flex;align-items:center;gap:10px;padding:12px 18px}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:var(--ink-dim);cursor:pointer;background:transparent;border:none;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--navy-800);color:var(--ink)}
.icon-btn svg{width:18px;height:18px}
.spacer{flex:1}

.stage{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center}
.stage::-webkit-scrollbar{width:10px}
.stage::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.center{width:100%;max-width:720px;margin:auto;padding:24px 20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-mark{width:66px;height:66px;margin-bottom:22px;color:var(--accent)}
.hero{font-family:"Sora","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;font-weight:600;font-size:clamp(26px,4vw,36px);line-height:1.25;letter-spacing:-.01em}
.hero .accent{color:var(--accent)}
.sub{color:var(--ink-dim);margin-top:12px;font-size:15px}

/* conversation */
.thread{width:100%;max-width:760px;margin:0 auto;padding:20px 20px 8px;display:none}
.thread.show{display:block}
.msg-q{display:flex;justify-content:flex-end;margin:18px 0}
.msg-q .bubble{background:var(--navy-800);border:1px solid var(--line);padding:11px 16px;border-radius:14px 14px 4px 14px;max-width:80%;font-size:15px}
.msg-a{margin:10px 0 26px}
.a-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.a-mark{width:22px;height:22px;color:var(--accent)}
.a-name{font-family:"Sora","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--ink-dim)}
.a-body p{margin-bottom:12px}
.a-body strong{color:var(--ink);font-weight:600}

/* thinking */
.thinking{display:flex;align-items:center;gap:12px;padding:6px 2px;color:var(--ink-dim);font-size:14px}
.orbit{width:22px;height:22px;position:relative;flex-shrink:0}
.orbit span{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);animation:spin 1s linear infinite}
.orbit span:nth-child(2){inset:4px;border-top-color:var(--teal-500);animation-duration:1.4s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.think-label{position:relative;overflow:hidden}
.think-label::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent);animation:sweep 1.5s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}

/* source cards */
.sources{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.src{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12.5px;max-width:100%}
.src .badge{width:20px;height:20px;border-radius:6px;background:color-mix(in srgb,var(--teal-500) 20%,transparent);color:var(--accent);display:grid;place-items:center;font-family:"Sora","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;font-weight:700;font-size:11px;flex-shrink:0}
.src .bk{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.src .pg{color:var(--ink-faint)}

/* composer */
.composer-wrap{width:100%;display:flex;justify-content:center;padding:8px 20px 22px}
.composer{width:100%;max-width:720px;background:var(--field);border:1px solid var(--line);border-radius:18px;padding:14px 16px 10px;transition:border-color .15s,box-shadow .15s}
.composer:focus-within{border-color:var(--teal-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal-500) 18%,transparent)}
.composer textarea{width:100%;background:transparent;border:none;outline:none;resize:none;color:var(--ink);font-family:inherit;font-size:15.5px;line-height:1.5;max-height:160px}
.composer textarea::placeholder{color:var(--ink-faint)}
.composer-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.plus{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}
.plus:hover{background:var(--navy-800);color:var(--accent)}
.plus svg{width:17px;height:17px}
.send{margin-inline-start:auto;width:36px;height:36px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--teal-400),var(--teal-500));color:#04121C;display:grid;place-items:center;cursor:pointer;transition:filter .15s,opacity .15s}
.send:hover{filter:brightness(1.08)}
.send svg{width:17px;height:17px}
/* stop state: same button, becomes a grey square while generating */
.send.stop{background:var(--navy-800);color:var(--ink-dim);border:1px solid var(--line);border-radius:10px}
.send.stop svg{width:13px;height:13px}
/* answer action bar */
.actions{display:flex;align-items:center;gap:4px;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.act{width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:var(--ink-faint);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.act:hover{background:var(--navy-800);color:var(--ink)}
.act svg{width:16px;height:16px}
.act.on-up{color:var(--accent)}
.act.on-down{color:#E5844D}
.act .lbl{display:none}
.act.copied{color:var(--accent)}
.fb-reason{display:none;flex-wrap:wrap;gap:6px;margin-top:10px}
.fb-reason.show{display:flex}
.fb-reason button{font-size:12px;color:var(--ink-dim);background:var(--navy-800);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;transition:border-color .15s,color .15s}
.fb-reason button:hover{border-color:var(--accent);color:var(--accent)}
.fb-thanks{font-size:12.5px;color:var(--accent);margin-top:8px}

@media (prefers-reduced-motion:reduce){.orbit span,.think-label::after{animation:none}}

/* ======================= Phase 4 additions ======================= */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.center.gone{display:none}
.side-note{font-size:11px;color:var(--ink-faint);padding:10px 18px 14px;border-top:1px solid var(--line)}
.composer textarea{overflow-y:hidden}
.composer textarea.scroll{overflow-y:auto}
.hist-empty{font-size:12.5px;color:var(--ink-faint);padding:6px 10px}
.hist-item{border:none;background:transparent;width:100%;text-align:start;font-family:inherit}
.hist-item .t{overflow:hidden;text-overflow:ellipsis}
.send:disabled{opacity:.45;cursor:default;filter:none}
button:focus-visible,.src:focus-visible,.cite:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* evidence: source cards (book + page), shown before the answer */
.ev-head{display:flex;align-items:center;gap:10px;margin:2px 0 0}
.ev-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.ev-toggle{margin-inline-start:auto;font-size:12px;color:var(--ink-dim);background:transparent;border:none;cursor:pointer;padding:2px 4px;border-radius:6px}
.ev-toggle:hover{color:var(--accent)}
.sources{margin-top:8px;margin-bottom:14px}
.src{cursor:pointer;font-family:inherit;color:inherit;text-align:start;transition:border-color .15s,background .15s}
.src:hover,.src.open{border-color:var(--teal-500)}
.src.flash{background:color-mix(in srgb,var(--teal-500) 16%,var(--card))}
.src .badge{font-size:10.5px}
.muted .src{opacity:.75}
.passages{display:flex;flex-direction:column;gap:8px;margin:-4px 0 14px}
.psg{display:none;background:var(--card);border:1px solid var(--line);border-inline-start:3px solid var(--teal-500);border-radius:10px;padding:10px 14px;font-size:13.5px}
.psg.open{display:block}
.psg-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:6px}
.psg-n{font-family:"Sora","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;font-weight:700;color:var(--accent);font-size:12px}
.psg-b{font-weight:600;color:var(--ink)}
.psg-p{color:var(--ink-faint);font-size:12.5px}
.psg-c{color:var(--ink-faint);font-size:12px;width:100%}
.psg q{display:block;quotes:none;color:var(--ink-dim);padding:4px 0 4px 10px;border-inline-start:2px solid color-mix(in srgb,var(--teal-500) 45%,transparent);margin-top:4px}
.psg q::before,.psg q::after{content:none}
.psg-none{color:var(--ink-faint);font-style:italic}

/* answer body */
.a-body ul,.a-body ol{margin:0 0 12px 22px}
.a-body li{margin-bottom:4px}
.a-text.streaming>p:last-child::after,.a-text.streaming>ul:last-child>li:last-child::after,.a-text.streaming>ol:last-child>li:last-child::after{content:"";display:inline-block;width:7px;height:15px;margin-inline-start:3px;vertical-align:-2px;background:var(--accent);border-radius:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{to{opacity:0}}
.cite{display:inline-grid;place-items:center;min-width:18px;height:17px;padding:0 4px;margin:0 1px;border-radius:5px;border:none;vertical-align:1px;background:color-mix(in srgb,var(--teal-500) 18%,transparent);color:var(--accent);font-family:"Sora","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;font-weight:700;font-size:10.5px;line-height:1;cursor:pointer}
.nw{white-space:nowrap}
.cite:hover{background:color-mix(in srgb,var(--teal-500) 32%,transparent)}
.cite.bad{background:transparent;color:var(--ink-faint);text-decoration:line-through;cursor:help}

/* sentence-support check: calm, visible, never alarming */
.chk{text-decoration:underline dotted color-mix(in srgb,#E0A646 75%,transparent);text-decoration-thickness:1.5px;text-underline-offset:4px}
.chk-i{display:inline-grid;place-items:center;width:17px;height:17px;margin-inline-start:2px;vertical-align:1px;border:none;border-radius:50%;background:color-mix(in srgb,#E0A646 16%,transparent);color:#D19A3E;font-size:10px;line-height:1;cursor:pointer}
[data-theme="light"] .chk-i{color:#A86F12}
.chk-i:hover{background:color-mix(in srgb,#E0A646 28%,transparent)}
.support{margin-top:4px;font-size:12.5px;color:var(--ink-faint)}
.support summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px}
.support summary::-webkit-details-marker{display:none}
.support .sym{color:#D19A3E}
[data-theme="light"] .support .sym{color:#A86F12}
.support.clean .sym{color:var(--accent)}
.support ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.support li{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--ink-dim)}
.support li.flash{border-color:#D19A3E}
.support li .why{display:block;color:var(--ink-faint);font-size:11.5px;margin-top:2px}
.support-note{display:block;margin-top:6px;font-size:11.5px}

/* distinct states */
.state-card{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.state-card svg{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.state-card .st-t{font-weight:600;color:var(--ink);font-size:14px}
.state-card .st-b{color:var(--ink-dim);font-size:13.5px;margin-top:2px}
.state-card.nf svg{color:var(--ink-dim)}
.state-card.refusal{border-inline-start:3px solid var(--teal-500)}
.state-card.refusal svg{color:var(--accent)}
.state-card.err{border-inline-start:3px solid #E5844D}
.state-card.err svg{color:#E5844D}
.note{font-size:12.5px;color:var(--ink-faint);margin:2px 0 8px}
.meta{font-size:11.5px;color:var(--ink-faint);margin-inline-start:auto;padding-inline-end:4px}

/* Phase 4.1: sources as a compact numbered row BELOW the answer */
.refs{margin:10px 0 2px}
.refs.pending{display:none}
.refs-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.refs-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.refs-chips{display:inline-flex;flex-wrap:wrap;gap:4px}
.cite.ref{min-width:20px;height:20px;font-size:11px;vertical-align:0}
.cite.ref.open,.cite.ref.flash{background:color-mix(in srgb,var(--teal-500) 38%,transparent)}
.refs-cap{font-size:12px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
.refs .ev-toggle{margin-inline-start:auto}
.refs .passages{margin:8px 0 4px}
.refs.muted .cite.ref{opacity:.75}

/* ============ Phase 5.1: narrow screens (phones, tablets) ============
   Above 900px nothing here applies: the sidebar pushes the page and the
   topbar button hides/shows it, as before. At 900px and below the sidebar is
   an overlay drawer: closed on load, a close (X) in its header, a dimmed
   backdrop that closes it on tap, Escape closes it, the page behind does not
   scroll, and the topbar toggle stays above everything so it is always
   reachable (the sidebar header makes room for it). */
.side-close,.side-backdrop{display:none}
@media (max-width:900px){
  .sidebar{position:fixed;top:0;bottom:0;left:0;z-index:40;width:min(300px,86vw);
    margin-inline-start:0;transform:translateX(0);visibility:visible;
    box-shadow:8px 0 28px rgba(0,0,0,.4);transition:transform .25s ease,visibility 0s}
  .sidebar.hidden{margin-inline-start:0;transform:translateX(-100%);visibility:hidden;box-shadow:none;
    transition:transform .25s ease,visibility 0s .25s}
  .side-head{padding-inline-start:60px}          /* room for the topbar toggle */
  .side-close{display:grid;margin-inline-start:auto}
  .side-backdrop{display:block;position:fixed;inset:0;z-index:35;background:rgba(3,10,20,.55);
    opacity:0;pointer-events:none;transition:opacity .25s ease;touch-action:none}
  body.side-open .side-backdrop{opacity:1;pointer-events:auto}
  body.side-open .stage{overflow:hidden;overscroll-behavior:contain}
  .topbar{position:relative;z-index:45;pointer-events:none}
  .topbar .icon-btn{pointer-events:auto}
  body.side-open #themeBtn{visibility:hidden}  /* only the toggle floats over the drawer */
}
@media (prefers-reduced-motion:reduce){.sidebar,.sidebar.hidden,.side-backdrop{transition:none}}

/* ============ v1.5 Phase 2: example-question chips, tables ============ */
.suggest{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.suggest-chip{font:inherit;font-size:13px;line-height:1.35;text-align:start;color:var(--ink-dim);background:var(--navy-800);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:border-color .15s,color .15s}
.suggest-chip:hover,.suggest-chip:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}
.tbl{overflow-x:auto;margin:10px 0}
.tbl table{border-collapse:collapse;font-size:14px;min-width:60%}
.tbl th,.tbl td{border:1px solid var(--line);padding:6px 10px;text-align:start;vertical-align:top}
.tbl th{background:var(--navy-800);font-weight:600}
@media (max-width:900px){.suggest-chip{font-size:12.5px;padding:6px 12px}}

/* v1.5.6: locked agent picker, one compact footnote, lower composer on the start screen */
.agent-picker{position:relative}
.agent-btn{font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-dim);background:transparent;padding:6px 10px;border-radius:8px;border:1px solid var(--line);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,color .15s}
.agent-btn:hover,.agent-btn[aria-expanded="true"],.agent-btn:focus-visible{border-color:var(--teal-500);color:var(--accent);outline:none}
.agent-btn .chev{font-size:10px;line-height:1}
.agent-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;min-width:230px;max-width:calc(100vw - 40px);background:var(--navy-800);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.agent-menu.below{bottom:auto;top:calc(100% + 8px)}
.agent-menu[hidden]{display:none}
.agent-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--ink-faint);cursor:not-allowed;opacity:.7;user-select:none}
.agent-item:focus-visible{outline:1px solid var(--line);opacity:.9}
.agent-name{font-size:13.5px;color:var(--ink-dim)}
.agent-soon{margin-inline-start:auto;font-size:11px;color:var(--ink-faint)}
.agent-item .lock{width:14px;height:14px;flex-shrink:0}
.footnote{text-align:center;font-size:11px;line-height:1.4;color:var(--ink-faint);padding:0 20px 12px;max-width:760px;margin:0 auto}
body.empty .composer-wrap{padding-bottom:8px}
body.empty .footnote{padding-bottom:6px}