/*
 * FIKA Design System — nxzen brand palette
 * Light-default (Iridescent Pearl + Deep Space Black),
 * sharp 0-radius edges, Nunito (Corporative Sans Rounded proxy) +
 * Cormorant Garamond display (Canela proxy) + JetBrains Mono code.
 * Dark mode via [data-theme="dark"] override.
 *
 * Brand primaries (from nxzen brand guide - final v1.pdf):
 *   #030304  Deep Space Black  (backgrounds + text)
 *   #F6F2F4  Iridescent Pearl  (backgrounds + text)
 *   #8DE971  Lumen Green       (primary accent)
 *   #AD96DC  Neon Violet       (secondary accent)
 * Tertiary (infographics only): #ECF166 yellow, #74D1EA cyan, #FF7276 coral.
 * Rules: AAA contrast on text/icons/CTAs. Black-on-Green / Black-on-Violet
 * for actionable elements. Never Green-on-Violet or Violet-on-Green.
 */

/* ============================================================
   CSS VARIABLES — nxzen light tokens (default)
   ============================================================ */
:root {
    /* Brand primaries (invariant across themes) */
    --brand-black: #030304;
    --brand-pearl: #F6F2F4;
    --brand-green: #8DE971;
    --brand-green-hover: #7DD862;
    --brand-violet: #AD96DC;
    --brand-violet-hover: #9881CC;
    --brand-yellow: #ECF166;
    --brand-cyan: #74D1EA;
    --brand-coral: #FF7276;

    /* Surface scale — Iridescent Pearl canvas + warm-gray containers */
    --bg-primary: #F6F2F4;      /* body / canvas — Iridescent Pearl */
    --bg-secondary: #FFFFFF;    /* cards / elevated surfaces */
    --bg-tertiary: #F0EAEC;     /* surface-container-low */
    --bg-elevated: #E9E3E5;     /* surface-container */
    --bg-surface: #E0DADC;      /* surface-container-high */
    --surface-highest: #D6D0D2; /* surface-container-highest */

    /* Structure — Deep Space Black for headers, sidebars, hero sections.
       Legacy "navy" names retained to avoid churning every reference;
       values are now the nxzen black ramp. */
    --navy-900: #030304;
    --navy-800: #0E0E16;
    --navy-700: #1A1A22;
    --navy-600: #2A2A32;

    /* Text — on-surface */
    --text-primary: #030304;
    --text-secondary: #555560;
    --text-dim: #8A858F;
    --text-on-navy: #F6F2F4;
    --text-inverse: #F6F2F4;

    /* Accent — Lumen Green (primary) */
    --accent: #8DE971;
    --accent-hover: #7DD862;
    --accent-dim: rgba(141, 233, 113, 0.12);
    --accent-glow: rgba(141, 233, 113, 0.35);
    --accent-contrast: #030304;   /* text/icon color on accent fills */

    /* Secondary accent — Neon Violet */
    --accent-secondary: #AD96DC;
    --accent-secondary-hover: #9881CC;
    --accent-secondary-dim: rgba(173, 150, 220, 0.12);

    /* Semantic */
    --danger: #FF7276;                               /* Coral (brand tertiary) */
    --danger-dim: rgba(255, 114, 118, 0.12);
    --warning: #E4B400;                              /* amber — brand yellow is infographics-only */
    --warning-dim: rgba(228, 180, 0, 0.12);
    --info: #74D1EA;                                 /* Lumen Cyan (brand tertiary) */
    --info-dim: rgba(116, 209, 234, 0.12);
    --success: #8DE971;                              /* Lumen Green */

    /* Borders — light, structural */
    --border: #D6D0D2;
    --border-light: #E9E3E5;
    --border-strong: #030304;
    --border-accent: #8DE971;

    /* Radii — subtle softening (option 1).
       Original: 0 / 0 / 0 — fully sharp brutalist edges.
       Now:      6 / 8 / 12 — modern-but-restrained. Pills (mic, etc.)
       stay --radius-full. Labels and the logo badge keep an explicit
       0 override (see .logo__icon / .logo__badge) because they read as
       "official tag" markers, not buttons. */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Fonts — nxzen brand mapping
       body / headline  : Nunito (Corporative Sans Rounded proxy — rounded geometric sans)
       display          : Cormorant Garamond (Canela proxy — high-contrast editorial serif italic)
       mono             : JetBrains Mono (unchanged) */
    --font-body: 'Nunito', 'Arial Rounded MT Bold', 'Calibri', system-ui, sans-serif;
    --font-headline: 'Nunito', 'Arial Rounded MT Bold', 'Calibri', system-ui, sans-serif;
    --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Transitions */
    --ease: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows — flat, structural */
    --shadow-sm: 0 1px 3px rgba(3, 3, 4, 0.06);
    --shadow-md: 0 4px 12px rgba(3, 3, 4, 0.08);
    --shadow-industrial: 10px 10px 0 var(--navy-900);
    --shadow-glow: 0 0 20px var(--accent-glow);
}

/* ============================================================
   Dark mode override — Deep Space Black canvas + Pearl text
   ============================================================ */
[data-theme="dark"] {
    --bg-primary: #030304;
    --bg-secondary: #0E0E16;
    --bg-tertiary: #1A1A22;
    --bg-elevated: #2A2A32;
    --bg-surface: #3A3A42;
    --surface-highest: #4A4A52;

    --text-primary: #F6F2F4;
    --text-secondary: rgba(246, 242, 244, 0.72);
    --text-dim: rgba(246, 242, 244, 0.45);
    --text-inverse: #030304;

    --border: rgba(246, 242, 244, 0.08);
    --border-light: rgba(246, 242, 244, 0.14);
    --border-strong: rgba(246, 242, 244, 0.24);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-industrial: 10px 10px 0 rgba(0, 0, 0, 0.6);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Skip-to-content (keyboard accessibility) ────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 8px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--accent, #8DE971);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 0 4px 4px;
    text-decoration: none;
    transition: top 0.1s;
}
.skip-link:focus { top: 0; }

/* ── Visually hidden (screen-reader only) ────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;           /* fallback for older browsers */
    min-height: 100svh;          /* stable on mobile when URL bar collapses */
    overflow: hidden;
    overflow-x: hidden;          /* belt-and-suspenders: never horizontal scroll */
    -webkit-font-smoothing: antialiased;
}

html { overflow-x: hidden; }

/* Remove 300ms tap delay on all interactive elements */
button, a, [role="button"],
.btn-circle, .btn-send, .btn-admin, .btn-bell, .btn-tasks,
.mobile-bottom-nav__item, .sgn-btn {
    touch-action: manipulation;
}

/* ============================================================
   LAYOUT — 3-Column Grid

   Desktop: 300px sidebar + 1fr main + 320px right panel.
   max-width: 100vw + overflow-x: hidden are a hard clamp so the grid
   can never paint past the viewport even if a descendant has a runaway
   fixed width; the (max-width: 1100px) and (max-width: 900px) blocks
   below collapse columns and move sidebars off-canvas for tablets/phones.
   ============================================================ */
.app {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 300px 1fr 320px;
    grid-template-rows: 56px 1fr;
    height: 100vh;               /* fallback */
    height: 100svh;              /* stable on mobile browsers */
    max-width: 100vw;
    overflow-x: hidden;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
    grid-column: 1 / -1;
    background: var(--navy-900);
    color: var(--text-on-navy);
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 10;
}

