/* ─────────────────────────────────────────────────────────────────────────────

   RAI Analyst — minimal light UI



   Thesis: chrome is monochrome, colour is data. The interface itself is

   near-grayscale — hairlines, ink, whitespace. The only saturated colour on

   the page belongs to the data encoding: teal is 2025, rose is 2026, in the

   ledger bars and chart series alike. Green/red appear only as the direction

   of a delta, always with an arrow glyph, never colour alone.



   Affordance grammar — how a user tells what is pressable:

     · main column: bordered pill/card, or a trailing "→"  = clickable

     · sidebar: menu rows (hover wash + hover arrow)       = clickable

     · "▸" caret                                           = expandable

     · borderless text (status line, ledger)               = information

   Every control shares the same feedback: wash background on hover, a 1px

   press on :active.



   Colour provenance: the two-period pair was validated all-pairs (deutan ΔE

   11.8, normal-vision 28.7, both ≥ 3:1 on white); chart series use the

   validated 8-slot categorical order in static/js/app.js.



   Type: Familjen Grotesk (display: hero, ledger values, chart titles)

         Instrument Sans (everything else) · DM Mono (SQL, figures, code)

   ──────────────────────────────────────────────────────────────────────────── */



:root {

  /* ink scale */

  --ink:     #17181C;

  --ink-2:   #5A5E6A;

  /* Both greys darkened a step when the panels went translucent: small labels

     sit on frost now, not on white, and lost contrast they did not have to

     spare. --muted clears 4.5:1 on glass; --faint is decoration and hints. */

  --muted:   #6B6F7A;

  --faint:   #8A8E99;



  /* surfaces & hairlines

     Every neutral sits on the same cool axis as the ink scale above (blue a

     few points over red). A warm surface under cool type reads as a dingy

     off-white — invisible in small patches, obvious across a whole panel,

     which is why the sidebar is where it showed. Keep new greys cool. */

  --page:    #FFFFFF;

  --surface: #F3F4F7;   /* the sidebar panel — a large field, so it gets its

                           own value: firm enough that rows lifting to white

                           on hover register, light enough not to darken the

                           micro-labels sitting on it. */

  --wash:    #F5F6F8;   /* code blocks, hovers, table heads */

  --wash-2:  #EDEEF2;   /* bar tracks, deeper wash */

  --line:    #E5E6EB;   /* hairline */

  --line-2:  #DCDEE4;   /* slightly firmer hairline (composer, focus-adjacent) */



  /* the two periods — a data encoding, not decoration */

  --then:    #0F87A6;

  --now:     #C2255C;



  /* delta direction — always paired with an arrow glyph */

  --up:      #0E6B2E;

  --down:    #C13A3A;



  --font-display: "Familjen Grotesk", "Instrument Sans", system-ui, sans-serif;

  --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;



  /* Glass — only for chrome that floats over the page: the sidebar, the

     composer, cards, toasts. Data planes stay opaque; nothing is ever read

     through frost. The tint stays neutral so the thesis holds — the page

     wash behind it carries the only colour, and barely. */

  --glass:        rgba(255, 255, 255, .58);

  --glass-solid:  rgba(255, 255, 255, .86);   /* when figures sit on it */

  --glass-blur:   saturate(180%) blur(22px);

  --glass-edge:   rgba(255, 255, 255, .75);   /* the lit top edge */

  --glass-line:   rgba(18, 20, 28, .09);      /* the outer hairline */

  /* Hierarchy inside a glass panel: the header is plain white — near-opaque so

     a sticky header hides what scrolls under it — and separates from its rows

     by the hairline and the weight of its labels rather than by a tint. A

     hovered row lightens. Neither reverts to flat grey: that is what made the

     old header read as a different material from its table. */

  --glass-head:   rgba(255, 255, 255, .94);

  --glass-row:    rgba(255, 255, 255, .55);

  --glass-shadow: 0 1px 2px rgba(16, 18, 24, .05), 0 18px 40px -24px rgba(16, 18, 24, .30);



  --r-sm: 8px;

  --r-md: 10px;

  --r-lg: 14px;

  --r-xl: 20px;

  --r-2xl: 26px;

  --shadow-pop: 0 20px 60px -20px rgba(23, 24, 28, .28);

  --sidebar-w: 264px;

  /* The reading column. Wider when the sidebar is away, so charts and the

     map get the room the user freed up by collapsing it. */

  --col-w: 760px;

}



body:not(.sb-open) { --col-w: 900px; }



* { box-sizing: border-box; }



html, body { margin: 0; height: 100%; }



body {

  font-family: var(--font-body);

  font-size: 14.5px;

  line-height: 1.55;

  color: var(--ink);

  /* The house wash, fixed: Innoviti purple leading, orange as the smaller

     accent, over a faintly violet grey. The glass above needs something to

     refract, and this is the only place the chrome carries colour — the data

     keeps its own pair (teal 2025, rose 2026) in the charts. */

  background:

    radial-gradient(1100px 620px at 10% -10%, rgba(108, 63, 197, .13), transparent 62%),

    radial-gradient(900px 560px at 94% 4%, rgba(245, 114, 42, .09), transparent 64%),

    radial-gradient(820px 700px at 72% 105%, rgba(108, 63, 197, .07), transparent 60%),

    linear-gradient(180deg, #FAFAFD 0%, #ECEAF4 100%);

  background-attachment: fixed;

  -webkit-font-smoothing: antialiased;

}



.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }



::selection { background: #E6E8EE; }



:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }



/* Micro-label: the one recurring structural device. Used sparingly. */

.side-heading, .lc-label, .wl-label, .modal-note {

  font-family: var(--font-body);

  font-size: 10px;

  font-weight: 500;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--muted);

}



/* ─── Shell — ChatGPT layout ────────────────────────────────────────────────

   The sidebar is fixed and slides away entirely; the main column is the page.

   On desktop an open sidebar pushes the column right (margin transition); on

   narrow screens it overlays with a scrim. State lives on <body> as .sb-open. */



.main {

  position: relative;   /* the composer floats over the bottom of the chat */

  display: flex;

  flex-direction: column;

  height: 100dvh;

  margin-left: 0;

  transition: margin-left .25s cubic-bezier(.2,.7,.3,1);

}



@media (min-width: 941px) {

  body.sb-open .main { margin-left: var(--sidebar-w); }

}



/* Floating open button — visible only when the sidebar is away */

.sb-open-btn {

  position: fixed;

  top: 12px;

  left: 12px;

  z-index: 30;

  display: none;

  background: var(--page);

  border: 1px solid var(--line);

}



body:not(.sb-open) .sb-open-btn { display: inline-flex; }



/* ─── Sidebar ───────────────────────────────────────────────────────────── */



.sidebar {

  position: fixed;

  inset: 0 auto 0 0;

  z-index: 50;

  width: var(--sidebar-w);

  display: flex;

  flex-direction: column;

  gap: 20px;

  padding: 12px 14px 14px;

  background: linear-gradient(180deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, .52));

  -webkit-backdrop-filter: var(--glass-blur);

  backdrop-filter: var(--glass-blur);

  border-right: 1px solid var(--glass-line);

  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5);

  transform: translateX(-102%);

  transition: transform .25s cubic-bezier(.2,.7,.3,1);

  overflow: hidden;

  min-height: 0;

}



body.sb-open .sidebar { transform: none; }



.sb-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  flex: none;

}



.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }



.brand-mark { width: 26px; height: 26px; flex: none; }



