/* ============== Self-hosted fonts ============== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/admin/vendor/fonts/Inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/admin/vendor/fonts/Inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/admin/vendor/fonts/Inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/admin/vendor/fonts/Inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/admin/vendor/fonts/JetBrainsMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/admin/vendor/fonts/JetBrainsMono-500.woff2') format('woff2');
}

/* ============== Design tokens ============== */
:root {
  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
}

/* Light theme (default) */
.theme-light {
  --bg: #fbfaf9;
  --bg-elev: #ffffff;
  --bg-sunken: #f4f2ef;
  --bg-sidebar: #f7f5f2;
  --bg-hover: rgba(0,0,0,0.04);
  --bg-active: rgba(0,0,0,0.06);

  --border: rgba(15, 12, 24, 0.08);
  --border-strong: rgba(15, 12, 24, 0.14);

  --fg: #1a1523;
  --fg-muted: #645c70;
  --fg-subtle: #8e8696;
  --fg-faint: #b5afba;

  --accent: #475569;
  --accent-hover: #334155;
  --accent-soft: rgba(71, 85, 105, 0.10);
  --accent-fg: #ffffff;

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  --chart-1: #1E61F0;
  --chart-2: #7B61FF;
  --chart-3: #0EA5A4;
  --chart-4: #EC4899;
  --chart-5: #F59E0B;
  --chart-6: #10B981;

  --shadow-sm: 0 1px 2px rgba(15, 12, 24, 0.04), 0 1px 1px rgba(15, 12, 24, 0.03);
  --shadow-md: 0 2px 6px rgba(15, 12, 24, 0.04), 0 4px 12px rgba(15, 12, 24, 0.06);
  --shadow-lg: 0 8px 24px rgba(15, 12, 24, 0.08), 0 2px 6px rgba(15, 12, 24, 0.04);

  --code-bg: #f4f2ef;
  --code-fg: #1a1523;
  --code-keyword: #c026d3;
  --code-string: #059669;
  --code-comment: #94908a;
  --code-number: #d97706;
  --code-function: #2563eb;
}

/* Dark theme — Analytics Chat (deep night with subtle blue cast + indigo/teal accent) */
.theme-dark {
  --bg: #0B0D14;
  --bg-elev: #131724;
  --bg-sunken: #1A1F30;
  --bg-sidebar: #131724;
  --bg-hover: #1E2438;
  --bg-active: #232A3F;

  --border: #232A3F;
  --border-strong: #2F3851;

  --fg: #ECEEF5;
  --fg-muted: #C5C9D6;
  --fg-subtle: #8E94A8;
  --fg-faint: #5F667D;

  --accent: #7C8CFF;
  --accent-hover: #9AA6FF;
  --accent-soft: rgba(124, 140, 255, 0.14);
  --accent-fg: #0B0D14;
  --accent-ink: #B7C0FF;

  --success: #4ADE93;
  --success-soft: rgba(74, 222, 147, 0.13);
  --warning: #F6B26B;
  --warning-soft: rgba(246, 178, 107, 0.13);
  --danger: #FF7A6B;
  --danger-soft: rgba(255, 122, 107, 0.13);
  --info: #5ECEEB;

  /* Tonal fills — KPI / callout / table accent backgrounds */
  --tint-indigo: linear-gradient(135deg, rgba(124,140,255,0.18), rgba(124,140,255,0.04));
  --tint-teal:   linear-gradient(135deg, rgba(61,216,199,0.18), rgba(61,216,199,0.04));
  --tint-cyan:   linear-gradient(135deg, rgba(94,206,235,0.18), rgba(94,206,235,0.04));
  --tint-mint:   linear-gradient(135deg, rgba(74,222,147,0.18), rgba(74,222,147,0.04));
  --tint-amber:  linear-gradient(135deg, rgba(246,178,107,0.18), rgba(246,178,107,0.04));
  --tint-rose:   linear-gradient(135deg, rgba(255,122,107,0.18), rgba(255,122,107,0.04));

  --chart-1: #7C8CFF;
  --chart-2: #3DD8C7;
  --chart-3: #5ECEEB;
  --chart-4: #FF7AB6;
  --chart-5: #F6B26B;
  --chart-6: #4ADE93;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 1px 0 rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 20px 50px -10px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.30);

  --code-bg: #131724;
  --code-fg: #ECEEF5;
  --code-keyword: #3DD8C7;
  --code-string: #4ADE93;
  --code-comment: #5F667D;
  --code-number: #F6B26B;
  --code-function: #7C8CFF;
}

/* Ambient gradient on the dark theme — radial indigo/teal/cyan glow */
.theme-dark body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(124,140,255,0.10), transparent 60%),
    radial-gradient(700px 400px at 95% 110%, rgba(61,216,199,0.08), transparent 60%),
    radial-gradient(600px 400px at 60% 50%, rgba(94,206,235,0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.theme-dark .app, .theme-dark .app-shell { position: relative; z-index: 1; }

/* ============== Base ============== */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;             /* enable full-viewport flex shells */
  overflow: hidden;         /* page-level scroll is forbidden — internal scroll only */
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--fg);
  background: var(--bg);
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input, textarea { font-family: inherit; }

/* ============== App shell ============== */
.app {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  font-family: var(--font-sans);
  overflow: hidden;
}
/* The router mounts each view here; must fill remaining width and height
   so internal flex shells (chat / dashboard) can compute viewport height. */
.view-root {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  overflow: hidden;
}
/* Chat view shell — sidebar + main, full viewport height. */
.chat-view-shell {
  flex: 1 1 auto;
  display: flex;
  height: 100%;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* ============== Left rail (icons) ============== */
.rail {
  width: 56px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 4px;
  flex-shrink: 0;
}
.rail-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7C8CFF, #3DD8C7);
  display: grid; place-items: center;
  color: #0B0D14;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(124, 140, 255, 0.40);
  letter-spacing: -0.01em;
}
.rail-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--fg-subtle);
  transition: background 0.15s, color 0.15s;
}
.rail-btn:hover { background: var(--bg-hover); color: var(--fg); }
.rail-btn.active { background: var(--accent-soft); color: var(--accent); }
.rail-spacer { flex: 1; }
.rail-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: #1a1523;
}