.logo { display: flex; align-items: center; gap: 12px; }
.logo__icon {
    /* nxzen brand mark — replaces the original orange "F" box.
       Width auto so the wider X+wordmark image keeps its aspect
       ratio; the inner "F" text node (still in the markup) is
       hidden via font-size:0 and color:transparent. */
    height: 42px;
    width: auto;
    min-width: 42px;
    background: url('../assets/nxzen-logo.png') left center / contain no-repeat;
    border-radius: 0;
    display: inline-block;
    color: transparent;
    font-size: 0;
}
.logo__text {
    font-family: var(--font-headline);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
}
.logo__badge {
    font-family: var(--font-headline);
    font-size: 10px; font-weight: 700;
    padding: 3px 8px;
    background: transparent;
    color: #8DE971;                /* nxzen mint — also lifts the contrast above WCAG 4.5:1 */
    border: 1px solid #8DE971;
    border-radius: 0;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.header__left  { display: flex; align-items: center; gap: 10px; }
.header__right { display: flex; align-items: center; gap: 16px; }

/* Claude-style hamburger — hidden on desktop, shown on mobile */
.hamburger {
    width: 36px; height: 36px;
    border: 0;
    background: transparent;
    color: #fff;
    display: none;       /* desktop: hidden */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    cursor: pointer;
    border-radius: 4px;
}
.hamburger span {
    display: block;
    width: 20px; height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: opacity var(--ease);
}
.hamburger:hover { background: rgba(255,255,255,0.08); }
.hamburger:active { background: rgba(255,255,255,0.16); }
.status {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-headline);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.75);
}
.status__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all var(--ease);
}
.status__dot--connected { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.status__dot--error { background: var(--danger); }
.status__dot--processing { background: var(--warning); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Focus visibility (keyboard accessibility) ──────────── */
:focus-visible {
    outline: 2px solid var(--accent, #8DE971);
    outline-offset: 2px;
    border-radius: 3px;
}
.text-input:focus-visible { outline: none; } /* has custom border-color focus */

/* LLM Badge — renders on navy header */
.llm-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 0;
    font-family: var(--font-headline);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    transition: background var(--ease), border-color var(--ease);
    white-space: nowrap;
}
.llm-badge:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); }
.llm-badge__dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.35);
}
.llm-badge__text { color: inherit; }
.llm-badge--online .llm-badge__dot { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.llm-badge--online { color: var(--accent); border-color: rgba(141, 233, 113, 0.4); }
.llm-badge--offline .llm-badge__dot { background: var(--warning); }
.llm-badge--offline { color: var(--warning); }
.llm-badge--none .llm-badge__dot { background: var(--danger); }
.llm-badge--none { color: var(--danger); }

@media (max-width: 600px) {
    .llm-badge__text { display: none; }
    .llm-badge { padding: 4px 6px; }
}

/* ── Offline banner (legacy) — kept hidden for backwards compat ──
   The old banner has been replaced by .header-offline-icon below.
   We keep this selector so any stray <div id="offline-banner"> in
   cached pages renders invisibly instead of stacking atop the UI. */
.offline-banner { display: none !important; }

/* ── Header offline icon ─────────────────────────────────
   A small wifi-off glyph that appears in the header only when
   the app is offline. Toggled by offline-banner.js via the
   `html[data-offline]` attribute — one source of truth for every
   page (index, settings, admin). No toasts, no banners. */
.header-offline-icon {
    display: none;            /* hidden by default — shown by [data-offline] below */
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--warning, #e58c2e);
    cursor: default;
    flex-shrink: 0;
    padding: 0;
}
.header-offline-icon svg { pointer-events: none; }
html[data-offline] .header-offline-icon { display: inline-flex; }

/* ============================================================
   SIDEBAR — Documents (Phase 16)
   ============================================================ */
.sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar__head {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.sidebar__title {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 10px;
}

/* ── Sidebar tabs: Chats / Knowledge Base (desktop only) ──────────── */
.sidebar__tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.sidebar__tab {
    flex: 1;
    padding: 10px 8px;
    font-family: var(--font-headline, inherit);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--ease);
}
.sidebar__tab:hover { color: var(--text-primary); }
.sidebar__tab--active {
    color: #030304;
    border-bottom-color: var(--accent);
}
[data-theme="dark"] .sidebar__tab--active {
    color: #ffffff;
}
.sidebar__panel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.sidebar__panel--chats { overflow: hidden; }
.sidebar__chats-list { flex: 1; overflow-y: auto; padding: 4px 8px; }

/* New chat button inside the sidebar Chats panel */
.sidebar__new-chat {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: transparent;
    color: #030304;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ease);
}
[data-theme="dark"] .sidebar__new-chat { color: #ffffff; }
.sidebar__new-chat:hover { background: var(--accent-dim); }

/* Reuse the same .chat-card styles from the mobile drawer for the
   sidebar chat list. They're already defined in the mobile media
   query — duplicate the key rules here for desktop. */
@media (min-width: 901px) {
    .sidebar .chat-card {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 8px;
        cursor: pointer;
        margin-bottom: 2px;
    }
    .sidebar .chat-card:hover { background: var(--bg-tertiary); }
    .sidebar .chat-card--active { background: var(--bg-elevated); }
    .sidebar .chat-card__main { flex: 1; min-width: 0; }
    .sidebar .chat-card__title {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .sidebar .chat-card__meta {
        font-size: 10px;
        color: var(--text-dim);
        margin-top: 1px;
    }
    .sidebar .chat-card__actions { display: flex; gap: 2px; flex-shrink: 0; }
    .sidebar .chat-card__btn {
        width: 24px; height: 24px;
        border: 0; background: transparent; color: var(--text-dim);
        cursor: pointer; border-radius: 4px; font-size: 12px;
    }
    .sidebar .chat-card__btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
    .sidebar .chat-card__btn--danger:hover { color: var(--danger, #D33); }
}

.upload {
    border: 1.5px dashed var(--border-light);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all var(--ease);
}
.upload:hover, .upload--dragover {
    border-color: var(--accent);
    background: var(--accent-dim);
}
.upload__icon { font-size: 22px; margin-bottom: 4px; opacity: 0.5; }
.upload__text { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.upload__text strong { color: var(--accent); }

/* ── Admin upload target-role dropdown ────────────────────── */
.upload-role-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.upload-role-row[hidden] { display: none; }
.upload-role-row__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}
.upload-role-row__select {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}
.upload-role-row__select:focus { border-color: var(--accent); }

.doc-list { flex: 1; overflow-y: auto; padding: 8px; }

.doc-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: all var(--ease); margin-bottom: 2px;
}
.doc-item:hover { background: var(--bg-tertiary); border-color: var(--border); }

.doc-item__icon {
    width: 32px; height: 32px;
    border-radius: 0;
    background: var(--bg-tertiary);
    display: grid; place-items: center;
    font-size: 13px; flex-shrink: 0;
}
.doc-item__info { flex: 1; min-width: 0; }
.doc-item__name {
    font-size: 12px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-item__meta { font-size: 10px; color: var(--text-dim); margin-top: 4px; }

/* ── KB folder headers (group docs by trade_role) ───────── */
.doc-folder-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    padding: 14px 12px 6px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
}
.doc-folder-header:first-child { border-top: none; margin-top: 0; padding-top: 8px; }

/* Per-doc role tag (e.g. "Shared" for general-folder docs, or the trade
   role for role-scoped docs). Lets users instantly see which folder a
   doc belongs to, and lets admin verify the target role on upload. */
.doc-item__role-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
.doc-item__role-tag--general {
    background: var(--accent-dim);
    color: var(--accent);
}

.doc-item__remove {
    width: 24px; height: 24px; border-radius: 0;
    border: none; background: transparent; color: var(--text-dim);
    cursor: pointer; display: grid; place-items: center;
    transition: all var(--ease); font-size: 14px;
}
.doc-item__remove:hover { background: var(--danger-dim); color: var(--danger); }

.empty-state {
    padding: 20px; text-align: center;
    color: var(--text-dim); font-size: 12px; line-height: 1.6;
}

/* ============================================================
   MAIN — Conversation (Phase 17)
   ============================================================ */
.main {
    background: var(--bg-primary);
    display: flex; flex-direction: column;
    position: relative;
    min-height: 0;
    overflow: hidden;
}

/* Claude-style narrow centered column for chat content */
.chat {
    flex: 1;
    overflow-y: auto;
    padding: 32px clamp(16px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.msg { max-width: 100%; animation: msgIn 0.25s ease; }
@keyframes msgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.msg--user { align-self: flex-end; }
.msg--agent { align-self: flex-start; }

.msg__label {
    font-size: 10px; color: var(--text-dim); margin-bottom: 4px;
    font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
}
.msg--user .msg__label { text-align: right; }

.msg__bubble {
    padding: 12px 16px;
    /* Subtle softening (option 1): 12px on three corners; the per-role
       overrides below re-sharpen the speech-bubble corner to 4px so the
       direction signal (this came from "you" vs "FIKA") is preserved. */
    border-radius: 12px;
    font-size: 15px; line-height: 1.65;
    word-wrap: break-word;
}
.msg--user .msg__bubble {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-bottom-right-radius: 4px;   /* speech-bubble tail */
}
.msg--agent .msg__bubble {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;    /* speech-bubble tail */
}

/* ── RAGAS quality badge (attached below agent bubbles) ──────
   Populated asynchronously after a turn completes — evaluator
   runs in the background, frontend either polls or listens to
   the `quality_eval` WebSocket message. See frontend/js/app.js.

   Colour bands mirror the admin dashboard:
     green ≥ 0.85, amber 0.70–0.85, red < 0.70. */
.quality-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 4px 10px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: help;
}
.quality-badge[hidden] { display: none; }
.quality-badge__metric {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.quality-badge__dot {
    width: 7px; height: 7px; border-radius: 50%;
    display: inline-block;
    background: var(--text-dim);
}
.quality-badge__metric--green .quality-badge__dot { background: #16a34a; }
.quality-badge__metric--amber .quality-badge__dot { background: #d97706; }
.quality-badge__metric--red   .quality-badge__dot { background: var(--danger); }
.quality-badge__metric--gray  .quality-badge__dot { background: var(--text-dim); }
.quality-badge__metric--green { color: #16a34a; }
.quality-badge__metric--amber { color: #d97706; }
.quality-badge__metric--red   { color: var(--danger); }
.quality-badge__label {
    font-weight: 500;
    color: var(--text-dim);
    letter-spacing: 0.03em;
}
.quality-badge__sep {
    color: var(--border-strong, var(--border));
}

/* ── /workmate: asker-side AI brief + broadcast ack ────────── */
.msg--doubt-ack { align-self: flex-start; }
.msg--doubt-ack .msg__bubble {
    background: rgba(255, 114, 118, 0.08);           /* --brand-coral tint */
    border: 1px solid rgba(255, 114, 118, 0.45);
    border-left: 3px solid var(--brand-coral, #FF7276);
    border-bottom-left-radius: 4px;
    color: var(--text-primary);
}
.msg--doubt-ack .msg__label::before { content: "🤝 WORKMATE · "; color: var(--brand-coral, #FF7276); }

/* ── /workmate: peer reply injected into asker's chat ──────── */
.msg--peer-reply { align-self: flex-start; }
.msg--peer-reply .msg__bubble {
    background: rgba(141, 233, 113, 0.10);           /* --brand-green tint */
    border: 1px solid rgba(141, 233, 113, 0.45);
    border-left: 3px solid var(--brand-green, #8DE971);
    border-bottom-left-radius: 4px;
    color: var(--text-primary);
}
.msg--peer-reply .msg__label {
    color: var(--brand-green, #8DE971);
    font-weight: 600;
}
.msg--peer-reply .msg__label::after {
    content: " · PEER REPLY";
    font-size: 10px;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* Share the agent's markdown rendering for doubt-ack + peer-reply */
.msg--doubt-ack  .msg__bubble h2.md-h2,
.msg--peer-reply .msg__bubble h2.md-h2 { font-family: var(--font-headline); font-size: 16px; font-weight: 700; margin: 16px 0 6px; border-bottom: 2px solid var(--accent); padding-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.msg--doubt-ack  .msg__bubble p,
.msg--peer-reply .msg__bubble p { margin: 6px 0; }
.msg--doubt-ack  .msg__bubble strong,
.msg--peer-reply .msg__bubble strong { font-weight: 700; color: var(--text-primary); }
.msg--doubt-ack  .msg__bubble code,
.msg--peer-reply .msg__bubble code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--bg-elevated);
    color: var(--accent);
    padding: 2px 5px;
    border: 1px solid var(--border);
}

/* ── Markdown elements inside agent bubbles ──────────────── */
.msg--agent .msg__bubble h2.md-h2 {
    font-family: var(--font-headline);
    font-size: 16px; font-weight: 700;
    margin: 16px 0 6px;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.msg--agent .msg__bubble h3.md-h3 {
    font-family: var(--font-headline);
    font-size: 14px; font-weight: 600;
    margin: 12px 0 4px;
}
.msg--agent .msg__bubble p { margin: 6px 0; }
.msg--agent .msg__bubble strong { font-weight: 700; color: var(--text-primary); }
.msg--agent .msg__bubble code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--bg-elevated);
    color: var(--accent);
    padding: 2px 5px;
    border: 1px solid var(--border);
}
.msg--agent .msg__bubble pre.md-pre {
    background: #1a1f2e;
    color: #e2e8f0;
    padding: 12px 14px;
    margin: 10px 0;
    border: 1px solid var(--border-strong);
    overflow-x: auto;
    font-size: 13px;
    font-family: var(--font-mono);
    line-height: 1.5;
}
.msg--agent .msg__bubble ul.md-ul,
.msg--agent .msg__bubble ol.md-ol {
    margin: 6px 0;
    padding-left: 20px;
}
.msg--agent .msg__bubble ul.md-ul li,
.msg--agent .msg__bubble ol.md-ol li {
    margin: 3px 0;
}
.msg--agent .msg__bubble ul.md-ul li::marker { color: var(--accent); }
.msg--agent .msg__bubble ol.md-ol li::marker { color: var(--accent); font-weight: 600; }
.msg--agent .msg__bubble blockquote.md-bq {
    border-left: 3px solid var(--accent);
    background: var(--accent-dim);
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 14px;
}
.msg--agent .msg__bubble hr.md-hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 12px 0;
}

/* ── Claude-style thinking dots animation ─────────────────── */
.thinking-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
}
.thinking-dots__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: dotPulse 900ms ease-in-out infinite;
}
.thinking-dots__dot:nth-child(2) { animation-delay: 160ms; }
.thinking-dots__dot:nth-child(3) { animation-delay: 320ms; }

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50%      { transform: scale(1.4); opacity: 1; }
}

.thinking-status {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    min-height: 16px;
    transition: opacity 0.3s ease;
}
.thinking-status--fade { opacity: 0; }

.citation-ref {
    background: var(--accent-dim);
    color: #030304;  /* Deep Space Black — readable on light backgrounds */
    padding: 2px 6px;
    border-radius: 0;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
}
[data-theme="dark"] .citation-ref {
    color: var(--accent);  /* keep green on dark theme */
}

/* ── Markdown rendering in agent bubbles ─────────────────── */
.msg--agent .msg__bubble h2 {
    font-family: var(--font-headline);
    font-size: 15px; font-weight: 700;
    color: var(--text-primary);
    margin: 16px 0 6px; padding-bottom: 4px;
    border-bottom: 2px solid var(--accent);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.msg--agent .msg__bubble h3 {
    font-family: var(--font-headline);
    font-size: 14px; font-weight: 600;
    color: var(--text-primary); margin: 12px 0 4px;
}
.msg--agent .msg__bubble h2:first-child,
.msg--agent .msg__bubble h3:first-child { margin-top: 0; }

.msg--agent .msg__bubble p { margin: 8px 0; }
.msg--agent .msg__bubble p:first-child { margin-top: 0; }

.msg--agent .msg__bubble strong { font-weight: 700; color: var(--text-primary); }
.msg--agent .msg__bubble em { font-style: italic; color: var(--text-secondary); }

.msg--agent .msg__bubble code {
    font-family: var(--font-mono); font-size: 13px;
    background: var(--bg-elevated); color: var(--accent);
    padding: 2px 5px; border: 1px solid var(--border); border-radius: 0;
}
.msg--agent .msg__bubble pre.md-pre {
    background: var(--navy-900); color: var(--text-on-navy);
    padding: 12px 14px; margin: 10px 0;
    border: 1px solid var(--border-strong); border-radius: 0;
    overflow-x: auto; font-size: 13px; line-height: 1.5;
}
.msg--agent .msg__bubble pre.md-pre code {
    background: none; border: none; color: inherit; padding: 0; font-size: inherit;
}

.msg--agent .msg__bubble ul.md-ul,
.msg--agent .msg__bubble ol.md-ol { margin: 8px 0; padding-left: 20px; }
.msg--agent .msg__bubble ul.md-ul li,
.msg--agent .msg__bubble ol.md-ol li { margin: 4px 0; }
.msg--agent .msg__bubble ul.md-ul li::marker { color: var(--accent); }
.msg--agent .msg__bubble ol.md-ol li::marker { color: var(--accent); font-weight: 600; }

.msg--agent .msg__bubble blockquote.md-bq {
    border-left: 3px solid var(--accent);
    background: var(--accent-dim);
    padding: 8px 12px; margin: 10px 0;
    color: var(--text-primary); font-size: 14px; font-style: italic;
}
.msg--agent .msg__bubble hr.md-hr {
    border: none; border-top: 1px solid var(--border); margin: 12px 0;
}
.msg--agent .msg__bubble a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; }
.msg--agent .msg__bubble a:hover { color: var(--accent); }

.grounding-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; padding: 2px 8px; border-radius: 0;
    margin-top: 8px; font-weight: 500;
}
.grounding-badge--grounded { background: var(--accent-dim); color: var(--accent); }
.grounding-badge--ungrounded { background: var(--danger-dim); color: var(--danger); }
.grounding-badge--partial { background: var(--warning-dim); color: var(--warning); }
.grounding-badge--no-context { background: var(--info-dim); color: var(--info); }

/* ------------------------------------------------------------------
 * Inline "Sources: [1] file · section  [2] file · section" strip
 * Attached directly under an agent bubble so attribution is visible
 * even when the LLM forgot to emit [Source N] markers in the prose.
 * Side-panel cite cards still exist — this is a lightweight echo.
 * ------------------------------------------------------------------ */
.sources-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 11px;
    line-height: 1.3;
}
.sources-strip__label {
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 2px;
}
.sources-strip__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: var(--bg-tertiary, rgba(255,255,255,0.04));
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    max-width: 280px;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.sources-strip__chip:hover {
    background: var(--bg-elevated, rgba(255,255,255,0.08));
    border-color: var(--accent, var(--text-secondary));
}
.sources-strip__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent-dim, rgba(255,255,255,0.08));
    color: var(--accent, var(--text-primary));
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
}
.sources-strip__doc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
    font-weight: 600;
}
.sources-strip__sep { color: var(--text-dim, var(--text-secondary)); opacity: 0.6; }
.sources-strip__sec {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
    color: var(--text-secondary);
}
.sources-strip__more {
    color: var(--text-dim, var(--text-secondary));
    font-style: italic;
}
/* Flash highlight when a chip click scrolls to a cite card */
.cite-card--flash {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    transition: outline-color 1s ease;
}
@media (max-width: 520px) {
    .sources-strip__doc { max-width: 96px; }
    .sources-strip__sec { max-width: 72px; }
}

/* ============================================================
   INPUT AREA (Phase 17-18)
   ============================================================ */
.input-area {
    padding: 12px clamp(16px, 4vw, 40px) 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

/* Constrain the input row to the same column width as .chat */
.input-area > .input-row,
.input-area > .starter-queries {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.btn-circle {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%; border: 1px solid var(--border-light);
    background: var(--bg-tertiary); color: var(--text-primary);
    cursor: pointer; display: grid; place-items: center;
    font-size: 15px; transition: all var(--ease);
}
.btn-circle:hover { background: var(--bg-elevated); border-color: var(--border-accent); }

.btn-circle--recording {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    animation: micPulse 1.5s ease-in-out infinite;
}
@keyframes micPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(248,113,113,0); }
}

#btn-mic.btn-mic--recording {
    color: #e53935;
    animation: micPulse 1.2s ease-in-out infinite;
}

.btn-circle--active {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* Waveform overlay — hidden by default, shown over text-input when mic is recording */
.waveform {
    display: none;
    position: absolute; inset: 0;
    align-items: center; justify-content: center; gap: 2px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    pointer-events: none;
}
#btn-mic.btn-circle--recording ~ .input-wrap .waveform { display: flex; }
.waveform__bar {
    width: 3px; background: var(--accent); border-radius: 0;
    transition: height 0.08s ease; opacity: 0.5; height: 4px;
}
.waveform__bar--active { opacity: 1; }

.input-row { display: flex; align-items: center; gap: 6px; }

/* Paperclip / attach button — base rules for ALL viewports */
.input-pill__plus {
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.input-pill__plus:hover {
    background: var(--accent-dim);
    color: var(--accent);
}
.input-pill__plus:active { transform: scale(0.94); }
[data-theme="dark"] .input-pill__plus {
    color: rgba(255,255,255,0.5);
}

/* Attach popover (Voice / Camera / Photo / Upload) — visual style only.
   Positioning is owned by wireInputPlus() in app.js which portals the menu
   to <body> and sets position:fixed with coords from getBoundingClientRect
   on the [+] button. This avoids every ancestor overflow / stacking /
   media-query conflict and works uniformly on desktop + mobile. */
.input-plus-menu {
    background: var(--bg-elevated, #ffffff);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 10000;
    min-width: 200px;
}
.input-plus-menu[hidden] { display: none !important; }
.input-plus-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.input-plus-menu__item:hover,
.input-plus-menu__item:active {
    background: var(--accent-dim);
    color: var(--accent);
}
.input-plus-menu__item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.input-plus-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--text-dim);
}
.input-plus-menu__item:hover .input-plus-menu__icon,
.input-plus-menu__item:active .input-plus-menu__icon { color: var(--accent); }
.input-plus-menu__badge {
    width: 8px;
    height: 8px;
    background: var(--accent, #8DE971);
    border-radius: 50%;
    margin-left: auto;
}
[data-theme="dark"] .input-plus-menu {
    background: var(--bg-elevated);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ── Slash-command picker (/task, /workmate, …) ─────────────── */
.slash-menu {
    background: var(--bg-elevated, #ffffff);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
    z-index: 10000;
    min-width: 240px;
    animation: slideUpIn 0.14s ease;
}
.slash-menu[hidden] { display: none !important; }
.slash-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    transition: background 0.12s;
}
.slash-menu__item:last-child { border-bottom: none; }
.slash-menu__item:hover,
.slash-menu__item--active {
    background: var(--accent-dim, rgba(141, 233, 113, 0.08));
}
.slash-menu__cmd {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 120px;
}
.slash-menu__desc {
    font-size: 13px;
    color: var(--text-dim);
}
[data-theme="dark"] .slash-menu {
    background: var(--bg-elevated);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50);
}

/* Wrapper that makes the waveform overlay the text input */
.input-wrap { position: relative; flex: 1; display: flex; }

.text-input {
    flex: 1; padding: 10px 14px;
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px; outline: none;
    transition: border-color var(--ease);
}
.text-input:focus { border-color: var(--accent); }
.text-input::placeholder { color: var(--text-dim); }

.btn-send {
    padding: 10px 16px;
    border-radius: var(--radius);
    border: none;
    background: var(--accent);
    color: var(--text-inverse);
    font-family: var(--font-body);
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all var(--ease);
}
.btn-send:hover { background: var(--accent-hover); }

/* ============================================================
   RIGHT PANEL — Citations & Camera (Phase 19-22)
   ============================================================ */
.right-panel {
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden;
    min-height: 0;
    max-height: 100%;
}

/* Panel sections share the available height proportionally. Source
 * Citations (.panel-section--grow) takes half; Session Analytics,
 * Knowledge Gaps, and Audit Trail share the other half (one-sixth each:
 * 3 / (3 + 1 + 1 + 1) = 50%). Each section scrolls its own content so
 * long citation lists or audit logs don't push other panels off-screen. */
.panel-section {
    border-bottom: 1px solid var(--border);
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.panel-section--grow { flex: 3 1 0; }
.panel-section > .panel-header { flex: 0 0 auto; }
.panel-section > .citations,
.panel-section > #session-analytics,
.panel-section > #knowledge-gaps,
.panel-section > .audit {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* Internal breathing room for the analytics + gaps content. */
.panel-section > #session-analytics,
.panel-section > #knowledge-gaps { padding: 8px; }

.panel-header {
    padding: 12px 16px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    display: flex; align-items: center; justify-content: space-between;
}
.panel-header__count { font-weight: 400; font-size: 10px; }

/* Camera (Phase 20) */
.camera-wrap { padding: 8px; max-height: 180px; overflow: hidden; }
.camera-preview {
    width: 100%; border-radius: var(--radius); max-height: 160px; object-fit: cover;
    background: var(--bg-primary); display: none;
}
.camera-preview--active { display: block; }
.camera-off { padding: 16px; text-align: center; color: var(--text-dim); font-size: 11px; }

/* Citations (Phase 21) */
.citations { flex: 1; overflow-y: auto; padding: 8px; }

.cite-card {
    padding: 10px; background: var(--bg-tertiary);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-bottom: 6px; transition: border-color var(--ease);
}
.cite-card:hover { border-color: var(--accent); }

.cite-card__head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cite-card__num {
    background: var(--accent); color: var(--text-inverse);
    width: 20px; height: 20px; border-radius: 0;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.cite-card__source {
    font-size: 11px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cite-card__score {
    margin-left: auto;
    font-size: 10px; color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
}
.cite-card__excerpt {
    font-size: 11px; color: var(--text-secondary);
    line-height: 1.5;
    font-family: 'JetBrains Mono', monospace;
    background: var(--bg-primary);
    padding: 6px 8px; border-radius: 0;
    /* Taller viewport so users can actually verify the retrieved chunk
     * text matches the answer. 80px showed ~3 lines and felt like the
     * citation was truncated; 240px comfortably shows ~12 lines before
     * scrolling and makes source-verification realistic. Paired with
     * a longer backend excerpt (see grounding.py) so the scroll view
     * actually has content to reveal. */
    max-height: 240px; overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Accessibility utility: hide from sight but keep the element in the
 * accessibility tree and DOM. Used for retained DOM nodes (e.g. the
 * camera <video> element) that JS still references after we remove a
 * panel section from the sidebar. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Citation thumbnail row — shown when the cited chunk has KB images */
.cite-card__images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}
.cite-card__thumb {
    display: inline-block;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    flex: 0 0 auto;
    transition: transform 0.1s ease, border-color 0.1s ease;
}
.cite-card__thumb:hover {
    transform: scale(1.05);
    border-color: var(--accent);
}
.cite-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cite-card__thumb-more {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 2px 6px;
    align-self: center;
}

/* Audit trail (Phase 22) */
.audit { flex: 1; overflow-y: auto; max-height: 160px; }
.audit__item {
    padding: 5px 16px;
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}
.audit__time { color: var(--text-secondary); }

/* ============================================================
   CONFIDENCE SCORE METER (Feature: Radial Gauge)
   ============================================================ */
.msg__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.confidence-meter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: meterIn 0.6s ease;
}

@keyframes meterIn {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

.confidence-svg { width: 38px; height: 38px; }

.confidence-arc {
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.confidence-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.confidence-value {
    font-size: 13px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.confidence-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Confidence wrapper (meter + info button + tooltip) */
.confidence-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* Info "i" button */
.confidence-info-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--text-dim);
    background: transparent;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.confidence-info-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 255, 136, 0.08);
}

/* Tooltip popup */
.confidence-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 12px 14px;
    width: 240px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transform: translateX(-50%) translateY(4px);
    pointer-events: none;
}
.confidence-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Tooltip arrow */
.confidence-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--border);
}

.confidence-tooltip__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-align: center;
}

.confidence-tooltip__row {
    display: grid;
    grid-template-columns: 1fr 60px 30px;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 10px;
    color: var(--text-secondary);
}

.confidence-tooltip__bar {
    height: 5px;
    background: var(--bg-primary);
    border-radius: 0;
    overflow: hidden;
}
.confidence-tooltip__fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.4s ease;
}

.confidence-tooltip__val {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
}

.confidence-tooltip__formula {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    font-size: 10px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    letter-spacing: -0.02em;
}

/* ============================================================
   SMART FOLLOW-UP SUGGESTIONS (Feature: Clickable Chips)
   ============================================================ */
.follow-ups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 0 2px;
    max-width: 90%;
    animation: msgIn 0.35s ease;
}

.follow-ups__label {
    font-size: 10px;
    color: var(--text-dim);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 2px;
}

.follow-up-chip {
    padding: 5px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-full);
    color: var(--accent);
    font-size: 11px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--ease);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.follow-up-chip:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(141, 233, 113, 0.15);
}

.follow-up-chip:active {
    transform: translateY(0);
}

/* ============================================================
   DOCUMENT HEALTH SCORE (Feature: Health Bar per Document)
   ============================================================ */
.doc-health-bar {
    height: 3px;
    background: var(--border);
    border-radius: 0;
    margin-top: 4px;
    overflow: hidden;
}

.doc-health-bar__fill {
    height: 100%;
    width: 0%;
    border-radius: 0;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   SESSION ANALYTICS (Feature: Live Stats Panel)
   ============================================================ */
.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 0;
}
.analytics-stat {
    text-align: center;
    padding: 6px 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.analytics-stat__value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    line-height: 1.2;
}
.analytics-stat__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-top: 2px;
}
.analytics-range {
    font-size: 10px;
    color: var(--text-dim);
    text-align: center;
    margin-top: 6px;
    font-family: 'JetBrains Mono', monospace;
}
.analytics-range strong { color: var(--text-secondary); }