.brand-name {

  font-family: var(--font-display);

  font-weight: 600;

  font-size: 14.5px;

  letter-spacing: -.01em;

  white-space: nowrap;

}



/* Status readout in the sidebar foot — dot + text, not a control */

.sb-status {

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 7px 10px 2px;

  min-width: 0;

}



.sb-status-text {

  font-size: 10px;

  color: var(--muted);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



/* Sections */



.side-section { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: none; }

.side-section.grow { flex: 1 1 auto; min-height: 64px; }



.side-heading {

  margin: 0;

  padding: 0 4px 4px;

  display: flex;

  justify-content: space-between;

  align-items: baseline;

}



.side-note { letter-spacing: .02em; text-transform: none; font-weight: 400; color: var(--faint); }



/* Sidebar rows — one shared, quiet language for views and questions alike:

   a single line, hover wash, an arrow that appears on hover, everything else

   in the tooltip. Menu rows read as pressable by convention; the bordered

   grammar stays for controls in the main column. */



.view-list { display: flex; flex-direction: column; }



.view {

  display: flex;

  align-items: baseline;

  gap: 8px;

  padding: 5px 8px;

  border: none;

  border-radius: var(--r-sm);

  background: none;

  text-align: left;

  font: inherit;

  color: inherit;

  cursor: pointer;

  transition: background .12s ease;

}



.view:hover { background: var(--page); }



.view-name {

  flex: 1;

  min-width: 0;

  font-family: var(--font-mono);

  font-size: 12px;

  font-weight: 500;

  color: var(--ink-2);

}



.view:hover .view-name { color: var(--ink); }



.view-rows {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--faint);

  white-space: nowrap;

}



/* The go-arrow: present only under the cursor — the row stays clean at rest. */

.row-go {

  font-size: 11px;

  color: var(--faint);

  align-self: center;

  opacity: 0;

  transition: opacity .12s ease, color .12s ease;

}



.view:hover .row-go, .dim:hover .row-go { opacity: 1; color: var(--ink); }



/* Dimension list */



.dim-list {

  display: flex;

  flex-direction: column;

  overflow-y: auto;

  min-height: 0;

  scrollbar-width: thin;

  scrollbar-color: var(--line-2) transparent;

}



.dim-list::-webkit-scrollbar { width: 5px; }

.dim-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

.dim-list::-webkit-scrollbar-track { background: transparent; }



/* Each row fires its ready-made question — hover shows the exact wording in

   the tooltip before you commit. */

.dim {

  display: flex;

  align-items: baseline;

  gap: 8px;

  padding: 5px 8px;

  border: none;

  border-radius: var(--r-sm);

  background: none;

  text-align: left;

  font: inherit;

  font-size: 12.5px;

  color: var(--ink-2);

  cursor: pointer;

  transition: background .12s ease, color .12s ease;

}



.dim:hover { background: var(--page); color: var(--ink); }



.dim-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



/* Footer actions */



.side-foot {

  display: flex;

  flex-direction: column;

  gap: 5px;

  flex: none;

  padding-top: 12px;

  border-top: 1px solid var(--line);

}



.settings-panel {

  display: flex;

  flex-direction: column;

  gap: 2px;

  padding: 6px;

  background: var(--wash);

  border: 1px solid var(--line);

  border-radius: var(--r-sm);

  margin-bottom: 4px;

}

.settings-panel.hidden { display: none; }



.dim-empty {

  font-size: 11.5px;

  color: var(--faint);

  padding: 6px 8px;

}



.ghost-btn {

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 6px 8px;

  font: inherit;

  font-size: 12.5px;

  color: var(--ink-2);

  background: none;

  border: none;

  border-radius: var(--r-sm);

  cursor: pointer;

  transition: background .12s ease, color .12s ease;

}



.ghost-btn:hover { background: var(--page); color: var(--ink); }



.ghost-btn svg { width: 14px; height: 14px; flex: none; opacity: .7; }



/* ─── Icon buttons ──────────────────────────────────────────────────────── */



.icon-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 32px; height: 32px;

  padding: 0;

  border: none;

  border-radius: var(--r-sm);

  background: none;

  color: var(--ink-2);

  cursor: pointer;

}



.icon-btn:hover { background: var(--wash-2); color: var(--ink); }

.icon-btn svg { width: 18px; height: 18px; }

.sb-open-btn:hover { background: var(--wash); }



/* On the sidebar panel the wash-2 hover would sit *darker* than the surface,

   against every neighbouring row lifting to white. Follow the row grammar. */

.sb-head .icon-btn:hover { background: var(--page); }



.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }

.dot.ok  { background: var(--up); }

.dot.bad { background: var(--down); }



/* ─── Hero KPIs ─────────────────────────────────────────────────────────────

   The period ledger, relocated to the welcome screen (ChatGPT keeps nothing

   above the conversation, so the headline figures greet you instead of

   following you). Each card is a then→now pair on one shared scale — the

   paired bars are the point: a percentage alone hides that ₹12,341 cr and

   ₹12,309 cr are the same bar. */



.hero-kpis {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));

  gap: 10px;

  width: 100%;

  margin: 26px 0 22px;

}



.ledger-skel {

  grid-column: 1 / -1;

  padding: 14px;

  font-size: 11.5px;

  color: var(--muted);

  text-align: center;

}



.lc {

  padding: 14px 16px 15px;

  min-width: 0;

  text-align: left;

  background: var(--glass);

  -webkit-backdrop-filter: var(--glass-blur);

  backdrop-filter: var(--glass-blur);

  border: 1px solid var(--glass-line);

  border-radius: var(--r-xl);

  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);

}



.lc-label { margin: 0 0 6px; display: block; }



.lc-value {

  font-family: var(--font-display);

  font-size: 23px;

  font-weight: 600;

  letter-spacing: -.02em;

  line-height: 1.05;

  margin: 0;

}



.lc-value .unit { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; }



.lc-delta {

  display: inline-flex;

  align-items: baseline;

  gap: 4px;

  margin-top: 4px;

  font-family: var(--font-mono);

  font-size: 11px;

}



.lc-delta.up   { color: var(--up); }

.lc-delta.down { color: var(--down); }

.lc-delta.flat { color: var(--muted); }

.lc-delta .vs  { color: var(--faint); }



/* Paired bars — 5px, rounded data-end, both measured against one maximum. */

.lc-bars { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }



.lc-bar { display: flex; align-items: center; gap: 8px; }



.lc-bar-year { font-family: var(--font-mono); font-size: 9px; color: var(--faint); width: 24px; flex: none; }



.lc-bar-track { flex: 1; height: 5px; background: var(--wash-2); border-radius: 2.5px; min-width: 0; }



.lc-bar-fill { height: 5px; border-radius: 2.5px; min-width: 3px; transition: width .5s cubic-bezier(.2,.7,.3,1); }

.lc-bar-fill.then { background: var(--then); }

.lc-bar-fill.now  { background: var(--now); }



/* ─── Chat scroll region ────────────────────────────────────────────────── */



.chat {

  flex: 1;

  min-height: 0;

  overflow-y: auto;

  overscroll-behavior: contain;

  /* Bottom padding clears the floating composer; app.js keeps --composer-h

     in step with the composer's real height as the text box grows. */

  padding: 28px 28px calc(var(--composer-h, 120px) + 12px);

  scrollbar-width: thin;

  scrollbar-color: var(--line-2) transparent;

}



.chat::-webkit-scrollbar { width: 6px; }