/* ============== Sidebar ============== */
.sidebar {
  width: 264px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sidebar-header {
  padding: 14px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.sidebar-search {
  margin: 0 10px 8px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--fg-subtle);
  font-size: 13px;
}
.sidebar-search input {
  background: transparent; border: none; outline: none;
  color: var(--fg);
  flex: 1;
  font-size: 13px;
}
.sidebar-search input::placeholder { color: var(--fg-subtle); }
.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg-subtle);
}

.btn-new {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  transition: background 0.15s;
}
.btn-new:hover { background: var(--accent-hover); }

.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
}
.chat-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding: 10px 8px 4px;
}
.chat-item {
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 1px;
  transition: background 0.1s;
}
.chat-item:hover { background: var(--bg-hover); }
.chat-item.active { background: var(--bg-active); }
.chat-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.4;
}
.chat-item-meta {
  font-size: 11px;
  color: var(--fg-subtle);
  display: flex; align-items: center; gap: 6px;
}
.chat-item-pin {
  color: var(--fg-faint);
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 9px;
}
.sidebar-footer-info {
  flex: 1;
  min-width: 0;
}
.sidebar-footer-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.sidebar-footer-meta {
  font-size: 11px;
  color: var(--fg-subtle);
}

/* ============== Main area ============== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;            /* allow internal scroll containers to shrink */
  height: 100%;
  background: var(--bg);
  position: relative;
}

.topbar {
  height: 52px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 12px;
  flex-shrink: 0;
  background: var(--bg);
}
.topbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  display: flex; align-items: center; gap: 8px;
}
.topbar-title-meta {
  font-size: 12px;
  color: var(--fg-subtle);
  font-weight: 400;
}
.topbar-spacer { flex: 1; }
.topbar-btn {
  height: 30px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  transition: all 0.15s;
}
.topbar-btn:hover { background: var(--bg-hover); color: var(--fg); border-color: var(--border-strong); }
.topbar-btn.primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.topbar-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.topbar-btn.icon { padding: 0; width: 30px; justify-content: center; }

.tab-row {
  display: flex; align-items: center; gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 0 18px;
  background: var(--bg);
  flex-shrink: 0;
}
.tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  transition: color 0.15s;
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.tab-count {
  font-size: 11px;
  background: var(--bg-sunken);
  color: var(--fg-muted);
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 500;
}

/* ============== Chat thread ============== */
/* Thread scrolls inside .main, while the composer stays pinned at the bottom
   of the viewport (no need to scroll the page to reach it). */
.thread {
  flex: 1 1 auto;
  min-height: 0;            /* required so flex child can shrink and scroll */
  overflow-y: auto;
  padding: 24px 0 24px;     /* no extra bottom padding — composer is sibling */
  display: flex;
  flex-direction: column;
  align-items: center;      /* center thread-inner horizontally in main */
}
.thread-inner {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
  min-width: 0;
}

.message {
  display: flex;
  gap: 14px;
  margin-bottom: 28px;
  align-items: flex-start;
}
.message.user { flex-direction: row-reverse; }
.message-avatar {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.message-avatar.ai {
  background: linear-gradient(135deg, #7C8CFF, #3DD8C7);
  color: #0B0D14;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(124, 140, 255, 0.35);
}
.message-avatar.user {
  background: linear-gradient(135deg, #F6B26B, #FF7A6B);
  color: #0B0D14;
}
.message-body {
  flex: 1;
  min-width: 0;
}
.message.user .message-body {
  display: flex; flex-direction: column; align-items: flex-end;
}
.message-meta {
  font-size: 11px;
  color: var(--fg-subtle);
  margin-bottom: 5px;
  display: flex; align-items: center; gap: 7px;
}
.message-bubble {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}
/*
 * Hide an assistant `.message-bubble` while it has no content yet. The chat
 * lifecycle creates an empty bubble immediately on `tool_use_start` /
 * `tool_progress` and fills it later via `text_delta` / `done`. For
 * synchronous MCP tools (analytics_ask) that return text only at the end,
 * the bubble can sit empty for minutes — visually it shows as a stray
 * empty rounded rectangle next to the progress card.
 *
 * `:empty` matches when the element has no children and no text, so this
 * rule only hides truly-blank bubbles. As soon as the streaming cursor
 * is appended, or a single text node lands via `textContent`, the bubble
 * becomes non-empty and shows again — no JS toggle needed.
 *
 * Scoped to assistant messages so user prompts remain unaffected
 * (a user-side empty bubble would never render anyway, but keeps intent
 * clear).
 */
.message:not(.user) .message-bubble:empty {
  display: none;
}
.message.user .message-bubble {
  background: linear-gradient(135deg, #7C8CFF, #3DD8C7);
  color: #0B0D14;
  font-weight: 500;
  border-color: transparent;
  border-radius: 14px 14px 4px 14px;
  max-width: 80%;
  box-shadow: 0 6px 20px rgba(124, 140, 255, 0.25);
}
.message-bubble p { margin: 0 0 8px; }
.message-bubble p:last-child { margin: 0; }
.message-bubble h3 {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 600;
}
.message-bubble h3:first-child { margin-top: 0; }
.message-bubble ul, .message-bubble ol {
  margin: 6px 0; padding-left: 20px;
}
.message-bubble li { margin-bottom: 3px; }
.message-bubble code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
}
.message.user .message-bubble code {
  background: rgba(255,255,255,0.18);
  border-color: transparent;
  color: white;
}

/* Tool / thinking call */
.tool-call {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-bottom: 10px;
  cursor: pointer;
}
.tool-call:hover { border-color: var(--border-strong); }
.tool-call-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--bg-elev);
  display: grid; place-items: center;
  color: var(--fg-subtle);
  flex-shrink: 0;
}
.tool-call-name { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); }
.tool-call-status {
  font-size: 11px;
  color: var(--fg-subtle);
  margin-left: auto;
  display: flex; align-items: center; gap: 5px;
}
.tool-call-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
}
.tool-call-dot.running { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.thinking-block {
  border: 1px dashed var(--border-strong);
  border-radius: 9px;
  padding: 10px 12px;
  background: var(--bg-sunken);
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--fg-muted);
  display: flex; align-items: flex-start; gap: 9px;
}
.thinking-icon {
  color: var(--fg-subtle);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Code block */
.code-block {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  margin: 10px 0;
  overflow: hidden;
  font-family: var(--font-mono);
}
.code-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.code-lang { color: var(--fg-muted); font-weight: 500; }
.code-copy {
  font-size: 11px;
  color: var(--fg-subtle);
  display: inline-flex; align-items: center; gap: 4px;
}
.code-copy:hover { color: var(--fg); }
.code-content {
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--code-fg);
  white-space: pre;
  overflow-x: auto;
}
.tk-key { color: var(--code-keyword); }
.tk-str { color: var(--code-string); }
.tk-cmt { color: var(--code-comment); font-style: italic; }
.tk-num { color: var(--code-number); }
.tk-fn { color: var(--code-function); }

