:root {
    /* ══════════════════════════════════════════════════════
       UNQUIET — Black Matte & Gem Stones
       Precious facets on dark velvet.
       ══════════════════════════════════════════════════════ */

    /* Primary palette */
    --accent-color: #E63946;        /* ruby */
    --accent-color-hover: #C4303F;   /* ruby darker */
    --primary-bg: #0D0D0D;          /* black matte */
    --primary-text: #E8E4DE;        /* warm pearl */
    --secondary-text: #9A8B70;      /* warm sand */
    --border-color: #4A90D9;        /* sapphire */
    --border-color-light: rgba(74, 144, 217, 0.2);
    --border-red: #E63946;          /* ruby */
    --border-red-light: rgba(230, 57, 70, 0.2);
    --margin-line-red: #E63946;     /* ruby */
    --input-bg: rgba(22, 22, 22, 0.9);
    --input-bg-focus: #1A1A1A;

    /* Gem accents */
    --gilt-gold: #F0C040;           /* topaz */
    --bright-gold: #FFD54F;         /* citrine */
    --stage-yellow: #F0C040;        /* topaz glow */
    --parlour-pink: #E63946;        /* ruby */
    --drape-blue: #4A90D9;          /* sapphire */
    --gem-emerald: #2EC47A;         /* emerald */
    --gem-sapphire: #4A90D9;        /* sapphire */
    --gem-ruby: #E63946;            /* ruby */
    --gem-topaz: #F0C040;           /* topaz */

    /* Semantic surfaces — gem-tinted dark */
    --surface-subtle: rgba(74, 144, 217, 0.03);
    --surface-hover: rgba(46, 196, 122, 0.04);
    --surface-raised: rgba(74, 144, 217, 0.06);
    --border-subtle: rgba(74, 144, 217, 0.10);
    --border-medium: rgba(74, 144, 217, 0.15);
    --border-strong: rgba(74, 144, 217, 0.22);
    --surface-panel: #080A10;
    --surface-input: #10141C;
    --surface-header: #06080C;
    --surface-dropdown: #0C1018;
    --text-bright: #F0ECE6;
    --nav-muted: #6A7888;
    --scrollbar-thumb: rgba(74, 144, 217, 0.15);
    --scrollbar-hover: rgba(74, 144, 217, 0.25);

    /* Shadows — deep matte glow */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 24px -4px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-lift: 0 8px 32px -6px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-dramatic: 0 12px 40px -8px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.4);

    /* Border radius */
    --border-radius: 6px;
    --border-radius-large: 10px;
    --border-radius-pill: 9999px;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 56px;

    /* Legal pad spacing - standardized */
    --legal-pad-margin: 52px;
    --legal-pad-line-height: 32px;

    /* Reading measure */
    --reading-measure: 74ch;
    --reading-measure-wide: 86ch;

    /* Score colors — vivid gem bg, black text */
    --score-red: #E63946;
    --score-red-bg: #E63946;
    --score-orange: #F0C040;
    --score-orange-bg: #F0C040;
    --score-blue: #4A90D9;
    --score-blue-bg: #4A90D9;
    --score-green: #2EC47A;
    --score-green-bg: #2EC47A;
    --score-text: #0D0D0D;

    /* Animation timing functions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-dramatic: cubic-bezier(0.22, 1, 0.36, 1);

    /* Typography */
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
}

/* ══════════════════════════════════════════════════════
   LIGHT MODE — Solar
   Golden warmth radiating from the center.
   Amber-dominant surfaces, gems as sharp accents.
   ══════════════════════════════════════════════════════ */
html[data-theme="light"] {
    --primary-bg: #FDF6E3;          /* warm solar cream */
    --primary-text: #2C1810;        /* burnt sienna ink */
    --secondary-text: #8B6914;      /* dark amber */
    --border-color: #B07D10;        /* amber border */
    --border-color-light: rgba(176, 125, 16, 0.20);
    --border-red: #C4303F;
    --border-red-light: rgba(196, 48, 63, 0.18);
    --margin-line-red: #C4303F;
    --input-bg: rgba(255, 250, 230, 0.8);
    --input-bg-focus: #FFFCF0;

    /* Gem accents — saturated against golden bg */
    --gem-sapphire: #1A5FB0;
    --gem-ruby: #C4303F;
    --gem-emerald: #187A48;
    --gem-topaz: #D49B00;
    --gilt-gold: #B8860B;
    --bright-gold: #CC9A00;
    --accent-color: #C4303F;

    /* Surfaces — golden tinted */
    --surface-subtle: rgba(176, 125, 16, 0.05);
    --surface-hover: rgba(176, 125, 16, 0.07);
    --surface-raised: rgba(176, 125, 16, 0.10);
    --border-subtle: rgba(176, 125, 16, 0.15);
    --border-medium: rgba(176, 125, 16, 0.22);
    --border-strong: rgba(176, 125, 16, 0.30);
    --surface-panel: #F5EDDA;
    --surface-input: #FFFCF0;
    --surface-header: #3C2A10;      /* dark amber header */
    --surface-dropdown: #FFFCF0;
    --text-bright: #2C1810;
    --nav-muted: #8B7850;
    --scrollbar-thumb: rgba(176, 125, 16, 0.18);
    --scrollbar-hover: rgba(176, 125, 16, 0.30);

    /* Shadows — golden amber cast */
    --shadow-light: 0 2px 8px rgba(60, 42, 16, 0.08);
    --shadow-medium: 0 4px 20px -4px rgba(60, 42, 16, 0.12), 0 2px 6px rgba(60, 42, 16, 0.05);
    --shadow-lift: 0 8px 28px -6px rgba(60, 42, 16, 0.15), 0 4px 10px rgba(60, 42, 16, 0.06);
    --shadow-dramatic: 0 12px 36px -8px rgba(60, 42, 16, 0.18), 0 4px 14px rgba(60, 42, 16, 0.08);

    --score-text: #FFFCF0;

    /* Score card backgrounds */
    --score-red: #C4303F;
    --score-red-bg: #C4303F;
    --score-orange: #D49B00;
    --score-orange-bg: #D49B00;
    --score-blue: #1A5FB0;
    --score-blue-bg: #1A5FB0;
    --score-green: #187A48;
    --score-green-bg: #187A48;
}