.chat::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

.chat::-webkit-scrollbar-track { background: transparent; }

/* NB: no `scroll-behavior: smooth`. Auto-follow assigns scrollTop many times a

   second while tokens stream; smooth scrolling never catches the growing

   content and Chrome skips it in background tabs — stranding the answer. */



.chat-inner, .hero { max-width: var(--col-w); margin: 0 auto; }



/* Welcome screen — centered, ChatGPT-style: mark, headline, the four headline

   figures, then suggestion chips. Disappears on the first message. */



.hero {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: max(9vh, 40px) 2px 20px;

}



.hero-mark { width: 40px; height: 40px; margin-bottom: 18px; }



.hero h1 {

  margin: 0 0 8px;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: clamp(24px, 2.8vw, 32px);

  line-height: 1.1;

  letter-spacing: -.026em;

}



.hero-sub { margin: 0; max-width: 440px; color: var(--ink-2); font-size: 13.5px; }



.suggestions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }



.chip {

  font: inherit;

  font-size: 12.5px;

  padding: 6px 13px;

  border: 1px solid var(--glass-line);

  border-radius: 999px;

  background: var(--glass);

  -webkit-backdrop-filter: saturate(170%) blur(14px);

  backdrop-filter: saturate(170%) blur(14px);

  box-shadow: inset 0 1px 0 var(--glass-edge);

  color: var(--ink-2);

  cursor: pointer;

  text-align: left;

  transition: border-color .12s ease, color .12s ease;

}



.chip:hover { border-color: var(--ink-2); color: var(--ink); background: var(--wash); }



/* One press feedback for every control — the click confirms itself. */

.chip:active, .view:active, .dim:active, .ghost-btn:active, .icon-btn:active,

.chart-acts button:active, .chart-marks button:active, .chart-crumb:active,

.clarify-opt:not(:disabled):active, .send-btn.ready:active { transform: translateY(1px); }



/* ─── Turns ─────────────────────────────────────────────────────────────── */



.entry { margin-bottom: 32px; animation: rise .28s ease both; }



@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }



.msg.user { display: flex; justify-content: flex-end; margin-bottom: 14px; }



.msg.user .msg-body {

  max-width: 76%;

  padding: 9px 14px;

  background: var(--glass);

  -webkit-backdrop-filter: saturate(170%) blur(16px);

  backdrop-filter: saturate(170%) blur(16px);

  border: 1px solid var(--glass-line);

  box-shadow: inset 0 1px 0 var(--glass-edge);

  color: var(--ink);

  border-radius: var(--r-md) var(--r-md) 4px var(--r-md);

  white-space: pre-wrap;

  overflow-wrap: break-word;

}



.msg.assistant { display: flex; flex-direction: column; gap: 8px; }



/* Activity panel — reasoning and steps, Claude-style.

   While the bot works, the shelf-scan loader sits beside the label; it is

   removed when the answer (or a question back) arrives. Everything else is

   still: the live state is carried by words ("Thinking", "Querying the data

   (2)") and a seconds counter; a finished panel collapses to one line. */



.act { margin: 0 0 2px; }



.act-head {

  display: flex;

  align-items: center;

  gap: 8px;

  width: calc(100% + 10px);

  margin-left: -10px;

  padding: 5px 10px;

  border: none;

  border-radius: var(--r-sm);

  background: none;

  font: inherit;

  font-size: 13px;

  color: var(--ink-2);

  text-align: left;

  cursor: pointer;

}



.act-head:hover { background: var(--wash); }



/* Shelf scan loader — mounted while the bot thinks, removed on first token.

   Scaled to about half the original so it sits within one text line. */

.shelf-loader {

  --purple: #5B2A8C;

  --orange: #F7941D;

  --idle: .22;           /* resting opacity */

  --speed: 2.1s;

  display: inline-flex;

  flex: none;

  align-items: flex-end;

  gap: 2px;

  height: 13px;

  padding-bottom: 3px;

  box-sizing: content-box;

  border-bottom: 1px solid transparent;

  border-image: linear-gradient(90deg, var(--purple), var(--orange)) 1;

}

.shelf-loader span {

  width: 3px;

  opacity: var(--idle);

  animation: shelf-scan var(--speed) ease-in-out infinite;

}

/* colour ramp: purple -> orange across the seven spines */