/* Data table inside chat */
.data-table-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  margin: 10px 0;
  overflow: hidden;
}
.data-table-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
}
.data-table-title { font-size: 12.5px; font-weight: 600; color: var(--fg); display: flex; gap: 8px; align-items: center; }
.data-table-actions { display: flex; gap: 4px; }
.data-table-btn {
  height: 24px; padding: 0 9px;
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 500;
}
.data-table-btn:hover { background: var(--bg-hover); color: var(--fg); }
.data-table-btn.primary {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}
.data-table-btn.primary:hover { background: var(--accent); color: var(--accent-fg); }
table.dt {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
table.dt th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
table.dt td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  vertical-align: middle;
}
table.dt tr:last-child td { border-bottom: none; }
table.dt tr:hover td { background: var(--bg-hover); }
table.dt td.num, table.dt th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; }

/* Event row event-name pill */
.event-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
}
.event-pill-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}

/* Progress bars in table cells */
.bar-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}
.bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-sunken);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.4s ease;
  box-shadow: 0 0 8px currentColor;
}
.bar-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  min-width: 56px;
  text-align: right;
}

/* Big delta chip */
.delta-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 700;
  padding: 2px 7px 2px 5px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.delta-chip.up { color: var(--success); background: rgba(16, 185, 129, 0.1); }
.delta-chip.down { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.delta-up { color: var(--success); font-size: 11.5px; font-weight: 500; }
.delta-down { color: var(--danger); font-size: 11.5px; font-weight: 500; }
.spark { display: inline-block; vertical-align: middle; }

/* Chart card inside chat */
.chart-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  margin: 10px 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.chart-card-header {
  padding: 12px 14px 8px;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.chart-card-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.chart-card-title { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.chart-card-sub { font-size: 11.5px; color: var(--fg-subtle); }
.chart-card-actions { display: flex; gap: 4px; }
.chart-card-body { padding: 0 4px 8px; }

/* Composer — pinned to the bottom of .main (flex sibling of .thread).
   Always visible, never requires page scrolling. */
.composer-wrap {
  position: relative;       /* sibling, not overlay */
  flex: 0 0 auto;
  width: 100%;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 12px 24px max(14px, env(safe-area-inset-bottom));
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}
.composer {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  overflow: hidden;
}
.composer-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 14px 16px 6px;
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
  min-height: 24px;
  line-height: 1.5;
}
.composer-input::placeholder { color: var(--fg-subtle); }
.composer-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 8px;
}
.composer-tool {
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 500;
}
.composer-tool:hover { background: var(--bg-hover); color: var(--fg); }
.composer-tool.icon { width: 28px; padding: 0; justify-content: center; }
.composer-spacer { flex: 1; }
.btn-send {
  height: 28px; padding: 0 12px;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-send:hover { background: var(--accent-hover); }
.btn-send:disabled { background: var(--bg-sunken); color: var(--fg-faint); cursor: not-allowed; }

/* Suggestion chips */
.suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  width: 100%;
  max-width: 880px;
  margin: 0 auto 8px;
  padding: 0 4px;
  pointer-events: auto;
  justify-content: center;
}
.suggestion {
  font-size: 12px;
  padding: 5px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--fg-muted);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
}
.suggestion:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Streaming cursor */
.streaming-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1s steps(2) infinite;
  border-radius: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ============== Dashboard ============== */