/* ============================================================
   EXPORT BUTTON (Feature: Download Conversation)
   ============================================================ */
.btn-export {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--ease);
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-export:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}
.btn-logout {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--ease);
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-logout:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
    color: #ef4444;
}

/* ============================================================
   AUTO-TAG DOCUMENTS (Feature: Keyword Tags per Document)
   ============================================================ */
.doc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.doc-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--tag-color) 15%, transparent);
    color: var(--tag-color);
    border: 1px solid color-mix(in srgb, var(--tag-color) 30%, transparent);
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   CITATION DEEP-LINK (Feature: Click Source to Scroll)
   ============================================================ */
.citation-ref {
    cursor: pointer;
    transition: all 0.2s ease;
}
.citation-ref:hover {
    background: var(--accent);
    color: var(--text-inverse);
    border-radius: 0;
}
.cite-card--highlight {
    border-color: var(--accent) !important;
    box-shadow: 0 0 12px var(--accent-glow), inset 0 0 8px var(--accent-dim);
    animation: citeHighlight 2s ease;
}
@keyframes citeHighlight {
    0% { box-shadow: 0 0 20px var(--accent-glow); }
    100% { box-shadow: none; }
}

/* ============================================================
   HALLUCINATION HEATMAP (Feature: Citation Density Strip)
   ============================================================ */