.shelf-loader span:nth-child(1) { height: 10px; background: #5B2A8C; animation-delay: 0s; }

.shelf-loader span:nth-child(2) { height: 13px; background: #7A2C93; animation-delay: .13s; }

.shelf-loader span:nth-child(3) { height: 11px; background: #98308C; animation-delay: .26s; }

.shelf-loader span:nth-child(4) { height: 13px; background: #B63A72; animation-delay: .39s; }

.shelf-loader span:nth-child(5) { height: 9px;  background: #D24A52; animation-delay: .52s; }

.shelf-loader span:nth-child(6) { height: 12px; background: #E76B33; animation-delay: .65s; }

.shelf-loader span:nth-child(7) { height: 10px; background: #F7941D; animation-delay: .78s; }



@keyframes shelf-scan {

  0%, 100% { opacity: var(--idle); transform: translateY(0); }

  18%      { opacity: 1;           transform: translateY(-3px); }

  40%      { opacity: var(--idle); transform: translateY(0); }

}



@media (prefers-reduced-motion: reduce) {

  .shelf-loader span { animation: none; opacity: 1; }

}



.act-title { font-weight: 500; color: var(--ink); white-space: nowrap; }

.act:not(.live) .act-title { font-weight: 400; color: var(--ink-2); }



.act-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.act-time:empty { display: none; }



.act-step {

  flex: 1;

  min-width: 0;

  font-size: 12.5px;

  color: var(--muted);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.act-step:not(:empty)::before { content: "·"; margin-right: 8px; color: var(--faint); }



.act-chev { width: 14px; height: 14px; flex: none; color: var(--faint); margin-left: auto; }

.act-head:hover .act-chev { color: var(--ink-2); }

.act-head[aria-expanded="true"] .act-chev { transform: rotate(90deg); }



.act-body {

  margin: 4px 0 8px 4px;

  padding: 2px 0 2px 16px;

  border-left: 1.5px solid var(--line);

}



/* A turn that only thought, with no steps, has nothing to open onto. */

.act.no-steps .act-head { cursor: default; }

.act.no-steps .act-chev { display: none; }



.act-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }



.act-li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--ink-2); }

.act-li-mark { width: 12px; flex: none; text-align: center; color: var(--faint); }

.act-li.ok .act-li-mark { color: var(--up); }

.act-li.retry { color: var(--muted); }



/* Clarifying question — the agent asks instead of guessing. Options are full-

   width rows (big targets, numbered for the keyboard); the free-text row

   below takes anything the options missed. */



.clarify {

  max-width: 580px;

  padding: 15px 15px 13px;

  border: 1px solid var(--glass-line);

  border-radius: var(--r-xl);

  background: var(--glass-solid);

  -webkit-backdrop-filter: var(--glass-blur);

  backdrop-filter: var(--glass-blur);

  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);

}



.clarify-kicker {

  margin: 0;

  font-size: 10.5px;

  font-weight: 500;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--muted);

}



.clarify-q { margin: 4px 0 12px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }



.clarify-opts { display: flex; flex-direction: column; gap: 6px; }

.clarify-opts:empty { display: none; }



.clarify-opt {

  display: flex;

  align-items: center;

  gap: 10px;

  width: 100%;

  padding: 9px 12px 9px 10px;

  border: 1px solid var(--line);

  border-radius: var(--r-md);

  background: var(--page);

  font: inherit;

  font-size: 14px;

  color: var(--ink);

  text-align: left;

  cursor: pointer;

}



.clarify-opt:hover { border-color: var(--ink-2); background: var(--wash); }



.clarify-key {

  display: inline-grid;

  place-items: center;

  width: 22px; height: 22px;

  flex: none;

  border-radius: 6px;

  background: var(--wash-2);

  font-size: 11.5px;

  font-weight: 600;

  color: var(--ink-2);

  font-variant-numeric: tabular-nums;

}



.clarify-label { flex: 1; min-width: 0; }

.clarify-go { color: var(--faint); visibility: hidden; }

.clarify-opt:hover .clarify-go { visibility: visible; color: var(--ink); }



.clarify-other {

  display: flex;

  align-items: center;

  gap: 6px;

  margin: 8px 0 0;

  padding: 4px 4px 4px 12px;

  border: 1px solid var(--line);

  border-radius: var(--r-md);

}



.clarify-other:focus-within { border-color: var(--ink-2); }



.clarify-other input {

  flex: 1;

  min-width: 0;

  border: none;

  outline: none;

  background: none;

  font: inherit;

  font-size: 14px;

  color: var(--ink);

  padding: 5px 0;

}



.clarify-other input::placeholder { color: var(--faint); }



.clarify-other button {

  display: inline-grid;

  place-items: center;

  width: 30px; height: 30px;

  flex: none;

  border: none;

  border-radius: 8px;

  background: var(--ink);

  color: #FFF;

  cursor: pointer;

}



.clarify-other button:disabled { background: var(--wash-2); color: var(--faint); cursor: default; }

.clarify-other button svg { width: 15px; height: 15px; }



.clarify.answered { border-color: var(--line); box-shadow: none; }

.clarify.answered .clarify-q { color: var(--ink-2); }

.clarify.answered .clarify-opt { cursor: default; color: var(--muted); background: none; }

.clarify.answered .clarify-opt:hover { border-color: var(--line); }

.clarify.answered .clarify-opt:hover .clarify-go { visibility: hidden; }

.clarify.answered .clarify-opt.picked { color: var(--ink); border-color: var(--ink-2); background: var(--wash); }

.clarify.answered .clarify-other { display: none; }



/* Assistant prose */



.md { padding: 2px 2px 0; font-size: 14.5px; overflow-wrap: break-word; }



.md > :first-child { margin-top: 0; }

.md > :last-child { margin-bottom: 0; }

.md p { margin: 0 0 10px; }



.md h1, .md h2, .md h3, .md h4 {

  font-family: var(--font-display);

  letter-spacing: -.016em;

  margin: 18px 0 8px;

  line-height: 1.22;

}



.md h1 { font-size: 20px; }

.md h2 { font-size: 17px; }

.md h3 { font-size: 15.5px; }



.md ul, .md ol { margin: 0 0 10px; padding-left: 21px; }

.md li { margin: 3px 0; }



.md code {

  font-family: var(--font-mono);

  font-size: .86em;

  background: var(--wash);

  border-radius: 4px;

  padding: 1px 5px;

}



.md pre {

  background: var(--wash);

  border: 1px solid var(--line);

  border-radius: var(--r-sm);

  padding: 12px 14px;

  overflow-x: auto;

  margin: 0 0 12px;

}



.md pre code { background: none; padding: 0; font-size: 12px; }



.md blockquote {

  margin: 0 0 10px;

  padding: 2px 14px;

  border-left: 2px solid var(--line-2);

  color: var(--ink-2);

}



.md hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }

.md a { color: var(--ink); text-decoration-color: var(--faint); }



/* Result tables */



/* The wrapper is the bordered, scrollable box; the table fills it edge to edge

   and only grows past it (and scrolls) when its content genuinely needs to. */

/* Figures get their own surface: on the tinted page wash a bare table reads as

   washed out, and numbers are the one thing that must stay crisp. */

.md .md-table {

  margin: 6px 0 14px;

  overflow-x: auto;

  background: var(--glass-solid);

  -webkit-backdrop-filter: var(--glass-blur);

  backdrop-filter: var(--glass-blur);

  border: 1px solid var(--glass-line);

  border-radius: var(--r-lg);

  box-shadow: inset 0 1px 0 var(--glass-edge);

  scrollbar-width: thin;

  scrollbar-color: var(--line-2) transparent;

}



.md .md-table table {

  width: 100%;

  border-collapse: collapse;

  font-size: 13px;

  line-height: 1.45;

}



.md thead th {

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .02em;

  text-align: left;

  vertical-align: bottom;

  color: var(--ink);

  background: var(--glass-head);

  padding: 8px 14px;

  border-bottom: 1px solid var(--line-2);

  white-space: nowrap;

}



.md tbody td {

  padding: 7px 14px;

  border-bottom: 1px solid var(--line);

  vertical-align: top;

}



.md tbody tr:last-child td { border-bottom: none; }

.md tbody tr:hover td { background: var(--glass-row); }



/* Text columns keep a readable width; if the table then outgrows the answer

   column, its box scrolls sideways rather than crushing the text. */

.md th.mid, .md td.mid { min-width: 9em; }

.md th.wide, .md td.wide { min-width: 15em; }



/* Figures line up on the decimal side and never wrap mid-number. */

.md th.num, .md td.num {

  text-align: right;

  font-variant-numeric: tabular-nums;

  white-space: nowrap;

}



/* ─── Charts ────────────────────────────────────────────────────────────── */



.chart-card {

  background: var(--glass-solid);

  -webkit-backdrop-filter: var(--glass-blur);

  backdrop-filter: var(--glass-blur);

  border: 1px solid var(--glass-line);

  border-radius: var(--r-xl);

  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);

  padding: 16px 18px 12px;

  margin: 6px 0 14px;

  animation: chart-in .5s cubic-bezier(.2, .7, .3, 1) both;

}



/* A chart eases in once the answer above it has finished: the card rises

   into place, and the plot follows a beat later. */

.chart-card .chart-wrap { animation: chart-plot-in .6s .15s ease-out both; }



@keyframes chart-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@keyframes chart-plot-in { from { opacity: 0; } to { opacity: 1; } }



.chart-head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 8px 14px;

  flex-wrap: wrap;

}



.chart-titles { flex: 1 1 240px; min-width: 0; }



.chart-title {

  font-family: var(--font-display);

  font-weight: 600;

  font-size: 15.5px;

  line-height: 1.3;

  letter-spacing: -.012em;

  margin: 0;

}



.chart-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }



/* Segmented control: the wash track reads as one widget, the raised white

   segment as the current choice. Only marks that suit the data are offered. */

.chart-marks {

  display: flex;

  gap: 2px;

  flex-shrink: 0;

  background: var(--wash);

  border-radius: 8px;

  padding: 2px;

}



.chart-marks:empty { display: none; }



.chart-marks button {

  font: inherit;

  font-size: 12px;

  color: var(--ink-2);

  background: none;

  border: 1px solid transparent;

  border-radius: 6px;

  padding: 3px 10px;

  cursor: pointer;

}



.chart-marks button:hover { color: var(--ink); }



.chart-marks button.on {

  background: var(--page);

  border-color: var(--line);

  color: var(--ink);

  box-shadow: 0 1px 2px rgba(23, 24, 28, .06);

}