.dash {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-header {
  padding: 18px 24px 10px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg);
}
.dash-title-row {
  display: flex; align-items: center; gap: 12px;
}
.dash-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.dash-emoji { font-size: 20px; }
.dash-desc { font-size: 13px; color: var(--fg-muted); }
.dash-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-control {
  height: 30px;
  padding: 0 10px;
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  background: var(--bg-elev);
}
.dash-control:hover { color: var(--fg); border-color: var(--border-strong); }
.dash-control .label { color: var(--fg-subtle); font-weight: 400; }
.dash-control .val { color: var(--fg); font-weight: 600; }
.dash-content {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 32px;
  background: var(--bg-sunken);
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.widget {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
  min-height: 100px;
}
.widget:hover { box-shadow: var(--shadow-md); }
.widget-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.widget-title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.widget-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  display: flex; align-items: center; gap: 6px;
}
.widget-sub { font-size: 11.5px; color: var(--fg-subtle); }
.widget-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.widget:hover .widget-actions { opacity: 1; }
.widget-action {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--fg-subtle);
}
.widget-action:hover { background: var(--bg-hover); color: var(--fg); }
.widget-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Span helpers */
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* KPI Card — bold/massive */
.kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.kpi-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.kpi-value {
  font-size: 56px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
  display: flex; align-items: baseline; gap: 6px;
}
.kpi-value-suffix {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-subtle);
  letter-spacing: -0.02em;
}
.kpi-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
  padding: 3px 8px 3px 6px;
  border-radius: 99px;
  width: fit-content;
}
.kpi-delta.up { color: var(--success); background: rgba(16, 185, 129, 0.1); }
.kpi-delta.down { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.kpi-delta-period { color: var(--fg-subtle); font-weight: 500; margin-left: 4px; }
.kpi-spark { margin-top: 12px; margin-left: -16px; margin-right: -16px; margin-bottom: -16px; }
.kpi-sub-line { font-size: 11.5px; color: var(--fg-subtle); margin-top: 4px; }

/* Empty state */
.empty {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 40px 24px;
}
.empty-card {
  text-align: center;
  max-width: 460px;
}
.empty-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
}
.empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 6px;
}
.empty-text {
  font-size: 13.5px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}
.empty-actions { display: inline-flex; gap: 8px; }

/* Dashboard list */
.dash-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.dash-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dash-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.dash-card-preview {
  height: 110px;
  background: linear-gradient(135deg, var(--bg-sunken), var(--bg-elev));
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.dash-card-body { padding: 12px 14px; }
.dash-card-title { font-size: 13.5px; font-weight: 600; color: var(--fg); margin-bottom: 3px; }
.dash-card-meta { font-size: 11.5px; color: var(--fg-subtle); display: flex; align-items: center; gap: 8px; }
.dash-card-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font-weight: 500;
}

/* Status badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg-sunken);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.badge.live { color: var(--success); border-color: rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.08); }
.badge.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  animation: pulse 1.5s ease-in-out infinite;
}
.badge.draft { color: var(--warning); }

/* Editor */
.editor-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 24, 0.5);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 100;
  padding: 20px;
}
.editor {
  width: 100%;
  max-width: 1080px;
  height: 100%;
  max-height: 720px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.editor-header {
  height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.editor-header-title { font-size: 14px; font-weight: 600; }
.editor-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.editor-preview {
  flex: 1;
  background: var(--bg-sunken);
  padding: 24px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.editor-preview-card {
  flex: 1;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  min-height: 0;
}
.editor-aside {
  width: 320px;
  border-left: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
  flex-shrink: 0;
}
.editor-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.editor-tab {
  flex: 1;
  padding: 11px 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-muted);
  text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.editor-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.editor-section { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.editor-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 10px;
}
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field-label { font-size: 12px; font-weight: 500; color: var(--fg-muted); }
.input, .select {
  height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 13px;
  outline: none;
  width: 100%;
}
.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chart-type-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.chart-type-btn {
  aspect-ratio: 1.2;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  display: grid; place-items: center;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.chart-type-btn:hover { border-color: var(--border-strong); color: var(--fg); }
.chart-type-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Loading shimmer */
.shimmer {
  display: inline-block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-sunken) 0%, var(--bg-hover) 50%, var(--bg-sunken) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

/* Theme toggle on artboards */
.frame-toggle {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 10;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px;
  display: flex; gap: 2px;
  box-shadow: var(--shadow-sm);
}
.frame-toggle button {
  width: 24px; height: 22px;
  border-radius: 5px;
  display: grid; place-items: center;
  color: var(--fg-subtle);
}
.frame-toggle button.active {
  background: var(--bg-active);
  color: var(--fg);
}

/* Utility */
.flex { display: flex; }
.items-center { align-items: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.text-muted { color: var(--fg-muted); }
.text-subtle { color: var(--fg-subtle); }
.text-xs { font-size: 11px; }
.text-sm { font-size: 12.5px; }
.font-mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }

/* ============== Login overlay ============== */
.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.login-card {
  width: 380px;
  max-width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: var(--shadow-lg);
}
.login-card h2 {
  margin: 0 0 4px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
}
.login-card .login-sub {
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-subtle);
  margin-bottom: 18px;
}
.login-card .login-or {
  text-align: center;
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin: 12px 0 6px;
}
.login-card .login-err {
  color: var(--danger);
  font-size: 12.5px;
  text-align: center;
  margin-top: 10px;
  min-height: 16px;
}

/* Form field (inline label + input) */
.field-row {
  display: block;
  margin-bottom: 12px;
}
.field-row label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 4px;
}
.field-row input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.field-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Primary button (login etc.) */
.btn-primary {
  width: 100%;
  height: 38px;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  width: 100%;
  height: 38px;
  background: var(--bg-sunken);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }

/* ============== Theme toggle button ============== */
.theme-toggle {
  height: 30px;
  width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 14px;
  transition: all 0.15s;
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--fg); border-color: var(--border-strong); }

/* ============== Modal overlay (skills, connections) ============== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 24, 0.55);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  width: 720px;
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-header h2 {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--fg);
}
.modal-header button {
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  font-size: 22px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
}
.modal-header button:hover { color: var(--fg); background: var(--bg-hover); }
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
}

/* Session list (sidebar) */
.session-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
}
.session-item {
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 1px;
  transition: background 0.1s;
}
.session-item:hover { background: var(--bg-hover); }
.session-item.active { background: var(--bg-active); }
.session-item .s-prompt {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.session-item .s-meta {
  font-size: 11px;
  color: var(--fg-subtle);
}
.no-sessions {
  color: var(--fg-subtle);
  font-size: 12.5px;
  text-align: center;
  padding: 16px 8px;
}

/* New chat button + composer-send */
.new-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.15s;
}
.new-chat-btn:hover { background: var(--accent-hover); }