html[data-theme="light"] body {
    background-image:
        radial-gradient(ellipse at 50% 30%, rgba(212, 155, 0, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at center, transparent 50%, rgba(60, 42, 16, 0.04) 100%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.018'/%3E%3C/svg%3E");
}

html[data-theme="light"] ::selection {
    background: rgba(176, 125, 16, 0.25);
    color: #2C1810;
}

/* Solar — passage content */
html[data-theme="light"] .passage-content,
html[data-theme="light"] .chat-message-assistant .chat-message-text {
    color: #2C1810;
}

/* Solar — header is dark amber, logo is bright gold */
html[data-theme="light"] .header {
    border-bottom: 2px solid var(--gem-topaz);
}

html[data-theme="light"] .logo {
    color: #FFD54F;
}

html[data-theme="light"] .logo:hover {
    color: #FFE082;
}

/* Solar — dropdown */
html[data-theme="light"] .user-menu-dropdown {
    background: var(--surface-dropdown);
    border: 1px solid var(--border-medium);
}

html[data-theme="light"] .user-menu-dropdown a {
    color: var(--secondary-text);
}

html[data-theme="light"] .user-menu-dropdown a:hover {
    color: var(--primary-text);
    background: var(--surface-raised);
}

/* Solar — sidebar amber border */
html[data-theme="light"] .search-sidebar {
    border-right: 2px solid rgba(176, 125, 16, 0.18);
}

/* Solar — passage header golden border */
html[data-theme="light"] .passage-header {
    border-bottom: 2px solid var(--gem-topaz);
}

/* Solar — ASCII logo golden */
html[data-theme="light"] .search-container.search-hero-mode .search-hero-ascii {
    color: var(--gem-topaz);
}

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

/* ── Custom text selection — sapphire highlight ── */
::selection {
    background: rgba(74, 144, 217, 0.3);
    color: #fff;
}

::-moz-selection {
    background: rgba(74, 144, 217, 0.3);
    color: #fff;
}


/* Global focus states - accessibility */
:focus-visible {
    outline: 2px solid var(--border-color);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Remove outline for mouse users on specific elements */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

body {
    font-family: var(--font-mono);
    background: var(--primary-bg);
    color: var(--primary-text);
    line-height: 1.65;
    font-size: 14px;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Matte texture — subtle grain + dark vignette */
    background-image:
        radial-gradient(ellipse at center, rgba(20, 20, 20, 0) 40%, rgba(0, 0, 0, 0.4) 100%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* Header */
.header {
    background: var(--surface-header);
    border-bottom: 2px solid var(--gem-sapphire);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 17px;
    font-weight: 600;
    color: var(--gem-topaz);
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 2px;
    text-transform: lowercase;
    transition: color 0.2s;
}

.logo:hover {
    color: var(--bright-gold);
}

.nav {
    display: flex;
    gap: 32px;
    align-items: center;
}

/* Theme toggle — moon/sun SVG */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    color: var(--gem-topaz);
    transition: opacity 0.15s;
}

.theme-toggle:hover {
    opacity: 0.7;
}

/* Dark mode: show moon, hide sun */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }

/* Light mode: show sun, hide moon */
html[data-theme="light"] .theme-icon-sun { display: block; }
html[data-theme="light"] .theme-icon-moon { display: none; }

.nav a {
    color: var(--nav-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
    position: relative;
}

.nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gem-topaz);
    transition: width 0.3s var(--ease-dramatic);
}

.nav a:hover::after,
.nav a.active::after {
    width: 100%;
}

.nav a:hover,
.nav a.active {
    color: var(--gem-topaz);
}

/* User Menu */
.user-menu {
    position: relative;
    display: inline-block;
}

.user-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px;
    transition: opacity 0.2s;
}

.user-menu-toggle:hover {
    opacity: 0.7;
}

.user-menu-toggle span {
    width: 16px;
    height: 1px;
    background: var(--secondary-text);
    border-radius: 0;
    transition: all 0.3s;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface-dropdown);
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    box-shadow: var(--shadow-dramatic);
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s var(--ease-out-expo);
    z-index: 1000;
}

.user-menu-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-dropdown a {
    display: block;
    padding: 12px 16px;
    color: var(--nav-muted);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s, color 0.2s;
    border-bottom: 1px solid var(--border-subtle);
}

.user-menu-dropdown a:last-child {
    border-bottom: none;
}

.user-menu-dropdown a:hover {
    background: var(--surface-raised);
    color: var(--primary-text);
}

.user-menu-dropdown a::after {
    display: none;
}

/* Main Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Search */
.search-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Search mode toggle */
.search-toggle {
    display: flex;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.search-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: var(--primary-bg);
    color: var(--secondary-text);
    font-family: var(--font-mono);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-tab:hover {
    background: var(--surface-hover);
}

.search-tab.active {
    background: var(--border-color);
    color: var(--bright-gold);
}

.search-tab:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

/* Search forms */
.search-form {
    margin-bottom: 40px;
}

.search-box {
    margin-bottom: 0;
}

.search-input {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 14px;
    background: var(--input-bg);
    color: var(--primary-text);
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.search-input::-webkit-scrollbar {
    display: none;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-text);
    box-shadow: 0 0 0 3px var(--surface-raised);
}

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

/* Select dropdown styling */
select.search-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%231B3A6B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    cursor: pointer;
}

select.search-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232A1F14' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

select.search-input option {
    background: var(--primary-bg);
    color: var(--primary-text);
    padding: 8px;
}

/* Passage lookup form */
.passage-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-group {
    display: flex;
    flex-direction: column;
}

.field-group label {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--secondary-text);
    text-transform: lowercase;
}

.field-group input[required] + label:after,
.field-group label:has(+ input[required]):after {
    content: " *";
    color: var(--gem-ruby);
}

/* Search Page Container with Sidebar */
.search-page-container {
    display: flex;
    --header-height: 49px; /* Header padding (12px * 2) + content (~25px) */
    min-height: calc(100vh - var(--header-height, 49px));
}

.search-main-layout {
    margin-left: 260px; /* Same as sidebar width */
    flex: 1;
    min-height: calc(100vh - var(--header-height, 49px));
    display: flex;
    align-items: stretch;
    min-width: 0;
    transition: margin-left 0.2s ease;
}

/* ── Session Sidebar ── */
.search-sidebar {
    width: 260px;
    background: var(--surface-panel);
    border-right: 2px solid rgba(240, 192, 64, 0.15);
    padding: 0;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: var(--header-height);
    bottom: 0;
    z-index: 10;
    font-family: var(--font-mono);
    transition: transform 0.25s var(--ease-dramatic);
}

/* ── Sidebar header ── */
.sidebar-header {
    margin-bottom: 0;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Collapse/Expand buttons ── */
.sidebar-collapse-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--secondary-text);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-collapse-btn:hover {
    background: var(--surface-raised);
    color: var(--primary-text);
    border-color: var(--border-strong);
}

.sidebar-expand-btn {
    position: fixed;
    left: 0;
    top: var(--header-height, 49px);
    width: 28px;
    height: 40px;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    background: var(--surface-dropdown);
    border: 1px solid var(--border-subtle);
    border-left: none;
    border-radius: 0 4px 4px 0;
    color: var(--secondary-text);
    cursor: pointer;
    z-index: 11;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-expand-btn:hover {
    background: var(--surface-input);
    color: var(--primary-text);
    border-color: var(--border-strong);
}

/* ── Collapsed state ── */
.sidebar-collapsed .search-sidebar {
    transform: translateX(-260px);
}

.sidebar-collapsed .search-main-layout {
    margin-left: 0;
}

.new-session-btn {
    width: 100%;
    padding: 9px 12px;
    font-size: 12px;
    text-transform: lowercase;
    font-family: var(--font-mono);
    background: rgba(230, 57, 70, 0.06);
    border: 1px solid rgba(230, 57, 70, 0.15);
    color: var(--gem-ruby);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.3px;
    text-align: left;
    font-weight: 500;
}

.new-session-btn:hover {
    background: rgba(230, 57, 70, 0.1);
    border-color: var(--gem-ruby);
    color: var(--primary-text);
}

.new-session-btn:active {
    transform: none;
    background: rgba(230, 57, 70, 0.15);
}

/* ── Section ── */
.sidebar-section {
    margin-bottom: 0;
}

.sidebar-section-title {
    font-size: 9px;
    color: var(--secondary-text);
    text-transform: uppercase;
    margin-bottom: 0;
    font-weight: 600;
    padding: 14px 16px 8px;
    letter-spacing: 1.2px;
    font-family: var(--font-mono);
    opacity: 0.5;
}

.sidebar-section-title::before {
    content: '';
}

/* ── Sessions list ── */
.sessions-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 8px;
}

.session-item {
    padding: 10px 12px;
    border-radius: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.12s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 1px;
    position: relative;
}

.session-content {
    flex: 1;
    min-width: 0;
}

.session-item:hover {
    background: var(--surface-hover);
}

.session-item.active {
    background: rgba(74, 144, 217, 0.06);
}

/* Active session — bottom accent like a tab */
.session-item.active-session {
    background: rgba(74, 144, 217, 0.08);
}

.session-item.active-session::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--gem-sapphire);
    border-radius: 1px;
}

.session-item.active-session .session-title {
    color: var(--primary-text);
    font-weight: 600;
}

.session-item.active-session .session-meta {
    color: var(--border-color);
}

/* ── Session title & meta ── */
.session-title {
    font-size: 12px;
    color: var(--primary-text);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    line-height: 1.3;
    font-weight: 400;
}

.session-meta {
    font-size: 10px;
    color: var(--secondary-text);
    font-family: var(--font-mono);
}

.session-meta::before {
    content: '';
}

/* ── Delete button ── */
.session-item .delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text);
    font-size: 13px;
    font-family: var(--font-mono);
    line-height: 1;
    border-radius: 3px;
}

.session-item:hover .delete-btn {
    opacity: 0.4;
}