.chart-fields, .chart-slicers { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; }

.chart-slicers:empty, .chart-fields:empty, .chart-crumbs:empty { margin: 0; }

.chart-fields { padding: 8px 10px; background: var(--wash); border-radius: var(--r-sm); }

.chart-fields.hidden { display: none; }



.chart-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }



.chart-field > span { font-size: 12px; color: var(--muted); }



.chart-field select {

  font: inherit;

  font-size: 12.5px;

  color: var(--ink);

  background: var(--page);

  border: 1px solid var(--line);

  border-radius: 7px;

  padding: 3px 6px;

  max-width: 200px;

  cursor: pointer;

}



.chart-field select:hover { border-color: var(--line-2); }



.chart-crumbs { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; }



.chart-crumb {

  font: inherit;

  font-size: 12px;

  color: var(--ink);

  background: var(--wash);

  border: 1px solid var(--line);

  border-radius: 999px;

  padding: 2px 10px;

  cursor: pointer;

}



.chart-crumb:hover { background: var(--wash-2); }



.chart-wrap { position: relative; height: 300px; margin-top: 12px; }



.chart-data { margin-top: 10px; }

.chart-data.hidden { display: none; }



.chart-data-scroll {

  max-height: 260px;

  overflow: auto;

  background: var(--glass-solid);

  border: 1px solid var(--glass-line);

  border-radius: var(--r-md);

}



.chart-data table { border-collapse: collapse; width: 100%; min-width: 360px; font-size: 12.5px; }



.chart-data th, .chart-data td {

  text-align: left;

  padding: 5px 10px;

  border-bottom: 1px solid var(--line);

  white-space: nowrap;

}



.chart-data th {

  position: sticky; top: 0;

  background: var(--glass-head);

  color: var(--ink);

  font-size: 13.5px;

  font-weight: 700;

}

.chart-data td { color: var(--ink); }

.chart-data td.num { text-align: right; font-variant-numeric: tabular-nums; }

.chart-data tbody tr:last-child td { border-bottom: none; }



.chart-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }



.chart-foot {

  display: flex; align-items: center; justify-content: space-between;

  gap: 8px 10px; flex-wrap: wrap; margin-top: 10px;

  font-size: 12px; color: var(--faint);

}



.chart-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }



.chart-acts button {

  font: inherit;

  font-size: 12px;

  color: var(--ink-2);

  background: none;

  border: 1px solid var(--line);

  border-radius: 7px;

  padding: 2px 9px;

  cursor: pointer;

}



.chart-acts button:hover, .chart-acts button.on { background: var(--wash); color: var(--ink); border-color: var(--line-2); }

.chart-acts button[hidden] { display: none; }



/* Held place while the chart agent works — static, sized like a small chart. */

.chart-pending {

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 12.5px;

  color: var(--muted);

  background: var(--wash);

  border-radius: var(--r-lg);

  padding: 14px 16px;

  margin: 6px 0 14px;

}



.chart-pending-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }

.chart-pending-bars i { display: block; width: 4px; border-radius: 2px 2px 0 0; background: var(--line-2); }

.chart-pending-bars i:nth-child(1) { height: 8px; }

.chart-pending-bars i:nth-child(2) { height: 16px; }

.chart-pending-bars i:nth-child(3) { height: 11px; }



/* ─── India map (canvas) ────────────────────────────────────────────────────

   Self-contained: the basemap is the full pincode point cloud drawn as faint

   dots — dense enough that India draws itself, no boundary file or tile

   server. Data bubbles sit on top with a white ring per the mark spec. */



/* India is taller than wide, so both maps cap their width and centre — a

   full-width frame only fills the flanks with neighbouring countries. */

.map-wrap {

  position: relative;

  height: 380px;

  max-width: 500px;

  margin: 10px auto 0;

}



.map-wrap.tiles {

  max-width: 640px;

  height: 360px;

  border: 1px solid var(--line);

  border-radius: var(--r-sm);

  overflow: hidden;

}



/* OpenStreetMap's colours compete with the bubbles; mute them to a quiet

   grey so the data reads first, and keep the labels legible. */

.map-wrap.tiles .leaflet-tile-pane { filter: grayscale(.75) contrast(.92) brightness(1.04); }



.map-el { width: 100%; height: 100%; }



/* Leaflet chrome, restyled to the app's grammar */

.leaflet-container { font-family: var(--font-body); background: #F2F3F6; }



/* Zoom: one grouped control, with + and − drawn as strokes rather than font

   glyphs (the text minus rendered as a long dash). Scoped under .map-wrap to

   outrank Leaflet's own .leaflet-touch sizing. */

.map-wrap .leaflet-bar.leaflet-control-zoom {

  border: 1px solid var(--line-2);

  border-radius: 8px;

  overflow: hidden;

  background: var(--page);

  box-shadow: 0 1px 2px rgba(20, 22, 30, .08);

}



.map-wrap .leaflet-bar.leaflet-control-zoom a {

  position: relative;

  width: 28px; height: 28px;

  color: var(--ink-2);

  background: var(--page);

  border: none;

  border-radius: 0;

  font-size: 0;   /* the text glyphs give way to the drawn icons */

}



.map-wrap .leaflet-bar.leaflet-control-zoom a + a { border-top: 1px solid var(--line); }



.map-wrap .leaflet-control-zoom a::before,

.map-wrap .leaflet-control-zoom-in::after {

  content: "";

  position: absolute;

  left: 50%; top: 50%;

  width: 11px; height: 1.5px;

  border-radius: 1px;

  background: currentColor;

  transform: translate(-50%, -50%);

}



.map-wrap .leaflet-control-zoom-in::after { transform: translate(-50%, -50%) rotate(90deg); }



.map-wrap .leaflet-bar.leaflet-control-zoom a:hover { color: var(--ink); background: var(--wash); }



.map-wrap .leaflet-bar.leaflet-control-zoom a.leaflet-disabled { color: var(--faint); background: var(--page); }



.leaflet-control-attribution {

  font-family: var(--font-mono);

  font-size: 8.5px;

  color: var(--faint);

  background: rgba(255, 255, 255, .75);

}



.leaflet-tooltip.rai-tip {

  background: var(--ink);

  color: #F2F3F6;

  border: none;

  border-radius: 8px;

  padding: 7px 10px;

  font-size: 11.5px;

  line-height: 1.45;

  box-shadow: var(--shadow-pop);

}



.leaflet-tooltip.rai-tip::before { display: none; }



.rai-tip .tt-title { font-weight: 600; }



.rai-tip .mono { font-size: 10.5px; color: #C9CBD1; }



.map-wrap canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }



/* Zoom controls — same bordered-button grammar as everything else pressable */

.map-nav {

  position: absolute;

  top: 8px;

  right: 8px;

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.map-nav button {

  width: 26px; height: 26px;

  display: inline-flex; align-items: center; justify-content: center;

  font: 500 13px/1 var(--font-mono);

  color: var(--ink-2);

  background: var(--page);

  border: 1px solid var(--line-2);

  border-radius: 7px;

  cursor: pointer;

  transition: color .12s ease, border-color .12s ease;

}



.map-nav button:hover { color: var(--ink); border-color: var(--muted); }

.map-nav button:active { transform: translateY(1px); }



.map-tip {

  position: absolute;

  pointer-events: none;

  background: var(--ink);

  color: #F2F3F6;

  border-radius: 8px;

  padding: 7px 10px;

  font-size: 11.5px;

  line-height: 1.45;

  max-width: 240px;

  box-shadow: var(--shadow-pop);

  opacity: 0;

  transition: opacity .1s ease;

  z-index: 5;

}



.map-tip .mono { font-size: 10.5px; color: #C9CBD1; }



.map-legend {

  display: flex;

  flex-wrap: wrap;

  gap: 5px 14px;

  margin-top: 8px;

  font-size: 11.5px;

  color: var(--ink-2);

}



.map-legend .key { display: inline-flex; align-items: center; gap: 6px; }



.map-legend .key i { width: 9px; height: 9px; border-radius: 50%; flex: none; }



/* Inline error note */



.err-note {

  border: 1px solid #EBD4D4;

  border-left: 2px solid var(--down);

  background: #FDF7F7;

  color: #8F2B2B;

  border-radius: var(--r-sm);

  padding: 10px 14px;

  font-size: 13px;

}



/* Streaming caret */



.md.live > p:last-child::after,

.md.live > :last-child:not(p)::after {

  content: "";

  display: inline-block;

  width: 7px; height: 14px;

  margin-left: 3px;

  vertical-align: -2px;

  background: var(--ink);

  animation: blink 1s steps(1) infinite;

}



@keyframes blink { 50% { opacity: 0; } }



/* Words fade in as the answer is revealed. Duration: keep in step with

   FADE_MS in app.js, which carries each fade across re-renders. */

.md .fresh { animation: word-in 380ms ease-out both; }



@keyframes word-in { from { opacity: 0; } to { opacity: 1; } }



/* ─── Composer — a roomy card: text on top, a quiet action bar below ─────── */



/* The composer floats over the chat with a transparent surround: answers

   scroll up behind it and stay visible around the text box. Only the box and

   its caption take clicks; the empty margin passes them through to the chat. */

.composer {

  position: absolute;

  left: 0; right: 0; bottom: 0;

  padding: 6px 20px 12px;

  background: transparent;

  pointer-events: none;

}

.composer-box { pointer-events: auto; }



.composer-box {

  max-width: var(--col-w);

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 4px;

  padding: 12px 10px 10px 16px;

  background: var(--glass);

  -webkit-backdrop-filter: var(--glass-blur);

  backdrop-filter: var(--glass-blur);

  border: 1px solid var(--glass-line);

  border-radius: var(--r-2xl);

  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);

  cursor: text;

}



/* Focus darkens the edge a shade and nothing else: the caret already says

   where typing goes, and a ring around the whole box read as a border. */

.composer-box:focus-within {

  border-color: rgba(18, 20, 28, .17);

  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);

}



#input {

  width: 100%;

  min-height: 26px;

  max-height: 200px;

  resize: none; border: none; outline: none; background: none;

  font: inherit; font-size: 15px; line-height: 1.55; color: var(--ink);

  padding: 2px 6px 2px 0;

  scrollbar-width: thin;

  scrollbar-color: var(--line-2) transparent;

}