.composer-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  background: transparent;
  color: var(--fg-muted);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.composer-btn:hover { background: var(--bg-hover); color: var(--fg); }
.composer-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.composer-send {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  padding: 0 14px;
}
.composer-send:hover { background: var(--accent-hover); }
.composer-send:disabled { background: var(--bg-sunken); color: var(--fg-faint); }

/* Composer layout: textarea + buttons inline */
.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
}
.composer textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 8px 4px;
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
  min-height: 28px;
  max-height: 200px;
  line-height: 1.5;
}
.composer textarea::placeholder { color: var(--fg-subtle); }

/* Message actions row (Copy after assistant reply) */
.msg-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  opacity: 0.7;
}
.msg-action-btn {
  font-size: 11.5px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg-muted);
}
.msg-action-btn:hover { color: var(--fg); border-color: var(--border-strong); background: var(--bg-hover); }

/* Tool-call status text */
.tool-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--success);
}
.tool-status.running { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.tool-status.error { background: var(--danger); }
.tool-status.done { background: var(--success); }
.tool-name { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); }
.tool-status-text { font-size: 11px; color: var(--fg-subtle); margin-left: auto; }

/* Editor overlay (fullscreen chart expand) */
.editor-overlay-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.editor-overlay-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-sunken);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  font-size: 18px;
  line-height: 1;
  z-index: 2;
}
.editor-overlay-close:hover { background: var(--bg-hover); color: var(--fg); }
.editor-overlay-body {
  padding: 36px 24px 24px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* App layout — chat shell */
.app-shell {
  position: fixed;
  inset: 0;
  display: flex;
  background: var(--bg);
  color: var(--fg);
}
.main {
  position: relative;
}

/* File preview chips */
.file-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px 0;
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--fg);
  max-width: 220px;
}
.file-chip .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .fsize { color: var(--fg-subtle); font-size: 10.5px; }
.file-chip .fremove {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}

/* Toast */
.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 400;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  max-width: 320px;
}
.toast.toast-visible { opacity: 1; }
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }

/* Pin-to-dashboard button (legacy) */
.pin-to-dashboard {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 11px;
  cursor: pointer;
  vertical-align: middle;
}
.pin-to-dashboard:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pin-to-dashboard:disabled { opacity: 0.6; cursor: default; }

/* ── Research-mode progress card (query-data-research-mode, task 3.4) ──
   Functional only — no visual design. Used by app-ui.js to surface
   tool_step_thought / tool_step_probe lines + BUDGET_EXCEEDED badge for
   research-mode answers. Each tool_expose_result mounts its OWN slot via
   TOOL_RESULT_RENDERER outside this card. */
.research-progress-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  padding: 8px 12px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-sunken);
  font-size: 12.5px;
}
.research-progress-label {
  position: relative;
  padding-left: 22px;
  color: var(--fg-subtle);
  font-weight: 500;
}
.research-progress-label::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: research-spin 0.8s linear infinite;
}
@keyframes research-spin { to { transform: rotate(360deg); } }
.research-step-thought {
  font-size: 12px;
  font-style: italic;
  color: var(--fg-muted);
  padding-left: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.research-step-probe {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  padding-left: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Markdown tables inside assistant chat bubbles — Analytics Chat style.
   Sticky header, indigo hover tint, monospace tabular nums, summary row variant. */
.msg-bubble table,
.message-body table,
.message-content table,
.assistant table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  overflow: hidden;
}
.msg-bubble table th,
.message-body table th,
.message-content table th,
.assistant table th {
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  white-space: nowrap;
  position: sticky; top: 0;
}
.msg-bubble table td,
.message-body table td,
.message-content table td,
.assistant table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  vertical-align: middle;
}
.msg-bubble table tr:last-child td,
.message-body table tr:last-child td,
.message-content table tr:last-child td,
.assistant table tr:last-child td { border-bottom: none; }
.theme-dark .msg-bubble table tr:hover td,
.theme-dark .message-body table tr:hover td,
.theme-dark .message-content table tr:hover td,
.theme-dark .assistant table tr:hover td { background: rgba(124, 140, 255, 0.05); }
.theme-light .msg-bubble table tr:hover td,
.theme-light .message-body table tr:hover td,
.theme-light .message-content table tr:hover td,
.theme-light .assistant table tr:hover td { background: var(--bg-hover); }
.research-budget-badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--danger);
  color: white;
  font-size: 11.5px;
  font-weight: 600;
}

/* Responsive: tablet collapse for bento-grid (task 7.8) */
@media (min-width: 768px) and (max-width: 1023px) {
  .dash-grid > .col-3 { grid-column: span 6; }
  .dash-grid > .col-4 { grid-column: span 6; }
  .dash-grid > .col-5 { grid-column: span 12; }
  .dash-grid > .col-7 { grid-column: span 12; }
  .dash-grid > .col-8 { grid-column: span 12; }
  .dash-grid > .col-9 { grid-column: span 12; }
}

/* ============== v2 Numia additions (chat-dashboard-app-shell, task 2.1) ============== */
/* Source: design-bundle/project/styles.css lines 671–736 and 928–948.
   Only selectors not already present above are appended here.
   Existing in v1 theme.css (NOT redefined): .delta-chip, .delta-chip.up/.down, .delta-up, .delta-down, .spark. */