.doc-heatmap {
    display: flex;
    gap: 1px;
    margin-top: 4px;
    height: 6px;
    border-radius: 0;
    overflow: hidden;
    background: var(--border);
}
.doc-heatmap__cell {
    flex: 1;
    min-width: 4px;
    transition: background 0.3s ease;
}
.doc-heatmap__cell--frozen { background: var(--bg-surface); }
.doc-heatmap__cell--cold   { background: #475569; }
.doc-heatmap__cell--warm   { background: var(--warning); }
.doc-heatmap__cell--hot    { background: var(--accent); box-shadow: 0 0 4px var(--accent-glow); }

/* ============================================================
   KNOWLEDGE GAP DETECTOR (Feature: Missing Topics Panel)
   ============================================================ */
.gaps-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gap-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--danger);
    font-size: 10px;
}
.gap-item__topic {
    color: var(--text-primary);
    font-weight: 500;
}
.gap-item__freq {
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
}
.gaps-suggest {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}
.gaps-suggest__title {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.gaps-suggest__item {
    font-size: 10px;
    color: var(--info);
    padding: 3px 6px;
    background: var(--info-dim);
    border-radius: var(--radius-sm);
    margin-bottom: 3px;
}
.gaps-suggest__item::before {
    content: '\u2191 ';
    font-weight: bold;
}

/* ============================================================
   COLLAPSIBLE SIDE PANELS
   ============================================================ */

/* Collapse toggle buttons */
.collapse-btn {
    position: absolute;
    z-index: 20;
    top: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background: var(--bg-tertiary);
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.collapse-btn:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 2px 8px var(--accent-glow);
    transform: scale(1.1);
}
.collapse-btn svg {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

/* Left sidebar collapse button — positioned at right edge */
.collapse-btn--left {
    right: 8px;
}

/* Right panel collapse button — positioned at left edge */
.collapse-btn--right {
    left: 8px;
}

/* Sidebar & Right Panel need relative for button positioning */
.sidebar,
.right-panel {
    position: relative;
}

/* Grid transition for smooth collapse */
.app {
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Sidebar collapsed --- */
.app--sidebar-collapsed {
    grid-template-columns: 0px 1fr 320px;
}
.app--sidebar-collapsed .sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    border-right: none;
    opacity: 0;
    pointer-events: none;
}
/* Floating re-expand button when sidebar is collapsed */
.sidebar-expand-btn {
    position: fixed;
    top: 68px;
    left: 0;
    z-index: 50;
    width: 28px;
    height: 56px;
    border-radius: 0 0;
    border: 1px solid var(--border-light);
    border-left: none;
    background: var(--bg-tertiary);
    color: var(--text-dim);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.25s ease;
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
}
.sidebar-expand-btn:hover {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: var(--accent);
    width: 34px;
}
.sidebar-expand-btn svg {
    flex-shrink: 0;
}
.app--sidebar-collapsed ~ .sidebar-expand-btn,
.app--sidebar-collapsed .sidebar-expand-btn {
    display: flex;
}

/* --- Right panel collapsed --- */
.app--panel-collapsed {
    grid-template-columns: 300px 1fr 0px;
}
.app--panel-collapsed .right-panel {
    width: 0;
    min-width: 0;
    overflow: hidden;
    border-left: none;
    opacity: 0;
    pointer-events: none;
}
/* Floating re-expand button when right panel is collapsed */
.panel-expand-btn {
    position: fixed;
    top: 68px;
    right: 0;
    z-index: 50;
    width: 28px;
    height: 56px;
    border-radius: 0 0 0 8px;
    border: 1px solid var(--border-light);
    border-right: none;
    background: var(--bg-tertiary);
    color: var(--text-dim);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.25s ease;
    box-shadow: -2px 0 8px rgba(0,0,0,0.15);
}
.panel-expand-btn:hover {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: var(--accent);
    width: 34px;
}
.panel-expand-btn svg {
    flex-shrink: 0;
}
.app--panel-collapsed ~ .panel-expand-btn,
.app--panel-collapsed .panel-expand-btn {
    display: flex;
}

/* --- Both collapsed --- */
.app--sidebar-collapsed.app--panel-collapsed {
    grid-template-columns: 0px 1fr 0px;
}

/* Sidebar/panel inner content fade */
.sidebar > *:not(.collapse-btn),
.right-panel > *:not(.collapse-btn) {
    transition: opacity 0.3s ease;
}
.app--sidebar-collapsed .sidebar > * {
    opacity: 0;
}
.app--panel-collapsed .right-panel > * {
    opacity: 0;
}

/* Light theme overrides for collapse buttons */
[data-theme="light"] .collapse-btn {
    background: #f8f9fa;
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 1px 4px rgba(28,28,40,0.06);
}
[data-theme="light"] .collapse-btn:hover {
    background: rgba(141, 233, 113, 0.06);
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(141, 233, 113, 0.12);
}
[data-theme="light"] .sidebar-expand-btn,
[data-theme="light"] .panel-expand-btn {
    background: #f8f9fa;
    border-color: rgba(0,0,0,0.1);
    box-shadow: 2px 0 10px rgba(28,28,40,0.08);
}
[data-theme="light"] .sidebar-expand-btn:hover,
[data-theme="light"] .panel-expand-btn:hover {
    background: rgba(141, 233, 113, 0.06);
    border-color: var(--accent);
    color: var(--accent);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ============================================================
   THEME TOGGLE BUTTON (Premium Sun/Moon Switch)
   ============================================================ */
.theme-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 0;
    border: 1.5px solid var(--border-light);
    background: var(--bg-tertiary);
    cursor: pointer;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
}
.theme-toggle:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-dim);
}
.theme-toggle__track {
    position: absolute;
    inset: 0;
    border-radius: 0;
    transition: background 0.4s ease;
}
.theme-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25), inset 0 -1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.theme-toggle__thumb::after {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.4s ease;
    box-shadow: none;
}
/* Moon state (dark theme active) */
[data-theme="dark"] .theme-toggle__thumb {
    left: 3px;
    background: linear-gradient(135deg, #94a3b8, #64748b);
}
[data-theme="dark"] .theme-toggle__thumb::after {
    background: var(--bg-tertiary);
    box-shadow: inset -3px -2px 0 0 #94a3b8;
    width: 12px;
    height: 12px;
    transform: translate(2px, -1px);
}
/* Sun state (light theme active) */
[data-theme="light"] .theme-toggle__thumb {
    left: calc(100% - 23px);
    background: linear-gradient(135deg, #fbbf24, #f97316);
    box-shadow: 0 0 8px rgba(251,191,36,0.5), 0 1px 4px rgba(0,0,0,0.15);
}
/* Sun rays */
[data-theme="light"] .theme-toggle__thumb::after {
    width: 4px;
    height: 4px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    box-shadow:
        8px 0 0 -1px rgba(251,191,36,0.6),
        -8px 0 0 -1px rgba(251,191,36,0.6),
        0 8px 0 -1px rgba(251,191,36,0.6),
        0 -8px 0 -1px rgba(251,191,36,0.6);
}
/* Stars on dark track */
.theme-toggle__stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s ease;
}
.theme-toggle__star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #e2e8f0;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
}
[data-theme="dark"] .theme-toggle__star { opacity: 1; }
[data-theme="light"] .theme-toggle__star { opacity: 0; }
.theme-toggle__star:nth-child(1) { top: 6px; left: 30px; }
.theme-toggle__star:nth-child(2) { top: 14px; left: 38px; width: 1.5px; height: 1.5px; }
.theme-toggle__star:nth-child(3) { top: 18px; left: 28px; width: 1px; height: 1px; }