.session-item .delete-btn:focus-visible {
    opacity: 1;
}

.session-item .delete-btn:hover {
    opacity: 1;
    color: var(--gem-ruby);
    background: rgba(220, 38, 38, 0.06);
}

/* ── Empty / loading states ── */
.sessions-loading,
.sessions-error,
.no-sessions {
    padding: 24px 16px;
    text-align: left;
    font-size: 11px;
    color: var(--secondary-text);
    font-style: normal;
    font-family: var(--font-mono);
    opacity: 0.5;
}

.no-sessions {
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 24px 16px;
}

.no-sessions::before {
    content: '—';
    display: inline;
    font-size: inherit;
    opacity: 0.4;
    margin-right: 6px;
    font-style: normal;
    color: var(--secondary-text);
}

/* Hero Search Layout (Empty State) */
.search-page {
    flex: 1;
    min-width: 0;
    min-height: calc(100vh - var(--header-height, 49px));
}

.search-main-layout .reading-list-rail {
    position: sticky;
    top: var(--header-height, 49px);
    align-self: flex-start;
    height: calc(100vh - var(--header-height, 49px));
    min-height: calc(100vh - var(--header-height, 49px));
}

.search-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 2rem 1rem;
}

.search-hero-content {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.search-form {
    width: 100%;
    margin-bottom: 1rem;
}

/* Assistant revolver — solid block with chevron right edge */
.assistant-revolver {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    background: var(--gem-sapphire);
    border: none;
    cursor: pointer;
    overflow: visible;
    width: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    border-radius: 4px 0 0 4px;
}

.assistant-revolver:active {
    opacity: 0.9;
}

.assistant-revolver-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.assistant-revolver-slot {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: #0D0D0D;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(100%);
    transition: none;
}

.assistant-revolver-slot.active {
    opacity: 1;
    transform: translateY(0);
}

/* Revolve animation — analog: overshoot, bounce, settle */
.assistant-revolver-slot.revolve-out {
    opacity: 0;
    transform: translateY(-120%);
    transition: opacity 0.15s ease-in, transform 0.2s ease-in;
}

.assistant-revolver-slot.revolve-in {
    animation: revolve-snap 0.45s cubic-bezier(0.34, 1.8, 0.64, 1) both;
}

@keyframes revolve-snap {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    50% {
        opacity: 1;
        transform: translateY(-6%);
    }
    75% {
        transform: translateY(2%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-input-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-input-hero {
    padding: 0.875rem 3.5rem 0.875rem 1.25rem;
    font-size: 1rem;
    border-radius: 24px;
    height: 52px;
    max-height: 200px;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.search-input-hero::-webkit-scrollbar {
    display: none;
}

.search-input-hero:focus,
.search-input-hero:not(:placeholder-shown) {
    height: auto;
    min-height: 52px;
    overflow-y: hidden;
}

.search-submit-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--border-color);
    width: 32px;
    height: 32px;
}

.search-submit-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.search-submit-btn:hover {
    background: var(--border-color);
    color: white;
    transform: none;
    box-shadow: none;
}

.search-submit-btn:hover svg {
    /* removed */
}

.search-submit-btn:active {
    opacity: 0.8;
    box-shadow: none;
}

.search-submit-btn:focus-visible {
    outline: 2px solid var(--border-color);
    outline-offset: 2px;
}

/* Search Tips — terminal help text style */
.search-tips {
    width: 100%;
    text-align: left;
    padding: 0 0 1rem 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.tips-header {
    margin: 0 0 0.75rem 0;
    font-size: 0.8rem;
    color: var(--secondary-text);
    font-family: var(--font-mono);
    font-weight: 400;
    opacity: 0.7;
}

.tips-header::before {
    content: '# ';
    color: var(--gem-topaz);
    opacity: 0.7;
}

.tips-examples {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

.tips-examples li {
    font-size: 0.8rem;
    color: var(--primary-text);
    font-family: var(--font-mono);
    margin-bottom: 0.4rem;
    position: relative;
    line-height: 1.5;
    font-style: normal;
    padding-left: 1.25rem;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 4px;
}

.tips-examples li::before {
    content: "~";
    position: absolute;
    left: 0;
    font-style: normal;
    font-weight: 700;
    color: var(--gem-ruby);
}

.tips-examples li:nth-child(2)::before { color: var(--gem-sapphire); }
.tips-examples li:nth-child(3)::before { color: var(--gem-emerald); }
.tips-examples li:nth-child(4)::before { color: var(--gem-topaz); }

.tips-examples li:hover {
    background: rgba(230, 57, 70, 0.06);
}
.tips-examples li:nth-child(2):hover {
    background: rgba(74, 144, 217, 0.06);
}
.tips-examples li:nth-child(3):hover {
    background: rgba(46, 196, 122, 0.06);
}
.tips-examples li:nth-child(4):hover {
    background: rgba(240, 192, 64, 0.06);
}

.tips-examples li:last-child {
    margin-bottom: 0;
}

/* Results Container - No min-height to prevent scrollbar on empty page */

.results-list {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem 200px 1rem; /* Extra bottom padding for sticky search bar */
}

/* Search History Styles */
.search-history {
    max-width: 1000px;
    margin: 2rem auto 1rem;
    padding: 0 1rem;
}

.search-history-title {
    font-size: 0.9rem;
    color: var(--secondary-text);
    margin-bottom: 1rem;
    text-transform: lowercase;
    font-weight: 400;
}

.search-history-item {
    padding: 1rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-red-light);
    border-radius: var(--border-radius);
    background: var(--surface-subtle);
}

.search-query-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-query-header:hover {
    background: var(--surface-hover);
}

.search-query-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.search-query-text {
    font-size: 0.95rem;
    color: var(--primary-text);
}

.search-query-count {
    font-size: 0.75rem;
    color: var(--secondary-text);
    background: var(--surface-raised);
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
}

.search-query-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-query-time {
    font-size: 0.8rem;
    color: var(--secondary-text);
}

.collapse-icon {
    font-size: 0.7rem;
    color: var(--secondary-text);
    transition: transform 0.3s ease;
}

.history-results-count {
    font-size: 0.8rem;
    color: var(--secondary-text);
}

.history-results-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    opacity: 1;
}

.history-results-list.collapsed {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
}

.passage-card-history {
    background: var(--surface-hover);
    opacity: 0.95;
    opacity: 0.8;
}

.passage-card-history:hover {
    opacity: 1;
    transform: scale(1);
}

.current-search-header {
    max-width: 1000px;
    margin: 1rem auto 0.5rem;
    padding: 0 1rem;
}

.current-search-title {
    font-size: 1rem;
    color: var(--primary-text);
    font-weight: 500;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Bottom Sticky Search Bar - Floating Style */
.search-bottom-sticky {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: 700px;
    padding: 0;
    border-radius: 24px;
    border: 2px solid var(--border-color);
    background: var(--primary-bg);
    box-shadow: var(--shadow-lift);
    z-index: 1000;
}

.search-bottom-wrapper {
    width: 100%;
}

.search-input-bottom {
    padding: 0.875rem 3.5rem 0.875rem 1.25rem;
    font-size: 1rem;
    border-radius: 24px;
    height: 52px;
    max-height: 200px;
    border: none;
    background: transparent;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    box-sizing: border-box;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.search-input-bottom::-webkit-scrollbar {
    display: none;
}

.search-input-bottom:focus,
.search-input-bottom:not(:placeholder-shown) {
    height: auto;
    min-height: 52px;
    overflow-y: auto;
}

/* Session Full Message */
.session-full-message {
    padding: 1.5rem 2rem;
    text-align: center;
}

.session-full-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.session-full-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 0;
}

.session-full-hint {
    font-size: 0.95rem;
    color: var(--secondary-text);
    margin: 0;
}

.session-full-message .btn {
    margin-top: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

/* Single Form Architecture - Mode-Based Styling */
.search-container {
    transition: all 0.3s ease;
}

/* Hero Mode - Centered, large, with example text */
.search-container.search-hero-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 2rem 1rem;
}

.search-container.search-hero-mode .search-form-wrapper {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Hero ASCII art banner — Kali-inspired block characters ── */
.search-hero-ascii {
    display: none;
}

.search-container.search-hero-mode .search-hero-ascii {
    display: block;
    /* KEEP Berkeley Mono — ASCII block art requires its exact glyph widths */
    font-family: 'Berkeley Mono', ui-monospace, monospace;
    font-size: clamp(26px, 6vw, 46px);
    line-height: 1.15;
    color: var(--gem-topaz);
    text-shadow: none;
    margin: 0 0 2.5rem 0;
    padding: 0;
    text-align: center;
    white-space: pre;
    user-select: none;
    letter-spacing: 0;
    animation: asciiReveal 0.8s var(--ease-dramatic) both;
    background: none;
    border: none;
    overflow: visible;
}

.search-container.search-results-mode .search-hero-ascii {
    display: none;
}

/* Tips now appear below input in hero mode */
.search-container.search-hero-mode .search-tips {
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 0;
    opacity: 1;
    visibility: visible;
    animation: heroElementIn 0.4s ease-out 0.45s both;
}

/* Input gets its own staggered entrance */
.search-container.search-hero-mode .search-form {
    animation: heroElementIn 0.4s ease-out 0.3s both;
}

/* Staggered hero animations */
@keyframes asciiReveal {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.97);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

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

/* Chasing border light animation */
@property --spinner-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes border-spin {
    0%   { --spinner-angle: 0deg; }
    15%  { --spinner-angle: 140deg; }
    30%  { --spinner-angle: 160deg; }
    45%  { --spinner-angle: 280deg; }
    55%  { --spinner-angle: 290deg; }
    70%  { --spinner-angle: 330deg; }
    85%  { --spinner-angle: 345deg; }
    100% { --spinner-angle: 360deg; }
}

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

.search-container.search-hero-mode .search-form {
    width: 100%;
    margin-bottom: 0;
}

.search-container.search-hero-mode .search-input-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* The > prompt is now part of the assistant dropdown */
.search-container.search-hero-mode .search-input-container::before {
    display: none;
}

.search-container.search-hero-mode .search-input {
    padding: 0.875rem 3.5rem 0.875rem 7.5rem;
    font-size: 1rem;
    border-radius: 0 4px 4px 0;
    height: 48px;
    max-height: 200px;
    border: 1px solid var(--border-medium);
    background: var(--surface-subtle);
    transition: all 0.2s var(--ease-smooth);
    font-family: var(--font-mono);
}

.search-container.search-hero-mode .search-input:focus {
    background: var(--surface-raised);
    border-color: var(--gem-emerald);
    box-shadow: none;
}

/* Responsive — scale ASCII art on small screens */
@media (max-width: 480px) {
    .search-container.search-hero-mode .search-hero-ascii {
        font-size: 16px;
        letter-spacing: 0;
    }
}

/* Results Mode - Sticky at bottom */
.search-container.search-results-mode {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: 680px;
    padding: 2px;
    border-radius: 6px;
    border: none;
    background: var(--border-medium);
    box-shadow: var(--shadow-dramatic);
    z-index: 1000;
    transition: background 0.3s;
}

.search-container.search-results-mode:focus-within {
    background: var(--gem-emerald);
}

/* Chasing light on search input while waiting */
.search-container.search-results-mode.is-searching {
    background: var(--border-medium);
}

.search-container.search-results-mode.is-searching::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from var(--spinner-angle, 0deg),
        var(--gem-emerald) 0deg,
        transparent 30deg,
        var(--border-medium) 60deg
    );
    animation: border-spin 3s ease-in-out infinite;
    z-index: 5;
    pointer-events: none;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    padding: 2px;
}

/* Hero mode — animate the input container */
.search-container.search-hero-mode.is-searching .search-input-container {
    padding: 2px;
    background: var(--border-medium);
    border-radius: 6px;
}

.search-container.search-hero-mode.is-searching .search-input-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from var(--spinner-angle, 0deg),
        var(--gem-emerald) 0deg,
        transparent 30deg,
        var(--border-medium) 60deg
    );
    animation: border-spin 3s ease-in-out infinite;
    z-index: 5;
    pointer-events: none;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    padding: 2px;
}

.search-container.search-hero-mode.is-searching .search-input {
    border: none;
    background: var(--surface-panel);
    border-radius: 4px;
}

.search-container.search-results-mode .search-form-wrapper {
    width: 100%;
    background: var(--surface-panel);
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

.search-container.search-results-mode .search-tips {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.search-container.search-results-mode .search-form {
    width: 100%;
    margin: 0;
}

.search-container.search-results-mode .search-input-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.search-container.search-results-mode .search-input-container::before {
    content: '>';
    position: absolute;
    left: 12px;
    top: 0.875rem;
    color: var(--gem-emerald);
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-mono);
    line-height: 1.5;
    z-index: 1;
    opacity: 0.8;
    pointer-events: none;
}

.search-container.search-results-mode .search-input {
    padding: 0.875rem 3.25rem 0.875rem 7.5rem;
    font-size: 0.9rem;
    border-radius: 4px;
    min-height: 48px;
    height: auto;
    max-height: 140px;
    border: none;
    background: transparent;
    resize: none;
    line-height: 1.5;
    font-family: var(--font-mono);
}

.search-container.search-results-mode .search-input::placeholder {
    color: var(--secondary-text);
    opacity: 0.4;
    font-style: normal;
}

.search-container.search-results-mode .search-submit-btn {
    position: absolute;
    right: 12px;
    bottom: 10px;
    top: auto;
}

/* Results container needs bottom padding to not be hidden by fixed search bar */
.search-results-container {
    padding-bottom: 100px;
}

.passage-card {
    border: 1px solid var(--border-red);
    border-radius: 4px;
    padding: 24px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.passage-card:hover {
    border-color: var(--gem-ruby);
}

.passage-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.passage-title {
    font-size: 14px;
    color: var(--secondary-text);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.passage-title-text {
    text-align: center;
    font-size: 27px;
    font-weight: 600;
    font-style: normal;
    color: var(--primary-text);
    text-transform: lowercase;
    margin: 0 auto var(--space-6) auto;
    max-width: var(--reading-measure);
    padding-bottom: var(--space-4);
    font-family: var(--font-mono);
    letter-spacing: 0.35px;
    line-height: 1.3;
}

.breadcrumb-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-5);
}

.breadcrumb-stickers {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: center;
}

.passage-nav-left {
    justify-self: start;
}

.passage-nav-right {
    justify-self: end;
}

/* Sticker design - refined to match legal pad aesthetic */
.title-sticker {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--border-radius-pill);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.45px;
    text-transform: lowercase;
    transition: all 0.2s var(--ease-smooth);
}

.book-sticker {
    background: rgba(74, 144, 217, 0.12);
    border: 1.5px solid var(--gem-sapphire);
    color: var(--gem-sapphire);
}

.chapter-sticker {
    background: rgba(230, 57, 70, 0.12);
    border: 1.5px solid var(--gem-ruby);
    color: var(--gem-ruby);
}

.passage-sticker {
    background: var(--gem-topaz);
    border: 1.5px solid var(--gem-topaz);
    color: #0D0D0D;
}

/* Passage Navigation */
.passage-navigation {
    font-size: 12px;
}

.nav-link {
    color: var(--border-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 5px 9px;
    border-radius: 4px;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid transparent;
}

.nav-link:hover {
    color: var(--gem-sapphire);
    background: rgba(74, 144, 217, 0.06);
    border-color: rgba(74, 144, 217, 0.15);
    transform: translateX(2px);
}

.nav-link.prev-link:hover {
    transform: translateX(-2px);
}

.passage-text {
    color: var(--primary-text);
    margin-bottom: 16px;
    line-height: 1.5;
}

.passage-actions {
    display: flex;
    gap: 12px;
}

.btn {
    padding: 8px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface-raised);
    color: var(--primary-text);
    text-decoration: none;
    font-size: 12px;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

.btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-raised);
}