#input::placeholder { color: var(--faint); }



.composer-bar { display: flex; align-items: center; gap: 8px; }

.composer-bar .send-btn { margin-left: auto; }



.composer-hint { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.composer-hint kbd {

  font: inherit;

  font-size: 11px;

  padding: 0 5px;

  border: 1px solid var(--line);

  border-bottom-width: 2px;

  border-radius: 4px;

  color: var(--muted);

  background: var(--page);

}



.send-btn {

  flex: none;

  align-self: flex-end;

  width: 34px; height: 34px;

  display: inline-flex; align-items: center; justify-content: center;

  border: none; border-radius: 11px;

  background: var(--wash-2); color: var(--faint);

  cursor: default;

}



.send-btn.ready { background: var(--ink); color: #FFF; cursor: pointer; }

.send-btn.ready:hover { background: #000; }

.send-btn svg { width: 17px; height: 17px; }

.send-btn .ic-stop { display: none; }

.send-btn.streaming { background: var(--ink); color: #FFF; cursor: pointer; }

.send-btn.streaming .ic-send { display: none; }

.send-btn.streaming .ic-stop { display: block; }



.composer-meta {

  flex: none;

  font-size: 10.5px; letter-spacing: .03em; color: var(--faint);

  cursor: help;

  text-align: center;

}

.composer-meta + .composer-hint::before { content: "·"; margin: 0 8px 0 0; color: var(--line-2); }

.composer-hint { flex: 1; min-width: 0; }



/* ─── Modal ─────────────────────────────────────────────────────────────── */



.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }

.modal.hidden { display: none; }

.modal-scrim {

  position: absolute; inset: 0;

  background: rgba(20, 22, 30, .28);

  -webkit-backdrop-filter: saturate(140%) blur(14px);

  backdrop-filter: saturate(140%) blur(14px);

}



.modal-card {

  position: relative;

  width: min(1000px, calc(100vw - 40px));

  max-height: min(80vh, 740px);

  display: flex; flex-direction: column;

  background: var(--glass-solid);

  -webkit-backdrop-filter: var(--glass-blur);

  backdrop-filter: var(--glass-blur);

  border: 1px solid var(--glass-line);

  border-radius: var(--r-2xl);

  box-shadow: var(--shadow-pop), inset 0 1px 0 var(--glass-edge);

  overflow: hidden;

  animation: rise .2s ease both;

}



.modal-head { display: flex; align-items: center; gap: 12px; padding: 12px 17px;

              border-bottom: 1px solid var(--line); }



.modal-head h3 { margin: 0; font-size: 13px; color: var(--ink); }

.modal-note { margin-right: auto; letter-spacing: .04em; }

.modal-body { overflow: auto; padding: 0; }

.modal-body table { border-collapse: collapse; width: 100%; font-size: 12px; }



.modal-body th {

  position: sticky; top: 0;

  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;

  text-align: left; color: var(--ink); background: var(--glass-head);

  padding: 7px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap;

}



.modal-body td {

  padding: 5px 12px;

  border-bottom: 1px solid var(--line);

  font-variant-numeric: tabular-nums;

  font-family: var(--font-mono); font-size: 11px;

  max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

}



.modal-empty { padding: 18px; font-size: 13px; color: var(--muted); }



/* ─── Toasts ────────────────────────────────────────────────────────────── */



.toasts { position: fixed; bottom: 18px; right: 18px; z-index: 80;

          display: flex; flex-direction: column; gap: 8px; }



.toast {

  max-width: 340px;

  padding: 10px 14px;

  font-size: 12.5px;

  background: rgba(23, 24, 28, .80);

  -webkit-backdrop-filter: saturate(160%) blur(18px);

  backdrop-filter: saturate(160%) blur(18px);

  border: 1px solid rgba(255, 255, 255, .14);

  color: #F2F3F6;

  border-radius: var(--r-lg);

  box-shadow: var(--shadow-pop);

  animation: rise .22s ease both;

}



.toast.error { background: rgba(143, 43, 43, .82); }

.toast.ok    { background: rgba(23, 24, 28, .80); }

.toast.warn  { background: rgba(122, 82, 0, .82); }



/* ─── Mobile ────────────────────────────────────────────────────────────── */



.scrim { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(23, 24, 28, .38); }



@media (max-width: 940px) {

  /* Sidebar overlays instead of pushing the column; the scrim closes it. */

  .sidebar { width: min(86vw, 300px); box-shadow: var(--shadow-pop); }

  body.sb-open .scrim { display: block; }



  .chat { padding: 18px 14px calc(var(--composer-h, 110px) + 10px); }

  .composer { padding: 4px 12px 10px; }

  /* 16px stops iOS Safari zooming the page when a field takes focus. */

  #input, .clarify-other input, .chart-field select { font-size: 16px; }

  .composer-hint { display: none; }

  .composer-bar { justify-content: space-between; }

  .chart-card { padding: 14px 12px 10px; }

  .chart-marks { width: 100%; }

  .chart-marks button { flex: 1; }

  .hero { padding-top: max(6vh, 48px); }

  .msg.user .msg-body { max-width: 92%; }

  .hero-kpis { grid-template-columns: 1fr 1fr; }

  .lc { padding: 11px 13px 12px; }

  .lc-value { font-size: 19px; }

}



/* ─── Short viewports ───────────────────────────────────────────────────── */



@media (max-height: 820px) {

  .hero { padding-top: max(4vh, 24px); }

  .hero-mark { width: 34px; height: 34px; margin-bottom: 12px; }

  .hero-kpis { margin: 18px 0 16px; }

  .lc { padding: 10px 13px 11px; }

  .lc-value { font-size: 19px; }

  .lc-bars { margin-top: 7px; }

}



/* ─── Glass fallbacks ───────────────────────────────────────────────────────

   Frost is an enhancement, never a dependency: without backdrop-filter, or

   for a reader who asks for less transparency, every floating surface falls

   back to the flat panel it was before. */



.glass-off, .glass-off .sidebar, .glass-off .composer-box, .glass-off .lc,

.glass-off .chart-card, .glass-off .clarify, .glass-off .modal-card,

.glass-off .chip, .glass-off .msg.user .msg-body { backdrop-filter: none; }



@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  .sidebar { background: var(--surface); }

  .composer-box, .lc, .chart-card, .clarify, .modal-card, .chip,

  .md .md-table { background: var(--page); }

  .msg.user .msg-body { background: var(--wash); }

  .toast { background: var(--ink); }

  .toast.error { background: #8F2B2B; }

  .toast.warn { background: #7A5200; }

  .modal-scrim { background: rgba(23, 24, 28, .38); }

}



@media (prefers-reduced-transparency: reduce) {

  body { background: var(--page); }

  .sidebar, .composer-box, .lc, .chart-card, .clarify, .modal-card, .chip,

  .msg.user .msg-body, .toast, .modal-scrim, .md .md-table {

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

  }

  .sidebar { background: var(--surface); }

  .composer-box, .lc, .chart-card, .clarify, .modal-card, .chip,

  .md .md-table { background: var(--page); }

  .msg.user .msg-body { background: var(--wash); }

  .toast { background: var(--ink); }

  .modal-scrim { background: rgba(23, 24, 28, .38); }

}



/* ─── Reduced motion ────────────────────────────────────────────────────── */



@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;

    scroll-behavior: auto !important;

  }

}



/* ── RAS-specific components ──────────────────────────────────────────────── */

/* Sidebar rows — one shared, quiet language for views and questions alike:
   a single line, hover wash, an arrow that appears on hover, everything else
   in the tooltip. Menu rows read as pressable by convention; the bordered
   grammar stays for controls in the main column. */

.view-list { display: flex; flex-direction: column; }

.recent-list { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }

.recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.recent-item:hover { background: var(--wash-2); color: var(--ink); }
.recent-item .row-go { margin-left: auto; opacity: 0; font-size: 11px; flex-shrink: 0; transition: opacity .12s; }
.recent-item:hover .row-go { opacity: 1; }

.view {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background .12s ease;
}

.view:hover { background: var(--page); }

.view-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}

.view:hover .view-name { color: var(--ink); }

.view-rows {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
}


/* Settings toggle + drawer */
.settings-toggle { width: 100%; justify-content: flex-start; }
.settings-caret {
  margin-left: auto;
  width: 13px !important;
  height: 13px !important;
  transition: transform .2s ease;
  opacity: .5 !important;
}
.settings-toggle[aria-expanded="true"] .settings-caret { transform: rotate(180deg); }

.settings-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
  overflow: hidden;
}
.settings-drawer.open { grid-template-rows: 1fr; }
.settings-drawer-inner { min-height: 0; }

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 6px;
}
.settings-group + .settings-group {
  border-top: 1px solid var(--line);
  padding-top: 6px;
}
.settings-group-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 4px 8px 2px;
}
.settings-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 8px 2px;
  border-top: 1px solid var(--line);
}
.settings-section-label:first-child {
  border-top: none;
  padding-top: 4px;
}
.settings-section-label + .settings-group {
  border-top: none;
  padding-top: 0;
}
.settings-group .ghost-btn,
.settings-group a.ghost-btn {
  text-decoration: none;
  color: var(--ink-2);
}