.theme-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-right: 2px;
    transition: color 0.3s ease;
}

/* ============================================================
   Legacy [data-theme="light"] warm-ivory overrides — REMOVED.
   The new :root IS the SGN Industrial light theme.
   Dark mode now lives in [data-theme="dark"] at the top of this file.
   ============================================================ */

/* ---- Smooth transition on theme change ---- */
body,
.header, .sidebar, .main, .right-panel,
.input-area, .text-input, .btn-circle, .btn-send,
.msg__bubble, .cite-card, .cite-card__excerpt,
.upload, .doc-item, .doc-item__icon,
.analytics-stat, .follow-up-chip, .btn-export,
.confidence-tooltip, .confidence-info-btn,
.panel-section, .audit__item, .gap-item,
.camera-preview, .camera-off, .logo__icon {
    transition:
        background 0.45s cubic-bezier(0.4,0,0.2,1),
        color 0.45s cubic-bezier(0.4,0,0.2,1),
        border-color 0.45s cubic-bezier(0.4,0,0.2,1),
        box-shadow 0.45s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   MOBILE CLOSE BUTTON (inside sidebar/right-panel on mobile)
   ============================================================ */
.mobile-close-btn {
    display: none;
}

/* ============================================================
   BOTTOM NAVIGATION (mobile only — hidden on desktop)
   ============================================================ */
.bottom-nav {
    display: none;
}

/* ============================================================
   RESPONSIVE — Tablet (≤1100px)
   ============================================================ */
@media (max-width: 1100px) {
    .app {
        grid-template-columns: 260px minmax(0, 1fr);
        /* Keep height synced with root .app rule so the 100svh benefit
           reaches tablets in the 901–1100px band */
        height: 100vh;
        height: 100svh;
    }
    .app--sidebar-collapsed { grid-template-columns: 0px minmax(0, 1fr); }
    .right-panel { display: none; }
    .panel-expand-btn { display: none !important; }
    .collapse-btn--right { display: none; }
}

/* ============================================================
   RESPONSIVE — Mobile (≤767px)
   Full mobile-first layout with bottom tab navigation.
   ============================================================ */
@media (max-width: 900px) {

    /* ------ Layout ------ */
    .app {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 52px 1fr;
        /* The bottom tab bar (.mobile-bottom-nav) is position:fixed, so it
           does NOT consume grid space. We therefore size .app to the full
           viewport and let .main reserve its own padding-bottom for the tab
           bar. (Previously we subtracted 64px here which — combined with the
           --kb-height padding in .input-area and Capacitor's resize:"native"
           keyboard — shrank the content area and floated the input row mid-
           screen when the keyboard was open.) */
        height: 100vh;
        height: 100svh;   /* small viewport height, stable across keyboard */
        padding-top: env(safe-area-inset-top, 0px);
        /* Fill the safe-area-inset-top region with the header's navy color
           so the status bar icons (time, battery) blend straight into the
           FIKA header instead of showing a black/transparent strip above it.
           The .main + .right-panel children have their own backgrounds, so
           this only paints the padding-top area. */
        background: var(--navy-900);
    }

    /* Extra guard: prevent any rogue fixed-width descendant from blowing
       out the viewport on the smallest phones (matches Task 1 screenshot). */
    html, body { overflow-x: hidden; max-width: 100vw; }
    .app > * { min-width: 0; max-width: 100vw; }

    /* Right-panel must NOT participate in flow on mobile, even if a JS
       state toggles its visibility. The existing rule below makes it
       position:fixed, but this `display:none` fallback is a safety net
       for browsers that somehow miss that block. */
    .right-panel:not(.mobile-panel-open) { pointer-events: none; }

    /* ------ Header compact ------ */
    .header { padding: 0 12px; }
    .header__left { gap: 6px; }
    .header__right { gap: 8px; }
    .logo { gap: 6px; }
    .logo__badge { display: none !important; }
    .header-doc-status { display: none !important; }
    .theme-label { display: none !important; }
    .status__text { display: none !important; }
    .btn-export, .btn-logout { padding: 4px 8px; font-size: 10px; }
    /* Claude-mobile layout: show the hamburger on the left and HIDE the
       desktop gear icon — Settings moves into the drawer footer. */
    .hamburger { display: flex !important; }
    .btn-settings--desktop { display: none !important; }

    /* ------ Desktop collapse/expand buttons hidden ------ */
    .collapse-btn,
    .sidebar-expand-btn,
    .panel-expand-btn { display: none !important; }

    /* ------ Sidebar: full-screen overlay panel ------ */
    .sidebar {
        position: fixed !important;
        top: 52px;
        left: 0; right: 0;
        bottom: calc(52px + env(safe-area-inset-bottom, 0px));
        z-index: 300;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease;
        opacity: 0;
        border-right: none !important;
        overflow: hidden;
        pointer-events: none;
    }
    .sidebar.mobile-panel-open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* ------ Right panel: full-screen overlay panel ------ */
    .right-panel {
        position: fixed !important;
        top: 52px;
        left: 0; right: 0;
        bottom: calc(52px + env(safe-area-inset-bottom, 0px));
        z-index: 300;
        width: 100% !important;
        display: flex !important;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease;
        opacity: 0;
        border-left: none !important;
        overflow: hidden;
        pointer-events: none;
    }
    .right-panel.mobile-panel-open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
        overflow-y: auto;
    }

    /* Sources tab: show only the citations section */
    .right-panel--sources-mode .panel-section:not(.panel-section--citations) {
        display: none !important;
    }
    /* Analytics tab: hide citations, show camera + analytics + gaps + audit */
    .right-panel--analytics-mode .panel-section--citations {
        display: none !important;
    }
    /* In sources mode, citations section fills the full panel */
    .right-panel--sources-mode .panel-section--citations {
        flex: 1;
        overflow-y: auto;
    }

    /* ------ Main chat area ------ */
    .main {
        grid-column: 1;
        height: 100%;
        overflow: hidden;
        padding-bottom: 0;
    }
    /* Chat scroll needs padding so content doesn't hide behind fixed input+nav */
    .main > .chat {
        padding-bottom: calc(70px + 52px + env(safe-area-inset-bottom, 0px));
    }

    /* ------ Mobile close button (shown inside panels) ------ */
    .mobile-close-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        position: absolute;
        top: 10px;
        right: 12px;
        z-index: 10;
        background: var(--bg-elevated);
        border: 1px solid var(--border-light);
        border-radius: var(--radius-full);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 500;
        font-family: var(--font-body);
        padding: 6px 12px;
        cursor: pointer;
        transition: all var(--ease);
        min-height: 36px;
    }
    .mobile-close-btn:hover, .mobile-close-btn:active {
        background: var(--accent-dim);
        border-color: var(--accent);
        color: var(--accent);
    }

    /* ------ Input area: FIXED above tab bar, 0 gap ------ */
    .input-area {
        position: fixed;
        bottom: calc(52px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        z-index: 401;
        display: flex;
        align-items: center;
        padding: 8px 0;
        margin: 0;
        border-top: 1px solid var(--border);
        background: var(--bg-elevated);
    }
    .input-area > .input-row,
    .input-area > .starter-queries { max-width: 100%; width: 100%; }
    /* Issue 1+3+7: Input pill — white fill, visible border, nothing clipped */
    .input-row.input-pill {
        display: flex;
        align-items: center;
        gap: 4px;
        background: #FFFFFF;
        border: 1.5px solid #D1D5DB;
        border-radius: 26px;
        padding: 3px 4px 3px 3px;
        margin: 0 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        min-height: 48px;
        box-sizing: border-box;
        overflow: visible;
    }
    [data-theme="dark"] .input-row.input-pill {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.15);
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .input-pill__plus,
    .input-pill__send {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        cursor: pointer;
        transition: background var(--ease), transform var(--ease);
    }
    .input-pill__plus {
        background: transparent;
        color: #9CA3AF;
        width: 40px; height: 40px;
    }
    [data-theme="dark"] .input-pill__plus {
        background: transparent;
        color: rgba(255,255,255,0.5);
    }
    .input-pill__plus:active { background: var(--accent-dim); color: var(--accent); transform: scale(0.94); }
    /* Issue 1: Send button — fully inside pill, never clipped */
    .input-pill__send {
        background: var(--accent, #8DE971);
        color: #FFFFFF;
        padding: 0;
        font-size: 0;
        width: 40px; height: 40px;
    }
    .input-pill__send:active { background: var(--accent-hover, #C04709); transform: scale(0.94); }
    .input-row.input-pill .input-wrap {
        flex: 1;
        min-width: 0;
    }
    .input-pill__text {
        width: 100%;
        min-width: 0;
        border: 0;
        background: transparent;
        font-size: 16px;   /* prevents iOS auto-zoom on focus */
        padding: 6px 4px;
        color: var(--text-primary);
        outline: none;
    }
    .input-pill__text::placeholder { color: var(--text-dim); }

    /* .input-plus-menu desktop rules apply at all breakpoints — the mobile
       duplicate that used to live here was removed when positioning moved
       to JavaScript (see wireInputPlus in app.js). */

    /* Follow-up chips are capped at 300px on desktop for readability, but
       that overflows 320px phones with padding. Let them fill the width. */
    .follow-up-chip { max-width: 100%; }
    .text-input {
        font-size: 16px; /* prevents iOS zoom on focus */
        padding: 12px 14px;
        min-height: 48px;
        min-width: 0; /* allow flex shrink so btn-send stays visible */
    }
    .btn-send {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 12px 16px;
        min-height: 48px;
        font-size: 14px;
    }
    .btn-circle {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    /* ------ Chat messages wider on mobile ------ */
    .msg { max-width: 94%; }
    /* REMOVED justify-content: flex-end — it was pinning messages to the
       bottom of the flex container, which BROKE upward scrolling. Users
       couldn't scroll up to see previous messages. Instead, we scroll to
       the bottom via JS after each addMsg() (dom.chat.scrollTop =
       dom.chat.scrollHeight), which achieves the same "latest message
       at the bottom" UX without breaking scroll-up. */
    .chat { padding: 12px; gap: 10px; }

    /* ------ Starter queries: sits above fixed input area ------ */
    .starter-queries { padding: 0 0 4px; margin-top: auto; flex-shrink: 0; }
    /* Issue 2: "TRY ASKING:" — WCAG AA compliant contrast */
    .starter-queries__label {
        color: #374151;
        font-size: 11px;
        font-weight: 700;
        padding-left: 14px;
    }
    [data-theme="dark"] .starter-queries__label {
        color: rgba(255,255,255,0.75);
    }
    /* Issue 2: Constrain chips — no overflow/clipping */
    .starter-queries__grid {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding: 0 14px;
        scrollbar-width: none;
        /* Fade mask on right edge to hint scrollability */
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }
    .starter-queries__grid::-webkit-scrollbar { display: none; }
    .starter-chip {
        font-size: 12px;
        padding: 8px 14px;
        flex-shrink: 0;
        white-space: nowrap;
        max-width: calc(100vw - 60px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Legacy .toast removed — all notifications now flow through the
       FikaUI.toast() bottom-sheet pill (see frontend/js/ui-utils.js).
       Any stray .toast element is hidden so it cannot float above the
       header like "Could not capture photo" in the earlier screenshot. */
    .toast { display: none !important; }

    /* ------ Sidebar head padding for mobile close button ------ */
    .sidebar__head { padding-top: 52px; }

    /* Right panel no longer needs top margin: the .header is hidden while
       a panel is open (via html[data-overlay="panel"]), so the panel can
       start flush with the top. */
    .right-panel > .panel-section:first-of-type { margin-top: 0; }
    .sidebar__head { padding-top: 12px !important; }
    /* On mobile the sidebar only shows KB (Chats live in the hamburger
       drawer). Hide the desktop tabs + chats panel. */
    .sidebar__tabs { display: none !important; }
    .sidebar__panel--chats { display: none !important; }
    .sidebar__panel--kb { display: flex !important; }
    /* Hide the mobile close button inside .sidebar and .right-panel —
       users close via the bottom tab bar (tap Chat again) instead. This
       also removes the 48px of reserved top space that the close button
       used to need. */
    .mobile-close-btn { display: none !important; }

    /* When any mobile overlay panel is open (sidebar docs, right-panel
       citations, chats-drawer), hide the main 52px navy header so the
       panel fills from the top. Without this we see a dead navy strip
       above the panel — which the user flagged as an ugly "black bar"
       on the Source Citations panel. */
    html[data-overlay="panel"] .header { display: none !important; }
    html[data-overlay="panel"] .input-area { display: none !important; }
    html[data-overlay="panel"] .app {
        grid-template-rows: 0 1fr;
    }
    html[data-overlay="panel"] .sidebar,
    html[data-overlay="panel"] .right-panel,
    html[data-overlay="panel"] .chats-drawer {
        top: env(safe-area-inset-top, 0px);
    }

    /* ------ Upload zone: larger on mobile ------ */
    .upload { padding: 20px 16px; }
    .upload__icon { font-size: 28px; }
    .upload__text { font-size: 14px; }

    /* ------ Doc items: larger touch targets ------ */
    .doc-item { padding: 12px 10px; }
    .doc-item__remove { width: 32px; height: 32px; font-size: 16px; }

    /* ------ Citations larger on mobile ------ */
    .cite-card { padding: 12px; margin-bottom: 8px; }
    .cite-card__excerpt { font-size: 12px; max-height: 180px; }

    /* ------ Follow-up chips larger ------ */
    .follow-up-chip { padding: 8px 14px; font-size: 12px; }

    /* ------ Confidence tooltip: positioned better on mobile ------ */
    .confidence-tooltip {
        left: 0;
        right: 0;
        transform: none;
        width: auto;
        bottom: calc(100% + 6px);
    }
    .confidence-tooltip.show { transform: none; }

    /* ====== BOTTOM NAVIGATION (icons + labels) ====== */
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0; right: 0;
        height: calc(52px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--bg-elevated);
        border-top: 1px solid var(--border);
        box-shadow: none;
        z-index: 400;
        align-items: stretch;
    }
    /* ====== Issue 1+4: Show labels + clear active state ====== */
    .bottom-nav__btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: var(--text-dim);
        cursor: pointer;
        padding: 6px 4px;
        position: relative;
        transition: all var(--ease);
        -webkit-tap-highlight-color: transparent;
        min-height: 44px;
    }
    .bottom-nav__label {
        display: block;
        font-family: var(--font-headline);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        line-height: 1;
        color: inherit;
    }
    .bottom-nav__icon {
        width: 20px; height: 20px;
        stroke: currentColor;
        fill: none;
        transition: stroke var(--ease), fill var(--ease);
        flex-shrink: 0;
    }
    .bottom-nav__btn:hover { color: var(--text-primary); }
    /* Issue 4: Active tab — filled icon + accent color + indicator bar */
    .bottom-nav__btn--active {
        color: var(--accent);
        background: none;
    }
    .bottom-nav__btn--active::before {
        content: '';
        position: absolute;
        top: 0; left: 20%; right: 20%;
        height: 3px;
        background: var(--accent);
        border-radius: 0 0 3px 3px;
    }
    .bottom-nav__btn--active .bottom-nav__icon {
        stroke: var(--accent);
        fill: rgba(141, 233, 113, 0.15);
    }
    .bottom-nav__btn--active .bottom-nav__label {
        color: var(--accent);
        font-weight: 700;
    }

    /* ====== Issue 5: Badge = red (not orange) ====== */
    .bottom-nav__badge {
        position: absolute;
        top: 2px;
        right: calc(50% - 18px);
        min-width: 16px;
        height: 16px;
        background: #EF4444;
        color: #fff;
        border-radius: 8px;
        font-family: var(--font-headline);
        font-size: 9px;
        font-weight: 700;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        line-height: 1;
    }
    .bottom-nav__badge:not(:empty) { display: flex; }

    /* Dark theme bottom nav */
    [data-theme="dark"] .bottom-nav {
        background: var(--navy-900);
        border-top-color: rgba(255,255,255,0.08);
    }
    [data-theme="dark"] .bottom-nav__btn { color: rgba(255, 255, 255, 0.45); }
    [data-theme="dark"] .bottom-nav__btn--active {
        background: none;
        color: var(--accent);
    }

    /* ============================================================
       Claude-style CHATS DRAWER (mobile only)
       Slides in from the LEFT when the hamburger is tapped.
       Contains: New chat button, chat history list, Settings.
       ============================================================ */
    .chats-drawer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        bottom: calc(52px + env(safe-area-inset-bottom, 0px));
        z-index: 320;
        background: var(--bg-secondary);
        border-right: none;
        display: flex;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        pointer-events: none;
        padding-top: env(safe-area-inset-top, 0px);
        box-shadow: none;
    }
    .chats-drawer.mobile-panel-open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }
    .chats-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }
    .chats-drawer__title {
        font-family: var(--font-headline);
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
    }
    .chats-drawer__close {
        width: 32px; height: 32px;
        border: 0;
        background: transparent;
        color: var(--text-secondary);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    .chats-drawer__close:active { background: var(--bg-tertiary); }
    .chats-drawer__new {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 12px 14px;
        padding: 12px 16px;
        border: 0;
        border-radius: 999px;
        background: var(--accent, #8DE971);
        color: #FFFFFF;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        flex-shrink: 0;
    }
    .chats-drawer__new:active { background: var(--accent-hover, #C04709); }
    .chats-drawer__list {
        flex: 1;
        overflow-y: auto;
        padding: 4px 8px 12px;
    }
    .chats-drawer__empty {
        padding: 24px 14px;
        text-align: center;
        color: var(--text-dim);
        font-size: 13px;
        line-height: 1.5;
    }
    .chats-drawer__footer {
        border-top: 1px solid var(--border);
        padding: 8px;
        flex-shrink: 0;
    }
    .chats-drawer__item {
        display: flex;
        /* Center the icon + label group in the drawer footer bar */
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 12px 14px;
        border: 0;
        background: transparent;
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        border-radius: 8px;
    }
    .chats-drawer__item:active { background: var(--bg-tertiary); }

    /* Chat cards in the drawer list */
    .chat-card {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 10px;
        cursor: pointer;
        margin-bottom: 2px;
    }
    .chat-card:active { background: var(--bg-tertiary); }
    .chat-card--active { background: var(--bg-elevated); }
    .chat-card__main { flex: 1; min-width: 0; }
    .chat-card__title {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .chat-card__meta {
        font-size: 11px;
        color: var(--text-dim);
        margin-top: 2px;
    }
    .chat-card__actions {
        display: flex;
        gap: 2px;
        flex-shrink: 0;
    }
    .chat-card__btn {
        width: 28px; height: 28px;
        border: 0;
        background: transparent;
        color: var(--text-dim);
        cursor: pointer;
        border-radius: 6px;
        font-size: 14px;
    }
    .chat-card__btn:active { background: var(--bg-tertiary); color: var(--text-primary); }
    .chat-card__btn--danger:active { color: var(--danger, #D33); }
}

/* ============================================================
   CLAUDE-STYLE DRAWER / HAMBURGER — DESKTOP OVERRIDES
   Hide the mobile-only hamburger + drawer at wide widths.
   ============================================================ */
@media (min-width: 901px) {
    .chats-drawer { display: none !important; }
    .hamburger { display: none !important; }
    .header__left { gap: 12px; }
}

/* ============================================================
   FIKA NEW COMPONENTS (UC-048)
   ============================================================ */

/* ---- Refusal Response (Phase B2) ---- */
.msg--refusal .msg__bubble {
    background: var(--danger-dim);
    border: 1px solid var(--danger);
    border-left: 4px solid var(--danger);
    border-bottom-left-radius: 4px;
}
.refusal-icon { font-size: 20px; margin-bottom: 6px; }
.refusal-text {
    font-size: 13px;
    color: var(--danger);
    font-weight: 500;
    line-height: 1.5;
}
.refusal-reason {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
    font-family: 'JetBrains Mono', monospace;
}
[data-theme="light"] .msg--refusal .msg__bubble {
    background: rgba(220, 38, 38, 0.06);
    border-color: #dc2626;
}

/* ---- Partial Info Notice (Phase B3) ---- */
.partial-info-notice {
    font-size: 11px;
    color: var(--warning);
    background: var(--warning-dim);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin-top: 6px;
    width: 100%;
    line-height: 1.5;
    box-sizing: border-box;
}
.partial-info-notice::before { content: 'ℹ '; font-weight: 700; }

/* ---- Confidence Notices (Phase B1) ---- */
.conf-verify-notice {
    font-size: 10px;
    color: var(--warning);
    margin-top: 4px;
    font-style: italic;
    width: 100%;
}
.conf-low-warning {
    font-size: 10px;
    color: var(--danger);
    margin-top: 4px;
    font-style: italic;
    width: 100%;
}

/* ---- Citation Color-Coding (Phase C) ---- */
.cite-card--neutral  { border-left: 3px solid var(--border); }
.cite-card--high     { border-left: 3px solid var(--accent); }
.cite-card--moderate { border-left: 3px solid var(--warning); }
.cite-card--low      { border-left: 3px solid var(--danger); }

.cite-card--neutral .cite-card__num  { background: var(--surface-2); color: var(--text-secondary); }
.cite-card--high .cite-card__num     { background: var(--accent); color: var(--text-inverse); }
.cite-card--moderate .cite-card__num { background: var(--warning); color: var(--text-inverse); }
.cite-card--low .cite-card__num      { background: var(--danger); color: var(--text-inverse); }

.cite-card__score--high { color: var(--accent); }
.cite-card__score--moderate { color: var(--warning); }
.cite-card__score--low { color: var(--danger); }

/* ---- Document Status Badges (Phase D) ---- */
.doc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
    vertical-align: middle;
}
.doc-status-badge--processing {
    background: var(--warning-dim);
    color: var(--warning);
    animation: pulse 1.2s ease-in-out infinite;
}
.doc-status-badge--ready {
    background: var(--accent-dim);
    color: var(--accent);
}
.doc-status-badge--error {
    background: var(--danger-dim);
    color: var(--danger);
}
.doc-item--pending { opacity: 0.7; }

/* ---- Safety-Critical Formatting (Phase E) ---- */
.safety-block {
    background: var(--warning-dim);
    border: 1px solid rgba(251,191,36,0.35);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 8px 0;
}
.safety-block__label {
    font-size: 10px;
    font-weight: 700;
    color: var(--warning);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.safety-quote {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-primary);
    border-left: 3px solid var(--warning);
    padding-left: 10px;
    margin: 0;
    line-height: 1.6;
    white-space: pre-wrap;
}
[data-theme="light"] .safety-block { background: rgba(251,191,36,0.08); border-color: rgba(161,121,0,0.25); border-left-color: #d97706; }
[data-theme="light"] .safety-quote { color: var(--text-primary); border-left-color: #d97706; }

/* ---- Response Feedback Widget (Phase F) ---- */
.msg-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.feedback-btn {
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all var(--ease);
    color: var(--text-dim);
}
.feedback-btn:hover { background: var(--bg-elevated); border-color: var(--border-accent); }
.feedback-btn--up.feedback-btn--selected { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.feedback-btn--down.feedback-btn--selected { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }
.feedback-btn:disabled { opacity: 0.5; cursor: default; }
.feedback-sent { font-size: 10px; color: var(--text-dim); font-style: italic; }
[data-theme="light"] .feedback-btn { border-color: rgba(0,0,0,0.12); color: var(--text-secondary); }
[data-theme="light"] .feedback-btn:hover { background: rgba(141, 233, 113, 0.06); }

/* Deep Research button — appears alongside feedback buttons */
.deep-research-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--ease);
    margin-left: 6px;
}
.deep-research-btn:hover {
    background: var(--accent);
    color: #fff;
}
.deep-research-btn:disabled {
    opacity: 0.5;
    cursor: default;
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text-dim);
}
[data-theme="light"] .deep-research-btn {
    color: var(--accent);
    background: rgba(141, 233, 113, 0.06);
    border-color: var(--accent);
}
[data-theme="light"] .deep-research-btn:hover {
    background: var(--accent);
    color: #fff;
}

/* ---- Starter Queries Panel (Phase G1) ---- */
.starter-queries {
    padding: 0 clamp(16px, 4vw, 40px) 16px;
    animation: msgIn 0.35s ease;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    box-sizing: border-box;
}
.starter-queries__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.starter-queries__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.starter-chip {
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    line-height: 1.4;
    transition: all var(--ease);
    font-family: inherit;
}
.starter-chip:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(141, 233, 113,0.1);
}
[data-theme="light"] .starter-chip { background: #f8f9fa; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .starter-chip:hover { background: rgba(141, 233, 113, 0.06); border-color: var(--accent); }

/* ---- Toast Notifications (Phase G2) ---- */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    max-width: 360px;
    line-height: 1.4;
    box-shadow: var(--shadow-md);
    animation: toastIn 0.3s ease;
    pointer-events: none;
    font-family: inherit;
}
.toast--out { animation: toastOut 0.4s ease forwards; }
@keyframes toastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { to { opacity:0; transform:translateY(10px); } }
.toast--error   { background: var(--danger-dim); border: 1px solid var(--danger); color: var(--danger); }
.toast--warning { background: var(--warning-dim); border: 1px solid var(--warning); color: var(--warning); }
.toast--success { background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent); }
[data-theme="light"] .toast--error   { background: rgba(220,38,38,0.08); border-color: #dc2626; color: #b91c1c; }
[data-theme="light"] .toast--warning { background: rgba(217,119,6,0.08); border-color: #d97706; color: #92400e; }
[data-theme="light"] .toast--success { background: rgba(22,163,74,0.08); border-color: #16a34a; color: #15803d; }

/* ---- Settings Button (header) ---- */
.btn-settings {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 6px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--ease), background var(--ease);
    flex-shrink: 0;
}
.btn-settings:hover { color: var(--text-primary); background: var(--surface-2); }

/* ---- Settings Overlay + Glass Modal ---- */
.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}
.settings-overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.settings-modal {
    background: rgba(18, 20, 32, 0.82);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0;
    width: 100%;
    max-width: 460px;
    max-height: calc(100svh - 32px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 64px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    animation: slideUp 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Internal scroll so the body can overflow while the header stays pinned */
.settings-modal__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}
[data-theme="light"] .settings-modal {
    background: rgba(255, 255, 255, 0.80);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 24px 48px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
}
@keyframes slideUp { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.settings-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .settings-modal__header { border-bottom-color: rgba(0, 0, 0, 0.07); }

.settings-modal__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.settings-modal__close {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    width: 28px;
    height: 28px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background var(--ease), color var(--ease);
}
[data-theme="light"] .settings-modal__close { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.07); }
.settings-modal__close:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
[data-theme="light"] .settings-modal__close:hover { background: rgba(0,0,0,0.08); }

.settings-modal__body { padding: 18px 20px 22px; }

.settings-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 12px;
    opacity: 0.8;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
}
.settings-row__info { display: flex; flex-direction: column; gap: 3px; }
.settings-row__label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.settings-row__desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* Settings toggle — <button role="switch"> */
.settings-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 0;
    outline: none;
}
.settings-toggle:focus-visible .settings-toggle__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.settings-toggle__track {
    display: flex;
    align-items: center;
    width: 46px;
    height: 26px;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 0;
    padding: 3px;
    transition: background 0.25s ease, border-color 0.25s ease;
    position: relative;
}
[data-theme="light"] .settings-toggle__track {
    background: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.12);
}
.settings-toggle__thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.25s ease;
    flex-shrink: 0;
}
[data-theme="light"] .settings-toggle__thumb { background: rgba(0,0,0,0.3); }
.settings-toggle[aria-checked="true"] .settings-toggle__track {
    background: rgba(141, 233, 113,0.25);
    border-color: var(--accent);
}
.settings-toggle[aria-checked="true"] .settings-toggle__thumb {
    transform: translateX(20px);
    background: var(--accent);
    box-shadow: 0 1px 8px rgba(141, 233, 113,0.5);
}

/* ---- Per-message Speaker Button ---- */
.msg-speak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    opacity: 0.35;
    padding: 2px 4px;
    border-radius: 0;
    margin-left: 6px;
    vertical-align: middle;
    transition: opacity var(--ease);
    line-height: 1;
}
.msg__bubble:hover .msg-speak-btn,
.msg-speak-btn:hover {
    opacity: 0.85;
}
/* Hide the orphan speaker button while the agent bubble is still empty.
   addMsg('agent', '') is called BEFORE the first stream token arrives
   (see app.js:925, app.js:1257) — without this rule the user briefly
   sees an empty box containing just a 🔊 icon, which looks like a
   broken render. As soon as the first <p>/text element streams in
   alongside the button, :only-child stops matching and the icon
   becomes visible next to the answer. */
.msg--agent .msg__bubble > .msg-speak-btn:only-child {
    display: none;
}

/* ---- Edit-user-message (Claude-style) ----------------------- */
/* Makes the user bubble a positioning context so the pencil can
   absolute-position to the top-right corner without affecting the
   bubble's own flex layout. */
.msg--user { position: relative; }

.msg__edit-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    color: var(--text, inherit);
    opacity: 0;
    transition: opacity var(--ease, 0.15s), background var(--ease, 0.15s);
}
.msg--user:hover .msg__edit-btn,
.msg__edit-btn:focus-visible {
    opacity: 0.85;
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.05));
    border-color: var(--border, transparent);
}
/* Touch devices (no hover) — keep the icon visible so users can find it. */
@media (hover: none) { .msg__edit-btn { opacity: 0.55; } }
/* While the editor is active the pencil would be redundant. */
.msg--editing .msg__edit-btn { display: none; }

