/* ==========================================================================
   components.css — Extracted inline styles from templates
   ========================================================================== */

/* Scrollable but visually hidden scrollbar */
.scrollbar-hide { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior: contain; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   From: projects/view.html — {% block extra_head %} <style>
   Chat, citations, drag-and-drop, pipeline, tree, context menu
   -------------------------------------------------------------------------- */

/* Chat contenteditable placeholder */
[contenteditable][data-placeholder]:empty::before{content:attr(data-placeholder);color:#a8a29e;pointer-events:none}
.dark [contenteditable][data-placeholder]:empty::before{color:#57534e}

/* Citation chips (legacy .cite kept for backward compat) */
.cite{display:inline-block;position:relative;background:rgba(13,148,136,.08);color:#0f766e;font-size:10px;font-weight:600;font-family:'DM Sans',sans-serif;padding:1px 5px;border-radius:4px;cursor:help;transition:background .15s;vertical-align:baseline}
.dark .cite{background:rgba(45,212,191,.1);color:#2dd4bf}
.cite:hover{background:rgba(13,148,136,.18)}
.dark .cite:hover{background:rgba(45,212,191,.2)}

/* ── Quote icon (only on quote chips) ── */
.chip-qicon{display:inline-flex;align-items:center;flex-shrink:0;opacity:.55}
.chip-qicon svg{width:9px;height:9px}

/* ── Section suffix inside chip ── */
.chip-sec{font-size:9.5px;font-weight:500;opacity:.6;margin-right:2px;padding-right:4px;border-right:1px solid rgba(0,0,0,.1)}
.dark .chip-sec{border-right-color:rgba(255,255,255,.1)}


/* ── Citation tooltip — Variation 4 "Tinted Header" ─────── */
#cite-tip { position: fixed; width: 300px; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; z-index: 9999; pointer-events: none; overflow: hidden; border-radius: 8px; background: white; border: 1px solid #e7e5e4; box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04); }
.dark #cite-tip { background: #1e293b; border-color: #334155; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
#cite-tip.show { opacity: 1; visibility: visible; pointer-events: auto; }
/* Arrow (above chip) */
#cite-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: white; }
.dark #cite-tip::after { border-top-color: #1e293b; }
#cite-tip::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #e7e5e4; }
.dark #cite-tip::before { border-top-color: #334155; }
/* Flipped (below chip) arrow */
#cite-tip.flip-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: white; }
.dark #cite-tip.flip-below::after { border-bottom-color: #1e293b; }
#cite-tip.flip-below::before { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #e7e5e4; }
.dark #cite-tip.flip-below::before { border-bottom-color: #334155; }

/* Row = stripe bar + inner content */
#cite-tip-row { display: flex; }
#cite-tip-bar { width: 4px; flex-shrink: 0; }
#cite-tip-inner { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Left stripe bar colors */
.ct-bar-teal { background: #0d9488; }
.ct-bar-green { background: #059669; }
.ct-bar-amber { background: #d97706; }
.ct-bar-rose { background: #e11d48; }
.ct-bar-blue { background: #3b82f6; }
.ct-bar-stone { background: #a8a29e; }
.dark .ct-bar-teal { background: #2dd4bf; }
.dark .ct-bar-green { background: #34d399; }
.dark .ct-bar-amber { background: #fbbf24; }
.dark .ct-bar-rose { background: #fb7185; }
.dark .ct-bar-blue { background: #60a5fa; }
.dark .ct-bar-stone { background: #475569; }

/* Header zone — tinted background */
.ct-hdr { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 3px; }
.ct-hdr-teal { background: rgba(13,148,136,0.06); }
.ct-hdr-green { background: rgba(5,150,105,0.06); }
.ct-hdr-amber { background: rgba(217,119,6,0.06); }
.ct-hdr-rose { background: rgba(225,29,72,0.05); }
.ct-hdr-blue { background: rgba(59,130,246,0.06); }
.ct-hdr-stone { background: rgba(168,162,158,0.06); }
.dark .ct-hdr-teal { background: rgba(45,212,191,0.06); }
.dark .ct-hdr-green { background: rgba(52,211,153,0.06); }
.dark .ct-hdr-amber { background: rgba(245,158,11,0.08); }
.dark .ct-hdr-rose { background: rgba(225,29,72,0.06); }
.dark .ct-hdr-blue { background: rgba(59,130,246,0.06); }
.dark .ct-hdr-stone { background: rgba(148,163,184,0.06); }

/* Status text */
.ct-status { font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 4px; line-height: 1.3; }
.ct-status-teal { color: #0f766e; }
.ct-status-green { color: #059669; }
.ct-status-amber { color: #b45309; }
.ct-status-rose { color: #e11d48; }
.ct-status-blue { color: #2563eb; }
.ct-status-stone { color: #78716c; }
.dark .ct-status-teal { color: #5eead4; }
.dark .ct-status-green { color: #34d399; }
.dark .ct-status-amber { color: #fbbf24; }
.dark .ct-status-rose { color: #fb7185; }
.dark .ct-status-blue { color: #93c5fd; }
.dark .ct-status-stone { color: #94a3b8; }

/* Issue type label */
.ct-issue-type { font-size: 9.5px; font-weight: 600; opacity: 0.75; margin-top: 1px; }

/* Paper title + meta in header */
.ct-paper-title { font-family: 'Crimson Pro', Georgia, serif; font-size: 12px; font-weight: 400; color: #44403c; line-height: 1.3; }
.dark .ct-paper-title { color: #cbd5e1; }
.ct-paper-meta { font-size: 10px; color: #a8a29e; margin-top: 1px; }
.dark .ct-paper-meta { color: #64748b; }

/* Body content zone */
#cite-tip-body { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; max-height: min(350px, 45vh); overflow-y: auto; }

/* Quote block (Phase 0 — LLM quotes) */
.ct-quote-block { font-size: 11px; font-style: italic; line-height: 1.5; color: #57534e; padding: 5px 8px; border-radius: 0 4px 4px 0; }
.dark .ct-quote-block { color: #94a3b8; }
.ct-q-green { background: rgba(5,150,105,0.05); border-left: 2.5px solid rgba(5,150,105,0.4); }
.dark .ct-q-green { background: rgba(16,185,129,0.05); border-left-color: rgba(52,211,153,0.3); }
.ct-q-blue { background: rgba(59,130,246,0.05); border-left: 2.5px solid rgba(59,130,246,0.4); }
.dark .ct-q-blue { background: rgba(59,130,246,0.05); border-left-color: rgba(96,165,250,0.3); }
.ct-q-red { background: rgba(225,29,72,0.05); border-left: 2.5px solid rgba(225,29,72,0.35); }
.dark .ct-q-red { background: rgba(225,29,72,0.05); border-left-color: rgba(251,113,133,0.3); }
.ct-q-gray { background: rgba(168,162,158,0.06); border-left: 2.5px solid rgba(168,162,158,0.3); }
.dark .ct-q-gray { background: rgba(148,163,184,0.05); border-left-color: rgba(100,116,139,0.3); }
.ct-q-teal { background: rgba(13,148,136,0.03); border-left: 2.5px solid rgba(13,148,136,0.3); }
.dark .ct-q-teal { background: rgba(45,212,191,0.03); border-left-color: rgba(45,212,191,0.3); }
.ct-q-amber { background: rgba(217,119,6,0.05); border-left: 2.5px solid rgba(217,119,6,0.35); }
.dark .ct-q-amber { background: rgba(217,119,6,0.05); border-left-color: rgba(251,191,36,0.3); }

/* Inline diff for approximate quote matches */
.ct-diff-added { color: #e11d48; text-decoration: line-through; text-decoration-color: rgba(225,29,72,0.5); opacity: 0.7; }
.dark .ct-diff-added { color: #fb7185; text-decoration-color: rgba(251,113,133,0.5); }

/* Claim label + block (Phase 1) */
.ct-claim-label { font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #a8a29e; margin-bottom: 1px; }
.dark .ct-claim-label { color: #64748b; }
.ct-claim-block { font-size: 11px; line-height: 1.5; color: #57534e; padding: 5px 8px; border-radius: 0 4px 4px 0; }
.dark .ct-claim-block { color: #94a3b8; }

/* Delta pill */
.ct-delta { font-size: 10.5px; font-weight: 500; line-height: 1.4; padding: 6px 8px; border-radius: 6px; display: flex; align-items: flex-start; gap: 5px; }
.ct-delta-icon { flex-shrink: 0; font-size: 12px; font-weight: 700; }
.ct-delta-amber { color: #92400e; background: #fffbeb; border: 1px solid rgba(217,119,6,0.15); }
.ct-delta-amber .ct-delta-icon { color: #d97706; }
.dark .ct-delta-amber { color: #fcd34d; background: rgba(217,119,6,0.1); border-color: rgba(245,158,11,0.2); }
.dark .ct-delta-amber .ct-delta-icon { color: #fbbf24; }
.ct-delta-rose { color: #9f1239; background: #fff1f2; border: 1px solid rgba(225,29,72,0.12); }
.ct-delta-rose .ct-delta-icon { color: #e11d48; }
.dark .ct-delta-rose { color: #fda4af; background: rgba(225,29,72,0.08); border-color: rgba(225,29,72,0.2); }
.dark .ct-delta-rose .ct-delta-icon { color: #fb7185; }

/* Reasoning */
.ct-reasoning { font-size: 10.5px; line-height: 1.5; font-style: italic; color: #78716c; }
.dark .ct-reasoning { color: #64748b; }

/* Expandable text toggle */
.ct-full { display: none; }
.ct-toggle { font-size: 10px; font-weight: 500; color: #0d9488; cursor: pointer; font-style: normal; }
.ct-toggle:hover { text-decoration: underline; }
.dark .ct-toggle { color: #2dd4bf; }

/* Section tag on source quotes */
.ct-sec-tag { display: inline-block; font-size: 9px; font-weight: 600; font-style: normal; color: #a8a29e; margin-left: 4px; white-space: nowrap; font-family: 'DM Sans', monospace; }
.dark .ct-sec-tag { color: #64748b; }
.ct-sec-tag-ai { font-style: italic; }

/* Footer */
#cite-tip-footer { padding: 6px 12px; border-top: 1px solid #f5f5f4; display: flex; align-items: center; justify-content: flex-end; }
.dark #cite-tip-footer { border-top-color: rgba(51,65,85,0.5); }
.ct-open-link { font-size: 10px; font-weight: 600; color: #0d9488; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ct-open-link:hover { text-decoration: underline; }
.dark .ct-open-link { color: #2dd4bf; }

/* Chip icon styling */
.chip-sec-icon { font-size: 9px; font-weight: 600; opacity: 0.5; margin-right: 1px; }

/* Suppress browser drag outlines */
.no-drag-outline{outline:none !important;-webkit-tap-highlight-color:transparent}

/* ── Scope tab drag-and-drop ── */
.scope-tab-drag-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:.85;transform:scale(1.04) rotate(1.5deg);box-shadow:0 4px 16px rgba(0,0,0,.18);border-radius:6px;transition:opacity 80ms ease}
.scope-tab-dragging{opacity:.3 !important;transition:opacity 150ms ease}
.scope-tab-drop-settle{animation:tabDropSettle 200ms cubic-bezier(.2,1,.3,1) forwards}
@keyframes tabDropSettle{0%{transform:scale(1.03)}60%{transform:scale(1.01)}100%{transform:scale(1)}}
@keyframes scope-tab-flash{0%{transform:scale(1)}30%{transform:scale(1.08);box-shadow:0 0 0 2px rgba(20,184,166,0.4)}100%{transform:scale(1);box-shadow:none}}
.scope-tab-flash{animation:scope-tab-flash 0.4s ease-out}

/* Color picker popup */
.color-picker-popup{animation:popIn 120ms cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes popIn{from{opacity:0;transform:translateY(4px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Drag insertion indicator */
.insert-indicator{height:2px;background:linear-gradient(90deg,#14b8a6 0%,#2dd4bf 40%,transparent 100%);border-radius:1px;position:relative}
.insert-indicator::before{content:'';position:absolute;left:-3px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#14b8a6}

/* Pipeline ring */
@keyframes pipeline-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.pipeline-arc-pulse{animation:pipeline-pulse 1.5s ease-in-out infinite}
@keyframes pipeline-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.pipeline-dot-pulse{animation:pipeline-dot 1.5s ease-in-out infinite}

/* Tree lines for paper groups */
.tree-line{position:relative}
.tree-line::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:1px;border-left:1px dotted #d6d3d1}
.dark .tree-line::before{border-left-color:#475569}
.tree-branch{position:relative}
.tree-branch::before{content:'';position:absolute;left:-13px;top:50%;width:10px;border-top:1px dotted #d6d3d1}
.dark .tree-branch::before{border-top-color:#475569}
.tree-line>div:nth-last-child(2)>.tree-branch::after{content:'';position:absolute;left:-14px;top:50%;bottom:-4px;width:2px;background:white}
.dark .tree-line>div:nth-last-child(2)>.tree-branch::after{background:#1e293b}

/* Desk row checkbox */
.desk-check{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid #a8a29e;border-radius:4px;cursor:pointer;transition:all 150ms;position:relative;flex-shrink:0}
.desk-check:hover{border-color:#0d9488}
.desk-check:checked{background:#0d9488;border-color:#0d9488}
.desk-check:checked::after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}
html.dark .desk-check{border-color:#475569}
html.dark .desk-check:hover{border-color:#2dd4bf}
html.dark .desk-check:checked{background:#14b8a6;border-color:#14b8a6}

/* Context menu */
.ctx-menu{position:absolute;z-index:100;min-width:180px;background:white;border:1px solid #e7e5e4;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.03);padding:4px;font-size:12px}
.dark .ctx-menu{background:#1e293b;border-color:#334155;box-shadow:0 4px 24px rgba(0,0,0,.35)}
.ctx-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:5px;cursor:pointer;color:#57534e;transition:background .1s}
.dark .ctx-item{color:#94a3b8}
.ctx-item:hover{background:#f5f5f4}
.dark .ctx-item:hover{background:#334155}
.ctx-item.disabled{opacity:.4;cursor:not-allowed}
.ctx-item.disabled:hover{background:transparent}
.ctx-divider{height:1px;background:#e7e5e4;margin:3px 4px}
.dark .ctx-divider{background:#334155}
.ctx-sub{position:relative}
.ctx-sub .ctx-submenu{display:none;position:absolute;left:100%;top:-4px;min-width:150px;background:white;border:1px solid #e7e5e4;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.10);padding:4px}
.dark .ctx-sub .ctx-submenu{background:#1e293b;border-color:#334155;box-shadow:0 4px 24px rgba(0,0,0,.35)}
.ctx-sub:hover .ctx-submenu{display:block}
.ctx-flip-left .ctx-sub .ctx-submenu,.ctx-flip-left .ctx-sub [data-submenu]{left:auto!important;right:100%;margin-left:0;margin-right:4px}
.ctx-flip-bottom .ctx-sub .ctx-submenu,.ctx-flip-bottom .ctx-sub [data-submenu]{top:auto!important;bottom:0}
.ctx-color{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}


/* --------------------------------------------------------------------------
   From: projects/view.html — {% block extra_js %} <style>
   Scrollbar, resize handle
   -------------------------------------------------------------------------- */

.slim-scroll::-webkit-scrollbar { width: 4px; }
.slim-scroll::-webkit-scrollbar-track { background: transparent; }
.slim-scroll::-webkit-scrollbar-thumb { background: #a8a29e; border-radius: 2px; }
.dark .slim-scroll::-webkit-scrollbar-thumb { background: #475569; }
.preview-scroll::-webkit-scrollbar { width: 4px; }
.preview-scroll::-webkit-scrollbar-track { background: transparent; }
.preview-scroll::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 2px; }
.dark .preview-scroll::-webkit-scrollbar-thumb { background: #475569; }
.resize-handle { background: transparent; position: relative; transition: background-color 0.15s ease; }
.resize-handle::after { content: ''; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; z-index: 1; }
.resize-handle:hover, .resize-handle.dragging { background: #14b8a6; }
.dark .resize-handle:hover, .dark .resize-handle.dragging { background: #2dd4bf; }
.resize-handle-border { border-left: 1px solid #e7e5e4; }
.dark .resize-handle-border { border-left-color: #334155; }
body.resizing { user-select: none; cursor: col-resize !important; }
body.resizing * { cursor: col-resize !important; }


/* --------------------------------------------------------------------------
   From: search/form.html — Year range slider
   -------------------------------------------------------------------------- */

.year-range-container { position: relative; height: 24px; }
.year-range-track {
    position: absolute; top: 50%; left: 0; right: 0; height: 4px;
    border-radius: 9999px; transform: translateY(-50%);
    background: #e7e5e4;
}
.dark .year-range-track { background: #334155; }
.year-range-fill {
    position: absolute; top: 50%; height: 4px;
    border-radius: 9999px; transform: translateY(-50%);
    background: linear-gradient(90deg, #0d9488, #14b8a6);
}
.year-range-container input[type="range"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    -webkit-appearance: none; appearance: none; background: transparent;
    pointer-events: none; margin: 0;
}
.year-range-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: white; border: 2px solid #0d9488;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    pointer-events: all; cursor: grab;
    transition: box-shadow 0.15s, transform 0.15s;
}
.year-range-container input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15); transform: scale(1.1);
}
.year-range-container input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.year-range-container input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: white; border: 2px solid #0d9488;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    pointer-events: all; cursor: grab;
}


/* --------------------------------------------------------------------------
   Notes feature
   -------------------------------------------------------------------------- */

/* Slide-over panel */
.note-slide-over { max-width: 75vw; min-width: 320px; }

/* Slide-over tab bar */
.note-slide-over .tabs-scroll::-webkit-scrollbar { height: 0; width: 0; }
.note-slide-over .tabs-scroll { scrollbar-width: none; }

/* Active tab connects to content below */
.note-tab-active { position: relative; }
.note-tab-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: white;
}
html.dark .note-tab-active::after {
    background: #1e293b; /* slate-800 */
}

/* Tab close button visibility */
.note-slide-over .tab-close {
    opacity: 0;
    transition: opacity 120ms ease;
}
.note-slide-over .group:hover .tab-close,
.note-slide-over .note-tab-active .tab-close {
    opacity: 1;
}

/* Desk slide-over panel */
.desk-slide-over { max-width: 75vw; min-width: 320px; }
.desk-slide-over .tabs-scroll::-webkit-scrollbar { height: 0; width: 0; }
.desk-slide-over .tabs-scroll { scrollbar-width: none; }
.desk-so-tab-active { position: relative; }
.desk-so-tab-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: white;
}
html.dark .desk-so-tab-active::after {
    background: #1e293b;
}
.desk-slide-over .tab-close {
    opacity: 0;
    transition: opacity 120ms ease;
}
.desk-slide-over .group:hover .tab-close,
.desk-slide-over .desk-so-tab-active .tab-close {
    opacity: 1;
}

/* Main view note tabs */
.note-tab-active-main { position: relative; }
.note-tab-active-main::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: white;
    z-index: 10;
}
html.dark .note-tab-active-main::after {
    background: #1e293b;
}

/* Desk tab active state — ::after covers border-b (matches note-tab-active-main pattern) */
.desk-tab-active {
    position: relative;
    background: white;
    z-index: 10;
}
.desk-tab-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: white;
    z-index: 10;
}
html.dark .desk-tab-active {
    background: #1e293b;
}
html.dark .desk-tab-active::after {
    background: #1e293b;
}

/* Tab close visibility (main view) */
.tab-item .tab-close {
    opacity: 0;
    transition: opacity 150ms;
}
.tab-item:hover .tab-close,
.note-tab-active-main .tab-close {
    opacity: 1;
}

/* Inline title input */
.inline-title {
    border: none;
    outline: none;
    background: transparent;
    caret-color: #0d9488;
}
.inline-title:focus {
    box-shadow: none;
}

/* ── Split view: preview panel gets a warm parchment tint ── */
.note-preview-split {
    background: #fafaf8;
    border-left: 1px solid #e7e5e4;
    box-shadow: inset 2px 0 8px rgba(0,0,0,0.02);
}
.dark .note-preview-split {
    background: #111827;
    border-left-color: #1e293b;
    box-shadow: inset 2px 0 8px rgba(0,0,0,0.15);
}

/* ── Full preview: centered document feel ── */
.note-preview-full {
    background:
        linear-gradient(to right, #fafaf9, white 80px, white calc(100% - 80px), #fafaf9);
}
.dark .note-preview-full {
    background:
        linear-gradient(to right, #0f172a, #1e293b 80px, #1e293b calc(100% - 80px), #0f172a);
}

/* ── Markdown preview typography ── */
.note-preview h1 { font-family: 'Crimson Pro', Georgia, serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; color: #1c1917; }
.note-preview h2 { font-family: 'Crimson Pro', Georgia, serif; font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #292524; }
.note-preview h3 { font-family: 'Crimson Pro', Georgia, serif; font-size: 1.1rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.5rem; color: #44403c; }
.dark .note-preview h1 { color: #f1f5f9; }
.dark .note-preview h2 { color: #e2e8f0; }
.dark .note-preview h3 { color: #cbd5e1; }
.note-preview p { margin-bottom: 0.75rem; line-height: 1.7; color: #44403c; }
.dark .note-preview p { color: #94a3b8; }
.note-preview ul, .note-preview ol { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.note-preview li { margin-bottom: 0.25rem; line-height: 1.65; color: #44403c; }
.dark .note-preview li { color: #94a3b8; }
.note-preview blockquote { border-left: 3px solid #0d9488; padding: 0.625rem 1rem; margin: 0.75rem 0; background: rgba(13,148,136,0.04); border-radius: 0 6px 6px 0; color: #57534e; }
.dark .note-preview blockquote { border-left-color: #2dd4bf; background: rgba(45,212,191,0.06); color: #94a3b8; }
.note-preview code { font-size: 0.85em; padding: 2px 5px; border-radius: 4px; background: #f5f5f4; color: #c2410c; }
.dark .note-preview code { background: #1e293b; color: #fb923c; }
.note-preview pre { margin: 0.75rem 0; padding: 0.875rem 1rem; border-radius: 8px; background: #fafaf9; border: 1px solid #e7e5e4; overflow-x: auto; }
.dark .note-preview pre { background: #0f172a; border-color: #1e293b; }
.note-preview pre code { padding: 0; background: none; color: inherit; }
.note-preview strong { font-weight: 600; color: #1c1917; }
.dark .note-preview strong { color: #e2e8f0; }
.note-preview hr { border: none; border-top: 1px solid #e7e5e4; margin: 1.5rem 0; }
.dark .note-preview hr { border-top-color: #334155; }

/* @mention pills */
.note-mention-pill {
    display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600;
    background: rgba(13,148,136,0.08); color: #0f766e; cursor: pointer; transition: background 0.15s;
}
.dark .note-mention-pill { background: rgba(45,212,191,0.1); color: #2dd4bf; }
.note-mention-pill:hover { background: rgba(13,148,136,0.18); }
.dark .note-mention-pill:hover { background: rgba(45,212,191,0.2); }

/* Tab italic for preview */
.note-tab-preview .note-tab-title { font-style: italic; }

/* Unsaved indicator */
.note-unsaved-dot { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; }


/* --------------------------------------------------------------------------
   Auth pages — subtle academic gradient background
   -------------------------------------------------------------------------- */

.auth-bg {
  background-color: #fafaf9;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(13,148,136,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(13,148,136,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(120,113,108,0.03) 0%, transparent 50%);
}
.dark .auth-bg {
  background-color: #0f172a;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(13,148,136,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(13,148,136,0.05) 0%, transparent 50%);
}

/* ── Inline Quote Absorption (cite-iq) ── */
.cite-iq { display: inline; border-left: 2.5px solid; padding-left: 5px; border-radius: 0 0 0 2px; }
.cite-iq .cite-iq-text { font-style: italic; font-size: 0.92em; }
.cite-iq-teal { border-left-color: rgba(13,148,136,0.35); }
.cite-iq-blue { border-left-color: rgba(59,130,246,0.4); }
.cite-iq-rose { border-left-color: rgba(225,29,72,0.35); }
.cite-iq-stone { border-left-color: rgba(168,162,158,0.3); }
.cite-iq-amber { border-left-color: rgba(217,119,6,0.35); }
.dark .cite-iq-teal { border-left-color: rgba(45,212,191,0.4); }
.dark .cite-iq-blue { border-left-color: rgba(96,165,250,0.4); }
.dark .cite-iq-rose { border-left-color: rgba(251,113,133,0.4); }
.dark .cite-iq-stone { border-left-color: rgba(120,113,108,0.35); }
.dark .cite-iq-amber { border-left-color: rgba(251,191,36,0.4); }