.btn:active {
    opacity: 0.8;
}

.btn-primary {
    background: var(--gem-sapphire);
    border-color: var(--gem-sapphire);
    color: #fff;
}

.btn-primary:hover {
    background: #3A7BC0;
    border-color: #3A7BC0;
    color: #fff;
}

/* Passage Reading */
.passage-container {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    transition: grid-template-columns 0.3s ease;
    position: relative;
}

.passage-header {
    padding: 22px 30px;
    background: var(--surface-panel);
    position: relative;
    border-bottom: 2px solid var(--gem-topaz);
}

.passage-full {
    padding: 32px;
    padding-left: calc(var(--legal-pad-margin) + 20px);
    background: var(--primary-bg);
    min-height: 400px;
    position: relative;
}

.passage-full::before {
    content: '';
    position: absolute;
    left: var(--legal-pad-margin);
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--margin-line-red);
    opacity: 0.4;
}

.passage-content {
    font-size: 15.5px;
    line-height: 30px;
    color: var(--text-bright);
    font-family: var(--font-mono);
    max-width: var(--reading-measure);
    margin: 0 auto;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 29px,
        var(--surface-raised) 29px,
        var(--surface-raised) 30px
    );
    background-attachment: local;
}

.passage-content p {
    margin-bottom: 30px;
}