/* Segmented control inside widget headers */
.seg {
  display: inline-flex;
  padding: 2px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 7px;
  gap: 1px;
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-subtle);
  background: transparent;
}
.seg-btn:hover { color: var(--fg); }
.seg-btn.active {
  background: var(--bg-elev);
  color: var(--fg);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Plain numeric data table — no progress bars, no styling tricks */
table.dt.dt-plain td { padding: 9px 14px; font-size: 12.5px; }
table.dt.dt-plain th { padding: 8px 14px 7px; font-size: 11px; }
table.dt.dt-plain td.num, table.dt.dt-plain th.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 12px;
}
table.dt.dt-plain tr:nth-child(even) td { background: color-mix(in oklch, var(--bg-sunken), transparent 50%); }
table.dt.dt-plain tr:hover td { background: var(--bg-hover); }

/* Conversion-rate chip (color coded via inline style or modifier classes set by JS) */
.conv-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Cohort funnel matrix table (sticky first column handled inline via position:sticky) */
table.dt.dt-cohort { width: auto; min-width: 100%; }
table.dt.dt-cohort th, table.dt.dt-cohort td { padding: 6px 8px; }
table.dt.dt-cohort thead th { vertical-align: bottom; min-width: 70px; }
table.dt.dt-cohort tbody td.num { text-align: right; font-family: var(--font-mono); }

/* Widget title rows / big titles / pills / hero variant (used by hero KPI widgets) */
.widget-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.widget-title-big {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.widget-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px 3px 7px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.widget-hero {
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-elev) 60%, color-mix(in oklch, var(--bg-elev), transparent 30%));
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* Dashboard picker popover (dashboard-multi spec, task 4.1) */
.dashboard-picker {
  position: absolute;
  min-width: 240px;
  max-width: 320px;
  z-index: 1500;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  font-size: 13px;
  color: var(--fg);
}
.dashboard-picker-title {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  padding: 4px 8px;
  letter-spacing: 0.04em;
}
.dashboard-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.dashboard-picker-item:hover,
.dashboard-picker-item.focused {
  background: var(--bg-hover);
}
.dashboard-picker-item input[type="radio"] { margin: 0; }
.dashboard-picker-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-picker-item-count {
  color: var(--fg-subtle);
  font-size: 11px;
}
.dashboard-picker-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.dashboard-picker-create { padding: 8px 10px; }
.dashboard-picker-create input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-elev);
  color: var(--fg);
  font-size: 13px;
  box-sizing: border-box;
}
.dashboard-picker-create input:focus {
  outline: none;
  border-color: var(--accent);
}
.dashboard-picker-actions {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
}
.dashboard-picker-actions button {
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 12px;
}
.dashboard-picker__error,
.dashboard-picker-err {
  color: var(--danger);
  font-size: 11px;
  padding: 4px 10px;
}

/* ============================================================
   Analytics Chat — rich response components
   (callouts / KPI strip / heat-cell / pills / segment dots /
    code-block / data-table-wrap variant)
   Ported from design bundle (chat-bot-2).
   ============================================================ */

/* ---------- Display headings inside chat responses ---------- */
.message-bubble h2,
.assistant h2,
.response h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 8px 0 6px;
}
.message-bubble h3,
.assistant h3,
.response h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 6px;
}
.message-bubble h3::before,
.assistant h3::before,
.response h3::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* ---------- Callout (headline / warn / bad) ---------- */
.callout {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  margin: 10px 0;
}
.callout::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--tint-indigo, rgba(124,140,255,0.08));
  pointer-events: none;
}
.callout > * { position: relative; z-index: 1; }
.callout-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: rgba(124,140,255,0.18);
  color: var(--accent);
  border: 1px solid rgba(124,140,255,0.3);
}
.callout-body { flex: 1; min-width: 0; }
.callout-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.callout-text {
  font-size: 14px;
  color: var(--fg);
  line-height: 1.55;
}
.callout.warn { border-color: rgba(246,178,107,0.30); }
.callout.warn::before { background: var(--tint-amber, rgba(246,178,107,0.10)); }
.callout.warn .callout-icon {
  background: rgba(246,178,107,0.20);
  color: var(--warning);
  border-color: rgba(246,178,107,0.35);
}
.callout.bad { border-color: rgba(255,122,107,0.30); }
.callout.bad::before { background: var(--tint-rose, rgba(255,122,107,0.10)); }
.callout.bad .callout-icon {
  background: rgba(255,122,107,0.20);
  color: var(--danger);
  border-color: rgba(255,122,107,0.35);
}

/* ---------- KPI strip (each cell has its own tonal fill) ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  overflow: hidden;
  margin: 10px 0;
}
@media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi-cell {
  padding: 16px 18px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  isolation: isolate;
}
.kpi-cell::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0.7;
}
.kpi-cell:nth-child(4n+1)::before { background: var(--tint-indigo); }
.kpi-cell:nth-child(4n+2)::before { background: var(--tint-cyan); }
.kpi-cell:nth-child(4n+3)::before { background: var(--tint-mint); }
.kpi-cell:nth-child(4n+4)::before { background: var(--tint-amber); }
.kpi-cell:last-child { border-right: none; }
.kpi-cell .kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  font-weight: 600;
  margin-bottom: 0;
}
.kpi-cell .kpi-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: block;
}
.kpi-cell .kpi-value-suffix { font-size: 16px; color: var(--fg-subtle); }
.kpi-cell .kpi-sub {
  font-size: 12px;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}
.kpi-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.kpi-trend.up   { color: var(--success); }
.kpi-trend.down { color: var(--danger); }
.kpi-trend.flat { color: var(--fg-subtle); }

/* ---------- Heat-cell / progress-in-cell ---------- */
.heat-cell {
  display: inline-flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.heat-cell .heat-num { min-width: 40px; text-align: right; }
.heat-bar {
  flex: 1;
  min-width: 60px;
  max-width: 120px;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-active);
  overflow: hidden;
  position: relative;
}
.heat-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.heat-bar.good > span { background: var(--success); }
.heat-bar.warn > span { background: var(--warning); }
.heat-bar.bad  > span { background: var(--danger); }

