/* ============================================================
   LEFT SIDEBAR — History & TOC
   ============================================================ */

#left-sidebar {
    --sb-pad: 6px;
    width: var(--sidebar-w);
    min-width: 180px;
    /* Canonical glass — see #chat-panel for the full rationale. Sidebar
     * + chat are the two largest surfaces in the app; both adopt the same
     * recipe so the whole shell reads as one continuous material. */
    background: var(--surface-glass-bg);
    backdrop-filter: var(--surface-glass-blur);
    -webkit-backdrop-filter: var(--surface-glass-blur);
    border-right: var(--surface-glass-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
}

/* sidebar collapse btn — removed, auto-hide on resize instead */

.sidebar-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-eyebrow);
    color: var(--t3);
}

.sidebar-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: none;
    color: var(--t3);
    cursor: pointer;
    transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.sidebar-action-btn:hover { background: var(--chrome-hover); color: var(--t2); border-color: var(--chrome-border); }

/* ---- Table of Contents ---- */
#toc-section {
    overflow-y: auto;
    flex-shrink: 0;
    height: 50%;
    min-height: 60px;
}

#toc-doc-name {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px calc(var(--sb-pad) - 2px) 6px calc(var(--sb-pad) + 6px);
    flex-shrink: 0;
    position: relative;
}

#toc-doc-label {
    font: 600 14px var(--sans);
    color: var(--t1);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    transition: color var(--dur);
}
#toc-doc-label:hover { color: var(--accent); }

.toc-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: none;
    color: var(--t3);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.toc-menu-btn:hover { background: var(--chrome-hover); color: var(--t1); border-color: var(--chrome-border); }

#toc-list {
    padding: 0 var(--sb-pad) 10px;
}

.toc-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--t2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur), color var(--dur);
    overflow: hidden;
    min-width: 0;
}
.toc-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.toc-item:hover { background: var(--chrome-hover); }
.toc-item.active { background: var(--accent-dim); }
.toc-item.level-1 { color: var(--accent); }
.toc-item.level-1:hover { color: var(--accent); }
.toc-item.level-2 { padding-left: 20px; font-size: var(--fs-xs); color: var(--t2); }
.toc-item.level-2:hover { color: var(--t1); }
.toc-item.level-3 { padding-left: 32px; font-size: 11px; color: var(--t2); }
.toc-item.level-3:hover { color: var(--t1); }

.toc-num {
    font-size: 10px;
    color: var(--t3);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 14px;
}
.toc-item.level-1 .toc-num { color: var(--accent); opacity: 0.8; }
.toc-item.level-2 .toc-num { color: var(--t2); }
.toc-item.level-3 .toc-num { color: var(--t2); }

/* Appendix headings are level-1 but read as subsections: grey + smaller type
   instead of the gold main-section look. Kept at top-level indent so their own
   subsections still nest beneath them. Rules follow the level-* ones so they
   win the equal-specificity tie. */
.toc-item.is-appendix { color: var(--t2); font-size: var(--fs-xs); }
.toc-item.is-appendix:hover { color: var(--t1); }
.toc-item.is-appendix .toc-num { color: var(--t2); opacity: 1; }

/* ---- Revision list ---- */
#revision-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--sb-pad) 8px calc(var(--sb-pad) + 6px);
}

#revision-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--sb-pad) 12px;
}

/* -- Date group headers — pure typography, no frosted bar --
   Earlier version was position:sticky with backdrop-filter blur to mask
   scrolled items. Created visible darker bands and competed visually with
   the gold section labels above. Plain caps + tighter tracking reads as
   a quiet temporal divider without inventing its own surface. */
.rev-date-header {
    font: 600 10px var(--sans);
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: var(--track-eyebrow);
    padding: 10px 4px 4px;
}

/* -- "Current version" always-on entry -- */
.rev-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--dur);
    margin-bottom: 2px;
}
.rev-current:hover { background: var(--chrome-hover); }
.rev-current.active { background: var(--accent-dim); }
.rev-current-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-left: 3px;
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.16),
        0 0 10px rgba(var(--accent-rgb), 0.45);
    animation: rev-current-pulse 2.6s var(--ease) infinite;
}
@keyframes rev-current-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(var(--accent-rgb), 0.16),
            0 0 10px rgba(var(--accent-rgb), 0.45);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(var(--accent-rgb), 0.10),
            0 0 14px rgba(var(--accent-rgb), 0.28);
    }
}
.rev-current-label {
    font: 500 12px var(--sans);
    color: var(--t2);
    flex: 1;
}
.rev-current.active .rev-current-label { color: var(--t1); }

/* -- Revision entries -- */
.rev-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}
.rev-item:hover { background: var(--chrome-hover); }
.rev-item.active { background: var(--accent-dim); }

/* Default: icon centers vertically with the single-line label. When a
   second line is present (.rev-meta on agent items, .rev-star-summary on
   stars), :has() flips us back to flex-start + a small icon offset so the
   icon sits with the first text line instead of floating between rows. */
.rev-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rev-row:has(.rev-meta),
.rev-row:has(.rev-star-summary) {
    align-items: flex-start;
}
.rev-icon {
    flex-shrink: 0;
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--t3);
}
.rev-row:has(.rev-meta) .rev-icon { margin-top: 4px; }
/* Intentionality hierarchy — gold for things the user actively anchored,
   gray for automatic activity. Keeps gold meaningful as emphasis.
   ★ (gold)           — user save (most intentional)
   solid gold dot     — "current version" anchor only (.rev-current-dot)
   medium gray dot    — agent edit (automatic work, still notable)
   dim gray dot       — background auto-checkpoint */