.passage-content strong {
    font-weight: 500;
}

/* Understanding Badge */
.passage-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.understanding-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    position: relative;
}

.understanding-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Read it again */
.understanding-badge.read-it-again {
    background: var(--score-red-bg);
    color: var(--score-text);
}

.understanding-badge.read-it-again::before {
    background: var(--score-text);
}

/* Read */
.understanding-badge.read {
    background: var(--score-orange-bg);
    color: var(--score-text);
}

.understanding-badge.read::before {
    background: var(--score-text);
}

/* Understood */
.understanding-badge.understood {
    background: var(--score-blue-bg);
    color: var(--score-text);
}

.understanding-badge.understood::before {
    background: var(--score-text);
}

/* Nietzsche would approve */
.understanding-badge.nietzsche-would-approve {
    background: var(--score-green-bg);
    color: var(--score-text);
}

.understanding-badge.nietzsche-would-approve::before {
    background: var(--score-text);
}

.badge-label {
    display: none;
}

.badge-score {
    font-weight: 500;
    text-transform: lowercase;
}

/* Tab System */
.tab-container {
    background: var(--primary-bg);
    overflow: hidden;
}

.tab-header {
    display: flex;
    background: transparent;
    padding-left: 0;
    position: relative;
    z-index: 10;
    overflow: visible;
    border-bottom: 1px solid var(--border-subtle);
}

.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 11px 18px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--secondary-text);
    transition: all 0.2s var(--ease-smooth);
    position: relative;
    text-transform: lowercase;
    letter-spacing: 0.3px;
}

.tab-btn:hover {
    background: var(--surface-hover);
    color: var(--primary-text);
}

.tab-btn.active {
    background: var(--primary-bg);
    color: var(--primary-text);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
}

.tab-btn:focus-visible {
    outline: 2px solid var(--border-color);
    outline-offset: -2px;
}

/* Tab color accents — gem per tab */
.tab-btn[data-tab="passage"].active {
    border-bottom-color: var(--gem-sapphire);
    color: var(--gem-sapphire);
}

.tab-btn[data-tab="summary"].active {
    border-bottom-color: var(--gem-emerald);
    color: var(--gem-emerald);
}


.tab-content {
    padding: 30px 36px;
    min-height: 400px;
    background: var(--primary-bg);
    position: relative;
}

.tab-content.active {
    display: block;
}

/* Summary Editor */
.summary-editor {
    max-width: var(--reading-measure-wide);
    margin: 0 auto;
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border-subtle);
}

.summary-header h2 {
    font-size: 16px;
    color: var(--primary-text);
    margin: 0;
    text-transform: lowercase;
    letter-spacing: 0.04em;
}

/* Pop-out button */
.pop-out-btn {
    background: transparent;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.pop-out-btn:hover {
    background: var(--surface-hover);
    border-color: var(--secondary-text);
    color: var(--primary-text);
}

/* Popped-out floating modal (textarea only) */
.summary-popout-modal {
    position: fixed;
    width: 500px;
    max-width: 90vw;
    height: 400px;
    max-height: 80vh;
    background: var(--surface-input);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    resize: both;
    overflow: hidden;
}

.popout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface-hover);
    border-bottom: 1px solid var(--border-subtle);
    cursor: move;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--secondary-text);
}

.pop-in-btn {
    background: transparent;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.pop-in-btn:hover {
    background: var(--border-subtle);
    border-color: var(--secondary-text);
    color: var(--primary-text);
}

.summary-popout-modal .summary-textarea-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: none;
    border-radius: 0;
}

.summary-popout-modal .textarea-header {
    display: none; /* Modal has its own header */
}

.summary-popout-modal .summary-textarea {
    flex: 1;
    min-height: unset;
    resize: none;
}

/* Resize grip indicator */
.summary-popout-modal::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 60%, transparent 60%, transparent 70%, rgba(255,255,255,0.15) 70%, rgba(255,255,255,0.15) 80%, transparent 80%);
    pointer-events: none;
}

.summary-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.summary-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    background: rgba(74, 144, 217, 0.1);
    color: var(--gem-sapphire);
}

.summary-textarea-wrapper {
    width: 100%;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    overflow: hidden;
}

.textarea-header {
    background: var(--surface-hover);
    padding: 8px 12px;
    font-size: 12px;
    color: var(--secondary-text);
    border-bottom: 1px solid var(--border-subtle);
}

.summary-textarea {
    width: 100%;
    padding: 16px;
    padding-left: calc(var(--legal-pad-margin) + 8px);
    border: none;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: var(--legal-pad-line-height);
    resize: vertical;
    background-color: var(--surface-input);
    background-image:
        linear-gradient(to right, transparent calc(var(--legal-pad-margin) - 4px), rgba(239, 68, 68, 0.3) calc(var(--legal-pad-margin) - 4px), rgba(239, 68, 68, 0.3) calc(var(--legal-pad-margin) - 2px), transparent calc(var(--legal-pad-margin) - 2px)),
        repeating-linear-gradient(
            transparent,
            transparent 31px,
            var(--surface-raised) 31px,
            var(--surface-raised) 32px
        );
    background-attachment: local;
    background-position-y: 0, 16px;
    color: var(--primary-text);
    min-height: 300px;
}

.summary-textarea:focus {
    outline: none;
}

.summary-textarea-wrapper:focus-within {
    border-color: var(--border-color);
    box-shadow: 0 0 0 2px var(--surface-raised);
}

.summary-actions {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.save-btn {
    background: var(--gem-sapphire);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: none;
}

.save-btn:hover {
    background: #3A7BC0;
}

.score-btn {
    background: var(--gem-ruby);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 14px;
    cursor: pointer;
    margin-left: 12px;
    transition: all 0.15s;
}

.score-btn:hover {
    background: #C4303F;
}

.score-btn:disabled {
    background: rgba(230, 57, 70, 0.15);
    color: rgba(230, 57, 70, 0.4);
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}

.save-status {
    font-size: 14px;
    color: var(--secondary-text);
    margin-left: 8px;
}

.score-status {
    margin-top: 24px;
}

.score-status.loading {
    color: var(--gilt-gold);
    font-style: italic;
    font-size: 14px;
    margin-left: 8px;
    margin-top: 0;
}

.score-status.error {
    color: var(--gem-ruby);
    font-weight: 500;
    font-size: 14px;
    margin-left: 8px;
    margin-top: 0;
}

/* Score Card Design */
.score-card {
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.3s ease-out;
    border: 1px solid;
}

/* Score-specific card colors — vivid gem bg, dark text */
.score-card.read-it-again {
    background: var(--score-red-bg);
    border-color: var(--score-red);
    color: var(--score-text);
}

.score-card.read {
    background: var(--score-orange-bg);
    border-color: var(--score-orange);
    color: var(--score-text);
}

.score-card.understood {
    background: var(--score-blue-bg);
    border-color: var(--score-blue);
    color: var(--score-text);
}

.score-card.nietzsche-would-approve {
    background: var(--score-green-bg);
    border-color: var(--score-green);
    color: var(--score-text);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.score-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid;
}

.score-card.read-it-again .score-card-header {
    background: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.15);
}

