/* ================================================================
   ContextMove — Premium Monochrome Theme
   ================================================================ */

/* Feature gating — see frontend/js/features.js.
   Anything carrying [data-feature] is hidden from the first paint, before the
   flags have been fetched, so a capability this build doesn't ship never
   flashes on screen. features.js then removes the attribute (enabled) or the
   element itself (disabled). */
[data-feature] {
    display: none !important;
}

/* Screen-reader only utility */
.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;
}

:root {
    /* Legacy token set, aliased onto the core scale (defined further down in
       this same :root - custom properties resolve at use time, so order here
       doesn't matter). --cv-grid-bg is what actually paints .main-content.

       There is one palette. The app used to ship a dark set here with a light
       set overriding it under [data-theme="light"]; the dark half is gone and
       the light values are the only values, which is why nothing in this sheet
       mentions a theme any more. */
    --bg-primary:   var(--paper);
    --cv-grid-bg:   var(--paper);
    --bg-secondary: var(--surface);
    --bg-tertiary:  var(--sunk);
    --bg-elevated:  #EDE6E1;
    --bg-card:      var(--surface);
    --bg-glass:     rgba(255, 255, 255, 0.88);
    --bg-hover:     rgba(60,42,34,0.045);
    --bg-active:    rgba(60,42,34,0.07);
    --bg-surface:   rgba(60,42,34,0.025);

    --text-primary:   var(--ink);
    --text-secondary: var(--copy);
    --text-muted:     var(--muted);
    --text-faint:     var(--faint);

    /* The "ink accent" - used by active tag chips, the system-tab underline
       and .sys-tab-cnt, which this palette sets in charcoal rather than coral. */
    --accent: #111113;
    --accent-light: #27272a;
    --accent-glow: rgba(60,42,34,0.07);
    --accent-subtle: rgba(60,42,34,0.04);
    --accent-dim: rgba(60,42,34,0.06);
    --accent-fg: #18181b;

    --danger: #dc2626;
    --danger-bg: rgba(220, 38, 38, 0.07);
    --danger-border: rgba(220, 38, 38, 0.18);
    --success: #16a34a;
    --success-bg: rgba(22, 163, 74, 0.07);
    --success-border: rgba(22, 163, 74, 0.18);
    --warning: var(--coral);

    --border:        rgba(60,42,34,0.11);
    --border-subtle: rgba(60,42,34,0.06);
    --border-accent: rgba(60,42,34,0.22);

    --shadow-xs:   0 1px 2px rgba(60,42,34,0.07);
    --shadow-sm:   0 2px 8px rgba(60,42,34,0.08);
    --shadow-md:   0 4px 24px rgba(60,42,34,0.12);
    --shadow-lg:   0 16px 64px rgba(60,42,34,0.16), 0 0 0 1px rgba(60,42,34,0.05);
    --shadow-card: 0 1px 4px rgba(60,42,34,0.07), 0 0 0 1px rgba(60,42,34,0.06);
    --shadow-card-hover: 0 8px 32px rgba(60,42,34,0.12), 0 0 0 1px rgba(60,42,34,0.1);

    --sidebar-width: 248px;
    --content-max: 820px;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 100px;

    /* Legacy type tokens. Space Grotesk and DM Sans were dropped when the app
       moved to the contextmove.com face (see --cv-display / --cv-body below)
       and index.html no longer loads either one, so every rule still reading
       these silently fell back to the system sans. Aliased rather than
       search-and-replaced so the remaining call sites all land on one face. */
    --font-display: var(--cv-display);
    --font-body: var(--cv-body);
    --font-mono: var(--cv-mono);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition: 0.2s var(--ease);
    --transition-slow: 0.35s var(--ease);
    --transition-fast: 0.12s var(--ease);
}


/* Scrollbar */
:root ::-webkit-scrollbar-thumb { background: #c8c8ce; }
:root ::-webkit-scrollbar-thumb:hover { background: #9898a0; }

/* Card */
:root .context-card {
    background: #ffffff;
    border-color: rgba(60,42,34,0.08);
}

:root .context-card:hover {
    border-color: rgba(60,42,34,0.16);
    background: #ffffff;
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

:root .context-card::before {
    background: linear-gradient(90deg, var(--text-primary), transparent);
}

/* Sidebar */
:root .sidebar {
    background: #ffffff;
    border-right-color: rgba(60,42,34,0.1);
}

/* Sidebar nav text & icons need more contrast */
:root .nav-item {
    color: #52525b;
}

:root .nav-item.active {
    color: #111113;
}

:root .nav-item:hover:not(.active) {
    color: #2e2e33;
}

:root .btn-settings,
:root .btn-shortcuts,
:root .btn-embed-all,
:root .btn-restart {
    color: #52525b;
}

:root .btn-settings:hover,
:root .btn-shortcuts:hover,
:root .btn-embed-all:hover,
:root .btn-restart:hover {
    color: #111113;
    background: rgba(60,42,34,0.05);
}

/* Setup wizard */
:root .setup-shell {
    background: #ffffff;
    border-color: rgba(60,42,34,0.08);
}

:root .setup-card {
    background: #f7f7f8;
    border-color: rgba(60,42,34,0.08);
}

:root .setup-step.ok.setup-card {
    border-color: rgba(16,185,129,0.35);
}

:root .setup-step.warn.setup-card {
    border-color: rgba(239,68,68,0.3);
}

:root .setup-logo-wrap {
    background: #09090b;
}

:root .setup-progress-fill {
    background: #09090b;
}
/* Tooltips */
:root [data-tooltip]::after {
    background: #241F1B;
    color: #f0f0f0;
    border-color: rgba(255,238,230,0.08);
}

/* Nav active */
:root .nav-item.active {
    background: rgba(60,42,34,0.05);
}

:root .nav-item:hover:not(.active) {
    background: rgba(60,42,34,0.03);
}

/* Main content area background */
:root .main-content {
    background: #f7f7f8;
}

/* Primary button */
:root .btn-primary {
    background: #09090b;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(60,42,34,0.2);
}

:root .btn-primary:hover:not(:disabled) {
    background: #18181b;
    box-shadow: 0 4px 16px rgba(60,42,34,0.15);
}

/* Search box */
:root .search-box {
    background: #ffffff;
    border-color: rgba(60,42,34,0.1);
    box-shadow: 0 1px 3px rgba(60,42,34,0.04);
}

/* Modals */
:root .modal,
:root .settings-modal {
    background: #ffffff;
    border-color: rgba(60,42,34,0.08);
}

/* Progress bar */
:root .summarize-progress-bar {
    background: rgba(60,42,34,0.1);
}

:root .summarize-progress-fill {
    background: #09090b;
    box-shadow: none;
}

/* ================================================================
   Light mode — comprehensive fixes
   Problems fixed:
   - App shell hardcoded dark bg
   - Sidebar gradient overlay
   - Nav active: white glow removed
   - Context card hover: dark bg removed, top line fixed
   - Search/textarea focus: dark bg removed
   - Primary btn hover: white bg replaced
   - Setup pending step: white borders/bg
   - Vitals code cyan unreadable
   - Code snippet indigo unreadable
   - Status banners amber too light
   - Settings embed warning amber too light
   - Download progress bars (white bg invisible)
   - Confirm dialog OK button
   - CV cmdk / nav-kbd / vibe / side-iconbtn
   - CV stat mouse-tracking glow
   - CV pipeline status badge
   - Voltword glow line
   - Collection items hover/active
   - Input focus borders
   ================================================================ */

/* App shell */
:root #app.app-container { background: var(--paper); }

/* Sidebar overlay — dark rgba lines invisible on white */
:root .sidebar::before {
    background: linear-gradient(180deg, rgba(60,42,34,0.008) 0%, transparent 40%, transparent 60%, rgba(60,42,34,0.025) 100%);
}

/* Main content vignette — white glow pointless on light */
:root .main-content::before {
    background: none;
}

/* Nav active — white glow + white shadow removed */
:root .nav-item.active {
    box-shadow: none;
}

/* Context card hover — remove dark background */
:root .context-card:hover {
    background: #ffffff;
    border-color: rgba(60,42,34,0.16);
}

/* Context card top-line gradient — rgba(255,255,255) invisible on white */
:root .context-card::before {
    background: linear-gradient(90deg, rgba(60,42,34,0.07), transparent 80%);
}
:root .context-card:hover::before {
    background: linear-gradient(90deg, rgba(60,42,34,0.18), transparent 80%);
}

/* Search box focus — dark bg removed */
:root .search-box:focus-within {
    background: #ffffff;
    border-color: rgba(60,42,34,0.22);
    box-shadow: 0 0 0 3px rgba(60,42,34,0.06), 0 4px 16px rgba(60,42,34,0.06);
}

/* Chat textarea focus — dark bg removed */
:root .chat-textarea:focus {
    background: #ffffff;
    border-color: rgba(60,42,34,0.2);
    box-shadow: inset 0 2px 4px rgba(60,42,34,0.04), 0 0 0 3px rgba(60,42,34,0.06);
}

/* Primary btn hover — hardcoded #ffffff replaced */
:root .btn-primary:hover:not(:disabled) {
    background: #27272a;
    box-shadow: var(--shadow-sm);
}

/* Setup wizard — pending step white bg/border */
:root .setup-step.pending.setup-card { border-color: rgba(60,42,34,0.1); }
:root .setup-step.pending .setup-card-icon {
    background: rgba(60,42,34,0.03);
    border-color: rgba(60,42,34,0.08);
}
:root .setup-step.pending .setup-card-dot { background: rgba(60,42,34,0.18); }

/* Prompt size btn hover — rgba(255,238,230,0.04) invisible */
:root .prompt-size-btn:hover { background: rgba(60,42,34,0.04); }

/* Code snippet header — rgba(255,238,230,0.03) invisible */
:root .code-snippet-header { background: rgba(60,42,34,0.025); border-bottom-color: rgba(60,42,34,0.06); }

/* Vitals code — cyan (#67e8f9) unreadable on white */
:root .vitals-item code {
    color: #0369a1;
    background: rgba(3,105,161,0.06);
    border-color: rgba(3,105,161,0.14);
}

/* Code snippet — light indigo unreadable on white */
:root .code-snippet-lang { color: #4338ca; }
:root .snippets-count { color: #4338ca; background: rgba(242,84,45,0.1); }
:root .code-snippet-copy {
    background: rgba(242,84,45,0.08);
    color: #4338ca;
    border-color: rgba(242,84,45,0.2);
}
:root .code-snippet-copy:hover { background: rgba(242,84,45,0.15); }
:root .code-snippet-copy.copied { color: #047857; background: rgba(5,150,105,0.1); border-color: rgba(5,150,105,0.25); }

/* Status banners — amber (#fcd34d, #fbbf24) too light on white */
:root .detail-status-banner.status-summarizing {
    color: var(--coral);
    background: rgba(39,39,42,0.07);
    border-color: rgba(39,39,42,0.2);
}
:root .detail-spinner { border-color: rgba(39,39,42,0.2); border-top-color: #27272a; }
:root .status-badge.status-summarizing {
    color: var(--coral);
    background: rgba(39,39,42,0.1);
    border-color: rgba(39,39,42,0.25);
}
:root .badge-spinner { border-color: rgba(39,39,42,0.2); border-top-color: #27272a; }

/* Settings embed warning — amber on white */
:root .settings-embed-warning {
    color: var(--coral);
    background: rgba(39,39,42,0.07);
    border-color: rgba(39,39,42,0.2);
}

/* Download progress bars — rgba(255,255,255,0.x) invisible on white */
:root .settings-download-bar-bg { background: rgba(60,42,34,0.08); }
:root .cv-dl-badge-head-bar { background: rgba(60,42,34,0.06); }
:root .cv-dl-bar-bg { background: rgba(60,42,34,0.07); }
:root .cv-dl-badge.cv-dl-open .cv-dl-badge-panel { border-top-color: rgba(60,42,34,0.07); }
:root .cv-dl-badge {
    background: #ffffff;
    border-color: rgba(60,42,34,0.1);
    box-shadow: 0 4px 20px rgba(60,42,34,0.1);
}

/* Confirm dialog OK button — white border/bg */
:root .cv-confirm-ok {
    border-color: rgba(60,42,34,0.14);
    background: rgba(60,42,34,0.05);
    color: var(--text-primary);
}
:root .cv-confirm-ok:hover { background: rgba(60,42,34,0.09); }
:root .cv-confirm-ok.danger {
    background: rgba(220,38,38,0.08);
    border-color: rgba(220,38,38,0.25);
    color: #dc2626;
}

/* Collection items hover/active — white rgba invisible */
:root .collections-list .collection-item:hover { background: rgba(60,42,34,0.04); color: #2e2e33; }
:root .collections-list .collection-item.active { background: rgba(60,42,34,0.06); color: #111113; border-color: rgba(60,42,34,0.1); }

/* Input focus borders — white rgba meaningless on light */
:root .settings-profile-input:focus,
:root .settings-profile-textarea:focus,
:root .form-input:focus,
:root .cloud-key-input:focus { border-color: rgba(60,42,34,0.28); }

/* CV topbar cmdk — white rgba bg on light */
:root .cv-cmdk {
    background: rgba(60,42,34,0.04);
    border-color: rgba(60,42,34,0.09);
    color: #52525b;
}
:root .cv-cmdk:hover { background: rgba(60,42,34,0.06); color: #2e2e33; border-color: rgba(60,42,34,0.14); }
:root .cv-cmdk kbd { background: rgba(60,42,34,0.05); color: #71717a; border-color: rgba(60,42,34,0.1); }

/* CV nav-kbd badge in sidebar */
:root .cv-nav-kbd { background: rgba(60,42,34,0.04); color: #a1a1aa; border-color: rgba(60,42,34,0.09); }

/* CV side icon button */
:root .cv-side-iconbtn { border-color: rgba(60,42,34,0.1); color: #71717a; }
:root .cv-side-iconbtn:hover { color: #27272a; border-color: rgba(39,39,42,0.3); background: rgba(39,39,42,0.07); }


/* CV primary button — coral in light too. This was a charcoal gradient because
   light mode's "accent" used to be near-black; the palette has a real accent
   now, and it should be the same accent in both themes. */
:root .cv-primary {
    background: var(--brand-gradient);
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(255,238,230,0.3) inset, 0 0 0 1px rgba(60,42,34,0.12), 0 4px 16px -4px rgba(242,84,45,0.35);
}
:root .cv-primary svg { color: #ffffff; }
:root .cv-primary:hover { box-shadow: 0 1px 0 rgba(255,238,230,0.3) inset, 0 0 0 1px rgba(60,42,34,0.12), 0 10px 28px -4px rgba(242,84,45,0.45); }

/* CV stat mouse-tracking glow — white glow invisible on light */
:root .cv-stat::before {
    background: radial-gradient(600px 180px at var(--mx,50%) var(--my,-20%), rgba(60,42,34,0.035), transparent 60%);
}

/* CV stat nth-child(1) dot — volt (bright yellow-green) on white */
:root .cv-stat:nth-child(1) .k .dot { background: #27272a; box-shadow: 0 0 6px rgba(39,39,42,0.3); }

/* CV pipeline status badge — volt green on white */
:root .cv-pipe-status {
    color: #27272a;
    background: rgba(39,39,42,0.08);
    border-color: rgba(39,39,42,0.2);
}
:root .cv-pipe-status::before { background: #27272a; box-shadow: 0 0 8px rgba(39,39,42,0.35); animation: cv-blink 1.2s infinite; }

/* Pipeline progress fill on light */
:root .summarize-progress-fill {
    background: linear-gradient(90deg, #52525b, #27272a);
    box-shadow: 0 0 6px rgba(39,39,42,0.3);
}

/* Voltword underline glow — volt color too light on white */
:root .cv-hero h1 .voltword::after,
:root .cv-capture-title .voltword::after {
    background: linear-gradient(90deg, transparent, #52525b 20%, #52525b 80%, transparent);
}

/* Spinner in buttons — border should be dark on light */
:root .spinner { border-color: rgba(60,42,34,0.15); border-top-color: #ffffff; }

/* Ask page suggestion pills */
:root .ask-suggestion { background: #ffffff; border-color: rgba(60,42,34,0.09); }
:root .ask-suggestion:hover { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.16); }

/* ================================================================
   Reset & Base
   ================================================================ */

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

html, body { height: 100%; overflow: hidden; }

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    text-rendering: optimizeLegibility;
}

::selection { background: rgba(255,238,230,0.12); color: var(--ink); }
:root ::selection { background: rgba(60,42,34,0.12); color: #000; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255,238,230,0.08);
    border-radius: 10px;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,238,230,0.16); }

/* ================================================================
   Setup Wizard -- Centered card layout
   ================================================================ */

.setup-wizard {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    z-index: 1000;
    animation: fadeIn 0.6s var(--ease-out);
}

.setup-shell {
    width: 100%;
    max-width: 500px;
    padding: 32px 36px 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 32px 80px rgba(12,9,8,0.5), 0 0 0 1px rgba(255,238,230,0.04);
    animation: shellIn 0.55s var(--ease-spring);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@keyframes shellIn {
    from { opacity: 0; transform: scale(0.96) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modalSpring {
    0%   { opacity: 0; transform: scale(0.94) translateY(20px); }
    60%  { opacity: 1; transform: scale(1.015) translateY(-2px); }
    80%  { transform: scale(0.997) translateY(0.5px); }
    100% { transform: scale(1) translateY(0); }
}

@keyframes shellOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.97) translateY(8px); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes starPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4) rotate(-8deg); }
    70%  { transform: scale(0.9) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position: 800px 0; }
}

@keyframes subtleGlow {
    0%   { opacity: 0.5; }
    50%  { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Header row */
.setup-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setup-logo-wrap {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow:
        0 0 0 1px rgba(255,238,230,0.09),
        0 2px 8px rgba(12,9,8,0.45);
}
.setup-logo-wrap img { width: 28px; height: 28px; display: block; object-fit: cover; }

.setup-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1;
    flex: 1;
}

.setup-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* Hero */
.setup-hero {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.setup-hero-heading {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    line-height: 1.2;
}

.setup-hero-sub {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 400;
}

/* Progress track */
.setup-progress-track {
    height: 2px;
    background: var(--bg-active);
    border-radius: 100px;
    overflow: hidden;
}

.setup-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--text-primary);
    border-radius: 100px;
    transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The staged progress bar is gone: it advanced per service check, and there is
   now only one check. The indeterminate .setup-ibar carries the loading state
   instead. #step-ollama / #step-model no longer exist. */

/* Service cards */
.setup-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setup-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.35s ease, box-shadow 0.4s ease;
    position: relative;
}

.setup-step.ok.setup-card {
    border-color: color-mix(in oklab, var(--ok) 28%, transparent);
    box-shadow: inset 0 0 24px color-mix(in oklab, var(--ok) 4%, transparent);
}

.setup-step.warn.setup-card {
    border-color: rgba(248, 113, 113, 0.28);
    box-shadow: inset 0 0 24px rgba(248, 113, 113, 0.04);
}

.setup-step.pending.setup-card {
    border-color: rgba(255,238,230,0.1);
}

/* Card icon box */
.setup-card-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color 0.3s, background 0.3s, border-color 0.3s;
}

.setup-card-icon svg {
    width: 17px;
    height: 17px;
}

.setup-step.ok .setup-card-icon {
    color: var(--ok);
    background: color-mix(in oklab, var(--ok) 8%, transparent);
    border-color: color-mix(in oklab, var(--ok) 20%, transparent);
}

.setup-step.warn .setup-card-icon {
    color: #f87171;
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.2);
}

.setup-step.pending .setup-card-icon {
    color: var(--text-secondary);
    background: rgba(255,238,230,0.04);
    border-color: rgba(255,238,230,0.1);
    animation: setupPulse 2s ease-in-out infinite;
}

/* Card body */
.setup-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.setup-card-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-primary);
    transition: color 0.25s ease;
    line-height: 1;
}

.setup-step.ok .setup-card-name { color: var(--ok); }
.setup-step.warn .setup-card-name { color: #f87171; }

.setup-card-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    transition: color 0.25s ease;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setup-step.ok .setup-card-desc { color: color-mix(in oklab, var(--ok) 70%, transparent); }
.setup-step.warn .setup-card-desc { color: rgba(248, 113, 113, 0.7); }

/* State dot */
.setup-card-state {
    flex-shrink: 0;
}

.setup-card-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-faint);
    display: block;
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

.setup-step.pending .setup-card-dot {
    background: rgba(255,238,230,0.25);
    animation: dotPulse 1.8s ease-in-out infinite;
}

.setup-step.ok .setup-card-dot {
    background: var(--ok);
    box-shadow: 0 0 7px color-mix(in oklab, var(--ok) 65%, transparent);
}

.setup-step.warn .setup-card-dot {
    background: #f87171;
    box-shadow: 0 0 7px rgba(248, 113, 113, 0.55);
}

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

@keyframes setupPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,238,230,0.06); }
    50%      { box-shadow: 0 0 0 5px rgba(255,238,230,0); }
}

/* Footer */
.setup-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}

.setup-status-text {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
}

/* Embed model picker (setup phase 2) */
#setup-embed-area {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.setup-embed-heading {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-align: center;
}

.embed-model-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.embed-model-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--bg-secondary);
}

.embed-model-card:hover {
    border-color: var(--border-accent);
    background: var(--bg-tertiary);
}

.embed-model-card.selected {
    border-color: var(--text-primary);
    background: var(--bg-tertiary);
}

.embed-model-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.embed-model-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.embed-recommended {
    font-size: 10px;
    font-weight: 500;
    color: var(--ok);
    border: 1px solid color-mix(in oklab, var(--ok) 40%, transparent);
    border-radius: 4px;
    padding: 1px 6px;
}

.embed-installed {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
}

.embed-model-size {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: auto;
}

.embed-model-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ================================================================
   App Layout
   ================================================================ */

.app-container {
    display: flex;
    height: 100vh;
    background: var(--bg-primary);
    /* Leave room for the custom title bar so content isn't hidden behind it. */
    padding-top: var(--cv-titlebar-h, 34px);
    box-sizing: border-box;
}

/* ================================================================
   Custom title bar (frameless pywebview window chrome)
   ================================================================ */
:root { --cv-titlebar-h: 34px; }

.cv-titlebar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--cv-titlebar-h);
    display: flex;
    align-items: stretch;
    /* Sit above everything (modals, toasts, setup wizard) so the window can
       always be dragged or closed. */
    z-index: 2147483000;
    background: var(--bg-primary, #161311);
    border-bottom: 1px solid var(--border, rgba(255,238,230,0.07));
    user-select: none;
    -webkit-user-select: none;
}

.cv-titlebar-drag {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    min-width: 0;
    /* .pywebview-drag-region makes this area move the window on mousedown. */
}

.cv-titlebar-logo {
    width: 18px; height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    display: block;
}

.cv-titlebar-brand {
    font-family: var(--cv-mono, monospace);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--cv-text-2, #B6A79F);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-winctl {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

.cv-winbtn {
    width: 46px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    margin: 0; padding: 0;
    color: var(--cv-text-3, #8A7A72);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    -webkit-app-region: no-drag;
}
.cv-winbtn svg { width: 12px; height: 12px; }
/* Maximize button swaps to a restore (overlapping squares) glyph when maximized */
.cv-winbtn .cv-ic-restore { display: none; }
.cv-winbtn.is-maximized .cv-ic-max { display: none; }
.cv-winbtn.is-maximized .cv-ic-restore { display: block; }
.cv-winbtn:hover { background: rgba(255,238,230,0.07); color: var(--cv-text-1, #B6A79F); }
.cv-winbtn:active { background: rgba(255,238,230,0.12); }
.cv-winbtn-close:hover { background: #e81123; color: #fff; }
.cv-winbtn-close:active { background: #c50f1f; }

/* Invisible window-edge grips. Corners sit above edges so they win the hit. */
.cv-resize-handles { position: fixed; inset: 0; pointer-events: none; z-index: 2147483001; }
.cv-rz { position: fixed; pointer-events: auto; }
.cv-rz-t  { top: 0; left: 0; right: 0; height: 4px; cursor: ns-resize; }
.cv-rz-b  { bottom: 0; left: 0; right: 0; height: 4px; cursor: ns-resize; }
.cv-rz-l  { top: 0; bottom: 0; left: 0; width: 4px; cursor: ew-resize; }
.cv-rz-r  { top: 0; bottom: 0; right: 0; width: 4px; cursor: ew-resize; }
.cv-rz-tl { top: 0; left: 0; width: 8px; height: 8px; cursor: nwse-resize; z-index: 1; }
.cv-rz-tr { top: 0; right: 0; width: 8px; height: 8px; cursor: nesw-resize; z-index: 1; }
.cv-rz-bl { bottom: 0; left: 0; width: 8px; height: 8px; cursor: nesw-resize; z-index: 1; }
.cv-rz-br { bottom: 0; right: 0; width: 8px; height: 8px; cursor: nwse-resize; z-index: 1; }

:root .cv-titlebar { background: #ffffff; border-bottom-color: rgba(60,42,34,0.09); }
:root .cv-titlebar-brand { color: #52525b; }
:root .cv-winbtn { color: #71717a; }
:root .cv-winbtn:hover { background: rgba(60,42,34,0.06); color: #18181b; }
:root .cv-winbtn-close:hover { background: #e81123; color: #fff; }

/* ================================================================
   Sidebar — Premium Design
   ================================================================ */

.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* The sidebar itself never scrolls — only the collections list does. */
    overflow: hidden;
    position: relative;
}

/* Subtle gradient overlay on sidebar */
.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,238,230,0.015) 0%, transparent 40%, transparent 60%, rgba(60,42,34,0.1) 100%);
    pointer-events: none;
    z-index: 0;
}

.sidebar > * { position: relative; z-index: 1; }

.sidebar-header {
    padding: 20px 16px 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-brand {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}

.sidebar-nav {
    padding: 8px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    text-align: left;
    position: relative;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.nav-item.active {
    background: rgba(255,238,230,0.06);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px rgba(255,238,230,0.04);
}

.nav-item.active::before,
.nav-item:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    background: var(--text-primary);
    border-radius: 0 3px 3px 0;
    transition: height 0.25s var(--ease-spring);
}

.nav-item.active::before { height: 18px; }
.nav-item:hover:not(.active)::before { height: 8px; opacity: 0.25; }

.nav-icon {
    font-size: 15px;
    width: 22px;
    text-align: center;
    opacity: 0.65;
    transition: opacity var(--transition);
}

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

.nav-item:hover .nav-icon { opacity: 0.85; }
.nav-item.active .nav-icon { opacity: 1; }

/* ── Collections ─────────────────────────────────────────────── */
.collections-section {
    padding: 0 10px 6px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
}

.collections-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 6px 4px;
}

.collections-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.btn-add-collection {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    padding: 0;
}

.btn-add-collection:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-accent);
    transform: scale(1.1);
}

.collection-create-row {
    padding: 4px 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.collection-color-picker {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s var(--ease-spring);
}

.color-swatch:hover { transform: scale(1.25); }
.color-swatch.active { border-color: var(--text-primary); transform: scale(1.15); }

.collection-name-input {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    padding: 6px 10px;
    width: 100%;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.collection-name-input:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.collections-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* New-collection modal */
.cv-collection-modal { max-width: 420px; }
.cv-coll-modal-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.cv-coll-modal-colors .color-swatch { width: 26px; height: 26px; }

/* "Show all" affordance at the bottom of the sidebar collections list */
.collection-showall {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    width: 100%; margin-top: 3px;
    padding: 8px 10px; border-radius: var(--cv-r-sm);
    background: transparent; border: 1px solid transparent;
    color: var(--cv-text-3); font: 500 11.5px/1 var(--cv-mono);
    letter-spacing: 0.04em; cursor: pointer;
    transition: background 0.16s var(--cv-ease), color 0.16s var(--cv-ease), border-color 0.16s var(--cv-ease);
}
.collection-showall:hover { background: rgba(255,238,230,0.03); color: var(--cv-text-1); border-color: var(--cv-line-2); }
:root .collection-showall:hover { background: rgba(60,42,34,0.04); color: #2e2e33; }

/* "Show all collections" modal (searchable) */
.cv-collections-modal { max-width: 440px; }
.cv-collections-modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cv-collections-modal-head h2 { flex: 1; margin: 0; }
.cv-coll-search {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; margin-bottom: 12px;
    border-radius: 10px; border: 1px solid var(--cv-line);
    background: rgba(255,238,230,0.03); color: var(--cv-text-3);
    transition: border-color 0.16s var(--cv-ease);
}
:root .cv-coll-search { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.08); }
.cv-coll-search:focus-within { border-color: color-mix(in oklab, var(--cv-volt) 45%, transparent); }
.cv-coll-search input,
.cv-coll-search input:focus,
.cv-coll-search input:focus-visible {
    flex: 1; min-width: 0;
    background: transparent !important; border: 0 !important;
    outline: none !important; box-shadow: none !important;
    color: var(--cv-text-0); font: 400 13px/1.4 var(--cv-body);
}
.cv-coll-search input::placeholder { color: var(--cv-text-3); }
.cv-collections-modal-list { max-height: 52vh; overflow-y: auto; padding-right: 3px; }
.cv-collections-modal-list::-webkit-scrollbar { width: 6px; }
.cv-collections-modal-list::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.14); border-radius: 3px; }
:root .cv-collections-modal-list::-webkit-scrollbar-thumb { background: rgba(60,42,34,0.18); }
.cv-coll-empty { padding: 24px 8px; text-align: center; color: var(--cv-text-3); font-size: 13px; }

.collection-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-family: inherit;
    position: relative;
}

.collection-item:hover { background: var(--bg-hover); }

/* ── Collections dropdown: items fold under the "All" header row ──
   Open: spring-ish ease-out expansion, rows cascade in with a slight drop.
   Close: faster, items tuck up and fade before the panel finishes folding. */
.collections-dropdown {
    display: grid; grid-template-rows: 1fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.collections-dropdown.closed {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.26s cubic-bezier(0.6, 0, 0.75, 0.4);
}
.collections-dropdown-inner { min-height: 0; overflow: hidden; }
.collections-dropdown-inner > * {
    opacity: 1; transform: translateY(0);
    transition:
        opacity   0.30s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.18s var(--cv-ease);
}
/* cascade on open — each row lands a beat after the one above it */
.collections-dropdown:not(.closed) .collections-dropdown-inner > :nth-child(1) { transition-delay: 0.04s, 0.04s, 0s; }
.collections-dropdown:not(.closed) .collections-dropdown-inner > :nth-child(2) { transition-delay: 0.08s, 0.08s, 0s; }
.collections-dropdown:not(.closed) .collections-dropdown-inner > :nth-child(3) { transition-delay: 0.12s, 0.12s, 0s; }
.collections-dropdown:not(.closed) .collections-dropdown-inner > :nth-child(4) { transition-delay: 0.16s, 0.16s, 0s; }
.collections-dropdown:not(.closed) .collections-dropdown-inner > :nth-child(5) { transition-delay: 0.20s, 0.20s, 0s; }
.collections-dropdown:not(.closed) .collections-dropdown-inner > :nth-child(n+6) { transition-delay: 0.24s, 0.24s, 0s; }
.collections-dropdown.closed .collections-dropdown-inner > * {
    opacity: 0; transform: translateY(-10px);
    transition:
        opacity   0.16s cubic-bezier(0.4, 0, 1, 1),
        transform 0.20s cubic-bezier(0.4, 0, 1, 1),
        background 0.18s var(--cv-ease);
}
.collection-all .collection-chev {
    margin-left: 4px; flex-shrink: 0; color: var(--cv-text-3);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    transform: rotate(-90deg);
}
.collection-all.open .collection-chev { transform: rotate(0deg); }
.collection-all:hover .collection-chev { color: var(--cv-text-1); }

.collection-item.active {
    background: var(--bg-active);
    color: var(--text-primary);
}

.collection-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform var(--transition);
}

.collection-item:hover .collection-dot { transform: scale(1.2); }

.collection-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-item-count {
    font-size: 10px;
    color: var(--text-faint);
    background: var(--bg-surface);
    border-radius: 10px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.collection-item-share,
.collection-item-rename,
.collection-item-delete {
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    line-height: 0;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity var(--transition), transform var(--transition);
}

.collection-item-share { color: var(--text-secondary); }
.collection-item-rename { color: var(--text-secondary); }
.collection-item-delete { color: var(--danger); }

.collection-item-share:hover,
.collection-item-rename:hover,
.collection-item-delete:hover { opacity: 1; transform: scale(1.1); }

.collection-item:hover .collection-item-share,
.collection-item:hover .collection-item-rename,
.collection-item:hover .collection-item-delete { display: flex; }

.collection-rename-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-accent);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 12.5px;
    font-family: inherit;
    padding: 1px 5px;
    outline: none;
}

.card-collection-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.detail-collection-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.detail-collection-label {
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.collection-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: inherit;
    padding: 3px 8px;
    cursor: pointer;
    outline: none;
}

.collection-select:focus { border-color: var(--border-accent); }

/* ── Sidebar Footer — Grouped & Refined ─────────────────────── */
.sidebar-footer {
    padding: 10px 14px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
}

/* Section labels inside sidebar */
.sidebar-section-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    padding: 10px 6px 4px;
    user-select: none;
}

.sidebar-section-label:first-child {
    padding-top: 2px;
}

.btn-embed-all {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-embed-all:hover {
    color: var(--text-primary);
    border-color: var(--border);
    background: var(--bg-hover);
}

.btn-embed-all:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-restart {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-restart svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.btn-restart:hover {
    color: var(--text-primary);
    border-color: var(--border);
    background: var(--bg-hover);
}

.btn-restart:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-restart.restarting {
    opacity: 0.6;
    cursor: not-allowed;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    margin-top: 4px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-faint);
    transition: all var(--transition);
    flex-shrink: 0;
}

.status-dot.online {
    background: var(--success);
    box-shadow: 0 0 8px color-mix(in oklab, var(--ok) 50%, transparent);
}

/* ================================================================
   Main Content — with vignette
   ================================================================ */

.main-content {
    flex: 1;
    overflow-y: auto;
    padding: clamp(28px, 4vh, 56px) clamp(32px, 4vw, 72px);
    position: relative;
    background: var(--bg-primary);
    /* Layout containment: descendants don't re-layout when main-content's
       outer box changes size. This isolates the sidebar's width animation
       from the entire dashboard tree (charts, stat grids, etc.) — the
       biggest source of perceived collapse-animation lag. */
    contain: layout paint;
}

/* Ultra-subtle radial vignette */
.main-content::before {
    content: '';
    position: fixed;
    inset: 0;
    left: var(--sidebar-width);
    background: radial-gradient(ellipse at 50% 0%, rgba(255,238,230,0.012) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Views */
.view { width: 100%; box-sizing: border-box; overflow-x: hidden; position: relative; z-index: 1; }


#view-detail { max-width: 920px;  margin: 0 auto; }

.view-header {
    margin-bottom: 36px;
}

.view-header h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.03em;
    line-height: 1.15;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.view-desc {
    color: var(--text-muted);
    font-size: 14px;
    max-width: 540px;
    line-height: 1.7;
    font-weight: 400;
}

/* ── Hero Icon (New Chat) ─────────────────────────────────────── */
.input-hero {
    text-align: left;
}

.hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255,238,230,0.03);
    border: 1px solid var(--border);
    margin-bottom: 18px;
    color: var(--text-muted);
    transition: all 0.3s var(--ease);
}

.hero-icon svg {
    opacity: 0.5;
    transition: opacity 0.3s;
}

.input-hero:hover .hero-icon {
    border-color: var(--border-accent);
    background: rgba(255,238,230,0.05);
}

.input-hero:hover .hero-icon svg {
    opacity: 0.7;
}

:root .hero-icon {
    background: rgba(60,42,34,0.025);
}

/* ================================================================
   Dashboard — Premium Home Screen
   ================================================================ */

#view-input {
    max-width: 960px;
    margin: 0 auto;
}

/* ── Dashboard Header (Greeting + Quick Capture) ─────────────── */
.dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}

.dashboard-greeting-area {
    flex: 1;
}

.dashboard-greeting {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--text-primary);
    -webkit-text-fill-color: unset;
    background: none;
    margin-bottom: 0;
}

.dashboard-greeting-name {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-muted) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quick-capture-btn {
    flex-shrink: 0;
    margin-top: 8px;
    padding: 10px 22px;
    font-size: 13.5px;
    gap: 8px;
}

/* ── Dashboard Stats Cards ───────────────────────────────────── */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}

.stat-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    transition: all 0.3s var(--ease);
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-height: 120px;
}

/* Subtle glass shine effect */
.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,238,230,0.04) 0%, transparent 50%, transparent 100%);
    pointer-events: none;
    border-radius: var(--radius);
}

.stat-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.stat-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    line-height: 1;
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(242,84,45,0.12);
    color: #818cf8;
    flex-shrink: 0;
    transition: all 0.3s var(--ease);
}

.stat-card:hover .stat-icon {
    background: rgba(242,84,45,0.18);
    color: #a5b4fc;
}

/* Stat cards */
:root .stat-card {
    background: #ffffff;
    border-color: rgba(60,42,34,0.08);
}

:root .stat-card::before {
    background: linear-gradient(135deg, rgba(60,42,34,0.01) 0%, transparent 50%);
}

:root .stat-card:hover {
    border-color: rgba(60,42,34,0.16);
    box-shadow: var(--shadow-card-hover);
}

:root .stat-icon {
    background: rgba(242,84,45,0.08);
    color: var(--coral);
}

/* ── Dashboard Section Header ────────────────────────────────── */
.dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dashboard-section-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.dashboard-see-all {
    font-size: 12px;
    gap: 4px;
    color: var(--text-muted);
}

.dashboard-see-all:hover {
    color: var(--text-primary);
}

/* ── Dashboard Recent Contexts — 2-Column Grid ───────────────── */
.dashboard-recent-section {
    margin-bottom: 24px;
}

.dashboard-recent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.dashboard-recent-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

/* Top accent line on recent cards */
.dashboard-recent-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--text-primary) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s var(--ease);
}

.dashboard-recent-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

.dashboard-recent-card:hover::before {
    opacity: 1;
}

.dashboard-recent-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dashboard-recent-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    line-height: 1.3;
}

.dashboard-recent-card-summary {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-recent-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.dashboard-recent-card-date {
    font-size: 11px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* Source badge inside recent cards */
.dashboard-recent-card .source-badge {
    font-size: 10px;
    flex-shrink: 0;
}

/* Recent cards */
:root .dashboard-recent-card {
    background: #ffffff;
    border-color: rgba(60,42,34,0.08);
}

:root .dashboard-recent-card:hover {
    border-color: rgba(60,42,34,0.16);
    background: #ffffff;
    box-shadow: var(--shadow-card-hover);
}

:root .dashboard-recent-card::before {
    background: linear-gradient(90deg, var(--text-primary) 0%, transparent 100%);
}

/* Empty state */
.dashboard-recent-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 120px;
    color: var(--text-faint);
    font-size: 13px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 24px;
    grid-column: 1 / -1;
}

/* ── Quick Capture View ─────────────────────────────────────── */
.cv-capture-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    isolation: isolate;
}

/* Same island as the dashboard navbar: full-bleed to 16px, sticky-height band,
   and a right reserve so the breadcrumb/back button clear the floating lights.
   Scoped to #view-capture to win over the later .cv-topbar padding/margin shorthands. */
#view-capture .cv-capture-rail {
    margin: var(--cv-rail-top) 16px 18px;
    padding-left: 18px;
    padding-right: 128px;
    flex-shrink: 0;
}

.cv-capture-rail-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--cv-mono); font-size: 11.5px; color: var(--cv-text-3);
    letter-spacing: 0.02em;
}
.cv-capture-rail-meta b { color: var(--cv-text-1); font-weight: 500; }
:root .cv-capture-rail-meta b { color: #27272a; }
.cv-capture-rail-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.capture-back-btn { font-size: 12.5px; }

.cv-capture-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 0;
}
.cv-capture-scroll::-webkit-scrollbar { width: 5px; }
.cv-capture-scroll::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.08); border-radius: 3px; }
.cv-capture-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,238,230,0.14); }
:root .cv-capture-scroll::-webkit-scrollbar-thumb { background: rgba(60,42,34,0.1); }

.cv-capture-inner {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    animation: cv-ask-empty-in 0.45s var(--cv-ease) both;
}

/* Hero */
.cv-capture-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    padding-bottom: 8px;
}

.cv-capture-orb {
    width: 76px; height: 76px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 30% 30%, var(--cv-volt-dim), transparent 70%);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 22%, transparent);
    color: var(--cv-volt);
    box-shadow: 0 0 48px var(--cv-volt-glow);
    animation: cv-empty-pulse 3s ease-in-out infinite;
    position: relative;
}
.cv-capture-orb svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.cv-capture-orb::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--cv-volt) 30%, transparent);
    opacity: 0.4; animation: cv-live-ring 2.8s cubic-bezier(0.2,0.7,0.1,1) infinite;
}

.cv-capture-title {
    font-family: var(--cv-display); font-weight: 700;
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.1; letter-spacing: -0.045em;
    margin: 0; padding-bottom: 0.08em; color: var(--cv-text-0);
    text-wrap: balance;
}
:root .cv-capture-title { color: #111113; }
.cv-capture-title .voltword {
    position: relative;
    background: linear-gradient(180deg, color-mix(in oklab, var(--cv-volt) 88%, white 12%) 0%, var(--cv-volt) 45%, var(--cv-volt-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-style: italic; font-weight: 400;
    padding-right: 0.2em;
}
.cv-capture-title .voltword::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.1em; height: 0.06em;
    background: linear-gradient(90deg, transparent, var(--cv-volt) 20%, var(--cv-volt) 80%, transparent);
    filter: blur(6px); opacity: 0.5;
}
:root .cv-capture-title .voltword {
    background: linear-gradient(180deg, #2a2b31, #0d0e11 100%);
    -webkit-background-clip: text; background-clip: text;
}

.cv-capture-desc {
    font-family: var(--cv-body);
    font-size: 14px; line-height: 1.65;
    color: var(--cv-text-2);
    max-width: 520px;
    margin: 0;
}
:root .cv-capture-desc { color: #52525b; }

/* Input card */
.cv-capture-card {
    background: linear-gradient(180deg, var(--cv-bg-2), var(--cv-bg-1));
    border: 1px solid var(--cv-line-2);
    border-radius: var(--cv-r-lg);
    overflow: hidden;
    box-shadow: 0 2px 24px rgba(60,42,34,0.28), 0 0 0 1px rgba(255,238,230,0.02) inset;
    transition: border-color 0.2s var(--cv-ease), box-shadow 0.2s var(--cv-ease);
}
:root .cv-capture-card {
    background: #ffffff;
    border-color: rgba(60,42,34,0.08);
    box-shadow: 0 2px 16px rgba(60,42,34,0.06);
}
.cv-capture-card:focus-within {
    border-color: color-mix(in oklab, var(--cv-volt) 35%, transparent);
    box-shadow: 0 2px 24px rgba(60,42,34,0.28), 0 0 0 3px var(--cv-volt-dim);
}

.cv-capture-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px 10px;
    border-bottom: 1px solid var(--cv-line);
}
:root .cv-capture-card-head { border-bottom-color: rgba(60,42,34,0.06); }

.cv-capture-card-label {
    font-family: var(--cv-mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--cv-text-3); font-weight: 500;
}
:root .cv-capture-card-label { color: #a1a1aa; }

.cv-capture-hints {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--cv-mono); font-size: 10px; color: var(--cv-text-4);
    letter-spacing: 0.04em;
}
:root .cv-capture-hints { color: #a1a1aa; }

.cv-capture-textarea {
    width: 100%;
    min-height: 320px;
    padding: 18px 20px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--cv-text-1);
    font-family: var(--cv-mono);
    font-size: 12.5px;
    line-height: 1.8;
    resize: vertical;
    display: block;
    box-sizing: border-box;
}
:root .cv-capture-textarea { color: #27272a; }
.cv-capture-textarea::placeholder { color: var(--cv-text-4); }
:root .cv-capture-textarea::placeholder { color: #c4c4c8; }

.cv-capture-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 12px 18px;
    border-top: 1px solid var(--cv-line);
    background: rgba(60,42,34,0.15);
}
:root .cv-capture-footer { border-top-color: rgba(60,42,34,0.06); background: rgba(60,42,34,0.02); }

.cv-capture-count {
    font-family: var(--cv-mono); font-size: 11px; color: var(--cv-text-4);
    letter-spacing: 0.02em;
}
:root .cv-capture-count { color: #a1a1aa; }

.cv-capture-submit {
    font-family: var(--cv-body) !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    display: inline-flex; align-items: center; gap: 8px;
}
.cv-capture-submit:disabled { opacity: 0.35; cursor: not-allowed; }

/* Feature pills */
.cv-capture-tips {
    display: flex; align-items: center; justify-content: center;
    gap: 20px; flex-wrap: wrap;
}

.cv-capture-tip {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--cv-mono); font-size: 10.5px;
    color: var(--cv-text-3); letter-spacing: 0.04em;
}
:root .cv-capture-tip { color: #a1a1aa; }

.cv-capture-tip-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 7px;
    background: var(--cv-volt-dim);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 22%, transparent);
    color: var(--cv-volt); flex-shrink: 0;
}

/* ============================================================
   Quick Capture — v3 "capture surface" (fills the window height)
   ============================================================ */
/* Content column — scrolls like the Ask welcome, staggered entry */
.cv-cap3 {
    /* One gutter and one control height for the whole card, so the head,
       transcript and save row share a rhythm instead of each carrying its
       own padding (16px / 22px / 16px, as they used to). */
    --cap-pad: 18px;
    --cap-ctl: 30px;
    width: 100%; max-width: 900px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 24px;
    padding: 40px 24px 56px;
}
.cv-cap3 > * { animation: cv-ask-rise 0.5s var(--cv-ease) both; }
.cv-cap3 > *:nth-child(1) { animation-delay: 0.04s; }
.cv-cap3 > *:nth-child(2) { animation-delay: 0.10s; }
.cv-cap3 > *:nth-child(3) { animation-delay: 0.16s; }
.cv-cap3 > *:nth-child(4) { animation-delay: 0.22s; }
.cv-cap3 > *:nth-child(5) { animation-delay: 0.28s; }
.cv-cap3 > *:nth-child(6) { animation-delay: 0.34s; }
.cv-cap3-lede { margin-top: 9px; font: 400 13.5px/1.5 var(--cv-body); color: var(--cv-text-2); max-width: 560px; }
/* The capture hero borrows Ask's anatomy, so it needs Ask's orb
   scale too: at 210px it dwarfed a 900px column. */
#view-capture .cv-ask-orb { width: clamp(120px, 11vw, 156px); }
#view-capture .cv-ask-whead { gap: 32px; }

/* surface — a card in the scrolling column (matches the Ask card family) */
.cv-cap3-surface {
    position: relative; display: flex; flex-direction: column;
    border-radius: var(--cv-r-md); overflow: visible;
    background: var(--cv-surface); border: 1px solid var(--cv-line);
    box-shadow: var(--cv-shadow-card);
    transition: border-color .3s ease, box-shadow .3s ease;
}
/* Bands are clipped to the card radius individually, so the dropdowns in the
   save row can still escape the card instead of being cut off by overflow. */
.cv-cap3-head { border-radius: var(--cv-r-md) var(--cv-r-md) 0 0; }
.cv-cap3-foot { border-radius: 0 0 var(--cv-r-md) var(--cv-r-md); }
.cv-cap3-surface:focus-within { border-color: var(--cv-line-2); box-shadow: var(--cv-shadow-card-hover, var(--cv-shadow-card)); }
.cv-cap3-surface::after { content: ""; position: absolute; inset: 0; border-radius: var(--cv-r-md); pointer-events: none; box-shadow: 0 0 0 1px var(--cv-volt) inset, 0 0 44px -12px var(--cv-volt-glow) inset; opacity: 0; transition: opacity .3s ease; }
.cv-cap3-surface.cv-cap3-filled { border-color: var(--cv-line-2); }
.cv-cap3-surface.dragover { border-color: color-mix(in oklab, var(--cv-volt) 50%, var(--cv-line-2)); }
.cv-cap3-surface.dragover::after { opacity: 1; }

/* head: status on the left, size + tools on the right. One control height
   (--cap-ctl) and one gutter (--cap-pad) run through head, body and foot so
   the three bands of the card line up instead of each picking its own. */
.cv-cap3-head {
    flex-shrink: 0; display: flex; align-items: center; gap: 12px;
    padding: 11px var(--cap-pad); min-height: 54px; box-sizing: border-box;
    border-bottom: 1px solid var(--cv-line);
}
.cv-cap3-status { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font: 500 12px/1 var(--cv-body); color: var(--cv-text-1); }
.cv-cap3-status > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-cap3-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--cv-text-4); transition: background .3s var(--cv-ease), box-shadow .3s var(--cv-ease); }
.cv-cap3-surface.cv-cap3-filled .cv-cap3-dot { background: var(--ok); box-shadow: 0 0 9px color-mix(in oklab, var(--ok) 55%, transparent); }
.cv-cap3-status b { color: var(--cv-text-0); font-weight: 600; }
.cv-cap3-detected { display: none; }
.cv-cap3-head-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.cv-cap3-meter { display: flex; align-items: center; gap: 9px; }
.cv-cap3-meter-bar { width: 88px; height: 4px; border-radius: 99px; background: var(--cv-bg-2); box-shadow: 0 0 0 1px var(--cv-line) inset; overflow: hidden; position: relative; }
.cv-cap3-meter-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 99px; background: var(--brand-gradient); transition: width .5s cubic-bezier(.2,1,.3,1); }
.cv-cap3-surface.cv-cap3-filled .cv-cap3-meter-bar i { min-width: 5px; }
.cv-cap3-meter-lbl { font: 400 10.5px/1 var(--cv-mono); color: var(--cv-text-2); white-space: nowrap; }
.cv-cap3-meter-lbl b { color: var(--cv-text-1); font-weight: 500; }
.cv-cap3-tools { display: flex; gap: 6px; }
.cv-cap3-tool {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--cap-ctl); padding: 0 11px; box-sizing: border-box;
    font: 500 11.5px/1 var(--cv-body); color: var(--cv-text-1);
    background: var(--cv-bg-2); border: 1px solid var(--cv-line);
    border-radius: 8px; cursor: pointer;
}
.cv-cap3-tool:hover { color: var(--cv-text-0); border-color: var(--cv-line-2); }
.cv-cap3-tool:focus-visible { outline: none; border-color: color-mix(in oklab, var(--cv-volt) 55%, transparent); box-shadow: 0 0 0 3px var(--cv-volt-glow); }
.cv-cap3-tool svg { opacity: .85; flex-shrink: 0; }

/* body: the transcript well. Fixed height so the save row stays anchored at
   the bottom of the card and long pastes scroll inside it. */
.cv-cap3-body { position: relative; display: flex; height: clamp(260px, 36vh, 400px); }
#view-capture .cv-cap3-textarea {
    flex: 1; width: 100%; min-height: 0; box-sizing: border-box;
    margin: 0; padding: 18px var(--cap-pad);
    background: transparent; border: 0; border-radius: 0; outline: 0;
    box-shadow: none; resize: none; overflow-y: auto;
    color: var(--cv-text-1); font-family: var(--cv-mono); font-size: 12.5px; line-height: 1.85;
}
#view-capture .cv-cap3-textarea:focus { background: transparent; border: 0; box-shadow: none; }
.cv-cap3-textarea::placeholder { color: var(--cv-text-4); }
.cv-cap3-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; pointer-events: none; }
.cv-cap3-empty[hidden] { display: none; }
.cv-cap3-ring { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; color: var(--cv-text-3); background: radial-gradient(circle at 50% 35%, var(--cv-bg-2), transparent 70%); box-shadow: 0 0 0 1px var(--cv-line) inset; }
.cv-cap3-ring::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--cv-line); opacity: .5; }
.cv-cap3-ring::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid var(--cv-line); opacity: .22; }
.cv-cap3-empty-t { font: 600 15px/1.3 var(--cv-body); letter-spacing: -0.01em; color: var(--cv-text-0); }
.cv-cap3-empty-s { font: 400 12.5px/1.5 var(--cv-body); color: var(--cv-text-2); text-align: center; max-width: 430px; }
/* Secondary by design: the coral "Summarize & Save" is the only primary on
   this card, so the empty-state shortcut reads as a quiet outline button. */
.cv-cap3-cta {
    pointer-events: auto; margin-top: 16px;
    display: inline-flex; align-items: center; gap: 9px;
    height: 34px; padding: 0 13px; box-sizing: border-box;
    font: 600 12.5px/1 var(--cv-body); cursor: pointer;
    border-radius: 9px; color: var(--cv-text-0);
    background: var(--cv-surface); border: 1px solid var(--cv-line-2);
    box-shadow: var(--cv-shadow-card, 0 1px 2px rgba(12,9,8,0.2));
}
.cv-cap3-cta:hover { border-color: color-mix(in oklab, var(--cv-volt) 45%, var(--cv-line-2)); color: var(--cv-text-0); }
.cv-cap3-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cv-volt-glow); }
.cv-cap3-kbd { font: 500 9.5px/1 var(--cv-mono); background: var(--cv-bg-2); color: var(--cv-text-3); border: 1px solid var(--cv-line); padding: 4px 6px; border-radius: 5px; }
.cv-cap3-alt { pointer-events: none; margin-top: 12px; font: 400 11px/1 var(--cv-body); color: var(--cv-text-3); }

/* attached files — a quiet strip between the transcript and the save sentence */
.cv-cap3-files { flex-shrink: 0; padding: 12px var(--cap-pad); border-top: 1px solid var(--cv-line); background: var(--cv-inset); }
.cv-cap3-files[hidden] { display: none; }
.cv-cap3-files-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.cv-cap3-files-lbl { font: 500 10px/1 var(--cv-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cv-text-3); }
.cv-cap3-files-meta { font: 400 11px/1 var(--cv-body); color: var(--cv-text-4); }
.cv-cap3-files-list { display: flex; flex-wrap: wrap; gap: 7px; }
.cv-cap3-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: var(--cap-ctl); box-sizing: border-box; font: 500 11.5px/1 var(--cv-body); color: var(--cv-text-1); background: var(--cv-surface); border: 1px solid var(--cv-line); padding: 0 10px; border-radius: 8px; }
.cv-cap3-file b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cv-cap3-file small { font: 400 10.5px/1 var(--cv-mono); color: var(--cv-text-4); flex-shrink: 0; }
.cv-cap3-file button { background: none; border: 0; color: var(--cv-text-4); cursor: pointer; padding: 0; line-height: 1; font-size: 13px; flex-shrink: 0; }
.cv-cap3-file button:hover { color: var(--danger); }
.cv-cap3-files-note { margin-top: 9px; font: 400 11px/1.5 var(--cv-body); color: var(--cv-text-4); }

/* foot — natural-language save sentence + primary CTA */
.cv-cap3-foot { flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 12px var(--cap-pad); border-top: 1px solid var(--cv-line); background: var(--cv-inset); }
.cv-cap3-sentence { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font: 400 12.5px/1 var(--cv-body); color: var(--cv-text-2); }
.cv-cap3-token {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--cap-ctl); padding: 0 10px; box-sizing: border-box;
    font: 500 12px/1 var(--cv-body); color: var(--cv-text-1);
    background: var(--cv-surface); border: 1px solid var(--cv-line);
    border-radius: 8px;
}
.cv-cap3-token:hover { border-color: var(--cv-line-2); }
.cv-cap3-token:focus-within { border-color: color-mix(in oklab, var(--cv-volt) 45%, var(--cv-line-2)); box-shadow: 0 0 0 3px var(--cv-volt-glow); }
.cv-cap3-tchev { color: var(--cv-text-4); flex-shrink: 0; transition: transform .18s var(--cv-ease), color .18s var(--cv-ease); }

/* Custom dropdown (source / collection) — themed popover, matches app vibe */
.cv-cap3-dd { position: relative; }
.cv-cap3-dd-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; outline: 0; padding: 0; cursor: pointer;
    color: var(--cv-text-1); font: 500 12px/1 var(--cv-body);
}
.cv-cap3-dd-label-muted { color: var(--cv-text-3); }
.cv-cap3-dd-btn[aria-expanded="true"] .cv-cap3-tchev { transform: rotate(180deg); color: var(--cv-volt); }
.cv-cap3-dd-btn:focus-visible { outline: none; }
.cv-cap3-dd-menu {
    position: absolute; bottom: calc(100% + 8px); left: -9px; z-index: 60;
    min-width: 168px; max-height: 244px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1px; padding: 5px;
    background: var(--cv-bg-1); border: 1px solid var(--cv-line-2); border-radius: 11px;
    box-shadow: 0 2px 6px rgba(12,9,8,0.35), 0 22px 48px -16px rgba(12,9,8,0.6);
    animation: cv-cap3-ddin .14s var(--cv-ease);
}
:root .cv-cap3-dd-menu {
    background: #ffffff; border-color: rgba(60,42,34,0.10);
    box-shadow: 0 2px 6px rgba(60,42,34,0.06), 0 22px 48px -16px rgba(60,42,34,0.18);
}
.cv-cap3-dd-menu[hidden] { display: none; }
@keyframes cv-cap3-ddin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cv-cap3-dd-opt {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer; white-space: nowrap;
    color: var(--cv-text-1); font: 500 12.5px/1 var(--cv-body);
    padding: 8px 10px; border-radius: 7px; transition: background .12s var(--cv-ease), color .12s var(--cv-ease);
}
.cv-cap3-dd-opt:hover { background: var(--cv-bg-2); color: var(--cv-text-0); }
.cv-cap3-dd-opt[aria-selected="true"] { color: var(--cv-volt); }
.cv-cap3-dd-opt[aria-selected="true"]::after {
    content: ""; margin-left: auto; width: 13px; height: 13px; flex-shrink: 0;
    background: currentColor;
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
            mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.cv-cap3-src-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cv-text-4); flex-shrink: 0; }
.cv-cap3-surface.cv-cap3-filled .cv-cap3-src-dot { background: var(--ok); box-shadow: 0 0 8px color-mix(in oklab, var(--ok) 50%, transparent); }
.cv-cap3-title-tok { flex: 1 1 150px; min-width: 120px; max-width: 190px; }
.cv-cap3-title-tok input { width: 100%; background: transparent; border: 0; outline: 0; color: var(--cv-text-1); font: 500 12px/1 var(--cv-body); }
.cv-cap3-title-tok input::placeholder { color: var(--cv-text-3); }
/* Tag chips sit inside a token, so they are sized to clear its inner height
   rather than stretch it. Otherwise adding one tag makes the save row jump. */
.cv-cap3-tags-tok { gap: 5px; min-width: 92px; }
.cv-cap3-tags-tok .cv-cap2-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; font: 500 11px/1 var(--cv-body); color: var(--cv-text-1); background: var(--cv-bg-2); border: 1px solid var(--cv-line); border-radius: 6px; }
.cv-cap3-tags-tok .cv-cap2-tag button { background: none; border: 0; color: var(--cv-text-4); cursor: pointer; padding: 0; line-height: 1; font-size: 12px; }
.cv-cap3-tags-tok .cv-cap2-tag button:hover { color: var(--danger); }
#cap-tag-input { background: transparent; border: 0; outline: 0; color: var(--cv-text-0); font: 400 12px/1 var(--cv-body); padding: 0; min-width: 46px; width: 46px; }
#cap-tag-input::placeholder { color: var(--cv-text-3); }
.cv-cap3-go { margin-left: auto; flex-shrink: 0; height: 34px; padding: 0 16px; }
/* Disabled reads as "not yet", not as a broken coral button: the fill drops to
   the recessed surface instead of fading the brand ramp out to 35%. */
#view-capture .cv-cap3-go:disabled {
    opacity: 1; cursor: not-allowed; transform: none;
    background: var(--cv-bg-2); border: 1px solid var(--cv-line);
    color: var(--cv-text-4); box-shadow: none;
}
#view-capture .cv-cap3-go:disabled::before { display: none; }
.cv-cap3-go .btn-loader { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--cv-body); }
.cv-cap3-spin {
    width: 13px; height: 13px; border-radius: 50%; display: inline-block;
    border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
    border-top-color: currentColor; animation: cv-cap3-spin 0.7s linear infinite;
}
@keyframes cv-cap3-spin { to { transform: rotate(360deg); } }
.cv-cap3-go.is-done { animation: cv-cap3-pop 0.3s cubic-bezier(.34,1.56,.64,1); }

/* "What happens next" — step cards in the same family as Ask's starters */
.cv-cap3-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cv-cap3-step {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: stretch; gap: 16px;
    padding: 18px 18px 16px; border-radius: var(--cv-r-md);
    background: var(--cv-surface); border: 1px solid var(--cv-line);
    transition: transform 0.2s var(--cv-ease), border-color 0.25s var(--cv-ease);
}
:root .cv-cap3-step { background: rgba(255,255,255,0.95); border-color: rgba(60,42,34,0.07); }
.cv-cap3-step:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--cv-volt) 35%, var(--cv-line)); }
.cv-cap3-step-s { font: 400 12.5px/1.55 var(--cv-body); color: var(--cv-text-3); }
.cv-cap3-step-s #cap-chunk-hint { color: var(--cv-text-2); font-family: var(--cv-mono); font-size: 11px; }
.cv-cap3-note { font: 400 11.5px/1.6 var(--cv-body); color: var(--cv-text-3); text-align: center; }
.cv-cap3-note b { color: var(--cv-text-2); font-weight: 500; }

@media (max-width: 760px) {
    .cv-cap3-steps { grid-template-columns: 1fr; }
    .cv-cap3-foot { flex-wrap: wrap; }
}

/* ── Quick Capture — motion: staggered entry + micro-interactions ── */
@keyframes cv-cap3-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes cv-cap3-pop {
    0%   { opacity: 0; transform: scale(0.82); }
    60%  { opacity: 1; transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes cv-cap3-ring {
    0%, 100% { transform: scale(1);    opacity: var(--o, .5); }
    50%      { transform: scale(1.06); opacity: calc(var(--o, .5) * 0.5); }
}
@keyframes cv-cap3-dotpulse {
    0%, 100% { box-shadow: 0 0 9px color-mix(in oklab, var(--ok) 55%, transparent); }
    50%      { box-shadow: 0 0 16px color-mix(in oklab, var(--ok) 85%, transparent); }
}

/* Entry is handled by the .cv-cap3 > * stagger (cv-ask-rise), matching Ask. */

/* Empty-state: gentle living rings + smooth fade-out when content lands */
.cv-cap3-ring::before { animation: cv-cap3-ring 3.4s ease-in-out infinite; --o: .5; }
.cv-cap3-ring::after  { animation: cv-cap3-ring 3.4s ease-in-out .4s infinite; --o: .22; }
.cv-cap3-empty { transition: opacity .3s ease, transform .3s ease; }
.cv-cap3-empty[hidden] { display: flex; opacity: 0; transform: translateY(6px) scale(.99); pointer-events: none; }

/* Filled surface: status dot breathes */
.cv-cap3-surface.cv-cap3-filled .cv-cap3-dot { animation: cv-cap3-dotpulse 2.4s ease-in-out infinite; }

/* Tag chips pop in */
.cv-cap3-tags-tok .cv-cap2-tag { animation: cv-cap3-pop .22s cubic-bezier(.34,1.56,.64,1) both; }

/* Hover/active polish */
.cv-cap3-cta { transition: transform .16s var(--cv-ease), box-shadow .2s var(--cv-ease), filter .2s var(--cv-ease); }
.cv-cap3-cta:hover { transform: translateY(-1px); filter: brightness(1.03); }
.cv-cap3-cta:active { transform: translateY(0) scale(.98); }
.cv-cap3-tool { transition: color .15s, border-color .15s, background .15s, transform .12s; }
.cv-cap3-tool:active { transform: scale(.95); }
.cv-cap3-token { transition: border-color .15s, background .15s, transform .12s; }
.cv-cap3-go { transition: transform .14s var(--cv-ease), box-shadow .2s var(--cv-ease), filter .2s var(--cv-ease); }
.cv-cap3-go:hover:not(:disabled) { transform: translateY(-1px); }
.cv-cap3-go:active:not(:disabled) { transform: translateY(0) scale(.99); }

@media (prefers-reduced-motion: reduce) {
    .cv-cap3 > *,
    .cv-cap3-ring::before, .cv-cap3-ring::after,
    .cv-cap3-surface.cv-cap3-filled .cv-cap3-dot,
    .cv-cap3-tags-tok .cv-cap2-tag { animation: none !important; }
}

/* ── Stat count-up animation ─────────────────────────────────── */
@keyframes statFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stat-card {
    animation: statFadeIn 0.4s var(--ease-out) backwards;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }

/* ── Responsive — dashboard ──────────────────────────────────── */
@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        gap: 12px;
    }

    .dashboard-greeting {
        font-size: 30px;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dashboard-recent-grid {
        grid-template-columns: 1fr;
    }
}

.view-header .detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.export-dropdown {
    position: relative;
}

.export-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 100;
    min-width: 170px;
    overflow: hidden;
}

.export-menu.open { display: flex; flex-direction: column; }

.export-option {
    display: block;
    width: 100%;
    padding: 9px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease, color 0.1s ease;
}

.export-option:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ================================================================
   Chat Input — Premium Textarea
   ================================================================ */

.input-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-textarea {
    width: 100%;
    min-height: 340px;
    padding: 22px 24px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.75;
    resize: vertical;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    box-shadow: inset 0 2px 4px rgba(60,42,34,0.15);
}

.chat-textarea:focus {
    border-color: rgba(255,238,230,0.2);
    box-shadow: inset 0 2px 4px rgba(60,42,34,0.15), 0 0 0 3px var(--accent-glow), 0 0 20px rgba(255,238,230,0.02);
    background: rgba(32, 28, 25, 0.9);
}

:root .chat-textarea {
    box-shadow: inset 0 2px 4px rgba(60,42,34,0.04);
}

:root .chat-textarea:focus {
    box-shadow: inset 0 2px 4px rgba(60,42,34,0.04), 0 0 0 3px var(--accent-glow);
}

.chat-textarea::placeholder {
    color: var(--text-faint);
}

.input-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.char-count {
    font-size: 12px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* ================================================================
   Buttons — Premium Design
   ================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--text-primary);
    color: var(--bg-primary);
    box-shadow: var(--shadow-xs);
}

.btn-primary:hover:not(:disabled) {
    background: #ffffff;
    box-shadow: var(--shadow-sm), 0 0 24px rgba(255,238,230,0.06);
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.08s;
}

.btn-primary:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Subtle shimmer on primary button hover */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,238,230,0.08) 50%, transparent 70%);
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.3s;
}

.btn-primary:hover:not(:disabled)::after {
    opacity: 1;
    animation: btnShimmer 0.6s ease forwards;
}

@keyframes btnShimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-accent);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    padding: 8px 12px;
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.btn-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.btn-danger:hover {
    background: rgba(248, 113, 113, 0.14);
    border-color: rgba(248, 113, 113, 0.3);
    transform: translateY(-1px);
}

.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(13, 11, 9, 0.2);
    border-top-color: var(--bg-primary);
    border-radius: 50%;
    animation: spin 0.55s linear infinite;
}

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

/* ================================================================
   Context Library
   ================================================================ */

.library-controls {
    margin-bottom: 20px;
}

.library-controls-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.library-controls-row .search-box {
    flex: 1;
}

.library-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.sort-select {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition);
}
.sort-select:focus { border-color: var(--border-accent); }

.btn-select-mode {
    font-size: 12px;
    gap: 4px;
    white-space: nowrap;
}
.btn-select-mode.active {
    background: var(--bg-active);
    color: var(--text-primary);
}

.bulk-actions-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-top: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
}
.bulk-count {
    color: var(--text-secondary);
    font-weight: 500;
    margin-right: auto;
}

/* Star / Pin button on card */
.card-header-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.card-header-row .card-title { flex: 1; }

.card-star {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    flex-shrink: 0;
    line-height: 1;
}
.card-star:hover { color: #facc15; transform: scale(1.15); }
.card-star.active { color: #facc15; }
.card-star.popping { animation: starPop 0.3s var(--ease-out); }

.context-card.starred {
    border-color: color-mix(in oklab, var(--cv-volt) 30%, var(--cv-line));
}
.context-card.starred::before {
    background: linear-gradient(90deg, var(--cv-volt), transparent);
    opacity: 1;
}

/* Card checkbox in select mode */
.card-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 16px;
    height: 16px;
    accent-color: var(--text-primary);
    cursor: pointer;
    z-index: 2;
}

/* Search Box — Premium */
.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.search-box:focus-within {
    border-color: rgba(255,238,230,0.18);
    box-shadow: 0 0 0 3px var(--accent-glow), 0 4px 16px rgba(60,42,34,0.2);
    background: rgba(32, 28, 25, 0.9);
}

:root .search-box:focus-within {
    box-shadow: 0 0 0 3px var(--accent-glow), 0 4px 16px rgba(60,42,34,0.06);
}

.search-icon {
    font-size: 13px;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity var(--transition), transform var(--transition);
}

.search-box:focus-within .search-icon {
    opacity: 0.7;
    transform: scale(1.05);
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
}

.search-input::placeholder { color: var(--text-faint); }

/* Context Card Grid */
.contexts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Context Card — Premium Design */
.context-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    position: relative;
    overflow: hidden;
    animation: cardIn 0.3s var(--ease-out) both;
    animation-delay: var(--card-delay, 0ms);
    backdrop-filter: blur(8px);
}

/* Subtle top gradient line — always visible */
.context-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,238,230,0.06), transparent 80%);
    opacity: 1;
    transition: opacity var(--transition);
}

.context-card:hover {
    border-color: rgba(255,238,230,0.14);
    background: rgba(32, 28, 25, 0.95);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

.context-card:active {
    transform: translateY(-1px);
    transition-duration: 0.08s;
}

.context-card:hover::before {
    background: linear-gradient(90deg, rgba(255,238,230,0.15), transparent 80%);
}

.card-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.02em;
    line-height: 1.45;
    word-break: break-word;
}

.card-topic {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}

.tag {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(255,238,230,0.05);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255,238,230,0.04);
    transition: all var(--transition);
}

:root .tag {
    background: rgba(60,42,34,0.04);
    border-color: rgba(60,42,34,0.04);
}

.context-card:hover .tag {
    background: rgba(255,238,230,0.08);
    border-color: rgba(255,238,230,0.06);
}

:root .context-card:hover .tag {
    background: rgba(60,42,34,0.06);
}

.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-faint);
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.card-delete {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    transition: all var(--transition);
    line-height: 1;
    opacity: 0;
}

.context-card:hover .card-delete { opacity: 1; }

.card-delete:hover {
    color: var(--danger);
    background: var(--danger-bg);
    transform: scale(1.1);
}

/* ================================================================
   Worker Status Badges — Card & Detail
   ================================================================ */

/* Card badge */
.status-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    z-index: 2;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.status-badge.status-summarizing {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.25);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.08);
    animation: badgePulse 2.4s ease-in-out infinite;
}

.status-badge.status-failed {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.badge-spinner {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1.5px solid rgba(251, 191, 36, 0.25);
    border-top-color: #fbbf24;
    border-radius: 50%;
    animation: badgeSpin 0.7s linear infinite;
    flex-shrink: 0;
}

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

@keyframes badgePulse {
    0%   { opacity: 0.7; box-shadow: 0 0 6px rgba(251, 191, 36, 0.05); }
    50%  { opacity: 1;   box-shadow: 0 0 14px rgba(251, 191, 36, 0.15); }
    100% { opacity: 0.7; box-shadow: 0 0 6px rgba(251, 191, 36, 0.05); }
}

/* Detail status banner */
.detail-status-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.5;
}

.detail-status-banner.status-summarizing {
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.18);
    color: #fcd34d;
    animation: bannerPulse 3s ease-in-out infinite;
}

.detail-status-banner.status-failed {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
}

.btn-retry-summarize {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 14px;
}

.detail-status-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.detail-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(251, 191, 36, 0.2);
    border-top-color: #fbbf24;
    border-radius: 50%;
    animation: badgeSpin 0.75s linear infinite;
}

.detail-status-text strong {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
    color: inherit;
}

.detail-status-text span {
    font-size: 12px;
    opacity: 0.75;
}

@keyframes bannerPulse {
    0%   { border-color: rgba(251, 191, 36, 0.15); }
    50%  { border-color: rgba(251, 191, 36, 0.3); }
    100% { border-color: rgba(251, 191, 36, 0.15); }
}

/* Tag filter bar */
.tag-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.18s ease;
}

.tag-chip:hover {
    border-color: var(--border-accent);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.tag-chip.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(255,238,230,0.08);
}

:root .tag-chip.active {
    box-shadow: 0 2px 8px rgba(60,42,34,0.1);
}

.tag-chip-count {
    font-size: 10px;
    opacity: 0.6;
}

.tag-chip.active .tag-chip-count { opacity: 0.7; }

/* Load more */
.load-more-container {
    display: flex;
    justify-content: center;
    padding: 24px 0 8px;
}

/* Deep Search Toggle */
.btn-deep-search {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius);
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-deep-search:hover { border-color: var(--border-accent); color: var(--text-secondary); }
.btn-deep-search.active {
    background: var(--bg-active);
    border-color: var(--border-accent);
    color: var(--text-primary);
}

/* Deep Search Results */
.deep-search-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.deep-search-header {
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.deep-result-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.deep-result-header {
    padding: 14px 18px;
    cursor: pointer;
    transition: background var(--transition);
}
.deep-result-header:hover { background: var(--bg-hover); }

.deep-result-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.deep-result-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.deep-score {
    background: var(--bg-active);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    color: var(--text-secondary);
}

.deep-result-chunks {
    border-top: 1px solid var(--border-subtle);
}

.deep-chunk {
    display: flex;
    gap: 12px;
    padding: 10px 18px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-subtle);
}
.deep-chunk:last-child { border-bottom: none; }

.deep-chunk-score {
    flex-shrink: 0;
    width: 36px;
    text-align: right;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    padding-top: 1px;
}

.deep-chunk-text {
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
}

.deep-badge {
    display: inline-block;
    padding: 0 5px;
    background: var(--bg-active);
    color: var(--text-muted);
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 500;
    vertical-align: middle;
    margin-left: 2px;
}
.deep-badge.starred { color: #facc15; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}

.empty-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 20px;
    opacity: 0.4;
}

.empty-state h3 {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 600;
}

.empty-state p {
    font-size: 13.5px;
    color: var(--text-muted);
}

/* ================================================================
   Context Detail — Clean Professional Layout
   ================================================================ */

.detail-content {
    animation: slideUp 0.3s var(--ease-out);
    width: 100%;
    box-sizing: border-box;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Header ──────────────────────────────────────────────────── */
.ctx-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.ctx-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ctx-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ctx-date {
    font-size: 12px;
    color: var(--text-faint);
    font-weight: 400;
    letter-spacing: 0.01em;
}

.ctx-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    word-break: break-word;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.detail-star {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    flex-shrink: 0;
    line-height: 1;
}
.detail-star:hover { color: #facc15; transform: scale(1.15); }
.detail-star.active { color: #facc15; }

.ctx-tags-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ctx-no-tags {
    color: var(--text-faint);
    font-size: 12px;
}

.ctx-collection-inline {
    flex-shrink: 0;
}

/* ── Overview (Topic + Snapshot) ──────────────────────────────── */
.ctx-overview {
    margin-bottom: 28px;
    padding: 20px 24px;
    background: var(--bg-surface);
    border-radius: var(--radius);
    border-left: 3px solid rgba(242,84,45,0.4);
}

:root .ctx-overview {
    background: rgba(242,84,45,0.03);
    border-left-color: rgba(242,84,45,0.4);
}

.ctx-topic {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 6px;
}

.ctx-snapshot {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Sections ────────────────────────────────────────────────── */
.ctx-section {
    margin-bottom: 24px;
}

.ctx-section-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ctx-important-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #facc15;
    display: inline-block;
}

/* ── Lists ───────────────────────────────────────────────────── */
.ctx-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ctx-list li {
    padding: 6px 0 6px 16px;
    position: relative;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.65;
}

.ctx-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 4px;
    height: 4px;
    background: rgba(242,84,45,0.5);
    border-radius: 50%;
}

.ctx-list--important li::before {
    background: #facc15;
}

/* ── Vitals Chips ────────────────────────────────────────────── */
.ctx-vitals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ctx-vital-chip {
    font-family: var(--font-mono);
    font-size: 11.5px;
    padding: 4px 10px;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

:root .ctx-vital-chip {
    background: rgba(60,42,34,0.03);
}

/* ── Insights Grid ───────────────────────────────────────────── */
.ctx-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.ctx-insight-block {
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s ease;
}

.ctx-insight-block:hover {
    border-color: var(--border-accent);
}

:root .ctx-insight-block {
    background: #ffffff;
    border-color: rgba(60,42,34,0.06);
}

.ctx-insight-block .ctx-section-label {
    margin-bottom: 8px;
}

.ctx-insight-block .ctx-list li {
    font-size: 13px;
    padding: 4px 0 4px 14px;
}

.ctx-insight-block .ctx-list li::before {
    top: 12px;
    width: 3px;
    height: 3px;
}

/* ── Collapsibles ────────────────────────────────────────────── */
.ctx-collapsibles {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ctx-collapse-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.ctx-collapse-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-accent);
    background: var(--bg-hover);
}

.ctx-collapse-icon {
    font-size: 10px;
    transition: transform 0.2s ease;
    display: inline-block;
}

/* Original Chat Content */
.original-chat-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.original-chat-content {
    margin-top: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 500px;
    overflow-y: auto;
    padding: 0;
}

/* Chat Bubbles */
.chat-bubbles {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
}

.chat-bubble {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    transition: background 0.1s ease;
}

.chat-bubble:hover {
    background: rgba(255,238,230,0.02);
}

:root .chat-bubble:hover {
    background: rgba(60,42,34,0.015);
}

.chat-bubble-avatar {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.chat-avatar--user {
    background: rgba(242,84,45,0.12);
    color: #818cf8;
}

.chat-avatar--ai {
    background: color-mix(in oklab, var(--ok) 12%, transparent);
    color: var(--ok);
}

:root .chat-avatar--user {
    background: rgba(242,84,45,0.08);
    color: var(--coral);
}

:root .chat-avatar--ai {
    background: rgba(16,185,129,0.08);
    color: #059669;
}

.chat-bubble-body {
    flex: 1;
    min-width: 0;
}

.chat-bubble-name {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
}

.chat-bubble--user .chat-bubble-name { color: #818cf8; }
.chat-bubble--ai .chat-bubble-name { color: var(--ok); }

:root .chat-bubble--user .chat-bubble-name { color: var(--coral); }
:root .chat-bubble--ai .chat-bubble-name { color: #059669; }

.chat-bubble-text {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-empty {
    padding: 32px;
    text-align: center;
    color: var(--text-faint);
    font-size: 13px;
}

/* ── Prompt Builder ──────────────────────────────────────────── */
.ctx-prompt-builder {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 8px;
}

:root .ctx-prompt-builder {
    background: #ffffff;
    border-color: rgba(60,42,34,0.06);
}

.ctx-prompt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.ctx-prompt-header svg {
    color: var(--text-muted);
}

.prompt-size-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.prompt-size-label {
    font-size: 12px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.prompt-size-group {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 3px;
    border: 1px solid var(--border-subtle);
}

.prompt-size-btn {
    padding: 6px 14px;
    font-size: 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    font-weight: 500;
}

.prompt-size-btn:hover {
    color: var(--text-primary);
    background: rgba(255,238,230,0.04);
}

.prompt-size-btn.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    box-shadow: 0 1px 3px rgba(60,42,34,0.2);
}

:root .prompt-size-btn.active {
    box-shadow: 0 1px 3px rgba(60,42,34,0.1);
}

.query-input-section {
    margin-bottom: 0;
}

.query-input {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 13px;
    padding: 11px 14px;
    border-radius: 8px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.query-input:focus {
    border-color: rgba(242,84,45,0.3);
    box-shadow: 0 0 0 3px rgba(242,84,45,0.08);
}

.query-input::placeholder {
    color: var(--text-faint);
}

.generate-prompt-btn {
    margin-top: 12px;
    width: 100%;
    padding: 12px;
    font-size: 13.5px;
    font-weight: 600;
}


/* ================================================================
   Prompt Builder
   ================================================================ */

.prompt-section {
    margin-top: 32px;
    padding: 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    animation: slideUp 0.3s var(--ease-out);
}

.prompt-display {
    padding: 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--cv-code);
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 340px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.prompt-actions {
    display: flex;
    gap: 8px;
}

/* ================================================================
   Modal — Premium
   ================================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 9, 8, 0.7);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    animation: fadeIn 0.2s var(--ease-out);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 28px 22px;
    max-width: 480px;
    width: 90%;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,238,230,0.02) inset;
    animation: modalSpring 0.4s var(--ease-spring);
}

.modal h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.modal h2 + p,
.modal h2 + .form-group {
    margin-top: 18px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 7px;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus {
    border-color: rgba(255,238,230,0.2);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ================================================================
   Toast — Premium
   ================================================================ */

/* ================================================================
   Toasts

   One design for every variant. This block deliberately replaces both the
   old base styling and the [data-vibe="noir"] overrides that used to sit on
   top of it: noir is pinned on for every user (main.js), and its rules
   hardcoded a near-black gradient, so in light mode the toasts rendered as
   black slabs over a warm paper UI. The undo/action variants never matched
   those rules at all, which is how a single delete could put two unrelated
   card designs in the same corner.

   Both themes now derive from the same core tokens the cards use: same
   surface, same hairline, same radius, so a toast reads as the app leaning
   in to say something, not as a notification borrowed from elsewhere.
   ================================================================ */

.toast-stack {
    position: fixed;
    bottom: 26px;
    right: 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: 10000;
    pointer-events: none;
}

.toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    box-sizing: border-box;
    /* One width for every toast. Content-sized toasts left the stack with a
       ragged left edge that read as unfinished, and a two-line undo message
       made its card visibly wider than the success toast above it. */
    width: min(384px, calc(100vw - 52px));
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink);
    /* Two shadows, not one: a tight contact shadow that seats the card on the
       page, and a wide soft one that gives it height. A single mid-blur
       shadow is what makes a floating panel look flat and cheap. */
    box-shadow:
        0 1px 2px rgba(12,9,8,0.28),
        0 18px 44px -16px rgba(12,9,8,0.55);
    overflow: hidden;
    pointer-events: auto;
    animation: toastIn 0.38s var(--cv-spring, cubic-bezier(0.34,1.25,0.64,1)) both;
    transition: opacity 0.24s var(--cv-ease, cubic-bezier(0.2,0.7,0.1,1)),
                transform 0.24s var(--cv-ease, cubic-bezier(0.2,0.7,0.1,1));
}

/* Hairline of light along the top edge: the same trick the sidebar and cards
   use to look lit rather than pasted on. */
.toast::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,238,230,0.14), transparent);
    pointer-events: none;
}

.toast-out { opacity: 0; transform: translateY(6px) scale(0.985); }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.toast .toast-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: 0 0 26px;
    border-radius: 8px;
    /* Neutral by default; each type paints its own below. */
    color: var(--muted);
    background: color-mix(in oklab, var(--muted) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--muted) 24%, transparent);
}
.toast .toast-icon svg { width: 14px; height: 14px; }

.toast .toast-message {
    flex: 1; min-width: 0;
    font: 500 13px/1.45 var(--cv-body, inherit);
    letter-spacing: -0.006em;
    color: var(--ink);
    /* Two lines, then ellipsis. A toast that grows to five lines stops being a
       toast; the Notification Center keeps the full text either way. */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ── Action button ─────────────────────────────────────────── */
.toast-action {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 100px;
    background: transparent;
    border: 1px solid var(--rule-strong, var(--rule));
    color: var(--ink);
    font: 600 11.5px/1 var(--cv-body, inherit);
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background 0.16s var(--cv-ease), border-color 0.16s var(--cv-ease),
                color 0.16s var(--cv-ease);
}
.toast-action:hover {
    color: var(--coral);
    border-color: color-mix(in oklab, var(--coral) 45%, transparent);
    background: color-mix(in oklab, var(--coral) 12%, transparent);
}
.toast-action:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--coral) 60%, transparent);
    outline-offset: 2px;
}

/* ── Countdown rail ────────────────────────────────────────── */
/* Only toasts you can act on get one, and it runs for exactly the window you
   have to act in: the same number that schedules the dismissal. (The old bar
   animated for 5s while the toast lived 5.3s, so it always finished early and
   sat empty.) On a plain status toast a countdown says nothing: there is
   nothing to race, and four of them ticking down at once is just noise. */
.toast-rail {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left center;
    background: currentColor;
    opacity: 0.4;
    animation: toastRail var(--toast-duration, 3400ms) linear both;
}
@keyframes toastRail {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
/* Hovering holds the toast open, so the rail has to stop with it. */
.toast-held .toast-rail { animation-play-state: paused; }

/* ── Semantic colour: icon + rail only ─────────────────────── */
/* The old design painted a 3px colour bar down the left edge of every toast.
   Colour belongs on the thing that carries meaning (the icon), not as a
   stripe of chrome; the rail picks the same hue up so the two agree. */
.toast.success { color: var(--ok); }
.toast.success .toast-icon {
    color: var(--ok);
    background: color-mix(in oklab, var(--ok) 14%, transparent);
    border-color: color-mix(in oklab, var(--ok) 32%, transparent);
}
.toast.error { color: var(--danger); }
.toast.error .toast-icon {
    color: var(--danger);
    background: color-mix(in oklab, var(--danger) 14%, transparent);
    border-color: color-mix(in oklab, var(--danger) 32%, transparent);
}
.toast.warning { color: var(--warning, #fbbf24); }
.toast.warning .toast-icon {
    color: var(--warning, #fbbf24);
    background: color-mix(in oklab, var(--warning, #fbbf24) 14%, transparent);
    border-color: color-mix(in oklab, var(--warning, #fbbf24) 32%, transparent);
}
.toast.info { color: var(--muted); }
/* Undo is the one toast the user is meant to act on, so it wears the brand
   accent rather than a status colour: nothing has gone wrong here. */
.toast.undo { color: var(--coral); }
.toast.undo .toast-icon {
    color: var(--coral);
    background: color-mix(in oklab, var(--coral) 13%, transparent);
    border-color: color-mix(in oklab, var(--coral) 30%, transparent);
}
.toast.undo .toast-action {
    color: var(--coral);
    border-color: color-mix(in oklab, var(--coral) 40%, transparent);
}
.toast.undo .toast-action:hover {
    background: color-mix(in oklab, var(--coral) 16%, transparent);
    border-color: color-mix(in oklab, var(--coral) 60%, transparent);
}

/* ── Light theme ───────────────────────────────────────────── */
/* Warm-tinted shadows rather than grey ones: a neutral black shadow on this
   cream ground reads as dirt under the card. */
:root .toast {
    background: var(--surface);
    border-color: var(--rule);
    box-shadow:
        0 1px 2px rgba(60,42,34,0.06),
        0 16px 40px -16px rgba(60,42,34,0.28);
}
:root .toast::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}

@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
    .toast-rail { animation-duration: 0.01ms; }
}

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 768px) {
    /* Sidebar collapse at narrow widths is handled by the JS-driven
       .sidebar-collapsed class (shell.js auto-collapses ≤1024px), which is
       the single source of truth for sidebar width/labels/offsets. The old
       pre-refactor rules that forced width/label state here were removed —
       they conflicted with a manual expand on a sub-768px window. */
    .contexts-grid { grid-template-columns: 1fr; }
}

@media (min-width: 1600px) {
    .contexts-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

@media (min-width: 2000px) {
    .contexts-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* ─── Marked Important Section ──────────────────────────────────── */
.important-notes-section {
    border: 1px solid rgba(251, 191, 36, 0.15) !important;
    background: rgba(251, 191, 36, 0.03) !important;
    border-radius: var(--radius);
    padding: 16px 20px;
}

.important-notes-section .section-title {
    color: #fbbf24;
}

.important-notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.important-note-item {
    border-left: 3px solid rgba(251, 191, 36, 0.5);
    padding: 8px 12px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(251, 191, 36, 0.02);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.important-note-item:last-child {
    margin-bottom: 0;
}

/* ─── Active State (Snapshot) ───────────────────────────────────── */
.snapshot-text {
    border-left: 3px solid rgba(139, 92, 246, 0.5);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    background: rgba(139, 92, 246, 0.04);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    line-height: 1.5;
}

/* ─── Technical Vitals ──────────────────────────────────────────── */
.vitals-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vitals-item code {
    display: block;
    font-family: var(--cv-code);
    font-size: 12px;
    color: #67e8f9;
    background: rgba(103, 232, 249, 0.05);
    border: 1px solid rgba(103, 232, 249, 0.1);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ─── Final Code Snippets ───────────────────────────────────────── */
.code-snippets-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.snippets-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(242,84,45,0.2);
    color: #a5b4fc;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
}

.code-snippets-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.code-snippet-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    transition: border-color var(--transition);
}

.code-snippet-card:hover {
    border-color: var(--border-accent);
}

.code-snippet-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255,238,230,0.03);
    border-bottom: 1px solid var(--border);
}

.code-snippet-lang {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: #a5b4fc;
    flex: 1;
}

.code-snippet-lines {
    font-size: 10px;
    color: var(--text-faint);
}

.code-snippet-copy {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(242,84,45,0.12);
    color: #a5b4fc;
    border: 1px solid rgba(242,84,45,0.25);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.code-snippet-copy:hover {
    background: rgba(242,84,45,0.25);
    transform: translateY(-1px);
}

.code-snippet-copy.copied {
    background: color-mix(in oklab, var(--ok) 20%, transparent);
    color: #6ee7b7;
    border-color: color-mix(in oklab, var(--ok) 35%, transparent);
}

.code-snippet-pre {
    margin: 0;
    padding: 12px 14px;
    overflow-x: auto;
    max-height: 320px;
    overflow-y: auto;
    background: transparent;
}

.code-snippet-pre code {
    font-family: var(--cv-code);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text);
    white-space: pre;
    display: block;
}

/* ================================================================
   Settings Modal
   ================================================================ */

.settings-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 9, 8, 0.65);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    animation: fadeIn 0.15s ease;
}

.settings-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    width: 960px;
    max-width: 96vw;
    height: 680px;
    max-height: 92vh;
    display: grid;
    grid-template-columns: 248px 1fr;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,238,230,0.02) inset;
    animation: modalSpring 0.4s var(--ease-spring);
    overflow: hidden;
}

/* ─── Left rail: brand + grouped nav + version ─── */
.settings-rail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px 12px 12px;
    border-right: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,238,230,0.012), transparent), var(--bg-primary);
}
:root .settings-rail {
    background: linear-gradient(180deg, rgba(60,42,34,0.012), transparent), var(--bg-primary);
}

.settings-rail-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 14px;
}
.settings-rail-logo {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 9px; overflow: hidden;
    background: transparent;
    border: 1px solid var(--border-accent);
    display: grid; place-items: center;
}
.settings-rail-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.settings-rail-brand-t {
    font-family: var(--font-display);
    font-weight: 600; font-size: 14px; letter-spacing: -0.02em;
    color: var(--text-primary); line-height: 1.15;
}
.settings-rail-brand-t small {
    display: block; font-family: var(--font-body); font-weight: 400;
    font-size: 11px; color: var(--text-muted); letter-spacing: 0;
}

.settings-nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.settings-nav-group { display: flex; flex-direction: column; gap: 2px; }
/* Specificity bump: [hidden] must beat the display: flex on the group and the
   items. features.js hides a tab whose panel was emptied by feature-gating —
   without this the tab stays clickable and opens a blank pane. */
.settings-nav-group[hidden],
.settings-nav-item[hidden] { display: none !important; }
.settings-nav-group + .settings-nav-group { margin-top: 10px; }
.settings-nav-grouplabel {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--text-faint);
    padding: 8px 12px 5px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: background var(--transition), color var(--transition);
}

.settings-nav-item svg { flex-shrink: 0; opacity: 0.85; }

.settings-nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.settings-nav-item.active {
    background: var(--bg-active);
    color: var(--text-primary);
}
.settings-nav-item.active::before {
    content: '';
    position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 0 3px 3px 0;
    background: var(--text-primary);
}

/* status / notification dots inside nav items */
.settings-nav-dot {
    margin-left: auto;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}
.settings-nav-item .update-nav-dot { margin-left: auto; }

.settings-rail-foot {
    margin-top: 8px;
    padding: 10px 12px 4px;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--text-muted);
}
.settings-rail-foot-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--success);
    box-shadow: 0 0 6px var(--success); flex-shrink: 0;
}

.settings-panel { display: none !important; }
.settings-panel.active { display: block !important; animation: fadeIn 0.18s ease; }
.settings-update-section.settings-panel.active { display: flex !important; }

/* ─── Right column: header + body + footer ─── */
.settings-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.settings-content-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.settings-content-head-text { min-width: 0; }
.settings-content-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.settings-content-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.5;
    max-width: 540px;
}

.settings-modal-close {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

@media (max-width: 760px) {
    .settings-modal { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .settings-rail { flex-direction: row; align-items: center; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); padding: 10px 12px; gap: 6px; }
    .settings-rail-brand, .settings-rail-foot { display: none; }
    .settings-nav { flex-direction: row; overflow-x: auto; gap: 6px; }
    .settings-nav-group { flex-direction: row; }
    .settings-nav-group + .settings-nav-group { margin-top: 0; }
    .settings-nav-grouplabel { display: none; }
    .settings-nav-item.active::before { display: none; }
}

.settings-modal-body {
    overflow-y: auto;
    padding: 24px 30px 24px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    box-sizing: border-box;
}

.settings-modal-body::-webkit-scrollbar { width: 8px; }
.settings-modal-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.settings-modal-body::-webkit-scrollbar-thumb:hover { background: var(--border-subtle); }

.settings-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-section-label::before {
    content: '';
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--text-secondary), var(--text-faint));
    flex-shrink: 0;
    opacity: 0.6;
}

.settings-section-hint {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Profile section */
.settings-profile-section {
    margin-bottom: 4px;
}

/* Profile header: avatar + color swatches */
.settings-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.settings-avatar {
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--cv-avatar-color, var(--coral));
    border: 1px solid var(--border-accent);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 26px; color: #fff;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(12,9,8,0.35);
}
.settings-profile-head-meta { min-width: 0; }
.settings-profile-head-name {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 600; color: var(--text-primary);
}
.settings-profile-head-sub {
    font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
.settings-avatar-swatches {
    display: flex; gap: 7px; margin-top: 10px;
}
.settings-avatar-swatch {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--sw);
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--border);
    cursor: pointer;
    transition: transform 0.12s var(--ease), box-shadow 0.15s var(--ease);
    padding: 0;
}
.settings-avatar-swatch:hover { transform: scale(1.15); }
.settings-avatar-swatch.selected {
    border-color: var(--bg-secondary);
    box-shadow: 0 0 0 2px var(--text-primary);
}

/* Tools section: grouped row-cards */
.settings-tool-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
/* Specificity bump: [hidden] must beat the display: flex above. Without it the
   Privacy section renders on builds that were compiled with no crash-reporting
   endpoint, showing a switch that cannot do anything. */
.settings-tool-rows[hidden],
.settings-section-label[hidden] { display: none !important; }
.settings-tool-row {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--font-body);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.settings-tool-row:hover { border-color: var(--border-accent); background: var(--bg-hover); }
.settings-tool-ic {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 10px;
    display: grid; place-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.settings-tool-tx { flex: 1; min-width: 0; }
.settings-tool-tx b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.settings-tool-tx small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.settings-tool-act {
    flex-shrink: 0;
    font-size: 12px; font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    transition: border-color var(--transition);
}
.settings-tool-row:hover .settings-tool-act { border-color: var(--border-accent); }
.settings-tool-act-kbd { font-family: var(--font-mono); padding: 7px 12px; }







.settings-profile-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-profile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-profile-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.settings-profile-input,
.settings-profile-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
}

.settings-profile-textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

.settings-profile-input:focus,
.settings-profile-textarea:focus {
    border-color: rgba(255,238,230,0.2);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Skeleton shimmer for settings loading */
@keyframes settingsSkeleton {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.settings-skeleton-card {
    height: 64px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-elevated) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 800px 100%;
    animation: settingsSkeleton 1.4s ease-in-out infinite;
}

:root .settings-skeleton-card {
    background: linear-gradient(
        90deg,
        #e8e8e8 25%,
        #f5f5f5 50%,
        #e8e8e8 75%
    );
    background-size: 800px 100%;
}

/* Model picker cards */
.settings-model-grid {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.settings-model-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    background: var(--bg-tertiary);
    gap: 12px;
    position: relative;
}

.settings-model-card:hover {
    border-color: var(--border-accent);
    background: var(--bg-elevated);
}

.settings-model-card.selected {
    border-color: var(--text-primary);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 1px var(--text-primary), 0 4px 14px rgba(60,42,34,0.18);
}

.settings-model-card-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.settings-model-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-model-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-model-card-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.settings-model-size {
    font-size: 11px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.settings-model-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 100px;
    background: color-mix(in oklab, var(--ok) 12%, transparent);
    color: var(--ok);
    border: 1px solid color-mix(in oklab, var(--ok) 25%, transparent);
    white-space: nowrap;
}

.settings-installed-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 100px;
    background: color-mix(in oklab, var(--ok) 10%, transparent);
    color: var(--ok);
    border: 1px solid color-mix(in oklab, var(--ok) 22%, transparent);
    white-space: nowrap;
    flex-shrink: 0;
}

.settings-not-installed-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 100px;
    background: transparent;
    color: var(--text-faint);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
    flex-shrink: 0;
}

.settings-model-radio {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-accent);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}

.settings-model-card.selected .settings-model-radio {
    border-color: var(--text-primary);
}

.settings-model-radio::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-primary);
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    transform: scale(0);
}

.settings-model-card.selected .settings-model-radio::after {
    opacity: 1;
    transform: scale(1);
}

/* Warning banner when embed model changes */
.settings-embed-warning {
    display: none;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.22);
    font-size: 12px;
    color: #fbbf24;
    line-height: 1.5;
    gap: 8px;
    align-items: flex-start;
}

.settings-embed-warning.visible {
    display: flex;
}

.settings-embed-cpu-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

/* ── Local inference engine picker ──────────────────────────────── */
.settings-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--sunk);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.settings-select:focus {
    outline: none;
    border-color: var(--accent, var(--coral));
}
.settings-select option[disabled] {
    color: var(--text-faint);
}

/* ── GPU acceleration (built-in engine) ─────────────────────────── */
.settings-gpu-accel-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-gpu-accel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.settings-gpu-accel-state {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.settings-gpu-accel-state.on {
    color: var(--success);
    background: color-mix(in oklab, var(--ok) 12%, transparent);
}
.settings-gpu-accel-state.off {
    color: var(--text-secondary);
    background: var(--sunk);
}
#settings-gpu-accel-btn {
    margin-top: 10px;
}
#settings-gpu-accel-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}
.settings-gpu-accel-log {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--sunk);
    border: 1px solid var(--border-subtle);
    font-family: var(--cv-code);
    font-size: 11px;
    color: var(--text-secondary);
    word-break: break-word;
}

.settings-embed-warning svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.settings-modal-footer {
    padding: 14px 24px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    background: linear-gradient(0deg, rgba(255,238,230,0.015), transparent);
}

:root .settings-modal-footer {
    background: linear-gradient(0deg, rgba(60,42,34,0.015), transparent);
}

.settings-modal-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.settings-privacy-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 9px 12px;
    background: color-mix(in oklab, var(--ok) 5%, transparent);
    border: 1px solid color-mix(in oklab, var(--ok) 14%, transparent);
    border-radius: var(--radius-sm);
    line-height: 1.45;
}

.settings-privacy-notice svg {
    flex-shrink: 0;
    color: var(--ok);
}

/* ── Provider Selection Grid ──────────────────────────────────── */

.settings-provider-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 560px) {
    .settings-provider-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.settings-provider-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-tertiary);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.settings-provider-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 0%, var(--coral-soft), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.settings-provider-card:hover {
    border-color: var(--border-accent);
    background: var(--bg-elevated);
    transform: translateY(-1px);
}

.settings-provider-card:hover::before {
    opacity: 1;
}

.settings-provider-card.selected {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 1px var(--text-primary), 0 4px 12px rgba(60,42,34,0.2);
}

.settings-provider-card.selected::before {
    opacity: 1;
}

.provider-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.provider-card-icon svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.provider-card-icon .provider-brand-logo {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

.provider-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.provider-card-meta {
    font-size: 10px;
    color: var(--text-faint);
    white-space: nowrap;
}

.provider-card-meta.has-key {
    color: var(--ok);
}

/* Provider-specific glow colors */
.settings-provider-card[data-provider="ollama"] { --provider-glow: rgba(120, 120, 120, 0.08); }
.settings-provider-card[data-provider="openai"] { --provider-glow: rgba(16, 163, 127, 0.08); }
.settings-provider-card[data-provider="anthropic"] { --provider-glow: rgba(217, 119, 6, 0.08); }
.settings-provider-card[data-provider="google"] { --provider-glow: rgba(66, 133, 244, 0.08); }

/* ── Cloud API Key Input ──────────────────────────────────────── */

.cloud-key-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.cloud-key-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.cloud-key-input {
    width: 100%;
    padding: 10px 40px 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--cv-code);
    font-size: 13px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.cloud-key-input:focus {
    border-color: rgba(255,238,230,0.2);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.cloud-key-toggle {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color var(--transition);
    display: flex;
    align-items: center;
}

.cloud-key-toggle:hover {
    color: var(--text-primary);
}

.cloud-key-validate-btn {
    flex-shrink: 0;
    padding: 10px 16px !important;
    font-size: 12px !important;
}

.cloud-key-delete-btn {
    flex-shrink: 0;
    padding: 10px 12px !important;
    font-size: 12px !important;
    color: var(--text-tertiary) !important;
}

.cloud-key-status {
    margin-top: 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
}

.cloud-key-status.validating {
    color: var(--text-muted);
}

.cloud-key-status.valid {
    color: var(--ok);
}

.cloud-key-status.invalid {
    color: var(--danger);
}

.cloud-key-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--text-muted);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}


/* ── Cloud Model Cost Badge ───────────────────────────────────── */

.settings-model-cost {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Settings Divider ─────────────────────────────────────────── */

.settings-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
    margin: 18px 0;
    flex-shrink: 0;
}

/* ── Settings Link ────────────────────────────────────────────── */

.settings-link {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color var(--transition), border-color var(--transition);
}

.settings-link:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

/* Settings sidebar button */
.btn-settings {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    width: 100%;
    text-align: left;
}

.btn-settings svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.btn-settings:hover {
    color: var(--text-primary);
    border-color: var(--border);
    background: var(--bg-hover);
}

.settings-current-model {
    font-size: 10px;
    color: var(--text-faint);
    margin-top: -1px;
    padding: 0 10px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================================================================
   P2-2: Source AI Badge on Library Cards
   ================================================================ */

.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.5;
    flex-shrink: 0;
}

/* Identity by typeface, not colour — same scheme as .cv-card-ai. The dot and
   the seven brand hues (OpenAI green, Google blue, violet, cyan…) are gone;
   these are all one neutral chip that changes face per model. Stacks mirror
   _AI_BRAND in js/badges.js — keep the two in step. */
.source-badge {
    color: var(--muted);
    background: none;
    border: 1px solid var(--rule);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    font-size: 11px;
}
.source-chatgpt    { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.source-claude     { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }
.source-gemini     { font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif; }
.source-grok       { font-family: 'Arial Narrow', 'Liberation Sans Narrow', 'Helvetica Neue Condensed', sans-serif; }
.source-deepseek   { font-family: 'Inter', system-ui, sans-serif; }
.source-perplexity { font-family: 'Space Grotesk', system-ui, sans-serif; }
.source-copilot    { font-family: 'Segoe UI', system-ui, sans-serif; }

/* ================================================================
   P2-3: Settings Download Progress
   ================================================================ */

.settings-download-area {
    margin-top: 8px;
    width: 100%;
}

.settings-download-bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(255,238,230,0.12);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 6px;
}

.settings-dl-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.settings-download-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ok), var(--ok));
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.settings-dl-pct {
    font-size: 10px;
    font-weight: 600;
    color: var(--ok);
    white-space: nowrap;
    flex-shrink: 0;
}

.settings-download-status {
    flex: 1;
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-download-error {
    font-size: 10px;
    color: var(--danger);
    margin-top: 4px;
}

.settings-model-card.downloading {
    border-color: color-mix(in oklab, var(--ok) 40%, transparent);
}

.settings-delete-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(248, 113, 113, 0.3);
    background: transparent;
    color: rgba(248, 113, 113, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0;
    line-height: 1;
}
.settings-delete-btn:hover {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.6);
    color: #f87171;
}
.settings-delete-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.settings-model-card.deleting {
    opacity: 0.75;
    pointer-events: none;
    border-color: rgba(248, 113, 113, 0.35);
}

.settings-delete-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f87171, #ef4444);
    border-radius: 4px;
    transition: width 0.25s ease;
    width: 0%;
}

/* Download icon on not-installed cards */
.settings-dl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-faint);
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s;
}
.settings-model-card:hover .settings-dl-icon {
    opacity: 1;
    color: var(--text-secondary);
}
.settings-download-icon {
    width: 15px;
    height: 15px;
}

/* Cancel button inside download area */
.settings-dl-cancel-btn {
    padding: 2px 6px;
    border: none;
    background: none;
    color: rgba(248, 113, 113, 0.6);
    font-size: 18px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 3px;
    transition: color 0.12s, background 0.12s;
}
.settings-dl-cancel-btn:hover {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

/* ── Floating download badge ─────────────────────────────────── */
.cv-dl-badge {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 8000;
    background: var(--bg-elevated, #2A2521);
    border: 1px solid var(--border, rgba(255,238,230,0.07));
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(12,9,8,0.45);
    min-width: 220px;
    max-width: 320px;
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.cv-dl-badge.cv-dl-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.cv-dl-badge-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
}
.cv-dl-badge-spinner {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid color-mix(in oklab, var(--ok) 25%, transparent);
    border-top-color: var(--ok);
    animation: cv-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes cv-spin { to { transform: rotate(360deg); } }
.cv-dl-badge-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #F5EFEB);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.cv-dl-badge-chevron {
    font-size: 11px;
    color: var(--text-muted, #8A7A72);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}
.cv-dl-badge.cv-dl-open .cv-dl-badge-chevron {
    transform: rotate(180deg);
}

/* Mini progress bar always visible below head */
.cv-dl-badge-head-bar {
    height: 2px;
    background: rgba(255,238,230,0.06);
    overflow: hidden;
}
.cv-dl-badge-head-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ok), var(--ok));
    transition: width 0.3s ease;
    width: 0%;
}

/* Panel — hidden by default, shown when .cv-dl-open */
.cv-dl-badge-panel {
    display: none;
}
.cv-dl-badge.cv-dl-open .cv-dl-badge-panel {
    display: block;
    border-top: 1px solid rgba(255,238,230,0.07);
}
.cv-dl-panel-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border, rgba(255,238,230,0.07));
}
.cv-dl-panel-item:last-child { border-bottom: none; }
.cv-dl-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}
.cv-dl-panel-name {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-primary, #F5EFEB);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cv-dl-panel-cancel {
    padding: 2px 7px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: rgba(248,113,113,0.6);
    font-size: 18px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}
.cv-dl-panel-cancel:hover {
    background: rgba(248,113,113,0.12);
    color: #f87171;
}
.cv-dl-bar-bg {
    width: 100%;
    height: 3px;
    background: rgba(255,238,230,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}
.cv-dl-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ok), var(--ok));
    border-radius: 3px;
    transition: width 0.3s ease;
}
.cv-dl-panel-status {
    font-size: 10.5px;
    color: var(--text-secondary, #B6A79F);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Confirm dialog */
.cv-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9, 7, 6, 0.62);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    opacity: 0;
    transition: opacity 0.18s var(--ease, ease);
}
:root .cv-confirm-overlay { background: rgba(20, 20, 28, 0.32); }
.cv-confirm-overlay.cv-confirm-in  { opacity: 1; }
.cv-confirm-overlay.cv-confirm-out { opacity: 0; }

/* Frosted-glass dialog — matches the app's noir/card surface treatment */
.cv-confirm-dialog {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(420px 140px at 50% -30%, rgba(255,238,230,0.06), transparent 70%),
        radial-gradient(320px 220px at 100% 120%, color-mix(in oklab, var(--coral) 8%, transparent), transparent 65%),
        linear-gradient(180deg, rgba(42,37,33,0.92) 0%, rgba(25,21,19,0.94) 100%);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    border: 1px solid rgba(255,238,230,0.09);
    border-radius: var(--radius-xl);
    box-shadow:
        0 1px 0 rgba(255,238,230,0.07) inset,
        0 2px 6px rgba(12,9,8,0.4),
        0 32px 72px -20px rgba(12,9,8,0.8),
        0 0 0 1px rgba(255,238,230,0.02);
    padding: 24px 26px 22px;
    min-width: 320px;
    max-width: 400px;
    width: 90%;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.22s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
/* Top highlight hairline */
.cv-confirm-dialog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16%;
    right: 16%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,238,230,0.28), transparent);
    pointer-events: none;
}
:root .cv-confirm-dialog {
    background:
        radial-gradient(420px 140px at 50% -30%, rgba(60,42,34,0.025), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
    border-color: rgba(60,42,34,0.09);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 24px 60px -16px rgba(60,42,34,0.22),
        0 0 0 1px rgba(60,42,34,0.04);
}
:root .cv-confirm-dialog::before {
    background: linear-gradient(90deg, transparent, rgba(60,42,34,0.08), transparent);
}
.cv-confirm-overlay.cv-confirm-in .cv-confirm-dialog {
    transform: scale(1) translateY(0);
}

.cv-confirm-title {
    font-family: var(--font-display, inherit);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.3;
}
.cv-confirm-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    /* Honour newlines: showConfirm escapes the message, so a dialog that needs
       to spell out consequences as separate lines (e.g. what a restore does to
       existing conversations) would otherwise run them together. Single-line
       messages are unaffected. */
    white-space: pre-line;
}
.cv-confirm-input {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 18px;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line, rgba(255,238,230,0.09));
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.cv-confirm-input::placeholder { color: var(--text-muted); }
.cv-confirm-input:focus {
    border-color: rgba(242,84,45,0.55);
    background: rgba(255,238,230,0.06);
    box-shadow: 0 0 0 3px rgba(242,84,45,0.15);
}
:root .cv-confirm-input {
    background: rgba(60,42,34,0.03);
    border-color: rgba(60,42,34,0.10);
}
:root .cv-confirm-input:focus {
    background: #fff;
}
.cv-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.cv-confirm-cancel {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255,238,230,0.03);
    color: var(--text-secondary);
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
.cv-confirm-cancel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-accent);
    transform: translateY(-1px);
}
.cv-confirm-ok {
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,238,230,0.16);
    background: linear-gradient(180deg, rgba(255,238,230,0.1), rgba(255,238,230,0.05));
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,238,230,0.06) inset, 0 4px 12px -4px rgba(12,9,8,0.4);
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.cv-confirm-ok:hover {
    background: linear-gradient(180deg, rgba(255,238,230,0.16), rgba(255,238,230,0.08));
    transform: translateY(-1px);
}
.cv-confirm-ok.danger {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.12));
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    box-shadow: 0 1px 0 rgba(255,238,230,0.06) inset, 0 4px 14px -4px rgba(239,68,68,0.4);
}
.cv-confirm-ok.danger:hover {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.32), rgba(239, 68, 68, 0.18));
    transform: translateY(-1px);
}

/* ================================================================
   P2-4: Chunk Viewer
   ================================================================ */

.chunks-section {
    margin-top: 28px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.chunks-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    padding: 10px 18px;
    transition: all var(--transition);
    width: 100%;
    text-align: left;
}

.chunks-toggle:hover {
    border-color: var(--border-accent);
    color: var(--text-primary);
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.chunks-toggle-icon {
    transition: transform 0.25s var(--ease-spring);
    font-size: 11px;
}

.chunks-toggle.open .chunks-toggle-icon {
    transform: rotate(90deg);
}

.chunks-query-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
}

.chunks-query-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition);
}

.chunks-query-input:focus {
    border-color: var(--border-accent);
}

.chunks-query-input::placeholder {
    color: var(--text-faint);
}

.chunks-score-btn {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.chunks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    max-height: 500px;
    overflow-y: auto;
}

.chunk-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    transition: border-color var(--transition);
}

.chunk-card:hover {
    border-color: var(--border-accent);
}

.chunk-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}

.chunk-index {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
}

.chunk-badges {
    display: flex;
    gap: 4px;
    align-items: center;
}

.chunk-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chunk-badge.code {
    color: #818cf8;
    background: rgba(129, 140, 248, 0.1);
    border: 1px solid rgba(129, 140, 248, 0.2);
}

.chunk-badge.starred {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

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

.chunk-score-track {
    flex: 1;
    height: 3px;
    background: var(--bg-surface);
    border-radius: 3px;
    overflow: hidden;
    max-width: 80px;
}

.chunk-score-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.chunk-score-label {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
}

.chunk-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 120px;
    overflow: hidden;
    position: relative;
}

.chunk-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: linear-gradient(transparent, var(--bg-tertiary));
    pointer-events: none;
}

.chunk-role {
    font-size: 10px;
    color: var(--text-faint);
    margin-top: 6px;
}

.chunks-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 24px 0;
}

.chunks-summary {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 6px;
}

/* ================================================================
   P2-9: Keyboard Shortcuts Modal
   ================================================================ */

.shortcuts-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 9, 8, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.15s ease;
}

.shortcuts-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 440px;
    animation: modalSpring 0.4s var(--ease-spring);
    overflow: hidden;
}

.shortcuts-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border);
}

.shortcuts-modal-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
}

.shortcuts-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.shortcuts-modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    transform: rotate(90deg);
}

.shortcuts-table {
    width: 100%;
    padding: 10px 22px 18px;
}

.shortcuts-table table {
    width: 100%;
    border-collapse: collapse;
}

.shortcuts-table tr {
    border-bottom: 1px solid var(--border-subtle);
}

.shortcuts-table tr:last-child {
    border-bottom: none;
}

.shortcuts-table td {
    padding: 10px 0;
    font-size: 13px;
    color: var(--text-secondary);
    vertical-align: middle;
}

.shortcuts-table td:first-child {
    width: 140px;
    padding-right: 16px;
}

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 2px 7px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-accent);
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 1px 0 1px var(--bg-primary);
    white-space: nowrap;
}

.shortcut-keys {
    display: flex;
    align-items: center;
    gap: 4px;
}

.shortcut-plus {
    font-size: 10px;
    color: var(--text-faint);
}

/* Sidebar shortcut button */
.btn-shortcuts {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    width: 100%;
    text-align: left;
}

.btn-shortcuts svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.btn-shortcuts:hover {
    color: var(--text-primary);
    border-color: var(--border);
    background: var(--bg-hover);
}

.btn-shortcuts kbd {
    margin-left: auto;
    height: 20px;
    min-width: 20px;
    font-size: 10px;
    padding: 1px 5px;
}

/* ================================================================
   P2-10: Undo Delete Toast
   ================================================================ */

/* ================================================================
   System Status Modal
   ================================================================ */

.system-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12,9,8,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    backdrop-filter: blur(8px);
    animation: fadeIn 0.15s ease;
}

.system-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: min(760px, 92vw);
    height: min(580px, 86vh);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modalSpring 0.4s var(--ease-spring);
}

.system-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px 12px;
    border-bottom: 1px solid var(--border);
}

.system-modal-hic {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 9px;
    display: grid; place-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.system-modal-hic svg { width: 17px; height: 17px; }

.system-modal-htext { flex: 1; min-width: 0; }
.system-modal-title {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.system-modal-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* Overall health pill */
.sys-overall-pill {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    font-size: 11.5px; font-weight: 600;
    padding: 5px 11px; border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
}
.sys-overall-pill .blip { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.sys-overall-pill[data-state="ok"] {
    background: color-mix(in oklab, var(--ok) 10%, transparent); color: var(--success); border-color: color-mix(in oklab, var(--ok) 25%, transparent);
}
.sys-overall-pill[data-state="ok"] .blip { background: var(--success); box-shadow: 0 0 8px var(--success); animation: sysBlip 2s ease-in-out infinite; }
.sys-overall-pill[data-state="warn"] {
    background: rgba(251,191,36,0.1); color: var(--warning); border-color: rgba(251,191,36,0.25);
}
.sys-overall-pill[data-state="warn"] .blip { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.sys-overall-pill[data-state="err"] {
    background: rgba(248,113,113,0.1); color: var(--danger); border-color: rgba(248,113,113,0.25);
}
.sys-overall-pill[data-state="err"] .blip { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
@keyframes sysBlip { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.system-modal-close {
    width: 28px; height: 28px; flex-shrink: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: grid; place-items: center;
    transition: background var(--transition), color var(--transition);
}
.system-modal-close svg { width: 14px; height: 14px; }
.system-modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Tabs */
.system-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 18px 0;
    border-bottom: 1px solid var(--border);
}

.system-tab {
    position: relative;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    padding: 7px 12px 11px;
    cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    transition: color var(--transition);
}
.system-tab:hover   { color: var(--text-secondary); }
.system-tab.active  { color: var(--text-primary); }
.system-tab.active::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
    background: var(--accent); border-radius: 2px 2px 0 0;
}
.sys-tab-cnt {
    font-size: 10px; font-family: var(--font-mono);
    padding: 1px 6px; border-radius: var(--radius-pill);
    background: rgba(248,113,113,0.12); color: var(--danger); border: 1px solid rgba(248,113,113,0.25);
}

.system-tab-panel { padding: 16px 18px 18px; overflow-y: auto; flex: 1; min-height: 0; }

/* Health: hero strip */
.sys-health-hero {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 14px; margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-surface);
}
.sys-health-hero[data-state="ok"]   { border-color: color-mix(in oklab, var(--ok) 25%, transparent);  background: linear-gradient(135deg, color-mix(in oklab, var(--ok) 8%, transparent), transparent 70%); }
.sys-health-hero[data-state="warn"] { border-color: rgba(251,191,36,0.25);  background: linear-gradient(135deg, rgba(251,191,36,0.08), transparent 70%); }
.sys-health-hero[data-state="err"]  { border-color: rgba(248,113,113,0.25); background: linear-gradient(135deg, rgba(248,113,113,0.08), transparent 70%); }
.sys-hero-ring {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary);
}
.sys-hero-ring svg { width: 19px; height: 19px; }
.sys-health-hero[data-state="ok"]   .sys-hero-ring { background: color-mix(in oklab, var(--ok) 10%, transparent);  border-color: color-mix(in oklab, var(--ok) 25%, transparent);  color: var(--success); }
.sys-health-hero[data-state="warn"] .sys-hero-ring { background: rgba(251,191,36,0.1);  border-color: rgba(251,191,36,0.25);  color: var(--warning); }
.sys-health-hero[data-state="err"]  .sys-hero-ring { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.25); color: var(--danger); }
.sys-hero-text { flex: 1; min-width: 0; }
.sys-hero-title { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text-primary); }
.sys-hero-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.sys-hero-restart {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 12px; cursor: pointer; font-family: inherit;
    transition: border-color var(--transition), color var(--transition);
}
.sys-hero-restart svg { width: 14px; height: 14px; }
.sys-hero-restart:hover { border-color: rgba(248,113,113,0.3); color: var(--danger); }

/* Health grid */
.sys-status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.sys-grouplabel {
    grid-column: 1 / -1;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--text-faint);
    margin: 8px 2px 0;
}
.sys-grouplabel:first-child { margin-top: 0; }

.sys-status-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 0;
    color: var(--text-faint);
    font-size: 13px;
    grid-column: 1 / -1;
}

.sys-loader-spinner {
    width: 32px; height: 32px; border-radius: 50%;
    border: 2.5px solid var(--border);
    border-top-color: var(--text-primary);
    animation: sysLoaderSpin 0.8s linear infinite;
}
.sys-loader-text {
    font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em;
    color: var(--text-muted);
    animation: sysLoaderPulse 1.6s ease-in-out infinite;
}
@keyframes sysLoaderSpin { to { transform: rotate(360deg); } }
@keyframes sysLoaderPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.sys-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 11px 12px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    transition: border-color var(--transition);
}
.sys-card:hover { border-color: var(--border-accent); }
.sys-card.wide { grid-column: span 2; }

.sys-card-ic {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 8px; display: grid; place-items: center;
    background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary);
}
.sys-card-ic svg { width: 15px; height: 15px; }

.sys-card-body { flex: 1; min-width: 0; }

.sys-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sys-card-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.sys-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-left: auto;
}
.sys-dot.ok      { background: var(--success); box-shadow: 0 0 7px color-mix(in oklab, var(--ok) 60%, transparent); }
.sys-dot.warn    { background: var(--warning); box-shadow: 0 0 7px rgba(251,191,36,0.5); }
.sys-dot.err     { background: var(--danger);  box-shadow: 0 0 7px rgba(248,113,113,0.5); }

.sys-card-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-top: 4px;
    word-break: break-word;
}
.sys-card-value.mono { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }

.sys-card-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.sys-models {
    display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px;
}
.sys-model-chip {
    font-family: var(--font-mono); font-size: 11px;
    padding: 3px 9px; border-radius: var(--radius-pill);
    background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: 6px;
}
.sys-model-chip .d { width: 5px; height: 5px; border-radius: 50%; background: var(--success); flex-shrink: 0; }

/* Logs */
.logs-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.log-filters {
    display: inline-flex;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px; gap: 2px;
}
.log-filter {
    font-size: 11.5px; font-weight: 600;
    padding: 5px 11px; border-radius: 6px; border: none;
    background: transparent; color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.log-filter .n { font-family: var(--font-mono); font-size: 10px; opacity: 0.85; }
.log-filter:hover { color: var(--text-secondary); }
.log-filter.on { background: var(--bg-active); color: var(--text-primary); }
.log-filter.on.lvl-err  { color: var(--danger); }
.log-filter.on.lvl-warn { color: var(--warning); }

.log-search { position: relative; flex: 1; min-width: 130px; }
.log-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-faint); pointer-events: none; }
.log-search input {
    width: 100%; background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary);
    font-family: var(--font-body); font-size: 12.5px; padding: 8px 10px 8px 32px; outline: none;
    transition: border-color var(--transition);
}
.log-search input:focus { border-color: var(--border-accent); }
.log-search input::placeholder { color: var(--text-faint); }

.logs-lines-select {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: inherit;
    padding: 8px 28px 8px 10px;
    cursor: pointer;
    outline: none;
    /* Strip the native control and draw an app-matching chevron instead. */
    -webkit-appearance: none;
    appearance: none;
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    transition: border-color var(--transition), background-color var(--transition);
}
.logs-lines-select:hover { border-color: var(--border-accent); color: var(--text-primary); }
.logs-lines-select:focus { border-color: var(--border-accent); }
:root .logs-lines-select { color-scheme: light; }

.logs-autoscroll-label {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.logs-viewer {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 0;
    flex: 1;
    min-height: 220px;
    overflow: auto;
    font-family: var(--cv-code);
    font-size: 12px;
    line-height: 1.65;
}
.logs-viewer .sys-status-loading { padding: 40px 0; }

.log-line {
    display: grid;
    grid-template-columns: 72px 54px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 2px 14px 2px 0;
    border-left: 2px solid transparent;
}
.log-line:hover { background: var(--bg-hover); }
.log-line .log-ts  { color: var(--text-faint); padding-left: 14px; white-space: nowrap; }
.log-line .log-lvl { font-weight: 600; font-size: 10px; letter-spacing: 0.04em; text-align: right; white-space: nowrap; }
.log-line .log-msg { color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
.log-line.log-info  .log-lvl { color: var(--info); }
.log-line.log-debug .log-lvl { color: var(--text-faint); }
.log-line.log-debug .log-msg { color: var(--text-muted); }
.log-line.log-warning { border-left-color: var(--warning); background: rgba(251,191,36,0.03); }
.log-line.log-warning .log-lvl { color: var(--warning); }
.log-line.log-warning .log-msg { color: var(--text-primary); }
.log-line.log-error { border-left-color: var(--danger); background: rgba(248,113,113,0.05); }
.log-line.log-error .log-lvl { color: var(--danger); }
.log-line.log-error .log-msg { color: #fca5a5; }
:root .log-line.log-error .log-msg { color: #b91c1c; }

.log-empty { color: var(--text-faint); font-size: 12px; padding: 32px 14px; text-align: center; }

/* ================================================================
   Skeleton Loaders
   ================================================================ */

.skeleton-card {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-elevated) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 800px 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    height: 160px;
}

:root .skeleton-card {
    background: linear-gradient(
        90deg,
        #ebebeb 25%,
        #f8f8f8 50%,
        #ebebeb 75%
    );
    background-size: 800px 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    border-color: rgba(60,42,34,0.06);
}

/* ================================================================
   Summarize Progress Bar
   ================================================================ */

.summarize-progress-bar {
    width: 80px;
    height: 3px;
    background: rgba(60,42,34,0.25);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.summarize-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cv-volt-2), var(--cv-volt));
    border-radius: 3px;
    width: 0%;
    transition: width 0.4s var(--ease-out);
    box-shadow: 0 0 8px var(--cv-volt-glow);
}

.summarize-progress-text {
    font-family: var(--cv-mono);
    font-size: 11px;
    color: rgba(12,9,8,0.65);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ================================================================
   Feature 1: Collapsible Sidebar
   ================================================================ */

.sidebar-collapse-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-faint);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all var(--transition);
    flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-accent);
    background: var(--bg-hover);
}

.sidebar-collapse-btn svg {
    transition: transform 0.3s var(--ease-spring);
}

/* Collapsed state */
.app-container.sidebar-collapsed .sidebar {
    width: 56px;
    overflow: hidden;
}

.app-container.sidebar-collapsed .sidebar-brand,
.app-container.sidebar-collapsed .nav-label,
.app-container.sidebar-collapsed .collections-section,
.app-container.sidebar-collapsed .sidebar-section-label,
.app-container.sidebar-collapsed .settings-current-model,
.app-container.sidebar-collapsed .status-text,
.app-container.sidebar-collapsed .btn-settings span:not(.sr-only),
.app-container.sidebar-collapsed .btn-shortcuts span:not(.sr-only):not(kbd),
.app-container.sidebar-collapsed .btn-shortcuts kbd,
.app-container.sidebar-collapsed .btn-embed-all,
.app-container.sidebar-collapsed .btn-restart span {
    display: none !important;
}

.app-container.sidebar-collapsed .sidebar-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 0 10px;
    gap: 6px;
    border-bottom-color: transparent;
}

.app-container.sidebar-collapsed .sidebar-logo {
    justify-content: center;
}

.app-container.sidebar-collapsed .sidebar-collapse-btn {
    width: 28px;
    height: 20px;
    border-color: transparent;
    opacity: 0.45;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.app-container.sidebar-collapsed .sidebar-collapse-btn:hover {
    opacity: 1;
    border-color: var(--border-accent);
}

.app-container.sidebar-collapsed .sidebar-nav {
    padding: 6px;
}

.app-container.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 10px 0;
    width: 40px;
    height: 40px;
    margin: 2px auto;
    border-radius: 10px;
}

.app-container.sidebar-collapsed .nav-item.active::before,
.app-container.sidebar-collapsed .nav-item:hover::before {
    display: none;
}

.app-container.sidebar-collapsed .sidebar-footer {
    padding: 8px 6px 12px;
    align-items: center;
}

.app-container.sidebar-collapsed .btn-settings,
.app-container.sidebar-collapsed .btn-shortcuts,
.app-container.sidebar-collapsed .btn-restart {
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 1px auto;
    border-radius: 8px;
    /* Hide bare text nodes (not wrapped in <span>) by zeroing font-size.
       SVGs keep their explicit width/height so they remain visible. */
    font-size: 0;
    line-height: 0;
    gap: 0;
    overflow: hidden;
}

.app-container.sidebar-collapsed .status-indicator {
    justify-content: center;
    padding: 6px 0;
    width: 36px;
    margin: 0 auto;
}

.app-container.sidebar-collapsed .status-indicator .status-text {
    display: none;
}

.app-container.sidebar-collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

.app-container.sidebar-collapsed .main-content::before {
    left: 56px;
}

/* ================================================================
   Feature 2: Fluid Typography with clamp()
   ================================================================ */

/* Already applied via view-header h1 etc — adding responsive scaling */
@media (min-width: 768px) {
    .view-header h1 {
        font-size: clamp(24px, 2.5vw, 32px);
    }

    .detail-title {
        font-size: clamp(22px, 2.2vw, 28px);
    }

    .chat-textarea {
        font-size: clamp(12px, 1vw, 14px);
    }
}

/* ================================================================
   Feature 3: Tag Chip Micro-animations
   ================================================================ */

.tag-chip {
    transition: all 0.18s var(--ease), transform 0.2s var(--ease-spring);
}

.tag-chip:hover {
    transform: translateY(-2px) scale(1.02);
}

.tag-chip:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.08s;
}

/* ================================================================
   Feature 4: Sticky Detail Header
   ================================================================ */

.detail-sticky-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-primary);
    border-bottom: 1px solid transparent;
    padding: 12px 0;
    margin: -12px 0 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.detail-sticky-header.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    border-bottom-color: var(--border);
    background: rgba(13, 11, 9, 0.92);
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 16px rgba(60,42,34,0.3);
}

:root .detail-sticky-header.visible {
    background: rgba(247, 247, 248, 0.92);
    box-shadow: 0 4px 16px rgba(60,42,34,0.06);
}

.detail-sticky-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.detail-sticky-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ================================================================
   Feature 5: CSS Tooltips on Hover
   ================================================================ */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) scale(0.92);
    background: #241F1B;
    color: #f0f0f0;
    font-size: 11.5px;
    font-weight: 500;
    font-family: var(--font-body);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,238,230,0.08);
    box-shadow: 0 4px 16px rgba(12,9,8,0.35);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s var(--ease-spring);
    z-index: 1000;
}

/* Hide tooltips in expanded sidebar — labels are already visible */
.app-container:not(.sidebar-collapsed) .sidebar-footer [data-tooltip]::after {
    display: none;
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    transition-delay: 0.5s;
}

/* Collapsed sidebar: faster tooltip, always shown */
.app-container.sidebar-collapsed [data-tooltip]::after {
    transition-delay: 0.15s;
}

.app-container.sidebar-collapsed [data-tooltip]:hover::after {
    transition-delay: 0.15s;
}

/* ================================================================
   Feature 6: Better Empty State — Animated
   ================================================================ */

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
    animation: fadeIn 0.4s var(--ease-out);
}

.empty-illustration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    position: relative;
}

.empty-illustration svg {
    opacity: 0.18;
    animation: emptyFloat 4s ease-in-out infinite;
}

@keyframes emptyFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

.empty-illustration::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 6px;
    background: radial-gradient(ellipse, rgba(255,238,230,0.06) 0%, transparent 70%);
    border-radius: 50%;
    animation: emptyShadow 4s ease-in-out infinite;
}

@keyframes emptyShadow {
    0%   { width: 48px; opacity: 1; }
    50%  { width: 36px; opacity: 0.5; }
    100% { width: 48px; opacity: 1; }
}

:root .empty-illustration::after {
    background: radial-gradient(ellipse, rgba(60,42,34,0.06) 0%, transparent 70%);
}

.empty-state h3 {
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.empty-state p {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 340px;
    margin: 0 auto;
}

/* ================================================================
   Feature 7: Search Term Highlighting
   ================================================================ */

.search-highlight {
    background: rgba(250, 204, 21, 0.2);
    color: var(--text-primary);
    border-radius: 2px;
    padding: 0 1px;
    font-weight: inherit;
}

:root .search-highlight {
    background: rgba(250, 204, 21, 0.3);
}

/* ================================================================
   Sidebar Tooltips (JS-positioned, appended to body)
   ================================================================ */

#sidebar-tooltip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

#sidebar-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

#sidebar-tooltip-arrow {
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right-color: rgba(21, 18, 16, 0.94);
}

#sidebar-tooltip-content {
    background: rgba(21, 18, 16, 0.94);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    padding: 7px 12px;
    border-radius: 8px;
    white-space: nowrap;
    border: 1px solid rgba(255,238,230,0.08);
    box-shadow:
        0 4px 16px rgba(12, 9, 8, 0.4),
        0 0 0 1px rgba(60,42,34,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

:root #sidebar-tooltip-content {
    background: rgba(13, 11, 9, 0.9);
    color: #fafafa;
    border-color: rgba(255,238,230,0.06);
    box-shadow:
        0 4px 20px rgba(60,42,34,0.2),
        0 0 0 1px rgba(60,42,34,0.05);
}

:root #sidebar-tooltip-arrow {
    border-right-color: rgba(13, 11, 9, 0.9);
}

/* ================================================================
   Ask — RAG Chat UI
   ================================================================ */

#view-ask {
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

.ask-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - clamp(56px, 8vh, 112px));
    overflow: hidden;
}

/* ── Messages area ────────────────────────────────────────────── */
.ask-messages {
    flex: 1;
    overflow-y: auto;
    padding: 32px 24px 16px;
    scroll-behavior: smooth;
}

/* ── Empty state ──────────────────────────────────────────────── */
.ask-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    gap: 12px;
    padding: 40px 20px;
    animation: cardIn 0.4s var(--ease-out) both;
}

.ask-empty-icon {
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 8px;
    animation: sysLoaderPulse 3s ease-in-out infinite;
}

.ask-empty h1 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

.ask-empty-desc {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 400px;
    line-height: 1.5;
    margin: 0;
}

/* Suggestion pills */
.ask-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    justify-content: center;
    max-width: 560px;
}

.ask-suggestion {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 12.5px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s var(--ease);
    white-space: nowrap;
}

.ask-suggestion:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* ── Message bubbles ──────────────────────────────────────────── */
.ask-msg {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    animation: askMsgIn 0.3s var(--ease-out) both;
    max-width: 800px;
}

@keyframes askMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ask-msg-user {
    flex-direction: row-reverse;
    margin-left: auto;
}

.ask-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
}

/* Dark: subtle light bg. Light: dark bg */
.ask-msg-user .ask-msg-avatar {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.ask-msg-assistant .ask-msg-avatar {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.ask-msg-body {
    flex: 1;
    min-width: 0;
}

.ask-msg-content {
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.65;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* User bubble: subtle elevated bg */
.ask-msg-user .ask-msg-content {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-bottom-right-radius: 4px;
}

/* Assistant bubble: card bg */
.ask-msg-assistant .ask-msg-content {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

/* Markdown inside assistant messages */
.ask-msg-assistant .ask-msg-content p {
    margin: 0 0 8px;
}
.ask-msg-assistant .ask-msg-content p:last-child {
    margin-bottom: 0;
}
.ask-msg-assistant .ask-msg-content code {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12.5px;
    font-family: var(--cv-code);
    color: var(--text-primary);
}
.ask-msg-assistant .ask-msg-content pre {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
    margin: 8px 0;
    font-size: 12px;
}
.ask-msg-assistant .ask-msg-content pre code {
    background: none;
    border: none;
    padding: 0;
}
.ask-msg-assistant .ask-msg-content ul,
.ask-msg-assistant .ask-msg-content ol {
    padding-left: 18px;
    margin: 6px 0;
}
.ask-msg-assistant .ask-msg-content li {
    margin-bottom: 4px;
    color: var(--text-primary);
}
.ask-msg-assistant .ask-msg-content strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Markdown: headings, links, blockquotes, rules, strikethrough */
.ask-msg-assistant .ask-msg-content .cv-md-h {
    color: var(--text-primary);
    font-weight: 650;
    line-height: 1.3;
    margin: 14px 0 6px;
}
.ask-msg-assistant .ask-msg-content .cv-md-h:first-child { margin-top: 0; }
.ask-msg-assistant .ask-msg-content h1.cv-md-h { font-size: 1.35em; }
.ask-msg-assistant .ask-msg-content h2.cv-md-h { font-size: 1.2em; }
.ask-msg-assistant .ask-msg-content h3.cv-md-h { font-size: 1.08em; }
.ask-msg-assistant .ask-msg-content h4.cv-md-h,
.ask-msg-assistant .ask-msg-content h5.cv-md-h,
.ask-msg-assistant .ask-msg-content h6.cv-md-h { font-size: 1em; color: var(--text-secondary); }
.ask-msg-assistant .ask-msg-content a {
    color: var(--cv-volt, #FF7A52);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ask-msg-assistant .ask-msg-content a:hover { filter: brightness(1.15); }
.ask-msg-assistant .ask-msg-content .cv-md-quote {
    margin: 8px 0;
    padding: 2px 12px;
    border-left: 3px solid var(--border-accent);
    color: var(--text-secondary);
}
.ask-msg-assistant .ask-msg-content .cv-md-quote p { margin: 4px 0; }
.ask-msg-assistant .ask-msg-content .cv-md-hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 14px 0;
}
.ask-msg-assistant .ask-msg-content del { color: var(--text-muted); }

/* Streaming cursor */
.ask-cursor {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: var(--text-secondary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: askBlink 0.8s step-end infinite;
}

@keyframes askBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ── Sources ──────────────────────────────────────────────────── */
.ask-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.ask-sources-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
    width: 100%;
    margin-bottom: 2px;
}

.ask-cite {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: super;
}
.ask-cite a {
    color: var(--cv-volt);
    text-decoration: none;
    font-weight: 600;
    padding: 0 1px;
}
.ask-cite a:hover { text-decoration: underline; }

.ask-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--accent-subtle);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    font-family: var(--font-body);
}

.ask-source-chip:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.ask-source-score {
    font-size: 10px;
    opacity: 0.5;
    font-family: var(--font-mono);
}

.ask-source-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 320px;
}

.ask-source-snippet {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
    padding: 0 4px;
    opacity: 0.85;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Thinking indicator ───────────────────────────────────────── */
.ask-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--text-muted);
    font-size: 12.5px;
    animation: askMsgIn 0.3s var(--ease-out) both;
}

.ask-thinking-dots {
    display: flex;
    gap: 4px;
}

.ask-thinking-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.5;
    animation: askDot 1.4s ease-in-out infinite;
}

.ask-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.ask-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes askDot {
    0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
    30% { opacity: 1; transform: scale(1.3); }
}

/* ── Input bar ────────────────────────────────────────────────── */
.ask-input-bar {
    padding: 12px 24px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-primary);
}

.ask-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px 4px 4px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ask-input-row:focus-within {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.ask-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
    padding: 10px 0;
}

.ask-input::placeholder {
    color: var(--text-muted);
}

.ask-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--bg-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ask-send-btn:hover:not(:disabled) {
    opacity: 0.85;
    transform: scale(1.05);
}

.ask-send-btn:disabled {
    opacity: 0.15;
    cursor: not-allowed;
    transform: none;
}

.ask-input-hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px 0;
    font-size: 11px;
    color: var(--text-muted);
}

.ask-clear-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-body);
    transition: all 0.15s ease;
}

/* ================================================================
   ContextMove v2 — "Cinematic Volt" design system
   cv- prefix prevents collisions with existing styles.
   ================================================================ */

:root {
  /* ── Core scale ────────────────────────────────────────────────
     The canonical palette, and the only one. Everything below is an alias
     onto these, so a colour changes in exactly one place. Warm paper
     rather than cool porcelain. */
  --paper:      #FCFAF9;   /* page ground                    */
  --surface:    #FFFFFF;   /* raised surface                 */
  --sunk:       #F6F2EF;   /* hover / recessed               */
  --rule:       #EDE6E1;   /* divider                        */
  --rule-soft:  #F3EDE9;   /* divider, list rows             */
  --ink:        #1C1B1B;   /* primary text                   */
  --copy:       #61514B;   /* body text                      */
  --muted:      #9C8B84;   /* secondary text                 */
  --faint:      #C4B6AF;   /* tertiary / icons at rest       */
  --coral:      #F2542D;   /* accent                         */
  --coral-soft: rgba(242,84,45,.09);    /* accent wash       */
  --ok:         #3E8C63;   /* positive state                 */

  /* Derived: one step past --rule / --faint, for pressed edges and the
     faintest disabled ink. Not part of the core scale. */
  --rule-strong: #E0D5CE;
  --faint-2:     #D8CCC5;

  /* ── Legacy cv-* aliases ───────────────────────────────────────
     The sheet is ~16k lines written against these names; aliasing is
     what makes the palette swap a token edit instead of a rewrite. */
  --cv-bg-0:     var(--paper);
  --cv-bg-1:     var(--surface);
  --cv-bg-2:     var(--sunk);
  --cv-bg-3:     var(--sunk);
  --cv-bg-4:     #EDE6E1;
  --cv-volt:     var(--coral);
  --cv-volt-2:   #D8451F;
  --cv-volt-dim: var(--coral-soft);
  --cv-volt-glow:rgba(242,84,45,.18);
  /* ── Floating-island depth ─────────────────────────────────────
     One recipe for all four rails (dashboard, library, ask, detail) so
     the warmth can't drift apart per-view. A warm-brown ambient layer
     carries the lift; a wider coral layer under it tints the falloff
     orange, the same way the brand ramp warms .cv-primary. */
  --cv-island-shadow:
    0 14px 30px -16px rgba(60,42,34,0.22),
    0 12px 32px -12px color-mix(in oklab, var(--coral) 26%, transparent);
  --cv-plasma:   var(--coral);
  /* Shared card/panel surface — one token so light mode can flip every
     card at once instead of relying on per-component overrides. */
  --cv-surface:  var(--surface);
  --cv-inset:    var(--sunk);
  /* Five legacy steps onto four palette roles. --cv-text-3 carries most of the
     app's small secondary text (row subtitles, mono meta labels); it gets
     --muted, not --faint, because --faint on --surface is ~2.4:1 and --faint's
     stated role is "icons at rest", not running text. --faint lands on
     --cv-text-4, which is only ever decorative. */
  --cv-text-0:   var(--ink);
  --cv-text-1:   var(--copy);
  --cv-text-2:   var(--copy);
  --cv-text-3:   var(--muted);
  --cv-text-4:   var(--faint);
  --cv-line:     var(--rule);
  --cv-line-2:   var(--rule-strong);
  --cv-r-sm: 10px;
  --cv-r-md: 14px;
  --cv-r-lg: 20px;
  --cv-r-xl: 28px;
  --cv-ease:   cubic-bezier(0.2, 0.7, 0.1, 1);
  --cv-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
  /* ── Type, matched to contextmove.com ──────────────────────────
     The site defines exactly two faces:
       --font-body:    "Plus Jakarta Sans", sans-serif
       --font-display: "Plus Jakarta Sans", sans-serif
     Plus Jakarta carries all UI type here (replacing DM Sans and Space
     Grotesk), including the dashboard hero line: the site sets its own hero
     headline in the body face, so there is no second face to scope.
     Geist Mono used to carry the "meta label" role — breadcrumbs, section
     eyebrows, counts, badges, kbd hints. It read as terminal output rather
     than as interface, so it is gone from the product entirely. Those labels
     now set in the body face and lean on size, weight, colour, letter-spacing
     and uppercasing for the label-vs-data hierarchy instead, which is what the
     site does too.

     --cv-mono is kept as a name only so the ~160 label call-sites did not all
     need rewriting; it resolves to the body stack. Anything where character
     alignment is the actual point — code blocks, log output, keys and command
     lines — uses --cv-code, which is the platform's own monospace rather than
     a webfont. */
  --cv-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --cv-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Kept as a name only. The site's hero sets its headline in the body
     face, so the app's hero does too and nothing here loads a serif. */
  --cv-serif:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --cv-mono:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --cv-code:    ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  /* ── Brand gradient, lifted from the site's hero CTA ────────────
     .bg-brand-gradient { background: linear-gradient(135deg, #FF6B4A 0%, #FF9D3A 100%) }
     Kept distinct from --coral: the site does the same, pairing a flat
     accent with this gradient rather than deriving one from the other. */
  --brand-coral:    #FF6B4A;
  --brand-orange:   #FF9D3A;
  --brand-gradient: linear-gradient(135deg, #FF6B4A 0%, #FF9D3A 100%);
}

/* Ambient aurora layer */
.cv-ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 600px at 70% -10%, color-mix(in oklab, var(--cv-volt) 5%, transparent) 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 100%, color-mix(in oklab, var(--cv-plasma) 5%, transparent) 0%, transparent 55%),
    radial-gradient(1000px 700px at 100% 100%, rgba(255,238,230,0.018) 0%, transparent 60%);
  filter: saturate(0.95);
  transition: background 0.6s var(--cv-ease), opacity 0.6s var(--cv-ease);
}

/* Grain overlay */
.cv-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  mix-blend-mode: overlay; opacity: .16;
}

/* App shell: raise above ambient layers */
#app.app-container { position: relative; z-index: 2; background: var(--cv-bg-0); }

/* ── Sidebar (cv-side) ────────────────────────────────────────── */
.sidebar.cv-side {
  /* Mirrors light mode's sidebar exactly: the raised --surface step with a
     --rule hairline. It used to paint a cool near-black gradient that was
     darker than --paper, so the rail sank into the page instead of lifting
     off it — the opposite of what the same rail does on paper. */
  background: var(--surface);
  border-right: 1px solid var(--cv-line);
  padding: 20px 14px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
:root .sidebar.cv-side {
  background: linear-gradient(180deg, #ffffff, #fafafa);
  border-right-color: rgba(60,42,34,0.1);
}

/* Brand row */
.cv-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 16px;
  border-bottom: 1px solid var(--cv-line);
  flex-shrink: 0;
}
:root .cv-brand { border-bottom-color: rgba(60,42,34,0.08); }
.cv-logo {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255,238,230,0.1),
    0 4px 16px rgba(12,9,8,0.55);
}
/* Top-edge shimmer that works on the dark icon */
.cv-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: linear-gradient(160deg, rgba(255,238,230,0.07) 0%, transparent 50%);
  pointer-events: none;
}
:root .cv-logo {
  box-shadow: 0 0 0 1px rgba(60,42,34,0.1), 0 4px 12px rgba(60,42,34,0.2);
}
.cv-logo img { width: 32px; height: 32px; display: block; object-fit: cover; }
.cv-brand-text { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
.cv-brand-text .n {
  font-family: var(--cv-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: 15px; color: var(--cv-text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root .cv-brand-text .n { color: #111113; }
.cv-brand-text .v {
  font-family: var(--cv-mono); font-size: 10px; color: var(--cv-text-3);
  letter-spacing: 0.04em; text-transform: uppercase;
}
:root .cv-brand-text .v { color: #a1a1aa; }

/* Sidebar section */
.cv-side-section { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
/* Breathing room between sections (Workspace / Collections / …) */
.cv-side-section + .cv-side-section,
#collections-section { margin-top: 14px; }
.cv-side-label {
  font-family: var(--cv-mono); font-size: 10px; font-weight: 500;
  color: var(--cv-text-3); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 10px 7px;
  display: flex; align-items: center; justify-content: space-between;
}
:root .cv-side-label { color: #a1a1aa; }

/* Nav items */
.nav-item.cv-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--cv-r-sm);
  color: var(--cv-text-2); background: transparent;
  border: 1px solid transparent;
  font: 500 13.5px/1 var(--cv-body);
  cursor: pointer; width: 100%; text-align: left;
  transition: all 0.18s var(--cv-ease); white-space: nowrap;
}
.nav-item.cv-nav:hover { color: var(--cv-text-0); background: rgba(255,238,230,0.03); }
:root .nav-item.cv-nav { color: #52525b; }
:root .nav-item.cv-nav:hover { color: #2e2e33; background: rgba(60,42,34,0.03); }
.nav-item.cv-nav .cv-nav-ic {
  width: 18px; height: 18px; display: grid; place-items: center;
  color: var(--cv-text-3); transition: color 0.18s var(--cv-ease); flex-shrink: 0;
}
.nav-item.cv-nav:hover .cv-nav-ic { color: var(--cv-text-1); }
.nav-item.cv-nav.active {
  color: var(--cv-text-0);
  background: linear-gradient(180deg, rgba(255,238,230,0.05), rgba(255,238,230,0.02));
  border-color: var(--cv-line-2);
  box-shadow: inset 0 1px 0 rgba(255,238,230,0.05), 0 1px 0 rgba(12,9,8,0.4);
}
:root .nav-item.cv-nav.active { color: #111113; background: rgba(60,42,34,0.05); border-color: rgba(60,42,34,0.1); }
.nav-item.cv-nav.active .cv-nav-ic { color: var(--cv-volt); }
:root .nav-item.cv-nav.active .cv-nav-ic { color: #27272a; }
.cv-nav-kbd {
  margin-left: auto; font-family: var(--cv-mono); font-size: 10px; color: var(--cv-text-3);
  padding: 2px 6px; border-radius: 5px; background: rgba(255,238,230,0.04); border: 1px solid var(--cv-line);
}

/* Collection items — match the Workspace nav rhythm */
.collections-list .collection-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--cv-r-sm);
  color: var(--cv-text-2); background: transparent; border: 1px solid transparent;
  font: 500 13px/1.1 var(--cv-body); cursor: pointer; width: 100%; text-align: left;
  transition: all 0.18s var(--cv-ease);
}
.collections-list .collection-item:hover { color: var(--cv-text-0); background: rgba(255,238,230,0.03); }
.collections-list .collection-item.active { color: var(--cv-text-0); background: rgba(255,238,230,0.04); border-color: var(--cv-line-2); }

.cv-side-iconbtn {
  background: transparent; border: 1px solid var(--cv-line);
  color: var(--cv-text-3); border-radius: 6px;
  width: 20px; height: 20px; display: grid; place-items: center;
  cursor: pointer; transition: all 0.18s var(--cv-ease); flex-shrink: 0; padding: 0;
}
.cv-side-iconbtn:hover { color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent); background: var(--cv-volt-dim); }

/* Sidebar footer — flows naturally after Collections */
.cv-side-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--cv-line);
  flex-shrink: 0;
}

/* LLM ready status + Settings & Models pinned to the very bottom (Claude-style) */
.cv-side-settings-anchor {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--cv-line);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Ready indicator sits flush in the bottom group (its own top margin is redundant here) */
.cv-side-settings-anchor .cv-status { margin-top: 0; }
.cv-util.cv-util-settings {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--cv-r-sm);
  transition: background var(--transition), border-color var(--transition), transform 0.15s ease;
}
.cv-util.cv-util-settings:hover {
  background: var(--bg-active);
  border-color: var(--border-accent);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.cv-util.cv-util-settings .cv-util-ic { color: var(--text-secondary); }
.cv-util.cv-util-settings:hover .cv-util-ic { color: var(--text-primary); }
.cv-side-settings-anchor .cv-util-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  padding: 0 4px;
  line-height: 1.3;
}
:root .cv-side-settings-anchor { border-top-color: rgba(60,42,34,0.08); }

/* Noir vibe — settings button gets the white-pill treatment */
[data-vibe="noir"] .cv-util.cv-util-settings {
  background: linear-gradient(180deg, rgba(255,238,230,0.04), rgba(255,238,230,0.015));
  border-color: rgba(255,238,230,0.09);
  box-shadow: 0 1px 0 rgba(255,238,230,0.04) inset;
}
[data-vibe="noir"] .cv-util.cv-util-settings:hover {
  background: linear-gradient(180deg, rgba(255,238,230,0.08), rgba(255,238,230,0.03));
  border-color: rgba(255,238,230,0.16);
  box-shadow:
    0 1px 0 rgba(255,238,230,0.08) inset,
    0 4px 14px -6px rgba(12,9,8,0.5);
}
:root .cv-side-foot { border-top-color: rgba(60,42,34,0.08); }
.cv-util {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--cv-r-sm);
  background: transparent; border: 1px solid transparent;
  color: var(--cv-text-2); font: 500 12.5px/1 var(--cv-body);
  cursor: pointer; transition: all 0.18s var(--cv-ease); white-space: nowrap;
}
.cv-util:hover { color: var(--cv-text-0); background: rgba(255,238,230,0.03); border-color: var(--cv-line); }
:root .cv-util { color: #52525b; }
:root .cv-util:hover { color: #111113; background: rgba(60,42,34,0.04); }
.cv-util .cv-util-ic { width: 14px; height: 14px; display: grid; place-items: center; color: var(--cv-text-3); flex-shrink: 0; }
.cv-util:hover .cv-util-ic { color: var(--cv-text-1); }
.cv-util-danger:hover { color: oklch(0.78 0.18 25); border-color: color-mix(in oklab, oklch(0.78 0.18 25) 30%, transparent); background: color-mix(in oklab, oklch(0.78 0.18 25) 8%, transparent); }
.cv-util-danger:hover .cv-util-ic { color: oklch(0.78 0.18 25); }
.cv-util-hint {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 10px 6px; font-family: var(--cv-mono); font-size: 10.5px;
  color: var(--cv-text-3); letter-spacing: 0.02em;
}
.cv-util-hint b { color: var(--cv-text-1); font-weight: 500; }
:root .cv-util-hint { color: #a1a1aa; }
:root .cv-util-hint b { color: #2e2e33; }

/* Status row */
.cv-status {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--cv-r-sm);
  background: rgba(255,238,230,0.025); border: 1px solid var(--cv-line);
  font-size: 12px; color: var(--cv-text-2); margin-top: 6px;
}
:root .cv-status { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.08); color: #52525b; }
.cv-status .pulse {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 60%, transparent);
  animation: cv-pulse 2s infinite;
}
.cv-status .pulse.offline { background: oklch(0.6 0.18 25); box-shadow: none; animation: none; }
@keyframes cv-pulse { 0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--ok) 60%, transparent)} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }

/* Status row is now a button that opens the System/Restart menu */
.cv-status-wrap { position: relative; }
.cv-status-btn { width: 100%; cursor: pointer; font: inherit; text-align: left;
  transition: background 0.16s var(--cv-ease), border-color 0.16s var(--cv-ease); }
.cv-status-btn .status-text { flex: 1; min-width: 0; }
.cv-status-btn:hover { border-color: var(--cv-line-2); background: rgba(255,238,230,0.04); }
:root .cv-status-btn:hover { background: rgba(60,42,34,0.05); }
.cv-status-chev { color: var(--cv-text-3); flex-shrink: 0; transition: transform 0.2s var(--cv-ease); }
.cv-status-btn[aria-expanded="true"] .cv-status-chev { transform: rotate(180deg); }

/* Popover menu (opens upward, above the status row) */
.cv-status-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 12px;
  background: rgba(22,19,17,0.97); border: 1px solid var(--cv-line);
  box-shadow: 0 1px 0 rgba(255,238,230,0.04) inset, 0 18px 40px -12px rgba(12,9,8,0.6);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  animation: cvAskPanelIn 0.16s var(--cv-ease) both;
}
:root .cv-status-menu { background: rgba(255,255,255,0.98); border-color: rgba(60,42,34,0.1); }
.cv-status-menu[hidden] { display: none !important; }

/* Tools list inside the Settings modal */
.settings-tools { display: flex; flex-direction: column; gap: 6px; max-width: 440px; }

/* Sidebar collapse — cv-v2 compatible */
.app-container.sidebar-collapsed .sidebar.cv-side { width: 56px; padding: 20px 8px; }
.app-container.sidebar-collapsed .cv-brand-text,
.app-container.sidebar-collapsed .cv-nav-kbd,
.app-container.sidebar-collapsed .nav-item.cv-nav .nav-label,
.app-container.sidebar-collapsed .cv-side-section:not(:first-child),
.app-container.sidebar-collapsed .cv-util-hint,
.app-container.sidebar-collapsed .cv-util span:not(.cv-util-ic),
.app-container.sidebar-collapsed .cv-status .status-text { display: none; }
.app-container.sidebar-collapsed .nav-item.cv-nav { justify-content: center; padding: 9px; }
.app-container.sidebar-collapsed .cv-util { justify-content: center; padding: 8px; }
.app-container.sidebar-collapsed .cv-status { padding: 8px; justify-content: center; }

/* ── Dashboard: cv-main ───────────────────────────────────────── */
#view-input.cv-main {
  padding: 28px 40px 80px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}
:root #view-input.cv-main { background: #f5f5f7; }

/* ── Topbar ───────────────────────────────────────────────────── */
.cv-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 32px;
  border-radius: var(--cv-r-md);
  /* No backdrop-filter: it makes nested popovers (e.g. the notifications panel)
     composite as see-through. Near-opaque fill keeps the solid bar look. */
  background: rgba(24,20,18,0.94); border: 1px solid var(--cv-line);
}
:root .cv-topbar { background: rgba(252,252,253,0.96); border-color: rgba(60,42,34,0.08); }
.cv-breadcrumb { font-family: var(--cv-mono); font-size: 11.5px; color: var(--cv-text-3); letter-spacing: 0.04em; }
.cv-breadcrumb b { color: var(--cv-text-1); font-weight: 500; }
:root .cv-breadcrumb b { color: #2e2e33; }
.cv-cmdk {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px;
  background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line); color: var(--cv-text-2);
  font-size: 12.5px; cursor: pointer; transition: all 0.18s var(--cv-ease); font-family: var(--cv-body);
}
.cv-cmdk:hover { background: rgba(255,238,230,0.05); color: var(--cv-text-0); border-color: var(--cv-line-2); }
.cv-cmdk kbd {
  font-family: var(--cv-mono); font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
  background: rgba(255,238,230,0.06); color: var(--cv-text-1); border: 1px solid var(--cv-line);
}
.cv-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--brand-gradient);
  color: #ffffff; font: 600 13px/1 var(--cv-body);
  border: 1px solid rgba(216,90,45,0.55); cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,238,230,0.25) inset, 0 8px 24px -6px rgba(255,107,74,0.35);
  transition: transform 0.12s var(--cv-ease), box-shadow 0.2s var(--cv-ease);
}
.cv-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,238,230,0.25) inset, 0 0 0 1px rgba(60,42,34,0.15), 0 14px 32px -6px var(--cv-volt-glow); }
.cv-primary:active { transform: translateY(0); }


/* ── Hero ─────────────────────────────────────────────────────── */
.cv-hero { position: relative; padding: 12px 4px 28px; border-bottom: 1px solid var(--cv-line); margin-bottom: 32px; }
:root .cv-hero { border-bottom-color: rgba(60,42,34,0.08); }
/* .cv-hero-eyebrow is gone — the dashboard was its only user, and its text
   ("Dashboard") repeated the breadcrumb one line above. See .cv-hero-date. */
/* The site hero's own type: body face, 700, leading 1.1, tracking -0.045em.
   The greeting is the app's biggest line, so it is the one place that gets the
   full display step of the ramp. */
.cv-hero h1 { font-family: var(--cv-body); font-weight: 700; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.1; letter-spacing: -0.045em; margin: 0; padding-bottom: 0.08em; color: var(--cv-text-0); }
:root .cv-hero h1 { color: var(--ink); font-weight: 700; }
/* The accented word carries the site's hero gradient, clipped to the glyphs —
   same 135° coral→orange ramp as .bg-brand-gradient on contextmove.com. */
.cv-hero h1 .voltword {
  position: relative;
  font-family: var(--cv-body);
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-style: italic; font-weight: 700;
  padding-right: 0.2em;
}
:root .cv-hero h1 .voltword {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.cv-hero h1 .voltword::after { display: none; }
@keyframes cv-blink { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Stats grid ───────────────────────────────────────────────── */
/* ── Dashboard hero row: compact greeting + 2×2 stat strip ─────── */
.cv-dash-hero { display: grid; grid-template-columns: 1fr minmax(320px, 400px); gap: 18px; align-items: stretch; margin-bottom: 20px; }
.cv-dash-hero .cv-hero { border-bottom: 0; margin-bottom: 0; padding: 6px 4px 0; }
.cv-dash-hero .cv-hero h1 { font-size: clamp(30px, 3.4vw, 50px); }
@media (max-width: 1180px) { .cv-dash-hero { grid-template-columns: 1fr; align-items: start; } }

/* Quiet date line under the greeting. Replaces the "Dashboard" eyebrow, which
   said the same word as the breadcrumb directly above it — the greeting itself
   moved into the h1, so the page now has one heading instead of three. */
.cv-hero-date {
  margin: 0; /* .cv-dash-hero .cv-hero is a flex column with its own 10px gap */
  font: 400 11.5px/1 var(--cv-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cv-text-3);
}
:root .cv-hero-date { color: #a1a1aa; }

/* Original 2×2 block. */
.cv-statstrip {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  border-radius: var(--cv-r-lg); border: 1px solid var(--cv-line);
  background: var(--cv-surface);
}
:root .cv-statstrip { background: var(--surface); border-color: var(--rule); }
.cv-statstrip .cv-stat {
  border: 0; border-radius: 0; background: none; padding: 14px 18px;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
}
:root .cv-statstrip .cv-stat { background: none; }
.cv-statstrip .cv-stat:nth-child(even) { border-left: 1px solid var(--cv-line); }
.cv-statstrip .cv-stat:nth-child(n+3)  { border-top: 1px solid var(--cv-line); }
.cv-statstrip .cv-stat:hover { transform: none; }
.cv-statstrip .cv-stat .v { margin-top: 0; font-size: 26px; }

/* (Activity lives back in the dashboard rail as its own panel — see the
   .cv-spark rules further down. The .cv-stat-activity footer-row treatment that
   sat here is gone with it.) */

.cv-stat {
  position: relative; overflow: hidden; padding: 18px 20px 20px; border-radius: var(--cv-r-md);
  background: var(--cv-surface);
  border: 1px solid var(--cv-line); transition: all 0.25s var(--cv-ease); cursor: default;
}
:root .cv-stat { background: rgba(255,255,255,0.9); border-color: rgba(60,42,34,0.08); }
:root .cv-stat:hover { border-color: rgba(60,42,34,0.16); }
.cv-stat::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 180px at var(--mx,50%) var(--my,-20%), rgba(255,238,230,0.04), transparent 60%);
  opacity: 0; transition: opacity 0.3s var(--cv-ease); pointer-events: none;
}
.cv-stat:hover { border-color: var(--cv-line-2); transform: translateY(-2px); }
.cv-stat:hover::before { opacity: 1; }
.cv-stat .k { font-family: var(--cv-mono); font-size: 10.5px; font-weight: 500; color: var(--cv-text-3); letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
:root .cv-stat .k { color: #a1a1aa; }
/* The four label dots are gone from the markup: volt / dim-volt / green / orange
   on Contexts / Collections / Questions / New-this-week encoded nothing — four
   colours that mean four different things everywhere else in the app, meaning
   nothing here. The rule is kept for any other .cv-stat that still ships one. */
.cv-stat .k .dot { width: 6px; height: 6px; border-radius: 2px; background: var(--cv-text-4); }
.cv-stat .v { margin-top: 14px; font-family: var(--cv-display); font-weight: 500; font-size: 38px; line-height: 1; letter-spacing: -0.03em; color: var(--cv-text-0); display: flex; align-items: baseline; gap: 6px; }
:root .cv-stat .v { color: #111113; }
.cv-stat .v .unit { font-size: 14px; font-weight: 500; color: var(--cv-text-3); font-family: var(--cv-mono); letter-spacing: 0; }



.cv-stat .meta { margin-top: 10px; font-size: 11.5px; color: var(--cv-text-3); font-family: var(--cv-mono); display: flex; justify-content: space-between; }
:root .cv-stat .meta { color: #a1a1aa; }
.cv-stat .meta .trend { color: var(--ok); }

/* ── Dashboard skeleton loaders ───────────────────────────────── */
@keyframes cv-skel-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.cv-stat.skel .v span {
  color: transparent;
  background: linear-gradient(90deg,
    rgba(255,238,230,0.05) 25%,
    rgba(255,238,230,0.13) 50%,
    rgba(255,238,230,0.05) 75%);
  background-size: 200% 100%;
  animation: cv-skel-shimmer 1.4s ease infinite;
  border-radius: 5px;
  min-width: 48px;
  display: inline-block;
  user-select: none;
}
:root .cv-stat.skel .v span {
  background: linear-gradient(90deg,
    rgba(60,42,34,0.06) 25%,
    rgba(60,42,34,0.13) 50%,
    rgba(60,42,34,0.06) 75%);
  background-size: 200% 100%;
}
.cv-skel-card {
  border-radius: var(--cv-r-md);
  border: 1px solid var(--cv-line);
  min-height: 118px;
  background: linear-gradient(90deg,
    rgba(255,238,230,0.03) 25%,
    rgba(255,238,230,0.07) 50%,
    rgba(255,238,230,0.03) 75%);
  background-size: 200% 100%;
  animation: cv-skel-shimmer 1.4s ease infinite;
}
.cv-skel-card:nth-child(2) { animation-delay: 0.15s; }
.cv-skel-card:nth-child(3) { animation-delay: 0.30s; }
:root .cv-skel-card {
  border-color: rgba(60,42,34,0.08);
  background: linear-gradient(90deg,
    rgba(60,42,34,0.04) 25%,
    rgba(60,42,34,0.09) 50%,
    rgba(60,42,34,0.04) 75%);
  background-size: 200% 100%;
}

/* ── Pipeline ─────────────────────────────────────────────────── */
.cv-pipeline {
  position: relative; padding: 22px; border-radius: var(--cv-r-lg);
  background: var(--cv-surface);
  border: 1px solid var(--cv-line); margin-bottom: 40px; overflow: hidden;
}
:root .cv-pipeline { background: rgba(255,255,255,0.9); border-color: rgba(60,42,34,0.08); }
.cv-pipeline::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(240px 120px at var(--px,30%) 0%, var(--cv-volt-dim), transparent 60%);
  opacity: .6; transition: opacity 0.3s; pointer-events: none;
}
.cv-pipeline-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 1; }
.cv-pipe-title { font-family: var(--cv-display); font-weight: 500; font-size: 15px; color: var(--cv-text-0); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .cv-pipe-title { color: #111113; }
.cv-pipe-status {
  font-family: var(--cv-mono); font-size: 11px; color: var(--cv-volt); letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 100px;
  background: var(--cv-volt-dim); border: 1px solid color-mix(in oklab, var(--cv-volt) 30%, transparent); flex-shrink: 0;
}
.cv-pipe-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cv-volt); box-shadow: 0 0 8px var(--cv-volt); animation: cv-blink 1.2s infinite; }
.cv-pipe-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; position: relative; z-index: 1; }
.cv-pipe-step { padding: 12px 14px; border-radius: var(--cv-r-md); background: rgba(255,238,230,0.02); border: 1px solid var(--cv-line); transition: all 0.3s var(--cv-ease); }
:root .cv-pipe-step { background: rgba(60,42,34,0.02); border-color: rgba(60,42,34,0.08); }
.cv-pipe-step .lbl { font-family: var(--cv-mono); font-size: 10px; font-weight: 500; color: var(--cv-text-3); letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.cv-pipe-step .num { font-family: var(--cv-mono); color: var(--cv-text-4); }
.cv-pipe-step .name { margin-top: 8px; font: 500 13px/1.2 var(--cv-body); color: var(--cv-text-1); }
:root .cv-pipe-step .name { color: #3f3f46; }
.cv-pipe-step .bar { margin-top: 10px; height: 2px; border-radius: 1px; background: rgba(255,238,230,0.06); overflow: hidden; position: relative; }
:root .cv-pipe-step .bar { background: rgba(60,42,34,0.08); }
.cv-pipe-step .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, var(--cv-volt-2), var(--cv-volt)); transition: width 0.6s var(--cv-ease); }
.cv-pipe-step.done { border-color: color-mix(in oklab, var(--cv-volt) 28%, transparent); }
.cv-pipe-step.done .lbl { color: var(--cv-volt); }
.cv-pipe-step.done .bar i { width: 100%; }
.cv-pipe-step.active { border-color: color-mix(in oklab, var(--cv-volt) 45%, transparent); background: var(--cv-volt-dim); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cv-volt) 10%, transparent); }
.cv-pipe-step.active .lbl { color: var(--cv-volt); }
.cv-pipe-step.active .bar i { width: var(--p, 55%); background: linear-gradient(90deg, var(--cv-volt), color-mix(in oklab, var(--cv-volt) 50%, white)); }
.cv-stream { position: relative; z-index: 1; padding: 16px 18px; border-radius: var(--cv-r-md); background: rgba(9,7,6,0.6); border: 1px solid var(--cv-line); font-family: var(--cv-mono); font-size: 12.5px; line-height: 1.7; color: var(--cv-text-1); max-height: 140px; overflow: hidden; }
:root .cv-stream { background: rgba(250,250,250,0.95); border-color: rgba(60,42,34,0.08); color: #3f3f46; }
.cv-stream::after { content: ""; position: absolute; inset: auto 0 0 0; height: 48px; background: linear-gradient(180deg, transparent, rgba(9,7,6,0.95)); pointer-events: none; }
:root .cv-stream::after { background: linear-gradient(180deg, transparent, rgba(250,250,250,0.95)); }
.cv-stream .tok-new { animation: cv-fade .6s var(--cv-ease); }
@keyframes cv-fade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.cv-stream .caret { display: inline-block; width: 7px; height: 14px; background: var(--cv-volt); margin-left: 3px; transform: translateY(2px); animation: cv-caret 1s steps(1) infinite; box-shadow: 0 0 8px var(--cv-volt); }
@keyframes cv-caret { 50%{opacity:0} }

/* ── Section headings ─────────────────────────────────────────── */
.cv-sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 8px 0 18px; }
.cv-sec-title { font-family: var(--cv-display); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; color: var(--cv-text-0); margin: 0; display: flex; align-items: center; gap: 12px; }
:root .cv-sec-title { color: #111113; }
.cv-sec-title .idx { font-family: var(--cv-mono); font-size: 11px; font-weight: 400; color: var(--cv-text-3); letter-spacing: 0.08em; padding: 3px 8px; border-radius: 5px; background: rgba(255,238,230,0.04); border: 1px solid var(--cv-line); }
:root .cv-sec-title .idx { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.08); }
.cv-sec-actions { display: flex; align-items: center; gap: 8px; }
.cv-chip { padding: 6px 12px; border-radius: 100px; background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line); color: var(--cv-text-2); font-size: 12px; cursor: pointer; transition: all 0.18s var(--cv-ease); font-family: var(--cv-body); }
.cv-chip:hover { color: var(--cv-text-0); border-color: var(--cv-line-2); background: rgba(255,238,230,0.05); }
.cv-chip.on { color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent); background: var(--cv-volt-dim); }
:root .cv-chip { color: #52525b; border-color: rgba(60,42,34,0.1); background: rgba(60,42,34,0.03); }
:root .cv-chip:hover { color: #111113; }

/* ── Ask command bar — the dashboard centerpiece ──────────────── */
.cv-dash-cmd { margin: 2px 0 24px; }
.cv-dash-ask {
    display: flex; align-items: center; gap: 11px;
    height: 54px;
    padding: 0 10px 0 16px;
    border-radius: 14px;
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    transition: border-color 0.2s var(--cv-ease), box-shadow 0.2s var(--cv-ease);
}
.cv-dash-ask:focus-within {
    border-color: color-mix(in oklab, var(--cv-volt) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--cv-volt) 10%, transparent);
}
.cv-dash-ask-ic { color: var(--cv-text-3); display: grid; place-items: center; flex-shrink: 0; }
.cv-dash-ask:focus-within .cv-dash-ask-ic { color: var(--cv-volt); }
.cv-dash-ask-input {
    flex: 1; min-width: 0; background: none; border: 0; outline: none;
    font: 400 14.5px/1.4 var(--cv-body); color: var(--cv-text-0);
}
.cv-dash-ask-input::placeholder { color: var(--cv-text-3); }
.cv-dash-ask-kbd {
    font: 500 10px/1 var(--cv-mono); color: var(--cv-text-3);
    padding: 4px 7px; border-radius: 5px;
    border: 1px solid var(--cv-line); background: rgba(255,238,230,0.03);
    flex-shrink: 0; white-space: nowrap;
}
.cv-dash-ask-go {
    display: grid; place-items: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
    color: var(--cv-text-2); background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    transition: all 0.18s var(--cv-ease);
}
.cv-dash-ask:focus-within .cv-dash-ask-go,
.cv-dash-ask-go:hover {
    color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent);
    background: var(--cv-volt-dim);
}
:root .cv-dash-ask { background: rgba(255,255,255,0.95); border-color: rgba(60,42,34,0.1); }
:root .cv-dash-ask-input { color: #111113; }
:root .cv-dash-ask-kbd { border-color: rgba(60,42,34,0.1); background: rgba(60,42,34,0.03); }
:root .cv-dash-ask-go { border-color: rgba(60,42,34,0.1); background: rgba(60,42,34,0.03); color: #52525b; }

/* Suggestion chips under the bar */
.cv-dash-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 0 2px; }
.cv-dash-chips-label { font: 500 10px/1 var(--cv-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cv-text-3); }
.cv-dash-chip {
    padding: 6px 13px; border-radius: 100px; cursor: pointer;
    font: 400 12px/1.3 var(--cv-body); color: var(--cv-text-2);
    background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line);
    transition: all 0.18s var(--cv-ease); max-width: 360px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-dash-chip:hover { color: var(--cv-text-0); border-color: var(--cv-line-2); background: rgba(255,238,230,0.05); }
.cv-dash-chip.resume { color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 35%, transparent); background: var(--cv-volt-dim); }
:root .cv-dash-chip { color: #52525b; border-color: rgba(60,42,34,0.1); background: rgba(60,42,34,0.03); }
:root .cv-dash-chip:hover { color: #111113; }

/* ── Bento: recent list + right rail ──────────────────────────── */
.cv-dash-bento { display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: 16px; align-items: start; }
@media (max-width: 1180px) { .cv-dash-bento { grid-template-columns: 1fr; } }
.cv-dash-panel {
    padding: 16px 16px 14px; border-radius: var(--cv-r-lg);
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
}
:root .cv-dash-panel { background: rgba(255,255,255,0.9); border-color: rgba(60,42,34,0.08); }
.cv-dash-panel .cv-sec-head { margin: 0 2px 14px; }

/* ── Processing panel: background summarization in progress ── */
.cv-proc-panel {
    background: linear-gradient(180deg, color-mix(in oklab, var(--cv-volt) 6%, var(--cv-surface)), var(--cv-surface));
    border-color: color-mix(in oklab, var(--cv-volt) 22%, var(--cv-line));
}
:root .cv-proc-panel {
    background: linear-gradient(180deg, rgba(39,39,42,0.04), #ffffff);
    border-color: rgba(39,39,42,0.16);
}
.cv-proc-panel .cv-rail-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.cv-proc-livedot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--cv-volt);
    box-shadow: 0 0 9px var(--cv-volt-glow); animation: cv-ask-hint-pulse 2s ease-in-out infinite;
}
.cv-proc-list { display: flex; flex-direction: column; gap: 2px; }
.cv-proc-item {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    padding: 10px 8px; border-radius: 9px; background: none; border: 0; cursor: pointer;
    transition: background 0.15s var(--cv-ease);
}
.cv-proc-item:hover { background: var(--bg-hover); }
:root .cv-proc-item:hover { background: rgba(60,42,34,0.04); }
.cv-proc-spin {
    width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid color-mix(in oklab, var(--cv-volt) 22%, transparent);
    border-top-color: var(--cv-volt); animation: cv-cap3-spin 0.7s linear infinite;
}
.cv-proc-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cv-proc-title {
    font: 500 12.5px/1.3 var(--cv-body); color: var(--cv-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-proc-stage { font: 400 10px/1 var(--cv-mono); letter-spacing: 0.03em; color: var(--cv-text-3); }
.cv-dash-rail { display: flex; flex-direction: column; gap: 16px; }
.cv-rail-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.cv-rail-head h2 { font-family: var(--cv-display); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--cv-text-0); margin: 0; }
:root .cv-rail-head h2 { color: #111113; }
.cv-rail-meta { font: 400 10px/1 var(--cv-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv-text-3); margin-left: auto; }
/* In the recent panel the count belongs next to the label; the action takes
   the far edge instead. */
.cv-dash-recent .cv-rail-head .cv-rail-meta { margin-left: 0; }

/* Ghost text action — replaces the filled volt "See all →" pill. A pill that
   loud on a secondary navigation action competed with the Quick Capture
   button and the ask bar for the same attention. */
.cv-linkbtn {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 6px; margin-right: -4px; border: 0; border-radius: 7px;
    background: none; cursor: pointer;
    font: 500 11.5px/1 var(--cv-body); color: var(--cv-text-3);
    transition: color 0.16s var(--cv-ease), background 0.16s var(--cv-ease);
}
.cv-linkbtn svg { transition: transform 0.18s var(--cv-ease); }
.cv-linkbtn:hover { color: var(--cv-text-0); background: rgba(255,238,230,0.05); }
.cv-linkbtn:hover svg { transform: translateX(2px); }
:root .cv-linkbtn:hover { color: #111113; background: rgba(60,42,34,0.04); }

/* Recent contexts — one list, not eight stacked cards. Dropping the per-row
   border and fill removes 8 competing rectangles from the densest area of the
   page; a hairline between rows carries the separation for a fraction of the
   ink, and the accent rail still tags each row with its source. */
.cv-recent-list { display: flex; flex-direction: column; gap: 0; }
.cv-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 12px; min-width: 0; text-align: left; cursor: pointer;
    border-radius: 9px; border: 0;
    background: none;
    transition: background 0.18s var(--cv-ease);
}
/* --rule-soft is the palette's dedicated list-row divider: lighter than the
   structural --rule so eight of them in a column don't add up to a grid. */
.cv-row:not(:last-child) { box-shadow: inset 0 -1px 0 var(--rule-soft); }
.cv-row:hover:not(:last-child) { box-shadow: none; }
/* No translateX on hover — sliding every row sideways as the pointer travels
   down an 8-row list reads as jitter, not feedback. The fill is the affordance;
   the 3px accent rail that used to lead each row is gone. */
.cv-row:hover { background: var(--sunk); }
.cv-row-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cv-row-title {
    font: 500 13.5px/1.3 var(--cv-body); color: var(--cv-text-0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 7px;
}
.cv-row-star { color: var(--cv-volt); flex-shrink: 0; }
.cv-row-sub {
    font: 400 12px/1.4 var(--cv-body); color: var(--cv-text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-row-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cv-row-time { font: 400 10.5px/1 var(--cv-mono); color: var(--cv-text-3); min-width: 52px; text-align: right; }
:root .cv-row { background: none; }
:root .cv-row-title { color: var(--ink); }
/* --muted is #9C8B84 — about 3.3:1 on white, which is fine for a timestamp but
   under AA for the 12px subtitle line. Running text in light mode steps up to
   --copy (~7.4:1); --muted keeps the truly incidental meta. */
:root .cv-row-sub,
:root .cv-pin-title,
:root .cv-proc-title { color: var(--copy); }
:root .cv-row-star { color: var(--coral); }
/* The real list has gap: 0, so skeleton rows carry their own spacing. */
.cv-recent-list .cv-skel-row + .cv-skel-row { margin-top: 8px; }
.cv-skel-row {
    height: 56px; border-radius: 10px; border: 1px solid var(--cv-line);
    background: linear-gradient(90deg,
        rgba(255,238,230,0.03) 25%, rgba(255,238,230,0.07) 50%, rgba(255,238,230,0.03) 75%);
    background-size: 200% 100%;
    animation: cv-skel-shimmer 1.4s ease infinite;
}
.cv-skel-row:nth-child(2) { animation-delay: 0.12s; }
.cv-skel-row:nth-child(3) { animation-delay: 0.24s; }
.cv-skel-row:nth-child(4) { animation-delay: 0.36s; }
:root .cv-skel-row {
    border-color: rgba(60,42,34,0.08);
    background: linear-gradient(90deg, rgba(60,42,34,0.04) 25%, rgba(60,42,34,0.09) 50%, rgba(60,42,34,0.04) 75%);
    background-size: 200% 100%;
}

/* Pinned — rail cards: brand pill + age on top, 2-line title below */
.cv-pinned-list { display: flex; flex-direction: column; gap: 8px; }
.cv-pin-card {
    display: flex; flex-direction: column; gap: 7px;
    padding: 11px 13px; min-width: 0; width: 100%;
    border-radius: 10px; cursor: pointer; text-align: left;
    background: rgba(255,238,230,0.015);
    border: 1px solid var(--cv-line);
    transition: border-color 0.2s var(--cv-ease), background 0.18s var(--cv-ease);
}
.cv-pin-card:hover { border-color: var(--cv-line-2); background: rgba(255,238,230,0.04); }
.cv-pin-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cv-pin-star { color: var(--cv-volt); flex-shrink: 0; }
.cv-pin-title {
    font: 500 12.5px/1.4 var(--cv-body); color: var(--cv-text-1);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.cv-pin-card:hover .cv-pin-title { color: var(--cv-text-0); }
.cv-pin-date { font: 400 10px/1 var(--cv-mono); color: var(--cv-text-3); flex-shrink: 0; margin-left: auto; }
:root .cv-pin-card { background: rgba(255,255,255,0.7); border-color: rgba(60,42,34,0.07); }
:root .cv-pin-card:hover { border-color: rgba(60,42,34,0.16); background: #fff; }
:root .cv-pin-title { color: #3f3f46; }
:root .cv-pin-star { color: var(--coral); }

/* Activity sparkline — stacked capture/ask bars */
.cv-spark { display: flex; align-items: flex-end; gap: 4px; height: 64px; padding: 2px 2px 0; }
.cv-spark-col {
    flex: 1; min-width: 0; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
    border-radius: 3px; cursor: default;
}
/* Slim bar centred in a full-width column: the bar is the mark, the column is
   the hit area, so the hover target stays a comfortable ~35px without drawing
   35px-wide slabs. */
.cv-spark-col i { display: block; width: 20px; max-width: 62%; margin-inline: auto; border-radius: 2px; min-height: 0; transition: opacity 0.18s var(--cv-ease); }
.cv-spark-col i.cap { background: var(--cv-volt); opacity: 0.85; }
.cv-spark-col.empty::after { content: ""; display: block; width: 20px; max-width: 62%; margin-inline: auto; height: 2px; border-radius: 1px; background: var(--cv-line); }
.cv-spark-col:hover i { opacity: 1; }

/* Sidebar — recent Ask sessions */
.cv-recent-asks { display: flex; flex-direction: column; gap: 2px; }
.cv-recent-ask {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 10px; min-width: 0; cursor: pointer; text-align: left;
    border: 0; border-radius: 8px; background: none;
    color: var(--cv-text-2); transition: all 0.16s var(--cv-ease);
}
.cv-recent-ask:hover { background: rgba(255,238,230,0.05); color: var(--cv-text-0); }
.cv-recent-ask-ic { display: grid; place-items: center; color: var(--cv-text-3); flex-shrink: 0; }
.cv-recent-ask:hover .cv-recent-ask-ic { color: var(--cv-volt); }
.cv-recent-ask-t {
    font: 400 12px/1.3 var(--cv-body); min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root .cv-recent-ask { color: #52525b; }
:root .cv-recent-ask:hover { background: rgba(60,42,34,0.05); color: #111113; }

.cv-card {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; padding: 18px 18px 16px; min-height: 172px;
  border-radius: var(--cv-r-lg);
  background: var(--cv-surface);
  border: 1px solid var(--cv-line); cursor: pointer;
  transition: transform 0.2s var(--cv-ease), border-color 0.25s var(--cv-ease);
  display: flex; flex-direction: column; gap: 10px;
}
:root .cv-card { background: rgba(255,255,255,0.95); border-color: rgba(60,42,34,0.07); }
:root .cv-card:hover { border-color: rgba(60,42,34,0.16); }
.cv-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(360px 200px at var(--mx) var(--my), rgba(255,238,230,0.06), transparent 55%);
  opacity: 0; transition: opacity 0.3s var(--cv-ease); pointer-events: none;
}
.cv-card:hover { transform: translateY(-2px); border-color: var(--cv-line-2); }
.cv-card:hover::before { opacity: 1; }
.cv-card-top { display: flex; align-items: center; gap: 10px; }
.cv-card-date { margin-left: auto; font-family: var(--cv-mono); font-size: 10.5px; color: var(--cv-text-3); }
.cv-card h3 { font-family: var(--cv-display); font-weight: 500; font-size: 16px; line-height: 1.25; margin: 2px 0 0; color: var(--cv-text-0); letter-spacing: -0.015em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root .cv-card h3 { color: #111113; }
.cv-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--cv-text-2); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root .cv-card p { color: #52525b; }
.cv-card-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-tag { font-family: var(--cv-mono); font-size: 10.5px; color: var(--cv-text-3); transition: color 0.2s var(--cv-ease); }
.cv-card:hover .cv-tag { color: var(--cv-text-2); }
:root .cv-tag { color: #a1a1aa; }
:root .cv-card:hover .cv-tag { color: #52525b; }
.cv-card-stats { margin-left: auto; display: flex; align-items: center; gap: 12px; font-family: var(--cv-mono); font-size: 10.5px; color: var(--cv-text-3); }
.cv-card-stats span { display: inline-flex; align-items: center; gap: 4px; }
.cv-empty-state { grid-column: 1/-1; padding: 48px 24px; text-align: center; border: 1px dashed var(--cv-line-2); border-radius: var(--cv-r-lg); color: var(--cv-text-3); font-size: 13.5px; line-height: 1.6; }
:root .cv-empty-state { color: #a1a1aa; border-color: rgba(60,42,34,0.1); }
.cv-empty-state p { margin: 0; }

/* Dashboard empty state — a dead end becomes the shortest path to the first
   capture. Icon, what happened, what it will do for you, and the action. */
#dashboard-recent-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    padding: 40px 24px 36px;
}
.cv-empty-ic { color: var(--cv-text-4); margin-bottom: 14px; }
.cv-empty-title { font: 500 14px/1.4 var(--cv-body); color: var(--cv-text-1); }
:root .cv-empty-title { color: #3f3f46; }
#dashboard-recent-empty .cv-empty-sub { margin-top: 5px; max-width: 320px; font-size: 12.5px; line-height: 1.55; }
.cv-empty-cta { margin-top: 18px; }

.ask-clear-btn:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

/* ═══════════════════════════════════════════════════════════════
   cv-v3-fixes: Sidebar collapse + Dashboard responsiveness
   ═══════════════════════════════════════════════════════════════ */

/* Base: push collapse button to the right in expanded state */
.sidebar.cv-side .sidebar-collapse-btn { margin-left: auto; }

/* ── Sidebar smooth transition ─────────────────────────────── */
/* Why so short (140ms)? `.app-container` is flex with `main-content { flex:1 }`.
   Animating the sidebar's width forces main-content (dashboard, charts,
   clamp()-padded content) to reflow on every frame. We can't avoid that
   reflow without rearchitecting the layout, so we make the animation
   short enough that the per-frame jank is imperceptible. A snappy
   ease-out at 140ms reads as "responsive" rather than "smooth-but-slow". */
.sidebar.cv-side {
    /* easeOutQuint — fast start, long gentle glide to rest = reads as "smooth" */
    transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    will-change: width;
    /* Isolate the sidebar's own layout so its internal reflow doesn't ripple
       outward each frame during the width animation (no paint containment —
       that would clip the status-dot's pulsing glow). */
    contain: layout;
}
/* During the width animation: lock the sidebar (hide scrollbar, freeze
   pointer interactions on children) so the only thing moving is width.
   This is what kills the "laggy" feel — without it, children with
   display:none toggles, scrollbar reflows, and hover states all churn
   the layout mid-animation. */
.app-container.sidebar-animating .sidebar.cv-side {
    overflow-y: hidden;
    pointer-events: none;
}
/* While the sidebar is mid-collapse, disable every child transition so
   only the sidebar width animates. Hover/color/transform transitions on
   nav items, util buttons, etc. all firing simultaneously is what makes
   the collapse feel heavy. */
.app-container.sidebar-animating .sidebar.cv-side *,
.app-container.sidebar-animating .sidebar.cv-side *::before,
.app-container.sidebar-animating .sidebar.cv-side *::after {
    transition: none !important;
    animation: none !important;
}

/* ── Collapsed: core dimensions ────────────────────────────── */
.app-container.sidebar-collapsed .sidebar.cv-side {
    width: 56px !important;
    padding: 14px 6px !important;
}

/* Brand area: stack vertically so button stays visible */
.app-container.sidebar-collapsed .sidebar.cv-side .cv-brand {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 0 12px !important;
}
.app-container.sidebar-collapsed .sidebar.cv-side .cv-brand-text {
    display: none !important;
}

/* Collapse button: always visible, centered, arrow flipped */
.app-container.sidebar-collapsed .sidebar.cv-side .sidebar-collapse-btn {
    margin-left: 0 !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--cv-line-2) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    color: var(--cv-text-2) !important;
    background: rgba(255,238,230,0.03) !important;
}
.app-container.sidebar-collapsed .sidebar.cv-side .sidebar-collapse-btn:hover {
    border-color: var(--cv-volt) !important;
    color: var(--cv-volt) !important;
    background: var(--cv-volt-dim) !important;
}
.app-container.sidebar-collapsed .sidebar.cv-side .sidebar-collapse-btn svg {
    transform: rotate(180deg);
    transition: transform 0.28s var(--cv-ease, cubic-bezier(0.4,0,0.2,1));
}

/* Section labels hidden; fix: show nav section, hide only collections */
.app-container.sidebar-collapsed .cv-side-label { display: none !important; }
/* Override the earlier buggy rule that hid ALL sections */
.app-container.sidebar-collapsed .cv-side-section { display: block !important; }
/* Hide only the collections section (not the nav) */
.app-container.sidebar-collapsed #collections-section { display: none !important; }
/* Recent asks are title-driven — meaningless as bare icons, hide when collapsed */
.app-container.sidebar-collapsed #recent-asks-section { display: none !important; }
.app-container.sidebar-collapsed .cv-nav-kbd { display: none !important; }

/* Nav: centered icon only */
.app-container.sidebar-collapsed .nav-item.cv-nav {
    justify-content: center !important;
    padding: 10px 0 !important;
    width: 100%;
}
.app-container.sidebar-collapsed .nav-item.cv-nav .nav-label { display: none !important; }
.app-container.sidebar-collapsed .nav-item.cv-nav .cv-nav-ic { margin: 0 auto; }

/* Active indicator: centered dot instead of left bar */
.app-container.sidebar-collapsed .nav-item.cv-nav.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--cv-volt);
}

/* Footer util buttons: icon only */
.app-container.sidebar-collapsed .cv-util {
    justify-content: center !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    margin: 1px auto !important;
    border-radius: 8px !important;
    gap: 0 !important;
}
.app-container.sidebar-collapsed .cv-util span:not(.cv-util-ic) { display: none !important; }
.app-container.sidebar-collapsed .cv-util-hint { display: none !important; }
.app-container.sidebar-collapsed .cv-side-foot { align-items: center; padding: 0; gap: 2px; }

/* Strip the special "Settings & Models" pill styling when collapsed —
   otherwise its border + bg + extra padding makes the 14px gear icon look
   distorted/squished inside a 44px-wide rectangle. */
.app-container.sidebar-collapsed .cv-util.cv-util-settings {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    transform: none !important;
}
.app-container.sidebar-collapsed .cv-util.cv-util-settings:hover {
    background: rgba(255,238,230,0.03) !important;
    border-color: var(--cv-line) !important;
    transform: none !important;
}
:root .app-container.sidebar-collapsed .cv-util.cv-util-settings:hover {
    background: rgba(60,42,34,0.04) !important;
}
.app-container.sidebar-collapsed .cv-side-settings-anchor {
    border-top: 0 !important;
    padding-top: 6px !important;
}

/* Bigger, crisper icons in collapsed state so the gear/monitor SVGs don't
   look muddy. The SVGs have explicit width/height attrs — override them. */
.app-container.sidebar-collapsed .cv-util .cv-util-ic {
    width: 16px !important;
    height: 16px !important;
}
.app-container.sidebar-collapsed .cv-util .cv-util-ic svg {
    width: 16px !important;
    height: 16px !important;
}

/* Status indicator: dot only */
.app-container.sidebar-collapsed .cv-status {
    padding: 8px 0 !important;
    justify-content: center !important;
    width: 100%;
}
.app-container.sidebar-collapsed .cv-status .status-text { display: none !important; }

/* ── Structural fix: each view owns its own scroll & padding ── */

/* main-content becomes a pure flex shell — no outer padding, no outer scroll */
.main-content {
    overflow: hidden !important;
    padding: 0 !important;
}

/* App-wide dot dither — the same pattern the marketing site uses (20px grid of
   1px dots, see .bg-dither there), so the app and the site read as one product.
   Views are transparent so this single layer shows beneath every page.
   Full-bleed, unlike the blueprint grid it replaces: that had an opaque
   vignette painted over it that swallowed the pattern everywhere except a
   sliver at the top, which is why nobody ever saw it. */
.main-content {
    background-color: var(--cv-grid-bg);
    background-image: radial-gradient(rgba(255,238,230,0.085) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
    background-repeat: repeat;
}
/* (The light-mode dither lives with the rest of the light palette work near
   the end of this file, where texture layers are decided for that theme.) */

/* Every view fills the full available height and scrolls itself.
   Transparent so the app-wide dot dither on .main-content shows through. */
.view {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    background: transparent;
}

/* Library, Detail, Capture: restore the outer padding they lost */
#view-library,
#view-trash,
#view-buzzer,
#view-detail {
    padding: clamp(24px, 3.5vh, 48px) clamp(24px, 3.5vw, 64px);
}
/* Capture manages its own internal gutters (rail + scroll), like the dashboard. */
#view-capture { padding: 0; }

/* Ask: already manages its own layout — keep overflow:hidden */
#view-ask {
    overflow: hidden !important;
    padding: 0 !important;
}
/* Fix ask-container to fill the view instead of using a viewport calc */
#view-ask .ask-container {
    height: 100% !important;
}

/* Dashboard: full width, zero outer restrictions, fill height, own scroll */
#view-input {
    max-width: none !important;
    margin: 0 !important;
    background: transparent !important; /* show the app-wide grid on .main-content */
}
:root #view-input { background: transparent !important; }

/* ── Dashboard: responsive padding & spacing ────────────────── */
#view-input.cv-main {
    padding: clamp(14px, 2.4vw, 28px) clamp(14px, 3vw, 40px) 48px !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.cv-topbar {
    margin-bottom: clamp(14px, 1.8vw, 24px) !important;
    flex-wrap: wrap;
}

.cv-hero {
    padding: 6px 0 clamp(14px, 1.8vw, 24px) !important;
    margin-bottom: clamp(16px, 1.8vw, 28px) !important;
}
.cv-hero h1 { font-size: clamp(26px, 4vw, 60px) !important; }

/* Stats grid: 4-col only at wide viewports */
.cv-stats-grid {
    gap: 10px !important;
    margin-bottom: clamp(16px, 1.8vw, 28px) !important;
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1280px) { .cv-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px)  { .cv-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } }

.cv-stat { padding: 14px 16px 16px !important; }
.cv-stat .v { font-size: clamp(22px, 2.6vw, 36px) !important; margin-top: 10px !important; }

.cv-stat .meta { margin-top: 6px !important; }

/* Pipeline: 2-col steps on smaller viewports */
@media (max-width: 1000px) { .cv-pipe-steps { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px)  { .cv-pipe-steps { grid-template-columns: 1fr !important; } }

/* Recent grid: better breakpoints */
.cv-recent-grid { gap: 14px !important; }
@media (max-width: 1280px) { .cv-recent-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 700px)  { .cv-recent-grid { grid-template-columns: 1fr !important; } }

/* Pipeline section spacing */
.cv-pipeline { margin-bottom: clamp(18px, 2vw, 32px) !important; }

/* Recent section heading */
.cv-recent-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.cv-recent-head h2 {
    font-family: var(--cv-display); font-weight: 500;
    font-size: 14px; color: var(--cv-text-2); letter-spacing: -0.01em; margin: 0;
}
:root .cv-recent-head h2 { color: #52525b; }

/* Card: tighten padding on small screens */
@media (max-width: 800px) {
    .cv-card { padding: 14px 14px 44px !important; }
    .cv-card h3 { font-size: 14px !important; }
}

/* Topbar: hide breadcrumb on narrow viewports */
@media (max-width: 700px) {
    .cv-breadcrumb { display: none; }
    .cv-topbar { justify-content: flex-end; }
}

/* Thin scrollbar for all views */
.view::-webkit-scrollbar { width: 5px; }
.view::-webkit-scrollbar-track { background: transparent; }
.view::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.08); border-radius: 3px; }
.view::-webkit-scrollbar-thumb:hover { background: rgba(255,238,230,0.15); }
:root .view::-webkit-scrollbar-thumb { background: rgba(60,42,34,0.1); }
:root .view::-webkit-scrollbar-thumb:hover { background: rgba(60,42,34,0.18); }

/* ═══════════════════════════════════════════════════════════════
   cv-detail: Context Detail page — cinematic volt redesign
   ═══════════════════════════════════════════════════════════════ */

/* Apply cv-main padding/scroll to the detail view (same shell as dashboard) */
#view-detail.cv-main {
    padding: clamp(14px, 2.4vw, 28px) clamp(14px, 3vw, 40px) 48px !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    height: 100% !important;
    background: transparent !important; /* show app-wide grid */
}
:root #view-detail.cv-main { background: transparent !important; }

/* Hide the old view-header — its actions now live inside the rail */
#view-detail.cv-main > .view-header { display: none !important; }

/* ── Top rail: back button + meta + action buttons ─────────── */
.cv-detail-rail {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; margin-bottom: 32px;
    border-radius: var(--cv-r-md);
    background: var(--cv-inset);
    border: 1px solid var(--cv-line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-wrap: wrap;
}
:root .cv-detail-rail { background: rgba(255,255,255,0.8); border-color: rgba(60,42,34,0.08); }
.cv-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 11px; border-radius: 8px;
    background: rgba(255,238,230,0.03);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1); font: 500 12.5px/1 var(--cv-body);
    cursor: pointer; transition: all 0.18s var(--cv-ease);
}
.cv-back:hover { background: rgba(255,238,230,0.06); color: var(--cv-text-0); border-color: var(--cv-line-2); }
:root .cv-back { color: #3f3f46; background: rgba(60,42,34,0.03); }
:root .cv-back:hover { background: rgba(60,42,34,0.06); color: #111113; }

.cv-rail-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--cv-mono); font-size: 11.5px; color: var(--cv-text-3);
    letter-spacing: 0.02em;
}
.cv-rail-meta b { color: var(--cv-text-1); font-weight: 500; }
:root .cv-rail-meta b { color: #2e2e33; }
.cv-rail-sep { color: var(--cv-text-4); }
.cv-rail-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; position: relative; }
.cv-ibtn {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line);
    color: var(--cv-text-2); display: grid; place-items: center;
    cursor: pointer; transition: all 0.18s var(--cv-ease);
    padding: 0;
}
.cv-ibtn:hover { color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 35%, transparent); background: var(--cv-volt-dim); }
.cv-ibtn.on { color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 35%, transparent); background: var(--cv-volt-dim); }
.cv-ibtn-danger:hover { color: oklch(0.78 0.18 25); border-color: color-mix(in oklab, oklch(0.78 0.18 25) 35%, transparent); background: color-mix(in oklab, oklch(0.78 0.18 25) 10%, transparent); }
:root .cv-ibtn { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.08); color: #52525b; }

/* Export dropdown (attached to export button inside rail) */
.cv-export-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 180px; padding: 6px; border-radius: 10px;
    background: rgba(25,21,19,0.95);
    border: 1px solid var(--cv-line-2);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(12,9,8,0.45);
    display: none; z-index: 50;
}
.cv-export-menu.open { display: block; }
:root .cv-export-menu { background: rgba(255,255,255,0.98); border-color: rgba(60,42,34,0.1); box-shadow: 0 10px 30px rgba(60,42,34,0.15); }
.cv-export-opt {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 6px;
    background: transparent; border: 0; cursor: pointer;
    color: var(--cv-text-1); font: 400 12.5px/1.3 var(--cv-body);
}
.cv-export-opt:hover { background: var(--cv-volt-dim); color: var(--cv-volt); }
:root .cv-export-opt { color: #3f3f46; }

/* ── Detail hero ───────────────────────────────────────────── */
.cv-dhero { padding: 8px 4px clamp(16px, 2vw, 28px); border-bottom: 1px solid var(--cv-line); margin-bottom: clamp(16px, 2vw, 28px); }
:root .cv-dhero { border-bottom-color: rgba(60,42,34,0.08); }
.cv-dhero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--cv-mono); font-size: 11px; color: var(--cv-text-3);
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px;
}
:root .cv-dhero-eyebrow { color: #a1a1aa; }
.cv-ebadge {
    color: var(--cv-volt); padding: 3px 9px; border-radius: 100px;
    background: var(--cv-volt-dim);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 30%, transparent);
    letter-spacing: 0.08em;
}
:root .cv-ebadge { color: #27272a; background: rgba(39,39,42,0.1); border-color: rgba(39,39,42,0.3); }
.cv-dhero-eyebrow .cv-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--cv-text-4); }
.cv-dtitle {
    font-family: var(--cv-display); font-weight: 500;
    font-size: clamp(26px, 3.6vw, 48px); line-height: 1.1;
    letter-spacing: -0.03em; margin: 0; padding-bottom: 0.08em; color: var(--cv-text-0);
    text-wrap: balance;
}
:root .cv-dtitle { color: #111113; }
.cv-dtitle .voltword {
    background: linear-gradient(180deg, color-mix(in oklab, var(--cv-volt) 88%, white 12%) 0%, var(--cv-volt) 45%, var(--cv-volt-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-style: italic; font-weight: 400;
    padding-right: 0.2em;
}
:root .cv-dtitle .voltword { background: linear-gradient(180deg, #2a2b31, #0d0e11 100%); -webkit-background-clip: text; background-clip: text; }
.cv-dsnap {
    margin: 16px 0 0; max-width: 760px;
    font-size: 15px; line-height: 1.6; color: var(--cv-text-2);
}
:root .cv-dsnap { color: #52525b; }
.cv-dmeta { margin-top: 20px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cv-dmeta .cv-tag {
    font-family: var(--cv-mono); font-size: 10px; color: var(--cv-text-2);
    padding: 4px 9px; border-radius: 6px;
    background: rgba(255,238,230,0.04); border: 1px solid var(--cv-line);
}
:root .cv-dmeta .cv-tag { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.08); color: #52525b; }
.cv-dmeta .cv-collection-inline select {
    font-family: var(--cv-mono); font-size: 11px;
    background: var(--cv-bg-3); border: 1px solid var(--cv-line);
    color: var(--cv-text-1); padding: 4px 10px; border-radius: 6px; cursor: pointer;
}
.cv-dmeta .cv-collection-inline select option {
    background: var(--cv-bg-3);
    color: var(--cv-text-1);
}
:root .cv-dmeta .cv-collection-inline select {
    background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.1); color: #2e2e33;
}
:root .cv-dmeta .cv-collection-inline select option {
    background: #ffffff;
    color: #111113;
}

/* Status banner for refreshing/failed/low-quality summaries */
.cv-dstatus {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px;
    background: var(--cv-volt-dim);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 30%, transparent);
    color: var(--cv-text-1); font-size: 12.5px;
    margin: 14px 0 0;
}
.cv-dstatus.err { background: color-mix(in oklab, oklch(0.7 0.18 25) 10%, transparent); border-color: color-mix(in oklab, oklch(0.7 0.18 25) 30%, transparent); }

/* ── Two-column grid ──────────────────────────────────────── */
.cv-dgrid {
    display: grid; grid-template-columns: 1fr 340px; gap: 20px;
    align-items: start;
}
@media (max-width: 1180px) { .cv-dgrid { grid-template-columns: 1fr; } }
.cv-dcol-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cv-dcol-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; align-self: start; }
@media (max-width: 1180px) { .cv-dcol-aside { position: static; } }

/* ── Block card ───────────────────────────────────────────── */
.cv-block {
    padding: 18px 20px; border-radius: var(--cv-r-lg);
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
}
:root .cv-block { background: rgba(255,255,255,0.9); border-color: rgba(60,42,34,0.08); }
.cv-block-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    background: transparent; border: 0; padding: 0; width: 100%;
    font: inherit; color: inherit; cursor: default;
}
.cv-block-head h3 {
    font-family: var(--cv-display); font-weight: 500; font-size: 14px;
    letter-spacing: -0.01em; margin: 0; color: var(--cv-text-0);
}
:root .cv-block-head h3 { color: #111113; }
.cv-block-ic {
    width: 26px; height: 26px; border-radius: 8px;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-2); display: grid; place-items: center;
    flex-shrink: 0;
}
:root .cv-block-ic { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.08); color: #52525b; }
.cv-ic-idea { color: var(--cv-volt) !important; background: var(--cv-volt-dim) !important; border-color: color-mix(in oklab, var(--cv-volt) 25%, transparent) !important; }
.cv-ic-done { color: var(--ok) !important; background: color-mix(in oklab, var(--ok) 12%, transparent) !important; border-color: color-mix(in oklab, var(--ok) 28%, transparent) !important; }
.cv-ic-open { color: oklch(0.78 0.15 30) !important; background: color-mix(in oklab, oklch(0.78 0.15 30) 12%, transparent) !important; border-color: color-mix(in oklab, oklch(0.78 0.15 30) 28%, transparent) !important; }
.cv-ic-volt { color: var(--cv-volt) !important; background: var(--cv-volt-dim) !important; border-color: color-mix(in oklab, var(--cv-volt) 35%, transparent) !important; }
.cv-count {
    margin-left: auto; font-family: var(--cv-mono); font-size: 10.5px;
    color: var(--cv-text-3); padding: 2px 7px; border-radius: 5px;
    background: rgba(255,238,230,0.04); border: 1px solid var(--cv-line);
}
:root .cv-count { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.08); color: #a1a1aa; }

/* ── Lists (Key ideas / Conclusions / Open questions / Notes) ── */
.cv-list, .cv-notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cv-list li, .cv-notes li {
    position: relative; padding: 10px 12px 10px 30px;
    font-size: 13.5px; line-height: 1.55; color: var(--cv-text-1);
    background: rgba(255,238,230,0.02); border: 1px solid var(--cv-line);
    border-radius: 10px; transition: background 0.12s, border-color 0.12s;
}
.cv-list li:hover, .cv-notes li:hover {
    background: rgba(255,238,230,0.05); border-color: rgba(255,238,230,0.1);
}
:root .cv-list li, :root .cv-notes li {
    background: rgba(60,42,34,0.02); border-color: rgba(60,42,34,0.06); color: #27272a;
}
:root .cv-list li:hover, :root .cv-notes li:hover {
    background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.1);
}
.cv-list li::before {
    content: ""; position: absolute; left: 12px; top: 16px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--cv-volt); box-shadow: 0 0 6px var(--cv-volt-glow);
}
.cv-notes li::before {
    content: "\25C6"; position: absolute; left: 10px; top: 8px;
    font-size: 10px; color: var(--cv-volt);
}

.cv-block-pinned {
    background: var(--cv-surface);
    border-color: color-mix(in oklab, var(--cv-volt) 18%, var(--cv-line));
}
:root .cv-block-pinned { background: linear-gradient(180deg, rgba(39,39,42,0.05), rgba(255,255,255,0.9)); border-color: rgba(39,39,42,0.2); }

/* Pinned notes — rendered as markdown prose cards so long starred messages
   keep their paragraphs, lists, code and emphasis instead of collapsing into
   one run-on line. */
.cv-pinned { display: flex; flex-direction: column; gap: 10px; }
.cv-note {
    padding: 10px 14px;
    font-size: 13.5px; line-height: 1.6; color: var(--cv-text-1);
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    border-radius: 12px;
    overflow-wrap: anywhere;
}
.cv-note > :first-child { margin-top: 0; }
.cv-note > :last-child  { margin-bottom: 0; }
.cv-note p  { margin: 0 0 8px; }
.cv-note ul, .cv-note ol { margin: 6px 0; padding-left: 20px; list-style: revert; }
.cv-note li { margin: 3px 0; }
.cv-note strong { color: var(--cv-text-0); font-weight: 600; }
.cv-note em { font-style: italic; }
.cv-note code {
    font-family: var(--cv-code);
    font-size: 0.9em; padding: 1px 5px; border-radius: 5px;
    background: rgba(255,238,230,0.07);
}
.cv-note pre {
    margin: 8px 0; padding: 10px 12px; border-radius: 8px;
    background: rgba(12,9,8,0.32); border: 1px solid var(--cv-line);
    overflow-x: auto;
}
.cv-note pre code { background: none; padding: 0; }
:root .cv-note { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.06); color: #27272a; }
:root .cv-note code { background: rgba(60,42,34,0.06); }
:root .cv-note pre { background: rgba(60,42,34,0.05); }

/* Markdown tables (shared by pinned notes + Ask answers) */
.cv-md-table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
    font-size: 12.5px;
    line-height: 1.5;
    border: 1px solid var(--cv-line);
    border-radius: 8px;
    overflow: hidden;
}
.cv-md-table th, .cv-md-table td {
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--cv-line);
    border-right: 1px solid var(--cv-line);
    overflow-wrap: anywhere;
}
.cv-md-table th:last-child, .cv-md-table td:last-child { border-right: 0; }
.cv-md-table tbody tr:last-child td { border-bottom: 0; }
.cv-md-table thead th {
    background: rgba(255,238,230,0.05);
    font-weight: 600;
    color: var(--cv-text-0);
    white-space: nowrap;
}
.cv-md-table tbody tr:nth-child(even) td { background: rgba(255,238,230,0.015); }
:root .cv-md-table thead th { background: rgba(60,42,34,0.045); }
:root .cv-md-table tbody tr:nth-child(even) td { background: rgba(60,42,34,0.015); }

/* ── Insights (3-col at wide, 1-col narrow) ──────────────── */
.cv-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1400px) { .cv-insights { grid-template-columns: 1fr; } }

/* Cap insight cards so long lists don't blow out the layout */
.cv-insights .cv-block {
    display: flex; flex-direction: column;
    max-height: 340px; transition: max-height 0.34s var(--cv-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.cv-insights .cv-block.cv-expanded { max-height: 2000px; }
.cv-insights .cv-block-head { flex-shrink: 0; }

/* "Show all" popup — full list in a centered modal (grid stays put).
   The header reuses .cv-block-head so it matches the small card exactly
   (same icon box + title + count). */
.cv-insight-modal { max-width: 560px; width: 90%; }
.cv-insight-modal-head { margin-bottom: 14px; cursor: default; }
.cv-insight-modal-head h3 { flex: 1; min-width: 0; }
.cv-insight-modal-close {
    margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    display: grid; place-items: center;
    background: transparent; border: 0; cursor: pointer;
    color: var(--cv-text-3); font-size: 20px; line-height: 1;
    transition: background 0.15s var(--cv-ease), color 0.15s var(--cv-ease);
}
.cv-insight-modal-close:hover { background: rgba(255,238,230,0.07); color: var(--cv-text-0); }
:root .cv-insight-modal-close:hover { background: rgba(60,42,34,0.06); color: #111; }
.cv-insight-modal-list {
    margin-top: 4px; padding: 0 4px 0 0;
    max-height: 62vh; overflow-y: auto;
}
.cv-insight-modal-list::-webkit-scrollbar { width: 6px; }
.cv-insight-modal-list::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.14); border-radius: 3px; }
:root .cv-insight-modal-list::-webkit-scrollbar-thumb { background: rgba(60,42,34,0.18); }
.cv-insights .cv-list {
    flex: 1; min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,238,230,0.12) transparent;
    /* fade only shown when overflow; JS adds cv-list--full to remove it */
    mask-image: linear-gradient(to bottom, black calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 32px), transparent 100%);
    padding-bottom: 8px;
}
/* No fade when list fits entirely (set by _initInsightExpand) */
.cv-insights .cv-list.cv-list--full,
.cv-insights .cv-block.cv-expanded .cv-list {
    mask-image: none; -webkit-mask-image: none; overflow-y: visible;
}
.cv-insights .cv-list::-webkit-scrollbar { width: 3px; }
.cv-insights .cv-list::-webkit-scrollbar-track { background: transparent; }
.cv-insights .cv-list::-webkit-scrollbar-thumb {
    background: rgba(255,238,230,0.12); border-radius: 99px;
}
:root .cv-insights .cv-list {
    scrollbar-color: rgba(60,42,34,0.12) transparent;
}
:root .cv-insights .cv-list::-webkit-scrollbar-thumb { background: rgba(60,42,34,0.12); }

/* Expand / collapse button (injected by _initInsightExpand) */
.cv-expand-btn {
    flex-shrink: 0; margin-top: 10px; padding: 6px 12px; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line);
    border-radius: 8px; font: 500 11.5px/1 var(--cv-body);
    color: var(--cv-text-3); cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.cv-expand-btn:hover {
    background: rgba(255,238,230,0.07); border-color: rgba(255,238,230,0.1);
    color: var(--cv-text-1);
}
:root .cv-expand-btn {
    background: rgba(60,42,34,0.02); border-color: rgba(60,42,34,0.08); color: #a1a1aa;
}
:root .cv-expand-btn:hover {
    background: rgba(60,42,34,0.05); border-color: rgba(60,42,34,0.12); color: #52525b;
}

/* ── Code snippets ────────────────────────────────────────── */
.cv-snips { display: flex; flex-direction: column; gap: 12px; }
.cv-snip { border: 1px solid var(--cv-line); border-radius: 12px; overflow: hidden; background: rgba(9,7,6,0.6); }
:root .cv-snip { background: rgba(250,250,250,0.95); border-color: rgba(60,42,34,0.08); }
.cv-snip-head {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: rgba(255,238,230,0.025);
    border-bottom: 1px solid var(--cv-line);
    font-family: var(--cv-mono); font-size: 11px; color: var(--cv-text-3);
}
:root .cv-snip-head { background: rgba(60,42,34,0.03); border-bottom-color: rgba(60,42,34,0.06); color: #71717a; }
.cv-snip-lang { color: var(--cv-text-1); }
:root .cv-snip-lang { color: #3f3f46; }
.cv-snip-lines { margin-left: auto; }
.cv-snip-copy {
    background: rgba(255,238,230,0.04); border: 1px solid var(--cv-line);
    color: var(--cv-text-2); padding: 3px 8px; border-radius: 5px;
    font: 500 10.5px/1 var(--cv-mono); cursor: pointer;
}
.cv-snip-copy:hover { color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 35%, transparent); }
.cv-snip-pre {
    margin: 0; padding: 14px 16px;
    font: 400 12.5px/1.65 var(--cv-code);
    color: var(--cv-text-1); overflow-x: auto;
    white-space: pre; tab-size: 2;
}
:root .cv-snip-pre { color: #27272a; }

/* ── Collapsible chat ─────────────────────────────────────── */
.cv-collapse-head { cursor: pointer; }
.cv-collapse-chev { margin-left: 6px; color: var(--cv-text-3); transition: transform 0.25s var(--cv-ease); display: inline-flex; }
.cv-collapse:not(.open) .cv-collapse-chev { transform: rotate(-90deg); }

/* Smooth open/close — animatable grid rows (0fr ⇄ 1fr), no JS height math. */
.cv-collapse-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.34s var(--cv-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.cv-collapse:not(.open) .cv-collapse-body { grid-template-rows: 0fr; }
.cv-collapse-inner { overflow: hidden; min-height: 0; transition: opacity 0.28s var(--cv-ease); }
.cv-collapse:not(.open) .cv-collapse-inner { opacity: 0; }
/* Drop the header's bottom margin when collapsed so nothing floats. */
.cv-collapse .cv-block-head { transition: margin-bottom 0.2s var(--cv-ease); }
.cv-collapse:not(.open) .cv-block-head { margin-bottom: 0; }
.cv-chat { position: relative; display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.cv-chat::-webkit-scrollbar { width: 4px; }
.cv-chat::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.08); border-radius: 2px; }
.cv-msg { display: flex; gap: 12px; max-width: 85%; }
.cv-msg-ai { align-self: flex-start; }
.cv-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.cv-msg-av {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(255,238,230,0.06); border: 1px solid var(--cv-line);
    display: grid; place-items: center;
    font: 500 11px/1 var(--cv-mono); color: var(--cv-text-1);
    flex-shrink: 0;
}
:root .cv-msg-av { background: rgba(60,42,34,0.05); border-color: rgba(60,42,34,0.08); color: #3f3f46; }
.cv-msg-av-ai { background: var(--cv-volt-dim); border-color: color-mix(in oklab, var(--cv-volt) 30%, transparent); color: var(--cv-volt); }
.cv-msg-av-user { background: rgba(242,84,45,0.12); border-color: rgba(242,84,45,0.25); color: #818cf8; }
:root .cv-msg-av-user { background: rgba(242,84,45,0.08); border-color: rgba(242,84,45,0.2); color: var(--coral); }
.cv-msg-body { flex: 1; min-width: 0; }
.cv-msg-user .cv-msg-body { text-align: right; }
.cv-msg-name { font: 500 11.5px/1 var(--cv-mono); color: var(--cv-text-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px; }
/* Turn bodies are rendered Markdown (see _renderChatBubbles), so no
   `white-space: pre-wrap` here — the renderer emits the paragraphs, breaks
   and lists itself, and pre-wrap would double every gap. */
.cv-msg-text { font-size: 13.5px; line-height: 1.6; color: var(--cv-text-1); word-wrap: break-word; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.cv-msg-text > :first-child { margin-top: 0; }
.cv-msg-text > :last-child  { margin-bottom: 0; }
.cv-msg-text p { margin: 0 0 8px; }
.cv-msg-text ul, .cv-msg-text ol { margin: 6px 0; padding-left: 20px; list-style: revert; }
.cv-msg-text li { margin: 3px 0; }
.cv-msg-text strong { color: var(--cv-text-0); font-weight: 600; }
.cv-msg-text em { font-style: italic; }
.cv-msg-text .cv-md-h { margin: 10px 0 6px; font-size: 1.05em; font-weight: 600; color: var(--cv-text-0); }
.cv-msg-text .cv-md-h:first-child { margin-top: 0; }
.cv-msg-text .cv-md-quote { margin: 8px 0; padding: 2px 0 2px 10px; border-left: 2px solid var(--cv-line); color: var(--cv-text-2); }
.cv-msg-text .cv-md-hr { margin: 10px 0; border: 0; border-top: 1px solid var(--cv-line); }
.cv-msg-text code {
    font-family: var(--cv-code);
    font-size: 0.9em; padding: 1px 5px; border-radius: 5px;
    background: rgba(255,238,230,0.07);
}
.cv-msg-text pre {
    margin: 8px 0; padding: 10px 12px; border-radius: 8px;
    background: rgba(12,9,8,0.32); border: 1px solid var(--cv-line);
    max-width: 100%; overflow-x: auto;
}
.cv-msg-text pre code { background: none; padding: 0; }
.cv-msg-text a { color: var(--coral); text-decoration: underline; }
:root .cv-msg-text code { background: rgba(60,42,34,0.06); }
:root .cv-msg-text pre { background: rgba(60,42,34,0.05); }
.cv-msg-user .cv-msg-text { background: rgba(242,84,45,0.1); border: 1px solid rgba(242,84,45,0.18); border-radius: 12px 2px 12px 12px; padding: 8px 12px; text-align: left; }
.cv-msg-ai .cv-msg-text { background: rgba(255,238,230,0.04); border: 1px solid var(--cv-line); border-radius: 2px 12px 12px 12px; padding: 8px 12px; }
:root .cv-msg-user .cv-msg-text { background: rgba(242,84,45,0.07); border-color: rgba(242,84,45,0.15); }
:root .cv-msg-ai .cv-msg-text { background: rgba(60,42,34,0.03); }
:root .cv-msg-text { color: #27272a; }

/* ── Aside: facts grid ───────────────────────────────────── */
.cv-block-fact { padding: 14px; }
.cv-fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cv-fact {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px;
    background: rgba(255,238,230,0.02);
    border-radius: 8px;
}
:root .cv-fact { background: rgba(60,42,34,0.02); }
.cv-fact-k { font: 500 10px/1 var(--cv-mono); color: var(--cv-text-3); letter-spacing: 0.12em; text-transform: uppercase; }
.cv-fact-v { font: 500 14px/1.1 var(--cv-display); color: var(--cv-text-0); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .cv-fact-v { color: #111113; }

/* ── Vitals chips ────────────────────────────────────────── */
.cv-vitals { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-vitals code {
    font: 500 11px/1 var(--cv-code); color: var(--cv-text-1);
    padding: 5px 9px; border-radius: 5px;
    background: rgba(255,238,230,0.04); border: 1px solid var(--cv-line);
}
:root .cv-vitals code { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.08); color: #3f3f46; }

/* ── Prompt builder (aside) ──────────────────────────────── */
.cv-block-prompt {
    background: var(--cv-surface);
    border-color: color-mix(in oklab, var(--cv-volt) 15%, var(--cv-line));
}
:root .cv-block-prompt { background: linear-gradient(180deg, rgba(39,39,42,0.04), rgba(255,255,255,0.9)); border-color: rgba(39,39,42,0.18); }
.cv-size { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.cv-size-lbl { font: 500 11px/1 var(--cv-mono); color: var(--cv-text-3); letter-spacing: 0.08em; text-transform: uppercase; }
.cv-size-seg {
    display: inline-flex; padding: 2px; border-radius: 8px;
    background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line);
}
:root .cv-size-seg { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.08); }
.cv-size-seg button {
    background: transparent; border: 0; color: var(--cv-text-3);
    font: 500 11px/1 var(--cv-body); padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
.cv-size-seg button.on { background: var(--cv-volt-dim); color: var(--cv-volt); }
.cv-focus {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; border-radius: 8px;
    background: rgba(9,7,6,0.6);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-0); font: 400 13px/1 var(--cv-body);
    margin-bottom: 10px;
}
:root .cv-focus { background: rgba(255,255,255,0.95); border-color: rgba(60,42,34,0.1); color: #111113; }
.cv-focus:focus { outline: none; border-color: color-mix(in oklab, var(--cv-volt) 45%, transparent); box-shadow: 0 0 0 3px var(--cv-volt-dim); }
.cv-primary-block {
    width: 100%; justify-content: center; padding: 10px 14px;
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: 8px;
    background: var(--brand-gradient);
    color: #ffffff; font: 600 13px/1 var(--cv-body);
    border: 1px solid rgba(216,90,45,0.55); cursor: pointer;
    transition: all 0.18s var(--cv-ease);
}
.cv-primary-block:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,107,74,0.35); }
.cv-primary-block:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
:root .cv-primary-block { color: #ffffff; }
:root .cv-primary-block svg { color: #ffffff; }
.cv-size-hint { margin-top: 10px; font: 400 11px/1.4 var(--cv-mono); color: var(--cv-text-3); text-align: center; }

/* Generated prompt display (re-skin existing .prompt-section) */
#view-detail .prompt-section {
    margin-top: 20px !important;
    padding: 18px 20px !important;
    border-radius: var(--cv-r-lg) !important;
    background: var(--cv-surface) !important;
    border: 1px solid var(--cv-line) !important;
}
:root #view-detail .prompt-section { background: rgba(255,255,255,0.9) !important; border-color: rgba(60,42,34,0.08) !important; }

/* ── Chunks viewer re-skin ───────────────────────────────── */
.cv-chunks { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.cv-chunk {
    padding: 12px 14px; border-radius: 10px;
    background: rgba(255,238,230,0.02); border: 1px solid var(--cv-line);
    font: 400 12.5px/1.6 var(--cv-body); color: var(--cv-text-1);
    white-space: pre-wrap;
}
.cv-chunk-idx { font-family: var(--cv-mono); font-size: 10.5px; color: var(--cv-text-3); margin-bottom: 6px; letter-spacing: 0.06em; text-transform: uppercase; }
:root .cv-chunk { background: rgba(60,42,34,0.02); border-color: rgba(60,42,34,0.06); color: #27272a; }

/* ═══════════════════════════════════════════════════════════════
   cv-detail v2: single-column hero-action redesign
   ═══════════════════════════════════════════════════════════════ */

/* Main topic line under the title — small mono accent */
.cv-dtopic {
    margin: 12px 0 0;
    font: 400 13px/1.4 var(--cv-mono);
    color: var(--cv-text-3);
    letter-spacing: 0.02em;
}

/* Slim meta-strip replacing the old facts grid in the aside */
.cv-mstrip {
    margin-top: 22px;
    padding: 12px 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    border-radius: 10px;
    background: rgba(255,238,230,0.025);
    border: 1px solid var(--cv-line);
    font-family: var(--cv-mono); font-size: 11.5px;
}
:root .cv-mstrip { background: rgba(60,42,34,0.025); border-color: rgba(60,42,34,0.06); }
.cv-mstrip-k { color: var(--cv-text-3); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; margin-right: 6px; }
.cv-mstrip-v { color: var(--cv-text-1); font-weight: 500; }
:root .cv-mstrip-v { color: #2e2e33; }
.cv-mstrip-sep {
    width: 1px; height: 12px; background: var(--cv-line);
    display: inline-block; align-self: center;
}
:root .cv-mstrip-sep { background: rgba(60,42,34,0.1); }

/* ── Hero action: Continuation prompt (clean, restrained) ── */
.cv-action {
    position: relative;
    margin: clamp(18px, 2vw, 24px) 0 clamp(20px, 2.4vw, 28px);
    padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px);
    border-radius: 14px;
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    box-shadow: 0 1px 0 rgba(255,238,230,0.03) inset;
}
:root .cv-action {
    background: #ffffff;
    border-color: rgba(60,42,34,0.08);
    box-shadow: 0 1px 2px rgba(60,42,34,0.03);
}
.cv-action-glow { display: none; }

/* Continuation prompt now lives inside the main column — drop its standalone
   vertical margins so it follows the column's flex-gap rhythm. */
.cv-dmain .cv-action { margin: 0; }

/* Empty state shown when a context has no extracted insights */
.cv-empty-insights {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
/* display:flex above beats the UA's [hidden] { display: none }, so the
   attribute has to be re-honoured explicitly. Without this the Attachments
   tab's "No attachments" card stayed on screen above the populated grid. */
.cv-empty-insights[hidden] { display: none; }
.cv-empty-insights .cv-block-ic { flex-shrink: 0; }
.cv-empty-insights-text { flex: 1; min-width: 200px; }
.cv-empty-insights-text h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--cv-text-1); }
.cv-empty-insights-text p  { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--cv-text-3); }
.cv-empty-insights-btn {
    flex-shrink: 0;
    padding: 7px 14px; border-radius: 8px;
    background: var(--cv-volt-dim); color: var(--cv-volt);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 35%, transparent);
    font: 600 12px/1 var(--cv-body); cursor: pointer;
    transition: all 0.18s var(--cv-ease);
}
.cv-empty-insights-btn:hover { background: color-mix(in oklab, var(--cv-volt) 18%, transparent); }

/* Clean empty state inside an always-on block (e.g. Open questions with none) */
.cv-block-empty {
    margin: 6px 0 2px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cv-text-3);
    font-style: italic;
}

.cv-action-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
}
.cv-action-ic {
    width: 30px; height: 30px; border-radius: 8px;
    display: grid; place-items: center; flex-shrink: 0;
    background: var(--cv-volt-dim);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 30%, transparent);
    color: var(--cv-volt);
}
.cv-action-ic svg { width: 14px; height: 14px; }
:root .cv-action-ic { background: rgba(39,39,42,0.1); border-color: rgba(39,39,42,0.25); color: #27272a; }
.cv-action-title {
    font-family: var(--cv-display); font-weight: 500;
    font-size: 17px; letter-spacing: -0.01em;
    margin: 0 0 2px; color: var(--cv-text-0);
    line-height: 1.2;
}
:root .cv-action-title { color: #111113; }
.cv-action-sub {
    margin: 0; font: 400 12.5px/1.45 var(--cv-body);
    color: var(--cv-text-3); max-width: 620px;
}

.cv-action-row {
    display: flex; gap: 8px; align-items: stretch;
    flex-wrap: wrap;
}
.cv-action-input {
    flex: 1 1 320px; min-width: 0;
    padding: 0 14px; height: 42px;
    border-radius: 9px;
    background: rgba(255,238,230,0.025);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-0); font: 400 13.5px/1 var(--cv-body);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
:root .cv-action-input { background: #fafafa; border-color: rgba(60,42,34,0.1); color: #111113; }
.cv-action-input::placeholder { color: var(--cv-text-3); }
.cv-action-input:focus {
    outline: none;
    border-color: color-mix(in oklab, var(--cv-volt) 55%, transparent);
    box-shadow: 0 0 0 3px var(--cv-volt-dim);
    background: rgba(255,238,230,0.04);
}
:root .cv-action-input:focus { background: #ffffff; }
.cv-action-go {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0 18px; height: 42px;
    border-radius: 9px; cursor: pointer;
    background: var(--cv-volt);
    color: #1a1200; font: 600 13px/1 var(--cv-body);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 70%, black);
    transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
    white-space: nowrap;
}
.cv-action-go svg { width: 13px; height: 13px; }
.cv-action-go:hover { background: color-mix(in oklab, var(--cv-volt) 92%, white 8%); box-shadow: 0 2px 8px var(--cv-volt-glow); }
.cv-action-go:active { transform: translateY(1px); }
.cv-action-go:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
:root .cv-action-go { color: #ffffff; }

.cv-action-foot {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cv-line);
}
:root .cv-action-foot { border-top-color: rgba(60,42,34,0.06); }
.cv-action-hint {
    font: 400 11.5px/1.4 var(--cv-mono); color: var(--cv-text-3);
    transition: color 0.18s;
}

/* ── Aside "Continuation prompt" card (B) ──────────────────────────────
   Primary: size selectors + volt-filled Generate button. Secondary (below the
   divider): a chip per LLM to jump straight into. */

/* Size selector — full width above the primary Generate button. */
.cv-act2 .cv-size-seg { display: flex; width: 100%; margin-top: 12px; }
.cv-act2 .cv-size-seg button { flex: 1; text-align: center; }

/* Primary action: Generate prompt (full width). Wears the same skin as
   .cv-primary (the Capture button): brand gradient, white foreground, coral
   drop shadow. It was flat --cv-volt with near-black text, which read as a
   second, unrelated accent next to Capture in the same app. */
.cv-act2-primary {
    width: 100%; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 16px; cursor: pointer;
    border-radius: 9px;
    background: var(--brand-gradient);
    color: #ffffff; font: 600 12.5px/1 var(--cv-body); white-space: nowrap;
    border: 1px solid rgba(216,90,45,0.55);
    box-shadow: 0 1px 0 rgba(255,238,230,0.25) inset, 0 8px 24px -6px rgba(255,107,74,0.35);
    transition: transform 0.12s var(--cv-ease), box-shadow 0.2s var(--cv-ease), filter 0.15s var(--cv-ease);
}
.cv-act2-primary svg { width: 13px; height: 13px; color: #ffffff; }
.cv-act2-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,238,230,0.25) inset, 0 0 0 1px rgba(60,42,34,0.15), 0 14px 32px -6px var(--cv-volt-glow); }
.cv-act2-primary:active { transform: translateY(0); }
.cv-act2-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.cv-act2-primary .cv-act2-kbd { margin-left: auto; }

/* Divider before the secondary "jump into a chat" section. */
.cv-act2-divider { height: 1px; background: var(--cv-line); margin: 18px 0 16px; }
/* Was --cv-text-4 at 9.5px. --cv-text-4 maps to --faint, whose stated role is
   "icons at rest", on warm paper it lands near 1.9:1, so this label was
   effectively invisible. Running text gets --cv-text-2. */
.cv-act2-prompt-lbl {
    display: block; margin-bottom: 10px;
    font: 600 10px/1 var(--cv-mono); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cv-text-2);
}

/* Secondary action — one chip per LLM, no favoured destination. */
.cv-dcontinue { position: relative; }
.cv-dcontinue-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cv-dcontinue-chip {
    height: 32px; padding: 0 13px; cursor: pointer;
    border-radius: 8px;
    background: rgba(255,238,230,0.02);
    border: 1px solid var(--cv-line-2);
    color: var(--cv-text-2); font: 500 12px/1 var(--cv-body);
    transition: color 0.14s, border-color 0.14s, background 0.14s;
}
/* The chat this context came from — first in the row and slightly brighter,
   which is the whole of its privilege. Every service is one click either way. */
.cv-dcontinue-chip.is-src { color: var(--cv-text-1); border-color: var(--cv-line-2); }
:root .cv-dcontinue-chip { background: rgba(60,42,34,0.02); }
.cv-dcontinue-chip:hover {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 45%, transparent);
    background: var(--cv-volt-dim);
}
/* Busy: dim the secondary controls, show the "preparing" note while it builds. */
.cv-dcontinue-busy-label {
    display: none; margin-top: 10px;
    font: 400 11px/1.4 var(--cv-mono); color: var(--cv-text-3);
}
.cv-dcontinue-busy .cv-dcontinue-chips { opacity: 0.45; pointer-events: none; }
.cv-dcontinue-busy .cv-dcontinue-busy-label { display: block; }

/* ── Attached files card — the files this conversation carried. */
.cv-dfiles[hidden] { display: none; }
.cv-dfiles-list { display: flex; flex-direction: column; gap: 8px; }
.cv-dfile {
    display: flex; align-items: baseline; gap: 10px;
    padding: 9px 12px; border-radius: 9px; text-decoration: none;
    background: rgba(255,238,230,0.02);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1); font: 500 12.5px/1.3 var(--cv-body);
    transition: color 0.14s, border-color 0.14s, background 0.14s;
}
:root .cv-dfile { background: rgba(60,42,34,0.02); }
.cv-dfile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-dfile-meta { flex: none; font: 400 10.5px/1 var(--cv-mono); color: var(--cv-text-4); }
a.cv-dfile:hover {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 38%, transparent);
    background: var(--cv-volt-dim);
}
/* A file we know about but could not download — present, but not a link. */
.cv-dfile-missing { color: var(--cv-text-4); border-style: dashed; cursor: default; }

/* ── Attachments tab — the same files, at a size you can actually look at.
   The aside card is an index; this is the view. Images get a tile, everything
   else reuses the row above, and the grid mixes the two in one flow. */
.cv-dfiles-grid[hidden] { display: none; }
.cv-dfiles-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* A non-image sits alone on its row rather than stretched into a picture slot. */
.cv-dfiles-grid .cv-dfile-row { grid-column: 1 / -1; }

.cv-dfile-tile {
    margin: 0; display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--cv-line); border-radius: 11px;
    background: rgba(255,238,230,0.02); padding: 10px;
    transition: border-color 0.14s, background 0.14s;
}
:root .cv-dfile-tile { background: rgba(60,42,34,0.02); }
.cv-dfile-tile:hover { border-color: color-mix(in oklab, var(--cv-volt) 38%, transparent); }

/* Fixed-height box with the image contained: screenshots are tall, diagrams
   are wide, and a grid that reflows around each one is unreadable. */
.cv-dfile-tile > a {
    display: block; border-radius: 7px; overflow: hidden;
    background: var(--cv-bg-2); line-height: 0;
}
.cv-dfile-tile img {
    width: 100%; height: 160px; object-fit: contain; display: block;
}
.cv-dfile-tile figcaption {
    display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
.cv-dfile-tile-name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-decoration: none; color: var(--cv-text-1); font: 500 12px/1.3 var(--cv-body);
}
.cv-dfile-tile-name:hover { color: var(--cv-volt); }

/* ── "Next steps" filler card (B) — fills the space a short summary leaves. */
.cv-nextsteps-list { display: flex; flex-direction: column; gap: 8px; }
.cv-nextstep {
    width: 100%; display: inline-flex; align-items: center; gap: 10px;
    height: 40px; padding: 0 13px; cursor: pointer; text-decoration: none;
    border-radius: 9px;
    background: rgba(255,238,230,0.02);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1); font: 500 12.5px/1 var(--cv-body);
    transition: color 0.14s, border-color 0.14s, background 0.14s;
}
:root .cv-nextstep { background: rgba(60,42,34,0.02); }
.cv-nextstep svg { width: 15px; height: 15px; color: var(--cv-text-3); flex: none; transition: color 0.14s; }
.cv-nextstep:hover {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 38%, transparent);
    background: var(--cv-volt-dim);
}
.cv-nextstep:hover svg { color: var(--cv-volt); }
/* When a Next-step is also an external-thread link, keep the row consistent
   (the generic .cv-source-link rule loads later and would tighten the gap). */
.cv-nextstep.cv-source-link { gap: 10px; color: var(--cv-text-1); }
.cv-nextstep.cv-source-link svg { opacity: 1; }
.cv-nextstep.cv-source-link:hover { color: var(--cv-volt); }

/* Keyboard shortcut chip */
.cv-action-kbd {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--cv-text-3); font: 400 10.5px/1 var(--cv-mono);
}
.cv-action-kbd kbd {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 4px;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-2);
    font: 500 10.5px/1 var(--cv-mono);
}
:root .cv-action-kbd kbd { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.1); color: #52525b; }

/* Segmented size control */
.cv-action .cv-size-seg {
    display: inline-flex; padding: 3px; border-radius: 8px;
    background: rgba(255,238,230,0.03);
    border: 1px solid var(--cv-line);
}
:root .cv-action .cv-size-seg { background: #fafafa; border-color: rgba(60,42,34,0.08); }
.cv-action .cv-size-seg button {
    background: transparent; border: 0; color: var(--cv-text-3);
    font: 500 11.5px/1 var(--cv-body); padding: 6px 12px; border-radius: 6px;
    cursor: pointer; transition: background 0.12s, color 0.12s;
}
.cv-action .cv-size-seg button:hover { color: var(--cv-text-1); }
.cv-action .cv-size-seg button.on {
    background: var(--cv-volt-dim);
    color: var(--cv-volt);
}
:root .cv-action .cv-size-seg button.on { background: rgba(39,39,42,0.1); color: #27272a; }

/* Inline prompt output (rendered inside the action card) */
.cv-prompt-out {
    margin-top: 18px;
    border-radius: 10px;
    background: rgba(9,7,6,0.5);
    border: 1px solid var(--cv-line);
    overflow: hidden;
}
:root .cv-prompt-out { background: #fafafa; border-color: rgba(60,42,34,0.08); }
.cv-prompt-out-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cv-line);
    background: rgba(255,238,230,0.02);
}
:root .cv-prompt-out-head { border-bottom-color: rgba(60,42,34,0.06); background: rgba(60,42,34,0.015); }
.cv-prompt-out-head h3 {
    margin: 0; font: 500 12.5px/1 var(--cv-display);
    letter-spacing: -0.005em; color: var(--cv-text-1);
}
:root .cv-prompt-out-head h3 { color: #2e2e33; }
.cv-prompt-out-acts { margin-left: auto; display: flex; gap: 6px; }
.cv-prompt-stat {
    font: 400 11px/1 var(--cv-mono);
    color: var(--cv-text-3);
    padding: 3px 8px; border-radius: 5px;
    background: rgba(255,238,230,0.03);
    border: 1px solid var(--cv-line);
    letter-spacing: 0.02em;
}
:root .cv-prompt-stat { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.08); color: #71717a; }
.cv-prompt-copy, .cv-prompt-close {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1);
    font: 500 11.5px/1 var(--cv-body);
    padding: 6px 12px; border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s;
}
.cv-prompt-copy.copied { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 35%, transparent); background: color-mix(in oklab, var(--ok) 12%, transparent); }
.cv-prompt-copy:hover { color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 35%, transparent); background: var(--cv-volt-dim); }
.cv-prompt-close { padding: 6px 9px; font-size: 14px; line-height: 1; color: var(--cv-text-3); }
.cv-prompt-close:hover { color: var(--cv-text-0); border-color: var(--cv-line-2); }
:root .cv-prompt-copy, :root .cv-prompt-close {
    background: #ffffff; border-color: rgba(60,42,34,0.1); color: #3f3f46;
}
/* "Continue in…" — the primary, volt-accented action on the prompt sheet. */
.cv-prompt-continue {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--cv-volt-dim);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 38%, transparent);
    color: var(--cv-volt);
    font: 600 11.5px/1 var(--cv-body);
    padding: 6px 12px; border-radius: 6px;
    cursor: pointer; transition: all 0.12s;
}
.cv-prompt-continue:hover { background: color-mix(in oklab, var(--cv-volt) 20%, transparent); border-color: color-mix(in oklab, var(--cv-volt) 55%, transparent); }
.cv-prompt-continue svg { flex-shrink: 0; }
/* The source service is flagged in the picker with a small "source" pill. */
.cv-continue-src {
    margin-left: 6px; padding: 1px 6px; border-radius: 100px;
    font: 600 9px/1.4 var(--cv-mono); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cv-volt); background: var(--cv-volt-dim);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 30%, transparent);
}
/* Source → original thread links (rail meta + hero eyebrow). */
.cv-source-link, .cv-ebadge-link { text-decoration: none; cursor: pointer; }
.cv-source-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: inherit; transition: color 0.12s;
}
.cv-source-link svg { opacity: 0.6; }
.cv-source-link:hover { color: var(--cv-volt); }
.cv-source-link:hover svg { opacity: 1; }
.cv-ebadge-link { display: inline-flex; align-items: center; gap: 5px; transition: all 0.12s; }
.cv-ebadge-link svg { opacity: 0.7; }
.cv-ebadge-link:hover { border-color: color-mix(in oklab, var(--cv-volt) 55%, transparent); }
.cv-prompt-out .prompt-display {
    margin: 0; padding: 14px 16px;
    background: transparent;
    border: 0; border-radius: 0;
    font: 400 12.5px/1.6 var(--cv-code);
    color: var(--cv-text-1);
    max-height: 380px; overflow-y: auto;
    white-space: pre-wrap; word-wrap: break-word;
}
:root .cv-prompt-out .prompt-display { color: #27272a; }

@media (max-width: 720px) {
    .cv-action-row { flex-direction: column; }
    .cv-action-go { width: 100%; justify-content: center; }
}

/* ── Body: 2-column layout (main + sleek sticky aside) ────── */
.cv-dlayout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: clamp(16px, 1.8vw, 24px);
    align-items: start;
}
@media (max-width: 1100px) { .cv-dlayout { grid-template-columns: 1fr; } }
.cv-dmain { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cv-dmain .cv-block {
    position: relative;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.cv-dmain .cv-block:hover { border-color: var(--cv-line-2); }

/* Insights inside the narrower main col: 2-col at desktop, stacks below */
.cv-dmain .cv-insights { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px)  { .cv-dmain .cv-insights { grid-template-columns: 1fr; } }
@media (min-width: 1500px) { .cv-dmain .cv-insights { grid-template-columns: repeat(3, 1fr); } }

/* ── Insights · asymmetric spotlight (V2) ──────────────────────────────
   Key ideas is the hero anchor; Conclusion sits beside it in a tinted accent
   rail. Tints reuse the existing semantic icon hues so it stays on-theme.
   The .cv-spotlight selectors carry an extra class to outrank the grid rules
   above at every breakpoint. */
.cv-insights.cv-spotlight,
.cv-dmain .cv-insights.cv-spotlight { grid-template-columns: 1.55fr 1fr; }
/* Only one card survived (no key ideas, or no conclusions) — give it the row. */
.cv-insights.cv-spotlight.cv-spotlight--nohero,
.cv-insights.cv-spotlight.cv-spotlight--solo,
.cv-dmain .cv-insights.cv-spotlight.cv-spotlight--nohero,
.cv-dmain .cv-insights.cv-spotlight.cv-spotlight--solo { grid-template-columns: 1fr; }
@media (max-width: 1100px) {
    .cv-insights.cv-spotlight,
    .cv-dmain .cv-insights.cv-spotlight { grid-template-columns: 1fr; }
}

/* Hero card — the anchor: taller, numbered list */
.cv-insights.cv-spotlight .cv-ins2-hero { max-height: 520px; }
.cv-ins2-hero .cv-list { counter-reset: cv-idea; gap: 9px; }
.cv-ins2-hero .cv-list li { padding-left: 42px; }
.cv-ins2-hero .cv-list li::before {
    counter-increment: cv-idea;
    content: counter(cv-idea, decimal-leading-zero);
    left: 13px; top: 10px; width: auto; height: auto;
    border-radius: 0; background: none; box-shadow: none;
    font: 600 11px/1.55 var(--cv-mono); color: var(--cv-text-4);
}

/* Accent rail */
.cv-ins2-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cv-ins2-card { position: relative; }
.cv-ins2-concl {
    background: linear-gradient(180deg, color-mix(in oklab, var(--ok) 7%, var(--cv-surface)), var(--cv-surface));
    border-color: color-mix(in oklab, var(--ok) 22%, var(--cv-line));
}
:root .cv-ins2-concl { background: linear-gradient(180deg, color-mix(in oklab, var(--ok) 9%, #fff), rgba(255,255,255,0.9)); }
.cv-ins2-concl .cv-list li::before { background: var(--ok); box-shadow: 0 0 8px color-mix(in oklab, var(--ok) 45%, transparent); }

/* Keep the tinted border on hover (the global .cv-dmain .cv-block:hover would
   otherwise reset it to neutral). */
.cv-dmain .cv-ins2-concl:hover { border-color: color-mix(in oklab, var(--ok) 35%, var(--cv-line)); }

/* ── Sticky aside: details / vitals / tags ────────────────── */
.cv-daside {
    display: flex; flex-direction: column; gap: 14px;
    position: sticky;
    top: clamp(14px, 2vw, 24px);
    align-self: start;
    /* Subtract the custom title bar so the last card isn't clipped below the
       fold; the aside scrolls internally if its cards exceed the space. */
    max-height: calc(100vh - var(--cv-titlebar-h, 34px) - 56px);
    overflow-y: auto;
    padding-right: 2px;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,238,230,0.1) transparent;
}
.cv-daside::-webkit-scrollbar { width: 4px; }
.cv-daside::-webkit-scrollbar-track { background: transparent; }
.cv-daside::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.08); border-radius: 99px; }
@media (max-width: 1100px) {
    .cv-daside { position: static; max-height: none; overflow: visible; }
}

.cv-aside-card {
    position: relative;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(255,238,230,0.03) inset;
    overflow: hidden;
}
:root .cv-aside-card {
    background: rgba(255,255,255,0.85);
    border-color: rgba(60,42,34,0.08);
    box-shadow: 0 1px 3px rgba(60,42,34,0.04);
}
/* Subtle volt-accent highlight bar on top of each card */
.cv-aside-card::before {
    content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--cv-volt) 35%, transparent), transparent);
    opacity: 0.55;
}
:root .cv-aside-card::before { opacity: 0.45; }

.cv-aside-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
}
/* --cv-text-3 is --muted, ~3.0:1 on paper, under the 4.5:1 floor for type
   this small. Bumped a step to --cv-text-2 and half a weight, so the label
   reads without turning into a second heading. */
.cv-aside-eyebrow {
    font: 600 10.5px/1 var(--cv-mono);
    color: var(--cv-text-2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.cv-aside-pill {
    margin-left: auto;
    font: 500 10px/1 var(--cv-mono);
    color: var(--cv-text-2);
    padding: 3px 7px;
    border-radius: 99px;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
}
:root .cv-aside-pill { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.08); }

/* Detail rows: icon | key | value */
.cv-aside-rows { display: flex; flex-direction: column; gap: 1px; }
.cv-aside-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.14s;
}
.cv-aside-row:hover { background: rgba(255,238,230,0.025); }
:root .cv-aside-row:hover { background: rgba(60,42,34,0.025); }
.cv-aside-ic {
    width: 22px; height: 22px; border-radius: 6px;
    display: grid; place-items: center;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-3);
    transition: all 0.14s;
}
:root .cv-aside-ic { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.08); color: #71717a; }
.cv-aside-row:hover .cv-aside-ic {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 28%, transparent);
    background: var(--cv-volt-dim);
}
.cv-aside-k {
    font: 500 12px/1 var(--cv-body);
    color: var(--cv-text-3);
    letter-spacing: 0.01em;
}
:root .cv-aside-k { color: #71717a; }
.cv-aside-v {
    font: 500 12.5px/1.2 var(--cv-display);
    color: var(--cv-text-0);
    letter-spacing: -0.005em;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
:root .cv-aside-v { color: #111113; }

/* Vitals chips */
.cv-aside-vitals { display: flex; gap: 5px; flex-wrap: wrap; }
.cv-aside-vitals code {
    font: 500 10.5px/1 var(--cv-code);
    color: var(--cv-text-1);
    padding: 5px 8px; border-radius: 5px;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    transition: all 0.14s;
}
.cv-aside-vitals code:hover {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 30%, transparent);
    background: var(--cv-volt-dim);
}
:root .cv-aside-vitals code { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.08); color: #3f3f46; }

/* Tags */
.cv-aside-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.cv-aside-tags .cv-tag {
    font: 500 10.5px/1 var(--cv-mono);
    color: var(--cv-text-2);
    padding: 5px 9px; border-radius: 6px;
    background: rgba(255,238,230,0.035);
    border: 1px solid var(--cv-line);
    transition: all 0.14s;
}
.cv-aside-tags .cv-tag:hover {
    color: var(--cv-text-0);
    border-color: var(--cv-line-2);
    background: rgba(255,238,230,0.06);
}
:root .cv-aside-tags .cv-tag { background: rgba(60,42,34,0.035); border-color: rgba(60,42,34,0.08); color: #52525b; }

/* Semantic left-edge accent on insight cards */
.cv-insights .cv-block { overflow: hidden; }
.cv-insights .cv-block::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--cv-line-2);
    opacity: 0.6;
    transition: opacity 0.18s, background 0.18s;
}
.cv-insights .cv-block:has(.cv-ic-idea)::before { background: var(--cv-volt); }
.cv-insights .cv-block:has(.cv-ic-done)::before { background: var(--ok); }
.cv-insights .cv-block:has(.cv-ic-open)::before { background: oklch(0.78 0.15 30); }
.cv-insights .cv-block:hover::before { opacity: 1; }

/* ── Diagnostics block (indexed chunks) — low-key footer ── */
.cv-diag {
    margin-top: 6px;
    border-radius: 12px;
    border: 1px dashed var(--cv-line);
    background: rgba(255,238,230,0.015);
    overflow: hidden;
}
:root .cv-diag { background: rgba(60,42,34,0.015); border-color: rgba(60,42,34,0.1); }
.cv-diag[open] { border-style: solid; background: rgba(255,238,230,0.025); }
:root .cv-diag[open] { background: rgba(60,42,34,0.025); }
.cv-diag-sum {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; cursor: pointer;
    list-style: none;
    color: var(--cv-text-3);
    font: 500 12px/1 var(--cv-mono); letter-spacing: 0.04em;
    user-select: none;
}
.cv-diag-sum::-webkit-details-marker { display: none; }
.cv-diag-sum:hover { color: var(--cv-text-1); }
.cv-diag-ic { width: 22px; height: 22px; display: grid; place-items: center; color: var(--cv-text-3); }
.cv-diag-label { text-transform: uppercase; letter-spacing: 0.08em; }
.cv-diag-hint {
    margin-left: auto;
    font-size: 10.5px; color: var(--cv-text-4);
    padding: 3px 8px; border-radius: 5px;
    background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line);
}
:root .cv-diag-hint { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.06); color: #a1a1aa; }
.cv-diag[open] .cv-diag-sum { border-bottom: 1px solid var(--cv-line); }
:root .cv-diag[open] .cv-diag-sum { border-bottom-color: rgba(60,42,34,0.06); }
.cv-diag-body { padding: 14px 16px; }

/* ═══════════════════════════════════════════════════════════════
   cv-lib: Library page — cinematic grid + command bar
   ═══════════════════════════════════════════════════════════════ */

/* View shell: same as dashboard (full-bleed, own scroll) */
#view-library.cv-main,
#view-trash.cv-main,
#view-buzzer.cv-main {
    padding: clamp(14px, 2.4vw, 28px) clamp(14px, 3vw, 40px) 120px !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    height: 100% !important;
    background: transparent !important; /* show app-wide grid */
}
:root #view-library.cv-main { background: transparent !important; }
#view-library.cv-main > .view-header { display: none !important; }

/* ── Lib hero ────────────────────────────────────────────── */
/* ── Library head — compact: title + live count left, tools right ── */
.cv-lib-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 20px; flex-wrap: wrap;
    padding: 6px 4px 0; margin-bottom: 18px;
}
.cv-lib-head-text { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.cv-lib-title {
    font-family: var(--cv-display); font-weight: 500;
    font-size: 27px; line-height: 1.15; letter-spacing: -0.025em;
    margin: 0; color: var(--cv-text-0);
}
:root .cv-lib-title { color: #111113; }
.cv-lib-sub {
    font-family: var(--cv-mono); font-size: 11.5px; color: var(--cv-text-3);
    letter-spacing: 0.02em; white-space: nowrap;
}
:root .cv-lib-sub { color: #a1a1aa; }
.cv-lib-count-num { color: var(--cv-volt); font-weight: 500; }
:root .cv-lib-count-num { color: #27272a; }

/* ── Command bar (search + tools) ────────────────────────── */
.cv-lib-command {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; flex-wrap: wrap;
}

/* Big search pill */
.cv-search-pill {
    flex: 1; min-width: 240px;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px 9px 14px;
    border-radius: 12px;
    background: var(--cv-inset);
    border: 1px solid var(--cv-line);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    transition: all 0.18s var(--cv-ease);
    position: relative; overflow: hidden;
}
:root .cv-search-pill { background: rgba(255,255,255,0.85); border-color: rgba(60,42,34,0.08); }
.cv-search-pill::before {
    content: ""; position: absolute; inset: -1px;
    border-radius: 13px; padding: 1px;
    background: linear-gradient(135deg, transparent 40%, var(--cv-volt-dim) 50%, transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity 0.25s var(--cv-ease); pointer-events: none;
}
.cv-search-pill:focus-within { border-color: color-mix(in oklab, var(--cv-volt) 45%, transparent); background: rgba(18,16,14,0.85); }
/* Drop the gradient ring so focus shows a single clean border (no double glow). */
.cv-search-pill::before { display: none; }
:root .cv-search-pill:focus-within { background: #ffffff; }

.cv-search-ic { color: var(--cv-text-3); flex-shrink: 0; display: grid; place-items: center; }
.cv-search-pill:focus-within .cv-search-ic { color: var(--cv-volt); }
.cv-search-input,
.cv-search-input:focus,
.cv-search-input:focus-visible {
    flex: 1; min-width: 0;
    background: transparent !important; border: 0 !important;
    outline: none !important; box-shadow: none !important;
    -webkit-appearance: none; appearance: none;
    color: var(--cv-text-0);
    font: 400 13.5px/1.4 var(--cv-body);
}
.cv-search-input::placeholder { color: var(--cv-text-3); }
:root .cv-search-input { color: #111113; }

.cv-deep-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 7px;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-2);
    font: 500 11.5px/1 var(--cv-body); cursor: pointer;
    transition: all 0.18s var(--cv-ease);
}
.cv-deep-toggle:hover { color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 35%, transparent); }
.cv-deep-toggle.on,
.btn-deep-search.on {
    color: var(--cv-volt) !important;
    background: var(--cv-volt-dim) !important;
    border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent) !important;
}
:root .cv-deep-toggle { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.08); color: #52525b; }

.cv-search-kbd {
    font-family: var(--cv-mono); font-size: 10.5px;
    padding: 2px 6px; border-radius: 4px;
    background: rgba(255,238,230,0.06); color: var(--cv-text-2);
    border: 1px solid var(--cv-line);
}
:root .cv-search-kbd { background: rgba(60,42,34,0.05); border-color: rgba(60,42,34,0.1); color: #52525b; }

/* Tools (view-mode seg + sort + select mode) */
.cv-lib-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cv-view-seg {
    display: inline-flex; padding: 3px; border-radius: 10px;
    background: var(--cv-inset);
    border: 1px solid var(--cv-line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
:root .cv-view-seg { background: rgba(255,255,255,0.85); border-color: rgba(60,42,34,0.08); }
.cv-view-seg button {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0; cursor: pointer;
    color: var(--cv-text-3); font: 500 11.5px/1 var(--cv-body);
    padding: 7px 11px; border-radius: 7px;
    transition: all 0.18s var(--cv-ease);
}
.cv-view-seg button.on {
    background: var(--cv-volt-dim);
    color: var(--cv-volt);
}
.cv-view-seg button:hover:not(.on) { color: var(--cv-text-1); }
:root .cv-view-seg button.on { color: #27272a; background: rgba(39,39,42,0.12); }

.cv-select {
    font-family: var(--cv-body); font-size: 12.5px;
    background: var(--cv-inset);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1);
    padding: 8px 28px 8px 12px; border-radius: 9px;
    cursor: pointer;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b6b74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
:root .cv-select { background-color: rgba(255,255,255,0.85); border-color: rgba(60,42,34,0.08); color: #3f3f46; }
.cv-select:hover { border-color: var(--cv-line-2); }

.cv-select-mode-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 9px;
    background: var(--cv-inset);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1); font: 500 12.5px/1 var(--cv-body); cursor: pointer;
    backdrop-filter: blur(14px);
    transition: all 0.18s var(--cv-ease);
}
:root .cv-select-mode-btn { background: rgba(255,255,255,0.85); border-color: rgba(60,42,34,0.08); color: #3f3f46; }
.cv-select-mode-btn:hover { border-color: var(--cv-line-2); color: var(--cv-text-0); }
.cv-select-mode-btn.on { color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent); background: var(--cv-volt-dim); }

/* ── Sort dropdown (custom popover, replaces native select) ──────────── */
.cv-sort { position: relative; }

.cv-sort-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 11px 8px 12px; border-radius: 9px;
    background: var(--cv-inset);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1);
    font: 500 12.5px/1 var(--cv-body);
    cursor: pointer;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: border-color 0.18s var(--cv-ease), color 0.18s var(--cv-ease), background 0.18s var(--cv-ease);
}
:root .cv-sort-btn { background: rgba(255,255,255,0.85); border-color: rgba(60,42,34,0.08); color: #3f3f46; }
.cv-sort-btn:hover { border-color: var(--cv-line-2); color: var(--cv-text-0); }
.cv-sort-btn[aria-expanded="true"] {
    border-color: color-mix(in oklab, var(--cv-volt) 45%, transparent);
    color: var(--cv-text-0);
}
.cv-sort-ic { color: var(--cv-text-3); flex-shrink: 0; }
.cv-sort-label { color: var(--cv-text-3); font-weight: 500; letter-spacing: 0.02em; }
.cv-sort-value { color: var(--cv-volt); font-weight: 600; }
:root .cv-sort-value { color: #27272a; }
.cv-sort-chev {
    color: var(--cv-text-3); margin-left: 2px;
    transition: transform 0.18s var(--cv-ease);
}
.cv-sort-btn[aria-expanded="true"] .cv-sort-chev { transform: rotate(180deg); }

.cv-sort-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 240px;
    background: rgba(24,21,19,0.96);
    border: 1px solid var(--cv-line);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 32px rgba(12,9,8,0.42), 0 2px 8px rgba(60,42,34,0.3);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    z-index: 50;
    display: flex; flex-direction: column; gap: 2px;
    transform-origin: top right;
    animation: cvSortIn 0.14s var(--cv-ease);
}
:root .cv-sort-menu {
    background: rgba(255,255,255,0.98);
    border-color: rgba(60,42,34,0.08);
    box-shadow: 0 10px 32px rgba(60,42,34,0.12), 0 2px 8px rgba(60,42,34,0.06);
}
.cv-sort-menu[hidden] { display: none; }

@keyframes cvSortIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cv-sort-opt {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: 0; border-radius: 8px;
    color: var(--cv-text-1);
    font: 500 12.5px/1.2 var(--cv-body);
    text-align: left; cursor: pointer;
    transition: background 0.12s var(--cv-ease), color 0.12s var(--cv-ease);
}
.cv-sort-opt > svg:first-child { color: var(--cv-text-3); flex-shrink: 0; }
.cv-sort-opt:hover { background: rgba(255,238,230,0.05); color: var(--cv-text-0); }
:root .cv-sort-opt:hover { background: rgba(60,42,34,0.04); color: #18181b; }
.cv-sort-opt:focus-visible {
    outline: none;
    background: rgba(255,238,230,0.06);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cv-volt) 35%, transparent);
}
.cv-sort-opt-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cv-sort-opt-title { color: inherit; font-weight: 600; font-size: 12.5px; }
.cv-sort-opt-sub { color: var(--cv-text-3); font-size: 11px; font-weight: 400; }

.cv-sort-check { color: var(--cv-volt); opacity: 0; flex-shrink: 0; transition: opacity 0.12s var(--cv-ease); }
:root .cv-sort-check { color: #27272a; }
.cv-sort-opt[aria-selected="true"] .cv-sort-check { opacity: 1; }
.cv-sort-opt[aria-selected="true"] > svg:first-child { color: var(--cv-volt); }
:root .cv-sort-opt[aria-selected="true"] > svg:first-child { color: #27272a; }
.cv-sort-opt[aria-selected="true"] .cv-sort-opt-title { color: var(--cv-text-0); }

/* ── Active filter pills ─────────────────────────────────── */
.cv-lib-activefilters {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.cv-active-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 6px 5px 10px; border-radius: 100px;
    background: var(--cv-volt-dim);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 30%, transparent);
    color: var(--cv-volt); font: 500 11.5px/1 var(--cv-body);
}
.cv-active-pill-x {
    width: 18px; height: 18px; border-radius: 50%;
    background: color-mix(in oklab, var(--cv-volt) 20%, transparent);
    border: 0; cursor: pointer; color: var(--cv-volt);
    display: grid; place-items: center;
    font: 700 11px/1 var(--cv-mono);
}
.cv-active-pill-x:hover { background: color-mix(in oklab, var(--cv-volt) 35%, transparent); }
.cv-active-clear {
    padding: 5px 10px; border-radius: 100px;
    background: transparent; border: 1px dashed var(--cv-line-2);
    color: var(--cv-text-3); font: 500 11.5px/1 var(--cv-body); cursor: pointer;
}
.cv-active-clear:hover { color: var(--cv-text-0); border-color: var(--cv-text-3); }

/* ── Tag filter bar ──────────────────────────────────────── */
.cv-lib-tags, .tag-filter-bar.cv-lib-tags {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 6px 0 14px;
    margin-bottom: 2px;
}
.cv-lib-tags .tag-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 100px;
    background: transparent;
    border: 1px solid var(--cv-line);
    color: var(--cv-text-3);
    font: 500 11px/1 var(--cv-body);
    cursor: pointer;
    transition: all 0.18s var(--cv-ease);
}
.cv-lib-tags .tag-chip:hover { color: var(--cv-text-0); border-color: var(--cv-line-2); }
.cv-lib-tags .tag-chip.active {
    color: var(--cv-volt);
    background: var(--cv-volt-dim);
    border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent);
}
.cv-lib-tags .tag-chip-count {
    font-family: var(--cv-mono); font-size: 10px;
    color: var(--cv-text-3); padding: 1px 5px;
    border-radius: 4px; background: rgba(255,238,230,0.05);
}
.cv-lib-tags .tag-chip.active .tag-chip-count {
    background: color-mix(in oklab, var(--cv-volt) 20%, transparent);
    color: var(--cv-volt);
}
:root .cv-lib-tags .tag-chip { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.08); color: #52525b; }
:root .cv-lib-tags .tag-chip.active { color: #27272a; background: rgba(39,39,42,0.1); border-color: rgba(39,39,42,0.3); }

/* ── Grid (shares cv-card styling) ───────────────────────── */
#contexts-grid.cv-lib-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
@media (max-width: 700px) {
    #contexts-grid.cv-lib-grid { grid-template-columns: 1fr; }
}

/* Rows mode — dense, single-line cards */
#contexts-grid.cv-lib-grid[data-view="rows"] {
    grid-template-columns: 1fr !important;
    gap: 6px;
}
#contexts-grid.cv-lib-grid[data-view="rows"] .cv-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center; gap: 14px;
    padding: 12px 18px 12px 14px;
    min-height: 58px;
}
#contexts-grid.cv-lib-grid[data-view="rows"] .cv-card-top { display: contents; }
#contexts-grid.cv-lib-grid[data-view="rows"] .cv-card-ai { grid-column: 1; margin: 0; }
#contexts-grid.cv-lib-grid[data-view="rows"] .cv-card-coldot { grid-column: 1; }
#contexts-grid.cv-lib-grid[data-view="rows"] .cv-card h3 {
    grid-column: 2; font-size: 14px; margin: 0; padding: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#contexts-grid.cv-lib-grid[data-view="rows"] .cv-card p { display: none; }
#contexts-grid.cv-lib-grid[data-view="rows"] .cv-card-date {
    grid-column: 3; font-size: 11px; color: var(--cv-text-3);
}
#contexts-grid.cv-lib-grid[data-view="rows"] .cv-card-foot {
    grid-column: 4; flex-wrap: nowrap; gap: 6px; margin: 0;
}
/* Live pill inside the foot — no extra overrides needed in rows mode */

/* Selection mode checkbox */
.cv-card-check {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 22px; height: 22px; border-radius: 6px;
    appearance: none; -webkit-appearance: none;
    background: rgba(9,7,6,0.7);
    border: 1.5px solid var(--cv-line-2);
    cursor: pointer; transition: all 0.15s var(--cv-ease);
}
.cv-card-check:checked {
    background: var(--cv-volt);
    border-color: var(--cv-volt);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1200' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}
/* Light: box is charcoal, so the checkmark must be white not dark */
:root .cv-card-check:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.cv-card.cv-card-selected {
    border-color: var(--cv-volt) !important;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--cv-volt) 40%, transparent);
}

/* Starred/pinned ribbon */
.cv-card-star {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 26px; height: 26px; border-radius: 6px;
    background: rgba(9,7,6,0.6);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-3);
    display: grid; place-items: center; cursor: pointer;
    transition: all 0.18s var(--cv-ease);
    opacity: 0;
}
.cv-card:hover .cv-card-star { opacity: 1; }
.cv-card-star.on { opacity: 1; color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent); }
.cv-card-star:hover { color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent); }

/* ── AI brand pill (top-left of library card) ─────────────── */
/* AI source badge — a small wordmark, not a coloured pill.
   The model is identified by --ai-font (set inline from _AI_BRAND) so the badge
   costs no colour: "Claude" comes up in a serif, "Grok" in mono, "ChatGPT" in a
   Helvetica grotesk. Sentence case and no letter-spacing, because the point is
   to read as the brand writes its own name — uppercase mono tracking would
   flatten all seven faces back into one texture. */
.cv-card-ai {
    display: inline-flex; align-items: center;
    font-family: var(--ai-font, var(--cv-mono));
    font-size: 11.5px; font-weight: 500; line-height: 1;
    letter-spacing: 0; text-transform: none;
    color: var(--muted);
    flex-shrink: 0;
    white-space: nowrap;
}
/* No brand face to borrow — fall back to the app's own label style. */
.cv-card-ai-generic {
    font: 500 10px/1 var(--cv-mono);
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--faint);
}

/* ── Live summarizing / failed indicator (bottom-left glass pill) ── */
.cv-card-live {
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    padding: 4px 9px 4px 8px;
    border-radius: 100px;
    background: color-mix(in oklab, var(--cv-volt) 14%, rgba(10,9,8,0.78));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 45%, transparent);
    color: var(--cv-volt);
    font: 600 9.5px/1 var(--cv-mono);
    letter-spacing: 0.09em; text-transform: uppercase;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 2px 10px color-mix(in oklab, var(--cv-volt) 22%, transparent),
        0 0 0 1px rgba(255,238,230,0.02) inset;
}
:root .cv-card-live {
    background: rgba(255,255,255,0.92);
    color: #27272a;
    border-color: rgba(39,39,42,0.4);
}
.cv-card-live-label { position: relative; z-index: 2; }

/* Animated glowing dot — orbit-style pulse (not the old blink). */
.cv-card-live-dot {
    position: relative;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cv-volt);
    box-shadow:
        0 0 6px var(--cv-volt),
        0 0 12px color-mix(in oklab, var(--cv-volt) 60%, transparent);
    flex-shrink: 0;
}
.cv-card-live-dot::before,
.cv-card-live-dot::after {
    content: ""; position: absolute; inset: -3px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in oklab, var(--cv-volt) 60%, transparent);
    opacity: 0;
    animation: cv-live-ring 1.6s cubic-bezier(0.2,0.7,0.1,1) infinite;
}
.cv-card-live-dot::after { animation-delay: 0.8s; }
:root .cv-card-live-dot { background: #27272a; box-shadow: 0 0 6px rgba(39,39,42,0.6); }
:root .cv-card-live-dot::before,
:root .cv-card-live-dot::after { border-color: rgba(39,39,42,0.5); }

@keyframes cv-live-ring {
    0%   { transform: scale(0.6); opacity: 0.9; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Shimmer sweep across the pill — modern, alive, never static. */
.cv-card-live-sweep {
    position: absolute; inset: 0;
    background: linear-gradient(
        100deg,
        transparent 30%,
        color-mix(in oklab, var(--cv-volt) 22%, transparent) 50%,
        transparent 70%
    );
    transform: translateX(-110%);
    animation: cv-live-sweep 2.4s ease-in-out infinite;
    z-index: 1;
}
@keyframes cv-live-sweep {
    0%   { transform: translateX(-110%); }
    60%  { transform: translateX(110%); }
    100% { transform: translateX(110%); }
}

/* Failed variant */
.cv-card-live.cv-card-live-err {
    color: oklch(0.78 0.18 25);
    border-color: color-mix(in oklab, oklch(0.7 0.18 25) 40%, transparent);
    box-shadow: 0 4px 14px color-mix(in oklab, oklch(0.7 0.18 25) 20%, transparent);
}
.cv-card-live.cv-card-live-err .cv-card-live-dot {
    background: oklch(0.78 0.18 25);
    box-shadow: 0 0 6px oklch(0.78 0.18 25);
    animation: none;
}
.cv-card-live.cv-card-live-err .cv-card-live-dot::before,
.cv-card-live.cv-card-live-err .cv-card-live-dot::after { display: none; }
.cv-card-live.cv-card-live-err .cv-card-live-sweep { display: none; }

/* Card-wide subtle glow when summarizing — reinforces "live" feel. */
.cv-card.cv-card-summarizing {
    border-color: color-mix(in oklab, var(--cv-volt) 22%, var(--cv-line));
}
/* Rotating border ring removed — the bottom-left badge is enough signal. */

/* Legacy status class kept as safe fallback (in case any other code references it). */
.cv-card-status { display: none; }

/* Delete button on card hover (non-select mode) */
.cv-card-del {
    position: absolute; bottom: 12px; right: 12px; z-index: 2;
    width: 26px; height: 26px; border-radius: 6px;
    background: rgba(9,7,6,0.6);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-3);
    display: grid; place-items: center; cursor: pointer;
    transition: all 0.18s var(--cv-ease);
    opacity: 0;
}
.cv-card:hover .cv-card-del { opacity: 0.7; }
.cv-card-del:hover { opacity: 1 !important; color: oklch(0.78 0.18 25); border-color: color-mix(in oklab, oklch(0.78 0.18 25) 40%, transparent); background: color-mix(in oklab, oklch(0.78 0.18 25) 10%, transparent); }

/* Highlight marks inside cards */
.cv-card mark {
    background: var(--cv-volt-dim);
    color: var(--cv-volt);
    padding: 0 3px; border-radius: 3px;
    font-weight: 500;
}

/* ── Skeletons ───────────────────────────────────────────── */
.cv-skel {
    padding: 18px 20px;
    border-radius: var(--cv-r-md);
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    min-height: 168px;
    position: relative; overflow: hidden;
}
:root .cv-skel { background: rgba(255,255,255,0.85); border-color: rgba(60,42,34,0.08); }
.cv-skel::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,238,230,0.04), transparent);
    animation: cv-skel 1.6s infinite;
}
@keyframes cv-skel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.cv-skel-line {
    height: 10px; border-radius: 5px;
    background: rgba(255,238,230,0.04);
    margin-bottom: 10px;
}
.cv-skel-line.w40 { width: 40%; }
.cv-skel-line.w80 { width: 80%; }
.cv-skel-line.w60 { width: 60%; }

/* ── Empty state ─────────────────────────────────────────── */
.cv-lib-empty {
    padding: 80px 24px;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
/* When JS reveals it by setting display:flex, keep the column layout. */
.cv-lib-empty-orb {
    width: 80px; height: 80px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 30% 30%, var(--cv-volt-dim), transparent 70%);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 25%, transparent);
    color: var(--cv-volt);
    box-shadow: 0 0 60px var(--cv-volt-glow);
    animation: cv-empty-pulse 3s ease-in-out infinite;
}
.cv-lib-empty-orb svg { width: 32px; height: 32px; }
@keyframes cv-empty-pulse {
    0%, 100% { box-shadow: 0 0 60px var(--cv-volt-glow); transform: scale(1); }
    50%      { box-shadow: 0 0 90px var(--cv-volt-glow); transform: scale(1.03); }
}
.cv-lib-empty h3 {
    font-family: var(--cv-display); font-weight: 500;
    font-size: 22px; color: var(--cv-text-0); margin: 0;
    letter-spacing: -0.02em;
}
:root .cv-lib-empty h3 { color: #111113; }
.cv-lib-empty p {
    color: var(--cv-text-3); font-size: 14px;
    max-width: 420px; line-height: 1.6; margin: 0;
}

/* ── Load more ───────────────────────────────────────────── */
.cv-lib-loadmore {
    display: flex; justify-content: center;
    padding: 28px 0 12px;
}
.cv-lib-loadmore .btn {
    padding: 10px 22px;
    border-radius: 100px;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1);
    font: 500 12.5px/1 var(--cv-body);
    cursor: pointer;
    transition: all 0.18s var(--cv-ease);
}
.cv-lib-loadmore .btn:hover {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent);
    background: var(--cv-volt-dim);
}

/* ── Floating bulk actions pill ─────────────────────────── */
.cv-bulk-pill {
    position: fixed; left: 50%; bottom: 24px;
    transform: translateX(-50%) translateY(120%);
    display: flex !important; align-items: center; gap: 8px;
    padding: 10px 10px 10px 18px; border-radius: 100px;
    background: rgba(15,13,11,0.92);
    border: 1px solid var(--cv-line-2);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(12,9,8,0.5), 0 0 0 1px rgba(255,238,230,0.02);
    z-index: 1000;
    transition: transform 0.3s var(--cv-spring);
    opacity: 0;
}
.cv-bulk-pill.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
:root .cv-bulk-pill { background: rgba(255,255,255,0.98); border-color: rgba(60,42,34,0.1); box-shadow: 0 20px 50px rgba(60,42,34,0.2); }
.cv-bulk-count {
    color: var(--cv-volt);
    font: 500 12.5px/1 var(--cv-mono);
    padding-right: 10px;
    border-right: 1px solid var(--cv-line);
}
.cv-bulk-btn {
    padding: 7px 12px; border-radius: 100px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--cv-text-1);
    font: 500 12px/1 var(--cv-body); cursor: pointer;
    transition: all 0.18s var(--cv-ease);
}
.cv-bulk-btn:hover { background: rgba(255,238,230,0.05); }
:root .cv-bulk-btn { color: #3f3f46; }
:root .cv-bulk-btn:hover { background: rgba(60,42,34,0.05); }
.cv-bulk-btn.cv-bulk-danger:hover {
    color: oklch(0.78 0.18 25);
    background: color-mix(in oklab, oklch(0.78 0.18 25) 12%, transparent);
}

/* ── Deep search results ─────────────────────────────────── */
#deep-search-results.cv-lib-deep { padding-top: 8px; }
#deep-search-results .deep-result-group,
#deep-search-results .deep-search-group {
    padding: 14px 18px; border-radius: var(--cv-r-md);
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    margin-bottom: 10px;
}
:root #deep-search-results .deep-result-group,
:root #deep-search-results .deep-search-group {
    background: rgba(255,255,255,0.9); border-color: rgba(60,42,34,0.08);
}

/* Collection color dot on cards */
.cv-card-coldot {
    width: 8px; height: 8px; border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}

/* Source badge inline in cards */
.cv-card-src {
    font: 500 9.5px/1 var(--cv-mono);
    color: var(--cv-text-3);
    padding: 3px 7px; border-radius: 4px;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    letter-spacing: 0.04em; text-transform: uppercase;
}
:root .cv-card-src { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.08); color: #71717a; }

/* Staggered card entrance */
@keyframes cv-cardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cv-card[data-anim] { animation: cv-cardIn 0.45s var(--cv-ease) both; animation-delay: var(--card-delay, 0ms); }

/* Responsive tweaks */
@media (max-width: 900px) {
    .cv-lib-command { flex-direction: column; align-items: stretch; }
    .cv-lib-tools { justify-content: flex-start; }
    .cv-search-pill { min-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   cv-ask: Ask — cinematic RAG chat
   ═══════════════════════════════════════════════════════════════ */

/* View shell: stays height:100%; overflow:hidden from prior #view-ask rule.
   Hide the leftover .view-header placeholder (already hidden by cv-main, but
   #view-ask doesn't have cv-main so we hide explicitly). */
#view-ask > .view-header { display: none !important; }
#view-ask { background: transparent; }
:root #view-ask { background: transparent; }

/* Fully override the old ask-container; keep it as a thin wrapper. */
#view-ask .ask-container {
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
}

.cv-ask-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    isolation: isolate;
}

/* ── Top rail ──────────────────────────────────────────────── */
.cv-ask-rail {
    display: flex; align-items: center; gap: 12px;
    margin: clamp(20px, 3vw, 36px) clamp(16px, 4vw, 48px) 0;
    padding: 10px 14px;
    border-radius: var(--cv-r-md);
    background: var(--cv-inset);
    border: 1px solid var(--cv-line);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    flex-shrink: 0;
}
:root .cv-ask-rail { background: rgba(255,255,255,0.8); border-color: rgba(60,42,34,0.08); }
.cv-ask-rail-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--cv-mono); font-size: 11.5px; color: var(--cv-text-3);
    letter-spacing: 0.02em;
}
.cv-ask-rail-meta b { color: var(--cv-text-1); font-weight: 500; }
:root .cv-ask-rail-meta b { color: #27272a; }
.cv-ask-rail-actions { margin-left: auto; display: flex; gap: 6px; }

/* ── Past-chats panel ──────────────────────────────────────── */
/* z-index needed so the absolutely-positioned panel inside the rail
   stacks above .cv-ask-scroll (which paints later in DOM order and
   would otherwise cover the panel). The rail's backdrop-filter
   already creates a stacking context, so this z-index is what
   actually elevates the whole rail above the scroll content. */
.cv-ask-rail { position: relative; z-index: 50; }

/* Active highlight for the rail toggle when panel is open. */
.cv-ask-rail-actions .cv-ibtn[aria-expanded="true"] {
    background: rgba(242,84,45,0.18);
    color: var(--cv-text-1);
}

/* Backdrop catches click-outside on mobile and softly dims the page. */
.cv-ask-history-backdrop {
    position: fixed; inset: 0; z-index: 18;
    background: transparent;
    animation: cvAskBackdropIn 0.18s ease-out forwards;
}
.cv-ask-history-backdrop[hidden] { display: none !important; }

.cv-ask-history-panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: min(380px, calc(100vw - 32px));
    max-height: min(520px, 65vh);
    background: rgba(22, 19, 17, 0.92);
    border: 1px solid var(--cv-line);
    border-radius: 12px;
    box-shadow:
        0 1px 0 rgba(255,238,230,0.04) inset,
        0 24px 48px -12px rgba(12,9,8,0.6),
        0 8px 20px rgba(12,9,8,0.35);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    z-index: 9999;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform-origin: top right;
    animation: cvAskPanelIn 0.18s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
/* Specificity bump: [hidden] must beat the display: flex above. */
.cv-ask-history-panel[hidden] { display: none !important; }

@keyframes cvAskPanelIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes cvAskBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

:root .cv-ask-history-panel {
    background: rgba(255,255,255,0.98);
    border-color: rgba(60,42,34,0.08);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 24px 48px -12px rgba(60,42,34,0.18),
        0 8px 20px rgba(60,42,34,0.08);
}

.cv-ask-history-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--cv-line);
}
.cv-ask-history-head-title {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--cv-mono); font-size: 11px;
    color: var(--cv-text-2); letter-spacing: 0.06em; text-transform: uppercase;
}
.cv-ask-history-count {
    display: inline-flex; align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(242,84,45,0.15);
    color: var(--cv-volt);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
}

.cv-ask-history-search {
    position: relative;
    padding: 8px 10px;
    border-bottom: 1px solid var(--cv-line);
}
.cv-ask-history-search input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    border-radius: 8px;
    color: var(--cv-text-1);
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.12s, background 0.12s;
}
.cv-ask-history-search input::placeholder { color: var(--cv-text-3); }
.cv-ask-history-search input:focus {
    border-color: rgba(242,84,45,0.5);
    background: rgba(255,238,230,0.06);
}
:root .cv-ask-history-search input {
    background: rgba(60,42,34,0.03);
    border-color: rgba(60,42,34,0.08);
}
:root .cv-ask-history-search input:focus {
    background: #fff;
}
.cv-ask-history-search-ic {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    color: var(--cv-text-3);
    pointer-events: none;
}

.cv-ask-history-list {
    overflow-y: auto;
    padding: 6px 6px 8px;
    flex: 1;
    /* Subtle scrollbar that stays hidden until the list is hovered, themed to
       match the app surface rather than the stark default white. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.25s var(--cv-ease, ease);
}
.cv-ask-history-list:hover { scrollbar-color: var(--cv-line-2, rgba(255,238,230,0.16)) transparent; }
.cv-ask-history-list::-webkit-scrollbar { width: 8px; }
.cv-ask-history-list::-webkit-scrollbar-track { background: transparent; }
.cv-ask-history-list::-webkit-scrollbar-thumb {
    background: transparent;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 100px;
    transition: background 0.25s var(--cv-ease, ease);
}
.cv-ask-history-list:hover::-webkit-scrollbar-thumb {
    background: var(--cv-line-2, rgba(255,238,230,0.16));
    background-clip: padding-box;
}
.cv-ask-history-list::-webkit-scrollbar-thumb:hover {
    background: var(--cv-volt-glow, rgba(255,122,82,0.22));
    background-clip: padding-box;
}

.cv-ask-history-group {
    padding: 10px 10px 4px;
    font-family: var(--cv-mono); font-size: 10px;
    color: var(--cv-text-3);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.cv-ask-history-group:first-child { padding-top: 4px; }

.cv-ask-history-empty {
    padding: 32px 18px 28px;
    color: var(--cv-text-3);
    font-size: 12.5px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.cv-ask-history-empty-ic {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(242,84,45,0.12);
    color: var(--cv-volt);
    display: inline-flex; align-items: center; justify-content: center;
}

.cv-ask-history-item {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    margin: 1px 0;
    border-radius: 8px;
    cursor: pointer;
    color: var(--cv-text-1);
    font-size: 13px;
    transition: background 0.12s, transform 0.08s;
}
.cv-ask-history-item:hover {
    background: rgba(255,238,230,0.05);
}
.cv-ask-history-item:active { transform: scale(0.99); }
:root .cv-ask-history-item:hover { background: rgba(60,42,34,0.04); }

.cv-ask-history-item.is-active {
    background: rgba(242,84,45,0.14);
}
.cv-ask-history-item.is-active::before {
    content: ""; position: absolute; left: 2px; top: 9px; bottom: 9px;
    width: 2px; border-radius: 2px;
    background: var(--cv-volt);
}

.cv-ask-history-item-pin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
    color: var(--cv-volt);
    flex-shrink: 0;
}
.cv-ask-history-item-pin[hidden] { display: none; }

.cv-ask-history-item-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.cv-ask-history-item-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 500;
    line-height: 1.3;
}
.cv-ask-history-item-meta {
    font-family: var(--cv-mono); font-size: 10.5px;
    color: var(--cv-text-3);
    display: flex; align-items: center; gap: 6px;
    line-height: 1;
}
.cv-ask-history-item-actions {
    display: flex; gap: 2px;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 0.14s, transform 0.14s;
    flex-shrink: 0;
}
.cv-ask-history-item:hover .cv-ask-history-item-actions,
.cv-ask-history-item:focus-within .cv-ask-history-item-actions {
    opacity: 1;
    transform: translateX(0);
}
.cv-ask-history-item-actions button {
    background: transparent; border: 0; padding: 5px;
    border-radius: 6px; cursor: pointer;
    color: var(--cv-text-3);
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.12s, background 0.12s;
}
.cv-ask-history-item-actions button:hover {
    color: var(--cv-text-1);
    background: rgba(255,238,230,0.08);
}
.cv-ask-history-item-actions button[data-act="delete"]:hover {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}
:root .cv-ask-history-item-actions button:hover { background: rgba(60,42,34,0.05); }
.cv-ask-history-item-actions button.is-pinned { color: var(--cv-volt); }

/* SVGs inside rows must NOT be the click target — otherwise e.target is
   a <line>/<path> and some browsers report unexpected closest() results. */
.cv-ask-history-item svg,
.cv-ask-history-item-actions button svg,
.cv-ask-history-head .cv-ibtn svg,
.cv-ask-history-empty svg,
.cv-ask-history-search-ic svg { pointer-events: none; }

/* Rail status: surface current session title */
.cv-ask-rail-meta .cv-ask-current-session {
    color: var(--cv-volt);
    max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Scrollable message area ───────────────────────────────── */
.cv-ask-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: clamp(20px, 3vw, 36px) clamp(16px, 4vw, 48px) 140px;
    position: relative;
}
.cv-ask-scroll::-webkit-scrollbar { width: 5px; }
.cv-ask-scroll::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.08); border-radius: 3px; }
.cv-ask-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,238,230,0.15); }
:root .cv-ask-scroll::-webkit-scrollbar-thumb { background: rgba(60,42,34,0.1); }

/* ── Empty state hero ──────────────────────────────────────── */
/* The blueprint grid now lives app-wide on .main-content (see App layout). */

#view-ask .ask-empty.cv-ask-empty {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(20px, 5vh, 64px) clamp(4px, 1.5vw, 20px) 24px;
    text-align: left;
    min-height: auto;
    overflow-x: hidden;
    animation: cv-ask-empty-in 0.5s var(--cv-ease) both;
}
.cv-ask-welcome { display: flex; flex-direction: column; gap: clamp(20px, 2.6vh, 30px); min-width: 0; }

/* Header: intro text (left) + orb (right) */
.cv-ask-whead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px;
}
.cv-ask-wintro {
    display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
    flex: 1; min-width: 0;
}
@media (max-width: 760px) {
    .cv-ask-whead { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
}

/* Section labels ("Ask anything" / "Starters") */
.cv-ask-seclabel {
    display: flex; align-items: center; gap: 9px;
    font: 500 11px/1 var(--cv-mono);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--cv-text-2);
    margin-bottom: -6px;
}
.cv-ask-seclabel-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cv-volt); box-shadow: 0 0 8px var(--cv-volt-glow);
    animation: cv-ask-hint-pulse 2.4s ease-in-out infinite;
}

/* Staggered entrance — the hero, composer and starters rise in sequence. */
.cv-ask-welcome > * { animation: cv-ask-rise 0.5s var(--cv-ease) both; }
.cv-ask-welcome > *:nth-child(1) { animation-delay: 0.04s; }
.cv-ask-welcome > *:nth-child(2) { animation-delay: 0.10s; }
.cv-ask-welcome > *:nth-child(3) { animation-delay: 0.15s; }
.cv-ask-welcome > *:nth-child(4) { animation-delay: 0.20s; }
.cv-ask-welcome > *:nth-child(5) { animation-delay: 0.25s; }
@keyframes cv-ask-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Keyboard focus rings (accessibility) */
#view-ask .ask-suggestion.cv-ask-starter:focus-visible {
    outline: none;
    border-color: color-mix(in oklab, var(--cv-volt) 55%, transparent);
    box-shadow: 0 0 0 3px var(--cv-volt-glow);
}
#view-ask button.ask-send-btn.cv-ask-send:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--cv-volt-glow);
}

@media (prefers-reduced-motion: reduce) {
    .cv-ask-welcome > *,
    #view-ask .ask-empty.cv-ask-empty,
    .cv-ask-seclabel-dot,
    .cv-ask-orb-core,
    .cv-ask-orb::before { animation: none !important; }
}
@keyframes cv-ask-empty-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cv-ask-orb {
    position: relative; flex-shrink: 0;
    width: clamp(150px, 15vw, 210px); aspect-ratio: 1;
    display: grid; place-items: center;
}
/* concentric guide rings */
.cv-ask-orb::before, .cv-ask-orb::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.cv-ask-orb::after { inset: 0; border: 1px solid rgba(255,238,230,0.05); }
.cv-ask-orb::before {
    inset: 19%; border: 1px solid rgba(255,238,230,0.07);
    animation: cv-live-ring 3s cubic-bezier(0.2,0.7,0.1,1) infinite;
}
:root .cv-ask-orb::after { border-color: rgba(60,42,34,0.06); }
:root .cv-ask-orb::before { border-color: rgba(60,42,34,0.09); }
.cv-ask-orb-core {
    position: relative; z-index: 1;
    width: 44%; aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 32% 26%, #35302B, #0F0D0B 74%);
    border: 1px solid rgba(255,238,230,0.10);
    box-shadow: 0 0 55px var(--cv-volt-glow), inset 0 1px 0 rgba(255,238,230,0.08);
    color: #fff;
    animation: cv-empty-pulse 3.4s ease-in-out infinite;
}
:root .cv-ask-orb-core {
    background: radial-gradient(circle at 32% 26%, #ffffff, var(--cv-inset) 78%);
    border: 1px solid var(--cv-line-2);
    box-shadow: 0 0 40px color-mix(in oklab, var(--cv-volt) 22%, transparent),
                0 6px 18px -8px rgba(60,42,34,0.22),
                inset 0 1px 0 #ffffff;
    color: var(--cv-volt);
}
.cv-ask-orb-core svg { width: 40%; height: 40%; }

.cv-ask-eyebrow {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--cv-mono); font-size: 11px; color: var(--cv-text-3);
    letter-spacing: 0.12em; text-transform: uppercase;
}
:root .cv-ask-eyebrow { color: var(--cv-text-3); }
.cv-ask-eyebrow .cv-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--cv-text-4); }

#view-ask .ask-empty.cv-ask-empty h1.cv-ask-title,
#view-capture h1.cv-ask-title {
    font-family: var(--cv-display); font-weight: 500;
    font-size: clamp(32px, 4.2vw, 56px);
    line-height: 1.1; letter-spacing: -0.035em;
    margin: 0; padding-bottom: 0.08em; color: var(--cv-text-0);
    text-wrap: balance;
    font-style: normal;
    text-shadow: none;
}
:root #view-ask .ask-empty.cv-ask-empty h1.cv-ask-title,
:root #view-capture h1.cv-ask-title { color: #111113; }
.cv-ask-title .voltword {
    position: relative;
    background: linear-gradient(180deg, color-mix(in oklab, var(--cv-volt) 88%, white 12%) 0%, var(--cv-volt) 45%, var(--cv-volt-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-style: italic; font-weight: 400;
    padding-right: 0.2em;
}
.cv-ask-title .voltword::after { display: none; }
:root .cv-ask-title .voltword {
    background: linear-gradient(180deg, #2a2b31, #0d0e11 100%);
    -webkit-background-clip: text; background-clip: text;
}

#view-ask .ask-empty.cv-ask-empty .cv-ask-desc,
#view-capture .cv-ask-desc {
    font-family: var(--cv-body);
    font-size: 14.5px; line-height: 1.6;
    color: var(--cv-text-2);
    max-width: 480px;
    margin: 0;
    text-align: left;
}
/* Eyebrow badge with the volt glyph */
.cv-ask-eyebrow .cv-ebadge { display: inline-flex; align-items: center; gap: 5px; }
.cv-ask-eyebrow .cv-ebadge svg { width: 11px; height: 11px; }
:root #view-ask .ask-empty.cv-ask-empty .cv-ask-desc,
:root #view-capture .cv-ask-desc { color: var(--cv-text-1); }

/* ── Starter cards ────────────────────────────────────────── */
.cv-ask-starters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}
@media (max-width: 820px) {
    .cv-ask-starters { grid-template-columns: 1fr; }
}

#view-ask .ask-suggestion.cv-ask-starter {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: stretch; gap: 18px;
    padding: 18px 18px 16px;
    border-radius: var(--cv-r-md);
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1);
    font: 500 13px/1.4 var(--cv-body);
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s var(--cv-ease), border-color 0.25s var(--cv-ease);
    --mx: 50%; --my: 50%;
}
:root #view-ask .ask-suggestion.cv-ask-starter {
    background: rgba(255,255,255,0.95); border-color: rgba(60,42,34,0.07); color: #27272a;
}
#view-ask .ask-suggestion.cv-ask-starter::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(280px 160px at var(--mx) var(--my), var(--cv-volt-dim), transparent 55%);
    opacity: 0; transition: opacity 0.3s var(--cv-ease); pointer-events: none;
}
#view-ask .ask-suggestion.cv-ask-starter:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--cv-volt) 35%, var(--cv-line));
}
#view-ask .ask-suggestion.cv-ask-starter:hover::before { opacity: 1; }
/* Top row: icon (left) + category badge (right) */
.cv-ask-starter-top {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: relative; z-index: 1;
}
.cv-ask-starter-ic {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(255,238,230,0.04);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1);
    flex-shrink: 0;
}
:root .cv-ask-starter-ic { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.08); color: #3f3f46; }
.cv-ask-starter-ic svg { width: 16px; height: 16px; }
.cv-ask-starter-badge {
    font: 500 9px/1 var(--cv-mono);
    color: var(--cv-text-3);
    letter-spacing: 0.16em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 100px;
    border: 1px solid var(--cv-line);
}
.cv-ask-starter-t {
    position: relative; z-index: 1;
    font: 500 15px/1.35 var(--cv-body);
    color: var(--cv-text-0);
    letter-spacing: -0.01em;
}
:root .cv-ask-starter-t { color: #111113; }
.cv-ask-starter-run {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 7px;
    font: 500 10px/1 var(--cv-mono);
    color: var(--cv-text-3);
    letter-spacing: 0.14em; text-transform: uppercase;
    transition: color 0.2s var(--cv-ease), gap 0.2s var(--cv-ease);
}
.cv-ask-starter-run svg { width: 13px; height: 13px; }
#view-ask .ask-suggestion.cv-ask-starter:hover .cv-ask-starter-run { color: var(--cv-volt); gap: 10px; }
#view-ask .ask-suggestion.cv-ask-starter:hover .cv-ask-starter-ic {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 35%, transparent);
    background: var(--cv-volt-dim);
}

/* ── Message re-skin ──────────────────────────────────────── */
#view-ask .ask-msg {
    display: flex; gap: 12px;
    margin: 0 auto 22px;
    max-width: 820px;
    animation: cv-ask-msg-in 0.35s var(--cv-ease) both;
}
@keyframes cv-ask-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* User bubble — no avatar, right-aligned glass pill */
#view-ask .ask-msg.ask-msg-user { flex-direction: row-reverse; }
#view-ask .ask-msg.ask-msg-user .ask-msg-avatar { display: none !important; }
#view-ask .ask-msg.ask-msg-user .ask-msg-body {
    flex: 0 1 auto; max-width: min(80%, 640px);
}
#view-ask .ask-msg.ask-msg-user .ask-msg-content {
    background: linear-gradient(135deg, rgba(39,34,30,0.9), rgba(25,21,19,0.9));
    border: 1px solid var(--cv-line-2);
    color: var(--cv-text-0);
    border-radius: 18px 18px 4px 18px;
    padding: 12px 16px;
    font: 400 14px/1.65 var(--cv-body);
    box-shadow: 0 2px 18px rgba(60,42,34,0.2);
    overflow-wrap: break-word;
}
:root #view-ask .ask-msg.ask-msg-user .ask-msg-content {
    background: linear-gradient(135deg, #ffffff, #f4f4f7);
    border-color: rgba(60,42,34,0.08);
    color: #111113;
}

/* User message action buttons (retry / edit) */
#view-ask .ask-msg-actions {
    display: flex; gap: 4px;
    justify-content: flex-end;
    margin-top: 6px;
    opacity: 0;
    transition: opacity 0.15s;
}
#view-ask .ask-msg-user:hover .ask-msg-actions,
#view-ask .ask-msg-user:focus-within .ask-msg-actions {
    opacity: 1;
}
#view-ask .ask-msg-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    background: rgba(255,238,230,0.05);
    border: 1px solid var(--cv-line-2);
    border-radius: 20px;
    color: var(--cv-text-2);
    font: 400 11px/1 var(--cv-body);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#view-ask .ask-msg-action-btn:hover {
    background: rgba(255,238,230,0.1);
    color: var(--cv-text-0);
    border-color: var(--cv-line);
}
#view-ask .ask-msg-action-btn:disabled {
    opacity: 0.35; cursor: not-allowed;
}
:root #view-ask .ask-msg-action-btn {
    background: rgba(60,42,34,0.04);
    border-color: rgba(60,42,34,0.1);
    color: #555;
}
:root #view-ask .ask-msg-action-btn:hover {
    background: rgba(60,42,34,0.08);
    color: #111;
}

/* ── Inline message editing (Claude/ChatGPT style) ────────── */
#view-ask .ask-msg.ask-msg-user.editing .ask-msg-body {
    flex: 0 0 auto;
    width: min(92%, 720px);
    max-width: min(92%, 720px);
}
.ask-msg-edit { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.ask-msg-edit-input {
    width: 100%; box-sizing: border-box;
    background: linear-gradient(135deg, rgba(39,34,30,0.95), rgba(25,21,19,0.95));
    border: 1px solid color-mix(in oklab, var(--cv-volt) 38%, var(--cv-line-2));
    color: var(--cv-text-0);
    border-radius: 16px;
    padding: 12px 15px;
    font: 400 14px/1.65 var(--cv-body);
    resize: none; outline: none;
    max-height: 260px; overflow-y: auto;
    transition: border-color 0.18s var(--cv-ease), box-shadow 0.18s var(--cv-ease);
}
.ask-msg-edit-input:focus {
    border-color: color-mix(in oklab, var(--cv-volt) 60%, transparent);
    box-shadow: 0 0 0 3px var(--cv-volt-glow);
}
:root .ask-msg-edit-input {
    background: linear-gradient(135deg, #ffffff, #f4f4f7);
    border-color: color-mix(in oklab, #52525b 40%, rgba(60,42,34,0.1));
    color: #111113;
}
.ask-msg-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ask-msg-edit-btn {
    padding: 7px 14px; border-radius: 100px;
    font: 500 12px/1 var(--cv-body); cursor: pointer;
    border: 1px solid var(--cv-line-2);
    transition: all 0.16s var(--cv-ease);
}
.ask-msg-edit-cancel { background: transparent; color: var(--cv-text-2); }
.ask-msg-edit-cancel:hover { background: rgba(255,238,230,0.06); color: var(--cv-text-0); border-color: var(--cv-line); }
.ask-msg-edit-save {
    background: var(--brand-gradient); border-color: color-mix(in oklab, var(--cv-volt) 70%, black);
    font-weight: 600;
}
.ask-msg-edit-save:hover { box-shadow: 0 6px 18px var(--cv-volt-glow); transform: translateY(-1px); }
:root .ask-msg-edit-save { color: #ffffff; }
.ask-msg-edit-save:active { transform: translateY(0); }
:root .ask-msg-edit-cancel { color: #52525b; }
:root .ask-msg-edit-cancel:hover { background: rgba(60,42,34,0.05); color: #111; }
.ask-msg-edit-input::-webkit-scrollbar { width: 5px; }
.ask-msg-edit-input::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.14); border-radius: 3px; }

/* Edit-in-progress input highlight */
#view-ask .ask-input.editing {
    outline: 2px solid var(--cv-volt);
    outline-offset: -2px;
}

/* Assistant bubble — bolt avatar + glass card */
#view-ask .ask-msg.ask-msg-assistant .ask-msg-avatar {
    width: 32px; height: 32px; border-radius: 10px;
    background: var(--cv-volt-dim);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 35%, transparent);
    color: var(--cv-volt);
    display: grid; place-items: center;
    flex-shrink: 0;
    box-shadow: 0 0 16px color-mix(in oklab, var(--cv-volt) 20%, transparent);
    font-size: 0;
}
#view-ask .ask-msg.ask-msg-assistant .ask-msg-avatar svg { width: 15px; height: 15px; }
#view-ask .ask-msg.ask-msg-assistant .ask-msg-body {
    flex: 1; min-width: 0; max-width: 720px;
}
#view-ask .ask-msg.ask-msg-assistant .ask-msg-content {
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-0);
    border-radius: 18px 18px 18px 4px;
    padding: 14px 18px;
    font: 400 14px/1.7 var(--cv-body);
    box-shadow: 0 2px 18px rgba(60,42,34,0.15);
}
:root #view-ask .ask-msg.ask-msg-assistant .ask-msg-content {
    background: rgba(255,255,255,0.95);
    border-color: rgba(60,42,34,0.07);
    color: #111113;
}

/* Markdown within assistant bubble */
#view-ask .ask-msg-content p { margin: 0 0 10px; }
#view-ask .ask-msg-content p:last-child { margin-bottom: 0; }
#view-ask .ask-msg-content code {
    font-family: var(--cv-code); font-size: 12.5px;
    padding: 2px 6px; border-radius: 4px;
    background: rgba(255,238,230,0.06);
    color: color-mix(in oklab, var(--cv-volt) 75%, white);
    border: 1px solid var(--cv-line);
}
:root #view-ask .ask-msg-content code {
    background: rgba(60,42,34,0.04); color: #27272a; border-color: rgba(60,42,34,0.08);
}
#view-ask .ask-msg-content pre {
    margin: 10px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(9,7,6,0.7);
    border: 1px solid var(--cv-line);
    overflow-x: auto;
}
#view-ask .ask-msg-content pre code {
    background: transparent; padding: 0; border: 0; color: var(--cv-text-1);
    font-size: 12.5px; line-height: 1.6;
}
#view-ask .ask-msg-content ul,
#view-ask .ask-msg-content ol {
    margin: 8px 0; padding-left: 22px;
}
#view-ask .ask-msg-content li { margin: 4px 0; }
#view-ask .ask-msg-content strong { color: var(--cv-text-0); font-weight: 600; }
:root #view-ask .ask-msg-content strong { color: #111113; }

/* Streaming cursor */
#view-ask .ask-cursor {
    display: inline-block;
    width: 2px; height: 1.2em;
    vertical-align: -2px;
    margin-left: 3px;
    background: var(--cv-volt);
    box-shadow: 0 0 6px var(--cv-volt), 0 0 12px color-mix(in oklab, var(--cv-volt) 40%, transparent);
    animation: cv-ask-cursor 1s infinite;
    border-radius: 1px;
}
@keyframes cv-ask-cursor {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0.1; }
}

/* Token fade-in */
.ask-token { animation: cv-token-in 0.22s var(--cv-ease) both; }
@keyframes cv-token-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Thinking pill ────────────────────────────────────────── */
#view-ask .ask-thinking.cv-ask-thinking {
    display: inline-flex !important;
    align-items: center; gap: 10px;
    margin: 0 auto 22px;
    max-width: 820px;
    padding: 10px 16px 10px 12px;
    border-radius: 100px;
    background: rgba(10,9,8,0.72);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 35%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--cv-volt);
    font: 500 11.5px/1 var(--cv-mono);
    letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 4px 18px color-mix(in oklab, var(--cv-volt) 15%, transparent);
    animation: cv-ask-msg-in 0.3s var(--cv-ease) both;
}
:root #view-ask .ask-thinking.cv-ask-thinking {
    background: rgba(255,255,255,0.92); color: #27272a; border-color: rgba(39,39,42,0.35);
}

.cv-ask-orbit {
    position: relative;
    width: 16px; height: 16px;
    display: inline-block;
    flex-shrink: 0;
}
.cv-ask-orbit span {
    position: absolute;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--cv-volt);
    box-shadow: 0 0 6px var(--cv-volt);
    top: 50%; left: 50%;
    transform-origin: 0 0;
    animation: cv-ask-orbit 1.4s linear infinite;
}
.cv-ask-orbit span:nth-child(1) { animation-delay: 0s; }
.cv-ask-orbit span:nth-child(2) { animation-delay: -0.46s; }
.cv-ask-orbit span:nth-child(3) { animation-delay: -0.93s; }
@keyframes cv-ask-orbit {
    0%   { transform: translate(-50%, -50%) rotate(0deg) translateX(7px) rotate(0deg) scale(1); opacity: 1; }
    50%  { transform: translate(-50%, -50%) rotate(180deg) translateX(7px) rotate(-180deg) scale(0.6); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(7px) rotate(-360deg) scale(1); opacity: 1; }
}

/* ── Sources ──────────────────────────────────────────────── */
#view-ask .ask-sources {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed color-mix(in oklab, var(--cv-volt) 25%, transparent);
}
#view-ask .ask-sources-label {
    flex-basis: 100%;
    font: 500 10.5px/1 var(--cv-mono);
    color: var(--cv-volt);
    letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 4px;
}
:root #view-ask .ask-sources-label { color: #27272a; }

#view-ask .ask-source-chip {
    --src-color: var(--cv-volt);
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 9px 5px 8px;
    border-radius: 100px;
    background: rgba(255,238,230,0.03);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1);
    font: 500 11.5px/1 var(--cv-body);
    cursor: pointer;
    transition: all 0.18s var(--cv-ease);
    text-decoration: none;
    max-width: 100%;
}
:root #view-ask .ask-source-chip {
    background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.08); color: #3f3f46;
}
#view-ask .ask-source-chip:hover {
    transform: translateY(-1px);
    border-color: var(--src-color);
    background: color-mix(in oklab, var(--src-color) 12%, transparent);
    box-shadow: 0 2px 12px color-mix(in oklab, var(--src-color) 25%, transparent);
}
.ask-source-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--src-color);
    box-shadow: 0 0 6px var(--src-color);
    flex-shrink: 0;
}
.ask-source-title {
    max-width: 220px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#view-ask .ask-source-score {
    font: 500 10px/1 var(--cv-mono);
    padding: 2px 6px; border-radius: 4px;
    color: var(--src-color);
    background: color-mix(in oklab, var(--src-color) 15%, transparent);
    border: 1px solid color-mix(in oklab, var(--src-color) 25%, transparent);
    letter-spacing: 0.04em;
    opacity: 1;
    flex-shrink: 0;
}

/* ── Composer (sticky bottom) ─────────────────────────────── */
#view-ask .ask-input-bar.cv-ask-composer {
    position: sticky;
    bottom: 0;
    padding: 14px clamp(16px, 4vw, 48px) 20px;
    background: linear-gradient(180deg, transparent 0%, var(--cv-bg-0) 28%);
    border-top: 0;
    flex-shrink: 0;
    z-index: 10;
}
:root #view-ask .ask-input-bar.cv-ask-composer {
    background: linear-gradient(180deg, transparent 0%, #f5f5f7 28%);
}

.cv-ask-pill {
    display: flex; align-items: center; gap: 10px;
    max-width: 920px; margin: 0 auto;
    padding: 8px 8px 8px 16px;
    border-radius: 16px;
    background: rgba(18,16,14,0.7);
    border: 1px solid var(--cv-line);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    transition: border-color 0.2s var(--cv-ease), background 0.2s var(--cv-ease);
    position: relative; overflow: hidden;
}
:root .cv-ask-pill { background: rgba(255,255,255,0.9); border-color: rgba(60,42,34,0.08); }
.cv-ask-pill::before {
    content: ""; position: absolute; inset: -1px;
    border-radius: 17px; padding: 1px;
    background: linear-gradient(135deg, transparent 40%, var(--cv-volt-dim) 50%, transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity 0.25s var(--cv-ease); pointer-events: none;
}
.cv-ask-pill:focus-within { border-color: color-mix(in oklab, var(--cv-volt) 45%, transparent); }
.cv-ask-pill:focus-within::before { opacity: 1; }

.cv-ask-pill-ic {
    color: var(--cv-text-3);
    flex-shrink: 0;
    display: grid; place-items: center;
    transition: color 0.18s var(--cv-ease);
}
.cv-ask-pill:focus-within .cv-ask-pill-ic { color: var(--cv-volt); }
.cv-ask-pill-ic svg { width: 16px; height: 16px; }

#view-ask .ask-input {
    flex: 1; min-width: 0;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--cv-text-0);
    font: 400 14.5px/1.5 var(--cv-body);
    padding: 10px 0 !important;
    margin: 0;
    /* Multiline: grow with content (capped), no manual resize grip. */
    resize: none;
    display: block;
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
}
#view-ask textarea.ask-input::-webkit-scrollbar { width: 5px; }
#view-ask textarea.ask-input::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.12); border-radius: 3px; }
:root #view-ask .ask-input { color: #111113; }
#view-ask .ask-input::placeholder { color: var(--cv-text-3); }
/* Center the controls with the input — reliable on one line, fine across a few. */
#view-ask .cv-ask-pill { align-items: center; }

.cv-ask-pill-kbd {
    display: none;
    font-family: var(--cv-mono); font-size: 10.5px;
    padding: 3px 7px; border-radius: 5px;
    background: rgba(255,238,230,0.06);
    color: var(--cv-text-2);
    border: 1px solid var(--cv-line);
    flex-shrink: 0;
}
.cv-ask-pill:focus-within .cv-ask-pill-kbd { display: inline-flex; }
:root .cv-ask-pill-kbd { background: rgba(60,42,34,0.05); border-color: rgba(60,42,34,0.1); color: #52525b; }
@media (max-width: 500px) { .cv-ask-pill-kbd { display: none !important; } }

#view-ask button.ask-send-btn.cv-ask-send {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center;
    background: var(--brand-gradient);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 70%, black);
    cursor: pointer;
    transition: transform 0.18s var(--cv-ease), box-shadow 0.18s var(--cv-ease), opacity 0.18s var(--cv-ease);
    padding: 0; margin: 0;
    flex-shrink: 0;
    opacity: 1;
}
#view-ask button.ask-send-btn.cv-ask-send:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--cv-volt-glow);
}
#view-ask button.ask-send-btn.cv-ask-send:active:not(:disabled) { transform: translateY(0); }
#view-ask button.ask-send-btn.cv-ask-send:disabled {
    opacity: 0.35; cursor: not-allowed; transform: none;
}
#view-ask button.ask-send-btn.cv-ask-send svg { width: 16px; height: 16px; }
/* Light mode: charcoal volt button needs a light icon, not the dark dark-theme one */
:root #view-ask button.ask-send-btn.cv-ask-send { color: #ffffff; }
:root #view-ask button.ask-send-btn.cv-ask-send svg { color: #ffffff; }

/* Hint row below pill */
.cv-ask-hint {
    max-width: 920px; margin: 8px auto 0;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--cv-mono);
    font-size: 11px;
    color: var(--cv-text-3);
    letter-spacing: 0.02em;
    padding: 0 4px;
}
.cv-ask-hint-left {
    display: inline-flex; align-items: center; gap: 8px;
}
.cv-ask-hint-right {
    display: inline-flex; align-items: center; gap: 8px;
}
.ask-scope-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-color: var(--sunk);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 11px;
    color: var(--cv-text-2, inherit);
    border: 1px solid var(--cv-line, rgba(255,238,230,0.09));
    border-radius: 100px;
    font: 500 11px/1 var(--cv-mono);
    letter-spacing: 0.02em;
    padding: 5px 27px 5px 11px;
    max-width: 180px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.18s var(--cv-ease), color 0.18s var(--cv-ease), background-color 0.18s var(--cv-ease);
}
.ask-scope-select:hover { border-color: var(--cv-volt); color: var(--cv-volt); }
.ask-scope-select:focus-visible { outline: none; border-color: var(--cv-volt); box-shadow: 0 0 0 3px var(--cv-volt-glow, rgba(255,122,82,0.22)); }
/* Native option list can't take the pill styling, but at least keep it on-theme. */
.ask-scope-select option { background: var(--surface); color: var(--ink); }
:root .ask-scope-select option { background: #ffffff; color: #27272a; }
.cv-ask-hint-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--cv-volt);
    box-shadow: 0 0 6px var(--cv-volt);
    animation: cv-ask-hint-pulse 2.2s ease-in-out infinite;
}
@keyframes cv-ask-hint-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.75); }
}
#view-ask .ask-clear-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--cv-text-3);
    font: 500 11px/1 var(--cv-mono);
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.18s var(--cv-ease);
}
#view-ask .ask-clear-btn:hover {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 30%, transparent);
    background: var(--cv-volt-dim);
}

/* ── Custom scope dropdown inside the composer pill ────────── */
.cv-ask-scope { position: relative; flex-shrink: 0; }
.cv-ask-scope-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 9px 6px 11px;
    border-radius: 100px;
    border: 1px solid var(--cv-line);
    background: rgba(255,238,230,0.03);
    color: var(--cv-text-2);
    font: 500 11px/1 var(--cv-mono);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.18s var(--cv-ease), color 0.18s var(--cv-ease), background 0.18s var(--cv-ease);
}
:root .cv-ask-scope-btn { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.08); color: #52525b; }
.cv-ask-scope-btn:hover { border-color: var(--cv-line-2); color: var(--cv-text-1); }
.cv-ask-scope-btn[aria-expanded="true"] {
    border-color: color-mix(in oklab, var(--cv-volt) 45%, transparent);
    color: var(--cv-text-0); background: var(--cv-volt-dim);
}
.cv-ask-scope-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cv-volt-glow); }
.cv-ask-scope-ic { display: grid; place-items: center; color: var(--cv-text-3); flex-shrink: 0; }
.cv-ask-scope-ic svg { width: 13px; height: 13px; }
.cv-ask-scope-btn[aria-expanded="true"] .cv-ask-scope-ic { color: var(--cv-volt); }
.cv-ask-scope-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-ask-scope-chev { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.2s var(--cv-ease); }
.cv-ask-scope-btn[aria-expanded="true"] .cv-ask-scope-chev { transform: rotate(180deg); }

/* Popup menu — position:fixed (set by JS) so the pill's overflow can't clip it. */
.cv-ask-scope-menu {
    position: fixed; z-index: 2147483002;
    min-width: 220px; max-width: 320px; max-height: 320px; overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    background: rgba(22,19,17,0.96);
    border: 1px solid var(--cv-line);
    box-shadow: 0 1px 0 rgba(255,238,230,0.04) inset, 0 24px 48px -12px rgba(12,9,8,0.6), 0 8px 20px rgba(12,9,8,0.35);
    backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
    animation: cvAskPanelIn 0.16s var(--cv-ease) both;
}
:root .cv-ask-scope-menu { background: rgba(255,255,255,0.98); border-color: rgba(60,42,34,0.1); }
.cv-ask-scope-menu[hidden] { display: none !important; }
.cv-ask-scope-opt {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 8px;
    background: transparent; cursor: pointer; text-align: left;
    color: var(--cv-text-1); font: 500 12.5px/1.2 var(--cv-body);
    transition: background 0.12s var(--cv-ease);
}
.cv-ask-scope-opt:hover { background: rgba(255,238,230,0.06); }
:root .cv-ask-scope-opt { color: #27272a; }
:root .cv-ask-scope-opt:hover { background: rgba(60,42,34,0.05); }
.cv-ask-scope-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-ask-scope-opt-count {
    font: 500 10px/1 var(--cv-mono); color: var(--cv-text-3);
    padding: 2px 7px; border-radius: 100px; border: 1px solid var(--cv-line);
}
.cv-ask-scope-opt-check { width: 15px; height: 15px; color: var(--cv-volt); flex-shrink: 0; opacity: 0; }
.cv-ask-scope-opt[aria-selected="true"] { background: var(--cv-volt-dim); color: var(--cv-text-0); }
.cv-ask-scope-opt[aria-selected="true"] .cv-ask-scope-opt-check { opacity: 1; }
@media (max-width: 560px) { .cv-ask-scope { display: none; } }

/* ── Hint kbd chips ───────────────────────────────────────── */
.cv-ask-kbd {
    font-family: var(--cv-mono); font-size: 10px;
    padding: 2px 6px; border-radius: 5px;
    background: rgba(255,238,230,0.06); color: var(--cv-text-2);
    border: 1px solid var(--cv-line);
}
:root .cv-ask-kbd { background: rgba(60,42,34,0.05); border-color: rgba(60,42,34,0.1); color: #52525b; }

/* ── Inline composer (welcome state): drop the sticky/centered shell ── */
#view-ask .ask-input-bar.cv-ask-composer.cv-ask-composer-inline {
    position: static; padding: 0; background: none; z-index: auto;
}
#view-ask .cv-ask-composer-inline .cv-ask-pill { max-width: none; margin: 0; }
#view-ask .cv-ask-composer-inline .cv-ask-hint { max-width: none; margin: 12px 2px 0; }

/* Welcome state: the composer is inline, so the scroll doesn't need the
   tall bottom reserve that keeps chat messages clear of the sticky composer. */
.cv-ask-scroll.cv-ask-scroll-welcome { padding-bottom: clamp(24px, 4vh, 48px); }

/* Smaller screens */
@media (max-width: 700px) {
    .cv-ask-rail { padding: 8px 14px; }
    #view-ask .ask-input-bar.cv-ask-composer { padding: 10px 14px 14px; }
    #view-ask .ask-msg { margin-bottom: 16px; }
}

/* ================================================================
   Setup Wizard — UI Polish Layer
   ================================================================ */

.setup-wizard {
    background:
        radial-gradient(900px 600px at 20% 10%, color-mix(in oklab, var(--coral) 8%, transparent), transparent 55%),
        radial-gradient(800px 500px at 80% 90%, color-mix(in oklab, var(--brand-orange) 7%, transparent), transparent 60%),
        var(--bg-primary);
    overflow: hidden;
}

/* Faint dotted backdrop, softly masked to a vignette */
.setup-wizard::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,238,230,0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: center;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
    opacity: 0.55;
    pointer-events: none;
    animation: setupBgFade 1.2s ease 0.1s both;
}

@keyframes setupBgFade {
    from { opacity: 0; }
    to   { opacity: 0.55; }
}

/* Two ambient orbital rings around the shell */
.setup-wizard::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    top: 50%;
    left: 50%;
    margin: -350px 0 0 -350px;
    border-radius: 50%;
    border: 1px solid rgba(255,238,230,0.04);
    pointer-events: none;
    animation: setupRingDrift 6s ease-in-out infinite;
    z-index: 0;
}

@keyframes setupRingDrift {
    0%,100% { transform: scale(1);    opacity: 0.6; }
    50%     { transform: scale(1.05); opacity: 0.2; }
}

/* Shell surface — gradient + softer corners + larger lift */
.setup-shell {
    position: relative;
    z-index: 1;
    max-width: 540px;
    padding: 36px 38px 32px;
    gap: 20px;
    background:
        radial-gradient(700px 200px at 50% -50%, rgba(255,238,230,0.04), transparent 60%),
        linear-gradient(180deg, #191512 0%, #100D0B 100%);
    border: 1px solid rgba(255,238,230,0.08);
    box-shadow:
        0 1px 0 rgba(255,238,230,0.05) inset,
        0 32px 100px -20px rgba(12,9,8,0.85),
        0 0 0 1px rgba(255,238,230,0.02);
    animation: setupShellIn 0.6s cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes setupShellIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Staggered entrance for each section */
.setup-shell > * {
    animation: setupFadeUp 0.5s cubic-bezier(0, 0, 0.2, 1) both;
}
.setup-shell > *:nth-child(1) { animation-delay: 0.08s; }
.setup-shell > *:nth-child(2) { animation-delay: 0.14s; }
.setup-shell > *:nth-child(3) { animation-delay: 0.20s; }
.setup-shell > *:nth-child(4) { animation-delay: 0.26s; }
.setup-shell > *:nth-child(5) { animation-delay: 0.32s; }
.setup-shell > *:nth-child(6) { animation-delay: 0.38s; }

@keyframes setupFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Shell highlight ring at the top */
.setup-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,238,230,0.18), transparent);
}

/* Header — tighter bottom so ibar sits close beneath */
.setup-header {
    align-items: center;
    padding-bottom: 0;
}

/* Indeterminate loading bar — same technique as installer splash */
.setup-ibar {
    height: 2px;
    background: rgba(255,238,230,0.06);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    margin-top: -12px;
}

.setup-ibar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 35%;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    border-radius: 2px;
    animation: setupBarSlide 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes setupBarSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(380%); }
}

.setup-logo-wrap {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,238,230,0.11),
        0 4px 16px rgba(12,9,8,0.55);
}

.setup-logo-wrap img {
    width: 36px;
    height: 36px;
}

.setup-title {
    font-size: 19px;
    background: linear-gradient(180deg, var(--ink) 0%, var(--muted) 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.setup-badge {
    background: linear-gradient(180deg, rgba(255,238,230,0.05), rgba(255,238,230,0.02));
    box-shadow: 0 1px 0 rgba(255,238,230,0.04) inset;
}

/* Hero — bigger gradient title */
.setup-hero-heading {
    font-size: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #c0c0c8 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1.15;
}

.setup-hero-sub {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Progress track — thicker, gradient fill, glow */
.setup-progress-track {
    height: 5px;
    background: rgba(255,238,230,0.05);
    box-shadow: inset 0 1px 0 rgba(12,9,8,0.4);
    border-radius: 100px;
    position: relative;
    overflow: hidden;
}

.setup-progress-fill {
    background: linear-gradient(90deg, var(--copy) 0%, var(--ink) 60%, var(--copy) 100%);
    box-shadow: 0 0 12px rgba(255,238,230,0.18);
    position: relative;
    overflow: hidden;
}

.setup-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,238,230,0.5), transparent);
    transform: translateX(-100%);
    animation: setupShimmer 1.8s ease-in-out infinite;
}

@keyframes setupShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(120%);  }
}

/* Service cards — gradient surface, lift on hover */
.setup-card {
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(255,238,230,0.022) 0%, rgba(255,238,230,0.008) 100%);
    border: 1px solid var(--border);
    box-shadow:
        0 1px 0 rgba(255,238,230,0.025) inset,
        0 1px 2px rgba(60,42,34,0.3);
    overflow: hidden;
    position: relative;
}

/* Hover light sweep */
.setup-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(180px 100px at 0% 0%, rgba(255,238,230,0.05), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}
.setup-card:hover::after { opacity: 1; }

/* Pending shimmer line */
.setup-step.pending.setup-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,238,230,0.25), transparent);
    animation: setupCardShine 1.8s ease-in-out infinite;
}

@keyframes setupCardShine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%);  }
}

/* OK card — soft green glow */
.setup-step.ok.setup-card {
    border-color: color-mix(in oklab, var(--ok) 32%, transparent);
    box-shadow:
        0 1px 0 color-mix(in oklab, var(--ok) 6%, transparent) inset,
        0 0 0 1px color-mix(in oklab, var(--ok) 6%, transparent),
        0 8px 24px -10px color-mix(in oklab, var(--ok) 18%, transparent);
}

/* Warn card — soft red glow */
.setup-step.warn.setup-card {
    border-color: rgba(248, 113, 113, 0.32);
    box-shadow:
        0 1px 0 rgba(248,113,113,0.06) inset,
        0 0 0 1px rgba(248,113,113,0.06),
        0 8px 24px -10px rgba(248,113,113,0.16);
}

/* Card icon box */
.setup-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,238,230,0.04), rgba(255,238,230,0.015));
    box-shadow:
        0 1px 0 rgba(255,238,230,0.05) inset,
        0 4px 10px rgba(12,9,8,0.35);
}

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

/* Card name + desc readability */
.setup-card-name {
    font-size: 13.5px;
    letter-spacing: -0.01em;
}

.setup-card-desc {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* State dot — outer ring + ripple when pending */
.setup-card-state {
    position: relative;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-card-dot {
    width: 8px;
    height: 8px;
}

.setup-step.pending .setup-card-state::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,238,230,0.18);
    animation: setupRipple 1.8s ease-out infinite;
}

.setup-step.ok .setup-card-state::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: color-mix(in oklab, var(--ok) 12%, transparent);
}

.setup-step.warn .setup-card-state::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(248,113,113,0.12);
}

@keyframes setupRipple {
    0%   { transform: scale(0.6); opacity: 1;   }
    100% { transform: scale(1.6); opacity: 0;   }
}

/* Footer — separator + arranged layout */
.setup-footer {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
    gap: 12px;
    position: relative;
}

.setup-status-text {
    font-size: 12.5px;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.setup-status-text::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    margin-right: 8px;
    margin-bottom: 1px;
    box-shadow: 0 0 0 0 rgba(255,238,230,0.4);
    animation: setupStatusDot 1.8s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes setupStatusDot {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,238,230,0.3); opacity: 0.4; }
    50%     { box-shadow: 0 0 0 6px rgba(255,238,230,0); opacity: 1;   }
}

/* Skip / continue button — refined primary look */
.setup-skip-btn {
    padding: 10px 22px;
    background: linear-gradient(180deg, #ffffff 0%, #e7e7ec 100%);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255,238,230,0.6) inset,
        0 6px 18px -6px rgba(255,238,230,0.18),
        0 1px 2px rgba(12,9,8,0.4);
    transition: all 0.18s var(--ease);
    position: relative;
    overflow: hidden;
}

.setup-skip-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,238,230,0.7) inset,
        0 10px 28px -8px rgba(255,238,230,0.28),
        0 2px 6px rgba(12,9,8,0.5);
}

.setup-skip-btn:active {
    transform: translateY(0);
    transition-duration: 0.08s;
}

.setup-skip-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,238,230,0.45) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease);
    pointer-events: none;
}
.setup-skip-btn:hover::before { transform: translateX(100%); }

/* Embed model area refinement */
.setup-embed-heading {
    font-size: 13.5px;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

/* ================================================================
   Noir Vibe — premium dark monochrome theme
   ================================================================ */

/* Noir now inherits the core scale wholesale. It used to re-declare a cool
   monochrome set here (white accent, violet bias, blue-black grounds), which
   would have overridden the warm palette on every surface — data-vibe="noir"
   is hardcoded on <html>, so this block always wins over :root. */
[data-vibe="noir"] {
  --cv-bg-0: var(--paper);
  --cv-bg-1: var(--surface);
  --cv-bg-2: var(--sunk);
  --cv-bg-3: var(--sunk);
  --cv-bg-4: #EDE6E1;

  --cv-volt:      var(--coral);
  --cv-volt-2:    #D8451F;
  --cv-volt-dim:  var(--coral-soft);
  --cv-volt-glow: rgba(242,84,45,.18);
  --cv-plasma:    var(--coral);

  --cv-line:   var(--rule);
  --cv-line-2: var(--rule-strong);
}

/* Ambient backdrop lives in the polish pass further down (search
   "Ambient ground"), so there is one rule for it rather than two competing
   copies at equal specificity. */

[data-vibe="noir"] #app.app-container {
  background: transparent;
  position: relative;
}

/* Dotted grid + a faint orbital ring (echoes setup-wizard::after) */
[data-vibe="noir"] #app.app-container::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(255,238,230,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 28%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 28%, #000 0%, transparent 72%);
  opacity: 0.55;
}


/* Topbar — frosted floating bar with installer-style highlight ring */
[data-vibe="noir"] .cv-topbar {
  /* Near-opaque solid fill (no glassy blur) so the bar reads as a clean island
     even when content scrolls under it — matches the capture page. */
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 97%, transparent), color-mix(in oklab, var(--paper) 97%, transparent));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255,238,230,0.07);
  box-shadow:
    0 1px 0 rgba(255,238,230,0.05) inset,
    0 8px 32px -16px rgba(12,9,8,0.6);
  position: relative;
}

[data-vibe="noir"] .cv-topbar::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,238,230,0.18), transparent);
  pointer-events: none;
}

[data-vibe="noir"] .cv-breadcrumb b {
  background: linear-gradient(180deg, var(--ink) 0%, var(--muted) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* Quick Capture button — carries contextmove.com's hero CTA gradient, the one
   place on the site that spends .bg-brand-gradient. */
[data-vibe="noir"] .cv-primary {
  background: var(--brand-gradient);
  color: #ffffff;
  border-color: rgba(216,90,45,0.55);
  box-shadow:
    0 1px 0 rgba(255,238,230,0.28) inset,
    0 6px 18px -6px rgba(255,107,74,0.4),
    0 1px 2px rgba(12,9,8,0.4);
  position: relative;
  overflow: hidden;
}

[data-vibe="noir"] .cv-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,238,230,0.32) inset,
    0 10px 28px -8px var(--cv-volt-glow),
    0 2px 6px rgba(12,9,8,0.5);
}

[data-vibe="noir"] .cv-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,238,230,0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
[data-vibe="noir"] .cv-primary:hover::before { transform: translateX(100%); }

/* Hero — gradient title, refined eyebrow */
[data-vibe="noir"] .cv-hero {
  border-bottom-color: rgba(255,238,230,0.06);
  position: relative;
}

[data-vibe="noir"] .cv-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 80px;
  background: linear-gradient(90deg, rgba(255,238,230,0.5), transparent);
}

/* Solid ink, not a fade-to-grey clip: the old white→grey ramp thinned the
   glyphs to nothing at the baseline. */
[data-vibe="noir"] .cv-hero h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
  letter-spacing: -0.045em;
}

[data-vibe="noir"] .cv-hero h1 .voltword,
[data-vibe="noir"] .voltword {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-vibe="noir"] .cv-hero h1 .voltword::after {
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--coral) 85%, transparent), transparent);
  box-shadow: 0 0 12px var(--cv-volt-glow);
}

/* Stats — premium gradient cards mirroring setup-shell finish */
[data-vibe="noir"] .cv-stat {
  background:
    radial-gradient(420px 120px at 50% -40%, rgba(255,238,230,0.06), transparent 70%),
    radial-gradient(300px 200px at 100% 100%, color-mix(in oklab, var(--coral) 7%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,238,230,0.028) 0%, rgba(255,238,230,0.008) 100%);
  border: 1px solid rgba(255,238,230,0.08);
  box-shadow:
    0 1px 0 rgba(255,238,230,0.05) inset,
    0 1px 2px rgba(12,9,8,0.35),
    0 20px 48px -22px rgba(12,9,8,0.75),
    0 0 0 1px rgba(255,238,230,0.02);
  transition: border-color 0.25s, transform 0.18s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}

/* Top highlight line — same trick as setup-shell::before */
[data-vibe="noir"] .cv-stat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,238,230,0.22), transparent);
  pointer-events: none;
  opacity: 0.7;
}

[data-vibe="noir"] .cv-stat:hover {
  border-color: rgba(255,238,230,0.16);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,238,230,0.07) inset,
    0 1px 2px rgba(12,9,8,0.4),
    0 28px 56px -22px rgba(12,9,8,0.85),
    0 0 0 1px rgba(255,238,230,0.05);
}

[data-vibe="noir"] .cv-stat:hover::after { opacity: 1; }

[data-vibe="noir"] .cv-stat::before {
  background: radial-gradient(600px 200px at var(--mx,50%) var(--my,0%), rgba(255,238,230,0.07), transparent 60%);
}

[data-vibe="noir"] .cv-stat .k {
  color: rgba(255,238,230,0.5);
  letter-spacing: 0.14em;
  font-size: 10px;
}

[data-vibe="noir"] .cv-stat .k .dot,
[data-vibe="noir"] .cv-stat:nth-child(1) .k .dot,
[data-vibe="noir"] .cv-stat:nth-child(2) .k .dot,
[data-vibe="noir"] .cv-stat:nth-child(3) .k .dot,
[data-vibe="noir"] .cv-stat:nth-child(4) .k .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,238,230,0.85);
  box-shadow:
    0 0 0 2px rgba(255,238,230,0.06),
    0 0 10px rgba(255,238,230,0.25);
}

[data-vibe="noir"] .cv-stat .v {
  background: linear-gradient(180deg, var(--ink) 0%, var(--muted) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
  letter-spacing: -0.035em;
}

[data-vibe="noir"] .cv-stat .v .unit {
  -webkit-text-fill-color: rgba(255,238,230,0.4);
  color: rgba(255,238,230,0.4);
  background: none;
}

[data-vibe="noir"] .cv-stat .meta {
  color: rgba(255,238,230,0.38);
  border-top: 1px solid rgba(255,238,230,0.05);
  padding-top: 10px;
  margin-top: 14px;
}

/* Section header */
[data-vibe="noir"] .cv-sec-title {
  background: linear-gradient(180deg, var(--ink) 0%, var(--muted) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-vibe="noir"] .cv-sec-title .idx {
  background: rgba(255,238,230,0.04);
  border-color: rgba(255,238,230,0.08);
  color: rgba(255,238,230,0.5);
  box-shadow: 0 1px 0 rgba(255,238,230,0.04) inset;
}

/* Chips */
[data-vibe="noir"] .cv-chip {
  background: linear-gradient(180deg, rgba(255,238,230,0.025), rgba(255,238,230,0.01));
  border-color: rgba(255,238,230,0.07);
  color: rgba(255,238,230,0.65);
  box-shadow: 0 1px 0 rgba(255,238,230,0.04) inset;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-vibe="noir"] .cv-chip:hover {
  border-color: rgba(255,238,230,0.16);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,238,230,0.05) inset,
    0 4px 12px rgba(12,9,8,0.4);
}

[data-vibe="noir"] .cv-chip.on {
  background: linear-gradient(180deg, #2E2825 0%, #201C19 100%);
  border-color: rgba(255,238,230,0.18);
  color: #ffffff;
  box-shadow:
    0 1px 0 rgba(255,238,230,0.06) inset,
    0 4px 12px rgba(12,9,8,0.4);
}

/* Recent cards — installer-grade glass surface with corner light */
[data-vibe="noir"] .cv-recent-grid > article,
[data-vibe="noir"] .cv-recent-grid > .ctx-card,
[data-vibe="noir"] .cv-recent-grid > .cv-card {
  background:
    radial-gradient(360px 120px at 0% 0%, rgba(255,238,230,0.05), transparent 60%),
    radial-gradient(280px 200px at 100% 100%, color-mix(in oklab, var(--coral) 7%, transparent), transparent 65%),
    linear-gradient(180deg, rgba(255,238,230,0.028) 0%, rgba(255,238,230,0.008) 100%);
  border: 1px solid rgba(255,238,230,0.08);
  box-shadow:
    0 1px 0 rgba(255,238,230,0.05) inset,
    0 1px 2px rgba(12,9,8,0.35),
    0 18px 44px -22px rgba(12,9,8,0.78),
    0 0 0 1px rgba(255,238,230,0.02);
  transition: border-color 0.22s, transform 0.18s, box-shadow 0.22s;
  position: relative;
  overflow: hidden;
}

[data-vibe="noir"] .cv-recent-grid > article::before,
[data-vibe="noir"] .cv-recent-grid > .ctx-card::before,
[data-vibe="noir"] .cv-recent-grid > .cv-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,238,230,0.2), transparent);
  pointer-events: none;
  opacity: 0.65;
  z-index: 1;
}

[data-vibe="noir"] .cv-recent-grid > article:hover,
[data-vibe="noir"] .cv-recent-grid > .ctx-card:hover,
[data-vibe="noir"] .cv-recent-grid > .cv-card:hover {
  border-color: rgba(255,238,230,0.16);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,238,230,0.07) inset,
    0 26px 56px -22px rgba(12,9,8,0.9),
    0 0 0 1px rgba(255,238,230,0.05);
}

[data-vibe="noir"] .cv-recent-grid > article:hover::before,
[data-vibe="noir"] .cv-recent-grid > .ctx-card:hover::before,
[data-vibe="noir"] .cv-recent-grid > .cv-card:hover::before { opacity: 1; }

/* Empty state */
[data-vibe="noir"] .cv-empty-state {
  border: 1px dashed rgba(255,238,230,0.1);
  background:
    radial-gradient(400px 120px at 50% 0%, rgba(255,238,230,0.02), transparent 60%);
  color: rgba(255,238,230,0.45);
}

/* Pipeline panel (when summarizing) — full setup-shell finish */
[data-vibe="noir"] .cv-pipeline {
  background:
    radial-gradient(720px 200px at 50% -45%, rgba(255,238,230,0.05), transparent 60%),
    radial-gradient(500px 300px at 90% 110%, color-mix(in oklab, var(--coral) 8%, transparent), transparent 65%),
    linear-gradient(180deg, rgba(255,238,230,0.028), rgba(255,238,230,0.006));
  border: 1px solid rgba(255,238,230,0.08);
  box-shadow:
    0 1px 0 rgba(255,238,230,0.05) inset,
    0 24px 64px -24px rgba(12,9,8,0.8),
    0 0 0 1px rgba(255,238,230,0.02);
  position: relative;
}

[data-vibe="noir"] .cv-pipeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,238,230,0.22), transparent);
  pointer-events: none;
}

[data-vibe="noir"] .cv-pipe-step .bar i {
  background: linear-gradient(90deg, var(--copy) 0%, var(--ink) 60%, var(--copy) 100%);
  box-shadow: 0 0 12px rgba(255,238,230,0.18);
}

/* ================================================================
   Noir — Premium polish pass
   Adds: violet accent token, type hierarchy tokens, grain layer,
   slow ambient drift, accent applied to nav/focus/eyebrow,
   stronger violet commitment on ambient washes.
   ================================================================ */

[data-vibe="noir"] {
  --cv-accent:      var(--coral);
  --cv-accent-soft: var(--coral-soft);
  --cv-accent-glow: rgba(255,122,82,.35);

  --cv-text-hi:  var(--ink);
  --cv-text:     var(--ink);
  --cv-text-mid: var(--muted);
  --cv-text-low: var(--faint);

  --cv-shadow-card:
    0 1px 0 rgba(255,238,230,0.06) inset,
    0 2px 4px rgba(12,9,8,0.4),
    0 24px 48px -16px rgba(12,9,8,0.6);
  --cv-shadow-card-hover:
    0 1px 0 rgba(255,238,230,0.08) inset,
    0 2px 6px rgba(12,9,8,0.5),
    0 32px 64px -18px rgba(12,9,8,0.75),
    0 0 0 1px rgba(255,238,230,0.04);
}

/* Ambient ground. This used to paint blue/violet washes over a cool blue-black
   base (#0c0c12 -> #06060a), which is the rule that actually reached the screen —
   it is later in source than the warm rule above at the same specificity. That
   single declaration is why the dark page read cool while every surface on top
   of it read warm brown-black.
   It now uses the same recipe as the light splash: the coral/brand-orange pair
   over --paper, so both themes are lit by the same two brand washes and only the
   ground flips. The 280s drift is kept — it is the one thing this block got right. */
[data-vibe="noir"] .cv-ambient {
  background:
    radial-gradient(1200px 760px at 18% 6%, color-mix(in oklab, var(--coral) 9%, transparent) 0%, transparent 55%),
    radial-gradient(1000px 680px at 84% 96%, color-mix(in oklab, var(--brand-orange) 7%, transparent) 0%, transparent 60%),
    radial-gradient(720px 520px at 50% 50%, rgba(255,238,230,0.03) 0%, transparent 70%),
    linear-gradient(180deg, #1B1714 0%, var(--paper) 58%, #120F0E 100%);
  background-size: 140% 140%, 140% 140%, 100% 100%, 100% 100%;
  animation: cv-noir-drift 280s ease-in-out infinite;
  filter: none;
}

@keyframes cv-noir-drift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%, 0 0; }
  50%      { background-position: 6% 4%, 94% 96%, 50% 50%, 0 0; }
}

/* Activate grain — SVG noise, very subtle */
[data-vibe="noir"] .cv-grain {
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* Active nav: violet left bar instead of monochrome */
[data-vibe="noir"] .nav-item.cv-nav.active::before,
[data-vibe="noir"] .nav-item.cv-nav.on::before {
  background: linear-gradient(180deg, transparent, var(--cv-accent), transparent);
  box-shadow: 0 0 10px var(--cv-accent-glow);
}
[data-vibe="noir"] .nav-item.cv-nav.active .cv-nav-ic,
[data-vibe="noir"] .nav-item.cv-nav.on .cv-nav-ic {
  color: var(--cv-accent);
}

/* Focus ring — single accent for keyboard navigation */
[data-vibe="noir"] :focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 4px var(--coral);
  border-radius: 8px;
}

/* Type hierarchy — apply tokens where ad-hoc opacities were used */
[data-vibe="noir"] .cv-stat .k     { color: var(--cv-text-mid); }
[data-vibe="noir"] .cv-stat .meta  { color: var(--cv-text-low); }
[data-vibe="noir"] .cv-hero-date    { color: var(--cv-text-mid); }
[data-vibe="noir"] .cv-empty-state  { color: var(--cv-text-low); }
[data-vibe="noir"] .cv-chip         { color: var(--cv-text); }

/* Layered shadow upgrade on the major surfaces */
[data-vibe="noir"] .cv-stat,
[data-vibe="noir"] .cv-recent-grid > article,
[data-vibe="noir"] .cv-recent-grid > .ctx-card,
[data-vibe="noir"] .cv-recent-grid > .cv-card {
  box-shadow: var(--cv-shadow-card);
}
[data-vibe="noir"] .cv-stat:hover,
[data-vibe="noir"] .cv-recent-grid > article:hover,
[data-vibe="noir"] .cv-recent-grid > .ctx-card:hover,
[data-vibe="noir"] .cv-recent-grid > .cv-card:hover {
  box-shadow: var(--cv-shadow-card-hover);
}

/* ================================================================
   Noir vibe + Light mode
   Noir uses all-white gradients, rgba(255,255,255,x) backgrounds,
   and white glow effects — every one of those is invisible on a
   white surface. We flip the palette to a clean monochrome:
   charcoal for accents, white cards, subtle dark borders.
   ================================================================ */

/* Coral accent on warm paper. This block previously forced a near-black
   accent for light mode; with a real accent hue in the palette the accent
   stays the accent in both themes. */
/* Ambient: subtle cool washes, no dark base */
:root[data-vibe="noir"] .cv-ambient {
  background:
    radial-gradient(1100px 700px at 18% 8%, rgba(242,84,45,0.035) 0%, transparent 55%),
    radial-gradient(900px 600px at 82% 92%, rgba(160,120,100,0.03) 0%, transparent 60%);
  filter: none;
}

/* Dot grid: flip white dots to very subtle dark */
:root[data-vibe="noir"] #app.app-container::before {
  background-image: radial-gradient(circle, rgba(60,42,34,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
  opacity: 0.55;
}

/* Topbar */
:root[data-vibe="noir"] .cv-topbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.98));
  border-bottom-color: rgba(60,42,34,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* Breadcrumb bold text */
:root[data-vibe="noir"] .cv-breadcrumb b {
  background: linear-gradient(180deg, #111113 0%, #52525b 120%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}


/* Primary button — same brand gradient in light. */
:root[data-vibe="noir"] .cv-primary {
  background: var(--brand-gradient);
  color: #ffffff;
  border-color: rgba(216,90,45,0.55);
  box-shadow: 0 1px 0 rgba(255,238,230,0.22) inset, 0 4px 16px -6px rgba(255,107,74,0.4);
}
:root[data-vibe="noir"] .cv-primary:hover {
  box-shadow: 0 1px 0 rgba(255,238,230,0.22) inset, 0 10px 28px -6px rgba(255,107,74,0.45);
}
:root[data-vibe="noir"] .cv-primary::before {
  background: linear-gradient(120deg, transparent 30%, rgba(255,238,230,0.15) 50%, transparent 70%);
}

/* Hero border + accent line */
:root[data-vibe="noir"] .cv-hero { border-bottom-color: rgba(60,42,34,0.08); }
:root[data-vibe="noir"] .cv-hero::after {
  background: linear-gradient(90deg, rgba(60,42,34,0.25), transparent);
}

/* Hero h1 */
:root[data-vibe="noir"] .cv-hero h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}

/* Voltword: dark monochrome */
:root[data-vibe="noir"] .cv-hero h1 .voltword,
:root[data-vibe="noir"] .voltword {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
:root[data-vibe="noir"] .cv-hero h1 .voltword::after,
:root[data-vibe="noir"] .cv-capture-title .voltword::after {
  background: linear-gradient(90deg, transparent, rgba(60,42,34,0.3) 20%, rgba(60,42,34,0.3) 80%, transparent);
}

/* Stat cards */
:root[data-vibe="noir"] .cv-stat {
  background: #ffffff;
  border: 1px solid rgba(60,42,34,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 3px rgba(60,42,34,0.05), 0 10px 28px -14px rgba(60,42,34,0.12);
}
:root[data-vibe="noir"] .cv-stat:hover {
  border-color: rgba(60,42,34,0.16);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 2px 8px rgba(60,42,34,0.07), 0 18px 40px -16px rgba(60,42,34,0.16);
}
:root[data-vibe="noir"] .cv-stat::before {
  background: radial-gradient(600px 200px at var(--mx,50%) var(--my,0%), rgba(60,42,34,0.04), transparent 60%);
}

/* Stat labels & dots */
:root[data-vibe="noir"] .cv-stat .k { color: #a1a1aa; letter-spacing: 0.12em; font-size: 10.5px; }
:root[data-vibe="noir"] .cv-stat .k .dot,
:root[data-vibe="noir"] .cv-stat:nth-child(1) .k .dot,
:root[data-vibe="noir"] .cv-stat:nth-child(2) .k .dot,
:root[data-vibe="noir"] .cv-stat:nth-child(3) .k .dot,
:root[data-vibe="noir"] .cv-stat:nth-child(4) .k .dot {
  background: #71717a;
  box-shadow: 0 0 0 2px rgba(60,42,34,0.04), 0 0 6px rgba(60,42,34,0.1);
}

/* Stat value */
:root[data-vibe="noir"] .cv-stat .v {
  background: linear-gradient(180deg, #111113 0%, #52525b 120%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
:root[data-vibe="noir"] .cv-stat .v .unit {
  -webkit-text-fill-color: #a1a1aa; color: #a1a1aa; background: none;
}
:root[data-vibe="noir"] .cv-stat .meta { color: #a1a1aa; border-top-color: rgba(60,42,34,0.06); }

/* Section title */
:root[data-vibe="noir"] .cv-sec-title {
  background: linear-gradient(180deg, #111113 0%, #52525b 120%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
:root[data-vibe="noir"] .cv-sec-title .idx {
  background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.08);
  color: #71717a; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* Chips */
:root[data-vibe="noir"] .cv-chip {
  background: linear-gradient(180deg, #ffffff, #f7f7f8);
  border-color: rgba(60,42,34,0.09); color: #52525b;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
:root[data-vibe="noir"] .cv-chip:hover {
  border-color: rgba(60,42,34,0.18); color: #111113;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 3px 10px rgba(60,42,34,0.08);
}
:root[data-vibe="noir"] .cv-chip.on {
  background: linear-gradient(180deg, #27272a, #18181b);
  border-color: rgba(60,42,34,0.3); color: #ffffff;
  box-shadow: 0 1px 0 rgba(255,238,230,0.06) inset, 0 3px 10px rgba(60,42,34,0.2);
}

/* Active nav icon */
:root[data-vibe="noir"] .nav-item.cv-nav.active .cv-nav-ic { color: #27272a; }

/* Side icon btn */
:root[data-vibe="noir"] .cv-side-iconbtn:hover {
  color: #27272a; border-color: rgba(39,39,42,0.25); background: rgba(39,39,42,0.06);
}

/* Recent grid cards */
:root[data-vibe="noir"] .cv-recent-grid > article,
:root[data-vibe="noir"] .cv-recent-grid > .ctx-card,
:root[data-vibe="noir"] .cv-recent-grid > .cv-card {
  background: #ffffff;
  border: 1px solid rgba(60,42,34,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 3px rgba(60,42,34,0.05), 0 8px 24px -12px rgba(60,42,34,0.1);
}
:root[data-vibe="noir"] .cv-recent-grid > article:hover,
:root[data-vibe="noir"] .cv-recent-grid > .ctx-card:hover,
:root[data-vibe="noir"] .cv-recent-grid > .cv-card:hover {
  border-color: rgba(60,42,34,0.16);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 8px 24px rgba(60,42,34,0.09);
}

/* Empty state */
:root[data-vibe="noir"] .cv-empty-state {
  border-color: rgba(60,42,34,0.1);
  background: radial-gradient(400px 120px at 50% 0%, rgba(60,42,34,0.02), transparent 60%);
  color: #71717a;
}

/* Pipeline */
:root[data-vibe="noir"] .cv-pipeline {
  background: #ffffff;
  border: 1px solid rgba(60,42,34,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 4px 20px -8px rgba(60,42,34,0.08);
}
:root[data-vibe="noir"] .cv-pipe-status {
  color: #27272a;
  background: rgba(39,39,42,0.07);
  border-color: rgba(39,39,42,0.18);
}
:root[data-vibe="noir"] .cv-pipe-status::before {
  background: #27272a; box-shadow: none; animation: cv-blink 1.2s infinite;
}
:root[data-vibe="noir"] .summarize-progress-fill {
  background: linear-gradient(90deg, #71717a, #27272a); box-shadow: none;
}
:root[data-vibe="noir"] .cv-pipe-step .bar i {
  background: linear-gradient(90deg, #a1a1aa 0%, #27272a 60%, #a1a1aa 100%);
  box-shadow: 0 0 8px rgba(60,42,34,0.15);
}

/* Capture orb */
:root[data-vibe="noir"] .cv-capture-orb {
  border-color: rgba(39,39,42,0.2);
  box-shadow: 0 0 32px rgba(39,39,42,0.1);
  color: #27272a;
}

/* Card and popover elevation. Light UIs read premium through shadow rather
   than heavy borders, so these stay soft and layered; they are warmed to sit
   on paper instead of cool grey. Declared here rather than in the core-scale
   block above because the polish pass further down overrides them again. */
:root {
  --cv-shadow-card:
    0 1px 2px rgba(60,42,34,0.04),
    0 6px 16px -8px rgba(60,42,34,0.08);
  --cv-shadow-card-hover:
    0 2px 6px rgba(60,42,34,0.06),
    0 14px 30px -10px rgba(60,42,34,0.14);
}

/* ════════════════════════════════════════════════════════════════════
   LIGHT MODE — premium surface system
   The token flip handles colors; this gives light mode its polish:
   white surfaces lifted by soft layered shadows + cool hairlines, crisp
   floating popovers, and clean inputs. Some selectors are matched at
   :root[data-vibe="noir"] specificity because the dark
   noir rules would otherwise win (vibe is always noir).
   ════════════════════════════════════════════════════════════════════ */

/* Sidebar — flat panel, hairline divider */
:root .sidebar.cv-side {
  background: var(--cv-bg-1);
  border-right-color: var(--cv-line);
}

/* Topbar — near-opaque white island with a faint lift for separation */
:root[data-vibe="noir"] .cv-topbar {
  background: rgba(253,253,255,0.97);
  border-color: var(--cv-line);
  box-shadow: 0 1px 2px rgba(60,42,34,0.03), 0 6px 20px -10px rgba(60,42,34,0.10);
}

/* Content cards & panels — white, hairline, soft elevation */
:root .cv-card,
:root .cv-pipeline,
:root .cv-action,
:root .cv-aside-card,
:root .cv-block-pinned,
:root .cv-block-prompt {
  background: var(--cv-surface);
  border: 1px solid var(--cv-line);
  box-shadow: var(--cv-shadow-card);
}
:root .cv-card:hover,
:root .cv-action:hover {
  border-color: var(--cv-line-2);
  box-shadow: var(--cv-shadow-card-hover);
}

/* Floating popovers & menus — crisp white, stronger soft drop shadow */
:root .cv-status-menu,
:root .cv-export-menu,
:root .cv-sort-menu,
:root .cv-ask-scope-menu,
:root .cv-notify-panel,
:root .cv-ask-history-panel,
:root .cv-onboard-card,
:root .cv-bulk-pill {
  background: #ffffff;
  border: 1px solid var(--cv-line);
  box-shadow:
    0 4px 12px rgba(60,42,34,0.07),
    0 20px 48px -12px rgba(60,42,34,0.18);
}

/* Inputs — clean inset fill, accent focus ring */
:root .ask-msg-edit-input { background: var(--cv-inset); }
:root .cv-search-pill:focus-within,
:root .cv-ask-pill:focus-within,
:root .search-box:focus-within {
  background: #ffffff;
  border-color: color-mix(in oklab, var(--cv-volt) 45%, var(--cv-line-2));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cv-volt) 12%, transparent);
}

/* Hover states that bumped icons toward white now bump toward dark */
:root .nav-item.cv-nav:hover .cv-nav-ic { color: #111113; }
:root .cv-util:hover .cv-util-ic { color: #111113; }
:root .input-hero:hover .hero-icon {
  border-color: rgba(60,42,34,0.22);
  background: rgba(60,42,34,0.04);
}
:root .input-hero:hover .hero-icon svg {
  opacity: 1;
  color: #111113;
}
:root .stat-card:hover .stat-icon {
  background: rgba(242,84,45,0.12);
  color: #4f46e5;
}
:root .settings-model-card:hover .settings-dl-icon {
  color: #2e2e33;
}
:root .nav-item:hover .nav-icon { opacity: 1; color: #111113; }
:root .btn-deep-search:hover { color: #111113; }
:root .system-tab:hover { color: #2e2e33; }
:root .cv-view-seg button:hover:not(.on) { color: #2e2e33; }
:root .cv-select-mode-btn:hover { color: #111113; border-color: rgba(60,42,34,0.22); }
:root .cv-sort-btn:hover { color: #111113; border-color: rgba(60,42,34,0.22); }
:root .cv-active-clear:hover { color: #111113; border-color: rgba(0,0,0,0.35); }
:root .cv-lib-tags .tag-chip:hover { color: #111113; border-color: rgba(60,42,34,0.22); }
:root .cv-back:hover { color: #111113; }
:root .cv-cmdk:hover { color: #111113; }

/* LLM / model badges — green text on translucent green is invisible
   on a white card. Deepen the green and strengthen the surface. */
:root .settings-model-badge {
  background: rgba(5,150,105,0.12);
  color: #047857;
  border-color: rgba(5,150,105,0.32);
}
:root .settings-installed-badge {
  background: rgba(5,150,105,0.1);
  color: #047857;
  border-color: rgba(5,150,105,0.3);
}
:root .settings-not-installed-badge {
  color: #52525b;
  border-color: rgba(60,42,34,0.18);
}

/* Vibe-specific badge tinting so the accent stays consistent */
:root[data-vibe="noir"] .settings-model-badge,
:root[data-vibe="noir"] .settings-installed-badge {
  background: rgba(39,39,42,0.08);
  color: #27272a;
  border-color: rgba(39,39,42,0.25);
}

/* ================================================================
   Library card flaws in light mode
   ================================================================ */

/* Star + delete buttons on cv-card — were near-black pills which are
   conspicuous on white; flip to white pills with a dark border.
   The icon glyph still inherits --cv-text-3 (now zinc-500). */
:root .cv-card-star,
:root .cv-card-del {
  background: rgba(255,255,255,0.95);
  border-color: rgba(60,42,34,0.12);
  color: #52525b;
  box-shadow: 0 1px 2px rgba(60,42,34,0.06);
}
:root .cv-card-star:hover {
  color: var(--cv-volt);
  background: #ffffff;
  border-color: color-mix(in oklab, var(--cv-volt) 50%, transparent);
}
:root .cv-card-star.on {
  color: var(--cv-volt);
  background: #ffffff;
  border-color: color-mix(in oklab, var(--cv-volt) 50%, transparent);
}
:root .cv-card-del:hover {
  color: #dc2626 !important;
  background: rgba(220,38,38,0.08) !important;
  border-color: rgba(220,38,38,0.45) !important;
}

/* (The Grok badge needed a light-mode override because its brand colour was
   near-white and vanished on a white card. Badges carry no brand colour now —
   they're set in --muted and distinguished by typeface — so the whole class of
   "this brand's colour is illegible on this surface" bug is gone with it.) */
:root .cv-card-ai[data-ai="Grok"] .cv-card-ai-dot {
  background: #3f3f46 !important;
  box-shadow: 0 0 6px rgba(63,63,70,0.35) !important;
}

/* Generic "Context" pill on light cards: was rgba white-on-white */
:root .cv-card-ai-generic {
  color: #52525b;
  background: rgba(60,42,34,0.04);
  border-color: rgba(60,42,34,0.1);
}
:root .cv-card-ai-generic .cv-card-ai-dot {
  background: #52525b;
}

/* Capture chip ("Extension"/"Paste"/"Import") — too faint at #71717a */
:root .cv-card-capture {
  color: #3f3f46;
  background: rgba(60,42,34,0.05);
  border-color: rgba(60,42,34,0.12);
}

/* Library card body text — preview, tags, footer meta — keep readable */
:root .cv-card-preview {
  background: #fafafb;
  border-color: rgba(60,42,34,0.08);
  color: #27272a;
}
:root .cv-card .cv-card-meta,
:root .cv-card .cv-card-foot,
:root .cv-card .cv-card-time,
:root .cv-card .cv-card-stat {
  color: #52525b;
}
:root .cv-card .cv-card-title {
  color: #111113;
}
:root .cv-card .cv-card-tags .tag-chip,
:root .cv-card .tag-chip {
  color: #3f3f46;
  background: rgba(60,42,34,0.04);
  border-color: rgba(60,42,34,0.1);
}

/* Live "summarizing"/"failed" pill — make sure noir/space variants are
   not stuck on volt-orange when those vibes don't use it */
:root[data-vibe="noir"] .cv-card-live {
  color: #27272a;
  border-color: rgba(39,39,42,0.35);
  background: rgba(255,255,255,0.92);
}


/* ─── Onboarding Tour ──────────────────────────────────────────────── */
.cv-onboard {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.28s ease;
}
.cv-onboard.is-open {
    display: block;
    opacity: 1;
}
.cv-onboard-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}
#cv-onboard-hole,
#cv-onboard-ring {
    transition: x 0.32s cubic-bezier(.22,.9,.32,1),
                y 0.32s cubic-bezier(.22,.9,.32,1),
                width 0.32s cubic-bezier(.22,.9,.32,1),
                height 0.32s cubic-bezier(.22,.9,.32,1);
}
#cv-onboard-ring {
    filter: drop-shadow(0 0 14px rgba(255,238,230,0.35));
    animation: cvOnboardRingPulse 2.4s ease-in-out infinite;
}
@keyframes cvOnboardRingPulse {
    0%, 100% { stroke-opacity: 0.55; }
    50% { stroke-opacity: 1; }
}

.cv-onboard-card {
    position: absolute;
    width: min(380px, calc(100vw - 32px));
    background: linear-gradient(180deg, rgba(29,26,23,0.98) 0%, rgba(20,17,15,0.98) 100%);
    border: 1px solid rgba(255,238,230,0.12);
    border-radius: 16px;
    padding: 18px 20px 16px;
    color: var(--ink);
    box-shadow:
        0 24px 60px -12px rgba(12,9,8,0.7),
        0 0 0 1px rgba(255,238,230,0.04) inset,
        0 0 40px var(--cv-volt-glow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: top 0.32s cubic-bezier(.22,.9,.32,1),
                left 0.32s cubic-bezier(.22,.9,.32,1),
                opacity 0.2s ease,
                transform 0.32s cubic-bezier(.22,.9,.32,1);
    font-family: 'DM Sans', system-ui, sans-serif;
}
:root .cv-onboard-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,248,250,0.99) 100%);
    border-color: rgba(60,42,34,0.1);
    color: #18181b;
    box-shadow: 0 24px 60px -12px rgba(60,42,34,0.25), 0 0 0 1px rgba(60,42,34,0.04) inset;
}
.cv-onboard-card.is-centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.cv-onboard-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.cv-onboard-eyebrow {
    font-family: var(--cv-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255,238,230,0.55);
    padding: 3px 8px;
    border: 1px solid rgba(255,238,230,0.15);
    border-radius: 999px;
    background: rgba(255,238,230,0.04);
}
:root .cv-onboard-eyebrow {
    color: rgba(0,0,0,0.55);
    border-color: rgba(60,42,34,0.12);
    background: rgba(60,42,34,0.03);
}
.cv-onboard-step {
    font-family: var(--cv-mono);
    font-size: 11px;
    color: rgba(255,238,230,0.5);
    letter-spacing: 0.06em;
}
:root .cv-onboard-step { color: rgba(0,0,0,0.5); }
.cv-onboard-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.cv-onboard-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255,238,230,0.75);
    margin: 0 0 14px;
}
:root .cv-onboard-body { color: rgba(0,0,0,0.7); }
.cv-onboard-body kbd {
    font-family: var(--cv-mono);
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid rgba(255,238,230,0.18);
    border-radius: 5px;
    background: rgba(255,238,230,0.06);
    color: rgba(255,238,230,0.9);
}
:root .cv-onboard-body kbd {
    border-color: rgba(60,42,34,0.16);
    background: rgba(60,42,34,0.04);
    color: rgba(0,0,0,0.85);
}
.cv-onboard-field {
    margin: 4px 0 2px;
}
.cv-onboard-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: rgba(255,238,230,0.95);
    background: rgba(255,238,230,0.06);
    border: 1px solid rgba(255,238,230,0.16);
    border-radius: 9px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cv-onboard-input::placeholder { color: rgba(255,238,230,0.4); }
.cv-onboard-input:focus {
    border-color: color-mix(in oklab, var(--cv-volt) 55%, transparent);
    box-shadow: 0 0 0 3px var(--cv-volt-glow);
}
:root .cv-onboard-input {
    color: rgba(0,0,0,0.9);
    background: rgba(60,42,34,0.03);
    border-color: rgba(60,42,34,0.16);
}
:root .cv-onboard-input::placeholder { color: rgba(0,0,0,0.4); }
.cv-onboard-progress {
    height: 3px;
    background: rgba(255,238,230,0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 14px;
}
:root .cv-onboard-progress { background: rgba(60,42,34,0.08); }
.cv-onboard-progress > i {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #818cf8, #c4b5fd, #f0abfc);
    transition: width 0.32s cubic-bezier(.22,.9,.32,1);
}
.cv-onboard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cv-onboard-nav {
    display: flex;
    gap: 6px;
}
.cv-onboard-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
    color: inherit;
}
.cv-onboard-btn-ghost {
    color: rgba(255,238,230,0.65);
    border-color: rgba(255,238,230,0.12);
}
.cv-onboard-btn-ghost:hover {
    color: var(--ink);
    border-color: rgba(255,238,230,0.25);
    background: rgba(255,238,230,0.04);
}
:root .cv-onboard-btn-ghost {
    color: rgba(0,0,0,0.6);
    border-color: rgba(60,42,34,0.12);
}
:root .cv-onboard-btn-ghost:hover {
    color: #000;
    border-color: rgba(60,42,34,0.22);
    background: rgba(60,42,34,0.04);
}
.cv-onboard-btn-ghost:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.cv-onboard-btn-primary {
    background: linear-gradient(180deg, var(--ink) 0%, #DCD2CC 100%);
    color: var(--paper);
    border-color: rgba(255,238,230,0.15);
    box-shadow: 0 1px 0 rgba(255,238,230,0.4) inset, 0 4px 12px rgba(60,42,34,0.25);
}
.cv-onboard-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,238,230,0.5) inset, 0 6px 16px rgba(60,42,34,0.3);
}
:root .cv-onboard-btn-primary {
    background: linear-gradient(180deg, #18181b 0%, #27272a 100%);
    color: #fafafa;
    border-color: rgba(60,42,34,0.2);
}

@media (max-width: 640px) {
    .cv-onboard-card { width: calc(100vw - 24px); }
}

/* ── Settings checkbox ──────────────────────────────────────
   One label+box row, used by "Run embeddings on CPU" under AI Models. */
.settings-checkbox {
    display: inline-flex; align-items: center; gap: 9px;
    cursor: pointer; font: 500 12.5px/1.4 var(--cv-body, system-ui);
    color: var(--cv-text-1, inherit);
}
.settings-checkbox input { cursor: pointer; }

/* ── Updates settings panel ──────────────────────────────────────── */
.settings-update-section {
    display: flex; flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
}
.settings-update-section > * { min-width: 0; box-sizing: border-box; }
.settings-update-section .settings-section-hint { margin-bottom: 6px; }
.settings-update-section .update-info-grid { margin-top: 14px; }
:root .update-info-grid::before { background: var(--bg-secondary); }

.update-state { display: flex; flex-direction: column; gap: 10px; }
.update-check-status { font-size: 12px; opacity: 0.65; }
.update-notes {
    font-size: 12px; opacity: 0.7; line-height: 1.55;
    white-space: pre-wrap; max-height: 100px; overflow-y: auto;
}
.update-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.update-changelog-link { font-size: 12px; opacity: 0.65; color: inherit; }
.update-changelog-link:hover { opacity: 1; }
.update-progress-label { display: flex; justify-content: space-between; font-size: 12.5px; opacity: 0.75; }
.update-progress-bytes { font-size: 11px; opacity: 0.5; }

/* Red dot badge on Updates nav item (sidebar) */
.update-nav-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #f87171; margin-left: auto; flex-shrink: 0;
}

/* ── GPU / VRAM info banner ─────────────────────────────────────── */
.gpu-info-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-hover);
    font-size: 12.5px;
    line-height: 1.45;
}
.gpu-info-banner svg { flex-shrink: 0; margin-top: 2px; opacity: 0.7; }
.gpu-info-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gpu-info-line { color: var(--text-secondary); }
.gpu-info-reason { color: var(--text-muted); font-size: 11.5px; }

.gpu-info-tier-high  { border-color: color-mix(in oklab, var(--ok) 35%, transparent); background: color-mix(in oklab, var(--ok) 6%, transparent); }
.gpu-info-tier-mid   { border-color: rgba(99,179,237,0.35); background: rgba(99,179,237,0.06); }
.gpu-info-tier-low   { border-color: rgba(234,179,8,0.35);  background: rgba(234,179,8,0.06); }
.gpu-info-tier-tight { border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.06); }

/* "Low VRAM" warning badge on model cards */
.settings-model-badge-warn {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 500;
    background: rgba(248,113,113,0.16);
    color: #fca5a5;
    border: 1px solid rgba(248,113,113,0.3);
}

.settings-model-card.too-large {
    opacity: 0.65;
}
.settings-model-card.too-large:hover { opacity: 0.9; }

:root .settings-model-badge-warn {
    background: rgba(220,38,38,0.08); color: #b91c1c; border-color: rgba(220,38,38,0.3);
}

/* ──────────────────────────────────────────────────────────────────
   Notification Center (topbar bell + dropdown)
   ────────────────────────────────────────────────────────────────── */
.cv-notify { position: relative; display: inline-flex; align-items: center; }

.cv-notify-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border-radius: 10px;
    background: rgba(255,238,230,0.03);
    border: 1px solid var(--cv-line, rgba(255,238,230,0.09));
    color: var(--cv-text-2, #B6A79F);
    cursor: pointer;
    transition: all 0.18s var(--cv-ease, ease);
}
.cv-notify-btn:hover {
    background: rgba(255,238,230,0.06);
    color: var(--cv-text-0, #F5EFEB);
    border-color: var(--cv-line-2, rgba(255,238,230,0.16));
    transform: translateY(-1px);
}
.cv-notify-btn:active { transform: translateY(0); }
.cv-notify-btn svg { width: 15px; height: 15px; }

.cv-notify-dot {
    position: absolute; top: -3px; right: -3px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff5d6c, #d83345);
    color: #fff;
    font: 600 9.5px/1 var(--cv-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    box-shadow: 0 0 0 2px rgba(18,16,14,0.95), 0 4px 10px rgba(216,51,69,0.45);
    pointer-events: none;
    animation: cv-notify-pop 220ms cubic-bezier(0.34,1.56,0.64,1);
}
.cv-notify-dot[hidden] { display: none; }
@keyframes cv-notify-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.cv-notify-panel {
    position: absolute;
    top: calc(100% + 12px); right: 0;
    width: 372px; max-width: calc(100vw - 32px);
    max-height: 468px;
    display: flex; flex-direction: column;
    /* Solid, NOT translucent: this panel is nested inside .cv-topbar which has
       its own backdrop-filter — a nested backdrop-filter + alpha background
       composites incorrectly (the panel renders see-through). Use an opaque
       fill and no backdrop-filter so it always reads solid. */
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255,238,230,0.035), transparent 60%),
        linear-gradient(180deg, #201C19 0%, #171412 100%);
    border: 1px solid rgba(255,238,230,0.09);
    border-radius: 16px;
    box-shadow:
        0 1px 0 rgba(255,238,230,0.06) inset,
        0 24px 70px -14px rgba(12,9,8,0.78),
        0 10px 28px -6px rgba(12,9,8,0.55);
    z-index: 200;
    overflow: hidden;
    transform-origin: top right;
    animation: cv-notify-panel-in 220ms cubic-bezier(0.16,1,0.3,1);
}
/* Branded hairline along the top edge — subtle premium accent */
.cv-notify-panel::after {
    content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in oklab, var(--cv-volt) 55%, transparent) 35%,
        color-mix(in oklab, var(--cv-volt) 70%, transparent) 50%,
        color-mix(in oklab, var(--cv-volt) 55%, transparent) 65%,
        transparent);
    opacity: 0.7; pointer-events: none;
}
.cv-notify-panel[hidden] { display: none; }
@keyframes cv-notify-panel-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cv-notify-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 15px 12px;
    border-bottom: 1px solid rgba(255,238,230,0.07);
    background: linear-gradient(180deg, rgba(255,238,230,0.035), rgba(255,238,230,0));
}
.cv-notify-title-wrap { display: inline-flex; align-items: baseline; gap: 8px; }
.cv-notify-title {
    font: 650 13px/1 var(--cv-body, system-ui);
    color: var(--cv-text-0, #F5EFEB);
    letter-spacing: -0.01em;
}
.cv-notify-count {
    font: 600 10px/1 var(--cv-mono, ui-monospace, monospace);
    color: var(--cv-text-3, #8A7A72);
    min-width: 18px; text-align: center;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255,238,230,0.06);
    border: 1px solid rgba(255,238,230,0.07);
    font-variant-numeric: tabular-nums;
}
.cv-notify-actions { display: inline-flex; align-items: center; gap: 2px; }
.cv-notify-action-btn {
    background: transparent; border: 0;
    color: var(--cv-text-3, #8A7A72);
    font: 550 11px/1 var(--cv-body, system-ui);
    padding: 6px 9px; border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cv-notify-action-btn:hover {
    background: rgba(255,238,230,0.07);
    color: var(--cv-text-0, #F5EFEB);
}
.cv-notify-action-btn.danger:hover {
    background: rgba(248,113,113,0.12);
    color: #ff8b95;
}

.cv-notify-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,238,230,0.12) transparent;
}
.cv-notify-scroll::-webkit-scrollbar { width: 8px; }
.cv-notify-scroll::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.1); border-radius: 4px; }
.cv-notify-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,238,230,0.18); }

.cv-notify-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.cv-notif-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    padding: 11px 12px 11px 13px;
    border-radius: 11px;
    align-items: flex-start;
    position: relative;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    transition:
        background 0.16s var(--cv-ease, ease),
        box-shadow 0.16s ease,
        transform 0.22s var(--cv-ease, ease),
        opacity 0.22s ease,
        height 0.26s var(--cv-ease, ease),
        padding 0.26s var(--cv-ease, ease),
        margin 0.26s var(--cv-ease, ease);
}
/* Animated removal — slide out + collapse height (modern-app dismiss). */
.cv-notif-item.removing {
    overflow: hidden;
    opacity: 0;
    transform: translateX(44px);
    padding-top: 0; padding-bottom: 0;
    margin-top: 0; margin-bottom: 0;
    box-shadow: none;
    pointer-events: none;
}
.cv-notif-item.removing::before { opacity: 0; }
.cv-notif-item:hover { background: rgba(255,238,230,0.045); }
.cv-notif-item.unread {
    background: rgba(255,238,230,0.04);
}
.cv-notif-item.unread:hover {
    background: rgba(255,238,230,0.07);
}
.cv-notif-item.unread::before {
    content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--cv-volt, #FF7A52), var(--cv-volt-2, #E0603A));
    box-shadow: 0 0 10px color-mix(in oklab, var(--cv-volt) 45%, transparent);
}
.cv-notif-item.unread .cv-notif-title { color: var(--text-primary, #F5EFEB); font-weight: 700; }

.cv-notif-icon {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,238,230,0.07);
    background: rgba(255,238,230,0.04);
    flex-shrink: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgba(60,42,34,0.25);
}
.cv-notif-item.type-success .cv-notif-icon { color: var(--ok); background: color-mix(in oklab, var(--ok) 10%, transparent); border-color: color-mix(in oklab, var(--ok) 22%, transparent); }
.cv-notif-item.type-error   .cv-notif-icon { color: #ff8b95; background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.22); }
.cv-notif-item.type-warning .cv-notif-icon { color: #fbbf24; background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.22); }
.cv-notif-item.type-info    .cv-notif-icon { color: #7ec8e3; background: rgba(99,179,237,0.1); border-color: rgba(99,179,237,0.22); }
.cv-notif-item.type-retry   .cv-notif-icon { color: #c4a8ff; background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.22); }

.cv-notif-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cv-notif-title {
    font: 600 12px/1.3 var(--cv-body, system-ui);
    color: var(--cv-text-0, #F5EFEB);
}
.cv-notif-msg {
    font: 400 11.5px/1.45 var(--cv-body, system-ui);
    color: var(--cv-text-2, #B6A79F);
    word-break: break-word;
}
.cv-notif-time {
    font: 500 10px/1 var(--cv-mono, ui-monospace, monospace);
    color: var(--cv-text-3, #8A7A72);
    margin-top: 4px;
    letter-spacing: 0.03em;
}

.cv-notif-dismiss {
    background: transparent; border: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    color: var(--cv-text-3, #8A7A72);
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.cv-notif-item:hover .cv-notif-dismiss { opacity: 0.7; }
.cv-notif-dismiss:hover { background: rgba(255,238,230,0.09); color: var(--cv-text-0, #F5EFEB); opacity: 1; transform: scale(1.05); }
.cv-notif-dismiss:active { transform: scale(0.9); }
/* Touch devices have no hover — keep the delete affordance visible. */
@media (hover: none) {
    .cv-notif-dismiss { opacity: 0.6; }
}

.cv-notify-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px;
    padding: 44px 24px 48px;
    color: var(--cv-text-3, #8A7A72);
    text-align: center;
}
.cv-notify-empty svg {
    color: var(--cv-volt, #FF7A52);
    opacity: 0.85;
    margin-bottom: 8px;
    padding: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--cv-volt) 14%, transparent), transparent 70%);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 18%, transparent);
    box-sizing: content-box;
}
.cv-notify-empty-title { font: 650 13px/1.2 var(--cv-body, system-ui); color: var(--cv-text-1, #B6A79F); letter-spacing: -0.01em; }
.cv-notify-empty-sub   { font: 400 11px/1.5 var(--cv-body, system-ui); opacity: 0.7; max-width: 220px; }


:root .cv-notify-btn { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.08); color: #52525b; }
:root .cv-notify-btn:hover { background: rgba(60,42,34,0.06); color: #18181b; border-color: rgba(60,42,34,0.14); }
:root .cv-notify-dot { box-shadow: 0 0 0 2px #ffffff, 0 4px 10px rgba(216,51,69,0.3); }
:root .cv-notify-panel {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(60,42,34,0.018), transparent 60%),
        #ffffff;
    border-color: rgba(60,42,34,0.1);
    box-shadow: 0 24px 70px -14px rgba(60,42,34,0.18), 0 10px 28px -6px rgba(60,42,34,0.1);
}
:root .cv-notify-head { border-bottom-color: rgba(60,42,34,0.06); background: linear-gradient(180deg, rgba(60,42,34,0.02), transparent); }
:root .cv-notify-title { color: #18181b; }
:root .cv-notify-count { background: rgba(60,42,34,0.05); border-color: rgba(60,42,34,0.07); color: #71717a; }
:root .cv-notify-action-btn { color: #71717a; }
:root .cv-notify-action-btn:hover { background: rgba(60,42,34,0.05); color: #18181b; }
:root .cv-notif-item:hover { background: rgba(60,42,34,0.04); }
:root .cv-notif-item.unread { background: rgba(60,42,34,0.04); }
:root .cv-notif-item.unread:hover { background: rgba(60,42,34,0.065); }
:root .cv-notif-item.unread::before {
    background: linear-gradient(180deg, var(--cv-volt, #FF7A52), var(--cv-volt-2, #E0603A));
    box-shadow: none;
}
:root .cv-notif-icon { box-shadow: 0 1px 2px rgba(60,42,34,0.06); }
:root .cv-notif-dismiss:hover { background: rgba(60,42,34,0.07); color: #18181b; }
:root .cv-notif-title { color: #18181b; }
:root .cv-notif-msg { color: #52525b; }


/* ──────────────────────────────────────────────────────────────────
   Updates panel — hero card, state banners, info grid
   Aligned with the monochrome design-token system used by
   the Profile, Appearance and Models panels.
   ────────────────────────────────────────────────────────────────── */

/* ── Hero card ── */
.update-hero-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.update-hero-card::before {
    content: "";
    position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-accent), transparent);
    pointer-events: none;
}
.update-hero-card:hover { border-color: var(--border-accent); }

.update-hero-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.update-hero-card:hover .update-hero-icon {
    color: var(--text-primary);
    background: var(--bg-active);
    border-color: var(--border-accent);
}
.update-hero-icon svg { width: 20px; height: 20px; }

.update-hero-meta { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.update-hero-name {
    font-family: var(--font-display);
    font-size: 14.5px; font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1;
}
.update-hero-row { display: inline-flex; align-items: center; gap: 7px; }

.update-channel-badge {
    display: inline-flex; align-items: center;
    height: 18px;
    font-size: 9.5px; font-weight: 600;
    font-family: var(--font-mono);
    padding: 0 6px; border-radius: 4px;
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.update-version-pill {
    display: inline-flex; align-items: center;
    height: 18px;
    font-size: 11px; font-weight: 600;
    font-family: var(--font-mono);
    padding: 0 7px; border-radius: 5px;
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.update-hero-sub {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

/* ── Check button ── */
.update-hero-action {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform 0.15s ease;
    white-space: nowrap;
}
.update-hero-action:hover {
    background: var(--bg-active);
    border-color: var(--border-accent);
    transform: translateY(-1px);
}
.update-hero-action:active { transform: translateY(0); }
.update-hero-action svg { transition: transform 0.4s ease; }
.update-hero-action:hover svg { transform: rotate(180deg); }

/* ── State banner — up to date ── */
.update-state.update-state-banner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    position: relative;
    overflow: hidden;
}
.update-state.update-state-banner.up-to-date {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
}
.update-state.update-state-banner.up-to-date::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--success);
    opacity: 0.7;
}
.update-banner-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    flex: 0 0 22px;
    border-radius: 6px;
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
}
.update-banner-icon svg { width: 12px; height: 12px; display: block; }
.update-banner-text { flex: 1; min-width: 0; color: var(--text-secondary); }
.update-state.update-state-banner .update-check-status {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
}

/* ── Available card ── */
.update-available-card {
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    padding: 14px 16px;
    background: var(--bg-tertiary);
    display: flex; flex-direction: column; gap: 10px;
}
.update-available-head {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-body);
    font-size: 13px; font-weight: 600; line-height: 1.2;
    color: var(--text-primary);
}
.update-pulse-dot {
    position: relative;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 60%, transparent);
    animation: cv-update-pulse 1.8s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes cv-update-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 55%, transparent); }
    70%  { box-shadow: 0 0 0 9px color-mix(in oklab, var(--ok) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 0%, transparent); }
}

/* ── Progress bar — shimmer ── */
.update-progress-wrap {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
}
.update-progress-bar-bg {
    height: 6px; border-radius: 999px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    overflow: hidden; position: relative;
}
.update-progress-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--text-muted), var(--text-secondary), var(--text-primary));
    background-size: 200% 100%;
    transition: width 0.25s ease;
    animation: cv-progress-shimmer 1.6s linear infinite;
}
@keyframes cv-progress-shimmer {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

/* ── Ready card ── */
.update-ready-card {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 12.5px; font-weight: 500; line-height: 1;
    color: var(--text-secondary);
}
.update-ready-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
}
.update-ready-text { flex: 1; min-width: 160px; }

/* ── Info footer grid ── */
.update-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    position: relative;
}
.update-info-grid::before {
    content: "ABOUT";
    position: absolute;
    top: -7px;
    left: 14px;
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    background: var(--bg-secondary);
}
.update-info-item {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    transition: border-color var(--transition), transform var(--transition);
}
.update-info-item:hover {
    border-color: var(--border-accent);
    transform: translateY(-1px);
}
.update-info-label {
    font-size: 9.5px; font-weight: 600;
    font-family: var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted);
}
.update-info-value {
    font-size: 12px; font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.005em;
}

/* ── Light theme — Updates ── */
:root .update-hero-card {
    background: var(--bg-tertiary);
    border-color: var(--border);
}
:root .update-hero-icon {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-secondary);
}
:root .update-hero-action {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-primary);
}
:root .update-hero-action:hover {
    background: var(--bg-active);
    border-color: var(--border-accent);
}
:root .update-state-banner.up-to-date {
    background: var(--success-bg);
    border-color: var(--success-border);
}
:root .update-banner-text { color: var(--text-secondary); }
:root .update-progress-wrap {
    background: var(--bg-tertiary);
    border-color: var(--border);
}
:root .update-info-item {
    background: var(--bg-tertiary);
    border-color: var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   Motion polish — global smoothness pass (additive, low-specificity)
   ═══════════════════════════════════════════════════════════════ */

/* Smooth programmatic scrolling everywhere content scrolls */
.view,
.main-content,
.cv-ask-scroll,
.cv-ask-history-list,
.cv-notify-scroll,
.settings-modal,
.modal { scroll-behavior: smooth; }

/* Tactile press feedback. These controls already animate hover via
   `transition: all`, so the :active transform eases in smoothly. More specific
   component rules (e.g. the ask send button, starter cards) still win. */
.btn:active:not(:disabled),
.cv-primary:active:not(:disabled),
.cv-cmdk:active,
.nav-item:active,
.cv-nav:active,
.cv-ibtn:active:not(:disabled),
.cv-side-iconbtn:active,
.cv-notify-btn:active,
.sidebar-collapse-btn:active,
.cv-util:active { transform: scale(0.97); }

/* Give a transform transition to interactive bits that don't declare one,
   so the press above (and any hover lift) is never a hard snap. */
.nav-item,
.cv-nav,
.cv-ibtn,
.cv-util,
.cv-side-iconbtn,
.cv-notify-btn,
.sidebar-collapse-btn {
    transition: background 0.18s var(--cv-ease, ease),
                border-color 0.18s var(--cv-ease, ease),
                color 0.18s var(--cv-ease, ease),
                box-shadow 0.18s var(--cv-ease, ease),
                transform 0.13s var(--cv-ease, ease);
}

/* Links / inline interactive text get a gentle colour fade. */
a { transition: color 0.16s ease; }

/* Respect users who prefer less motion — disable animations app-wide.
   (Supersedes the Ask-only guard added earlier.) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ── Statstrip vibe fixes — cells stay flat inside the joined strip;
      the strip frame carries the chrome, not the individual cells. ── */
/* Flat in Noir too — the radial sheen and 48px shadow made the stat card
   float off the page while the panels below it sat flat. One surface tone. */
/* Tokens, not raw alpha. data-vibe="noir" is on <html> in BOTH themes, so the
   literal rgba(255,238,230,.08) that used to be here rendered invisible on a
   white card — in light mode the stat strip lost its outline and its internal
   dividers entirely, which is why it read as floating text. */
[data-vibe="noir"] .cv-statstrip {
    background: var(--surface);
    border: 1px solid var(--rule);
    box-shadow: none;
}
[data-vibe="noir"] .cv-statstrip .cv-stat,
[data-vibe="noir"] .cv-statstrip .cv-stat:hover {
    border: 0; box-shadow: none; transform: none; background: none;
}
[data-vibe="noir"] .cv-statstrip .cv-stat::after { display: none; }
[data-vibe="noir"] .cv-statstrip .cv-stat + .cv-stat { border-left: 1px solid var(--rule); }
[data-vibe="noir"] .cv-statstrip .cv-stat .meta { border-top: 0; padding-top: 0; margin-top: 0; }


/* ── Dashboard composition fixes ─────────────────────────────────
   1. Grid-blowout guard: nowrap row titles must truncate, never
      widen the 1fr column and shove the rail off-screen.         */
.cv-dash-bento > section,
.cv-dash-bento > aside { min-width: 0; }
.cv-dash-panel { overflow: hidden; }

/* 2. Cap + center the dashboard column on very wide windows */
.cv-dash-hero,
.cv-dash-cmd,
.cv-dash-bento,
#view-input .cv-pipeline {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
}

/* 3. Compact single-line greeting — wins over vibe-level hero rules */
.cv-dash-hero .cv-hero h1,
[data-vibe="noir"] .cv-dash-hero .cv-hero h1 {
    font-size: clamp(28px, 2.6vw, 44px);
    line-height: 1.12;
}
.cv-dash-hero .cv-hero,
[data-vibe="noir"] .cv-dash-hero .cv-hero {
    border-bottom: 0;
    margin-bottom: 0;
    padding: 6px 4px 0;
    display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
/* Drop the decorative 80px accent dash under the greeting — pure ornament, no info */
.cv-dash-hero .cv-hero::after,
[data-vibe="noir"] .cv-dash-hero .cv-hero::after,
:root[data-vibe="noir"] .cv-dash-hero .cv-hero::after { display: none; }

/* ── Pinned rail: cap at ~4 cards, then scroll ───────────────── */
.cv-pinned-list.scroll {
    max-height: 312px;
    overflow-y: auto;
    padding-right: 6px;
    /* NOTE: no `scrollbar-width` here — Chromium ignores ::-webkit-scrollbar
       styling entirely when it's set, falling back to the native bar. */
    /* soft fade hint that more cards exist below */
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent);
}
.cv-pinned-list.scroll::-webkit-scrollbar { width: 4px; }
.cv-pinned-list.scroll::-webkit-scrollbar-track { background: transparent; }
.cv-pinned-list.scroll::-webkit-scrollbar-thumb {
    background: rgba(255,238,230,0.12);
    border-radius: 99px;
}
.cv-pinned-list.scroll:hover::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.2); }
:root .cv-pinned-list.scroll::-webkit-scrollbar-thumb { background: rgba(60,42,34,0.16); }
:root .cv-pinned-list.scroll:hover::-webkit-scrollbar-thumb { background: rgba(60,42,34,0.28); }

/* ── Dashboard motion pass ───────────────────────────────────────
   Staggered rise-in for rows/cards (via --i set inline), panel
   cascade for the rail, and bottom-up growth for the spark bars.
   The global prefers-reduced-motion guard zeroes all of these.   */
@keyframes cv-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes cv-grow-y {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
.cv-dash-hero  { animation: cv-rise 0.45s var(--cv-ease) backwards; }
.cv-dash-cmd   { animation: cv-rise 0.45s var(--cv-ease) 60ms backwards; }
.cv-dash-bento .cv-dash-recent { animation: cv-rise 0.5s var(--cv-ease) 100ms backwards; }
.cv-dash-rail .cv-dash-panel             { animation: cv-rise 0.5s var(--cv-ease) 140ms backwards; }
.cv-dash-rail .cv-dash-panel:nth-child(2){ animation-delay: 220ms; }
.cv-dash-rail .cv-dash-panel:nth-child(3){ animation-delay: 300ms; }
.cv-row {
    animation: cv-rise 0.4s var(--cv-ease) backwards;
    animation-delay: calc(140ms + var(--i, 0) * 35ms);
}
.cv-pin-card {
    animation: cv-rise 0.4s var(--cv-ease) backwards;
    animation-delay: calc(180ms + var(--i, 0) * 45ms);
}
.cv-spark-col i {
    transform-origin: bottom;
    animation: cv-grow-y 0.55s var(--cv-ease) backwards;
    animation-delay: calc(280ms + var(--i, 0) * 25ms);
}
.cv-dash-chip { animation: cv-rise 0.35s var(--cv-ease) backwards; }
.cv-dash-chips .cv-dash-chip:nth-child(2) { animation-delay: 100ms; }
.cv-dash-chips .cv-dash-chip:nth-child(3) { animation-delay: 160ms; }
.cv-dash-chips .cv-dash-chip:nth-child(4) { animation-delay: 220ms; }
.cv-recent-ask { animation: cv-rise 0.35s var(--cv-ease) backwards; }
.cv-recent-asks .cv-recent-ask:nth-child(2) { animation-delay: 60ms; }
.cv-recent-asks .cv-recent-ask:nth-child(3) { animation-delay: 120ms; }

/* ── Dashboard aesthetic pass ────────────────────────────────────
   Matches the app's existing finish language: top highlight lines,
   soft radial sheens, mono eyebrow labels, volt accents.          */

/* Panels — flat surfaces. One hairline border does the separating; the
   top highlight line, ambient radial sheen and 44px drop shadow that used
   to sit here were pure ornament and made every panel shout at the same
   volume as its contents. */
.cv-dash-panel {
    position: relative;
    box-shadow: none;
    transition: border-color 0.2s var(--cv-ease);
}
.cv-dash-panel:hover { border-color: var(--cv-line-2); }
/* Light is the default theme, and --surface (#FFF) sits only 2% off --paper
   (#FCFAF9). A hairline alone leaves card edges guessy on that little
   separation, so light gets a 1px whisper of shadow — enough to seat the card,
   far short of the 44px drop this pass removed. */
:root .cv-dash-panel,
:root .cv-statstrip,
[data-vibe="noir"]:root .cv-statstrip {
    box-shadow: 0 1px 2px rgba(60,42,34,0.05);
}

/* Section headers — one quiet mono label everywhere, so the recent list and
   the rail panels read as siblings instead of competing heading sizes. */
.cv-rail-head { position: relative; z-index: 1; }
.cv-rail-head h2 {
    font: 600 10.5px/1 var(--cv-mono);
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cv-text-3);
    display: inline-flex; align-items: center; gap: 8px;
}
:root .cv-rail-head h2 { color: #71717a; }
/* No accent tick on headers. The Processing panel already carries a pulsing
   .cv-proc-livedot, which is a real status signal; a static coloured square on
   Pinned and Recent was decoration wearing the same uniform. */

/* Command bar — the one element that keeps a lift, because it is the primary
   action on the page and the only thing that should read as raised. Resting
   shadow is halved; the focus state is a clean ring rather than a coloured
   64px bloom, and the icon no longer rotates (a spinning sparkle on focus is
   noise at the exact moment the user is aiming at a text field). */
.cv-dash-ask {
    box-shadow: 0 8px 24px -18px rgba(12,9,8,0.6);
}
.cv-dash-ask:focus-within {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--cv-volt) 14%, transparent);
}
.cv-dash-ask-ic { transition: color 0.2s var(--cv-ease); }
:root .cv-dash-ask { box-shadow: 0 6px 18px -14px rgba(60,42,34,0.14); }

/* Suggestion chips — lift on hover */
.cv-dash-chip { transition: all 0.18s var(--cv-ease), transform 0.18s var(--cv-ease); }
.cv-dash-chip:hover { transform: translateY(-1px); }

/* Recent rows — plain recessed fill on hover. This used to tint toward the
   row's AI accent; with the accent rail removed and brands carried by typeface,
   the hover is just --sunk in both themes. */
.cv-row:hover { background: var(--sunk); }

/* Stat numbers — solid ink. The gradient-to-grey fill that used to be here
   faded the bottom third of every digit, which is exactly the part that
   distinguishes 3 from 8 at 26px. Numbers are the point of this card. */
.cv-statstrip .cv-stat .v {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--cv-text-0);
    font-weight: 500;
}
:root .cv-statstrip .cv-stat .v { color: #111113; }

/* The strip is a readout, not a control surface: no lift, no spotlight, no
   hover border. Reserving those for things that actually respond to a click
   is what makes the rows and chips below feel responsive. */
.cv-statstrip .cv-stat::before { display: none; }
.cv-statstrip .cv-stat:hover { transform: none; }
/* …and the dividers must not brighten on hover either, or the grid lines
   flicker as the pointer crosses the card. */
.cv-statstrip .cv-stat + .cv-stat:hover { border-left-color: var(--cv-line); }
:root .cv-statstrip .cv-stat + .cv-stat:hover { border-left-color: rgba(60,42,34,0.07); }

/* Spark bars — gradient ink + rounded caps */
.cv-spark-col i { border-radius: 3px 3px 1px 1px; }
.cv-spark-col i.cap { background: linear-gradient(180deg, var(--cv-volt), color-mix(in oklab, var(--cv-volt) 45%, transparent)); opacity: 0.95; }
.cv-spark-col { border-radius: 4px; transition: background 0.18s var(--cv-ease); }
.cv-spark-col:hover { background: rgba(255,238,230,0.04); }
:root .cv-spark-col:hover { background: rgba(60,42,34,0.05); }

/* Pinned cards — star gets a soft glow, card gets accent edge on hover */
.cv-pin-star { filter: drop-shadow(0 0 4px var(--cv-volt-glow)); }
.cv-pin-card:hover { box-shadow: 0 1px 0 rgba(255,238,230,0.04) inset, 0 10px 28px -18px rgba(12,9,8,0.7); }
:root .cv-pin-card:hover { box-shadow: 0 8px 22px -16px rgba(60,42,34,0.18); }

/* ── Activity axis + today marker ─────────────────────────────── */
.cv-spark-axis {
    display: flex; justify-content: space-between;
    margin: 6px 2px 0; padding: 0 2px;
    font: 400 9.5px/1 var(--cv-mono); letter-spacing: 0.05em;
    color: var(--cv-text-3); text-transform: uppercase;
}
.cv-spark-axis span:last-child { color: var(--cv-text-2); }
/* Today gets a soft column wash, no outline — now that bars are slim, a boxed
   full-width column read as a tall empty bar rather than a date marker. */
.cv-spark-col.today { background: rgba(255,238,230,0.05); }
.cv-spark-col.today.empty::after { background: var(--cv-text-3); }
:root .cv-spark-col.today { background: rgba(60,42,34,0.05); }

/* ── Entrance animations play once per session ────────────────────
   loadDashboard sets .cv-dash-settled on <body> for every render
   after the first, so navigating back updates content in place
   instead of replaying the whole rise-in cascade ("page refreshes
   many times" feel). Hover/focus transitions are untouched.       */
body.cv-dash-settled .cv-dash-hero,
body.cv-dash-settled .cv-dash-cmd,
body.cv-dash-settled .cv-dash-bento .cv-dash-recent,
body.cv-dash-settled .cv-dash-rail .cv-dash-panel,
body.cv-dash-settled .cv-row,
body.cv-dash-settled .cv-pin-card,
body.cv-dash-settled .cv-spark-col i,
body.cv-dash-settled .cv-dash-chip,
body.cv-dash-settled .cv-recent-ask {
    animation: none !important;
}

/* ═══════════════ Library redesign ═══════════════ */

/* ── Sticky command zone — header + search + filters as one block ── */
.cv-lib-zone {
    position: sticky; top: 0; z-index: 30;
    margin: -8px -8px 18px; padding: 14px 8px 12px;
    background: color-mix(in oklab, var(--cv-bg-1, #1C1917) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cv-line);
}
:root .cv-lib-zone {
    background: rgba(245,245,247,0.85);
    border-bottom-color: rgba(60,42,34,0.07);
}
.cv-lib-zone .cv-lib-head { margin-bottom: 12px; }
.cv-lib-zone .cv-lib-command { margin-bottom: 10px; }

/* ── Filter row ── */
.cv-lib-filterrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 4px; }
.cv-lib-filterlabel {
    font: 600 9.5px/1 var(--cv-mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cv-text-3); margin-right: 2px;
}
.cv-fdrop { position: relative; }
.cv-fchip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 100px; cursor: pointer;
    font: 400 12px/1.2 var(--cv-body); color: var(--cv-text-2);
    background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line);
    transition: all 0.18s var(--cv-ease);
}
.cv-fchip:hover { color: var(--cv-text-0); border-color: var(--cv-line-2); }
.cv-fchip.on {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent);
    background: var(--cv-volt-dim);
}
:root .cv-fchip { color: #52525b; border-color: rgba(60,42,34,0.1); background: rgba(60,42,34,0.03); }
:root .cv-fchip:hover { color: #111113; }

.cv-fmenu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
    min-width: 180px; max-height: 320px; overflow-y: auto;
    padding: 6px; border-radius: 12px;
    background: color-mix(in oklab, var(--cv-bg-2, #211D1A) 92%, #fff 2%);
    border: 1px solid var(--cv-line-2);
    box-shadow: 0 18px 48px -16px rgba(12,9,8,0.75);
}
:root .cv-fmenu { background: #fff; border-color: rgba(60,42,34,0.12); box-shadow: 0 14px 36px -16px rgba(60,42,34,0.25); }
.cv-fmenu::-webkit-scrollbar { width: 4px; }
.cv-fmenu::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.12); border-radius: 99px; }
.cv-fopt {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 11px; border: 0; border-radius: 8px; cursor: pointer;
    font: 400 12.5px/1.2 var(--cv-body); color: var(--cv-text-1);
    background: none; text-align: left;
}
.cv-fopt:hover { background: rgba(255,238,230,0.06); color: var(--cv-text-0); }
.cv-fopt.on { color: var(--cv-volt); background: var(--cv-volt-dim); }
:root .cv-fopt { color: #3f3f46; }
:root .cv-fopt:hover { background: rgba(60,42,34,0.05); color: #111113; }
.cv-fopt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cv-fopt-count {
    margin-left: auto; font: 500 9.5px/1 var(--cv-mono); color: var(--cv-text-3);
    border: 1px solid var(--cv-line); border-radius: 99px; padding: 2px 7px;
}
.cv-fopt-none { padding: 10px 12px; font: 400 12px var(--cv-body); color: var(--cv-text-3); }
.cv-lib-filterrow .cv-lib-activefilters { margin: 0 0 0 4px; }

/* ── Time-grouped grid ── */
#contexts-grid.cv-lib-grid { display: block; }
.cv-lib-groupgrid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    margin-bottom: 4px;
}
@media (max-width: 900px) { .cv-lib-groupgrid { grid-template-columns: 1fr; } }
.cv-lib-group {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 2px 12px;
}
.cv-lib-group:first-child { margin-top: 4px; }
.cv-lib-group-label {
    font: 600 10px/1 var(--cv-mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cv-text-3); flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 7px;
}
/* Pinned section header — slightly emphasised + star glyph */
.cv-lib-group-pinned .cv-lib-group-label { color: var(--cv-text-1); }
.cv-lib-group-pin { color: var(--cv-volt); }
:root .cv-lib-group-pinned .cv-lib-group-label { color: #27272a; }
:root .cv-lib-group-pin { color: #27272a; }
.cv-lib-group-rule { flex: 1; height: 1px; background: color-mix(in oklab, var(--cv-line) 70%, transparent); }
.cv-lib-group-count {
    font: 500 9.5px/1 var(--cv-mono); color: var(--cv-text-3);
    border: 1px solid var(--cv-line); border-radius: 99px; padding: 3px 8px; flex-shrink: 0;
}

/* Cards keep overflow clipped (rounded corners on media/pills). */
.cv-card { overflow: hidden; }

/* ── Rows mode: master–detail split ── */
.cv-lib-body[data-view="rows"] {
    display: grid; gap: 16px; align-items: start;
    grid-template-columns: minmax(340px, 1.05fr) 1.4fr;
}
@media (max-width: 1100px) { .cv-lib-body[data-view="rows"] { grid-template-columns: 1fr; } }
#contexts-grid[data-view="rows"] { display: flex !important; flex-direction: column; gap: 8px; }

.cv-lrow {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px 13px 10px 0; min-width: 0; text-align: left; cursor: pointer;
    border-radius: 10px; border: 1px solid var(--cv-line);
    background: rgba(255,238,230,0.015);
    transition: border-color 0.16s var(--cv-ease), background 0.16s var(--cv-ease);
}
.cv-lrow:hover { border-color: var(--cv-line-2); background: rgba(255,238,230,0.04); }
.cv-lrow.active {
    border-color: color-mix(in oklab, var(--accent, var(--cv-volt)) 50%, var(--cv-line));
    background: color-mix(in oklab, var(--accent, var(--cv-volt)) 7%, rgba(255,238,230,0.02));
}
.cv-lrow-rail { width: 3px; align-self: stretch; border-radius: 0 2px 2px 0; background: var(--accent, var(--cv-volt)); opacity: 0.5; flex-shrink: 0; }
.cv-lrow.active .cv-lrow-rail { opacity: 1; }
.cv-lrow-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cv-lrow-title {
    font: 500 13px/1.3 var(--cv-body); color: var(--cv-text-0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 6px;
}
.cv-lrow-star { color: var(--cv-volt); flex-shrink: 0; }
.cv-lrow-sub {
    font: 400 11.5px/1.4 var(--cv-body); color: var(--cv-text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-lrow-time { font: 400 10px/1 var(--cv-mono); color: var(--cv-text-3); flex-shrink: 0; }
.cv-lrow-check { margin-left: 12px; flex-shrink: 0; }
:root .cv-lrow { border-color: rgba(60,42,34,0.07); background: rgba(255,255,255,0.7); }
:root .cv-lrow:hover { background: #fff; border-color: rgba(60,42,34,0.16); }
:root .cv-lrow-title { color: #111113; }

/* Preview pane */
.cv-lib-preview {
    position: sticky; top: 158px;
    max-height: calc(100vh - 190px); overflow-y: auto;
    padding: 18px; border-radius: var(--cv-r-lg);
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    box-shadow: 0 1px 0 rgba(255,238,230,0.04) inset, 0 18px 44px -24px rgba(12,9,8,0.7);
}
:root .cv-lib-preview { background: rgba(255,255,255,0.9); border-color: rgba(60,42,34,0.08); }
.cv-lib-preview::-webkit-scrollbar { width: 4px; }
.cv-lib-preview::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.12); border-radius: 99px; }
.cv-pv-empty { padding: 40px 0; text-align: center; font: 400 13px var(--cv-body); color: var(--cv-text-3); }
.cv-pv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cv-pv-pin { font: 500 10px/1 var(--cv-mono); color: var(--cv-volt); letter-spacing: 0.06em; }
.cv-pv-col { font: 500 10px/1 var(--cv-mono); letter-spacing: 0.06em; }
.cv-pv-date { margin-left: auto; font: 400 10px/1 var(--cv-mono); color: var(--cv-text-3); }
.cv-pv-title {
    font-family: var(--cv-display); font-weight: 500; font-size: 19px;
    letter-spacing: -0.015em; line-height: 1.3; color: var(--cv-text-0); margin: 0 0 10px;
}
:root .cv-pv-title { color: #111113; }
.cv-pv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.cv-pv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cv-pv-btn {
    padding: 7px 13px; border-radius: 9px; cursor: pointer;
    font: 500 12px/1.2 var(--cv-body); color: var(--cv-text-1);
    background: rgba(255,238,230,0.04); border: 1px solid var(--cv-line);
    transition: all 0.16s var(--cv-ease);
}
.cv-pv-btn:hover { color: var(--cv-text-0); border-color: var(--cv-line-2); }
.cv-pv-btn.primary {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent);
    background: var(--cv-volt-dim);
}
:root .cv-pv-btn { color: #3f3f46; border-color: rgba(60,42,34,0.1); background: rgba(60,42,34,0.03); }
.cv-pv-sec { margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(255,238,230,0.02); border: 1px solid color-mix(in oklab, var(--cv-line) 70%, transparent); }
:root .cv-pv-sec { background: rgba(60,42,34,0.02); border-color: rgba(60,42,34,0.06); }
.cv-pv-seclabel {
    font: 600 9.5px/1 var(--cv-mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cv-text-3); margin-bottom: 8px;
}
.cv-pv-snap { font: 400 12.5px/1.6 var(--cv-body); color: var(--cv-text-1); margin: 0; }
.cv-pv-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; }
.cv-pv-list li { font: 400 12.5px/1.5 var(--cv-body); color: var(--cv-text-1); }
:root .cv-pv-snap, :root .cv-pv-list li { color: #3f3f46; }

/* ── Bulk pill: collection menu drops up ── */
.cv-bulk-coll { position: relative; }
.cv-bulk-coll-menu { top: auto; bottom: calc(100% + 8px); left: 0; }

/* ── Deep search loading ── */
.cv-deep-loading { text-align: center; padding: 40px 0; color: var(--cv-text-3); font: 400 13px var(--cv-body); }

/* ── Library entrance motion (plays via --card-delay stagger) ── */
.cv-lrow { animation: cv-rise 0.35s var(--cv-ease) backwards; animation-delay: var(--card-delay, 0ms); }
.cv-lib-group { animation: cv-rise 0.4s var(--cv-ease) backwards; }
body.cv-dash-settled .cv-lrow, body.cv-dash-settled .cv-lib-group { animation: none !important; }

/* Sticky fix: #view-library is the scroll container and its top padding sits
   above the stuck zone, so cards scrolled up were visible through that strip.
   Zero the container's top padding and let the zone own it, bleeding to the
   scroller's full width so no transparent gap remains above or beside it. */
#view-library, #view-trash { padding-top: 0; }
.cv-lib-zone {
    top: 0;
    margin: 0 calc(-1 * clamp(24px, 3.5vw, 64px)) 18px;
    padding: clamp(20px, 3vh, 40px) clamp(24px, 3.5vw, 64px) 12px;
    background: color-mix(in oklab, var(--cv-bg-1, #1C1917) 90%, transparent);
}
:root .cv-lib-zone { background: rgba(245,245,247,0.93); }

/* Preview pane sticks below the (now taller) command zone */
.cv-lib-preview { top: 210px; max-height: calc(100vh - 250px); }

/* Belt-and-suspenders: opaque mask extending above the zone. If any engine
   pins the sticky box below the scrollport edge (padding-inset quirk), this
   covers the strip so scrolled cards can never peek above the zone. Clipped
   away entirely when the zone sits flush, so it costs nothing. */
.cv-lib-zone::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 140px;
    background: var(--cv-grid-bg, #161311);
    pointer-events: none;
}
:root .cv-lib-zone::before { background: var(--cv-grid-bg, #161311); }

/* Command zone hugs the very top of the content area — toolbar, not banner */
.cv-lib-zone {
    padding-top: 14px;
    padding-bottom: 10px;
}
.cv-lib-zone .cv-lib-head { margin-bottom: 10px; }
.cv-lib-zone::before { height: 60px; }

/* ═══════════════ Chromeless window chrome ═══════════════
   The 34px titlebar strip is gone. A transparent drag strip overlays the
   top of the window and mac-style traffic lights float in a glass pill
   at the top-right. All control ids/wiring unchanged. */

:root { --cv-titlebar-h: 0px; }

/* Invisible drag strip — stops short of the lights pill */
.cv-dragstrip {
    position: fixed; top: 0; left: 0; right: 130px; height: 26px;
    z-index: 2147482998;
}

/* Floating window controls — the app's own icon-button idiom, not mac candy.
   Glyphs are always visible (three coloured dots only read as controls if you
   already know the convention), and only close takes a colour, on hover, where
   it's a warning rather than decoration. */
.cv-lights {
    position: fixed; top: 10px; right: 12px; z-index: 2147483000;
    display: flex; gap: 2px; align-items: center;
    padding: 4px; border-radius: 12px;
    background: color-mix(in oklab, var(--cv-bg-1, #1C1917) 74%, transparent);
    border: 1px solid var(--cv-line, rgba(255,238,230,0.09));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255,238,230,0.05) inset, 0 8px 24px -10px rgba(12,9,8,0.65);
    user-select: none; -webkit-user-select: none;
}
:root .cv-lights { background: rgba(255,255,255,0.82); border-color: rgba(60,42,34,0.1); box-shadow: 0 8px 22px -12px rgba(60,42,34,0.25); }

.cv-light {
    width: 26px; height: 24px; border-radius: 8px;
    border: 0; padding: 0; margin: 0; cursor: pointer;
    display: grid; place-items: center;
    background: transparent;
    color: var(--cv-text-3, #8A7A72);
    transition: color 0.14s ease, background 0.14s ease, transform 0.08s ease;
}
.cv-light svg { width: 12px; height: 12px; display: block; }
.cv-light:hover { background: rgba(255,238,230,0.08); color: var(--cv-text-0, #F5EFEB); }
.cv-light:active { transform: translateY(1px); }
.cv-light-close:hover { background: #e0443e; color: #fff; }
.cv-light:focus-visible { outline: 2px solid var(--cv-volt); outline-offset: 1px; }
:root .cv-light { color: #71717a; }
:root .cv-light:hover { background: rgba(60,42,34,0.07); color: #18181b; }
:root .cv-light-close:hover { background: #e0443e; color: #fff; }
/* maximize ↔ restore glyph swap (run.py + shell.js toggle .is-maximized) */
.cv-light .cv-ic-restore { display: none; }
.cv-light.is-maximized .cv-ic-max { display: none; }
.cv-light.is-maximized .cv-ic-restore { display: block; }
/* Unfocused window: the whole cluster recedes rather than each button
   restyling — one property, and it can't fight the hover states. */
body.cv-win-blurred .cv-lights { opacity: 0.5; }

/* ── Layout reserves: keep interactive elements clear of strip + pill ── */
/* Sidebar brand drops below the drag strip; brand itself is a drag handle */
.sidebar { padding-top: 28px; }
/* Library command zone: clear the strip on top, the pill on the right */
.cv-lib-zone { padding-top: 30px; }
.cv-lib-zone .cv-lib-head { padding-right: 118px; }
/* Dashboard topbar: same reserves */
#view-input .cv-topbar { margin-top: 26px; margin-right: 118px; }
/* Ask rail + capture rail + detail rail: right reserve for the pill */
.cv-ask-rail { margin-right: calc(clamp(16px, 4vw, 48px) + 96px); }
.cv-detail-rail { padding-right: 118px; padding-top: 26px; }

/* Dashboard topbar rides inline with the floating lights — no dead band */
#view-input.cv-main { padding-top: 12px; }
#view-input .cv-topbar { margin-top: 0; margin-bottom: 24px; }

/* ── Unified page rails: Library + Ask adopt the dashboard topbar anatomy ── */
/* Library rail inside the sticky zone */
.cv-lib-zone { padding-top: 12px; }
.cv-lib-zone .cv-topbar.cv-lib-rail {
    margin: 0 96px 12px 0;
    flex-wrap: nowrap;
}
.cv-lib-crumb {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    white-space: nowrap;
}
.cv-lib-crumb .cv-lib-sub { overflow: hidden; text-overflow: ellipsis; }
.cv-lib-crumb-dot { color: var(--cv-text-4, #61554F); }
.cv-lib-rail .cv-lib-tools { margin-left: auto; flex-wrap: nowrap; }

/* Compact Quick Capture for rails (dashboard keeps its full-size one) */
.cv-rail-capture {
    display: inline-flex; align-items: center; gap: 7px;
    flex-shrink: 0; white-space: nowrap;
}

/* Ask rail: shared geometry — same top offset and right clearance as siblings */
.cv-ask-rail { margin-top: 12px; }
.cv-ask-rail-actions { gap: 8px; }

/* ── Rail alignment: one geometry for all three pages ──────────────
   Same top offset, same height, content vertically centered; the
   lights pill centers on the same band. Change the two tokens and
   everything stays in lockstep. */
:root { --cv-rail-top: 10px; --cv-rail-h: 52px; }

#view-input.cv-main { padding-top: var(--cv-rail-top); }
.cv-lib-zone        { padding-top: var(--cv-rail-top); }
.cv-ask-rail        { margin-top:  var(--cv-rail-top); }

#view-input .cv-topbar,
.cv-lib-zone .cv-topbar.cv-lib-rail,
.cv-ask-rail,
.cv-capture-rail {
    box-sizing: border-box;
    min-height: var(--cv-rail-h);
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}
#view-input .cv-topbar { margin-top: 0; }

/* Window controls: vertically centered on the rail band. 38px = the 24px
   buttons plus the 7px top/bottom padding the island variant below sets. */
.cv-lights { top: calc(var(--cv-rail-top) + (var(--cv-rail-h) - 38px) / 2); }

/* Ask rail: identical visual finish to the shared topbar — same near-opaque
   fill (no glassy blur), same crumb tracking, same right-edge clearance. */
.cv-ask-rail {
    background: rgba(24,20,18,0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-right: calc(clamp(16px, 4vw, 48px) + 110px);
}
:root .cv-ask-rail { background: rgba(252,252,253,0.96); border-color: rgba(60,42,34,0.08); }
.cv-ask-rail-meta { letter-spacing: 0.04em; }

/* ═══════════════ N1 — Floating island navbar ═══════════════
   The three unified rails become detached floating pills with aligned
   edges; the traffic lights lose their own chrome and sit inside each
   island's right end. Content scrolls underneath. */

/* Island shape + finish — applies to all three rails.
   Rounded-rect (not pill) to match the Quick Capture bar. */
#view-input .cv-topbar,
.cv-lib-zone .cv-topbar.cv-lib-rail,
.cv-ask-rail {
    border-radius: var(--cv-r-md);
    padding-left: 20px;
    /* Inner reserve: the window controls float over this strip. Sized to the
       cluster (three 26px buttons ≈ 82px, ending 120px from the window edge)
       plus clear air, so the primary action never crowds them. */
    padding-right: 128px;
    background: rgba(24,20,18,0.96);
    border: 1px solid var(--cv-line-2);
    box-shadow: var(--cv-island-shadow);
}
:root #view-input .cv-topbar,
:root .cv-lib-zone .cv-topbar.cv-lib-rail,
:root .cv-ask-rail {
    background: rgba(252,252,253,0.97);
    border-color: rgba(60,42,34,0.09);
    /* box-shadow comes from --cv-island-shadow, which the light core-scale
       block already re-points at the light recipe. */
}

/* Aligned edges: every island starts/ends at the same offsets.
   Each container has different side padding — cancel it down to 16px. */
#view-input .cv-topbar {
    margin-left: calc(16px - 40px);
    margin-right: calc(16px - 40px);
}
.cv-lib-zone .cv-topbar.cv-lib-rail {
    margin-left: calc(16px - clamp(24px, 3.5vw, 64px));
    margin-right: calc(16px - clamp(24px, 3.5vw, 64px));
    margin-bottom: 12px;
}
.cv-ask-rail {
    margin-left: 16px;
    margin-right: 16px;
}

/* Dashboard: island floats — content scrolls under it.
   (#view-input top padding stays 0-ish via the rail token; the sticky
   inset leaves a deliberate 10px reveal band around the island.) */
#view-input.cv-main { padding-top: 0; }
#view-input .cv-topbar {
    position: sticky;
    top: var(--cv-rail-top);
    z-index: 40;
    margin-top: var(--cv-rail-top);
}

/* Library: the zone is already sticky; let the island float visually by
   making the zone's own chrome quieter (island carries the depth now). */
.cv-lib-zone { border-bottom: 0; }

/* Controls: chrome stripped — the island is the chrome now */
.cv-lights {
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 7px 0;
    right: 38px; /* 16px island margin + ~22px inner end padding */
}

/* Views without a rail under the controls (setup wizard, capture, detail):
   a whisper of backdrop so bare glyphs don't float on busy content. */
.cv-lights { position: fixed; }
.cv-lights::before {
    content: ""; position: absolute; inset: -3px -8px; z-index: -1;
    border-radius: 13px;
    background: color-mix(in oklab, var(--cv-bg-1, #1C1917) 55%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.2s ease;
}
/* Only show that backdrop on views that have no island behind the controls */
body[data-view="detail"] .cv-lights::before { opacity: 1; }

/* Island alignment fix: the responsive block at #view-input.cv-main uses
   `padding: ... !important`, which silently beat the earlier non-important
   top-padding overrides — the island sat ~28px lower than the lights.
   Match its force and its actual clamp() so the math is exact. */
#view-input.cv-main { padding-top: 0 !important; }
#view-input .cv-topbar {
    margin-top: var(--cv-rail-top) !important;
    margin-left:  calc(16px - clamp(14px, 3vw, 40px)) !important;
    margin-right: calc(16px - clamp(14px, 3vw, 40px)) !important;
    margin-bottom: 20px !important;
}

/* Library island alignment fix: #view-library.cv-main (line ~9085) forces
   `padding: ... clamp(14px,3vw,40px) ... !important`, not the clamp(24,3.5vw,64)
   the zone bleed assumed — so the zone overhung the window and the island
   clipped at the right edge while sitting 28px too low. Use the real values. */
#view-library.cv-main, #view-trash.cv-main { padding-top: 0 !important; }
.cv-lib-zone {
    margin-left:  calc(-1 * clamp(14px, 3vw, 40px));
    margin-right: calc(-1 * clamp(14px, 3vw, 40px));
    padding-left:  clamp(14px, 3vw, 40px);
    padding-right: clamp(14px, 3vw, 40px);
}
.cv-lib-zone .cv-topbar.cv-lib-rail {
    margin-left:  calc(16px - clamp(14px, 3vw, 40px));
    margin-right: calc(16px - clamp(14px, 3vw, 40px));
}

/* ═══════════════ Context Detail redesign ═══════════════
   Island rail · compact hero · tabbed main · promoted action rail ·
   conversation reader (role filter + scrubber) · prompt overlay sheet. */

/* ── Island rail (same recipe as the app navbar) ── */
.cv-detail-rail.cv-disland {
    position: sticky;
    top: var(--cv-rail-top);
    z-index: 45;
    box-sizing: border-box;
    min-height: var(--cv-rail-h);
    /* Right reserve matches the other three islands (128px). The window
       controls end 120px from the window edge, and on this view alone their
       backdrop pill is visible (.cv-lights::before, inset -8px) and reaches
       128px; the island sits 16px from that edge, so anything under 112px of
       reserve puts the last action button — delete — beneath the controls.
       Left stays 18px: .cv-dhero2 aligns the title to 16px + 18px = 34px. */
    padding: 0 128px 0 18px;
    margin: var(--cv-rail-top) calc(16px - clamp(14px, 3vw, 40px)) 18px;
    border-radius: 999px;
    background: rgba(24,20,18,0.96);
    border: 1px solid var(--cv-line-2);
    box-shadow: var(--cv-island-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
:root .cv-detail-rail.cv-disland {
    background: rgba(252,252,253,0.97);
    border-color: rgba(60,42,34,0.09);
    /* Was a flat brown shadow with no coral layer — the one island that
       didn't get the warm falloff its three siblings have. Now shared. */
}
#view-detail.cv-main { padding-top: 0 !important; }

/* ── Hero: one meta line + title + lede ── */
/* The rail island is pinned 16px from the window (negative margins), so its
   "‹ Library" content sits at a constant 16px + 18px island-padding = 34px from
   the viewport. The hero lives in the view's normal gutter (clamp(14,3vw,40)),
   which lands ~10px to the right → misaligned. Shift the hero left by the same
   amount so the title/eyebrow share the back button's left edge at every width. */
.cv-dhero2 { padding: 2px 4px 16px 0; margin-left: calc(34px - clamp(14px, 3vw, 40px)); }
.cv-dhero-meta {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.cv-dhero-pin {
    font: 600 10px/1 var(--cv-mono); letter-spacing: 0.08em;
    color: var(--cv-volt); text-transform: uppercase;
}
.cv-dhero-facts {
    font: 400 10.5px/1 var(--cv-mono); letter-spacing: 0.05em;
    color: var(--cv-text-3); margin-left: auto;
}
.cv-dhero2 .cv-dtitle { font-size: clamp(24px, 3vw, 40px); }
.cv-dhero2 .cv-dsnap { max-width: 820px; }

/* ── Sticky tab row ── */
.cv-dtabs {
    position: sticky;
    top: calc(var(--cv-rail-top) + var(--cv-rail-h) + 8px);
    z-index: 40;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 6px;
    /* Match the rail island's width (pinned 16px from the window) so the two
       stacked pills share the same left/right edges instead of being offset. */
    margin: 0 calc(16px - clamp(14px, 3vw, 40px)) 16px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--cv-bg-1, #1C1917) 86%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--cv-line);
}
:root .cv-dtabs { background: rgba(245,245,247,0.9); border-color: rgba(60,42,34,0.08); }
.cv-dtab {
    padding: 8px 16px; border: 0; border-radius: 8px; cursor: pointer;
    font: 500 12.5px/1.2 var(--cv-body); color: var(--cv-text-2);
    background: none; display: inline-flex; align-items: center; gap: 7px;
    transition: all 0.16s var(--cv-ease);
}
.cv-dtab:hover { color: var(--cv-text-0); background: rgba(255,238,230,0.04); }
.cv-dtab.on {
    color: var(--cv-text-0); font-weight: 600;
    background: rgba(255,238,230,0.06);
    box-shadow: inset 0 -2px 0 var(--cv-volt);
}
:root .cv-dtab { color: #52525b; }
:root .cv-dtab:hover { background: rgba(60,42,34,0.04); color: #111113; }
:root .cv-dtab.on { background: rgba(60,42,34,0.05); color: #111113; }
.cv-dtab-n {
    font: 500 9.5px/1 var(--cv-mono); color: var(--cv-text-3);
    border: 1px solid var(--cv-line); border-radius: 99px; padding: 2px 7px;
}
.cv-dtab.on .cv-dtab-n { color: var(--cv-volt); border-color: color-mix(in oklab, var(--cv-volt) 35%, transparent); }
/* Title appears in the bar once the hero scrolls away */
.cv-dtabs-title {
    max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
    text-overflow: ellipsis; flex-shrink: 1;
    font: 600 12.5px/1.2 var(--cv-body); color: var(--cv-text-0);
    padding: 0; transition: max-width 0.3s var(--cv-ease), opacity 0.25s var(--cv-ease), padding 0.3s var(--cv-ease);
}
.cv-dtabs.scrolled .cv-dtabs-title { max-width: 320px; opacity: 1; padding: 0 10px 0 12px; }
:root .cv-dtabs-title { color: #111113; }

/* ── Tab panels ── */
.cv-dtab-panel[hidden] { display: none; }
.cv-dtab-panel { animation: cv-rise 0.3s var(--cv-ease); }

/* ── Conversation reader ── */
.cv-conv-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cv-conv-filter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line); }
:root .cv-conv-filter { background: rgba(60,42,34,0.03); border-color: rgba(60,42,34,0.08); }
.cv-conv-chip {
    padding: 5px 13px; border: 0; border-radius: 7px; cursor: pointer;
    font: 500 11.5px/1.2 var(--cv-body); color: var(--cv-text-2); background: none;
    transition: all 0.15s var(--cv-ease);
}
.cv-conv-chip.on { background: rgba(255,238,230,0.07); color: var(--cv-text-0); }
:root .cv-conv-chip { color: #52525b; }
:root .cv-conv-chip.on { background: #fff; color: #111113; box-shadow: 0 1px 3px rgba(60,42,34,0.1); }
.cv-conv-count { margin-left: auto; font: 400 10px/1 var(--cv-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cv-text-3); }

.cv-conv-wrap { position: relative; padding-right: 22px; }
.cv-chat[data-role-filter="user"] .cv-msg-ai   { display: none; }
.cv-chat[data-role-filter="ai"]   .cv-msg-user { display: none; }

.cv-conv-scrub {
    position: absolute; right: 0; top: 4px; bottom: 4px; width: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    overflow: hidden;
}
.cv-scrub-dot {
    width: 7px; height: 7px; min-height: 5px; border-radius: 50%;
    border: 0; padding: 0; cursor: pointer; flex: 0 1 auto;
    background: color-mix(in oklab, var(--cv-line-2) 80%, transparent);
    transition: transform 0.15s var(--cv-ease), background 0.15s var(--cv-ease);
}
.cv-scrub-dot.u { background: color-mix(in oklab, var(--cv-volt) 60%, transparent); }
.cv-scrub-dot:hover { transform: scale(1.5); background: var(--cv-volt); }

/* Code tab: snippet gallery */
.cv-dtab-panel[data-dpanel="code"] .cv-snips {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.cv-dtab-panel[data-dpanel="code"] .cv-snip { min-width: 0; }

/* ── Aside: promoted action card + ask bridge ── */
/* This card used to carry the accent three times over: tinted border, coral
   outer glow, coral eyebrow, on top of the accent-coloured Generate button
   inside it. One accent per card: the button. The card itself now sits on the
   plain .cv-aside-card chrome, same as Export and Files beside it. */
.cv-act2-eyebrow { display: inline-flex; align-items: center; gap: 7px; }
.cv-act2-sub { margin: 0 0 10px; font: 400 12px/1.55 var(--cv-body); color: var(--cv-text-2); }
.cv-act2 .cv-action-input {
    width: 100%; box-sizing: border-box; margin-bottom: 8px;
    padding: 8px 11px; border-radius: 9px;
    background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line);
    font: 400 12px/1.3 var(--cv-body); color: var(--cv-text-0); outline: none;
}
.cv-act2 .cv-action-input:focus { border-color: color-mix(in oklab, var(--cv-volt) 45%, transparent); }
:root .cv-act2 .cv-action-input { background: #fff; border-color: rgba(60,42,34,0.1); color: #111113; }
.cv-act2 .cv-size-seg { display: flex; gap: 4px; margin-bottom: 10px; }
.cv-act2 .prompt-size-btn {
    flex: 1; padding: 7px 4px; border-radius: 7px; cursor: pointer;
    font: 500 11.5px/1.2 var(--cv-body); color: var(--cv-text-2);
    background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line);
    transition: all 0.15s var(--cv-ease);
}
/* Selected reads as ink on a recessed surface. It was coral-on-coral, which
   competed with the Generate button directly beneath it for the same meaning. */
.cv-act2 .prompt-size-btn.on {
    color: var(--cv-text-0); font-weight: 600;
    border-color: var(--cv-line-2);
    background: var(--cv-bg-2);
}
.cv-act2 .cv-action-go {
    width: 100%; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px; border-radius: 10px; cursor: pointer;
    font: 600 12.5px/1.2 var(--cv-body); color: #0E0C0A;
    background: linear-gradient(180deg, color-mix(in oklab, var(--cv-volt) 80%, #fff), var(--cv-volt));
    border: 0; margin-bottom: 8px;
    transition: filter 0.15s var(--cv-ease), transform 0.12s var(--cv-ease);
}
.cv-act2 .cv-action-go:hover { filter: brightness(1.06); }
.cv-act2 .cv-action-go:active { transform: scale(0.98); }
.cv-act2 .cv-action-go:disabled { opacity: 0.6; cursor: default; }
/* Light mode: volt accent is near-black charcoal, so dark text would vanish — flip fg to white */
:root .cv-act2 .cv-action-go { color: #ffffff; }
:root .cv-act2 .cv-action-go svg { color: #ffffff; }
/* Sits on the coral Generate button in every theme, so it is always a light
   badge on warm ground: no per-theme flip. */
.cv-act2-kbd {
    font: 500 9px/1 var(--cv-mono); padding: 3px 6px; border-radius: 4px;
    background: rgba(255,238,230,0.22); color: rgba(255,238,230,0.95);
}
.cv-act2 .cv-action-hint { display: block; font: 400 10px/1.4 var(--cv-mono); color: var(--cv-text-3); }

.cv-askbridge-sub { margin: 0 0 10px; font: 400 11.5px/1.5 var(--cv-body); color: var(--cv-text-3); }
.cv-askbridge-go {
    width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 9px; cursor: pointer;
    font: 500 12px/1.2 var(--cv-body); color: var(--cv-text-1);
    background: rgba(255,238,230,0.04); border: 1px solid var(--cv-line);
    transition: all 0.15s var(--cv-ease); text-align: center;
}
.cv-askbridge-go:hover {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent);
    background: var(--cv-volt-dim);
}
:root .cv-askbridge-go { color: #3f3f46; border-color: rgba(60,42,34,0.1); background: rgba(60,42,34,0.03); }

/* Aside sticks below island + tabs */
.cv-daside { position: sticky; top: calc(var(--cv-rail-top) + var(--cv-rail-h) + 62px); align-self: start; }

/* ── Prompt overlay sheet ── */
.cv-prompt-sheet {
    position: fixed; inset: 0; z-index: 1600;
    background: rgba(6,5,4,0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 6vh clamp(16px, 8vw, 120px);
    overflow-y: auto;
}
.cv-prompt-sheet-card {
    max-width: 860px; margin: 0 auto;
    display: flex; flex-direction: column; max-height: 86vh;
    border-radius: var(--cv-r-lg);
    background: var(--cv-bg-2, #211D1A);
    border: 1px solid var(--cv-line-2);
    box-shadow: 0 30px 80px -20px rgba(12,9,8,0.9);
    animation: cv-rise 0.3s var(--cv-ease);
    padding: 16px 18px;
}
:root .cv-prompt-sheet { background: rgba(240,240,244,0.7); }
:root .cv-prompt-sheet-card { background: #fff; border-color: rgba(60,42,34,0.12); box-shadow: 0 24px 64px -18px rgba(60,42,34,0.3); }
.cv-prompt-sheet-card .prompt-display {
    flex: 1; min-height: 0; overflow-y: auto; margin: 12px 0 0;
}

/* ── Detail redesign fixes ──────────────────────────────────────────
   1. .cv-daside is a max-height flex column with overflow-y:auto; flex
      items shrink by default, so the taller action card made EVERY card
      compress and clip its content. Never shrink — let the aside scroll. */
.cv-daside > .cv-aside-card { flex-shrink: 0; }

/* 2. Tab panels wrap the old .cv-dmain children one level deeper, which
      lost the column gap between sections inside a panel. */
.cv-dtab-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cv-dtab-panel[hidden] { display: none !important; }

/* 3. The collection <select> moved from .cv-dmeta into the hero meta line,
      — rescope its styling so it isn't a bare native control. */
/* Detail hero — custom collection dropdown (matches the app vibe) */
.cv-coll-dd { position: relative; display: inline-flex; }
.cv-coll-dd-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11.5px/1 var(--cv-body); color: var(--cv-text-2);
    background: var(--cv-bg-3); border: 1px solid var(--cv-line);
    padding: 5px 9px; border-radius: 7px; cursor: pointer;
    transition: color .15s var(--cv-ease), border-color .15s var(--cv-ease), background .15s var(--cv-ease);
}
.cv-coll-dd-btn:hover { color: var(--cv-text-0); border-color: var(--cv-line-2); }
.cv-coll-dd-ic { color: var(--cv-text-3); flex-shrink: 0; }
.cv-coll-dd.has-coll .cv-coll-dd-btn { color: var(--cv-text-1); }
.cv-coll-dd.has-coll .cv-coll-dd-ic { color: var(--cv-volt); }
.cv-coll-dd-chev { color: var(--cv-text-4); flex-shrink: 0; transition: transform .18s var(--cv-ease), color .18s var(--cv-ease); }
.cv-coll-dd-btn[aria-expanded="true"] { border-color: var(--cv-line-2); color: var(--cv-text-0); }
.cv-coll-dd-btn[aria-expanded="true"] .cv-coll-dd-chev { transform: rotate(180deg); color: var(--cv-volt); }
:root .cv-coll-dd-btn { background: rgba(60,42,34,0.04); border-color: rgba(60,42,34,0.1); color: #52525b; }

.cv-coll-dd-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
    min-width: 180px; max-height: 280px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1px; padding: 5px;
    background: var(--cv-bg-1); border: 1px solid var(--cv-line-2); border-radius: 11px;
    box-shadow: 0 2px 6px rgba(12,9,8,0.35), 0 22px 48px -16px rgba(12,9,8,0.6);
    animation: cv-cap3-ddin .14s var(--cv-ease);
}
:root .cv-coll-dd-menu {
    background: #ffffff; border-color: rgba(60,42,34,0.10);
    box-shadow: 0 2px 6px rgba(60,42,34,0.06), 0 22px 48px -16px rgba(60,42,34,0.18);
}
.cv-coll-dd-menu[hidden] { display: none; }
.cv-coll-dd-opt {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer; white-space: nowrap;
    color: var(--cv-text-1); font: 500 12.5px/1 var(--cv-body);
    padding: 8px 10px; border-radius: 7px; transition: background .12s var(--cv-ease), color .12s var(--cv-ease);
}
.cv-coll-dd-opt:hover { background: var(--cv-bg-2); color: var(--cv-text-0); }
.cv-coll-dd-opt[aria-selected="true"] { color: var(--cv-volt); }
.cv-coll-dd-opt[aria-selected="true"]::after {
    content: ""; margin-left: auto; width: 13px; height: 13px; flex-shrink: 0; background: currentColor;
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
            mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Aside scrollbar: match the app's slim style + keep below the sticky stack */
.cv-daside { max-height: calc(100vh - var(--cv-rail-top) - var(--cv-rail-h) - 78px); }
.cv-daside::-webkit-scrollbar { width: 4px; }
.cv-daside::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.12); border-radius: 99px; }
:root .cv-daside::-webkit-scrollbar-thumb { background: rgba(60,42,34,0.16); }

/* ── Detail v2: actions-only rail + overview meta band ────────────── */
.cv-metaband {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.cv-meta-card { min-width: 0; }
.cv-record-rows { display: flex; gap: 18px; flex-wrap: wrap; }
.cv-record-row { font: 400 11px/1.4 var(--cv-mono); letter-spacing: 0.04em; color: var(--cv-text-3); }
.cv-record-row b { color: var(--cv-text-1); font-weight: 500; }
:root .cv-record-row b { color: #3f3f46; }

/* Hero tag chips: the +N tail */
.cv-tag-more { cursor: default; opacity: 0.75; }

/* Rail now holds just the two action cards — let it size naturally */
.cv-daside { max-height: none; overflow-y: visible; }

/* ═══════════════ Ask redesign (Frame 1) ═══════════════
   Question-heading + answer-card rhythm · numbered sources row above each
   answer · copy/re-ask/model footer · 760px reading column · session
   switcher re-homed as a centered command palette. Empty state unchanged. */

/* ── Reading column cap ── */
.ask-messages { max-width: 760px; margin: 0 auto; width: 100%; }
.cv-ask-composer { max-width: 792px; margin-left: auto; margin-right: auto; width: 100%; }

/* ── Question = heading, not a chat bubble ── */
.ask-msg-user { background: none; border: 0; padding: 8px 0 2px; }
.ask-msg-user .ask-msg-avatar { display: none; }
.ask-msg-user .ask-msg-body { width: 100%; max-width: none; background: none; border: 0; padding: 0; }
.ask-msg-user .ask-msg-content {
    font-family: var(--cv-display);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--cv-text-0);
    background: none; border: 0; padding: 2px 0 2px 16px;
    border-left: 3px solid var(--cv-volt);
    border-radius: 0;
}
:root .ask-msg-user .ask-msg-content { color: #111113; }
.ask-msg-user .ask-msg-actions { padding-left: 19px; }
.ask-msg-user.editing .ask-msg-edit { margin-left: 19px; }

/* ── Answer = card ── */
.ask-msg-assistant {
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    border-radius: var(--cv-r-lg);
    padding: 14px 16px;
    box-shadow: 0 1px 0 rgba(255,238,230,0.03) inset;
}
:root .ask-msg-assistant { background: rgba(255,255,255,0.9); border-color: rgba(60,42,34,0.08); }
.ask-msg-assistant .ask-msg-avatar { display: none; }
.ask-msg-assistant .ask-msg-body { width: 100%; max-width: none; }

/* ── Sources row: leads the answer, numbered to match [n] ── */
.ask-sources {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin: 0 0 12px; padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in oklab, var(--cv-line) 70%, transparent);
}
.ask-sources-label {
    font: 600 9.5px/1 var(--cv-mono); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--cv-text-3); margin-right: 4px;
}
.ask-source-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px 5px 6px; border-radius: 8px; cursor: pointer;
    font: 500 11px/1.2 var(--cv-body); color: var(--cv-text-1);
    background: rgba(255,238,230,0.03);
    border: 1px solid color-mix(in oklab, var(--src-color, var(--cv-volt)) 24%, var(--cv-line));
    transition: all 0.15s var(--cv-ease); max-width: 280px;
}
.ask-source-chip:hover {
    border-color: color-mix(in oklab, var(--src-color, var(--cv-volt)) 55%, transparent);
    background: color-mix(in oklab, var(--src-color, var(--cv-volt)) 8%, transparent);
}
:root .ask-source-chip { background: rgba(60,42,34,0.02); color: #3f3f46; }
.ask-source-n {
    width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 9px/1 var(--cv-mono);
    background: color-mix(in oklab, var(--src-color, var(--cv-volt)) 22%, transparent);
    color: var(--src-color, var(--cv-volt));
}
.ask-source-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Inline [n] hover lights its chip (and vice versa) via shared data attrs —
   the hover-highlight pairing is progressive enhancement; base styling here */
.ask-source-chip.lit {
    border-color: var(--src-color, var(--cv-volt));
    background: color-mix(in oklab, var(--src-color, var(--cv-volt)) 12%, transparent);
}

/* ── Answer footer: copy · re-ask · model ── */
.ask-answer-foot {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed color-mix(in oklab, var(--cv-line) 70%, transparent);
}
.ask-foot-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 99px; cursor: pointer;
    font: 500 11px/1.2 var(--cv-body); color: var(--cv-text-2);
    background: rgba(255,238,230,0.03); border: 1px solid var(--cv-line);
    transition: all 0.15s var(--cv-ease);
}
.ask-foot-btn:hover {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent);
    background: var(--cv-volt-dim);
}
:root .ask-foot-btn { color: #52525b; border-color: rgba(60,42,34,0.1); background: rgba(60,42,34,0.02); }
.ask-foot-model {
    margin-left: auto;
    font: 400 9.5px/1 var(--cv-mono); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cv-text-3);
}

/* ── Session switcher: centered command palette over a scrim ── */
.cv-ask-history-panel {
    position: fixed !important;
    top: 11vh; left: 50%; right: auto; bottom: auto;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 48px));
    max-height: 66vh;
    z-index: 1700;
    display: flex; flex-direction: column;
    border-radius: 16px;
    background: var(--cv-bg-2, #211D1A);
    border: 1px solid var(--cv-line-2);
    /* the scrim: one shadow covering the viewport + the lift shadow */
    box-shadow:
        0 0 0 100vmax rgba(6,5,4,0.55),
        0 30px 80px -20px rgba(12,9,8,0.9);
    animation: cv-rise 0.22s var(--cv-ease);
}
:root .cv-ask-history-panel {
    background: #fff; border-color: rgba(60,42,34,0.12);
    box-shadow: 0 0 0 100vmax rgba(120,120,130,0.35), 0 24px 64px -18px rgba(60,42,34,0.3);
}
.cv-ask-history-panel .cv-ask-history-list { flex: 1; min-height: 120px; overflow-y: auto; }
.cv-ask-history-item.kb-on {
    border-color: color-mix(in oklab, var(--cv-volt) 45%, transparent);
    background: var(--cv-volt-dim);
}
.cv-ask-switcher-new {
    margin: 8px 12px 4px; padding: 9px 12px; border-radius: 9px; cursor: pointer;
    font: 500 12px/1.2 var(--cv-body); color: var(--cv-text-2); text-align: center;
    background: rgba(255,238,230,0.03); border: 1px dashed var(--cv-line);
    transition: all 0.15s var(--cv-ease);
}
.cv-ask-switcher-new:hover {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent);
    background: var(--cv-volt-dim);
}
:root .cv-ask-switcher-new { color: #52525b; border-color: rgba(60,42,34,0.14); }
.cv-ask-switcher-hints {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 6px 12px 10px;
    font: 400 10px/1 var(--cv-mono); color: var(--cv-text-3);
}

/* ── Ask v2 fixes ───────────────────────────────────────────────────
   1. The 760px cap applied to the whole #ask-messages container also
      squeezed the welcome hero — starter card titles overflowed their
      boxes. Cap individual messages instead; the hero gets its width
      back. */
.ask-messages { max-width: none; margin: 0; width: auto; }
.ask-msg, .ask-thinking {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}
/* Safety: starter titles wrap instead of clipping at any width */
.cv-ask-starter-t { white-space: normal; overflow-wrap: anywhere; }

/* 2. Switcher polish — proper palette look, not a stretched popover. */
@keyframes cv-palette-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
.cv-ask-history-panel {
    /* center via `translate` (separate property) so the keyframe transform
       doesn't fight the centering */
    transform: none !important;
    translate: -50% 0;
    animation: cv-palette-in 0.18s var(--cv-ease) both;
    overflow: hidden;
    padding: 0;
}
.cv-ask-history-panel .cv-ask-history-head {
    padding: 14px 16px 10px;
    border-bottom: 1px solid color-mix(in oklab, var(--cv-line) 70%, transparent);
}
.cv-ask-history-panel .cv-ask-history-search { margin: 10px 12px 6px; }
.cv-ask-history-panel .cv-ask-history-list {
    padding: 4px 12px 8px;
    overscroll-behavior: contain;
    scrollbar-width: auto; /* keep webkit styling active */
}
.cv-ask-history-panel .cv-ask-history-list::-webkit-scrollbar { width: 4px; }
.cv-ask-history-panel .cv-ask-history-list::-webkit-scrollbar-track { background: transparent; }
.cv-ask-history-panel .cv-ask-history-list::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.12); border-radius: 99px; }
.cv-ask-history-panel .cv-ask-history-list::-webkit-scrollbar-button { display: none; height: 0; }
:root .cv-ask-history-panel .cv-ask-history-list::-webkit-scrollbar-thumb { background: rgba(60,42,34,0.16); }

/* Rows: roomier, actions only when the row is engaged */
.cv-ask-history-panel .cv-ask-history-item {
    border-radius: 10px;
    padding: 9px 11px;
}
.cv-ask-history-panel .cv-ask-history-item-actions { opacity: 0; transition: opacity 0.12s ease; }
.cv-ask-history-panel .cv-ask-history-item:hover .cv-ask-history-item-actions,
.cv-ask-history-panel .cv-ask-history-item:focus-within .cv-ask-history-item-actions,
.cv-ask-history-panel .cv-ask-history-item.kb-on .cv-ask-history-item-actions { opacity: 1; }

/* Footer zone reads as one piece */
.cv-ask-switcher-new {
    margin: 0 12px 6px;
    border-top: 1px solid color-mix(in oklab, var(--cv-line) 70%, transparent);
    border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: 0;
    padding: 11px 12px 9px;
    background: none;
    text-align: center;
}
.cv-ask-switcher-new:hover { background: none; }
.cv-ask-switcher-hints { padding-bottom: 12px; }

/* ═══════ Session switcher — full restyle in the volt language ═══════
   The old popover styles carried a leftover indigo accent
   (rgba(99,102,241,…)) — off-vibe against volt. Shell adopts the
   island/noir finish; entrance gets a spring; rows stagger in. */

@keyframes cv-palette-pop {
    0%   { opacity: 0; transform: translateY(-12px) scale(0.96); }
    70%  { opacity: 1; transform: translateY(1px)  scale(1.004); }
    100% { opacity: 1; transform: none; }
}
@keyframes cv-palette-row {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

.cv-ask-history-panel {
    width: min(540px, calc(100vw - 48px));
    border-radius: 18px;
    background:
        radial-gradient(420px 130px at 50% -45%, rgba(255,238,230,0.06), transparent 70%),
        linear-gradient(180deg, rgba(24,21,19,0.99), rgba(14,12,11,0.99));
    border: 1px solid var(--cv-line-2);
    box-shadow:
        0 0 0 100vmax rgba(5,4,3,0.62),
        0 1px 0 rgba(255,238,230,0.07) inset,
        0 30px 90px -20px rgba(12,9,8,0.95),
        0 14px 44px -16px color-mix(in oklab, var(--cv-volt) 16%, transparent);
    animation: cv-palette-pop 0.28s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
/* island-style top highlight line */
.cv-ask-history-panel::after {
    content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,238,230,0.22), transparent);
    pointer-events: none;
}
:root .cv-ask-history-panel {
    background: #fff;
    border-color: rgba(60,42,34,0.12);
    box-shadow: 0 0 0 100vmax rgba(90,90,100,0.35), 0 24px 64px -18px rgba(60,42,34,0.3);
}
:root .cv-ask-history-panel::after { display: none; }

/* Header: mono eyebrow + volt tick */
.cv-ask-history-panel .cv-ask-history-head { border-bottom: 0; padding: 16px 18px 4px; }
.cv-ask-history-panel .cv-ask-history-head-title {
    font-size: 10px; letter-spacing: 0.14em; color: var(--cv-text-3); gap: 9px;
}
.cv-ask-history-panel .cv-ask-history-head-title::before {
    content: ""; width: 6px; height: 6px; border-radius: 2px;
    background: var(--cv-volt); box-shadow: 0 0 8px var(--cv-volt-glow);
}
.cv-ask-history-panel .cv-ask-history-count {
    background: var(--cv-volt-dim);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 28%, transparent);
    color: var(--cv-volt);
}

/* Search: borderless palette input with a hairline under it */
.cv-ask-history-panel .cv-ask-history-search {
    margin: 0; padding: 2px 18px 10px;
    border-bottom: 1px solid color-mix(in oklab, var(--cv-line) 70%, transparent);
}
.cv-ask-history-panel .cv-ask-history-search input,
.cv-ask-history-panel .cv-ask-history-search input:focus {
    background: none; border: 0; border-radius: 0;
    padding: 8px 0 8px 26px;
    font-size: 14px; color: var(--cv-text-0);
}
:root .cv-ask-history-panel .cv-ask-history-search input { color: #111113; background: none; border: 0; }
.cv-ask-history-panel .cv-ask-history-search-ic { left: 18px; }

/* Groups + rows */
.cv-ask-history-panel .cv-ask-history-list { padding: 6px 10px 6px; }
.cv-ask-history-panel .cv-ask-history-group {
    padding: 12px 8px 5px;
    font-size: 9.5px; letter-spacing: 0.13em;
}
.cv-ask-history-panel .cv-ask-history-item {
    padding: 10px 12px;
    border-radius: 10px;
    animation: cv-palette-row 0.22s var(--cv-ease) both;
}
.cv-ask-history-panel .cv-ask-history-item:nth-child(2)  { animation-delay: 16ms; }
.cv-ask-history-panel .cv-ask-history-item:nth-child(3)  { animation-delay: 32ms; }
.cv-ask-history-panel .cv-ask-history-item:nth-child(4)  { animation-delay: 48ms; }
.cv-ask-history-panel .cv-ask-history-item:nth-child(5)  { animation-delay: 64ms; }
.cv-ask-history-panel .cv-ask-history-item:nth-child(6)  { animation-delay: 80ms; }
.cv-ask-history-panel .cv-ask-history-item:nth-child(n+7){ animation-delay: 96ms; }
.cv-ask-history-panel .cv-ask-history-item:hover { background: rgba(255,238,230,0.05); }
.cv-ask-history-panel .cv-ask-history-item.is-active {
    background: color-mix(in oklab, var(--cv-volt) 7%, transparent);
    box-shadow: inset 2px 0 0 var(--cv-volt);
}
.cv-ask-history-panel .cv-ask-history-item.kb-on {
    background: rgba(255,238,230,0.06);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cv-volt) 40%, transparent);
}
:root .cv-ask-history-panel .cv-ask-history-item:hover { background: rgba(60,42,34,0.04); }
:root .cv-ask-history-panel .cv-ask-history-item.kb-on { background: rgba(60,42,34,0.05); }

/* Empty state: volt, not indigo */
.cv-ask-history-panel .cv-ask-history-empty-ic {
    background: var(--cv-volt-dim);
    color: var(--cv-volt);
}

/* Footer hairline matches */
.cv-ask-switcher-new { border-top-color: color-mix(in oklab, var(--cv-line) 70%, transparent); }
.cv-ask-switcher-new:hover { color: var(--cv-volt); }

/* ═══════ Session switcher v3 — clean rebuild (id-scoped, final) ═══════
   Restraint over decoration: one surface, one hairline per zone, single-line
   rows. Search row IS the header. No gradients, no glow circus. */

#cv-ask-history-panel {
    width: min(560px, calc(100vw - 48px));
    top: 12vh;
    max-height: 62vh;
    border-radius: 14px;
    padding: 0;
    background: #171412;
    border: 1px solid rgba(255,238,230,0.1);
    box-shadow:
        0 0 0 100vmax rgba(5,4,3,0.6),
        0 1px 0 rgba(255,238,230,0.06) inset,
        0 32px 80px -24px rgba(12,9,8,0.9);
    animation: cv-palette-pop 0.22s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
#cv-ask-history-panel::after { display: none; } /* no top sparkle line */
:root #cv-ask-history-panel {
    background: #fff;
    border-color: rgba(60,42,34,0.12);
    box-shadow: 0 0 0 100vmax rgba(80,80,90,0.32), 0 24px 64px -20px rgba(60,42,34,0.28);
}

/* Search row = header */
#cv-ask-history-panel .cv-sw-search {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 16px;
    height: 52px; flex-shrink: 0;
    border-bottom: 1px solid rgba(255,238,230,0.07);
    color: var(--cv-text-3);
}
:root #cv-ask-history-panel .cv-sw-search { border-bottom-color: rgba(60,42,34,0.08); }
#cv-ask-history-panel .cv-sw-search input {
    flex: 1; min-width: 0;
    background: none; border: 0; outline: none; padding: 0;
    font: 400 14.5px/1.4 var(--cv-body);
    color: var(--cv-text-0);
}
#cv-ask-history-panel .cv-sw-search input::placeholder { color: var(--cv-text-3); }
:root #cv-ask-history-panel .cv-sw-search input { color: #111113; }
.cv-sw-kbd {
    font: 500 9.5px/1 var(--cv-mono); color: var(--cv-text-3);
    padding: 3px 6px; border-radius: 4px;
    border: 1px solid rgba(255,238,230,0.1); background: rgba(255,238,230,0.03);
    flex-shrink: 0;
}
:root .cv-sw-kbd { border-color: rgba(60,42,34,0.12); background: rgba(60,42,34,0.03); }

/* List */
#cv-ask-history-panel .cv-ask-history-list {
    flex: 1; min-height: 80px; overflow-y: auto;
    padding: 6px 8px;
    overscroll-behavior: contain;
}
#cv-ask-history-panel .cv-ask-history-list::-webkit-scrollbar { width: 4px; }
#cv-ask-history-panel .cv-ask-history-list::-webkit-scrollbar-track { background: transparent; }
#cv-ask-history-panel .cv-ask-history-list::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.14); border-radius: 99px; }
#cv-ask-history-panel .cv-ask-history-list::-webkit-scrollbar-button { display: none; height: 0; }
:root #cv-ask-history-panel .cv-ask-history-list::-webkit-scrollbar-thumb { background: rgba(60,42,34,0.18); }

#cv-ask-history-panel .cv-ask-history-group {
    padding: 12px 10px 5px;
    font: 600 9px/1 var(--cv-mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cv-text-3);
}
#cv-ask-history-panel .cv-ask-history-group:first-child { padding-top: 6px; }

/* Rows: one line — dot · title … date (actions replace date on engage) */
#cv-ask-history-panel .cv-ask-history-item {
    display: flex; align-items: center; gap: 10px;
    height: 38px; padding: 0 10px; margin: 0;
    border-radius: 9px; cursor: pointer;
    font: 400 13px/1.2 var(--cv-body); color: var(--cv-text-1);
    background: none; box-shadow: none; border: 0;
    animation: none;
    transition: background 0.1s ease;
}
#cv-ask-history-panel .cv-ask-history-item:hover  { background: rgba(255,238,230,0.05); }
#cv-ask-history-panel .cv-ask-history-item.kb-on  { background: rgba(255,238,230,0.07); box-shadow: none; }
:root #cv-ask-history-panel .cv-ask-history-item { color: #3f3f46; }
:root #cv-ask-history-panel .cv-ask-history-item:hover { background: rgba(60,42,34,0.04); }
:root #cv-ask-history-panel .cv-ask-history-item.kb-on { background: rgba(60,42,34,0.06); }

.cv-sw-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,238,230,0.14);
}
#cv-ask-history-panel .cv-ask-history-item.is-active .cv-sw-dot {
    background: var(--cv-volt);
    box-shadow: 0 0 7px var(--cv-volt-glow);
}
#cv-ask-history-panel .cv-ask-history-item.is-active .cv-sw-title { color: var(--cv-text-0); font-weight: 500; }
:root .cv-sw-dot { background: rgba(60,42,34,0.16); }

.cv-sw-title {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-sw-meta {
    font: 400 10px/1 var(--cv-mono); color: var(--cv-text-3);
    flex-shrink: 0;
}
.cv-sw-acts { display: none; gap: 2px; flex-shrink: 0; }
.cv-sw-acts button {
    display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 6px;
    border: 0; background: none; cursor: pointer;
    color: var(--cv-text-3);
    transition: color 0.1s ease, background 0.1s ease;
}
.cv-sw-acts button:hover { color: var(--cv-text-0); background: rgba(255,238,230,0.08); }
.cv-sw-acts button[data-act="delete"]:hover { color: #f2555a; background: rgba(242,85,90,0.12); }
.cv-sw-acts button.is-pinned { color: var(--cv-volt); }
:root .cv-sw-acts button:hover { background: rgba(60,42,34,0.06); color: #111113; }
/* date swaps out, actions swap in */
#cv-ask-history-panel .cv-ask-history-item:hover .cv-sw-meta,
#cv-ask-history-panel .cv-ask-history-item.kb-on .cv-sw-meta,
#cv-ask-history-panel .cv-ask-history-item:focus-within .cv-sw-meta { display: none; }
#cv-ask-history-panel .cv-ask-history-item:hover .cv-sw-acts,
#cv-ask-history-panel .cv-ask-history-item.kb-on .cv-sw-acts,
#cv-ask-history-panel .cv-ask-history-item:focus-within .cv-sw-acts { display: flex; }

/* Empty */
.cv-sw-empty {
    padding: 36px 20px; text-align: center;
    font: 400 12.5px/1.5 var(--cv-body); color: var(--cv-text-3);
}

/* Footer: one line — new chat left, hints right */
#cv-ask-history-panel .cv-sw-foot {
    display: flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 10px 0 6px; flex-shrink: 0;
    border-top: 1px solid rgba(255,238,230,0.07);
}
:root #cv-ask-history-panel .cv-sw-foot { border-top-color: rgba(60,42,34,0.08); }
.cv-sw-new {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: 8px;
    border: 0; background: none; cursor: pointer;
    font: 500 12px/1.2 var(--cv-body); color: var(--cv-text-2);
    transition: color 0.1s ease, background 0.1s ease;
}
.cv-sw-new:hover { color: var(--cv-volt); background: var(--cv-volt-dim); }
:root .cv-sw-new { color: #52525b; }
.cv-sw-hints {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font: 400 10px/1 var(--cv-mono); color: var(--cv-text-3);
}

/* ═══════ Ask conversation: final reconciliation ═══════════════════
   The legacy #view-ask chat layer (bubbles, avatar, full-width composer
   fade) was out-ranking the answer-engine restyle, leaving a half-old
   hybrid. These rules match its specificity and land later. */

/* Composer: the BAR goes back to full width (its bottom-fade background
   needs to span the page — capping it created a dark band). Only the
   inner pill + hint line stay capped to the reading column. */
#view-ask .ask-input-bar.cv-ask-composer {
    max-width: none;
    margin: 0;
}
#view-ask .cv-ask-composer .cv-ask-pill { max-width: 760px; margin-left: auto; margin-right: auto; }
#view-ask .cv-ask-composer .cv-ask-hint { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Question = heading (kills the right-aligned gradient bubble) */
#view-ask .ask-msg.ask-msg-user { flex-direction: row; }
#view-ask .ask-msg.ask-msg-user .ask-msg-body { flex: 1; max-width: none; }
#view-ask .ask-msg.ask-msg-user .ask-msg-content {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--cv-volt);
    font-family: var(--cv-display);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--cv-text-0);
}
:root #view-ask .ask-msg.ask-msg-user .ask-msg-content {
    background: none; border-left: 3px solid var(--cv-volt); box-shadow: none; color: #111113;
}

/* Answer: ONE card (the .ask-msg-assistant root) — kill the inner content
   bubble and the floating bolt avatar from the legacy layer. */
#view-ask .ask-msg.ask-msg-assistant .ask-msg-avatar { display: none !important; }
#view-ask .ask-msg.ask-msg-assistant .ask-msg-body { max-width: none; }
#view-ask .ask-msg.ask-msg-assistant .ask-msg-content {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* ═══════ Ask chat — editorial pass (final, #view-ask scoped) ═══════
   Zero boxes: question = headline, answer = typography on the canvas.
   The only boxed elements are source cards and the composer pill. */

/* Question: plain headline, hairline + air separating turns */
#view-ask .ask-msg.ask-msg-user { margin-top: 8px; }
#view-ask .ask-msg.ask-msg-user:not(:first-of-type) {
    margin-top: 30px; padding-top: 30px;
    border-top: 1px solid color-mix(in oklab, var(--cv-line) 65%, transparent);
}
#view-ask .ask-msg.ask-msg-user .ask-msg-content {
    border-left: 0;
    padding: 0;
    font-family: var(--cv-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--cv-text-0);
}
#view-ask .ask-msg-user .ask-msg-actions { padding-left: 0; margin-top: 6px; }
#view-ask .ask-msg.ask-msg-user.editing .ask-msg-edit { margin-left: 0; }

/* Answer: NO card — typography directly on the page */
#view-ask .ask-msg.ask-msg-assistant {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
#view-ask .ask-msg.ask-msg-assistant .ask-msg-content {
    font-size: 15px;
    line-height: 1.72;
    color: var(--cv-text-1);
}
:root #view-ask .ask-msg.ask-msg-assistant .ask-msg-content { color: #2e2e33; }

/* Meta strip: "⚡ Answer ……… model/streaming" — the question/answer seam */
.ask-meta-strip {
    display: flex; align-items: center; gap: 12px;
    margin: 14px 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid color-mix(in oklab, var(--cv-line) 65%, transparent);
}
.ask-meta-answer {
    display: inline-flex; align-items: center; gap: 7px;
    font: 600 10px/1 var(--cv-mono); letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--cv-volt);
}
.ask-meta-model {
    margin-left: auto;
    font: 400 10px/1 var(--cv-mono); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cv-text-3);
}
.ask-meta-model.streaming { color: var(--cv-volt); animation: cv-blink 1.2s infinite; }

/* Sources: label + horizontal card row AFTER the answer */
#view-ask .ask-sources {
    display: block;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
}
#view-ask .ask-sources-label {
    display: block;
    font: 600 9.5px/1 var(--cv-mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cv-text-3);
    margin-bottom: 9px;
}
.ask-sources-row {
    display: flex; gap: 8px; overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.ask-sources-row::-webkit-scrollbar { height: 4px; }
.ask-sources-row::-webkit-scrollbar-thumb { background: rgba(255,238,230,0.1); border-radius: 99px; }
#view-ask .ask-source-chip {
    flex: 0 0 180px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 9px 11px; border-radius: 10px; cursor: pointer; text-align: left;
    background: rgba(255,238,230,0.025);
    border: 1px solid var(--cv-line);
    transition: border-color 0.15s var(--cv-ease), background 0.15s var(--cv-ease), transform 0.15s var(--cv-ease);
    max-width: none;
}
#view-ask .ask-source-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--src-color, var(--cv-volt)) 50%, transparent);
    background: color-mix(in oklab, var(--src-color, var(--cv-volt)) 6%, transparent);
}
:root #view-ask .ask-source-chip { background: rgba(255,255,255,0.8); border-color: rgba(60,42,34,0.08); }
.ask-source-head { display: flex; align-items: center; gap: 6px; }
#view-ask .ask-source-n {
    width: 15px; height: 15px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 9px/1 var(--cv-mono);
    background: color-mix(in oklab, var(--src-color, var(--cv-volt)) 20%, transparent);
    color: var(--src-color, var(--cv-volt));
}
.ask-source-brand {
    font: 600 8.5px/1 var(--cv-mono); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cv-text-3);
}
#view-ask .ask-source-title {
    font: 400 11px/1.45 var(--cv-body); color: var(--cv-text-2);
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
:root #view-ask .ask-source-title { color: #52525b; }
/* [n] click flash */
@keyframes cv-src-flash {
    0%, 100% { box-shadow: none; }
    25%, 60% { box-shadow: 0 0 0 2px color-mix(in oklab, var(--src-color, var(--cv-volt)) 70%, transparent); }
}
#view-ask .ask-source-chip.flash { animation: cv-src-flash 1.1s var(--cv-ease); }

/* Footer: quiet lowercase mono actions */
#view-ask .ask-answer-foot {
    border-top: 0; padding-top: 0; margin-top: 14px; gap: 14px;
}
#view-ask .ask-foot-btn {
    padding: 0; border: 0; background: none; border-radius: 0;
    font: 500 10.5px/1 var(--cv-mono); letter-spacing: 0.05em; text-transform: lowercase;
    color: var(--cv-text-3);
}
#view-ask .ask-foot-btn:hover { color: var(--cv-volt); background: none; border: 0; }

/* Inline citations in volt */
.ask-cite a { color: var(--cv-volt); text-decoration: none; font-weight: 600; }
.ask-cite a:hover { text-decoration: underline; }

/* ═══════ Ask chat v4 — chat feel (final layer) ═══════════════════
   You = compact bubble right · Assistant = identity row + boxless reply
   left. Sources stay after the answer as one-line chips. */

/* Column tune */
#view-ask .ask-msg, #view-ask .ask-thinking { max-width: 720px; }
#view-ask .cv-ask-composer .cv-ask-pill,
#view-ask .cv-ask-composer .cv-ask-hint { max-width: 720px; }

/* You: right-aligned compact bubble (overrides the v3 headline rules) */
#view-ask .ask-msg.ask-msg-user { flex-direction: row-reverse; margin-top: 0; }
#view-ask .ask-msg.ask-msg-user:not(:first-of-type) { margin-top: 4px; padding-top: 0; border-top: 0; }
#view-ask .ask-msg.ask-msg-user .ask-msg-body { flex: 0 1 auto; max-width: min(70%, 520px); }
#view-ask .ask-msg.ask-msg-user .ask-msg-content {
    background: linear-gradient(135deg, rgba(37,32,28,0.92), rgba(24,21,19,0.92));
    border: 1px solid var(--cv-line-2);
    border-radius: 16px 16px 5px 16px;
    padding: 10px 15px;
    font-family: var(--cv-body);
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--cv-text-0);
    box-shadow: 0 1px 0 rgba(255,238,230,0.05) inset, 0 6px 18px -8px rgba(12,9,8,0.5);
    overflow-wrap: break-word;
}
:root #view-ask .ask-msg.ask-msg-user .ask-msg-content {
    background: #eef0f4; border-color: rgba(60,42,34,0.1); color: #111113; box-shadow: none;
}
#view-ask .ask-msg.ask-msg-user .ask-msg-actions { justify-content: flex-end; padding-left: 0; }

/* Assistant: identity row + indented boxless reply */
#view-ask .ask-msg.ask-msg-assistant { margin-top: 18px; margin-bottom: 26px; }
.ask-ident { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ask-ident-bolt {
    width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cv-volt-dim);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 35%, transparent);
    color: var(--cv-volt);
    box-shadow: 0 0 12px color-mix(in oklab, var(--cv-volt) 15%, transparent);
}
.ask-ident-name {
    font: 600 12px/1 var(--cv-body); color: var(--cv-text-0); letter-spacing: 0.01em;
}
:root .ask-ident-name { color: #111113; }
.ask-ident .ask-meta-model {
    margin-left: 0;
    font: 400 9.5px/1 var(--cv-mono); letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--cv-text-3);
}
/* old strip class replaced — neutralize if any cached markup renders it */
.ask-meta-strip { display: none; }

/* Reply content, sources, actions indent under the identity row */
#view-ask .ask-msg.ask-msg-assistant .ask-msg-content,
#view-ask .ask-msg.ask-msg-assistant .ask-sources,
#view-ask .ask-msg.ask-msg-assistant .ask-answer-foot { margin-left: 30px; }
#view-ask .ask-msg.ask-msg-assistant .ask-msg-content { font-size: 14.5px; line-height: 1.7; }

/* Sources: one-line chips (chat scale, not cards) */
#view-ask .ask-sources { margin-top: 16px; }
#view-ask .ask-sources-label { margin-bottom: 8px; }
.ask-sources-row { flex-wrap: wrap; overflow-x: visible; }
#view-ask .ask-source-chip {
    flex: 0 0 auto;
    flex-direction: row; align-items: center; gap: 7px;
    padding: 5px 11px 5px 6px;
    border-radius: 8px;
    max-width: 300px;
}
#view-ask .ask-source-chip:hover { transform: none; }
#view-ask .ask-source-title {
    display: block;
    font-size: 11px; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-line-clamp: unset; line-clamp: unset;
}

/* Thinking state: identity row + three pulsing dots, indented like a reply */
.ask-typing { display: flex; gap: 5px; margin-left: 30px; padding: 6px 0; }
.ask-typing i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cv-text-3);
    animation: cv-typing 1.1s ease-in-out infinite;
}
.ask-typing i:nth-child(2) { animation-delay: 0.18s; }
.ask-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes cv-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* ── Ask chat: scale-up pass — everything one notch bigger ── */
#view-ask .ask-msg, #view-ask .ask-thinking { max-width: 800px; }
#view-ask .cv-ask-composer .cv-ask-pill,
#view-ask .cv-ask-composer .cv-ask-hint { max-width: 800px; }

#view-ask .ask-msg.ask-msg-user .ask-msg-content {
    font-size: 15px;
    line-height: 1.6;
    padding: 12px 17px;
}
.ask-ident-bolt { width: 26px; height: 26px; border-radius: 8px; }
.ask-ident-bolt svg { width: 13px; height: 13px; }
.ask-ident-name { font-size: 14px; }
.ask-ident .ask-meta-model { font-size: 10.5px; }
#view-ask .ask-msg.ask-msg-assistant .ask-msg-content,
#view-ask .ask-msg.ask-msg-assistant .ask-sources,
#view-ask .ask-msg.ask-msg-assistant .ask-answer-foot,
.ask-typing { margin-left: 36px; }
#view-ask .ask-msg.ask-msg-assistant .ask-msg-content {
    font-size: 16px;
    line-height: 1.75;
}
#view-ask .ask-sources-label { font-size: 10.5px; }
#view-ask .ask-source-chip { padding: 7px 13px 7px 8px; border-radius: 9px; max-width: 340px; gap: 8px; }
#view-ask .ask-source-title { font-size: 12.5px; }
#view-ask .ask-source-n { width: 17px; height: 17px; font-size: 10px; }
#view-ask .ask-foot-btn { font-size: 12px; }
#view-ask .ask-cite a { font-size: 11px; }

/* Composer grows with the page */
#view-ask .cv-ask-pill .ask-input { font-size: 15px; }

/* ════════════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE SYSTEM
   A consolidated layer over the per-component breakpoints above. The app
   is a frameless desktop window with a floating-island rail that reserves
   ~96px on the right for the traffic-light controls, so the rails are the
   first thing to crowd as the window narrows.

   Tiers (window width):
     ≥1800  ultrawide — center dashboard content so it stays readable on 4K
     ≤1024  narrow    — sidebar auto-collapses (shell.js); crumbs truncate
     ≤860   compact   — drop cosmetic rail chrome, keep rails on one line
     ≤640   stacked   — single-column grids, stacked actions, smaller hero
     ≤460   tiny      — strip keyboard hints, fully single-column
   ════════════════════════════════════════════════════════════════════ */

/* ── Ultrawide: stop dashboard sections from spanning the whole width.
   Each section centers within a comfortable measure. The floating island
   rail keeps its own edge-bleed margins (untouched here) so it still spans
   the window. ── */
@media (min-width: 1800px) {
    .cv-dash-hero,
    .cv-dash-cmd,
    .cv-dash-bento,
    .cv-stats-grid {
        max-width: 1600px;
        margin-inline: auto;
    }
}

/* ── Narrow: sidebar is auto-collapsed by shell.js at this width. Let the
   breadcrumbs truncate with an ellipsis instead of wrapping a rail pill to
   two lines (which would inflate its rounded height). ── */
@media (max-width: 1024px) {
    .cv-breadcrumb,
    .cv-lib-crumb,
    .cv-lib-crumb .cv-lib-sub {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* ── Compact: reclaim rail width by dropping decorative chrome. ── */
@media (max-width: 860px) {
    /* Keep the rails single-line; the crumb truncation above absorbs overflow. */
    #view-input .cv-topbar,
    .cv-lib-zone .cv-topbar.cv-lib-rail { flex-wrap: nowrap; }
    .cv-lib-rail .cv-lib-tools { gap: 6px; }
}

/* ── Stacked: tiny dragged window / phone-width. Everything to one column. ── */
@media (max-width: 640px) {
    .cv-dash-hero,
    .cv-dash-bento,
    .cv-dlayout,
    .cv-dgrid { grid-template-columns: 1fr !important; }
    .cv-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Stacked, full-width action buttons */
    .cv-action-row,
    .modal-actions { flex-direction: column; }
    .cv-action-go,
    .modal-actions > * { width: 100%; justify-content: center; }

    /* Hero headline scales down (the clamp() floor is too tall here) */
    .cv-hero h1 { font-size: clamp(22px, 7vw, 34px) !important; }
}

/* ── Tiny: strip non-essential chrome so content keeps breathing room. ── */
@media (max-width: 460px) {
    .cv-stats-grid { grid-template-columns: 1fr !important; }
    .cv-nav-kbd,
    .cv-dash-ask-kbd { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   LIBRARY RAIL — container-driven crowding fix
   The library rail is a fixed-height floating pill that reserves ~96px on
   its right for the window traffic-lights. Its usable width is the content
   area (window minus sidebar), so a width media query can't tell whether
   the sidebar is expanded — when it is, the tools + Quick Capture button
   overflow the reserve and slide under the lights.

   We make the rail's zone a query container and react to its OWN width, so
   the rail degrades correctly whether the sidebar is open or collapsed.
   Degradation order: truncate crumb → iconify Quick Capture → iconify the
   tool labels + drop the crumb.
   ════════════════════════════════════════════════════════════════════ */
.cv-lib-zone { container: cv-libzone / inline-size; }

/* Staged degradation — ordered so the tool LABELS (Grid/Rows/Sort/Select)
   survive as long as possible. We shed redundant chrome first (the crumb,
   which the active sidebar item already conveys), then the sort caption,
   then iconify Quick Capture, and only collapse the tool labels to icons at
   genuinely cramped widths. Each tier reacts to the rail's own container
   width, so it degrades correctly whether the sidebar is open or collapsed. */

/* 1 — Let the breadcrumb shrink with an ellipsis instead of wrapping. */
@container cv-libzone (max-width: 980px) {
    .cv-lib-rail .cv-lib-crumb { overflow: hidden; }
}

/* 2 — Drop the breadcrumb entirely (it's the most redundant element). */
@container cv-libzone (max-width: 720px) {
    .cv-lib-rail .cv-lib-crumb { display: none; }
}

/* 3 — Hide the sort caption ("Newest"); the icon + chevron still read. */
@container cv-libzone (max-width: 600px) {
    .cv-lib-rail .cv-sort-value { display: none; }
}

/* 4 — Iconify the Quick Capture button (rightmost, collides with the
   traffic-lights first). SVG keeps its size through font-size:0. */
@container cv-libzone (max-width: 520px) {
    .cv-lib-rail .cv-rail-capture {
        gap: 0;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0;
    }
    .cv-lib-rail .cv-rail-capture svg { width: 15px; height: 15px; }
}

/* 5 — Last resort: collapse the Grid/Rows/Select labels to icons. */
@container cv-libzone (max-width: 440px) {
    .cv-lib-rail .cv-view-seg button,
    .cv-lib-rail .cv-select-mode-btn { font-size: 0; gap: 0; padding-left: 9px; padding-right: 9px; }
    .cv-lib-rail .cv-view-seg button svg,
    .cv-lib-rail .cv-select-mode-btn svg { width: 14px; height: 14px; }
}

/* ─── GPU diagnostic banner ─────────────────────────────────────────────── */
.cv-gpu-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 18px 0;
    padding: 11px 14px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    color: var(--text-primary);
}
.cv-gpu-banner[hidden] { display: none; }
.cv-gpu-banner-ic {
    width: 20px; height: 20px;
    color: var(--warning);
    flex-shrink: 0;
}
.cv-gpu-banner-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cv-gpu-banner-title { font-size: 13px; font-weight: 600; }
.cv-gpu-banner-text { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.cv-gpu-banner-fix {
    flex-shrink: 0;
    background: var(--warning);
    color: #1a1207;
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: filter var(--transition);
}
.cv-gpu-banner-fix:hover { filter: brightness(1.08); }
.cv-gpu-banner-fix:disabled { opacity: 0.6; cursor: default; }
.cv-gpu-banner-dismiss {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
}
.cv-gpu-banner-dismiss:hover { color: var(--text-primary); background: var(--bg-hover); }


/* ─── Drop-to-import overlay ─────────────────────────────────────────────
   Shown while a file is dragged over the window. Full-window rather than a
   drop target the user has to find: receiving a shared folder should not
   require knowing which pane owns imports. pointer-events stay off so the
   overlay can never swallow the drop it is advertising. */
.cv-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 11, 9, 0.72);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.cv-drop-overlay.visible { opacity: 1; }
.cv-drop-card {
    padding: 32px 44px;
    border-radius: 16px;
    border: 2px dashed var(--cv-accent, var(--coral));
    background: var(--cv-bg-1, #1C1917);
    text-align: center;
}
.cv-drop-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--cv-text-1, #B6A79F);
    margin-bottom: 6px;
}
.cv-drop-sub {
    font-size: 13px;
    color: var(--cv-text-3, #8A7A72);
}
@media (prefers-reduced-motion: reduce) {
    .cv-drop-overlay { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — flatten the texture and shadow layers
   ══════════════════════════════════════════════════════════════════
   Light is the default theme, and it was reading dull and shadowy for
   two separate reasons, both inherited from a design built dark-first:

   1. TEXTURE. Three translucent layers sat on top of the paper — a 48px
      blueprint grid on .main-content, a 32px dot grid on #app::before,
      and two radial ambient washes. Each is nearly invisible on a near
      black ground; stacked on #FCFAF9 they add up to a grey film over
      the whole page, which is exactly what "dull" looks like.

   2. SHADOW. The topbar carried a 30px drop plus a coral-tinted 24px
      bloom, and every card carried --cv-shadow-card. Dark UIs need
      shadow to separate surfaces; on paper, a hairline does it, and the
      shadows just smudge.

   Light mode is now flat: warm paper, white cards, one crisp --rule
   hairline. Dark keeps its texture and depth untouched.               */

/* 1 — one texture layer, not three: the marketing site's dot dither (20px
   grid, 1px dots) and nothing else. The three stacked layers this replaced
   were the "grey film" problem above; a single sparse dot pattern on paper
   reads as texture rather than dirt, and matches what the site shows. */
:root .main-content,
:root[data-vibe="noir"] .main-content {
    background-color: var(--paper);
    background-image: radial-gradient(rgba(214,163,150,0.5) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
    background-repeat: repeat;
}
:root #app.app-container::before,
:root[data-vibe="noir"] #app.app-container::before { display: none; }
:root .cv-ambient,
:root[data-vibe="noir"] .cv-ambient { background: none; }

/* 2 — no drop shadows; hairlines carry the separation */
:root {
    --cv-shadow-card: none;
    --cv-shadow-card-hover: none;
}
:root .cv-dash-panel,
:root .cv-statstrip,
:root[data-vibe="noir"] .cv-statstrip,
:root .cv-card,
:root .cv-pipeline,
:root .cv-dash-ask,
:root .cv-pin-card:hover,
:root #view-input .cv-topbar,
:root .cv-lib-zone .cv-topbar.cv-lib-rail,
:root .cv-ask-rail,
:root[data-vibe="noir"] .cv-topbar {
    box-shadow: none;
}

/* 3 — surfaces read as surfaces: white card, warm paper, crisp rule */
:root .cv-dash-panel,
:root .cv-statstrip,
:root[data-vibe="noir"] .cv-statstrip {
    background: var(--surface);
    border: 1px solid var(--rule);
}
:root .cv-topbar,
:root[data-vibe="noir"] .cv-topbar,
:root #view-input .cv-topbar {
    background: var(--surface);
    border-color: var(--rule);
}

/* 4 — the primary button keeps its lift; it is the one raised thing */
:root .cv-primary,
:root[data-vibe="noir"] .cv-primary {
    box-shadow: 0 1px 2px rgba(216,69,31,0.22);
}

/* ════════════════════════════════════════════════════════════════════
   SPLASH — dashboard vibe
   ════════════════════════════════════════════════════════════════════
   This screen replaced a dark "installer wizard" look hardcoded to
   #14141a that ignored the theme entirely, so the first thing a
   light-mode user saw was a black panel that then cut to warm paper.

   Everything below is token-driven, so it follows whatever palette the
   app is already in, and it borrows the dashboard's own vocabulary: the
   hero line with the brand ramp on the accent word (.cv-hero h1
   .voltword), the uppercase micro-label (.cv-hero-date), and the
   surface/rule/shadow trio used by .cv-statstrip.

   Written last in the sheet on purpose — it has to land after both the
   polish layer and the :root block, which hardcode the
   colours this is undoing. Selectors are matched at :root
   specificity wherever that block would otherwise win.
   ════════════════════════════════════════════════════════════════════ */

/* ── Ground ─────────────────────────────────────────────────────── */
.setup-wizard {
    background:
        radial-gradient(900px 520px at 18% 8%, color-mix(in oklab, var(--coral) 7%, transparent), transparent 58%),
        radial-gradient(760px 480px at 84% 92%, color-mix(in oklab, var(--brand-orange) 6%, transparent), transparent 62%),
        var(--paper);
    transition: opacity 0.4s var(--cv-ease);
}

/* Dot field, vignetted. Warm ink on light, warm light on dark. */
.setup-wizard::before {
    background-image: radial-gradient(circle, color-mix(in oklab, var(--ink) 12%, transparent) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
    animation: setupBgFade 1.2s ease 0.1s both;
}

/* One quiet ring instead of the old orbital pair */
.setup-wizard::after {
    width: 720px; height: 720px; margin: -360px 0 0 -360px;
    border: 1px solid var(--rule);
    opacity: 0.55;
}

/* Leaving — replaces the inline opacity transition setup.js used to set */
.setup-wizard.setup-leaving { opacity: 0; pointer-events: none; }

/* ── Shell ──────────────────────────────────────────────────────── */
.setup-shell,
:root .setup-shell {
    max-width: 500px;
    padding: 34px 36px 30px;
    gap: 22px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--cv-r-xl);
    box-shadow:
        0 2px 6px rgba(60,42,34,0.05),
        0 28px 70px -24px rgba(60,42,34,0.28);
}

/* Hairline catch along the top edge, in the brand ramp */
.setup-shell::before {
    left: 12%; right: 12%;
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--coral) 55%, transparent), transparent);
}

/* ── Header ─────────────────────────────────────────────────────── */
/* The mark ships on its own paper ground, so it needs no plate behind it —
   the old rule painted a #09090b square that showed as a black rim. */
.setup-logo-wrap,
:root .setup-logo-wrap {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 0 0 1px var(--rule), 0 4px 12px -4px rgba(60,42,34,0.25);
}

.setup-logo-wrap img { width: 36px; height: 36px; }

/* Reset the old white-gradient text clip: it made "Context" invisible the
   moment the page was in light mode. */
.setup-title {
    font-family: var(--cv-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.03em;
    background: none;
    color: var(--ink);
    -webkit-text-fill-color: currentColor;
}

/* "Move" carries the brand ramp — the wordmark's own two-tone lockup.
   Shared with the sidebar brand row. */
.cv-wm-move {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.setup-badge {
    font-family: var(--cv-mono);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--sunk);
    border: 1px solid var(--rule);
    box-shadow: none;
    padding: 4px 9px;
}

/* ── Indeterminate bar ──────────────────────────────────────────── */
.setup-ibar {
    height: 2px;
    background: var(--rule-soft);
    margin-top: -10px;
}

.setup-ibar-fill {
    width: 32%;
    background: linear-gradient(90deg, transparent, var(--coral), var(--brand-orange), transparent);
}

/* ── Hero ───────────────────────────────────────────────────────── */
.setup-hero { gap: 8px; }

.setup-hero-heading {
    font-family: var(--cv-body);
    font-size: clamp(26px, 3.2vw, 34px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    background: none;
    color: var(--ink);
    -webkit-text-fill-color: currentColor;
}

/* Same italic-serif-on-brand-ramp accent as the dashboard greeting. */
.setup-hero-accent {
    font-family: var(--cv-body);
    font-style: italic;
    font-weight: 700;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding-right: 0.06em;
}

.setup-hero-sub {
    font-family: var(--cv-body);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--copy);
}

/* ── Status card ────────────────────────────────────────────────── */
.setup-card,
:root .setup-card {
    padding: 14px 16px;
    background: var(--sunk);
    border: 1px solid var(--rule);
    border-radius: var(--cv-r-md);
    box-shadow: none;
}

/* No hover affordance — nothing here is clickable. */
.setup-card::after { display: none; }

.setup-step.pending.setup-card::before {
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--coral) 45%, transparent), transparent);
}

.setup-step.ok.setup-card,
:root .setup-step.ok.setup-card {
    border-color: color-mix(in oklab, var(--ok) 40%, transparent);
    background: color-mix(in oklab, var(--ok) 6%, var(--surface));
    box-shadow: none;
}

.setup-step.warn.setup-card,
:root .setup-step.warn.setup-card {
    border-color: color-mix(in oklab, var(--danger) 38%, transparent);
    background: color-mix(in oklab, var(--danger) 5%, var(--surface));
    box-shadow: none;
}

.setup-card-icon,
:root .setup-step.pending .setup-card-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--muted);
    box-shadow: none;
    animation: none;
}

.setup-step.ok .setup-card-icon {
    color: var(--ok);
    background: color-mix(in oklab, var(--ok) 10%, var(--surface));
    border-color: color-mix(in oklab, var(--ok) 30%, transparent);
}

.setup-step.warn .setup-card-icon {
    color: var(--danger);
    background: color-mix(in oklab, var(--danger) 9%, var(--surface));
    border-color: color-mix(in oklab, var(--danger) 28%, transparent);
}

.setup-card-name {
    font-family: var(--cv-body);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.setup-step.ok   .setup-card-name,
.setup-step.warn .setup-card-name { color: var(--ink); }

/* Mono, uppercase — the state reads as a label, not as prose. */
.setup-card-desc {
    font: 400 10px/1.4 var(--cv-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.setup-step.ok   .setup-card-desc { color: var(--ok); }
.setup-step.warn .setup-card-desc { color: var(--danger); }

/* ── State dot ──────────────────────────────────────────────────── */
.setup-step.pending .setup-card-dot,
:root .setup-step.pending .setup-card-dot {
    background: var(--coral);
}
.setup-step.ok .setup-card-dot {
    background: var(--ok);
    box-shadow: 0 0 8px color-mix(in oklab, var(--ok) 55%, transparent);
}
.setup-step.warn .setup-card-dot {
    background: var(--danger);
    box-shadow: 0 0 8px color-mix(in oklab, var(--danger) 50%, transparent);
}

.setup-step.pending .setup-card-state::before {
    border-color: color-mix(in oklab, var(--coral) 45%, transparent);
}
.setup-step.ok   .setup-card-state::before { background: color-mix(in oklab, var(--ok) 14%, transparent); }
.setup-step.warn .setup-card-state::before { background: color-mix(in oklab, var(--danger) 13%, transparent); }

/* ── Footer ─────────────────────────────────────────────────────── */
.setup-footer { gap: 12px; padding-top: 2px; }

.setup-status-text {
    font-family: var(--cv-body);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

.setup-skip-btn {
    background: var(--sunk);
    border: 1px solid var(--rule);
    color: var(--copy);
    box-shadow: none;
}
.setup-skip-btn:hover {
    background: var(--surface);
    border-color: var(--rule-strong);
    color: var(--ink);
}

/* Respect a reduced-motion preference: the splash is the one screen a user
   cannot dismiss, so it must not be the one that makes them queasy. */
@media (prefers-reduced-motion: reduce) {
    .setup-wizard::before,
    .setup-wizard::after,
    .setup-ibar-fill,
    .setup-shell,
    .setup-shell > *,
    .setup-step.pending.setup-card::before,
    .setup-step.pending .setup-card-state::before,
    .setup-step.pending .setup-card-dot {
        animation: none !important;
    }
}

/* ================================================================
   Search result provenance + Recycle Bin
   ================================================================ */

/* Why a result matched. Small and quiet: it explains the list without
   competing with the title or the highlighted snippet above it. */
.cv-match-chip {
    display: inline-flex; align-items: center;
    padding: 2px 7px; border-radius: 100px;
    font: 500 10px/1.5 var(--cv-body);
    color: var(--cv-text-3);
    background: rgba(255,238,230,0.05);
    border: 1px solid var(--cv-line);
    white-space: nowrap;
}
.cv-match-chip.strong {
    color: var(--cv-accent, #ff7a52);
    border-color: color-mix(in oklab, var(--cv-accent, #ff7a52) 35%, transparent);
    background: color-mix(in oklab, var(--cv-accent, #ff7a52) 12%, transparent);
}
/* A fuzzy hit is a guess, and it should look like one. */
.cv-match-chip.soft { font-style: italic; opacity: 0.85; }
:root .cv-match-chip { background: rgba(60,42,34,0.04); }

/* -- Recycle Bin --------------------------------------------------- */
.cv-trash-bar { display: flex; align-items: center; gap: 8px; }
.cv-trash-selcount {
    font: 500 12px/1 var(--cv-body); color: var(--cv-text-3);
    margin-right: 4px;
}
.cv-trash-bar .cv-bulk-btn { border-color: var(--cv-line); }
.cv-trash-bar .cv-bulk-btn:disabled {
    opacity: 0.4; cursor: default; background: transparent;
}

.cv-trash-card { cursor: pointer; }
.cv-trash-card .cv-card-check { opacity: 1; }
/* The select box lives in the card's top-right corner, so the countdown that
   shares that line has to stop short of it. */
.cv-trash-card .cv-card-top { padding-right: 26px; }

/* The countdown is the reason this view exists, so it sits in the card's top
   line rather than the footer, and only turns red when it is actually close. */
.cv-trash-expiry {
    margin-left: auto;
    font: 500 10px/1.5 var(--cv-mono);
    color: var(--cv-text-3);
    letter-spacing: 0.02em;
}
.cv-trash-expiry.urgent { color: var(--danger); }

.cv-trash-files {
    font: 500 10px/1.5 var(--cv-body); color: var(--cv-text-3);
    margin-right: auto;
}

.cv-trash-action {
    padding: 5px 10px; border-radius: 100px;
    background: transparent; border: 1px solid var(--cv-line);
    color: var(--cv-text-1);
    font: 500 11px/1 var(--cv-body); cursor: pointer;
    transition: all 0.18s var(--cv-ease);
}
.cv-trash-action:hover { background: rgba(255,238,230,0.06); }
:root .cv-trash-action:hover { background: rgba(60,42,34,0.05); }
.cv-trash-action.danger:hover {
    color: oklch(0.78 0.18 25);
    border-color: color-mix(in oklab, oklch(0.78 0.18 25) 40%, transparent);
    background: color-mix(in oklab, oklch(0.78 0.18 25) 12%, transparent);
}

/* Sidebar bin count: same rhythm as the keyboard-shortcut chips it sits
   alongside, so the nav column keeps one right edge. */
.cv-nav-count {
    margin-left: auto;
    min-width: 18px; text-align: center;
    font: 600 10px/1 var(--cv-body);
    padding: 3px 6px; border-radius: 100px;
    color: var(--cv-text-2);
    background: rgba(255,238,230,0.07);
    border: 1px solid var(--cv-line);
}
:root .cv-nav-count {
    background: rgba(60,42,34,0.05); border-color: rgba(60,42,34,0.09);
}

/* The bin shows its select boxes permanently (there is no select *mode* here),
   so an unchecked box has to read as an empty control in both themes. The
   shared .cv-card-check only ever appears inside the library's select mode,
   where its dark unchecked fill goes unnoticed on light backgrounds. */
:root .cv-trash-card .cv-card-check:not(:checked) {
    background: rgba(255,255,255,0.92);
    border-color: rgba(60,42,34,0.22);
}






/* ================================================================
   Buzzer page — the shelf of alert sounds + your own upload.

   Everything below is built from the shared --cv-* tokens, which are
   redefined per theme further up, so there are no per-theme repeats
   here beyond the two places a raw alpha is genuinely needed.
   ================================================================ */

.cv-buzz-now {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin: 12px 0 0;
    border-radius: var(--cv-r-md);
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    box-shadow: var(--cv-shadow-card);
}
.cv-buzz-now-ic {
    width: 40px; height: 40px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 12px;
    color: var(--cv-volt);
    background: color-mix(in oklab, var(--cv-volt) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--cv-volt) 22%, transparent);
}
.cv-buzz-now-ic svg { width: 19px; height: 19px; }
.cv-buzz-now-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cv-buzz-now-label {
    font: 600 10px/1 var(--cv-mono);
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--cv-text-3);
}
.cv-buzz-now-tx b { font: 600 14.5px/1.2 var(--cv-body); color: var(--cv-text-0); }
.cv-buzz-now-tx small { font: 400 12.5px/1.45 var(--cv-body); color: var(--cv-text-3); }
.cv-buzz-now-acts { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.cv-buzz-now-acts .cv-bulk-btn { border-color: var(--cv-line); }

/* ── Section headings ─────────────────────────────────────── */
.cv-buzz-sec-label {
    font: 600 11px/1 var(--cv-mono);
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cv-text-3);
    margin: 30px 0 8px;
}
/* ── The shelf ────────────────────────────────────────────── */
.cv-buzz-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.cv-buzz-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 15px;
    border-radius: var(--cv-r-md);
    background: var(--cv-surface);
    border: 1px solid var(--cv-line);
    box-shadow: var(--cv-shadow-card);
    transition: border-color 0.18s var(--cv-ease), box-shadow 0.18s var(--cv-ease);
}
.cv-buzz-card:hover {
    border-color: var(--cv-line-2);
    box-shadow: var(--cv-shadow-card-hover);
}
/* The chosen one wears the accent on its edge rather than its fill — the fill
   is already doing the work of separating cards from the page. */
.cv-buzz-card.selected {
    border-color: color-mix(in oklab, var(--cv-volt) 55%, var(--cv-line));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--cv-volt) 22%, transparent);
}

.cv-buzz-card-head { display: flex; align-items: center; gap: 11px; }
.cv-buzz-card-name {
    flex: 1; min-width: 0;
    font: 600 14px/1.2 var(--cv-body); color: var(--cv-text-0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Indented to hang under the name, not the play button — the blurb belongs to
   the title, and the button column is a control gutter. */
.cv-buzz-card-blurb {
    margin: 0 0 0 45px;
    font: 400 12.5px/1.45 var(--cv-body);
    color: var(--cv-text-3);
}

/* Play / stop — one button, two icons, swapped on .playing so the control
   never changes size mid-preview. */
.cv-buzz-play {
    width: 34px; height: 34px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--cv-inset);
    border: 1px solid var(--cv-line);
    color: var(--cv-text-1);
    cursor: pointer;
    transition: all 0.18s var(--cv-ease);
}
.cv-buzz-play:hover {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 45%, var(--cv-line));
    transform: scale(1.06);
}
.cv-buzz-play svg { width: 12px; height: 12px; grid-area: 1 / 1; }
.cv-buzz-play .cv-buzz-play-stop { display: none; }
.cv-buzz-card.playing .cv-buzz-play {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 55%, var(--cv-line));
    background: color-mix(in oklab, var(--cv-volt) 10%, var(--cv-inset));
}
.cv-buzz-card.playing .cv-buzz-play-go { display: none; }
.cv-buzz-card.playing .cv-buzz-play-stop { display: block; }

.cv-buzz-use {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    border-radius: 100px;
    background: transparent;
    border: 1px solid var(--cv-line-2);
    color: var(--cv-text-1);
    font: 600 11.5px/1 var(--cv-body);
    cursor: pointer;
    transition: all 0.18s var(--cv-ease);
}
.cv-buzz-use svg { width: 11px; height: 11px; }
.cv-buzz-use:hover:not(:disabled) {
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 55%, var(--cv-line-2));
}
.cv-buzz-use:disabled {
    cursor: default;
    color: var(--cv-volt);
    border-color: color-mix(in oklab, var(--cv-volt) 40%, transparent);
    background: color-mix(in oklab, var(--cv-volt) 10%, transparent);
}

.cv-buzz-empty {
    font: 400 13px/1.5 var(--cv-body);
    color: var(--cv-text-3);
    margin: 0;
}

.cv-buzz-skel {
    min-height: 62px;
    border-radius: var(--cv-r-md);
    border: 1px solid var(--cv-line);
    padding: 16px 14px;
}

/* ── Bring your own ───────────────────────────────────────── */
.cv-buzz-upload {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    margin: 4px 0 0;
    border-radius: var(--cv-r-md);
    background: transparent;
    /* A dashed hairline at --cv-line-2 all but vanished on the light ground;
       this is the same colour the tile borrows on hover, held at low alpha. */
    border: 1px dashed color-mix(in oklab, var(--cv-text-3) 42%, transparent);
    cursor: pointer;
    transition: all 0.18s var(--cv-ease);
}
.cv-buzz-upload:hover,
.cv-buzz-upload.dragging {
    border-color: color-mix(in oklab, var(--cv-volt) 55%, var(--cv-line-2));
    background: color-mix(in oklab, var(--cv-volt) 6%, transparent);
}
.cv-buzz-upload-ic {
    width: 40px; height: 40px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 12px;
    color: var(--cv-text-2);
    background: var(--cv-inset);
    border: 1px solid var(--cv-line);
}
.cv-buzz-upload-ic svg { width: 18px; height: 18px; }
.cv-buzz-upload:hover .cv-buzz-upload-ic,
.cv-buzz-upload.dragging .cv-buzz-upload-ic { color: var(--cv-volt); }
.cv-buzz-upload-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cv-buzz-upload-tx b { font: 600 14px/1.2 var(--cv-body); color: var(--cv-text-0); }
.cv-buzz-upload-tx small { font: 400 12.5px/1.45 var(--cv-body); color: var(--cv-text-3); }
.cv-buzz-upload-act {
    margin-left: auto; flex-shrink: 0;
    padding: 7px 13px; border-radius: 100px;
    border: 1px solid var(--cv-line-2);
    color: var(--cv-text-1);
    font: 600 11.5px/1 var(--cv-body);
}

/* The bin moved into the bottom utility group. It keeps the nav look, but the
   count badge is the only thing that should pull the eye down here. */
.cv-side-settings-anchor .nav-item.cv-nav-util { margin-bottom: 2px; }

/* The Library and Bin rails shed their breadcrumb first at narrow widths so the
   tool buttons (Grid/Rows/Sort/Select) survive — see the staged degradation
   above. The Buzzer rail carries no tools, so that tier leaves nothing behind
   but an empty bar. Keep its crumb at every width; there is nothing competing
   for the room. */
@container cv-libzone (max-width: 720px) {
    #view-buzzer .cv-lib-rail .cv-lib-crumb { display: flex; }
}