/* KSA Analytics — institutional research workspace.
   Deliberately calm: neutral surfaces, one navy/blue information accent, and
   green/red only for financial direction. */
:root{
  --bg:#f7f8fa;--bg2:#ffffff;--bg3:#f1f4f7;--bg4:#e8edf2;
  --glass:#ffffff;--glass2:#ffffff;
  --border:#dfe5eb;--border2:#cbd5df;
  --text:#172b3a;--text2:#526575;--text3:#758594;
  --accent:#1d5f8c;--accent2:#164b70;--accent-glow:rgba(29,95,140,.11);--accent-glow2:rgba(29,95,140,.05);
  --green:#16804b;--red:#bf3a3a;--purple:#516d87;--gold:#9a6500;
  --grad1:#1d5f8c;--grad2:#1d5f8c;--grad-expert:#e9f0f6;--grad-beginner:#e9f0f6;
  --radius:8px;--radius2:6px;
  --fab-bg:#1d5f8c;--fab-fg:#ffffff;
  /* Shared by the banner's own height and by every fixed panel that has to sit
     below it, so the offset is stated once. */
  --topbar-h:58px;--market-banner-h:40px;
}

*{scroll-behavior:auto}
body{font-family:"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
.btn-icon{flex-shrink:0}
.bg-mesh{background:none!important;}

/* Application shell */
.topbar{height:58px;padding:0 22px;background:#fff!important;backdrop-filter:none!important;border-bottom:1px solid var(--border);box-shadow:none!important;}
.topbar-left{gap:12px}.logo{font-size:17px;letter-spacing:-.2px;background:none!important;-webkit-text-fill-color:var(--text)!important;color:var(--text)!important;}
.topbar-pill{padding:4px 8px;border-radius:4px;font-size:10px;letter-spacing:.08em;background:var(--bg3);border:1px solid var(--border);color:var(--text2);}
.mode-toggle{border-radius:6px;border-color:var(--border);background:#f4f6f8;padding:2px;gap:1px;}
.mode-btn{padding:6px 11px;border-radius:4px;color:var(--text2);font-size:11px;}
.mode-btn.active-expert,.mode-btn.active-beginner{background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(16,35,52,.13);}
.topbar-right{gap:8px;color:var(--text2)}

/* Global index banner.
   A static rail rather than a scrolling marquee: these are reference figures
   people read, and moving text is both harder to read and harder to click. */
.market-banner{display:flex;align-items:center;gap:10px;height:var(--market-banner-h);flex-shrink:0;padding:0 22px;background:var(--bg2);border-bottom:1px solid var(--border);position:relative;z-index:99}
.market-banner[hidden]{display:none}
/* --text3 sits at about 3.9:1 on the light surface, under the 4.5:1 needed for
   text this size, so the banner's supporting text uses --text2 instead. */
.mb-label{flex-shrink:0;color:var(--text2);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.market-banner-rail{display:flex;align-items:center;gap:2px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none;
  --mb-fade-l:0px;--mb-fade-r:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--mb-fade-l),#000 calc(100% - var(--mb-fade-r)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--mb-fade-l),#000 calc(100% - var(--mb-fade-r)),transparent 100%)}
.market-banner-rail::-webkit-scrollbar{display:none}
.market-banner-rail.fade-left{--mb-fade-l:26px}
.market-banner-rail.fade-right{--mb-fade-r:26px}

.mb-item{display:inline-flex;align-items:baseline;gap:6px;flex-shrink:0;padding:5px 7px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--text2);font:inherit;font-size:11.5px;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.mb-item:hover{background:var(--bg3);border-color:var(--border)}
.mb-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mb-item:active{background:var(--bg4)}
.mb-item.is-closed{opacity:.72}
/* Still clickable: asking the chat triggers a fresh server-side retrieval, which
   is the useful thing to do with an index whose level did not come back. */
.mb-item.is-unavailable{opacity:.55}
.mb-name{color:var(--text2);font-weight:600}
.mb-level{color:var(--text);font-variant-numeric:tabular-nums}
.mb-change{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.mb-up{color:var(--green)}
.mb-down{color:var(--red)}
.mb-flat{color:var(--text3)}

.mb-note{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;color:var(--text2);font-size:10px;white-space:nowrap}
.mb-note:empty{display:none}
.mb-note.is-stalled{color:var(--red);font-weight:600}
.dark-theme .mb-note.is-stalled{color:#ff8a8a}
/* No token carries a red tint, so this one surface is restated for dark rather than
   token-ised like the other light backgrounds. */
.dark-theme .auth-error{background:#2b1b1f!important;color:#ff8a8a!important}

/* The shared --green/--red are tuned for the light surface and drop to roughly
   2:1 on the dark one, so the direction colors are restated for dark mode. */
.dark-theme .mb-up{color:#4ec99a}
.dark-theme .mb-down{color:#ff8a8a}
.mb-error{color:var(--text2);font-size:11.5px}
.mb-retry{padding:4px 9px;border:1px solid var(--border);border-radius:5px;background:var(--bg3);color:var(--accent);font:inherit;font-size:11px;cursor:pointer}
.mb-retry:hover{background:var(--bg4)}
.mb-retry:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mb-skeleton{flex-shrink:0;width:104px;height:16px;border-radius:4px;background:var(--bg3);animation:mb-pulse 1.4s ease-in-out infinite}
@keyframes mb-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.mb-skeleton{animation:none}}

/* The drawer is fixed to the viewport and appended to <body>, so the banner's
   height is not in its flow and has to be added to its offset explicitly. */
.market-banner:not([hidden])~.history-drawer{top:calc(var(--topbar-h) + var(--market-banner-h))!important}

@media(max-width:768px){
  .market-banner{padding:0 14px;gap:8px}
  .mb-note{display:none}
}
@media(max-width:520px){
  .mb-label{display:none}
}

.sidebar{width:292px;background:#fbfcfd!important;backdrop-filter:none!important;border-right:1px solid var(--border);}
.sidebar-search{padding:14px 14px 10px;border-bottom:0}.sidebar-search input{background:var(--bg2)!important;border-color:var(--border);border-radius:6px;padding:10px 12px 10px 36px;font-size:12px;}
.sidebar-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,95,140,.10);}
.sidebar-tabs{margin:0 14px 8px;padding:3px;background:var(--bg3);border-radius:6px;}.sidebar-tab{padding:7px;border-radius:4px;font-size:11px;letter-spacing:0;color:var(--text2)}.sidebar-tab.active{color:var(--text);background:var(--bg2);box-shadow:0 1px 2px rgba(16,35,52,.10)}
.sidebar-list{padding:4px 10px 12px}.company-item{padding:9px 10px;border-radius:5px;margin-bottom:1px;}.company-item:hover{background:var(--bg3);border-color:transparent}.company-item.selected{background:var(--bg4);border-color:var(--border2);box-shadow:none}.ci-ticker{font-size:10px;color:var(--accent)}.ci-name{font-size:11px;color:var(--text2)}.ci-price{font-size:12px}.ci-sector{font-size:9px;color:var(--text3)}
.sector-item{padding:12px;border-radius:6px;margin-bottom:5px;background:var(--bg2);border-color:var(--border);}.sector-item:hover{border-color:var(--accent2);background:var(--bg3);box-shadow:none}.si-count{background:var(--bg4);color:var(--accent);border-radius:4px;}

/* Restful sidebar reading scale: the company name and latest price are easy to scan. */
.sidebar{width:318px}.sidebar-search input{font-size:13px;padding-top:11px;padding-bottom:11px}.sidebar-tab{font-size:12px;padding:8px}.sidebar-list{padding:6px 12px 14px}.company-item{padding:11px 10px;margin-bottom:2px}.ci-left{gap:3px}.ci-ticker{font-size:20px;letter-spacing:.01em}.ci-name{max-width:185px;font-size:13px;line-height:1.35}.ci-price{font-size:14px;line-height:1.25}.ci-sector{font-size:10px;margin-top:3px}.sector-item{padding:13px}.si-name{font-size:14px}.si-count{font-size:12px;padding:3px 8px}.si-stat{font-size:11px}.si-stat b{font-size:11px}

/* Conversation */
.messages{padding:30px clamp(22px,5vw,76px);gap:18px;background:var(--bg)}
.msg{max-width:min(820px,88%);animation:none}.msg-ai{gap:10px;max-width:min(860px,90%)}.msg-avi{width:25px;height:25px;border-radius:5px;background:#173d59;box-shadow:none;font-size:11px;margin-top:2px}.msg-ai .bubble{background:#fff!important;backdrop-filter:none!important;border:1px solid var(--border);box-shadow:0 1px 2px rgba(14,36,55,.04);padding:16px 18px;border-radius:8px;font-size:14px;line-height:1.7}.msg-user .bubble{background:#1d5f8c!important;color:#fff;padding:11px 15px;border-radius:8px;font-size:14px;box-shadow:none}.bubble b{color:var(--accent)}.msg-user .bubble b{color:#fff}.bubble h3{color:var(--text);font-size:15px;margin:2px 0 8px}.bubble h4{color:var(--text2);font-size:11px}.bubble table{border:1px solid var(--border);border-radius:6px;background:#fff}.bubble th{background:#f3f6f8;color:var(--text2);font-size:10px;letter-spacing:.04em}.bubble td{border-color:var(--border);color:var(--text);font-size:11px}.bubble .verdict{border-left:3px solid var(--accent);background:var(--bg3);border-radius:4px}.bubble .bar-track{background:#e8edf1}.bubble .bar-fill,.bubble .bar-fill.g,.bubble .bar-fill.w,.bubble .bar-fill.p{background:#4a7da1}.bubble .bar-fill.r{background:var(--red)}

.suggestions{padding:0 clamp(22px,5vw,76px) 14px;gap:7px;background:var(--bg)}.sug{padding:7px 10px;background:#fff;border-color:var(--border);border-radius:5px;font-size:11px;color:var(--text2)}.sug:hover{transform:none;background:#f1f6f9;border-color:#a7c0d2;color:var(--accent);box-shadow:none}
.input-area{padding:12px clamp(22px,5vw,76px) 16px;background:#fff!important;border-top:1px solid var(--border);box-shadow:0 -3px 14px rgba(14,36,55,.025)}.input-row{padding:3px;background:#fff;border-color:#b9c7d2;border-radius:7px}.input-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,95,140,.12)}.input-row input{padding:11px 12px;color:var(--text)}.send-btn{padding:10px 17px;border-radius:5px;background:#1d5f8c;color:#fff;font-size:12px}.send-btn:hover{transform:none;background:#164b70;box-shadow:none}.input-hint{padding-left:0;font-size:10px}.input-hint b{color:var(--text2)}

/* Company panel and authentication */
.detail-panel{width:330px;background:#fff!important;backdrop-filter:none!important;border-left:1px solid var(--border)}.dp-header{background:var(--bg2);padding:18px;border-bottom:1px solid var(--border)}.dp-section{padding:14px 18px;border-color:var(--border)}.dp-price{font-size:28px}.dp-ask-btn{background:#1d5f8c;color:#fff;border-radius:5px}.dp-watch-btn{border-radius:5px;color:var(--gold)}
.auth-overlay{background:var(--bg)!important}.auth-card{max-width:380px;background:var(--bg2)!important;backdrop-filter:none!important;border-color:var(--border);border-radius:8px;box-shadow:0 14px 38px rgba(22,43,58,.12)}.auth-logo{background:none!important;-webkit-text-fill-color:var(--text)!important;color:var(--text)!important;font-size:21px}.auth-sub{letter-spacing:.08em}.auth-input{background:var(--bg2)!important;border-color:var(--border);border-radius:5px}.auth-input:focus{border-color:var(--accent);background:var(--bg2)!important;box-shadow:0 0 0 3px rgba(29,95,140,.10)}.auth-btn{border-radius:5px;background:#1d5f8c;color:#fff;text-transform:none;letter-spacing:0}.auth-btn:hover{transform:none;background:#164b70;box-shadow:none}.auth-error{border-radius:5px;background:#fff2f2}.logout-btn{border-radius:5px;color:var(--text2)}

/* Structured evidence responses */
/* Topbar action cluster: background comes from a token (--bg3), not a literal
   #fff, so the dark theme's own --bg3 redefinition covers it automatically —
   no separate dark override to forget (that gap is what left --data-health
   stuck white in dark mode before). */
.data-health,.theme-toggle,.history-toggle,.new-chat-btn,.up-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:6px;background:var(--bg3);color:var(--text2);padding:6px 10px;font-size:11.5px;font-weight:500;transition:background .15s ease,border-color .15s ease,color .15s ease}
.data-health{padding:5px 10px}
.data-health .status-dot{background:var(--green);width:6px;height:6px;border-radius:50%}
.theme-toggle:hover,.history-toggle:hover,.new-chat-btn:hover,.up-btn:hover{background:var(--bg4);border-color:var(--accent2);color:var(--accent)}
.theme-toggle .btn-icon,.history-toggle .btn-icon,.new-chat-btn .btn-icon,.up-btn svg{color:var(--text3)}
.theme-toggle:hover .btn-icon,.history-toggle:hover .btn-icon,.new-chat-btn:hover .btn-icon,.up-btn:hover svg{color:var(--accent)}

.answer-shell{width:min(860px,100%)}.answer-title{font-size:15px}.answer-narrative{line-height:1.7}.freshness-pill{border-radius:4px;padding:5px 7px;background:#edf7f1;color:#176b42;border-color:#cde8d8}.evidence-wrap{border-radius:6px;border-color:var(--border)}.evidence-table th{background:#f3f6f8;color:var(--text2);padding:9px 10px}.evidence-table td{padding:10px;border-color:var(--border)}
.answer-actions{display:flex;gap:8px}
.answer-actions button,.clarify-candidates button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:6px;background:var(--bg3);color:var(--text2);padding:6px 11px;font-size:11.5px;font-weight:500;transition:background .15s ease,border-color .15s ease,color .15s ease}
.answer-actions button:hover,.clarify-candidates button:hover{background:var(--bg4);color:var(--accent);border-color:var(--accent2)}
.answer-actions button .btn-icon{color:var(--text3)}
.answer-actions button:hover .btn-icon{color:var(--accent)}
.answer-actions button.copied{background:var(--accent-glow);border-color:var(--green);color:var(--green)}
.answer-actions button.copied .btn-icon{color:var(--green)}
.sources{border-color:var(--border)}.sources summary,.source-list a{color:var(--accent)}

/* Ranked bar chart for sector/screen answers. Zero-anchored so a negative ROE
   or revenue-growth value draws below the line instead of as a small positive
   bar — see rankedBarChart() in app.js. Colors and spacing come from the same
   tokens as the rest of the response, so this needs no dark-mode rules of its
   own and mirrors correctly under dir="rtl" via inset-inline-start. */
/* Closing-price trend chart. Same card as the ranked bar chart beside it. The line
   takes its color from the direction class on the svg, and the direction is also
   stated by an arrow in the readout, so color is never the only signal. */
.trend-chart{margin:16px 0 20px;padding:16px 18px;border:1px solid var(--border);border-radius:8px;background:var(--bg2)}
.trend-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:10px}
.trend-title{font-size:14px;font-weight:650;color:var(--text)}
.trend-sub{flex:1 1 100%;order:3;font-size:11px;color:var(--text2)}
.trend-readout{display:flex;align-items:baseline;gap:8px;margin-inline-start:auto;font-variant-numeric:tabular-nums;min-height:22px}
.trend-last{font-size:16px;font-weight:650;color:var(--text)}
.trend-change{font-size:12px;font-weight:650}
.trend-since{font-size:11px;color:var(--text2)}
/* contain:inline-size gives the plot no intrinsic width. Without it the svg's own
   width fed back into the message bubble, which is content-sized, and the chart was
   measured wider than the phone screen it was then redrawn to fill. */
.trend-plot{width:100%;min-width:0;contain:inline-size}
.trend-svg{display:block;max-width:100%;border-radius:6px;touch-action:pan-y}
.trend-svg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.trend-grid{stroke:var(--border);stroke-width:1}
.trend-axis{fill:var(--text2);font-size:11px;font-variant-numeric:tabular-nums}
.trend-line{stroke:var(--text2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.trend-area{fill:var(--text2);opacity:.09}
.trend-dot{fill:var(--bg2);stroke:var(--text2);stroke-width:2}
.trend-crosshair{stroke:var(--text3);stroke-width:1;stroke-dasharray:3 3}
.trend-up .trend-line,.trend-up .trend-dot{stroke:var(--green)}.trend-up .trend-area{fill:var(--green)}
.trend-down .trend-line,.trend-down .trend-dot{stroke:var(--red)}.trend-down .trend-area{fill:var(--red)}
.trend-change.trend-up{color:var(--green)}.trend-change.trend-down{color:var(--red)}.trend-change.trend-flat{color:var(--text2)}
.trend-foot{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:11px;color:var(--text2);font-variant-numeric:tabular-nums}
.trend-source{margin-inline-start:auto}
.trend-source a{color:var(--accent)}
.trend-warning{margin-top:8px;padding:7px 10px;border:1px solid var(--border);border-radius:5px;background:var(--bg3);color:var(--text);font-size:11.5px;line-height:1.5}
/* The shared --green/--red are tuned for the light surface and fall to about 3:1
   on the dark one; restated here for text, and the strokes take the same values. */
.dark-theme .trend-change.trend-up{color:#4ec99a}
.dark-theme .trend-change.trend-down{color:#ff8a8a}
.dark-theme .trend-svg.trend-up .trend-line,.dark-theme .trend-svg.trend-up .trend-dot{stroke:#4ec99a}
.dark-theme .trend-svg.trend-down .trend-line,.dark-theme .trend-svg.trend-down .trend-dot{stroke:#ff8a8a}
.dark-theme .trend-svg.trend-up .trend-area{fill:#4ec99a}
.dark-theme .trend-svg.trend-down .trend-area{fill:#ff8a8a}
@media(max-width:520px){.trend-chart{padding:14px 12px}.trend-readout{margin-inline-start:0;flex:1 1 100%}.trend-source{margin-inline-start:0;flex:1 1 100%}}
/* Phone layout. At 768px and below the evidence table is given min-width:560px, but
   its wrapper had no scroll container, so the table forced every answer bubble to
   about 600px inside a 390px column (a plain answer with no chart did it too) and
   the whole message list scrolled sideways. The wrapper now scrolls the table inside
   its own box, and the message column is allowed to be narrower than its content. */
@media(max-width:768px){.evidence-wrap{overflow-x:auto}.msg-ai>div:not(.msg-avi){min-width:0}}
.rank-chart{margin:16px 0 20px;padding:16px 18px;border:1px solid var(--border);border-radius:8px;background:var(--bg2)}
.rank-chart-title{font-size:10.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);margin-bottom:14px}
.rank-chart-rows{display:flex;flex-direction:column;gap:10px}
.rank-row{display:grid;grid-template-columns:minmax(0,152px) 1fr 68px;align-items:center;gap:10px}
/* Company names here are always Latin-script (data.json has no Arabic field for
   the chart yet — see note in the table). Under dir="rtl" this box otherwise
   inherits direction:rtl and the browser truncates from the wrong logical end,
   showing the tail of the name instead of the recognizable start — the same
   fix already applied to .ticker elsewhere in this file. */
.rank-label{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:isolate;direction:ltr;text-align:left}
.rank-track{position:relative;height:11px;border-radius:3px;background:var(--bg4)}
.rank-zero{position:absolute;inset-inline-start:var(--zero);top:-2px;bottom:-2px;width:1px;background:var(--border2)}
.rank-bar{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--accent);transition:width .2s ease}
.rank-bar.negative{background:var(--red)}
.rank-value{font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:600;color:var(--text);text-align:end}
@media(max-width:520px){.rank-row{grid-template-columns:96px 1fr 58px}.rank-label{font-size:11px}}

/* Jump-to-latest: a small floating action button. It previously had no
   `position`, so as a bare child of the flex-column <body> it stretched to
   full width and sat as a footer bar instead of floating. */
#jump-latest{position:fixed;right:26px;bottom:88px;z-index:60;width:42px;height:42px;padding:0;display:grid;place-items:center;border:none;border-radius:50%;background:var(--fab-bg);color:var(--fab-fg);box-shadow:0 4px 14px rgba(23,61,89,.28);opacity:0;pointer-events:none;transform:translateY(6px) scale(.92);transition:opacity .16s ease,transform .16s ease}
#jump-latest.jump-visible{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
#jump-latest:hover{background:var(--accent2)}
.history-drawer{top:58px;background:#fff;border-color:var(--border);box-shadow:-10px 0 28px rgba(16,35,52,.10)}.history-head{border-color:var(--border)}.history-search,.history-row{border-color:var(--border);border-radius:5px}.history-row:hover{border-color:#a7c0d2}

/* Optional dark mode remains sober and readable. */
.dark-theme{--bg:#111a22;--bg2:#15212b;--bg3:#1a2934;--bg4:#22333f;--glass:#15212b;--glass2:#15212b;--border:#2b3c49;--border2:#3b5161;--text:#e7edf1;--text2:#b5c1ca;--text3:#8294a1;--accent:#7eb4d8;--accent2:#9bc7e3;--fab-bg:#7eb4d8;--fab-fg:#0d1b24}.dark-theme .topbar,.dark-theme .sidebar,.dark-theme .input-area,.dark-theme .detail-panel,.dark-theme .msg-ai .bubble,.dark-theme .input-row,.dark-theme .history-drawer{background:#15212b!important}.dark-theme .messages{background:#111a22}.dark-theme .auth-input,.dark-theme .bubble table,.dark-theme .evidence-table{background:#15212b!important}.dark-theme .bubble th,.dark-theme .evidence-table th{background:#1c2b36}.dark-theme .sug{background:#15212b}.dark-theme .mode-toggle{background:#1c2b36}.dark-theme .mode-btn.active-expert,.dark-theme .mode-btn.active-beginner{background:#263946}
/* .data-health / .theme-toggle / .history-toggle / .new-chat-btn / .answer-actions
   button now read background from --bg3 in the rule above, so they need no
   dark-mode override of their own here — that per-class list is exactly what
   left --data-health on a hardcoded white background in dark mode before. */

html[dir="rtl"] .answer-shell,.bubble[data-lang="ar"] .answer-shell{font-family:'Noto Sans Arabic','Segoe UI',sans-serif;font-size:16px;line-height:1.95;text-align:right;direction:rtl}html[dir="rtl"] .evidence-table{font-size:14px;direction:rtl}html[dir="rtl"] .evidence-table th{text-align:right}.ticker{unicode-bidi:isolate;direction:ltr;display:inline-block}
@media(max-width:768px){.topbar{padding:0 14px}.topbar-pill,.data-health{display:none}.mode-btn{padding:6px 7px}.messages{padding:18px 14px}.suggestions,.input-area{padding-left:14px;padding-right:14px}.msg,.msg-ai{max-width:100%}.evidence-table{min-width:560px}#jump-latest{right:14px;bottom:78px}}

/* Flagship-chat workspace increment: composer, empty state, and Markdown. */
.chat-area{min-width:0}.suggestions{display:none!important}.messages{align-items:stretch}.msg{width:min(820px,100%);margin:0 auto 2px}.msg-user{display:flex;justify-content:flex-end}.msg-ai{width:min(860px,100%)}
.input-area{position:relative;z-index:5}.input-row{align-items:flex-end;min-height:52px;padding:4px 5px 4px 13px}.input-row textarea{flex:1;display:block;min-height:44px;max-height:160px;padding:11px 4px;background:transparent;border:0;outline:0;resize:none;overflow-y:auto;color:var(--text);font:inherit;font-size:14px;line-height:1.5}.input-row textarea::placeholder{color:var(--text3)}.input-row.is-busy{opacity:.72}.send-btn{min-width:88px;min-height:42px}.input-hint{display:flex;gap:12px;align-items:center;margin-top:7px;padding-left:1px}.input-hint span+span::before{content:'•';margin-right:12px;color:var(--border2)}

.welcome-state{width:min(720px,100%);margin:auto;padding:clamp(32px,9vh,92px) 18px 34px;text-align:center}.welcome-mark{width:44px;height:44px;display:grid;place-items:center;margin:0 auto 18px;border-radius:9px;background:#173d59;color:#fff;font-weight:700;font-size:13px;letter-spacing:.04em}.welcome-state h1{font-size:clamp(25px,3vw,34px);letter-spacing:-.035em;font-weight:650;margin:0 0 10px}.welcome-state p{max-width:560px;margin:0 auto;color:var(--text2);font-size:15px;line-height:1.65}.welcome-state small{display:block;color:var(--text3);font-size:11px;margin-top:18px}.welcome-prompts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:28px auto 0;text-align:left}.welcome-prompt{min-height:78px;padding:13px 14px;border:1px solid var(--border);border-radius:7px;background:var(--bg2);color:var(--text2);font:inherit;font-size:12px;line-height:1.45;text-align:left;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}.welcome-prompt:hover{background:#f1f6f9;border-color:#a7c0d2;color:var(--accent)}

.markdown-body{font:inherit;color:inherit}.markdown-body>:first-child{margin-top:0}.markdown-body>:last-child{margin-bottom:0}.md-paragraph{margin:0 0 11px;line-height:1.72}.md-heading{margin:18px 0 8px;color:var(--text);font-weight:650;line-height:1.3}.md-heading h1,.md-heading h2{font-size:17px}.md-heading h3{font-size:15px}.md-heading h4,.md-heading h5,.md-heading h6{font-size:13px}.md-list{margin:7px 0 12px 20px;padding:0}.md-list li{padding-left:3px;margin:4px 0;line-height:1.6}.md-inline-code{padding:2px 5px;border:1px solid #d7e0e7;border-radius:4px;background:#f3f6f8;color:#294c66;font-family:'JetBrains Mono',Consolas,monospace;font-size:.88em}.md-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px}.md-quote{margin:12px 0;padding:8px 12px;border-left:3px solid #8caec5;background:#f5f8fa;color:var(--text2)}.md-rule{height:1px;margin:16px 0;border:0;background:var(--border)}.md-code-block{margin:12px 0;border:1px solid #d5dfe7;border-radius:6px;background:#172530;color:#e8f0f5;overflow:auto}.md-code-header{padding:6px 10px;border-bottom:1px solid #314654;color:#b8c9d5;font-family:'JetBrains Mono',Consolas,monospace;font-size:10px;text-transform:uppercase}.md-code-block code{display:block;padding:12px 14px;font-family:'JetBrains Mono',Consolas,monospace;font-size:12px;line-height:1.6;white-space:pre}.md-token-keyword{color:#8fc7ea}.md-table-wrap{overflow-x:auto;margin:12px 0;border:1px solid var(--border);border-radius:6px}.md-table{width:100%;min-width:480px;border-collapse:collapse;font-size:12px}.md-table th{padding:9px 10px;background:#f3f6f8;color:var(--text2);text-align:left;font-size:10px;letter-spacing:.04em;text-transform:uppercase}.md-table td{padding:9px 10px;border-top:1px solid var(--border);vertical-align:top}.dark-theme .welcome-prompt,.dark-theme .md-table,.dark-theme .md-table-wrap{background:#15212b}.dark-theme .welcome-prompt:hover{background:#1c2b36}.dark-theme .md-inline-code{background:#1c2b36;border-color:#324553;color:#b9d7e9}.dark-theme .md-quote{background:#1c2b36;border-color:#5d91b4}.dark-theme .md-table th{background:#1c2b36}.dark-theme .md-table td{border-color:#2b3c49}
@media(max-width:720px){.welcome-state{padding-top:36px}.welcome-prompts{grid-template-columns:1fr}.input-hint span:nth-child(2){display:none}.input-hint span+span::before{display:none}.send-btn{min-width:66px;padding-left:11px;padding-right:11px}.md-code-block code{font-size:11px}.md-table{min-width:440px}}
@media(min-width:769px) and (max-width:1100px){.sidebar{width:280px}.ci-name{max-width:154px;font-size:12px}.ci-price{font-size:13px}}

/* Navigation and honest error states. */
.answer-shell[data-kind="service_error"],.answer-shell[data-kind="not_found"],.answer-shell[data-kind="invalid_query"]{border-left:3px solid #b98521;background:#fffdf8!important}.answer-shell[data-kind="service_error"] .answer-title,.answer-shell[data-kind="not_found"] .answer-title{color:#76520c}.answer-shell[data-kind="clarification"]{border-left:3px solid #5d88a8}.answer-shell[data-kind="clarification"] .answer-title{color:#285b7d}
@media(max-width:768px){.topbar-right{display:flex!important;gap:5px;overflow-x:auto;max-width:56vw}.topbar-right .logout-btn,.topbar-right .theme-toggle{display:none}.topbar-right .new-chat-btn,.topbar-right .history-toggle,.topbar-right .up-btn{font-size:10px;padding:5px 7px;white-space:nowrap;flex-shrink:0}.topbar-left{min-width:0}.logo{font-size:15px;white-space:nowrap}.mode-toggle{margin-left:auto}.history-drawer{width:min(390px,100vw);top:58px}.input-area{padding-bottom:max(12px,env(safe-area-inset-bottom))}}

/* Saved-chat drawer: explicit shell styles prevent unstyled document-flow fallback. */
.history-drawer{position:fixed!important;top:58px!important;right:0!important;bottom:0!important;left:auto!important;width:min(380px,92vw)!important;z-index:240!important;display:flex!important;flex-direction:column!important;padding:0!important;background:#fff!important;border-left:1px solid var(--border)!important;border-top:0!important;border-right:0!important;border-bottom:0!important;box-shadow:-14px 0 36px rgba(16,35,52,.14)!important;transform:translateX(103%)!important;transition:transform .2s ease!important;overflow:hidden!important}.history-drawer.open{transform:translateX(0)!important}.history-head{display:flex!important;align-items:center!important;gap:10px!important;min-height:64px!important;padding:14px 16px!important;border-bottom:1px solid var(--border)!important}.history-head h3{margin:0 auto 0 0!important;color:var(--text)!important;font-size:14px!important;font-weight:650!important}.history-head .history-toggle{width:28px!important;height:28px!important;padding:0!important;display:grid!important;place-items:center!important;background:#f4f6f8!important;border:1px solid var(--border)!important;color:var(--text2)!important;font-size:18px!important;line-height:1!important}.history-search{width:calc(100% - 32px)!important;margin:12px 16px 8px!important;padding:9px 10px!important;border:1px solid var(--border)!important;border-radius:6px!important;background:#fff!important;color:var(--text)!important;font:inherit!important;font-size:12px!important;outline:none!important}.history-search:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(29,95,140,.10)!important}.history-list{flex:1!important;overflow-y:auto!important;padding:8px 12px 20px!important}.history-row{display:block!important;margin:0 0 8px!important;padding:11px 12px!important;border:1px solid var(--border)!important;border-radius:6px!important;background:#fff!important;cursor:pointer!important}.history-row:hover{background:#f5f8fa!important;border-color:#a7c0d2!important}.history-row strong{display:block!important;overflow:hidden!important;color:var(--text)!important;font-size:12px!important;font-weight:600!important;line-height:1.35!important;text-overflow:ellipsis!important;white-space:nowrap!important}.history-row small{display:block!important;margin-top:4px!important;color:var(--text3)!important;font-size:10px!important}.history-controls{display:flex!important;gap:9px!important;margin-top:8px!important}.history-controls button{padding:0!important;border:0!important;background:transparent!important;color:var(--accent)!important;font:inherit!important;font-size:10px!important;cursor:pointer!important}.history-controls button:last-child{color:var(--red)!important}.dark-theme .history-drawer,.dark-theme .history-search,.dark-theme .history-row{background:#15212b!important}.dark-theme .history-head .history-toggle{background:#1c2b36!important}.dark-theme .history-row:hover{background:#1c2b36!important}.dark-theme .history-search{color:var(--text)!important}.dark-theme .history-head{border-color:var(--border)!important}
html[dir="rtl"] .history-drawer{right:auto!important;left:0!important;border-left:0!important;border-right:1px solid var(--border)!important;box-shadow:14px 0 36px rgba(16,35,52,.14)!important;transform:translateX(-103%)!important}html[dir="rtl"] .history-drawer.open{transform:translateX(0)!important}html[dir="rtl"] .history-head h3{margin:0 0 0 auto!important}

/* Evidence and loading states. These classes are built by app.js but had no rules at
   all, so the loading state rendered as bare text plus three zero-size spans. */
.answer-status{display:flex;align-items:center;gap:8px;color:var(--text2);font-size:12px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:ksa-pulse 1.1s ease-in-out infinite}
@keyframes ksa-pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.answer-skeleton{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.answer-skeleton span{display:block;height:11px;border-radius:4px;background:linear-gradient(90deg,#eef2f5 25%,#e2e9ee 37%,#eef2f5 63%);background-size:400% 100%;animation:ksa-shimmer 1.3s ease infinite}
.answer-skeleton span:nth-child(2){width:88%}.answer-skeleton span:nth-child(3){width:64%}
@keyframes ksa-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.evidence-value{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.evidence-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text3);white-space:nowrap}
.unavailable{color:var(--text3);font-size:11px;font-style:italic}
.answer-disclaimer{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--border);color:var(--text3);font-size:11px;line-height:1.6}
.freshness{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.freshness-pills{display:flex;flex-wrap:wrap;gap:6px}
.freshness-note{padding:9px 11px;border:1px solid var(--gold);border-inline-start:3px solid var(--gold);border-radius:6px;background:#fdf6e9;color:#7c5307;font-size:11.5px;line-height:1.6}
.dark-theme .freshness-note{background:#2a2113;color:#e3be7c;border-color:#4a3a1d;border-inline-start-color:var(--gold)}
.freshness-pill.stale{background:#fdf4e7;color:#8a5b12;border-color:#e8d3ae}
.answer-shell[data-kind="scope_refusal"],.answer-shell[data-kind="rate_limited"],.answer-shell[data-kind="payload_too_large"],.answer-shell[data-kind="bad_request"]{border-left:3px solid #b98521;background:#fffdf8!important}
.answer-shell[data-kind="scope_refusal"] .answer-title,.answer-shell[data-kind="rate_limited"] .answer-title{color:#76520c}
.dark-theme .answer-skeleton span{background:linear-gradient(90deg,#1c2b36 25%,#24333f 37%,#1c2b36 63%);background-size:400% 100%}
.dark-theme .answer-shell[data-kind="service_error"],.dark-theme .answer-shell[data-kind="not_found"],.dark-theme .answer-shell[data-kind="invalid_query"],.dark-theme .answer-shell[data-kind="scope_refusal"],.dark-theme .answer-shell[data-kind="rate_limited"]{background:#1e1b14!important}
.dark-theme .freshness-pill{background:#16281f;color:#8fd0ab;border-color:#255239}
.dark-theme .freshness-pill.stale{background:#2a2113;color:#d9b271;border-color:#4a3a1d}