.score-card.read .score-card-header {
    background: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.15);
}

.score-card.understood .score-card-header {
    background: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.15);
}

.score-card.nietzsche-would-approve .score-card-header {
    background: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.15);
}

.score-card-header:hover {
    filter: brightness(0.97);
}

.score-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.score-icon {
    font-size: 20px;
    line-height: 1;
}

.score-badge {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.score-card.read-it-again .score-badge {
    background: rgba(0, 0, 0, 0.15);
    color: var(--score-text);
}

.score-card.read .score-badge {
    background: rgba(0, 0, 0, 0.15);
    color: var(--score-text);
}

.score-card.understood .score-badge {
    background: rgba(0, 0, 0, 0.15);
    color: var(--score-text);
}

.score-card.nietzsche-would-approve .score-badge {
    background: rgba(0, 0, 0, 0.15);
    color: var(--score-text);
}

.score-toggle-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text);
    transition: color 0.2s ease;
}

.score-toggle-btn:hover {
    color: var(--primary-text);
}

.score-toggle-btn .chevron {
    transition: transform 0.3s ease;
}

.score-toggle-btn .chevron.rotated {
    transform: rotate(-90deg);
}

.score-card-body {
    padding: 14px 16px;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.score-card-body.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/* Hide header border when body is collapsed */
.score-card-body.collapsed + * .score-card-header,
.score-card:has(.score-card-body.collapsed) .score-card-header {
    border-bottom-color: transparent;
}

.score-reasoning {
    font-size: 13px;
    line-height: 1.6;
    color: var(--score-text);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.loading {
    text-align: left;
    color: var(--gem-topaz);
    padding: 12px 16px;
    position: relative;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--surface-subtle);
    border-radius: 4px;
    margin-left: 24px;
}

.loading::after {
    content: '';
}

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

/* Skeleton loader for search results */
.skeleton-loader {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.skeleton-card {
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    padding: 24px;
    background: repeating-linear-gradient(
        transparent,
        transparent 31px,
        var(--surface-hover) 31px,
        var(--surface-hover) 32px
    );
    animation: skeleton-pulse 1.8s var(--ease-smooth) infinite;
}

.skeleton-line {
    height: 14px;
    background: var(--border-subtle);
    border-radius: 3px;
    margin-bottom: 12px;
}

.skeleton-line:last-child {
    width: 60%;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.no-results {
    text-align: center;
    color: var(--secondary-text);
    padding: 48px 24px;
    font-style: italic;
    border: 1px dashed var(--border-color-light);
    border-radius: var(--border-radius);
    margin: 24px;
}

.no-results::before {
    content: "~";
    display: block;
    font-size: 2rem;
    opacity: 0.3;
    margin-bottom: 12px;
    font-style: normal;
}

/* Loading states */
.htmx-indicator {
    display: none;
    opacity: 0;
    transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator {
    display: block;
    opacity: 1;
}
.htmx-request.htmx-indicator {
    display: block;
    opacity: 1;
}

/* Custom Scrollbars - Consistent across app */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Hide all scrollbars completely */
.passage-container,
.passage-full,
.search-results,
.passages-progress-list {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.passage-container::-webkit-scrollbar,
.passage-full::-webkit-scrollbar,
.search-results::-webkit-scrollbar,
.passages-progress-list::-webkit-scrollbar {
    display: none; /* Webkit browsers (Chrome, Safari, Edge) */
}

/* Utility classes */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* New Note Input Design */
.note-input-container {
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
}

.note-input-wrapper {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.note-greeting {
    text-align: center;
    margin-bottom: 32px;
}

.note-greeting h1 {
    font-size: 32px;
    font-weight: 400;
    color: var(--primary-text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.note-greeting .greeting-icon {
    font-size: 28px;
}

.note-greeting p {
    font-size: 16px;
    color: var(--secondary-text);
}

.note-main-input {
    width: 100%;
    position: relative;
    background: var(--input-bg);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
}

.note-main-input {
    background-image: repeating-linear-gradient(
        transparent,
        transparent 31px,
        var(--surface-raised) 31px,
        var(--surface-raised) 32px
    );
    background-attachment: local;
    background-position-y: 24px;
}

.note-main-input::before {
    content: '';
    position: absolute;
    left: var(--legal-pad-margin);
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--margin-line-red);
    opacity: 0.4;
    pointer-events: none;
    border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
}

.note-main-input:focus-within {
    border-color: var(--border-color);
    box-shadow: var(--shadow-medium);
    background: var(--input-bg-focus);
}

.note-main-textarea {
    width: 100%;
    min-height: 120px;
    max-height: 400px;
    padding: 24px;
    padding-left: calc(var(--legal-pad-margin) + 16px);
    border: none;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: var(--legal-pad-line-height);
    color: var(--primary-text);
    resize: none;
    outline: none;
}

.note-main-textarea::placeholder {
    color: var(--secondary-text);
    opacity: 0.7;
}

.note-input-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    padding-left: 64px;
    border-top: 1px solid var(--border-color-light);
}

.note-control-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.note-attachment-btn {
    background: none;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--secondary-text);
    transition: all 0.2s ease;
    font-size: 18px;
}

.note-attachment-btn:hover {
    border-color: var(--border-color);
    color: var(--primary-text);
    background: var(--input-bg-focus);
}

.note-source-input {
    display: none;
    margin-left: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    background: var(--input-bg);
    font-family: var(--font-mono);
    font-size: 14px;
    min-width: 300px;
    transition: all 0.3s ease;
}

.note-source-input.show {
    display: block;
    animation: slideIn 0.3s ease-out;
}

.note-source-input:focus {
    outline: none;
    border-color: var(--border-color);
    background: var(--input-bg-focus);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.note-submit-btn {
    background: var(--accent-color);
    border: none;
    border-radius: var(--border-radius);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.2s ease;
    font-size: 18px;
}

.note-submit-btn:hover {
    background: var(--accent-color-hover);
    /* removed */
}

.note-submit-btn:active {
    transform: translateY(0);
}

.note-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.note-status {
    position: absolute;
    top: -40px;
    left: 0;
    font-size: 12px;
    color: var(--secondary-text);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.note-status.show {
    opacity: 1;
}

.note-status.saving {
    color: var(--accent-color);
}

.note-status.saved {
    color: var(--gem-emerald);
}

.note-status.error {
    color: var(--gem-ruby);
}

.note-secondary-actions {
    display: flex;
    gap: 16px;
    opacity: 0.7;
}

.note-secondary-btn {
    background: none;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--secondary-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

/* Edit mode visual differentiation */
.note-greeting-edit {
    opacity: 0.9;
}

.note-greeting-edit h1 {
    color: var(--secondary-text);
    font-size: 28px;
}

.note-greeting-edit p {
    font-size: 13px;
    color: var(--secondary-text);
    opacity: 0.8;
}

.note-main-input-edit {
    background: var(--surface-panel);
    border-color: var(--border-color);
}

.note-main-input-edit:focus-within {
    background: var(--input-bg-focus);
    border-color: var(--accent-color);
}

.note-main-input-edit .note-main-textarea {
    color: var(--primary-text);
    font-weight: 400;
}

.note-main-input-edit .note-main-textarea::placeholder {
    color: var(--secondary-text);
    opacity: 0.6;
    font-style: italic;
}

/* Content focus styling for edit mode */
.note-main-input-edit .note-main-textarea:focus {
    background: transparent;
    border: none;
    outline: none;
}

/* Note view mode (read-only) */
.note-view-container {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
}

.note-content-display {
    padding: 24px;
    padding-left: calc(var(--legal-pad-margin) + 20px);
    position: relative;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 31px,
        var(--surface-raised) 31px,
        var(--surface-raised) 32px
    );
    background-attachment: local;
    background-position-y: 24px;
}

.note-content-display::before {
    content: '';
    position: absolute;
    left: var(--legal-pad-margin);
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--margin-line-red);
    opacity: 0.4;
    pointer-events: none;
}

.note-text {
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: var(--legal-pad-line-height);
    color: var(--primary-text);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 16px;
    min-height: 60px;
}

.note-source-display {
    padding-top: 16px;
    border-top: 1px solid var(--border-color-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.note-dates {
    padding: 16px 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--secondary-text);
}

.source-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--secondary-text);
    text-transform: lowercase;
    font-weight: 500;
}

.source-text {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--primary-text);
    opacity: 0.8;
}

.note-view-actions {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color-light);
    display: flex;
    justify-content: flex-end;
}

.note-edit-btn {
    background: none;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    padding: 10px 20px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--secondary-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.note-edit-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(255, 107, 74, 0.05);
}

.note-edit-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.note-cancel-btn {
    background: none;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--secondary-text);
    transition: all 0.2s ease;
    font-size: 16px;
}

.note-cancel-btn:hover {
    border-color: var(--gem-ruby);
    color: var(--gem-ruby);
    background: rgba(244, 67, 54, 0.05);
}

/* Command Results Styling */
.command-result {
    margin: 12px 0;
    padding: 12px;
    border-radius: 8px;
    background: var(--surface-subtle);
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    max-width: 400px;
}

.command-result.success {
    border-color: var(--border-color);
    background: var(--surface-hover);
}

.command-result.error {
    border-color: var(--gem-ruby);
    background: rgba(185, 28, 28, 0.08);
}

.command-result.card {
    max-width: 500px;
    background: var(--surface-hover);
}

.command-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
    opacity: 0.8;
}

.command-icon {
    font-size: 12px;
}

.command-name {
    font-family: monospace;
    color: var(--border-color);
}

.command-content {
    font-size: 13px;
    line-height: 1.4;
}

.command-error {
    color: var(--gem-ruby);
    font-size: 13px;
    line-height: 1.4;
}

/* Edit Command Styling */
.edit-list {
    background: var(--surface-raised);
    border-radius: 6px;
    padding: 12px;
    border: 1px solid var(--border-subtle);
}

.edit-instruction {
    font-size: 12px;
    color: var(--secondary-text);
    margin-bottom: 10px;
    padding: 6px 8px;
    background: rgba(218, 165, 32, 0.08);
    border-radius: 4px;
    background: rgba(230, 57, 70, 0.06); border-radius: 4px;
}

.message-list {
    margin: 8px 0;
}

.message-item {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 8px;
    margin: 2px 0;
    background: var(--surface-hover);
    border-radius: 3px;
    background: var(--surface-subtle); border-radius: 3px;
    line-height: 1.3;
}

.edit-count {
    font-size: 10px;
    color: var(--secondary-text);
    text-align: right;
    font-style: italic;
    margin-top: 6px;
}

.edit-confirmation {
    background: var(--surface-raised);
    border-radius: 6px;
    padding: 12px;
    border: 1px solid var(--border-subtle);
}

.deletion-status {
    font-weight: 500;
    color: var(--border-color);
    margin-bottom: 8px;
    font-size: 14px;
}

.deletion-details {
    margin: 8px 0;
}

.deleted-message {
    margin: 6px 0;
    font-size: 12px;
    line-height: 1.4;
}

.delete-label {
    font-weight: 500;
    color: var(--secondary-text);
    margin-right: 6px;
}

.deleted-content {
    font-family: var(--font-mono);
    background: rgba(185, 28, 28, 0.08);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--gem-ruby);
}