.rev-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.rev-dot.type-agent { background: var(--t2); }
.rev-dot.type-auto  { background: var(--t3); }

/* Two-column grid: title left (truncates), time right-anchored. Deltas, when
   present, span both columns on a quieter second row. Time becomes a constant
   right-edge column you can scan top-to-bottom; deltas stay supporting info. */
.rev-info {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: baseline;
}
.rev-label {
    grid-column: 1;
    font: 12px/1.4 var(--sans);
    color: var(--t2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rev-item.active .rev-label { color: var(--t1); }
.rev-item.type-user .rev-label { color: var(--accent); }

.rev-time {
    grid-column: 2;
    font: 500 10px var(--sans);
    color: var(--t2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Deltas row: spans full width. +/− get their semantic color (green/red)
   to break up the all-grey palette — without color the row read as dull
   and the +/− glyphs alone weren't enough signal at sidebar size. Unit
   words ("words", "sources") stay dim so the numbers carry the eye. */
.rev-meta {
    grid-column: 1 / -1;
    margin-top: 3px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.rev-delta-group {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--t3);
    font: 500 10px var(--sans);
}
/* Neutral delta numbers — the +/− sign carries direction; no green/red. */
.rev-delta-group .add,
.rev-delta-group .del { color: var(--t2); font-weight: 600; }

.rev-empty-save-btn { margin-top: 14px; }

/* -- Revision group children (nested under Current / user saves) -- */
.rev-group-children {
    padding-left: 6px;
    border-left: 1px solid var(--chrome-border-subtle);
    margin-left: 16px;
}
.rev-group-children.collapsed { display: none; }
.rev-group-toggle {
    background: none; border: none; color: var(--t3); cursor: pointer;
    font-size: 14px; padding: 0 4px; flex-shrink: 0;
    transition: color var(--dur);
}
.rev-group-toggle:hover { color: var(--t1); }
/* -- User save (star / milestone) header --
   Bigger row than agent items: gold serif label + aggregate summary line
   beneath. Stars become the table of contents; their child agent turns
   nest below collapsed by default. */
.rev-user-save {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 11px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
    margin-top: 6px;
}
.rev-user-save:hover { background: var(--chrome-hover); }
.rev-user-save.active { background: var(--accent-dim); }
.rev-user-save .rev-icon { font-size: 14px; color: var(--accent-text); }
.rev-user-save .rev-row:has(.rev-star-summary) .rev-icon { margin-top: 2px; }
.rev-user-save .rev-label {
    font: 500 13px/1.3 var(--serif);
    color: var(--accent);
    letter-spacing: -0.005em;
}
.rev-user-save.active .rev-label { color: var(--accent); font-weight: 600; }

/* Star summary line — "+412 −68 words · +3 sources · 4 turns" since last
   milestone. Hidden when the window has no work (first star ever, or two
   stars with no changes between them). */
.rev-star-summary {
    grid-column: 1 / -1;
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font: 500 11px/1.4 var(--sans);
    color: var(--t2);
    font-variant-numeric: tabular-nums;
}
.rev-star-summary .rev-delta-group { color: var(--t2); }
.rev-star-turns { color: var(--t3); }
.rev-star-sep { color: var(--t3); opacity: 0.55; }

/* -- Section labels (Since last milestone / Milestones) --
   Separate the "recent activity" block from the "milestone TOC" block.
   Slightly more prominent than date headers because they're structural
   dividers, not just temporal buckets. */
.rev-section-label {
    font: 600 10px var(--sans);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--track-eyebrow);
    padding: 14px 10px 6px;
    opacity: 0.78;
}
.rev-section-label--milestones {
    padding-top: 18px;
    border-top: 1px solid var(--chrome-border-subtle);
    margin-top: 8px;
}

/* -- Auto-checkpoints demoted --
   System-generated safety nets (pre-restore snapshots, doc init). Useful
   when undoing a restore, noise the rest of the time. Italic label + lower
   opacity + smaller dim dot — reads as "system stuff" not "user work". */
.rev-item.type-auto .rev-label {
    font-style: italic;
    color: var(--t2);
}
.rev-item.type-auto .rev-dot.type-auto {
    width: 6px;
    height: 6px;
    background: var(--t3);
    opacity: 0.7;
}

/* ---- Sidebar rail (collapsed state) ---- */
#sidebar-rail, #chat-rail {
    width: 36px;
    background: var(--chrome-gradient);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#sidebar-rail { }
#chat-rail    { }

.rail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    color: var(--t3);
    cursor: pointer;
    transition: background var(--dur), color var(--dur);
}
.rail-btn:hover { background: var(--chrome-hover); color: var(--t2); }

/* ---- Vertical resize handle (TOC ↔ Checkpoints) ---- */
.sidebar-v-resize {
    height: 1px;
    cursor: row-resize;
    background: var(--panel-border);
    transition: background var(--dur);
    flex-shrink: 0;
    position: relative;
    margin-right: -4px;
}
.sidebar-v-resize::after {
    content: '';
    position: absolute;
    inset: -5px 0;
}
.sidebar-v-resize:hover, .sidebar-v-resize.dragging { background: var(--accent); }