/* ---------- Pill / badge ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--bg-sunken);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.pill.good { background: var(--success-soft, rgba(74,222,147,0.13)); color: var(--success); border-color: rgba(74,222,147,0.30); }
.pill.warn { background: var(--warning-soft, rgba(246,178,107,0.13)); color: var(--warning); border-color: rgba(246,178,107,0.30); }
.pill.bad  { background: var(--danger-soft, rgba(255,122,107,0.13));  color: var(--danger);  border-color: rgba(255,122,107,0.30); }
.pill.info { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); border-color: rgba(124,140,255,0.30); }

/* ---------- Segment dot ---------- */
.seg-row {
  display: inline-flex; align-items: center; gap: 8px;
}
.seg-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-faint);
  flex-shrink: 0;
  display: inline-block;
}
.seg-dot.primary {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,140,255,0.20);
}

/* ---------- Code block (Analytics Chat variant) ---------- */
.acode-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-elev);
  margin: 10px 0;
}
.acode-block-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.acode-block pre {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg);
  overflow-x: auto;
}

/* ---------- Data-table toolbar / footnote / highlighted rows ----------
   Used by both .data-table-wrap (existing) and rich responses. */
.data-table-wrap .footnote,
.table-footnote {
  font-size: 11.5px;
  color: var(--fg-subtle);
  font-style: italic;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
}
table.dt tr.highlight td,
.msg-bubble table tr.highlight td,
.message-body table tr.highlight td {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
table.dt tr.summary td,
.msg-bubble table tr.summary td,
.message-body table tr.summary td {
  font-weight: 600;
  background: var(--bg-sunken);
  color: var(--fg);
  border-top: 1px solid var(--border-strong);
}

/* ---------- Topbar connection chip (Analytics Chat dot+code+meta) ---------- */
.topbar-conn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--fg-subtle);
  padding: 4px 9px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.topbar-conn .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
}
.topbar-conn .dot.warn { background: var(--warning); }
.topbar-conn .dot.bad  { background: var(--danger); }
.topbar-conn code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
}

/* ---------- Suggestion chip (already exists) — refine in dark mode ---------- */
.theme-dark .suggestion {
  background: var(--bg-elev);
  border-color: var(--border);
  color: var(--fg-muted);
}
.theme-dark .suggestion:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--fg);
}

/* ---------- Send button (Analytics Chat — gradient pill) ---------- */
.theme-dark .composer-send,
.theme-dark .btn-send {
  background: linear-gradient(135deg, #7C8CFF, #3DD8C7);
  color: #0B0D14;
  box-shadow: 0 4px 12px rgba(124,140,255,0.30);
  border: none;
}
.theme-dark .composer-send:hover,
.theme-dark .btn-send:hover {
  filter: brightness(1.08);
  background: linear-gradient(135deg, #7C8CFF, #3DD8C7);
}
.theme-dark .composer-send:disabled,
.theme-dark .btn-send:disabled {
  background: var(--bg-sunken);
  color: var(--fg-faint);
  box-shadow: none;
}

/* ---------- Inline pin buttons on KPI cells (chat) ---------- */
.kpi-cell .kpi-pin-btn,
[data-kpi] .kpi-pin-btn {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 2;
}
.kpi-cell:hover .kpi-pin-btn,
[data-kpi]:hover .kpi-pin-btn,
.kpi-cell .kpi-pin-btn:focus-visible,
[data-kpi] .kpi-pin-btn:focus-visible { opacity: 1; }
.kpi-cell .kpi-pin-btn:hover,
[data-kpi] .kpi-pin-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 767px) {
  .kpi-cell .kpi-pin-btn,
  [data-kpi] .kpi-pin-btn { opacity: 1; top: 6px; right: 6px; width: 24px; height: 24px; }
}

/* Pin/CSV buttons inside markdown-table wrappers blend with .data-table-actions */
.data-table-wrap[data-md-table] .data-table-header { gap: 8px; flex-wrap: wrap; }
.data-table-wrap[data-md-table] .data-table-actions { flex-wrap: wrap; gap: 4px; }

/* ---------- Day-divider (chat thread) ---------- */
.day-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-subtle);
  margin: 28px 0 18px;
}
.day-divider::before,
.day-divider::after {
  content: "";
  flex: 1; height: 1px;
  background: var(--border);
}

/* ============================================================
   Mobile adaptation — Analytics Chat
   Breakpoints:
     ≤ 1023px  — tablet : narrower rail behaviour, sidebar slide-in
     ≤ 767px   — phone  : rail collapses to 44px, sidebar becomes off-canvas
                          drawer, KPIs stack 2-up then 1-up, topbar wraps,
                          composer becomes edge-to-edge, tables horizontal-scroll
   ============================================================ */

/* Burger button (added at runtime; ships as hidden by default) */
.nav-burger {
  display: none;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg);
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-burger:hover { background: var(--bg-hover); }
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 80;
}
.sidebar-backdrop.open { display: block; }

@media (max-width: 1023px) {
  .thread-inner { max-width: 100%; padding: 0 18px; }
  .composer { max-width: 100%; }
  .suggestions { max-width: 100%; }
  .composer-wrap { padding: 18px 16px 14px; }

  /* Allow the rail to stay; sidebar narrows */
  .sidebar { width: 240px; }
}