.msg__edit-input {
    display: block;
    width: 100%;
    min-height: 2em;
    resize: vertical;
    font: inherit;
    color: inherit;
    background: var(--bg-tertiary, var(--bg-secondary, transparent));
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    box-sizing: border-box;
}
.msg__edit-input:focus {
    outline: 2px solid var(--accent, currentColor);
    outline-offset: 1px;
    border-color: transparent;
}

.msg__edit-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    justify-content: flex-end;
}
/* Self-contained button styles so the chat page doesn't need admin.css.
   Shape matches the rest of the in-chat controls (muted, compact). */
.msg__edit-save,
.msg__edit-cancel {
    font: inherit;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-tertiary, transparent);
    color: inherit;
    transition: background var(--ease, 0.15s), border-color var(--ease, 0.15s);
}
.msg__edit-save {
    background: var(--accent, #8DE971);
    border-color: var(--accent, #8DE971);
    color: var(--bg, #030304);
    font-weight: 600;
}
.msg__edit-save:hover  { background: var(--accent-hover, var(--accent)); }
.msg__edit-cancel:hover { background: var(--bg-secondary, transparent); }
.msg__edit-save:focus-visible,
.msg__edit-cancel:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ============================================================
   ═══════ SGN INDUSTRIAL PRIMITIVES ═══════
   Reusable design primitives matching the SGN mockups.
   Brutalist, sharp, uppercase labels, border-left accents.
   ============================================================ */

/* Tiny uppercase label — above cards, section heads, chips */
.sgn-label {
    font-family: var(--font-headline);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    line-height: 1;
}
.sgn-label--accent { color: var(--accent); }
.sgn-label--on-navy { color: rgba(255, 255, 255, 0.6); }
.sgn-label--micro { font-size: 10px; letter-spacing: 0.15em; }

/* Headline — Nunito bold, tight tracking (Corporative Sans Rounded proxy) */
.sgn-headline {
    font-family: var(--font-headline);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.1;
}
.sgn-headline--xl { font-size: clamp(36px, 6vw, 72px); font-weight: 900; }
.sgn-headline--lg { font-size: clamp(28px, 4vw, 44px); }
.sgn-headline--md { font-size: 20px; }
.sgn-headline--sm { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Card — white surface with accent border-left */
.sgn-card {
    background: var(--bg-secondary);
    border-left: 4px solid var(--navy-700);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--ease), box-shadow var(--ease);
}
.sgn-card--accent { border-left-color: var(--accent); }
.sgn-card--navy {
    background: var(--navy-800);
    color: var(--text-on-navy);
    border-left-color: var(--accent);
}
.sgn-card--navy .sgn-label { color: rgba(255, 255, 255, 0.6); }
.sgn-card--navy .sgn-headline { color: #fff; }

/* Button primitives — can augment existing .btn */
.sgn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-headline);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 14px 28px;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: all var(--ease);
    text-decoration: none;
    white-space: nowrap;
}
.sgn-btn--primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 6px 6px 0 var(--navy-900);
}
.sgn-btn--primary:hover {
    background: var(--accent-hover);
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--navy-900);
}
.sgn-btn--primary:active {
    transform: translate(0, 0);
    box-shadow: 2px 2px 0 var(--navy-900);
}
.sgn-btn--ghost {
    background: transparent;
    color: var(--navy-800);
    border: 2px solid var(--navy-800);
}
.sgn-btn--ghost:hover {
    background: var(--navy-800);
    color: #fff;
}

