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

        /* Scrollbars — slim, on-brand (light) */
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(26,26,26,0.18) transparent;
        }
        *::-webkit-scrollbar { width: 10px; height: 10px; }
        *::-webkit-scrollbar-track { background: transparent; }
        *::-webkit-scrollbar-thumb {
            background: rgba(26,26,26,0.18);
            border-radius: 10px;
            border: 2px solid transparent;
            background-clip: padding-box;
            transition: background 0.15s ease;
        }
        *::-webkit-scrollbar-thumb:hover {
            background: rgba(17,24,39,0.30);
            background-clip: padding-box;
            border: 2px solid transparent;
        }
        *::-webkit-scrollbar-corner { background: transparent; }

        :root {
            /* ── Neutral & minimal identity: white canvas, light-grey surfaces, near-black accent ── */
            --bg: #FFFFFF;                       /* chat canvas — white */
            --bg-sidebar: #F7F7F8;               /* light-grey sidebar */
            --bg-surface: #FFFFFF;               /* raised cards/surfaces */
            --bg-surface-hover: #F0F0F1;         /* neutral hover tint */
            --bg-input: #FFFFFF;                 /* composer sits on white with a hairline */
            --border: #E5E5E5;                   /* neutral hairline */
            --border-hover: #D4D4D4;
            --accent: #111827;                   /* near-black — the single restrained accent */
            --accent-dim: rgba(17,24,39,0.06);
            --accent-text: #111827;
            --accent-glow: rgba(17,24,39,0.10);
            --orb-color: 120,124,134;            /* neutral grey (fx orb) */
            --green: #15803D;
            --red: #DC2626;
            --cyan: #4B5563;                     /* slate, kept to distinguish 'action' tags */
            --text-primary: #111827;
            --text-secondary: #565869;
            --text-muted: #8E8EA0;
            --font-display: 'Inter Tight', 'Inter', sans-serif;
            --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-mono: 'Geist Mono', ui-monospace, monospace;
            --font-serif: 'Instrument Serif', Georgia, serif;
            --sidebar-width: 240px;
            --cards-panel-width: 208px;   /* Reports rail — narrower than the chat sidebar */

            /* ── Near-solid white cards over the white canvas (flat + soft neutral depth) ── */
            --glass-bg: rgba(255,255,255,0.90);
            --glass-bg-strong: rgba(255,255,255,0.96);
            --glass-border: #E5E5E5;
            --glass-border-bright: #D4D4D4;
            --glass-blur: 14px;
            --glass-blur-strong: 20px;
            --shadow-1: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.06);
            --shadow-2: 0 12px 32px rgba(0,0,0,0.10);
            --shadow-glow: 0 0 0 1px rgba(0,0,0,0.08);
            --radius-lg: 18px;
            --radius-md: 12px;
            --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
        }

        html, body { height: 100%; }
        html { font-size: 15px; }   /* densify the whole UI (rem-rooted) — was the browser 16px default */
        body {
            font-family: var(--font-body);
            background: var(--bg);
            color: var(--text-primary);
            display: flex;
            overflow: hidden;
            position: relative;
        }

        /* Static fallback backdrop (shown when the WebGL orb is off / reduced-motion
           / no WebGL). On the light theme a clean canvas is enough — just the
           faintest neutral wash, no star dots. */
        .starfield {
            position: fixed; inset: 0; pointer-events: none; z-index: 0;
            transition: opacity 0.8s ease;
            background:
                radial-gradient(ellipse at 30% 70%, rgba(17,24,39,0.02) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 30%, rgba(17,24,39,0.015) 0%, transparent 60%);
        }
        /* When the WebGL orb is live, fade this static fallback out. */
        body.fx-active .starfield { opacity: 0; }

        /* ── Sidebar ─────────────────────────────────────────────────────── */
        .sidebar {
            width: var(--sidebar-width);
            background: var(--bg-sidebar);
            border-right: 1px solid var(--glass-border);
            display: flex;
            flex-direction: column;
            z-index: 5;
            transition: width 0.18s ease;
            overflow: hidden;
        }
        .sidebar.collapsed { width: 0; border-right: none; }
        .sidebar.collapsed .sidebar-header,
        .sidebar.collapsed .new-chat-btn,
        .sidebar.collapsed .chat-search,
        .sidebar.collapsed .chat-list,
        .sidebar.collapsed .sidebar-footer { display: none; }
        .sidebar-show-btn {
            position: fixed;
            top: 14px;
            left: 14px;
            z-index: 6;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            width: 32px; height: 32px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1rem;
            display: none;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
        }
        .sidebar-show-btn:hover {
            background: var(--bg-surface-hover);
            color: var(--accent-text);
            border-color: var(--border-hover);
        }
        .sidebar-show-btn.visible { display: inline-flex; }

        /* ── Reports panel (persistent right-hand card rail) ─────────────── */
        /* Third flex sibling of body (sidebar | main | cards-panel): collapse
           animates width→0 and .main (flex:1) absorbs the space — the exact
           sidebar mechanism, mirrored right. Always OPEN on load (product
           decision 2026-07-20); in-session collapse is NOT persisted. */
        .cards-panel {
            width: var(--cards-panel-width, 208px);
            background: var(--bg-sidebar);
            border-left: 1px solid var(--glass-border);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            transition: width 0.18s ease;
            overflow: hidden;
        }
        .cards-panel[hidden] { display: none !important; }  /* beat the flex display */
        .cards-panel.collapsed { width: 0; border-left: none; }
        .cards-panel.collapsed .cards-panel-header,
        .cards-panel.collapsed .cards-panel-grid { display: none; }
        .cards-panel-header {
            padding: 14px 14px 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .cards-panel-title {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 0.04em;
            color: var(--accent-text);
            white-space: nowrap;
        }
        .cards-panel-grid {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 4px 12px 16px;
            overflow-y: auto;
            flex: 1;
        }
        /* Compact menu-row variant of the guidedCardEl factory. justify-content:center
           + a fixed min-height dead-centers the single label line regardless of Inter
           Tight's tall metrics (fixes the label riding the pill's top edge). */
        .cards-panel .guided-card {
            padding: 0 12px;
            min-height: 34px;
            border-radius: 8px;
            justify-content: center;   /* vertical-center the label in the pill */
            gap: 0;
        }
        .cards-panel .guided-card-title {
            font-size: 0.82rem;
            line-height: 1.25;
            white-space: nowrap;       /* one clean row; ellipsis is only a safety net */
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cards-panel .guided-card-blurb { display: none; }  /* label-only rail → uniform rows */
        /* Visual disable while a turn is streaming (clicks already no-op). */
        .cards-panel.busy .guided-card { opacity: 0.55; pointer-events: none; }
        .cards-panel-show-btn {
            position: fixed;
            top: 14px;
            right: 14px;
            z-index: 6;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            width: 32px; height: 32px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1rem;
            display: none;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
        }
        .cards-panel-show-btn:hover {
            background: var(--bg-surface-hover);
            color: var(--accent-text);
            border-color: var(--border-hover);
        }
        .cards-panel-show-btn.visible { display: inline-flex; }
        .cards-panel-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(26,26,26,0.4);
            z-index: 90;
        }
        .cards-panel-backdrop.visible { display: block; }

        .sidebar-header {
            padding: 18px 16px 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .sidebar-brand {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 1.15rem;
            letter-spacing: 0.04em;
            color: var(--accent-text);
        }
        .sidebar-spacer { flex: 1; }
        .sidebar-icon-btn {
            background: none;
            border: 1px solid var(--border);
            color: var(--text-secondary);
            width: 28px; height: 28px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.95rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
        }
        .sidebar-icon-btn:hover {
            background: var(--bg-surface);
            color: var(--accent-text);
            border-color: var(--border-hover);
        }
        .new-chat-btn {
            margin: 4px 14px 14px;
            padding: 9px 16px;
            background: var(--accent);
            border: 1px solid var(--accent);
            border-radius: 9999px;
            color: #fff;
            font-family: var(--font-display);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(0,0,0,0.12);
            transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
        }
        .new-chat-btn:hover { background: #000; box-shadow: 0 8px 22px rgba(0,0,0,0.16); transform: translateY(-1px); }
        .chat-search {
            padding: 0 14px 10px;
        }
        .chat-search input {
            width: 100%;
            box-sizing: border-box;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 0.82rem;
            padding: 7px 10px;
            outline: none;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .chat-search input::placeholder { color: var(--text-muted); }
        .chat-search input:focus {
            border-color: var(--border-hover);
            box-shadow: var(--shadow-glow);
        }
        .chat-list {
            flex: 1;
            overflow-y: auto;
            padding: 0 8px 12px;
        }
        .chat-list-empty {
            padding: 12px 14px;
            color: var(--text-muted);
            font-size: 0.78rem;
        }
        .chat-item {
            padding: 9px 12px;
            border-radius: 7px;
            cursor: pointer;
            font-size: 0.84rem;
            color: var(--text-secondary);
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: background 0.12s ease;
            display: flex;
            justify-content: space-between;
            gap: 6px;
        }
        .chat-item:hover {
            background: var(--bg-surface);
            color: var(--text-primary);
        }
        .chat-item.active {
            background: var(--bg-surface-hover);
            color: var(--accent-text);
        }
        .chat-item .topic { flex: 1; overflow: hidden; text-overflow: ellipsis; }
        .chat-item .delete-x {
            opacity: 0;
            color: var(--text-muted);
            font-size: 0.95rem;
            transition: opacity 0.15s ease;
        }
        .chat-item:hover .delete-x { opacity: 1; }
        .chat-item .delete-x:hover { color: var(--red); }
        .chat-load-more {
            width: calc(100% - 4px);
            margin: 6px 2px 4px;
            padding: 8px 10px;
            background: transparent;
            border: 1px dashed var(--border);
            border-radius: 7px;
            color: var(--text-muted);
            font-size: 0.78rem;
            cursor: pointer;
            transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
        }
        .chat-load-more:hover:not(:disabled) {
            background: var(--bg-surface);
            color: var(--text-primary);
            border-color: var(--text-muted);
        }
        .chat-load-more:disabled { cursor: default; opacity: 0.6; }
        .sidebar-footer {
            border-top: 1px solid var(--border);
            padding: 10px 14px;
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        .sidebar-footer a {
            color: var(--text-secondary);
            text-decoration: none;
        }
        .sidebar-footer a:hover { color: var(--accent-text); }
        .conn-dot {
            display: inline-block;
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--text-muted);
            margin-right: 4px;
        }
        .conn-dot.live { background: var(--green); }
        .token-meter {
            font-family: var(--font-display);
            font-size: 0.7rem;
            letter-spacing: 0.04em;
            color: var(--text-muted);
            cursor: default;
        }
        .token-meter[hidden] { display: none; }
        .budget-meter {
            display: flex;
            flex-direction: column;
            gap: 3px;
            font-family: var(--font-display);
            font-size: 0.7rem;
            letter-spacing: 0.04em;
            color: var(--text-muted);
            cursor: default;
            min-width: 110px;
        }
        .budget-meter[hidden] { display: none; }
        .budget-meter .budget-meter-text {
            display: flex;
            justify-content: space-between;
            font-variant-numeric: tabular-nums;
        }
        .budget-meter .budget-meter-bar {
            height: 4px;
            background: var(--bg-surface-hover, rgba(255,255,255,0.08));
            border-radius: 2px;
            overflow: hidden;
        }
        .budget-meter .budget-meter-fill {
            height: 100%;
            width: 0%;
            background: var(--green, #4caf50);
            transition: width 200ms, background 200ms;
        }
        .budget-meter.is-warn .budget-meter-fill { background: #ffb74d; }
        .budget-meter.is-over .budget-meter-fill { background: #e57373; }
        .budget-meter.is-over .budget-meter-text { color: #e57373; }

        /* ── Main column ─────────────────────────────────────────────────── */
        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            position: relative;
            z-index: 1;
        }

        .chat-area {
            flex: 1;
            overflow-y: auto;
            padding: 36px 60px 16px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .chat-area.empty {
            justify-content: center;
            align-items: center;
            padding-bottom: 120px;
        }
        /* (.guided-landing top-align rules removed 2026-07-20 — the landing
           card grid moved to the right-hand Reports panel; the greeting hero
           centers like the static hero.) */

        /* ── Hero (empty chat) ───────────────────────────────────────────── */
        .hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 22px;
            max-width: 720px;
            text-align: center;
        }
        .hero-title {
            font-family: var(--font-display);
            font-size: 2.8rem;
            font-weight: 800;
            background: linear-gradient(120deg, #111827 0%, #565869 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.025em;
            filter: drop-shadow(0 2px 24px rgba(17,24,39,0.10));
        }
        .hero-tagline {
            color: var(--text-secondary);
            font-size: 0.98rem;
            max-width: 540px;
        }
        .chip-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-top: 6px;
        }
        /* Hinglish voice toggle — small pill in the sidebar footer (next to
           the Debug toggle). ADMIN-ONLY experimental control: gated below by
           the same data-debug rule as .debug-toggle. */
        .hinglish-toggle {
            align-self: flex-start;
            margin: 0;
            padding: 4px 10px;
            background: var(--glass-bg);
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-secondary);
            font-size: 0.72rem;
            cursor: pointer;
            transition: background 0.18s var(--ease-soft), color 0.18s var(--ease-soft),
                        border-color 0.18s var(--ease-soft);
        }
        .hinglish-toggle:hover { border-color: var(--border-hover); color: var(--accent-text); }
        .hinglish-toggle.on {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }
        .chip {
            padding: 9px 16px;
            background: var(--glass-bg);
            -webkit-backdrop-filter: blur(var(--glass-blur));
            backdrop-filter: blur(var(--glass-blur));
            border: 1px solid var(--glass-border);
            border-radius: 999px;
            color: var(--text-secondary);
            font-size: 0.84rem;
            cursor: pointer;
            box-shadow: var(--shadow-1);
            transition: background 0.18s var(--ease-soft), color 0.18s var(--ease-soft),
                        border-color 0.18s var(--ease-soft), box-shadow 0.18s var(--ease-soft),
                        transform 0.18s var(--ease-soft);
        }
        .chip:hover {
            background: var(--glass-bg-strong);
            color: var(--accent-text);
            border-color: var(--border-hover);
            box-shadow: var(--shadow-glow);
            transform: translateY(-1px);
        }

        /* ── Chat bubbles ────────────────────────────────────────────────── */
        .msg {
            max-width: 800px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            animation: msg-in 0.25s ease;
        }
        @keyframes msg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

        .msg.user { align-self: flex-end; align-items: flex-end; }
        .msg.user .bubble {
            background: var(--bg-surface-hover);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 10px 16px;
            border-radius: 14px 14px 2px 14px;
            line-height: 1.55;
            box-shadow: var(--shadow-1);
        }
        .msg.assistant { align-self: flex-start; max-width: 100%; }
        .msg.assistant .bubble {
            background: var(--glass-bg);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            padding: 14px 18px;
            border-radius: 14px 14px 14px 2px;
            line-height: 1.55;
            white-space: pre-wrap;
            word-break: break-word;
            box-shadow: var(--shadow-1);
        }
        .msg.assistant.action .bubble { border-color: rgba(103,232,249,0.25); }
        .msg.assistant.introspection .bubble { border-color: var(--border); font-style: italic; color: var(--text-secondary); }
        .msg.assistant.error .bubble { border-color: rgba(248,113,113,0.4); color: var(--red); }
        .msg.system .bubble {
            background: transparent;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-style: italic;
            padding: 2px 0;
        }
        .msg-meta {
            font-size: 0.72rem;
            color: var(--text-muted);
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .path-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.68rem;
            font-family: var(--font-display);
            text-transform: lowercase;
            letter-spacing: 0.04em;
        }
        .path-tag.data { background: var(--accent-dim); color: var(--accent-text); }
        .path-tag.action { background: rgba(103,232,249,0.12); color: var(--cyan); }
        .path-tag.introspection { background: rgba(26,26,26,0.06); color: var(--text-secondary); }
        .path-tag.error { background: rgba(248,113,113,0.15); color: var(--red); }
        .approach {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-style: italic;
            cursor: pointer;
        }
        .approach:hover { color: var(--text-secondary); }

        /* ── Share menu (per-message + full-chat share) ──────────────────── */
        .share-menu {
            position: absolute;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 4px;
            z-index: 100;
            display: none;
            min-width: 140px;
            box-shadow: var(--shadow-2);
        }
        .share-menu.open { display: block; }
        .share-menu-item {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 12px; width: 100%;
            background: none; border: none;
            color: var(--text-primary);
            font: inherit; font-size: 0.85rem;
            cursor: pointer; border-radius: 6px; text-align: left;
        }
        .share-menu-item:hover { background: var(--bg-surface-hover); color: var(--accent-text); }

        /* ── Markdown tables (emitted by renderMarkdownish) ──────────────── */
        .md-table-wrap {
            margin: 8px 0;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: rgba(26,26,26,0.02);
        }
        .md-table-wrap .md-table {
            margin: 0;
            border: none;
            border-radius: 0;
            background: transparent;
        }
        .md-table {
            border-collapse: collapse;
            margin: 8px 0;
            font-size: 0.88rem;
            background: rgba(26,26,26,0.02);
            border: 1px solid var(--border);
            border-radius: 6px;
            overflow: hidden;
        }
        .md-table th, .md-table td {
            padding: 6px 12px;
            border-bottom: 1px solid var(--border);
            vertical-align: top;
            white-space: nowrap;
        }
        .md-table th {
            background: rgba(26,26,26,0.04);
            font-weight: 600;
            color: var(--text-secondary);
            text-align: left;
        }
        .md-table tr:last-child td { border-bottom: none; }
        .md-table td { font-variant-numeric: tabular-nums; }

        /* ── Role-gating: hide admin-only chrome for non-admin users ─────── */
        body[data-role="user"] #tokenMeter {
            display: none !important;
        }
        /* Debug UI is reserved for the literal "admin" account. fetchMe sets
           data-debug="allowed" only when username === "admin"; the :not()
           default-hides it before /api/me resolves (fail-secure). The
           Hinglish voice toggle rides the same gate — experimental,
           admin-only by product decision (2026-07-20). */
        body:not([data-debug="allowed"]) .debug-toggle,
        body:not([data-debug="allowed"]) .hinglish-toggle,
        body:not([data-debug="allowed"]) .llm-call-panel,
        body:not([data-debug="allowed"]) .debug-block {
            display: none !important;
        }

        /* ── Debug toggle + per-message debug block ──────────────────────── */
        .debug-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.72rem;
            color: var(--text-muted);
            font-family: var(--font-display);
            letter-spacing: 0.04em;
            user-select: none;
            cursor: pointer;
        }
        .debug-toggle input { accent-color: var(--accent-text, #c4b5fd); cursor: pointer; }
        .debug-block {
            margin-top: 8px;
            padding: 8px 10px;
            background: var(--bg);
            border: 1px dashed var(--border);
            border-radius: 6px;
            font-size: 0.78rem;
            color: var(--text-secondary);
        }
        .debug-block summary {
            cursor: pointer;
            color: var(--text-muted);
            font-family: var(--font-display);
            letter-spacing: 0.04em;
            font-size: 0.72rem;
            user-select: none;
        }
        .debug-block summary:hover { color: var(--text-secondary); }
        .debug-block .dbg-row {
            margin-top: 6px;
            display: grid;
            grid-template-columns: 110px 1fr;
            gap: 8px;
        }
        .debug-block .dbg-row .dbg-key {
            color: var(--text-muted);
            font-family: var(--font-display);
            letter-spacing: 0.03em;
            font-size: 0.7rem;
            padding-top: 2px;
        }
        .debug-block pre {
            margin: 0;
            padding: 6px 8px;
            background: var(--bg-surface-hover);
            border: 1px solid var(--border);
            border-radius: 4px;
            overflow-x: auto;
            font-size: 0.78rem;
            line-height: 1.4;
            white-space: pre;
        }

        /* ── Document grid (show_documents) ──────────────────────────────── */
        .doc-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 10px;
            margin-top: 12px;
        }
        .doc-card {
            position: relative;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: all 0.15s ease;
            text-decoration: none;
            color: var(--text-primary);
            min-height: 110px;
        }
        .doc-card:hover {
            background: var(--bg-surface-hover);
            border-color: var(--border-hover);
        }
        .doc-card.selected {
            border-color: var(--accent);
            background: var(--accent-dim);
        }
        .doc-select {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1.5px solid var(--border-hover);
            background: rgba(255,255,255,0.85);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: transparent;
            font-size: 0.78rem;
            font-weight: 700;
            transition: all 0.15s ease;
            z-index: 2;
            /* Visual indicator only — the whole card is the toggle. */
            pointer-events: none;
        }
        .doc-card.selected .doc-select {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }
        .doc-open-link {
            position: absolute;
            top: 6px;
            left: 6px;  /* opposite corner from .doc-delete */
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255,255,255,0.9);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1;
            text-decoration: none;
            z-index: 2;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .doc-open-link:hover { background: #fff; color: var(--accent-text); }
        .doc-grid-actions {
            display: none;
            justify-content: flex-end;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
        }
        .doc-grid-actions.visible { display: flex; }
        .doc-grid-actions .count {
            color: var(--text-secondary);
            font-size: 0.8rem;
            margin-right: auto;
        }
        .doc-grid-actions button {
            background: var(--accent-dim);
            border: 1px solid var(--border);
            color: var(--accent-text);
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.82rem;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .doc-grid-actions button:hover { background: var(--bg-surface-hover); }
        .doc-grid-actions button.secondary {
            background: transparent;
            border-color: var(--border);
            color: var(--text-secondary);
        }
        .doc-grid-actions button.secondary:hover {
            border-color: var(--border-hover);
            color: var(--text-primary);
        }
        .doc-card .doc-thumb {
            width: 100%;
            height: 80px;
            border-radius: 6px;
            background: var(--bg-surface-hover);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            overflow: hidden;
        }
        .doc-card .doc-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .doc-card .doc-name {
            font-size: 0.75rem;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ── Input bar ───────────────────────────────────────────────────── */
        .input-bar {
            padding: 12px 60px 22px;
            background: linear-gradient(180deg, transparent 0%, var(--bg) 30%);
            position: sticky;
            bottom: 0;
        }
        .attach-tray {
            max-width: 920px;
            margin: 0 auto 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .attach-tray:empty { display: none; }
        .attach-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 6px 5px 10px;
            background: var(--accent-dim);
            border: 1px solid var(--border);
            color: var(--accent-text);
            border-radius: 16px;
            font-size: 0.78rem;
            max-width: 260px;
        }
        .attach-chip .name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .attach-chip .remove {
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
            padding: 0 4px;
            opacity: 0.7;
            border-radius: 50%;
        }
        .attach-chip .remove:hover {
            opacity: 1;
            background: var(--bg-surface-hover);
        }
        .input-row {
            max-width: 920px;
            margin: 0 auto;
            display: flex;
            align-items: flex-end;
            gap: 10px;
            padding: 10px 12px;
            background: var(--glass-bg);
            -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.1);
            backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.1);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-1);
            transition: border-color 0.2s var(--ease-soft), box-shadow 0.2s var(--ease-soft);
        }
        .input-row:focus-within {
            border-color: var(--glass-border-bright);
            box-shadow: var(--shadow-glow);
        }
        .input-row textarea {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 0.95rem;
            line-height: 1.45;
            resize: none;
            min-height: 24px;
            max-height: 200px;
            padding: 4px 0;
        }
        .input-row textarea::placeholder { color: var(--text-muted); }
        .input-btn {
            background: none;
            border: 1px solid var(--border);
            color: var(--text-secondary);
            width: 36px; height: 36px;
            border-radius: 9px;
            cursor: pointer;
            font-size: 1.05rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
            flex-shrink: 0;
        }
        .input-btn:hover {
            background: var(--glass-bg-strong);
            color: var(--accent-text);
            border-color: var(--glass-border-bright);
            box-shadow: var(--shadow-glow);
        }
        .input-btn.send {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }
        .input-btn.send:hover {
            background: #000;
            color: #fff;
            box-shadow: var(--shadow-glow);
        }
        /* Mic lives in the composer (ChatGPT-style). Phase feedback is icon
           color only: recording = red pulse, initializing/transcribing =
           neutral pulse. Base .input-btn styling carries the resting look. */
        .input-btn.recording {
            background: var(--red);
            color: #fff;
            border-color: var(--red);
            animation: pulse 1.4s ease-in-out infinite;
        }
        .input-btn.initializing,
        .input-btn.transcribing {
            color: var(--text-secondary);
            border-color: var(--border-hover);
            cursor: progress;
        }
        .input-btn.initializing { animation: pulse-neutral 2.4s ease-in-out infinite; }
        .input-btn.transcribing { animation: pulse-neutral 1.4s ease-in-out infinite; }
        @keyframes pulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.4); }
            50%     { box-shadow: 0 0 0 8px rgba(248,113,113,0); }
        }

        /* Neutral pulse reused by the composer mic's initializing/transcribing
           phases (see .input-btn.initializing/.transcribing above). */
        @keyframes pulse-neutral {
            0%,100% { box-shadow: 0 0 0 0 rgba(17,24,39,0.25); }
            50%     { box-shadow: 0 0 0 10px rgba(17,24,39,0); }
        }
        /* Bottom padding so the last bubble scrolls clear of the sticky input bar. */
        .chat-area:not(.empty) { padding-bottom: 130px; }
        @media (max-width: 600px) {
            .chat-area:not(.empty) { padding-bottom: 110px; }
        }

        /* ── Live STT: tentative (in-progress) user bubble ──────────────── */
        /* Rendered while streaming STT is producing deltas. On commit we
           strip the .tentative class to "solidify" the bubble. */
        .msg.user.tentative .bubble {
            opacity: 0.6;
            font-style: italic;
            background: var(--bg-surface-hover);
            border-color: var(--border);
        }
        .msg.user.tentative .bubble::after {
            content: "▍";
            display: inline-block;
            margin-left: 2px;
            opacity: 0.7;
            animation: tentativeCursor 1s steps(2) infinite;
        }
        @keyframes tentativeCursor {
            50% { opacity: 0; }
        }

        /* ── Progress dots ───────────────────────────────────────────────── */
        .progress {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: var(--glass-bg);
            -webkit-backdrop-filter: blur(var(--glass-blur));
            backdrop-filter: blur(var(--glass-blur));
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-1);
            color: var(--text-secondary);
            font-size: 0.85rem;
            font-style: italic;
        }
        .dots span {
            display: inline-block;
            width: 5px; height: 5px;
            border-radius: 50%;
            background: var(--accent-text);
            box-shadow: 0 0 6px rgba(17,24,39,0.25);
            margin: 0 1px;
            animation: bounce 1.2s infinite ease-in-out;
        }
        .dots span:nth-child(2) { animation-delay: 0.15s; }
        .dots span:nth-child(3) { animation-delay: 0.3s; }
        @keyframes bounce {
            0%,80%,100% { transform: scale(0.6); opacity: 0.5; }
            40%         { transform: scale(1); opacity: 1; }
        }

        /* ── Modal (atomic code reveal) ──────────────────────────────────── */
        .modal-backdrop {
            position: fixed; inset: 0;
            background: rgba(26,26,26,0.35);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 50;
            padding: 30px;
        }
        .modal-backdrop.open { display: flex; }
        .modal {
            position: relative;
            background: rgba(255,255,255,0.94);
            -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.1);
            backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.1);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-2);
            max-width: 900px;
            width: 100%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .modal::before {
            content: '';
            position: absolute; inset: 0;
            z-index: -1;
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient(160deg, rgba(26,26,26,0.03), transparent 40%);
        }
        .modal-header {
            padding: 14px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-title {
            font-family: var(--font-display);
            color: var(--accent-text);
            font-size: 1rem;
            font-weight: 600;
        }
        .modal-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.4rem;
            cursor: pointer;
        }
        .modal-body {
            padding: 18px 20px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.84rem;
            white-space: pre-wrap;
            color: var(--text-primary);
            line-height: 1.5;
        }
        .screenshot-strip {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            padding: 6px 0;
            margin-top: 8px;
        }
        .screenshot-strip img {
            height: 140px;
            border-radius: 10px;
            border: 1px solid var(--border);
            cursor: zoom-in;
            flex-shrink: 0;
            transition: border-color 0.15s ease;
        }
        .screenshot-strip img:hover {
            border-color: var(--border-hover);
        }
        .image-lightbox {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 60;
            padding: 20px;
        }
        .image-lightbox.open { display: flex; }
        .image-lightbox img {
            max-width: 90vw;
            max-height: 85vh;
            border-radius: 14px;
            object-fit: contain;
        }
        .image-lightbox-close {
            position: absolute;
            top: 16px;
            right: 20px;
            background: none;
            border: none;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
            line-height: 1;
        }

        /* ── Responsive ──────────────────────────────────────────────────── */
        .sidebar-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(26,26,26,0.4);
            z-index: 90;
        }
        @media (max-width: 760px) {
            .sidebar {
                position: fixed;
                top: 0; left: 0; bottom: 0;
                width: 260px;
                z-index: 100;
                box-shadow: 4px 0 16px rgba(26,26,26,0.18);
                /* Solid background — the sidebar overlays the chat in this
                   layout, so the translucent desktop background would let
                   chat text bleed through. */
                background: var(--bg);
            }
            .sidebar.collapsed { width: 0; box-shadow: none; }
            .sidebar-backdrop.visible { display: block; }
            .sidebar-show-btn { display: inline-flex; }
            /* Reports panel becomes a right-hand overlay drawer (chat keeps
               full width). JS keeps the two drawers mutually exclusive. */
            .cards-panel {
                position: fixed;
                top: 0; right: 0; bottom: 0;
                width: 240px;
                z-index: 100;
                box-shadow: -4px 0 16px rgba(26,26,26,0.18);
                background: var(--bg);
            }
            .cards-panel.collapsed { width: 0; box-shadow: none; }
            .chat-area { padding: 22px 16px 12px; }
            .input-bar { padding: 10px 16px 18px; }
            .hero-title { font-size: 2rem; }
            .md-table { font-size: 0.82rem; }
            .md-table th, .md-table td { padding: 5px 8px; white-space: nowrap; }
        }

        /* ── Live LLM-call panel: side-by-side parallel rows ────────────── */
        .llm-call-row {
            display: grid;
            grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
            gap: 6px;
            margin-top: 6px;
        }
        .llm-call-row.parallel > details {
            border-left: 2px solid var(--cyan);
            padding-left: 6px;
        }
        .llm-call-row pre {
            white-space: pre-wrap;
            word-break: break-word;
            overflow-x: auto;
            max-width: 100%;
        }
        @media (max-width: 640px) {
            .llm-call-row { grid-template-columns: 1fr; }
        }

        /* ── Dashboard builder picker + menu + overlay ──────────────────── */
        .dash-picker-wrap { display: flex; flex-direction: column; gap: 12px; min-width: min(560px, 86vw); }
        .dash-picker-list { overflow-y: auto; max-height: 30vh; min-height: 120px; padding-right: 4px; }
        .dash-picker-list details { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: rgba(26,26,26,0.02); }
        .dash-picker-list summary { cursor: pointer; font-weight: 600; padding: 4px 2px; }
        .dash-picker-list .dash-card { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 6px; margin-top: 6px; cursor: pointer; }
        .dash-picker-list .dash-card:hover { background: rgba(26,26,26,0.04); }
        .dash-picker-list .dash-card input[type=checkbox] { margin-top: 4px; }
        .dash-picker-list .dash-card .dash-card-body { flex: 1; min-width: 0; }
        .dash-picker-list .dash-card .dash-card-title { font-weight: 600; }
        .dash-picker-list .dash-card .dash-card-desc { font-size: 0.85rem; color: var(--text-secondary); margin-top: 2px; line-height: 1.3; }
        .dash-picker-list .dash-card .dash-card-cls { font-size: 0.72rem; color: var(--text-secondary); opacity: 0.75; margin-top: 4px; font-family: ui-monospace, monospace; }
        .dash-picker-fields { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border); }
        .dash-picker-fields input, .dash-picker-fields textarea {
            background: rgba(26,26,26,0.04); border: 1px solid var(--border); border-radius: 6px;
            color: inherit; padding: 8px 10px; font-family: inherit; font-size: 0.9rem;
        }
        .dash-picker-fields textarea { min-height: 60px; resize: vertical; }
        .dash-picker-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
        .dash-picker-actions .dash-progress { color: var(--text-secondary); font-size: 0.85rem; margin-right: auto; }
        .dash-picker-actions button { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border); background: rgba(26,26,26,0.05); color: inherit; cursor: pointer; }
        .dash-picker-actions button.primary { background: var(--accent, #4f8cff); border-color: var(--accent, #4f8cff); color: #fff; }
        .dash-picker-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
        .dash-picker-empty { color: var(--text-secondary); padding: 20px; text-align: center; }
        .dash-picker-error { color: #f88; padding: 8px 10px; border-radius: 6px; background: rgba(255,80,80,0.08); font-size: 0.85rem; }

        /* ── Contact picker (reuses #modal + .dash-picker-* classes) ────── */
        .contact-picker-search {
            background: rgba(26,26,26,0.04); border: 1px solid var(--border); border-radius: 6px;
            color: inherit; padding: 8px 10px; font-family: inherit; font-size: 0.9rem;
            width: 100%; box-sizing: border-box;
        }
        .contact-picker-search:focus { outline: none; border-color: var(--accent, #4f8cff); }
        .contact-picker-note { font-size: 0.85rem; color: var(--text-secondary); padding: 0 2px; }
        .contact-picker-no-results { padding: 24px; text-align: center; color: var(--text-secondary); font-size: 0.9rem; display: none; }

        .dashboards-menu { position: fixed; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px; min-width: 220px; max-width: 320px; z-index: 200; box-shadow: var(--shadow-2); }
        .dashboards-menu .dash-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
        .dashboards-menu .dash-row:hover { background: rgba(26,26,26,0.05); }
        .dashboards-menu .dash-row .dash-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .dashboards-menu .dash-row .dash-del { opacity: 0.4; padding: 2px 6px; border-radius: 4px; }
        .dashboards-menu .dash-row .dash-del:hover { opacity: 1; background: rgba(255,80,80,0.15); }
        .dashboards-menu .dash-empty { padding: 12px; color: var(--text-secondary); font-size: 0.85rem; text-align: center; }

        .dash-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 300; display: flex; flex-direction: column; }
        .dash-overlay-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
        .dash-overlay-bar .dash-overlay-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .dash-overlay-bar button { background: rgba(26,26,26,0.05); border: 1px solid var(--border); color: inherit; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
        .dash-overlay-bar button:hover { background: rgba(26,26,26,0.08); }
        .dash-overlay iframe { flex: 1; width: 100%; border: 0; background: #fff; }
        .dash-overlay-dates { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; }
        .dash-overlay-dates .dash-overlay-label { color: var(--text-secondary); font-size: 0.85rem; }
        .dash-overlay-dates input[type=date] {
            background: rgba(26,26,26,0.05); border: 1px solid var(--border); border-radius: 6px;
            color: inherit; padding: 4px 8px; font-family: inherit; font-size: 0.85rem;
            color-scheme: light;
        }

        /* v3 split-pane edit mode */
        .dash-overlay.edit-mode .dash-overlay-content { display: flex; flex-direction: row; flex: 1; min-height: 0; overflow: hidden; }
        .dash-overlay.view-mode .dash-overlay-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
        .dash-edit-panel { display: flex; flex-direction: column; width: 32%; min-width: 280px; max-width: 480px; border-right: 1px solid var(--border); background: var(--bg-surface); }
        .dash-edit-history { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
        .dash-edit-empty { color: var(--text-secondary); font-size: 0.88rem; text-align: center; padding: 24px 12px; line-height: 1.5; }
        .dash-edit-turn { display: flex; flex-direction: column; gap: 6px; }
        .dash-edit-msg-user { align-self: flex-end; max-width: 90%; background: rgba(79,140,255,0.12); border: 1px solid rgba(79,140,255,0.3); border-radius: 10px; padding: 8px 10px; font-size: 0.88rem; }
        .dash-edit-msg-asst { align-self: flex-start; max-width: 95%; background: rgba(26,26,26,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 0.88rem; line-height: 1.4; }
        .dash-edit-msg-asst.failed { border-color: rgba(255,80,80,0.3); background: rgba(255,80,80,0.06); }
        .dash-edit-thinking { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 0.88rem; padding: 8px 10px; font-style: italic; }
        .dash-edit-input-row { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border); align-items: flex-end; }
        .dash-edit-input { flex: 1; background: rgba(26,26,26,0.04); border: 1px solid var(--border); border-radius: 8px; color: inherit; padding: 8px 10px; font-family: inherit; font-size: 0.9rem; resize: vertical; min-height: 40px; max-height: 200px; }
        .dash-edit-input-row button { background: rgba(26,26,26,0.05); border: 1px solid var(--border); color: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer; min-width: 38px; }
        .dash-edit-input-row button.recording { background: rgba(255,80,80,0.2); border-color: rgba(255,80,80,0.5); }
        .dash-edit-input-row button.primary { background: var(--accent, #4f8cff); border-color: var(--accent, #4f8cff); color: #fff; }
        .dash-edit-input-row button:disabled { opacity: 0.5; cursor: not-allowed; }
        .dash-overlay.edit-mode iframe { flex: 1; }
        .dash-mode-toggle { background: rgba(26,26,26,0.05); border: 1px solid var(--border); color: inherit; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
        .dash-mode-toggle.active { background: var(--accent, #4f8cff); border-color: var(--accent, #4f8cff); color: #fff; }
        /* Phase 2.5: image attachments in the edit chat */
        .dash-edit-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
        .dash-edit-attachments:empty { padding: 0; }
        .dash-edit-thumb { position: relative; width: 60px; height: 60px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: rgba(26,26,26,0.04); }
        .dash-edit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .dash-edit-thumb-rm { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; border: 1px solid var(--border); background: rgba(0,0,0,0.65); color: #fff; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .dash-edit-thumb-rm:hover { background: rgba(255,80,80,0.6); }
        .dash-edit-attach-badge { align-self: flex-end; font-size: 0.72rem; color: var(--text-secondary); padding: 2px 6px; background: rgba(79,140,255,0.08); border: 1px solid rgba(79,140,255,0.18); border-radius: 4px; margin-top: -4px; }

        /* ── Data mode — the editable file-data grid ────────────────────── */
        .dash-data-panel { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; box-sizing: border-box; background: var(--bg); }
        .dash-data-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
        .dash-data-tab { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; }
        .dash-data-tab:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
        .dash-data-tab.active { background: var(--accent, #4f8cff); border-color: var(--accent, #4f8cff); color: #fff; font-weight: 600; }
        .dash-data-head { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
        .dash-data-subhead { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 14px; }
        .dash-data-banner { background: var(--accent-dim); border: 1px solid var(--border); color: var(--accent-text); padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 0.85rem; }
        .dash-data-table-wrap { overflow: auto; max-height: 55vh; border: 1px solid var(--border); border-radius: 8px; }
        .dash-data-table { border-collapse: collapse; font-size: 0.84rem; }
        .dash-data-table th, .dash-data-table td { border: 1px solid var(--border); padding: 0; }
        .dash-data-table th { background: var(--bg-surface); position: sticky; top: 0; z-index: 1; }
        .dash-data-cellwrap { display: flex; align-items: center; }
        .dash-data-table input { border: 0; background: transparent; color: var(--text-primary); padding: 5px 7px; width: 150px; font: inherit; font-size: 0.84rem; }
        .dash-data-table th input { font-weight: 600; }
        .dash-data-table input:focus { outline: 1px solid var(--accent, #4f8cff); background: var(--bg-input); }
        .dash-data-cell-del, .dash-data-row-del { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 0.95rem; padding: 0 5px; line-height: 1; }
        .dash-data-cell-del:hover, .dash-data-row-del:hover { color: var(--red); }
        .dash-data-controls { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
        .dash-data-controls button { background: var(--bg-surface); border: 1px solid var(--border); color: inherit; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
        .dash-data-controls button:hover { background: var(--bg-surface-hover); }
        .dash-data-controls button.primary { background: var(--accent, #4f8cff); border-color: var(--accent, #4f8cff); color: #fff; font-weight: 600; }
        .dash-data-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
        .dash-data-savenote { font-size: 0.84rem; color: var(--text-secondary); }

        /* mobile: stack iframe on top, chat at bottom */
        @media (max-width: 760px) {
            .dash-overlay.edit-mode .dash-overlay-content { flex-direction: column; }
            .dash-overlay.edit-mode .dash-edit-panel {
                order: 2;
                width: 100%;
                min-width: 0;
                max-width: none;
                flex: 0 0 45vh;                /* fallback for browsers without dvh */
                flex: 0 0 min(45dvh, 50%);     /* dynamic viewport height: tracks URL-bar show/hide */
                min-height: 200px;
                max-height: 60dvh;
                border-right: none;
                border-top: 1px solid var(--border);
            }
            .dash-overlay.edit-mode iframe { order: 1; flex: 1 1 auto; min-height: 0; }
            .dash-overlay-bar { padding: 6px 10px; gap: 8px; flex-wrap: wrap; }
            .dash-overlay-bar .dash-overlay-name { flex: 1 1 100%; order: -1; }
            .dash-overlay-dates { flex: 1 1 100%; justify-content: flex-start; }
        }

        /* Collapsible reasoning panel. Default state is collapsed —
           only the most recent .thought is visible. Toggle button at
           the top expands to show every thought. */
        .reasoning .thoughts.collapsed > .thought:not(:last-child) { display: none; }
        .reasoning .thought { white-space: pre-wrap; }
        .reasoning .thought + .thought { margin-top: 0.85em; padding-top: 0.85em; border-top: 1px dashed rgba(26,26,26,0.10); }
        .reasoning .reasoning-toggle {
            cursor: pointer;
            font-size: 0.78em;
            opacity: 0.62;
            user-select: none;
            margin-bottom: 4px;
            display: inline-block;
            transition: opacity 0.18s var(--ease-soft), color 0.18s var(--ease-soft);
        }
        .reasoning .reasoning-toggle:hover { opacity: 1; color: var(--accent-text); }
        .msg.assistant.reasoning .bubble {
            border-left: 2px solid var(--border-hover);
            background: var(--bg-surface-hover);
        }

        /* ── Reduced-motion safety net ───────────────────────────────────────
           Honors the OS "reduce motion" setting: near-instant transitions and
           a single iteration for any looping keyframe (spinner, FAB pulse).
           The WebGL orb is independently gated off in jarvis-fx.js. */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ── Interactive Guided Mode ──────────────────────────────────────── */
        .guided-hero .hero-title { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
        .guided-mute {
            background: var(--bg-surface); border: 1px solid var(--border);
            border-radius: 999px; width: 34px; height: 34px; cursor: pointer;
            font-size: 0.95rem; line-height: 1; color: var(--text-secondary);
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .guided-mute:hover { background: var(--bg-surface-hover); border-color: var(--border-hover); }
        .guided-freeform-hint {
            margin-top: 18px; text-align: center; font-size: 0.85rem;
            color: var(--text-muted);
        }

        .guided-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
            gap: 12px; margin-top: 22px; width: 100%;
        }
        .guided-card {
            text-align: left; cursor: pointer;
            background: var(--bg-surface); border: 1px solid var(--border);
            border-radius: 14px; padding: 16px 16px; min-height: 64px;
            display: flex; flex-direction: column; gap: 4px;
            transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
        }
        .guided-card:hover {
            border-color: var(--accent); background: var(--bg-surface);
            transform: translateY(-1px);
            box-shadow: 0 4px 16px var(--accent-dim);
        }
        .guided-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .guided-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text-primary); }
        .guided-card-blurb { font-size: 0.82rem; color: var(--text-muted); line-height: 1.3; }

        /* Inline filter row (NOT a modal) */
        .guided-filter-row {
            align-self: flex-start; max-width: 680px; width: 100%;
            background: var(--bg-surface); border: 1px solid var(--border);
            border-radius: 16px; padding: 16px 18px; margin: 6px 0 4px 0;
            display: flex; flex-direction: column; gap: 14px;
        }
        .guided-filter-row.guided-filter-missing { border-color: var(--red); }
        .guided-filter-head { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
        .guided-filter-subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-top: -6px; }
        .guided-filter-group { display: flex; flex-direction: column; gap: 8px; }
        .guided-filter-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
        .guided-date-inputs { display: flex; gap: 10px; flex-wrap: wrap; }
        .guided-date {
            min-height: 42px; padding: 8px 12px; font-size: 16px; flex: 1; min-width: 130px;
            background: var(--bg-input); color: var(--text-primary);
            border: 1px solid var(--border); border-radius: 10px;
        }
        .guided-presets, .guided-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
        .guided-chip {
            min-height: 36px; padding: 7px 14px; font-size: 0.85rem; cursor: pointer;
            background: var(--bg-surface); color: var(--text-secondary);
            border: 1px solid var(--border); border-radius: 999px;
            transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
            white-space: nowrap;
        }
        .guided-chip:hover { background: var(--bg-surface-hover); border-color: var(--border-hover); }
        .guided-chip.selected {
            background: var(--accent); color: #fff; border-color: var(--accent);
        }
        .guided-filter-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
        .guided-show-btn {
            min-height: 42px; padding: 0 22px; font-weight: 600; font-size: 0.95rem; cursor: pointer;
            background: var(--accent); color: #fff; border: none; border-radius: 10px;
        }
        .guided-show-btn:hover { filter: brightness(1.05); }
        .guided-cancel-btn {
            min-height: 42px; padding: 0 16px; cursor: pointer; font-size: 0.9rem;
            background: transparent; color: var(--text-muted);
            border: 1px solid var(--border); border-radius: 10px;
        }
        .guided-filter-help { font-size: 0.78rem; color: var(--text-muted); }

        /* (.guided-next inline "What else?" block removed 2026-07-20 —
           superseded by the persistent Reports panel; the spoken cue stays.) */

        /* KPI stat tiles (above a guided answer) */
        .guided-kpi-grid {
            display: grid; gap: 10px; margin: 2px 0 10px 0;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
        }
        .guided-kpi-tile {
            background: var(--bg-surface); border: 1px solid var(--border);
            border-radius: 12px; padding: 14px 16px;
            display: flex; flex-direction: column; gap: 4px;
        }
        .guided-kpi-value { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--accent-text); line-height: 1.1; }
        .guided-kpi-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }

        @media (max-width: 600px) {
            .guided-card-grid { grid-template-columns: 1fr 1fr; }
            .guided-kpi-grid { grid-template-columns: 1fr 1fr; }
            .guided-filter-actions { flex-direction: row; }
            .guided-date { min-width: 0; }
        }
        @media (max-width: 380px) {
            .guided-card-grid { grid-template-columns: 1fr; }
        }

        /* ── Tactile feedback: press-dip + soft glow (JS-toggled .fb-press) ──
           Driven by a JS class, NOT :active — :active is unreliable/sticky on
           iOS and a picker already injects its own :active rules. The module
           adds .fb-press on pointerdown, removes it on up/cancel — so it can
           never stick. Gated behind (no-preference): the global reduced-motion
           net above zeros transition-duration, which would make the transform
           SNAP. Placed last so source order wins over the hover rules above. */
        @media (prefers-reduced-motion: no-preference) {
            button.fb-press, [role="button"].fb-press, .guided-card.fb-press,
            .chip.fb-press, .dash-card.fb-press, .ip-option.fb-press,
            .share-menu-item.fb-press, .dash-row.fb-press, .doc-open-link.fb-press {
                transform: scale(0.97);
                box-shadow: 0 0 0 3px var(--accent-glow);
                transition: transform 0.09s var(--ease-soft), box-shadow 0.09s var(--ease-soft);
            }
            /* Large card — a gentler dip so a big surface doesn't visibly jump. */
            .doc-card.fb-press {
                transform: scale(0.985);
                box-shadow: 0 0 0 3px var(--accent-glow);
                transition: transform 0.09s var(--ease-soft), box-shadow 0.09s var(--ease-soft);
            }
            /* Full-width rows must NOT scale (a shrinking row looks broken) —
               override the scale off; the tint below carries the press cue. */
            .chat-item.fb-press, .sidebar-footer a.fb-press {
                transform: none; box-shadow: none;
            }
        }
        /* Motion-free press-tint for full-width rows — OUTSIDE the media query
           so reduced-motion users still get a cue. Source-ordered after
           .chat-item.active so a press on the OPEN chat still tints briefly. */
        .chat-item.fb-press, .sidebar-footer a.fb-press { background: var(--accent-dim); }
        /* Runtime style switch (module stamps body[data-fb-style] from config):
           'press' drops the glow; 'none' kills the visual entirely (master-off,
           visual-off, and per-device mute all resolve to 'none'). */
        body[data-fb-style="press"] .fb-press { box-shadow: none !important; }
        body[data-fb-style="none"] .fb-press { transform: none !important; box-shadow: none !important; background: none !important; }