@media (max-width: 767px) {
  /* Allow native zoom prevention by ensuring readable inputs at 16px */
  body { font-size: 14px; }

  /* App shell — show burger, slide sidebar */
  .nav-burger { display: inline-flex; }

  /* Rail — keep, but compact */
  .rail { width: 44px; padding: 10px 0; }
  .rail-logo { width: 28px; height: 28px; font-size: 16px; margin-bottom: 10px; }
  .rail-btn { width: 32px; height: 32px; }
  .rail-avatar { width: 26px; height: 26px; font-size: 10px; }

  /* Sidebar — off-canvas drawer */
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 44px;
    width: 280px;
    max-width: calc(100vw - 44px);
    z-index: 90;
    transform: translateX(-110%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }

  /* Main fills the remaining viewport */
  .main { width: calc(100vw - 44px); }

  /* Topbar — wrap rows; hide secondary connection chips */
  .topbar {
    height: auto;
    min-height: 52px;
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-title { font-size: 13.5px; }
  .topbar-title-meta { display: none; }
  .topbar-conn { display: none; }
  .topbar-conn:first-of-type { display: inline-flex; }
  .topbar-btn { height: 28px; padding: 0 9px; font-size: 12px; }
  .topbar-btn.icon { width: 28px; }

  /* Tab row scrolls horizontally */
  .tab-row { overflow-x: auto; padding: 0 12px; }
  .tab { padding: 9px 11px; font-size: 12.5px; flex-shrink: 0; }

  /* Thread — tighter padding (composer is a flex sibling, no overlay). */
  .thread { padding: 14px 0 14px; }
  .thread-inner { padding: 0 14px; }

  /* Messages — smaller avatar gap, slimmer bubbles */
  .message { gap: 10px; margin-bottom: 22px; }
  .message-avatar { width: 26px; height: 26px; }
  .message.user .message-bubble { max-width: 88%; }

  /* Display headings shrink */
  .message-bubble h2,
  .assistant h2,
  .response h2 { font-size: 22px; }
  .kpi-cell .kpi-value { font-size: 24px; }

  /* KPI strip — 2 columns on phone, then 1 column on very narrow */
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi-cell:nth-child(2n)::before,
  .kpi-cell:nth-child(2n+1)::before { /* keep tonal cycle */ }
  .kpi-cell {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 14px 14px;
  }
  .kpi-cell:nth-last-child(-n+2) { border-bottom: none; }
  .kpi-cell:nth-child(odd) { border-right: 1px solid var(--border); }

  /* Callout — tighter */
  .callout { padding: 12px 14px; gap: 10px; }
  .callout-icon { width: 26px; height: 26px; }
  .callout-text { font-size: 13.5px; }

  /* Heat-cell shrinks */
  .heat-bar { min-width: 40px; max-width: 80px; }

  /* Tables — horizontal scroll wrappers; shrink padding; remove sticky thead
     on phone (keeps scroll behaviour predictable) */
  .data-table-wrap,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .msg-bubble table,
  .message-body table,
  .message-content table,
  .assistant table,
  table.dt {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 12.5px;
  }
  .msg-bubble table thead th,
  .message-body table thead th,
  .message-content table thead th,
  .assistant table thead th,
  table.dt thead th {
    position: static;
    padding: 8px 10px;
    font-size: 10.5px;
  }
  .msg-bubble table tbody td,
  .message-body table tbody td,
  .message-content table tbody td,
  .assistant table tbody td,
  table.dt tbody td {
    padding: 9px 10px;
  }

  /* Code blocks — tighter padding and smaller font */
  .acode-block pre,
  .code-content { padding: 10px 12px; font-size: 12px; }
  .acode-block-head,
  .code-header { padding: 6px 10px; }

  /* Composer — edge-to-edge bottom-docked panel */
  .composer-wrap {
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  .composer { border-radius: 12px; }
  .composer textarea, .composer-input { font-size: 16px; padding: 10px 12px 4px; }
  .composer-toolbar { padding: 4px 6px 6px; flex-wrap: wrap; gap: 3px; }
  .composer-tool { font-size: 11.5px; padding: 0 8px; }
  .btn-send, .composer-send { padding: 0 10px; font-size: 12.5px; }

  /* Suggestion chips — wrap, shrink */
  .suggestions { gap: 5px; padding: 0 6px; }
  .suggestion { font-size: 11.5px; padding: 4px 9px; }

  /* Topbar conn dots in topbar — hide all but show as compact set if many */
  .topbar-actions { gap: 4px; }

  /* Login card — full width on phone */
  .login-card { width: 100%; padding: 24px 18px; }

  /* Modal — full width on phone */
  .modal { max-height: 92vh; border-radius: 12px; }
  .modal-header { padding: 12px 14px; }
  .modal-body { padding: 12px 14px; }

  /* Dashboard grid — single column */
  .dash-grid { grid-template-columns: repeat(1, 1fr); gap: 10px; }
  .dash-grid > [class^="col-"],
  .dash-grid > [class*=" col-"] { grid-column: span 1; }
  .dash-header { padding: 14px 16px 8px; }
  .dash-content { padding: 14px 14px 24px; }
  .kpi-value { font-size: 40px; }
  .kpi-value-suffix { font-size: 18px; }

  /* Editor overlay — full screen */
  .editor { max-height: none; height: 100%; max-width: 100%; border-radius: 0; }
  .editor-aside { width: 100%; border-left: none; border-top: 1px solid var(--border); }
  .editor-body { flex-direction: column; }
  .editor-preview { padding: 14px; }
}

/* Very narrow phones — single column KPI */
@media (max-width: 420px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .kpi-cell:nth-child(odd) { border-right: none; }
  .kpi-cell:last-child { border-bottom: none; }
  .message.user .message-bubble { max-width: 92%; }
  .message-bubble h2, .assistant h2, .response h2 { font-size: 20px; }
}