/* Stat block — bento grid cell */
.sgn-stat {
    background: var(--bg-tertiary);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
    transition: background var(--ease);
    border-bottom: 4px solid var(--navy-700);
}
.sgn-stat--accent { border-bottom-color: var(--accent); }
.sgn-stat:hover { background: var(--surface-highest); }
.sgn-stat__icon {
    font-size: 22px;
    color: var(--text-secondary);
    opacity: 0.8;
    line-height: 1;
}
.sgn-stat__value {
    font-family: var(--font-headline);
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1;
    margin-top: 4px;
}
.sgn-stat__label {
    font-family: var(--font-headline);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* Source chip — used inside chat citations */
.sgn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--navy-700);
    color: #fff;
    font-family: var(--font-headline);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 0;
}
.sgn-chip--accent { background: var(--accent); }
.sgn-chip--ghost {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* Grounding confidence meter */
.sgn-meter {
    width: 100%;
    height: 6px;
    background: var(--surface-highest);
    overflow: hidden;
    border-radius: 0;
}
.sgn-meter__fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.4s ease;
}

/* Asymmetric bento grid helper */
.sgn-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
.sgn-bento > .span-8 { grid-column: span 8; }
.sgn-bento > .span-6 { grid-column: span 6; }
.sgn-bento > .span-4 { grid-column: span 4; }
.sgn-bento > .span-3 { grid-column: span 3; }
@media (max-width: 900px) {
    .sgn-bento > [class*="span-"] { grid-column: span 12; }
}

