/* ============================================================
   RESIZE
   ============================================================ */

.resize-handle {
    width: 3px;
    cursor: col-resize;
    background: transparent;
    transition: background var(--dur);
    flex-shrink: 0;
    position: relative;
}
.resize-handle::after {
    content: '';
    position: absolute;
    inset: 0 -3px;
}
.resize-handle:hover, .resize-handle.dragging { background: var(--accent); }
.resize-handle.collapsed { cursor: col-resize; }

/* ============================================================
   HIGHLIGHT & PREVIEW
   ============================================================ */

.flash { animation: flash-anim 1.4s ease; }
@keyframes flash-anim {
    0% { background: var(--accent-dim); }
    100% { background: transparent; }
}

/* ---- Preview bar: warm parchment tint, blends with document ---- */
.preview-bar {
    background: var(--doc-surface);
    color: var(--td2);
    padding: 12px 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.preview-bar-back {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--td3);
    font: 500 12px var(--sans);
    cursor: pointer;
    transition: color var(--dur);
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0;
}
.preview-bar-back:hover { color: var(--td1); }
.preview-bar-back svg { flex-shrink: 0; }
.preview-bar-center {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.preview-bar-name {
    font: 600 13px var(--sans);
    color: var(--doc-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}
.preview-bar-stats {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.preview-stat {
    font: 600 11px var(--sans);
    padding: 3px 9px;
    border-radius: var(--radius-xs);
    white-space: nowrap;
}
.preview-stat.stat-changed { background: var(--doc-accent-dim); color: var(--doc-accent); }
.preview-stat.stat-added { background: rgba(74,140,92,0.12); color: var(--diff-add-body); }
.preview-stat.stat-removed { background: rgba(0,0,0,0.06); color: var(--td3); }
.preview-stat.stat-identical { background: rgba(0,0,0,0.05); color: var(--td3); }
.preview-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* -- Type chip + absolute timestamp + Compare-to dropdown -- */
.preview-bar-chip {
    font: 600 10px var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}
.preview-bar-chip.type-user  { background: var(--accent-dim); color: var(--accent-text); }
.preview-bar-chip.type-agent { background: var(--doc-accent-dim); color: var(--doc-accent); }
.preview-bar-chip.type-auto  { background: rgba(0,0,0,0.06); color: var(--td3); }

.preview-bar-ts {
    font: 500 11px var(--sans);
    color: var(--td3);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.preview-bar-compare {
    position: relative;
    flex-shrink: 0;
}
.preview-bar-compare-btn {
    background: none;
    border: 1px solid var(--doc-border);
    color: var(--td2);
    font: 500 11px var(--sans);
    padding: 2px 9px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.preview-bar-compare-btn:hover { background: var(--doc-hover); border-color: var(--doc-ochre); color: var(--td1); }
.preview-bar-compare-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--doc-bg);
    border: 1px solid var(--doc-border);
    border-radius: var(--radius);
    padding: 4px;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-md);
}
.preview-compare-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: none;
    border: none;
    font: 12px var(--sans);
    color: var(--td2);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--dur), color var(--dur);
}
.preview-compare-item:hover { background: var(--doc-hover); color: var(--td1); }
.preview-compare-item-type {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.preview-compare-item-type.type-user  { background: var(--accent-text); }
.preview-compare-item-type.type-agent { background: var(--doc-accent); }
.preview-compare-item-type.type-auto  { background: var(--td3); }
.preview-compare-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preview-compare-item-ts {
    font-size: 10px;
    color: var(--td3);
    font-variant-numeric: tabular-nums;
}
.preview-compare-divider {
    height: 1px;
    background: var(--doc-border);
    margin: 4px 0;
}
.preview-bar-compare-suffix {
    font-weight: 400;
    color: var(--td3);
    margin-left: 4px;
}

/* "Restore selected" ghost button in the preview bar */
.preview-bar-restore-selected {
    background: none;
    border: 1px solid var(--doc-border);
    color: var(--td2);
    font: 600 11px var(--sans);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur), color var(--dur), border-color var(--dur);
    white-space: nowrap;
}
.preview-bar-restore-selected:hover:not(:disabled) {
    background: var(--doc-hover);
    border-color: var(--doc-ochre);
    color: var(--td1);
}
.preview-bar-restore-selected:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.btn-preview-restore {
    background: var(--red);
    border: none;
    color: var(--btn-text);
    font: 600 11px var(--sans);
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.btn-preview-restore:hover { background: var(--red-hover); }

.preview-field-label {
    font: 600 11px var(--sans);
    color: var(--td3);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.preview-arrow {
    color: var(--td3);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Section-level metadata diffs */
.preview-title-diff,
.preview-meta-diff {
    font-size: 12px;
    line-height: 1.5;
    padding: 3px 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid var(--doc-border);
    margin-top: 4px;
    padding-top: 6px;
}
.preview-section-summary {
    font-size: 12px;
    color: var(--t3);
    padding: 4px 0 2px;
    line-height: 1.5;
}

/* Source diff */
.preview-sources-diff {
    max-width: var(--doc-max-w);
    margin: 40px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--doc-border);
}
.preview-sources-diff .sources-heading {
    font: 400 24px/1.3 var(--serif);
    color: var(--td1);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}
.preview-source-card {
    padding: 12px 0;
    border-bottom: 1px solid var(--doc-border);
}
.preview-source-card:last-child { border-bottom: none; }
.preview-source-card.preview-unchanged { opacity: 0.6; }
.preview-source-card.preview-removed { background: var(--diff-add-block); border-radius: var(--radius-xs); padding: 12px 10px; margin-bottom: 4px; }
.preview-source-card.preview-added { opacity: 0.5; }
.preview-source-title {
    font: 500 16px/1.4 var(--serif);
    color: var(--td1);
}
.preview-source-url {
    font: 13px/1.4 var(--sans);
    color: var(--doc-accent);
    margin-top: 2px;
}
.preview-source-card .change-type-badge {
    display: inline-block;
    margin-top: 6px;
}

/* ---- Whole-section add/del wrappers ---- */
/* Green (added / checkpoint-only) */
.diff-add-wrap p { background: var(--diff-add-block); border-radius: var(--radius-2xs); padding: 0 2px; color: var(--diff-add-body); }
.diff-add-wrap .figure-block { background: var(--diff-add-block); border-radius: var(--radius); padding: 8px; }
/* Red (deleted / current-only) */
.diff-del-wrap p { background: var(--diff-del-block); border-radius: var(--radius-2xs); padding: 0 2px; color: var(--diff-del-body); }
.diff-del-wrap .figure-block { background: var(--diff-del-block); border-radius: var(--radius); padding: 8px; }
/* Figure blocks created by _hydratePreviewMarkers inside diff spans */
.diff-add .figure-block,
.preview-diff-body .figure-block.diff-fig-add { background: var(--diff-add-block); border-radius: var(--radius); padding: 8px; }
.diff-del .figure-block,
.preview-diff-body .figure-block.diff-fig-del { background: var(--diff-del-block); border-radius: var(--radius); padding: 8px; }

/* ---- Preview section-level restore ---- */
.preview-section-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 500 10px var(--sans);
    color: var(--accent);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    background: var(--accent-dim);
    margin-right: 8px;
    flex-shrink: 0;
    user-select: none;
}
.preview-section-check input[type="checkbox"] {
    accent-color: var(--accent);
    margin: 0;
    cursor: pointer;
}
.preview-diff-label {
    font: 10px var(--sans);
    color: var(--t3);
    margin-left: auto;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: var(--doc-hover-subtle);
}
.preview-diff-label.removed {
    color: var(--td3);
    background: var(--doc-hover-subtle);
}
.preview-title-diff .diff-del,
.preview-meta-diff .diff-del {
    background: var(--red-bg);
    color: var(--diff-del-body);
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}
.preview-title-diff .diff-add,
.preview-meta-diff .diff-add {
    background: var(--green-bg);
    color: var(--diff-add-body);
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}
/* preview-changed: exists in both checkpoint and current, with differences
   preview-removed: exists in checkpoint but NOT in current (green = restorable)
   preview-added:   exists in current but NOT in checkpoint (gray = not part of this checkpoint) */
.preview-section.preview-changed {
    border-left: var(--indicator-changed);
}
.preview-section.preview-removed {
    border-left: var(--indicator-added);
}
.preview-section.preview-removed .section-inner {
    background: var(--diff-add-faint);
}
.preview-section.preview-unchanged {
    opacity: 1;
}
.preview-section.preview-added {
    border-left: 3px solid var(--td3);
    opacity: 0.5;
}
.preview-section.preview-added .section-inner {
    background: var(--doc-hover-subtle);
}
/* Override subtle level-2/3 border in preview mode */
.preview-section.preview-changed.level-2,
.preview-section.preview-changed.level-3 {
    border-left: var(--indicator-changed);
}
.preview-section.preview-removed.level-2,
.preview-section.preview-removed.level-3 {
    border-left: var(--indicator-added);
}
.preview-section.preview-added.level-2,
.preview-section.preview-added.level-3 {
    border-left: 3px solid var(--td3);
}

/* Unchanged title/abstract in preview mode */
.doc-title-preview {
    font: 300 36px/1.2 var(--serif);
    letter-spacing: -0.5px;
    color: var(--td1);
}
.doc-desc-preview {
    font: 400 15px/1.7 var(--serif);
    color: var(--td2);
    margin-top: 12px;
}