/* bouncing-ball loader — only when live */
.think-icon {
  position: relative;
  width: 36px;
  height: 27px;
  flex-shrink: 0;
  display: none;
  overflow: visible;
}
details.think.live .think-icon { display: block; }


/* the ball */
.think-icon::before {
  content: "";
  position: absolute;
  bottom: 9px;
  left: 15px;
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: #1971C2;
  animation: think-bounce 0.5s ease-in-out infinite alternate;
}


/* the stair steps */
.think-icon::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 2px;
  width: 14px;
  border-radius: 1px;
  box-shadow:
     0    1.5px 0 var(--now),
    -10.5px 15px  0 var(--now),
    -21px  28.5px 0 var(--now);
  animation: think-step 1s ease-in-out infinite;
}


/* "Thinking" label pulses while live */
details.think.live .think-label {
  animation: think-pulse 2s ease-in-out infinite;
}

.think-hint { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--faint); }

.think-status {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
  white-space: pre-line;
  line-height: 1.6;
  opacity: 0;
  transition: opacity .2s ease;
}
.think-status:not(:empty) { opacity: 1; }

.think-body {
  margin: 0;
  padding: 2px 13px 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-height: 220px;
  overflow-y: auto;
}


/* Worklog — one hairline card per tool call */

.wl {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.wl-head { display: flex; align-items: center; gap: 10px; padding: 6px 11px;
           cursor: pointer; user-select: none; transition: background .12s ease; }

.wl-head:hover { background: var(--wash); }


/* Same caret as the reasoning drawer: ▸ always means "this opens". */
.wl-caret { font-size: 9px; color: var(--faint); flex: none; transition: transform .15s ease; }
.wl.open .wl-caret { transform: rotate(90deg); }

.wl-no { font-family: var(--font-mono); font-size: 10px; color: var(--faint); flex: none; }

.wl-name { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--ink); }

.wl-summary {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}

.wl-state { flex: none; display: inline-flex; align-items: center; }

.wl-spinner {
  width: 11px; height: 11px;
  border: 2px solid var(--wash-2);
  border-top-color: var(--ink-2);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.wl-check { color: var(--up); font-size: 12px; }
.wl-x     { color: var(--down); font-size: 12px; }

.wl-body { display: none; border-top: 1px solid var(--line); padding: 10px 11px 11px; }
.wl.open .wl-body { display: block; }

.wl-label { margin: 9px 0 5px; display: flex; align-items: center; gap: 8px; }
.wl-label:first-child { margin-top: 0; }

.wl-act {
  margin-left: auto;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--ink-2);
  background: none; border: none; cursor: pointer; padding: 1px 4px;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 2px;
}

.wl-act:hover { color: var(--ink); text-decoration-color: var(--ink); }
.wl-act + .wl-act { margin-left: 0; }