/* ============================================================
   MOBILE BOTTOM NAV — 4-tab industrial nav
   Visible only on <=600px screens. Pages opt in by including
   the <nav class="mobile-bottom-nav"> markup.
   ============================================================ */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 72px;
    background: var(--bg-secondary);
    border-top: 4px solid var(--navy-700);
    box-shadow: 0 -4px 20px rgba(0, 12, 33, 0.06);
    display: none;
    justify-content: space-around;
    align-items: stretch;
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-family: var(--font-headline);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--ease);
}
.mobile-bottom-nav__item svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}
.mobile-bottom-nav__item:hover {
    background: rgba(141, 233, 113, 0.05);
    color: var(--text-primary);
}
.mobile-bottom-nav__item--active {
    background: var(--bg-tertiary);
    color: var(--accent);
}
[data-theme="dark"] .mobile-bottom-nav {
    background: var(--navy-900);
    border-top-color: var(--accent);
}
[data-theme="dark"] .mobile-bottom-nav__item {
    color: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .mobile-bottom-nav__item--active {
    background: rgba(141, 233, 113, 0.1);
    color: var(--accent);
}

@media (max-width: 600px) {
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    /* Push content above the nav — 100svh so the URL bar collapse doesn't
       punch the chat input below the visible viewport */
    .app {
        height: calc(100vh - 72px - env(safe-area-inset-bottom));
        height: calc(100svh - 72px - env(safe-area-inset-bottom));
    }
}

/* ============================================================
   MOBILE REFINEMENTS — 44px touch targets, full-width cards
   ============================================================ */
@media (max-width: 600px) {
    .sgn-card { padding: 20px 16px; }
    .sgn-btn { padding: 14px 20px; min-height: 48px; }
    .sgn-headline--xl { font-size: 40px; }
    .sgn-headline--lg { font-size: 28px; }
    .text-input { min-height: 44px; font-size: 16px; }  /* 16px prevents iOS zoom */
    .btn-circle { min-width: 44px; min-height: 44px; }
    .btn-send { min-height: 44px; }

    /* Push header below status bar / Dynamic Island / notch */
    .header {
        padding-top: env(safe-area-inset-top, 0px);
        min-height: calc(56px + env(safe-area-inset-top, 0px));
        padding-left: 10px;
        padding-right: 10px;
    }
    .header__right { gap: 6px; }
    /* Free up the header: hide non-essential status/badges entirely on
       small phones so the remaining buttons never wrap or clip. */
    .header-doc-status,
    .status,
    .llm-badge { display: none !important; }
    /* Compensate grid row for taller header */
    .app {
        grid-template-rows: calc(56px + env(safe-area-inset-top, 0px)) 1fr;
    }
}

/* ============================================================
   RESPONSIVE — narrow phones (≤480px)
   iPhone SE, Galaxy A-series, older Androids
   ============================================================ */
@media (max-width: 480px) {
    .header { padding-left: 8px; padding-right: 8px; }
    .header__right { gap: 4px; }
    .btn-admin { display: none !important; }   /* hide admin link on tiny phones */
    .chat { padding: 12px 10px; }
    .input-area {
        padding: 0 0 calc(52px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-elevated);
    }
    .input-row { gap: 4px; }
}

/* ============================================================
   RESPONSIVE — very small phones (≤360px)
   iPhone SE 1st gen, Galaxy Fold cover, 320-360px devices
   ============================================================ */
@media (max-width: 360px) {
    .input-row > button,
    .input-row > .btn-icon,
    .input-row > .btn-circle { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
    .text-input { min-height: 40px; font-size: 15px; padding: 10px 12px; }
    .logo-text,
    .logo__text { font-size: 15px; }
    .app {
        grid-template-rows: calc(48px + env(safe-area-inset-top, 0px)) 1fr;
    }
}

/* ============================================================
   ROUTE / ETA CARD
   ============================================================ */

.route-card {
    width: 100%;
    font-family: var(--font-body);
}

.route-card__map {
    width: 100%;
    height: 240px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}
.route-card__iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.route-card__info {
    padding: 12px 0 8px;
}

.route-card__stats {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;
}
.route-card__duration {
    font-family: var(--font-headline);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.route-card__distance {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.route-card__desc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.route-card__from,
.route-card__to {
    display: flex;
    align-items: center;
    gap: 8px;
}
.route-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.route-card__dot--start { background: var(--accent); }                /* Lumen Green */
.route-card__dot--end   { background: var(--accent-secondary); }      /* Neon Violet */

/* Destination place info */
.route-card__place {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    margin: 8px 0;
}
.route-card__place-photo-wrap {
    width: 64px;
    min-width: 64px;
    height: 64px;
    overflow: hidden;
}
.route-card__place-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.route-card__place-info { flex: 1; min-width: 0; }
.route-card__place-name {
    font-family: var(--font-headline);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.route-card__place-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.route-card__place-rating {
    color: #f59e0b;
    font-weight: 600;
}
.route-card__place-reviews { color: var(--text-dim); }
.route-card__place-addr {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.route-card__actions {
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.route-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    font-family: var(--font-headline);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.route-btn:hover { opacity: 0.85; }
.route-btn--navigate {
    background: var(--accent);
    color: #fff;
}

@media (max-width: 640px) {
    .route-card__map { height: 180px; }
    .route-card__duration { font-size: 20px; }
    .route-card__place-photo-wrap { width: 50px; min-width: 50px; height: 50px; }
}

/* ============================================================
   TRAVEL ITINERARY PLANNER
   ============================================================ */

.travel-card {
    width: 100%;
    max-width: 100%;
    font-family: var(--font-body);
}

.travel-card__header {
    font-size: 14px;
    color: var(--text-primary);
    padding: 0 0 10px;
    line-height: 1.5;
}

/* ── Map ── */
.travel-card__map {
    width: 100%;
    height: 280px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    margin-bottom: 0;
}
.travel-card__iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.travel-marker { background: transparent !important; border: none !important; }
.travel-marker__circle {
    width: 30px;
    height: 30px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-headline);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ── Day tabs ── */
.travel-card__tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    background: var(--bg-secondary);
}

.travel-tab {
    padding: 10px 20px;
    border: none;
    background: transparent;
    font-family: var(--font-headline);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.travel-tab:hover { color: var(--text-primary); }
.travel-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Day theme ── */
.travel-card__theme {
    font-family: var(--font-headline);
    font-size: 13px;
    color: var(--text-primary);
    padding: 10px 0 4px;
    letter-spacing: 0.03em;
}
.travel-card__theme strong {
    color: var(--accent);
    font-weight: 700;
}

/* ── Day content ── */
.travel-card__day-content {
    padding: 4px 0 8px;
}

/* ── Section headers ── */
.travel-section-hdr {
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    padding: 10px 0 4px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
}
.travel-section-hdr:first-child { border-top: none; margin-top: 0; }

/* ── Place cards ── */
.travel-place-card {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.travel-place-card:last-child { border-bottom: none; }

.travel-place-card__marker {
    width: 26px;
    height: 26px;
    min-width: 26px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-headline);
    border-radius: 50%;
    margin-top: 2px;
}

.travel-place-card__photo-wrap {
    width: 72px;
    min-width: 72px;
    height: 72px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.travel-place-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.travel-place-card__info { flex: 1; min-width: 0; }

.travel-place-card__time {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--accent);
    font-weight: 500;
}
.travel-place-card__name {
    font-family: var(--font-headline);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 2px 0;
}
.travel-place-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    font-size: 11px;
    color: var(--text-secondary);
}
.travel-place-card__rating {
    color: #f59e0b;
    font-weight: 600;
}
.travel-place-card__reviews {
    color: var(--text-dim);
}
.travel-place-card__category {
    background: var(--bg-elevated);
    padding: 1px 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.travel-place-card__desc {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 4px;
    line-height: 1.5;
}

/* ── Action buttons ── */
.travel-card__actions {
    display: flex;
    gap: 8px;
    padding: 12px 0 8px;
    border-top: 1px solid var(--border);
}

.travel-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    font-family: var(--font-headline);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.travel-btn:hover { opacity: 0.85; }

.travel-btn--route {
    background: var(--accent);
    color: #fff;
}
.travel-btn--copy {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

/* ── Text itinerary (collapsible) ── */
.travel-card__text-details {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.travel-card__text-toggle {
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.03em;
    list-style: none;
}
.travel-card__text-toggle::-webkit-details-marker { display: none; }
.travel-card__text-toggle::before { content: '+ '; }
[open] > .travel-card__text-toggle::before { content: '- '; }

.travel-card__text-body {
    font-size: 13px;
    line-height: 1.7;
    padding: 8px 0;
    color: var(--text-primary);
}
.travel-card__text-body h3 { font-size: 14px; font-weight: 700; margin: 12px 0 4px; }
.travel-card__text-body h4 { font-size: 13px; font-weight: 600; margin: 8px 0 2px; color: var(--text-secondary); }

/* ── Mobile responsive ── */
@media (max-width: 640px) {
    .travel-card__map { height: 200px; }
    .travel-place-card__photo-wrap { width: 56px; min-width: 56px; height: 56px; }
    .travel-tab { padding: 8px 14px; font-size: 12px; }
    .travel-place-card { gap: 8px; }
    .travel-place-card__name { font-size: 13px; }
    .travel-btn { padding: 7px 12px; font-size: 11px; }
}

/* ── Dark mode adjustments ── */
[data-theme="dark"] .travel-marker__circle {
    border-color: var(--bg-primary);
}
[data-theme="dark"] .travel-place-card__category {
    background: rgba(255, 255, 255, 0.08);
}

/* ── Reduced motion (accessibility) ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}