.deletion-stats {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--secondary-text);
}

.stat-item {
    padding: 2px 6px;
    background: var(--surface-hover);
    border-radius: 3px;
}

/* Command Input Styling */
.command-input {
    opacity: 0.7;
    font-style: italic;
}

.command-input .message-content::before {
    content: '$ ';
    color: var(--border-color);
    font-weight: bold;
}

/* Note Editor Styles */
.note-container {
    position: relative;
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}

.note-side {
    flex: 1;
    padding: 0 20px 20px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.note-header {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 20px;
}

.note-breadcrumb {
    font-size: 12px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--gem-sapphire) 0%, #2A5A9B 100%);
    border-radius: 20px;
    display: inline-block;
}

.breadcrumb-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.breadcrumb-link:hover {
    text-decoration: none;
    opacity: 0.8;
}

.breadcrumb-separator {
    margin: 0 8px;
    color: var(--secondary-text);
}

.breadcrumb-current {
    color: #ffffff;
    font-weight: 600;
}

.note-editor {
    max-width: 100%;
}

.note-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.note-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.note-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.note-title-input, .note-source-input {
    padding: 12px 16px;
    border: 1px solid rgba(74, 144, 217, 0.2);
    border-radius: 4px;
    background: var(--surface-raised);
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-text);
    transition: border-color 0.2s, background-color 0.2s;
}

.note-source-input {
    font-size: 14px;
    font-weight: 400;
    color: var(--secondary-text);
}

.note-title-input:focus, .note-source-input:focus {
    outline: none;
    border-color: var(--border-color);
    background: var(--surface-input);
}

.note-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    align-items: center;
}

.save-status-container {
    margin-right: auto;
}

.save-status {
    font-size: 11px;
    color: var(--secondary-text);
    font-style: italic;
}

.save-status.unsaved {
    color: var(--gem-ruby);
    font-weight: 600;
}

.save-status.saving {
    color: var(--gem-topaz);
    font-weight: 500;
}

.save-status.saved {
    color: var(--gem-emerald);
    font-weight: 600;
}

.btn-primary, .btn-secondary, .btn-danger {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--gem-sapphire);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background: #3A7BC0;
}

.btn-primary:disabled {
    background: var(--border-subtle);
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--surface-raised);
    color: var(--primary-text);
    border: 1px solid var(--border-strong);
}

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

.btn-danger {
    background: var(--gem-ruby);
    color: #fff;
}

.btn-danger:hover {
    background: var(--gem-ruby);
}

/* Pagination */
.pagination {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.pagination-info {
    font-size: 13px;
    color: var(--secondary-text);
    font-weight: 400;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pagination-controls .btn {
    min-width: 100px;
    padding: 10px 20px;
    background: var(--surface-raised);
    border: 1px solid rgba(74, 144, 217, 0.2);
    color: var(--gem-sapphire);
    transition: all 0.2s;
}

.pagination-controls .btn:hover {
    background: var(--border-color);
    color: white;
    /* removed */
    box-shadow: 0 2px 4px var(--border-subtle);
}

.pagination-controls .btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.pagination-pages {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-text);
    min-width: 100px;
    text-align: center;
}

/* =====================================================
   Chat-based Search Results Styles
   ===================================================== */

/* ── Terminal-style chat ── */
.search-chat-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 24px;
    padding-bottom: 100px; /* Space for fixed search bar */
    max-width: 800px;
    margin: 0 auto;
    overflow-y: auto;
    scroll-behavior: smooth;
    font-family: var(--font-mono);
}

/* Chat Message Base — full-width, sequential terminal output */
.chat-message {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
    animation: termFadeIn 0.25s ease-out;
    padding: 0;
}

/* Tighter within a turn (assistant follows user) */
.chat-message + .chat-message {
    margin-top: 4px;
}

/* More breathing room between turns (user follows assistant) */
.chat-message-assistant + .chat-message-user {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(240, 192, 64, 0.1);
}

/* Staggered fade-in — later messages enter with slight delay */
.chat-message:nth-child(2) { animation-delay: 0.05s; }
.chat-message:nth-child(3) { animation-delay: 0.1s; }
.chat-message:nth-child(4) { animation-delay: 0.15s; }
.chat-message:nth-child(5) { animation-delay: 0.2s; }
.chat-message:nth-child(6) { animation-delay: 0.25s; }
.chat-message:nth-child(n+7) { animation-delay: 0.3s; }

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

/* ── User Messages — prompt line ── */
.chat-message-user {
    align-self: stretch;
}

.chat-message-user .chat-message-role {
    display: none; /* Hidden — the prompt glyph replaces it */
}

.chat-message-user .chat-message-content {
    background: transparent;
    color: var(--primary-text);
    padding: 10px 12px;
    border-radius: 4px;
    display: flex;
    align-items: baseline;
    gap: 0;
    transition: background 0.12s ease;
}