.wl pre {
  margin: 0;
  padding: 9px 11px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  background: var(--wash);
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-height: 280px;
  overflow-y: auto;
}

.wl pre.sql { color: var(--ink); }


/* Zoom controls — same bordered-button grammar as everything else pressable */
.map-nav {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-nav button {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 13px/1 var(--font-mono);
  color: var(--ink-2);
  background: var(--page);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}

.map-nav button:hover { color: var(--ink); border-color: var(--muted); }
.map-nav button:active { transform: translateY(1px); }

.map-tip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: #F2F3F6;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  max-width: 240px;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transition: opacity .1s ease;
  z-index: 5;
}

.map-tip .mono { font-size: 10.5px; color: #C9CBD1; }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-2);
}

.map-legend .key { display: inline-flex; align-items: center; gap: 6px; }

.map-legend .key i { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.map-legend-row { display: flex; align-items: center; gap: 6px; }
.map-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.map-legend-label { font-size: 11.5px; color: var(--ink-2); }


/* Streaming — plain text grows via textContent, no innerHTML thrash */

.stream-raw {
  white-space: pre-wrap;
  font-size: 14.5px;
  line-height: 1.6;
  overflow-wrap: break-word;
  display: block;
}


/* Smooth fade when plain stream text is replaced with parsed markdown */
.md-finalising {
  animation: md-fade-in 0.18s ease both;
}
@keyframes md-fade-in { from { opacity: 0.4; } to { opacity: 1; } }


/* ─── Bulk download modal ───────────────────────────────────────────────── */

.bd-modal-card { width: min(480px, calc(100vw - 40px)); max-height: min(80vh, 620px); }
.bd-modal-body { padding: 20px 20px 24px; overflow: auto; }

.bd-form { display: flex; flex-direction: column; gap: 14px; }

.bd-toggle {
  display: flex; gap: 3px;
  background: var(--surface); border-radius: var(--r-sm); padding: 3px;
}
.bd-tab {
  flex: 1; padding: 5px 10px; border: none; border-radius: 6px;
  font: 13px var(--font-body); color: var(--ink-2); background: none; cursor: pointer;
  transition: all .14s;
}
.bd-tab.active {
  background: var(--page); color: var(--ink); font-weight: 500;
  box-shadow: 0 1px 4px rgba(23,24,28,.08);
}

.bd-row { display: flex; align-items: center; gap: 10px; }

.bd-label {
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  min-width: 72px; white-space: nowrap;
}

.bd-date {
  flex: 1; height: 34px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font: 13px var(--font-body); color: var(--ink); background: var(--page);
}
.bd-date:focus { outline: none; border-color: var(--ink-2); }

.bd-add-btn {
  height: 34px; padding: 0 14px; white-space: nowrap;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font: 13px var(--font-body); color: var(--ink); background: var(--page);
  cursor: pointer; transition: background .12s;
}
.bd-add-btn:hover { background: var(--wash); }

.bd-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; padding-top: 2px; }

.bd-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  font-size: 12px; color: var(--ink); font-family: var(--font-mono);
}
.bd-chip-rm {
  border: none; background: none; cursor: pointer; padding: 0 1px;
  font-size: 15px; line-height: 1; color: var(--muted);
}
.bd-chip-rm:hover { color: var(--ink); }

.bd-select {
  flex: 1; height: 34px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font: 13px var(--font-body); color: var(--ink); background: var(--page);
  cursor: pointer;
}
.bd-select:focus { outline: none; border-color: var(--ink-2); }

.bd-dl-btn {
  width: 100%; padding: 9px 0; border: none; border-radius: var(--r-sm);
  font: 500 14px var(--font-body); color: #fff; background: var(--ink);
  cursor: pointer; transition: opacity .14s; margin-top: 4px;
}
.bd-dl-btn:hover:not(:disabled) { opacity: .85; }
.bd-dl-btn:disabled { opacity: .42; cursor: not-allowed; }


/* ─── MPR Upload modal ──────────────────────────────────────────────────── */

.up-modal-card { width: min(540px, calc(100vw - 40px)); max-height: min(86vh, 680px); }
.up-modal-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }

.up-zone {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-md);
  padding: 28px 20px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .14s, background .14s;
  user-select: none;
}

.up-zone:hover, .up-zone:focus, .up-zone.drag { border-color: var(--ink-2); background: var(--wash); }
.up-zone:focus { outline: 2px solid var(--ink); outline-offset: 2px; }

.up-icon { width: 28px; height: 28px; color: var(--muted); margin: 0 auto 10px; display: block; }

.up-prompt {
  margin: 0 0 4px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.up-prompt code { font-family: var(--font-mono); font-size: .9em; background: var(--wash-2); border-radius: 4px; padding: 1px 4px; }

.up-prompt-sub { margin: 0; font-size: 11.5px; color: var(--muted); }

.up-file-list { display: flex; flex-direction: column; gap: 5px; }

.up-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink-2);
  background: var(--wash);
}

.up-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-file-size { color: var(--faint); flex: none; }
.up-file-rm {
  border: none; background: none; cursor: pointer; padding: 0 2px;
  font-size: 15px; line-height: 1; color: var(--muted); flex: none;
}
.up-file-rm:hover { color: var(--ink); }

.up-schema-note {
  font-size: 10px;
  color: var(--faint);
  line-height: 1.6;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  background: var(--wash);
}


/* Result panel */

.up-result { display: flex; flex-direction: column; gap: 10px; }
.up-result.hidden { display: none; }

.up-stat-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.up-stat {
  flex: 1;
  min-width: 100px;
  padding: 10px 13px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: left;
}

.up-stat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
  display: block;
}

.up-stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

.up-stat.ok  .up-stat-value { color: var(--up); }
.up-stat.warn .up-stat-value { color: #7A5200; }
.up-stat.bad .up-stat-value { color: var(--down); }

.up-conflict-table {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.up-conflict-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11.5px;
  font-family: var(--font-mono);
}

.up-conflict-table th {
  position: sticky; top: 0;
  font-size: 10px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  text-align: left; color: var(--muted); background: var(--wash);
  padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}

.up-conflict-table td {
  padding: 5px 10px; border-bottom: 1px solid var(--line);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-2);
}

.up-conflict-table tbody tr:last-child td { border-bottom: none; }
.up-conflict-scroll { max-height: 180px; overflow-y: auto; }

.up-source {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--wash);
}

.up-source-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.up-source-label { font-size: 12.5px; font-weight: 500; color: var(--ink); }

.up-source-note { font-size: 10px; color: var(--muted); line-height: 1.5; }

.up-source-btn {
  flex: none;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font: 12.5px var(--font-body);
  color: var(--ink);
  background: var(--page);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}

.up-source-btn:hover { background: var(--wash-2); border-color: var(--ink-2); }
.up-source-btn:disabled { opacity: .45; cursor: not-allowed; }

.up-danger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #EBD4D4;
  border-radius: var(--r-sm);
  background: #FDF7F7;
}

.up-clear-btn {
  flex: none;
  padding: 5px 12px;
  border: 1px solid #D9A5A5;
  border-radius: var(--r-sm);
  font: 12.5px var(--font-body);
  color: var(--down);
  background: var(--page);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}

.up-clear-btn:hover { background: #FEF0F0; border-color: var(--down); }
.up-clear-btn:disabled { opacity: .45; cursor: not-allowed; }

.up-danger-note { font-size: 10.5px; color: #A05050; }