/* ============================================================================
   SCREEN 2 WORLD-CLASS REDESIGN
   Overrides configure-sources-base.css styles to match Screen 5 design language.
   Must load AFTER all other configure-sources-*.css files.
   ============================================================================ */

/* ============================================================================
   PROGRESS SIDEBAR COLOR OVERRIDE — match Screen 2A / Screen 5 neutral palette
   When Screen 2 redesign is active, remap the blue-tinted sidebar palette to
   the same --vc-* neutral tokens that Screen 5 uses.
   ============================================================================ */
body.s2-active .progress-sidebar {
    --ps-bg:         var(--vc-bg-surface, #161922);
    --ps-bg3:        var(--vc-bg-surface-hover, #1C1F2B);
    --ps-bg4:        #1E2128;
    --ps-bg5:        #24272F;
    --ps-border:     rgba(255,255,255,0.06);
    --ps-border-mid: rgba(255,255,255,0.10);
    --ps-accent:     var(--vc-accent, #7C6FEE);
    --ps-t1:         var(--vc-t1, #E8E5F0);
    --ps-t2:         var(--vc-t2, #B3AECB);
    --ps-t3:         var(--vc-t3, #8B849E);
}

/* Align sidebar header bottom border with exec bar bottom border */
body.s2-active .progress-sidebar .ps-header {
    min-height: 68px;
    height: 68px;
    border-bottom: 1px solid var(--vc-border, rgba(255,255,255,0.06));
}

/* Remove the second border line from product switcher slot */
body.s2-active .progress-sidebar .ps-product-switcher-slot {
    border-bottom: none;
}

/* Hide the product switcher inside the sidebar on Screen 2 */
body.s2-active .progress-sidebar .ps-product-switcher-slot .product-switcher-container {
    display: none !important;
}

/* ============================================================================
   SIDEBAR: Source Status section — reuses Screen 2A verdict stats classes
   (.s2a-verdict-divider, .s2a-sidebar-verdicts, .s5sb-sec, .s5sb-verdicts)
   ============================================================================ */

/* ============================================================================
   LAYOUT OVERRIDES — flat, full-height, no rounded card wrapper
   ============================================================================ */

/* Fixed-position layout — fills viewport right of ProgressSidebar (same as Screen 2A) */
#screen2Container.s2-redesign {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: var(--ps-sidebar-width, 320px) !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 50;
    background: var(--vc-bg-body, #0F1117);
}

#screen2Container.s2-redesign.active {
    display: flex !important;
}

/* Collapsed sidebar — shift left edge */
body.ps-sidebar-collapsed #screen2Container.s2-redesign {
    left: var(--ps-sidebar-collapsed, 52px) !important;
}

/* Fallback: no ProgressSidebar (old app-sidebar still visible) */
body:not(.ps-sidebar-visible):not(.ps-sidebar-collapsed) #screen2Container.s2-redesign {
    left: 52px !important;
    top: 60px !important; /* nav header */
}

/* Mobile — no sidebar */
@media (max-width: 768px) {
    #screen2Container.s2-redesign {
        left: 0 !important;
        top: 0 !important;
    }
}

.s2-redesign .cs-config-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    max-height: none !important;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.s2-redesign .cs-content-area {
    padding: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Hide old prism wrapper */
.s2-redesign .prism-wrapper {
    display: none;
}

/* Hide old unified bar */
.s2-redesign .cs-unified-bar {
    display: none;
}

/* Hide old working space wrapper */
.s2-redesign .cs-working-space {
    display: none;
}

/* Category content in redesign — simple block, not flex column */
.s2-redesign .cs-category-content {
    display: block;
    flex: none;
    min-height: auto;
}
.s2-redesign .cs-category-content.cs-category-content-active {
    display: block;
}

/* Green ref badge for ready sources — matches warning/dead/info badge pattern */
.cs-ref-badge-success {
    background: rgba(62, 207, 142, 0.15) !important;
    border-color: rgba(62, 207, 142, 0.3) !important;
    color: var(--vc-green, #3ECF8E) !important;
}

/* ============================================================================
   SOURCE ROWS — flat, compact rows matching world-class mockup
   Replaces chunky card styling with clean table-like rows
   ============================================================================ */

/* Reset card to flat list row — the CARD itself is now the flex row container */
.s2-redesign .cs-source-card,
.s2-redesign .cs-source-card[data-status="ready"],
.s2-redesign .cs-source-card[data-status="matched"],
.s2-redesign .cs-source-card[data-status="skipped"],
.s2-redesign .cs-source-card[data-status="premium"],
.s2-redesign .cs-source-card.cs-ready-card,
.s2-redesign .cs-source-card.cs-dead-card,
.s2-redesign .cs-source-card.cs-html-card,
.s2-redesign .cs-source-card.cs-missing-url-card,
.s2-redesign .cs-source-card.cs-pdf-card,
.s2-redesign .cs-source-card.cs-fixed-card {
    display: flex !important;
    align-items: center !important;
    padding: 13px 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--vc-border, rgba(150,145,175,0.06)) !important;
    border-left: 3px solid transparent !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    cursor: pointer;
    transition: all 0.12s ease;
    overflow: visible;
    box-shadow: none !important;
    transform: none !important;
}
.s2-redesign .cs-source-card:last-child {
    border-bottom: none !important;
}
.s2-redesign .cs-source-card:hover {
    background: var(--vc-bg-hover, #1C1F2B) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Selected row — accent left border + subtle bg (doubled class for specificity) */
.s2-redesign .cs-source-card.s2r-card-selected.s2r-card-selected {
    border-left-color: var(--vc-accent, #818CF8) !important;
    background: rgba(129,140,248,0.04) !important;
}

/* Card main — NO padding (card owns the padding now), just flex-grow */
.s2-redesign .cs-card-main,
.s2-redesign .cs-source-card[data-status="ready"] .cs-card-main,
.s2-redesign .cs-source-card[data-status="matched"] .cs-card-main,
.s2-redesign .cs-source-card[data-status="skipped"] .cs-card-main,
.s2-redesign .cs-source-card[data-status="premium"] .cs-card-main,
.s2-redesign .cs-dead-card .cs-card-main,
.s2-redesign .cs-html-card .cs-card-main,
.s2-redesign .cs-missing-url-card .cs-card-main,
.s2-redesign .cs-pdf-card .cs-card-main {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 16px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    position: static;
}

/* Ref badge — hidden on Ready cards (they have green .s2r-row-num instead) */
.s2-redesign .cs-ready-card .cs-ref-badge,
.s2-redesign .cs-source-card[data-status="ready"] .cs-ref-badge {
    display: flex !important;
}

/* Ref badge — restyle non-ready cards to match the green row-number look */
.s2-redesign .cs-ref-badge {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: var(--vc-font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--vc-green, #3ECF8E) !important;
    min-width: 20px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    text-align: right;
    flex-shrink: 0;
}

/* Hide doc badge, hints, match-info, inline-status in flat row mode.
   Must beat base specificity e.g. .cs-source-card[data-status="ready"] .cs-match-info { display: flex !important } */
.s2-redesign .cs-doc-badge,
.s2-redesign .cs-source-hint,
.s2-redesign .cs-match-info,
.s2-redesign .cs-inline-status,
.s2-redesign .cs-action-group,
.s2-redesign .cs-source-card .cs-match-info,
.s2-redesign .cs-source-card .cs-inline-status,
.s2-redesign .cs-source-card .cs-action-group,
.s2-redesign .cs-source-card[data-status="ready"] .cs-match-info,
.s2-redesign .cs-source-card[data-status="ready"] .cs-inline-status,
.s2-redesign .cs-source-card[data-status="matched"] .cs-match-info,
.s2-redesign .cs-source-card[data-status="matched"] .cs-inline-status,
.s2-redesign .cs-source-card[data-status="skipped"] .cs-match-info,
.s2-redesign .cs-source-card[data-status="skipped"] .cs-inline-status {
    display: none !important;
}

/* Source info — title + domain below */
.s2-redesign .cs-source-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.s2-redesign .cs-doc-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--vc-t2, #A8ADBE);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.12s;
}
.s2-redesign .cs-source-card:hover .cs-doc-title,
.s2-redesign .cs-source-card.s2r-card-selected .cs-doc-title {
    color: var(--vc-t1, #E8EAED);
}
/* Hide old URL anchor from rows — replaced by s2r-row-domain */
.s2-redesign .cs-source-url {
    display: none !important;
}

/* Row domain — hidden from cards, shown in detail panel only */
.s2r-row-domain {
    display: none !important;
}

/* Row number — green highlighted */
.s2r-row-num {
    font-family: var(--vc-font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    color: var(--vc-green, #3ECF8E);
    min-width: 20px;
    text-align: right;
    flex-shrink: 0;
}

/* Hide inline action buttons — detail panel handles actions */
.s2-redesign .cs-source-card .cs-card-actions .cs-action-icon,
.s2-redesign .cs-source-card .cs-card-actions .cs-status-icon,
.s2-redesign .cs-source-card .cs-card-actions .cs-status-badge,
.s2-redesign .cs-source-card .cs-card-actions .cs-undo-icon,
.s2-redesign .cs-source-card .cs-card-actions .cs-privacy-lock {
    display: none;
}

/* Chevron indicator — shown on hover for non-ready cards */
.s2r-chevron {
    color: var(--vc-t4, #505568);
    flex-shrink: 0;
    transition: color 0.12s, transform 0.12s;
    opacity: 0;
}
.s2-redesign .cs-source-card:hover .s2r-chevron {
    opacity: 1;
    color: var(--vc-t2, #A8ADBE);
    transform: translateX(2px);
}
.s2-redesign .cs-source-card.s2r-card-selected .s2r-chevron {
    opacity: 1;
    color: var(--vc-accent, #818CF8);
}

/* Card-actions container — override base `position: absolute` AND
   base `display: none !important` on ready/matched/skipped cards */
.s2-redesign .cs-source-card .cs-card-actions,
.s2-redesign .cs-source-card[data-status="ready"] .cs-card-actions,
.s2-redesign .cs-source-card[data-status="matched"] .cs-card-actions,
.s2-redesign .cs-source-card[data-status="skipped"] .cs-card-actions,
.s2-redesign .cs-pdf-card[data-status="ready"] .cs-card-actions {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    z-index: auto;
    pointer-events: auto;
}

/* Hover-visible action button — mockup .vc-row-action-btn */
.s2r-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: none;
    border: 1px solid transparent;
    color: var(--vc-t4, #505568);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s;
    opacity: 0;
    padding: 0;
}
.s2-redesign .cs-source-card:hover .s2r-action-btn {
    opacity: 1;
}
.s2r-action-btn:hover {
    color: var(--vc-t1, #E8EAED);
    background: var(--vc-bg-elevated, #1E2130);
    border-color: var(--vc-border-hover, rgba(150,145,175,0.12));
}

/* Green circle-check for ready sources — mockup .vc-row-check */
.s2r-row-check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vc-green, #3ECF8E);
}

/* Ready card status — all visual overrides handled by the comprehensive reset above */

/* Section header — mockup .vc-source-list-header style */
.s2-redesign .cs-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    background: var(--vc-bg-surface, #161922);
}
.s2r-list-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.s2-redesign .cs-content-header h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--vc-t1, #E8EAED);
    padding: 0;
    margin: 0;
    line-height: 1.2;
}
/* Hide hint — replaced by header subtitle */
.s2-redesign .cs-subsection-hint {
    display: none !important;
}

/* Source list — no padding, no gap, rows touch each other */
.s2-redesign .cs-scrollable-list,
.s2-redesign .ready-list {
    padding: 0 !important;
    gap: 0 !important;
}

/* ============================================================================
   EXEC BAR — unified: doc name + category switcher + extraction progress
   Matches Screen 5 / Screen 2A exec bar level (68px)
   ============================================================================ */
.s2r-exec-bar {
    height: 68px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: var(--vc-bg-surface, #161922);
    border-bottom: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    padding: 0 24px;
    padding-right: calc(420px + 24px); /* Account for fixed detail panel width */
    position: relative;
    z-index: 30;
}
.s2r-exec-bar::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(124, 111, 238, 0.15), transparent 40%);
    pointer-events: none;
}

/* Mid section — doc name + tabs + progress */
.s2r-eb-mid {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 0 4px;
}

.s2r-exec-doc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--vc-t1, #E8EAED);
    padding-right: 16px;
    border-right: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
    flex-shrink: 0;
}
.s2r-exec-doc svg { color: var(--vc-t3, #8B90A0); flex-shrink: 0; }

/* Mode switcher — mirrors Screen 2A .s2a-eb-msw / Screen 5 pill buttons */
.s2r-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--vc-bg-page, var(--vc-bg-body, #0F1117));
    border: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0;
}

.s2r-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--vc-t3, #8B90A0);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    white-space: nowrap;
    transition: color 0.15s ease;
    line-height: 1;
}

.s2r-tab:hover {
    color: var(--vc-t2, #A8ADBE);
}

.s2r-tab.active {
    background: linear-gradient(135deg, rgba(124,111,238,0.25), rgba(139,92,255,0.18));
    box-shadow: 0 2px 8px rgba(124,111,238,0.3), 0 0 0 1px rgba(124,111,238,0.25);
    color: var(--vc-t1, #E8EAED) !important;
    font-weight: 600;
}

.s2r-tab svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Zoom controls — matches Screen 5 pattern */
.s2r-zoom {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    flex-shrink: 0;
}
.s2r-zoom-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--vc-r6, 6px);
    color: var(--vc-t4, #505568);
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}
.s2r-zoom-btn:hover {
    color: var(--vc-t1, #E8EAED);
    background: var(--vc-bg-hover, #1C1F2B);
}
.s2r-zoom-lbl {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vc-t3, #8B90A0);
    min-width: 38px;
    text-align: center;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.s2r-zoom-lbl:hover {
    color: var(--vc-t1, #E8EAED);
}

/* Match status + undo buttons on matched cards */
.s2-redesign .s2r-match-status-btn:hover {
    background: rgba(62,207,142,0.15) !important;
}
.s2-redesign .cs-undo-icon:hover {
    background: rgba(248,113,113,0.15) !important;
}

/* Right side — extraction progress */
.s2r-exec-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-left: 16px;
}
.s2r-exec-progress-text {
    font-size: 12px;
    color: var(--vc-t3, #8B90A0);
}
.s2r-exec-progress-text .s2r-num {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-weight: 600;
    color: var(--vc-t1, #E8EAED);
}
.s2r-exec-progress-bar {
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: var(--vc-bg-elevated, #1E2130);
    overflow: hidden;
}
.s2r-exec-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--vc-accent, #818CF8), #60A5FA);
    transition: width 0.6s ease;
}
.s2r-exec-pct {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    color: var(--vc-accent, #818CF8);
}

/* Processing badge */
.s2r-processing-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(240,180,41,0.08);
    border: 1px solid rgba(240,180,41,0.15);
    font-size: 12px;
    color: var(--vc-amber, #F0B429);
    font-weight: 500;
}
.s2r-processing-badge svg { animation: s2r-spin 1.5s linear infinite; }
@keyframes s2r-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   SOURCE AREA — horizontal split: list + detail panel
   Fills all remaining height between exec bar and footer
   ============================================================================ */
.s2r-source-area {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    position: relative;
    /* Nuclear scroll fix: exec-bar=68px + footer=60px + padding ≈ 130px */
    max-height: calc(100vh - 130px);
}

/* Source list (left) — scrolls inside .s2r-source-area.
   margin-right reserves space for the fixed-position detail panel. */
.s2r-source-list {
    margin-right: 420px;
    animation: s2r-fadeIn 0.3s ease;
}
/* When panel is collapsed, source list fills full width */
.s2r-source-area:has(.s2r-detail-panel.collapsed) .s2r-source-list {
    margin-right: 0;
}
/* When panel is collapsed, exec bar resets to normal padding.
   Uses :has() on the parent content-area which contains both exec bar and source area */
.cs-content-area:has(.s2r-detail-panel.collapsed) .s2r-exec-bar {
    padding-right: 24px;
}

/* Source list header */
.s2r-source-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    background: var(--vc-bg-surface, #161922);
    position: sticky;
    top: 0;
    z-index: 5;
}
.s2r-source-list-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.s2r-source-list-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.s2r-source-list-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--vc-t1, #E8EAED);
    line-height: 1.2;
}
.s2r-source-list-meta {
    font-size: 11px;
    color: var(--vc-t4, #505568);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    margin-top: 1px;
}
.s2r-source-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
}
.s2r-source-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* ============================================================================
   SOURCE ROWS — compact, scannable
   ============================================================================ */
.s2r-source-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    cursor: pointer;
    border-bottom: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    border-left: 3px solid transparent;
    transition: all 0.12s ease;
}
.s2r-source-row:hover {
    background: var(--vc-bg-hover, #1C1F2B);
}
.s2r-source-row.selected {
    border-left-color: var(--vc-accent, #818CF8);
    background: rgba(129,140,248,0.04);
}
.s2r-source-row:last-child {
    border-bottom: none;
}

.s2r-row-num {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    font-weight: 500;
    color: var(--vc-t4, #505568);
    min-width: 24px;
    text-align: right;
    flex-shrink: 0;
}

.s2r-row-ref {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.s2r-row-ref.green {
    background: rgba(62,207,142,0.06);
    color: var(--vc-green, #3ECF8E);
    border: 1px solid rgba(62,207,142,0.15);
}
.s2r-row-ref.amber {
    background: rgba(240,180,41,0.05);
    color: var(--vc-amber, #F0B429);
    border: 1px solid rgba(240,180,41,0.15);
}
.s2r-row-ref.blue {
    background: rgba(96,165,250,0.08);
    color: #60A5FA;
    border: 1px solid rgba(96,165,250,0.15);
}
.s2r-row-ref.red {
    background: rgba(248,113,113,0.05);
    color: #F87171;
    border: 1px solid rgba(248,113,113,0.15);
}
.s2r-row-ref.gray {
    background: rgba(107,114,128,0.06);
    color: #6B7280;
    border: 1px solid rgba(107,114,128,0.15);
}

.s2r-row-info {
    flex: 1;
    min-width: 0;
}
.s2r-row-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--vc-t2, #A8ADBE);
    line-height: 1.4;
    transition: color 0.12s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s2r-source-row:hover .s2r-row-title,
.s2r-source-row.selected .s2r-row-title {
    color: var(--vc-t1, #E8EAED);
}
.s2r-row-domain {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--vc-t4, #505568);
    margin-top: 2px;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
}

.s2r-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.s2r-row-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: none;
    border: 1px solid transparent;
    color: var(--vc-t4, #505568);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s;
    opacity: 0;
    font-family: var(--font-body, 'DM Sans', sans-serif);
}
.s2r-source-row:hover .s2r-row-action-btn {
    opacity: 1;
}
.s2r-row-action-btn:hover {
    color: var(--vc-t1, #E8EAED);
    background: var(--vc-bg-elevated, #1E2130);
    border-color: rgba(150,145,175,0.12);
}

.s2r-row-check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vc-green, #3ECF8E);
}

/* ============================================================================
   DETAIL PANEL (right side) — extends exactly to bottom
   ============================================================================ */
.s2r-detail-panel {
    position: fixed;
    top: 68px;
    right: 0;
    bottom: 60px;
    width: 420px;
    background: var(--vc-bg-surface, #161922);
    border-left: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 55;
    transition: width 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
    animation: s2r-slideInRight 0.3s ease;
}
.s2r-detail-panel.collapsed {
    width: 0;
    opacity: 0;
    border-left: none;
}

.s2r-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    border-bottom: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    flex-shrink: 0;
}
.s2r-detail-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vc-t1, #E8EAED);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s2r-detail-close {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: var(--vc-bg-surface-hover, #1C1F2B);
    border: none;
    color: var(--vc-t3, #8B90A0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
    font-family: var(--font-body, 'DM Sans', sans-serif);
}
.s2r-detail-close:hover {
    color: var(--vc-t1, #E8EAED);
    background: var(--vc-bg-hover, #1C1F2B);
}

/* Actions row below header — pill buttons (mirrors Screen 2A .s2a-panel-actions-row) */
.s2r-detail-actions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}

/* Pill action buttons (mirrors Screen 2A .s2a-act-btn) */
.s2r-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    background: var(--vc-bg-surface-hover, #1C1F2B);
    border: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    color: var(--vc-t2, #A8ADBE);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    white-space: nowrap;
    transition: all 0.15s;
    line-height: 1;
}
.s2r-act-btn svg {
    flex-shrink: 0;
}
.s2r-act-btn:hover {
    background: var(--vc-bg-hover, #1C1F2B);
    color: var(--vc-t1, #E8EAED);
    border-color: rgba(150,145,175,0.15);
}
.s2r-act-btn.s2r-act-primary {
    background: linear-gradient(135deg, rgba(124,111,238,0.2), rgba(139,92,255,0.15));
    border-color: rgba(124,111,238,0.3);
    color: var(--vc-t1, #E8EAED);
}
.s2r-act-btn.s2r-act-primary:hover {
    background: linear-gradient(135deg, rgba(124,111,238,0.3), rgba(139,92,255,0.2));
}
.s2r-act-btn.s2r-act-danger {
    color: #F87171;
}
.s2r-act-btn.s2r-act-danger:hover {
    background: rgba(248,113,113,0.08);
    border-color: rgba(248,113,113,0.2);
}
.s2r-act-btn.s2r-act-warning {
    color: var(--vc-amber, #F0B429);
}
.s2r-act-btn.s2r-act-warning:hover {
    background: rgba(240,180,41,0.08);
    border-color: rgba(240,180,41,0.2);
}

.s2r-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.s2r-detail-sec {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--vc-t3, #8B90A0);
    padding: 0 20px;
    margin: 20px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.s2r-detail-card {
    margin: 0 20px;
    background: var(--vc-bg-elevated, #1E2130);
    border: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    border-radius: 12px;
    padding: 14px 16px;
}
.s2r-detail-card + .s2r-detail-card { margin-top: 12px; }

.s2r-detail-url {
    font-size: 12px;
    color: var(--vc-t3, #8B90A0);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
}

.s2r-detail-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vc-accent, #818CF8);
    text-decoration: none;
    transition: color 0.12s;
}
.s2r-detail-link:hover { color: #a5b4fc; }

.s2r-detail-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--vc-border, rgba(150,145,175,0.06));
}
.s2r-detail-meta-row:last-child { border-bottom: none; }
.s2r-detail-meta-label {
    font-size: 12px;
    color: var(--vc-t3, #8B90A0);
}
.s2r-detail-meta-value {
    font-size: 12px;
    color: var(--vc-t1, #E8EAED);
    font-weight: 500;
}

.s2r-detail-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.s2r-detail-tag.green  { background: rgba(62,207,142,0.06); color: var(--vc-green, #3ECF8E); }
.s2r-detail-tag.amber  { background: rgba(240,180,41,0.05); color: var(--vc-amber, #F0B429); }
.s2r-detail-tag.blue   { background: rgba(96,165,250,0.08); color: #60A5FA; }
.s2r-detail-tag.red    { background: rgba(248,113,113,0.05); color: #F87171; }

/* Old bottom actions (removed — actions now at top in pill row) */
.s2r-detail-actions {
    display: none;
}

/* Old button styles kept for any remaining references */
.s2r-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    cursor: pointer;
    transition: all 0.15s;
    flex: 1;
    justify-content: center;
}
.s2r-btn-ghost {
    border: 1px solid rgba(150,145,175,0.12);
    background: transparent;
    color: var(--vc-t2, #A8ADBE);
}
.s2r-btn-ghost:hover {
    background: var(--vc-bg-hover, #1C1F2B);
    color: var(--vc-t1, #E8EAED);
}
.s2r-btn-primary {
    border: none;
    background: linear-gradient(135deg, var(--vc-accent, #818CF8), #6366F1);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(99,102,241,0.2);
}
.s2r-btn-primary:hover {
    transform: translateY(-1px);
}

/* ============================================================================
   FOOTER — matches Screen 2A .s2a-footer pattern
   ============================================================================ */
.s2-redesign #screen2Navigation {
    flex-shrink: 0;
    z-index: 10;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent;
}

.s2r-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    min-height: 60px;
    border-top: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    background: var(--vc-bg-surface, #161922);
    flex-shrink: 0;
}

.s2r-footer .vc-btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vc-t2, #A8ADBE);
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(150,145,175,0.12);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-body, 'DM Sans', sans-serif);
}
.s2r-footer .vc-btn-back:hover {
    background: var(--vc-bg-hover, #1C1F2B);
    color: var(--vc-t1, #E8EAED);
}

.s2r-footer .vc-btn-continue {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    padding: 11px 28px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #0D9373, #0a7a60);
    box-shadow: 0 4px 16px rgba(13, 147, 115, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body, 'DM Sans', sans-serif);
}
.s2r-footer .vc-btn-continue:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(13, 147, 115, 0.4);
}
.s2r-footer .vc-btn-continue.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Hide old navigation section when footer is present */
.s2-redesign .vc-navigation-section {
    display: none;
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */
.s2r-empty-state {
    padding: 60px 24px;
    text-align: center;
    color: var(--vc-t4, #505568);
    font-size: 14px;
}
.s2r-empty-state svg {
    margin-bottom: 12px;
    opacity: 0.3;
}

/* ============================================================================
   LEGACY CONTENT WRAPPER — for Links/Docs/Uncited tabs that keep card layout
   ============================================================================ */
/* Let content flow naturally — .s2r-source-list handles scrolling */
.s2r-legacy-content {
    padding: 24px;
    overflow: visible;
}

/* Prevent inner lists from creating nested scroll containers —
   .s2r-source-list is the ONE scroll container */
.s2-redesign .cs-scrollable-list,
.s2-redesign .cs-source-list {
    overflow: visible !important;
    max-height: none !important;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
@keyframes s2r-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes s2r-slideInRight {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ============================================================================
   SCROLLBAR — thin, subtle
   ============================================================================ */
.s2r-source-area::-webkit-scrollbar,
.s2r-source-list::-webkit-scrollbar,
.s2r-detail-body::-webkit-scrollbar,
.s2r-legacy-content::-webkit-scrollbar {
    width: 4px;
}
.s2r-source-area::-webkit-scrollbar-track,
.s2r-source-list::-webkit-scrollbar-track,
.s2r-detail-body::-webkit-scrollbar-track,
.s2r-legacy-content::-webkit-scrollbar-track {
    background: transparent;
}
.s2r-source-area::-webkit-scrollbar-thumb,
.s2r-source-list::-webkit-scrollbar-thumb,
.s2r-detail-body::-webkit-scrollbar-thumb,
.s2r-legacy-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
}

/* ============================================================================
   SECTION HEADER — keep buttons right-aligned, add vertical centering
   ============================================================================ */
.s2-redesign .cs-content-header > div[style*="justify-content"],
.s2-redesign .cs-content-header > div[style*="display: flex"],
.s2-redesign .cs-content-header > div[style*="display:flex"] {
    width: 100%;
    align-items: center;
}

/* Uncited helper actions — keep on the right */
.s2-redesign .cs-uncited-helper-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

/* ============================================================================
   BUTTON OVERRIDES — subtle dark surface, right-aligned
   ============================================================================ */
/* Smart Match trigger button */
.s2-redesign .sm-trigger-btn {
    background: var(--vc-bg-elevated, #1E2130) !important;
    border: 1px solid var(--vc-border, rgba(150,145,175,0.10)) !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--vc-t2, #A8ADBE) !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}
.s2-redesign .sm-trigger-btn:hover {
    background: var(--vc-bg-surface-hover, #1C1F2B) !important;
    border-color: rgba(150,145,175,0.18) !important;
    color: var(--vc-t1, #E8EAED) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Citation Helper / Audit Report / download buttons */
.s2-redesign .cs-btn-helper,
.s2-redesign .cs-btn-download {
    background: var(--vc-bg-elevated, #1E2130) !important;
    border: 1px solid var(--vc-border, rgba(150,145,175,0.10)) !important;
    color: var(--vc-t2, #A8ADBE) !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}
.s2-redesign .cs-btn-helper:hover,
.s2-redesign .cs-btn-download:hover {
    background: var(--vc-bg-surface-hover, #1C1F2B) !important;
    border-color: rgba(150,145,175,0.18) !important;
    color: var(--vc-t1, #E8EAED) !important;
}

/* Lock / shield icons (legacy) */
.s2-redesign .cs-shield-icon,
.s2-redesign .cs-icon-lock-all-private:not(.cs-privacy-toggle) {
    color: var(--vc-t3, #8B90A0) !important;
}

/* Privacy pill toggle — world-class redesign */
.s2-redesign .cs-privacy-toggle {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--vc-bg-page, #0F1117) !important;
    border: 1px solid rgba(150,145,175,0.18) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    gap: 2px !important;
    user-select: none;
    color: inherit !important;
}
.s2-redesign .cs-privacy-toggle:hover {
    border-color: rgba(150,145,175,0.35) !important;
}
.s2-redesign .cs-privacy-opt {
    padding: 7px 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--vc-t4, #505568) !important;
    background: transparent !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    transition: all 0.2s ease !important;
}
.s2-redesign .cs-privacy-opt-private.cs-privacy-opt-active {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60A5FA !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2), 0 0 0 1px rgba(59, 130, 246, 0.25) !important;
}
.s2-redesign .cs-privacy-opt-standard.cs-privacy-opt-active {
    background: rgba(45, 212, 191, 0.15) !important;
    color: #2DD4BF !important;
    box-shadow: 0 2px 8px rgba(45, 212, 191, 0.2), 0 0 0 1px rgba(45, 212, 191, 0.25) !important;
}
/* Light mode */
[data-theme="light"] .s2-redesign .cs-privacy-toggle {
    background: #e8ebf0 !important;
    border-color: rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .s2-redesign .cs-privacy-opt {
    color: #9ca3af !important;
}
[data-theme="light"] .s2-redesign .cs-privacy-opt-private.cs-privacy-opt-active {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #2563EB !important;
}
[data-theme="light"] .s2-redesign .cs-privacy-opt-standard.cs-privacy-opt-active {
    background: rgba(15, 118, 110, 0.12) !important;
    color: #0F766E !important;
}

/* ============================================================================
   UNCITED INLINE SPLIT-PANEL — replaces modal-based Citation Helper
   Left: document text viewer | Right: uncited source list
   ============================================================================ */

/* When inline uncited panel is active, hide detail panel and
   let the source-list fill the area. JS sets explicit height on
   .s2r-uncited-inline after init to guarantee constraint. */
.s2r-source-area.s2r-uncited-active {
    overflow: hidden;
}
.s2r-source-area.s2r-uncited-active .s2r-detail-panel { display: none !important; }
.s2r-source-area.s2r-uncited-active .s2r-source-list {
    margin-right: 0;
}
.s2r-source-area.s2r-uncited-active .s2r-legacy-content {
    padding: 0;
}

/* Root container — horizontal split. Height set by JS. */
.s2r-uncited-inline {
    display: flex;
    width: 100%;
    overflow: hidden;
}

/* ---- LEFT: Document text viewer ---- */
.s2r-uncited-doc-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--vc-border, rgba(150,145,175,0.06));
}

.s2r-uncited-doc-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--vc-border, rgba(150,145,175,0.08));
    background: var(--vc-bg-surface, #161922);
    flex-shrink: 0;
    position: relative;
}
.s2r-uncited-doc-search {
    width: 130px;
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--vc-border, rgba(150,145,175,0.10));
    background: var(--vc-bg-elevated, #1E2130);
    color: var(--vc-t2, #A8ADBE);
    font-size: 11px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    outline: none;
    transition: border-color 0.15s;
    position: absolute;
    right: 20px;
}
.s2r-uncited-doc-search:focus {
    border-color: var(--vc-accent, #818CF8);
}
.s2r-uncited-doc-search::placeholder {
    color: var(--vc-t4, #505568);
}

.s2r-uncited-doc-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--vc-t2, #A8ADBE);
    user-select: text;
    -webkit-user-select: text;
    word-wrap: break-word;
}
.s2r-uncited-doc-content::selection {
    background: rgba(124, 111, 238, 0.3);
}

/* Document typography — mirrors Screen 5 */
.s2r-doc-body { max-width: 720px; }
.s2r-uncited-doc-content h1.s2r-doc-h1 {
    font-size: 22px; font-weight: 800; color: var(--vc-t1, #E8EAED);
    margin: 0 0 8px 0; padding-bottom: 10px;
    border-bottom: 1px solid var(--vc-border, rgba(150,145,175,0.08));
    line-height: 1.3;
}
.s2r-uncited-doc-content h2.s2r-doc-h2 {
    font-size: 17px; font-weight: 700; color: var(--vc-t1, #E8EAED);
    margin: 28px 0 6px 0; line-height: 1.35;
}
.s2r-uncited-doc-content h3.s2r-doc-h3 {
    font-size: 15px; font-weight: 700; color: var(--vc-t1, #E8EAED);
    margin: 20px 0 4px 0; line-height: 1.4;
}
.s2r-uncited-doc-content p.s2r-doc-p {
    margin: 0 0 16px 0; line-height: 1.75;
}
.s2r-uncited-doc-content .s2r-doc-url a {
    color: var(--vc-accent, #818CF8); font-size: 12px;
    font-family: var(--vc-font-mono, 'IBM Plex Mono', monospace);
    word-break: break-all;
}
.s2r-uncited-doc-content hr.s2r-doc-hr {
    border: none; border-top: 1px solid var(--vc-border, rgba(150,145,175,0.08));
    margin: 24px 0;
}

/* Highlight styles for cited text and search matches */
.s2r-cited-highlight {
    background: rgba(62, 207, 142, 0.12);
    border-bottom: 2px solid var(--vc-green, #3ECF8E);
    padding: 1px 0;
    border-radius: 2px;
    cursor: default;
}
.s2r-search-highlight {
    background: rgba(240, 180, 41, 0.2);
    padding: 1px 2px;
    border-radius: 2px;
}
.s2r-search-highlight-active {
    background: rgba(240, 180, 41, 0.45);
    outline: 2px solid var(--vc-amber, #F0B429);
}

/* ---- Action bar — sits at bottom of the RIGHT source panel ---- */
.s2r-uncited-action-bar {
    flex-shrink: 0;
    border-top: 1px solid var(--vc-border, rgba(150,145,175,0.08));
    background: var(--vc-bg-elevated, #1E2130);
    padding: 12px 16px;
    transition: background 0.3s;
}
.s2r-uncited-action-bar.s2r-link-success {
    background: rgba(62,207,142,0.08);
}
.s2r-uncited-action-bar .s2r-uncited-selected-text {
    display: block;
    font-size: 12px;
    color: var(--vc-t4, #505568);
    font-style: italic;
    margin-bottom: 10px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.s2r-uncited-action-bar .s2r-uncited-selected-text.has-selection {
    color: var(--vc-t1, #E8EAED);
    font-weight: 500;
    font-style: normal;
}
.s2r-uncited-action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---- Cite-again prompt (replaces action bar after linking) ---- */
.s2r-uncited-cite-again {
    text-align: center;
}
.s2r-cite-again-text {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--vc-t1, #E8EAED);
    margin-bottom: 10px;
    line-height: 1.4;
}
.s2r-cite-again-buttons {
    display: flex;
    gap: 8px;
}
.s2r-cite-again-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    cursor: pointer;
    transition: all 0.15s;
}
.s2r-cite-again-yes {
    background: var(--vc-bg-surface, #161922);
    color: var(--vc-t2, #A8ADBE);
    border: 1px solid var(--vc-border, rgba(150,145,175,0.12));
}
.s2r-cite-again-yes:hover {
    background: var(--vc-bg-hover, #1C1F2B);
    color: var(--vc-t1, #E8EAED);
}
.s2r-cite-again-no {
    background: var(--vc-green, #3ECF8E);
    color: #0F1117;
}
.s2r-cite-again-no:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 10px rgba(62,207,142,0.2);
}

/* Step indicator — sits in the doc header */
.s2r-uncited-steps {
    display: flex;
    align-items: center;
    gap: 0;
}
.s2r-step {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.35;
    transition: opacity 0.2s, transform 0.2s;
}
.s2r-step.active { opacity: 1; transform: scale(1.05); }
.s2r-step.done { opacity: 0.7; }
.s2r-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--vc-font-mono, 'IBM Plex Mono', monospace);
    background: var(--vc-bg-elevated, #1E2130);
    color: var(--vc-t3, #8B90A0);
    border: 2px solid var(--vc-border, rgba(150,145,175,0.15));
    transition: all 0.2s;
}
.s2r-step.active .s2r-step-num {
    background: var(--vc-accent, #818CF8);
    color: #fff;
    border-color: var(--vc-accent, #818CF8);
    box-shadow: 0 0 8px rgba(129,140,248,0.4);
}
.s2r-step.done .s2r-step-num {
    background: #2DD4BF;
    color: #0F1117;
    border-color: #2DD4BF;
    box-shadow: 0 0 6px rgba(45,212,191,0.3);
}
.s2r-step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--vc-t3, #8B90A0);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.s2r-step.active .s2r-step-label { color: var(--vc-t1, #E8EAED); font-weight: 700; }
.s2r-step.done .s2r-step-label { color: #2DD4BF; }
.s2r-step-connector {
    width: 36px;
    height: 2px;
    background: var(--vc-border, rgba(150,145,175,0.15));
    margin: 0 6px;
    border-radius: 1px;
    transition: background 0.2s;
}
.s2r-step-connector.done {
    background: #2DD4BF;
}

/* Link citation button — full width in right panel */
.s2r-uncited-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    background: var(--vc-bg-surface, #161922);
    color: var(--vc-t4, #505568);
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.5;
    transition: all 0.2s;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    white-space: nowrap;
}
.s2r-uncited-link-btn.enabled {
    background: #2DD4BF;
    color: #0F1117;
    cursor: pointer;
    opacity: 1;
    font-weight: 600;
    box-shadow: 0 0 12px rgba(45,212,191,0.15);
}
.s2r-uncited-link-btn.enabled:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 18px rgba(45,212,191,0.25);
}
.s2r-uncited-link-btn svg { flex-shrink: 0; }
.s2r-uncited-clear-btn {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--vc-border, rgba(150,145,175,0.10));
    background: transparent;
    color: var(--vc-t3, #8B90A0);
    font-size: 11px;
    cursor: pointer;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    transition: all 0.15s;
}
.s2r-uncited-clear-btn:hover {
    color: var(--vc-t1, #E8EAED);
    border-color: rgba(150,145,175,0.2);
}

/* ---- RIGHT: Uncited source list panel ---- */
.s2r-uncited-source-panel {
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--vc-bg-surface, #161922);
}

.s2r-uncited-source-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    flex-shrink: 0;
}
.s2r-uncited-source-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--vc-t1, #E8EAED);
    margin: 0;
}
.s2r-uncited-source-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--vc-t3, #8B90A0);
    font-family: var(--vc-font-mono, 'IBM Plex Mono', monospace);
}

.s2r-uncited-source-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Source rows in the uncited panel */
.s2r-uncited-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    border-left: 3px solid transparent;
    transition: all 0.12s ease;
}
.s2r-uncited-row:hover {
    background: var(--vc-bg-hover, #1C1F2B);
}
.s2r-uncited-row.selected {
    border-left-color: var(--vc-accent, #818CF8);
    background: rgba(129,140,248,0.04);
}
.s2r-uncited-row:last-child {
    border-bottom: none;
}
.s2r-uncited-row-ref {
    font-family: var(--vc-font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    color: var(--vc-green, #3ECF8E);
    min-width: 20px;
    text-align: right;
    flex-shrink: 0;
}
.s2r-uncited-row-info {
    flex: 1;
    min-width: 0;
}
.s2r-uncited-row-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--vc-t2, #A8ADBE);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.12s;
}
.s2r-uncited-row:hover .s2r-uncited-row-title,
.s2r-uncited-row.selected .s2r-uncited-row-title {
    color: var(--vc-t1, #E8EAED);
}
.s2r-uncited-row-status {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.s2r-uncited-row-status.linked {
    background: rgba(62,207,142,0.08);
    color: var(--vc-green, #3ECF8E);
}
.s2r-uncited-row-status.uncited {
    background: rgba(107,114,128,0.08);
    color: #6B7280;
}
.s2r-uncited-row-domain {
    font-size: 11px;
    color: var(--vc-t4, #505568);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

/* ---- Linked claims review section ---- */
.s2r-uncited-linked-section {
    flex-shrink: 0;
    border-top: 1px solid var(--vc-border, rgba(150,145,175,0.06));
}
.s2r-uncited-linked-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.12s;
}
.s2r-uncited-linked-header:hover {
    background: var(--vc-bg-hover, #1C1F2B);
}
.s2r-uncited-linked-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--vc-green, #3ECF8E);
}
.s2r-uncited-linked-chevron {
    color: var(--vc-t3, #8B90A0);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.s2r-uncited-linked-list {
    max-height: 180px;
    overflow-y: auto;
}
.s2r-uncited-linked-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-top: 1px solid var(--vc-border, rgba(150,145,175,0.04));
    font-size: 12px;
}
.s2r-uncited-linked-ref {
    font-family: var(--vc-font-mono, 'IBM Plex Mono', monospace);
    font-size: 11px;
    font-weight: 600;
    color: var(--vc-accent, #818CF8);
    flex-shrink: 0;
}
.s2r-uncited-linked-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--vc-t3, #8B90A0);
    font-style: italic;
}
.s2r-uncited-linked-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--vc-t4, #505568);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.12s;
    display: flex;
    align-items: center;
}
.s2r-uncited-linked-remove:hover {
    color: #ef4444;
    background: rgba(239,68,68,0.08);
}
.s2r-uncited-linked-list::-webkit-scrollbar { width: 3px; }
.s2r-uncited-linked-list::-webkit-scrollbar-track { background: transparent; }
.s2r-uncited-linked-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }

/* Session stats bar at bottom of source panel */
.s2r-uncited-session-stats {
    flex-shrink: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--vc-border, rgba(150,145,175,0.06));
    display: flex;
    align-items: center;
    justify-content: center;
}
.s2r-uncited-finish-btn {
    width: 100%;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: var(--vc-green, #3ECF8E);
    color: #0F1117;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    transition: all 0.15s;
}
.s2r-uncited-finish-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 16px rgba(62,207,142,0.2);
}

/* Scrollbar for uncited panels */
.s2r-uncited-doc-content::-webkit-scrollbar,
.s2r-uncited-source-list::-webkit-scrollbar { width: 4px; }
.s2r-uncited-doc-content::-webkit-scrollbar-track,
.s2r-uncited-source-list::-webkit-scrollbar-track { background: transparent; }
.s2r-uncited-doc-content::-webkit-scrollbar-thumb,
.s2r-uncited-source-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1200px) {
    .s2r-detail-panel { width: 360px; }
    .s2r-source-list { margin-right: 360px; }
    .s2r-exec-bar { padding-right: calc(360px + 24px); }
    .s2r-source-area:has(.s2r-detail-panel.collapsed) .s2r-source-list { margin-right: 0; }
    .cs-content-area:has(.s2r-detail-panel.collapsed) .s2r-exec-bar { padding-right: 24px; }
}
@media (max-width: 900px) {
    .s2r-detail-panel {
        width: 100%;
        z-index: 60;
    }
    .s2r-source-list { margin-right: 0; }
    .s2r-exec-bar { padding-right: 24px; }
    .s2r-exec-doc { max-width: 150px; }
    .s2r-exec-right { display: none; }
}
@media (max-width: 600px) {
    .s2r-tabs { overflow-x: auto; gap: 2px; }
    .s2r-eb-mid { gap: 10px; }
    .s2r-exec-doc { max-width: 120px; font-size: 13px; }
    .s2r-tab { padding: 4px 8px; font-size: 11px; }
}

/* ============================================================================
   LIGHT MODE — darker teal for completed step indicators
   ============================================================================ */
[data-theme="light"] .s2r-step.done .s2r-step-num {
    background: #0F766E;
    border-color: #0F766E;
    color: #fff;
    box-shadow: 0 0 6px rgba(15,118,110,0.25);
}
[data-theme="light"] .s2r-step.done .s2r-step-label {
    color: #0F766E;
}
[data-theme="light"] .s2r-step-connector.done {
    background: #0F766E;
}
[data-theme="light"] .s2r-uncited-link-btn.enabled {
    background: #0F766E;
    box-shadow: 0 0 12px rgba(15,118,110,0.12);
}