.chat-message-user:hover .chat-message-content {
    background: rgba(46, 196, 122, 0.04);
}

.chat-message-user .chat-message-content::before {
    content: '>';
    color: var(--gem-emerald);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    margin-right: 10px;
    line-height: 1;
}

.chat-message-user .chat-message-text {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.5;
    color: var(--primary-text);
    font-weight: 600;
}

.chat-message-user .chat-message-time {
    font-size: 10px;
    color: var(--secondary-text);
    opacity: 0;
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 12px;
    align-self: center;
    transition: opacity 0.15s ease;
}

.chat-message-user:hover .chat-message-time {
    opacity: 0.5;
}

/* ── Assistant Messages — indented response block ── */
.chat-message-assistant {
    align-self: stretch;
}

.chat-message-assistant .chat-message-role {
    display: none; /* Hidden — the left border acts as the visual cue */
}

.chat-message-assistant .chat-message-content {
    background: var(--surface-subtle);
    border: none;
    padding: 12px 14px;
    border-radius: 4px;
    margin-left: 24px;
    margin-bottom: 4px;
    transition: background 0.12s ease;
}

.chat-message-assistant:hover .chat-message-content {
    background: var(--surface-hover);
}

.chat-message-assistant .chat-message-text {
    font-family: var(--font-mono);
    font-size: 13px;
    font-style: normal;
    color: var(--text-bright);
    line-height: 1.7;
}

/* Markdown content styling — colorful terminal */
.markdown-content h2 {
    font-size: 14px;
    font-weight: 700;
    margin: 6px 0 14px 0;
    padding-bottom: 8px;
    color: var(--border-color);
    text-transform: lowercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--surface-raised);
}

.markdown-content h2::before {
    content: '## ';
    color: var(--gem-ruby);
    opacity: 0.8;
}

.markdown-content h3 {
    font-size: 13px;
    font-weight: 700;
    margin: 14px 0 6px 0;
    color: var(--gem-emerald);
}

.markdown-content h3::before {
    content: '### ';
    color: var(--gem-emerald);
    opacity: 0.4;
}

.markdown-content p {
    margin: 0 0 12px 0;
}

.markdown-content p:last-child {
    margin-bottom: 0;
}

.markdown-content strong {
    font-weight: 700;
    color: var(--primary-text);
}

/* Bold text at start of paragraph = section header (e.g. "Practical move for today:") */
.markdown-content p > strong:first-child {
    color: var(--gilt-gold);
}

.markdown-content blockquote {
    margin: 10px 0;
    padding: 10px 16px;
    border: none;
    background: var(--surface-raised);
    font-style: italic;
    color: var(--primary-text);
    border-radius: 4px;
}

.markdown-content blockquote::before {
    content: '"';
    color: var(--gem-topaz);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    float: left;
    margin-right: 8px;
    margin-top: -2px;
    font-style: normal;
}

.markdown-content blockquote p {
    margin: 0;
}

.markdown-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: rgba(74, 144, 217, 0.08);
    padding: 1px 5px;
    border-radius: 2px;
    color: var(--gem-sapphire);
}

/* Regular links */
.markdown-content a {
    color: var(--gem-emerald);
    text-decoration: none;
    border-bottom: 1px solid rgba(46, 196, 122, 0.3);
    transition: border-color 0.12s;
}

.markdown-content a:hover {
    border-bottom-color: var(--gem-emerald);
}

/* Citation links — amber to stand out from body text */
.markdown-content a.citation-link {
    color: var(--gilt-gold);
    font-size: 0.85em;
    font-weight: 700;
    border: none;
    border-bottom: none;
    padding: 0 1px;
    transition: color 0.12s;
}

.markdown-content a.citation-link:hover {
    color: var(--primary-text);
    border-bottom: none;
}

.markdown-content hr {
    border: none;
    border-top: 1px solid var(--surface-raised);
    margin: 12px 0;
}

.markdown-content ul, .markdown-content ol {
    margin: 6px 0;
    padding-left: 18px;
}

.markdown-content li {
    margin: 0 0 10px 0;
}

.markdown-content li:last-child {
    margin-bottom: 0;
}

.markdown-content li::marker {
    color: var(--gem-ruby);
}

.markdown-content li:nth-child(2n)::marker {
    color: var(--gem-topaz);
}

.markdown-content li:nth-child(3n)::marker {
    color: var(--gem-emerald);
}

.markdown-content li:nth-child(4n)::marker {
    color: var(--gem-sapphire);
}

.chat-message-assistant .chat-message-time {
    font-size: 10px;
    color: var(--secondary-text);
    opacity: 0;
    margin-top: 6px;
    transition: opacity 0.15s ease;
}

.chat-message-assistant:hover .chat-message-time {
    opacity: 0.4;
}

/* ── Results message with passage cards ── */
.chat-message-results {
    max-width: 100%;
}

.chat-message-results .chat-message-content {
    padding: 10px 0 10px 16px;
}

.results-summary {
    font-weight: 500;
    color: var(--gem-emerald);
    font-size: 12px;
}

.results-summary::before {
    content: '→ ';
    color: var(--gem-topaz);
    opacity: 0.7;
}

/* ── Passage cards in chat — terminal list style ── */
.chat-passage-cards {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}

.chat-passage-cards .passage-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    padding: 8px 0;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chat-passage-cards .passage-card:last-child {
    border-bottom: none;
}

.chat-passage-cards .passage-card:hover {
    background: var(--surface-subtle);
}

.chat-passage-cards .passage-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.chat-passage-cards .passage-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-text);
    text-transform: lowercase;
}

.chat-passage-cards .passage-title::before {
    content: '~ ';
    color: var(--gem-ruby);
    opacity: 0.7;
}

.chat-passage-cards .passage-score {
    font-size: 10px;
    color: var(--gem-topaz);
    font-weight: 500;
}

.chat-passage-cards .passage-text {
    font-size: 12px;
    color: var(--secondary-text);
    line-height: 1.4;
    margin-bottom: 4px;
    font-style: italic;
    max-height: 2.8em;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.chat-passage-cards .passage-card:hover .passage-text {
    max-height: 10em;
}

.chat-passage-cards .passage-actions {
    text-align: right;
}

.chat-passage-cards .btn-primary {
    font-size: 10px;
    padding: 3px 8px;
    background: transparent;
    color: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.15s;
    font-family: var(--font-mono);
}

.chat-passage-cards .btn-primary:hover {
    background: var(--border-color);
    color: white;
    transform: none;
}

/* ── Empty state — terminal cursor ── */
.chat-empty-state {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 48px 0;
    color: var(--secondary-text);
    gap: 0;
    text-align: left;
}

.chat-empty-icon {
    display: none;
}

.chat-empty-text {
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: lowercase;
    font-style: normal;
    max-width: none;
    line-height: 1.5;
    opacity: 0.5;
}

.chat-empty-text::before {
    content: '> ';
    color: var(--gilt-gold);
    font-weight: 700;
    opacity: 0.7;
}

.chat-empty-text::after {
    content: '▊';
    display: inline-block;
    margin-left: 2px;
    animation: termBlink 1s step-end infinite;
    color: var(--gilt-gold);
    opacity: 0.6;
}

@keyframes termBlink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0; }
}

/* ── Error state ── */
.chat-message-error .chat-message-content {
    background: transparent;
    border: none;
    background: rgba(230, 57, 70, 0.06); border-radius: 3px;
    color: var(--border-red);
    padding: 8px 0 8px 16px;
    border-radius: 0;
    margin-left: 8px;
}

.chat-message-error .chat-message-text::before {
    content: 'error: ';
    font-weight: 600;
    opacity: 0.7;
}

.chat-message-actions {
    margin-top: 10px;
}

.chat-message-action-btn {
    background: transparent;
    border: 1px solid var(--border-red);
    color: var(--border-red);
    padding: 6px 10px;
    border-radius: 999px;
    font: inherit;
    cursor: pointer;
}

.chat-message-action-btn:hover {
    background: color-mix(in srgb, var(--border-red) 10%, transparent);
}