/**
 * theme.css — Edition B (ECharts) design tokens + base layout.
 * Color tokens and grid shell copied from docs/Implemtation_docs/v2_ui_mockup.html.
 * snake_case class names throughout (per 05_frontend_intern_plan.md).
 */

:root {
  --bg: #0b1020;
  --panel: #131a2e;
  --panel-2: #1a2240;
  --panel-3: #0f1526;
  --border: #25304d;
  --border-soft: #1e2842;
  --text: #e6ecff;
  --text-dim: #94a3c4;
  --text-mute: #6b7796;
  --accent: #5b8def;
  --accent-2: #7c5cff;
  --good: #34d399;
  --bad: #f87171;
  --warn: #fbbf24;
  --chip: #1f2a4a;
  --kpi-bg: linear-gradient(135deg, #1a2240 0%, #232c52 100%);

  /* Shared accent families (design language).
     GREEN  — interactive/primary-subtle actions + positive metrics: Play,
              View More/Less, scrollbars, deterministic badge, active state.
     ORANGE — secondary emphasis + hover: chart icon, hover highlights.
     Both are vibrant-but-muted (enterprise, not neon). --accent-green mirrors
     --good so the whole green family stays in sync. */
  --accent-green: #34d399;
  --accent-green-soft: #6ee7b7;
  --accent-orange: #f5934a;
  --accent-orange-soft: #fbb072;

  /* ── Unified active-state design system ────────────────────────────
     ONE glow recipe reused everywhere a component is active / selected /
     focused / currently-viewed. The chat card's green glow is the reference;
     every surface reuses the SAME border thickness, shadow intensity, blur
     radius and transition timing — only the accent color changes per category.
     A component sets --glow-rgb (its category color as "r, g, b") and applies
     the shared `.is_active` class; the recipe below does the rest. */
  --glow-timing: 0.28s ease;      /* smooth fade in/out — no pulse, no blink */
  /* Per-category active colors (as r,g,b so we can vary alpha in the recipe). */
  --glow-chat:     52, 211, 153;  /* emerald green  — chat response (reference) */
  --glow-insights: 91, 141, 239;  /* blue           — insights */
  --glow-actions:  52, 211, 153;  /* emerald green  — actions / recommendations */
  --glow-context:  34, 211, 238;  /* cyan           — context */
  --glow-charts:   168, 85, 247;  /* purple         — charts */
  --glow-tables:   79, 124, 255;  /* blue           — result table */
  --glow-hover:    245, 147, 74;  /* orange         — hover emphasis */

  /* Enterprise-grade themed scrollbar — subtle emerald/dark-green tones that
     echo the deterministic badge (--good) and the analytics theme. Muted at
     rest, a touch brighter on hover. Kept thin (2–3px) and never flashy. */
  --scroll-thumb: rgba(52, 211, 153, 0.28);
  --scroll-thumb-hover: rgba(52, 211, 153, 0.55);
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-sticky: 0 12px 28px -8px rgba(0, 0, 0, 0.55);
  --radius: 12px;
  --radius-sm: 8px;

  /* Chart categorical palette — no similar shades adjacent
     (blue → violet → green → amber → red → cyan) */
  --c-blue:  #5b8def;
  --c-violet:#7c5cff;
  --c-green: #34d399;
  --c-amber: #fbbf24;
  --c-red:   #f87171;
  --c-cyan:  #38bdf8;

  --header-h: 60px;

  /* Layout column widths (referenced by media queries).
     Fluid via clamp() so the side columns shrink with the viewport instead of
     staying fixed and crushing the centre workspace. This keeps the 3-column
     look intact under Windows display scaling (1920 @ 125%/150% → 1536/1280 CSS
     px) instead of squeezing the answer column to a sliver.

     Narrowed (per layout refresh) so the centre analytics area is visually
     dominant: chat 300–320px, rail 260–280px. At 1920 the centre now gets
     ~1320px (was ~1216px) — bigger KPI cards + charts.
       chat: 300–320px, growing ~17% of viewport
       rail: 260–280px, growing ~15% of viewport */
  --chat-w: clamp(340px, 19vw, 360px);
  --rail-w: clamp(260px, 15vw, 280px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  /* Fluid base font size: scales gently with the viewport so text stays
     readable from 1366px up through 1920px and under 125%/150% Windows
     scaling (which reports 1536 / 1280 CSS px), without hard jumps.
     Reduced ~2px vs the previous scale for a denser analytics feel. */
  font-size: clamp(11px, 0.62vw + 5px, 12.5px);
  line-height: 1.48;
}

/* App shell — three-column enterprise copilot:
   ┌─────────────────── header ───────────────────┐
   │ chat │ answer workspace │ insights rail       │
   └─────────────── methodology footer ────────────┘
   The answer workspace owns its own scroll; the chat panel and insights
   rail scroll independently; KPI workspace stays sticky inside answer. */
body {
  display: grid;
  grid-template-columns: var(--chat-w) minmax(0, 1fr) var(--rail-w);
  grid-template-rows: var(--header-h) minmax(0, 1fr);
  grid-template-areas:
    "header header header"
    "chat   answer rail";
  height: 100vh;
  overflow: hidden;
}

/* Responsive: fold the insights rail below ~1180px, chat below ~860px.
   NOTE: the rule that hides `.insights_rail` lives in app.css (loaded
   after this file) so it wins the cascade over the rail's own
   `display: flex`; equal-specificity + later-source would otherwise
   keep the rail visible and spawn an implicit grid column. */
@media (max-width: 1400px) {
  body {
    grid-template-columns: var(--chat-w) minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "chat   answer";
  }
}
@media (max-width: 1024px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 220px minmax(0, 1fr);
    grid-template-areas:
      "header"
      "chat"
      "answer";
  }
}

/* Thin, enterprise-themed scrollbars (≈3px) with subtle emerald-green tones
   that match the deterministic badge / analytics theme — muted at rest,
   brighter on hover. Webkit (Chrome/Edge/Safari) + Firefox. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  /* Emerald gradient — dark green → muted green, integrated with the theme. */
  background: linear-gradient(180deg, var(--scroll-thumb-hover), var(--scroll-thumb));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--good), var(--scroll-thumb-hover));
}
::-webkit-scrollbar-corner { background: transparent; }

/* ── Shared active-state glow recipe ─────────────────────────────────
   The single source of truth for "this is active/selected/focused". Any
   element that carries `.is_active` and sets `--glow-rgb` (an "r, g, b"
   triple, e.g. one of the --glow-* tokens above) gets the identical premium
   treatment the chat card pioneered: a thin accent ring, a soft elevated drop
   shadow, a faint category tint, and a colored border — all fading smoothly
   (no pulse / no blink). Only the color differs between categories. */
.is_active {
  border-color: rgb(var(--glow-rgb, var(--glow-chat))) !important;
  background-color: rgba(var(--glow-rgb, var(--glow-chat)), 0.07);
  box-shadow:
    0 0 0 1px rgba(var(--glow-rgb, var(--glow-chat)), 0.30),
    0 6px 18px -8px rgba(var(--glow-rgb, var(--glow-chat)), 0.85);
}
/* Consistent fade for every surface that can become active. */
.glow_target {
  transition: box-shadow var(--glow-timing), background-color var(--glow-timing),
              border-color var(--glow-timing);
}
@media (prefers-reduced-motion: reduce) {
  .glow_target { transition: none; }
}