style.css

/* ============================================================================
 * DeepLore — Styles
 * ============================================================================ */

/* --- Theme-aware color variables (on :root so popups can inherit) --- */
:root {
    /* Semantic colors — theme-aware where possible */
    --dle-success: var(--SmartThemeQuoteColor, #4caf50);
    --dle-error: color-mix(in srgb, #f44336 70%, var(--SmartThemeQuoteColor, #f44336));
    --dle-warning: color-mix(in srgb, var(--SmartThemeQuoteColor, #ff9800) 70%, orange);
    --dle-info: var(--SmartThemeUnderlineColor, #2196f3);
    --dle-accent: color-mix(in srgb, var(--SmartThemeUnderlineColor, #9c27b0) 60%, purple); /* unslop-ignore: purple is DLE's deliberate brand accent, not an unspecified default */
    --dle-border: var(--SmartThemeBorderColor, #444);
    --dle-bg-surface: var(--SmartThemeBlurTintColor, #1a1a2e);
    --dle-bg-2: color-mix(in srgb, var(--SmartThemeBlurTintColor, #1a1a2e) 80%, var(--SmartThemeBodyColor, #fff));
    --dle-bg-hover: color-mix(in srgb, var(--SmartThemeBodyColor, #fff) 8%, transparent);
    --dle-text-muted: var(--SmartThemeEmColor, #aaa);

    /* f057: single high-contrast keyboard-focus token. Previously the focus ring was
       hardcoded three different ways (success/green, accent/purple, raw QuoteColor) across
       ~35 :focus-visible rules with no contrast floor — a WCAG 2.4.7/2.4.11 hazard when the
       user's theme color sits near their panel. Mix toward body color so the ring stays
       visible against both the element fill and the surrounding surface in dark AND light.
       Paired with --dle-focus-halo for a contrast-insurance second ring on the main blocks. */
    --dle-focus: color-mix(in srgb, var(--SmartThemeUnderlineColor, #4c8dff) 65%, var(--SmartThemeBodyColor, #fff));
    --dle-focus-halo: color-mix(in srgb, var(--dle-focus) 35%, transparent);

    /* f058: text-safe foreground variants of the semantic palette. The base tokens above
       are tuned for fills/borders/tints (orange/green) and fail WCAG AA as foreground text
       on light themes (~2:1). These mix toward body color so they darken on light themes and
       lighten on dark — mirrors the proven --dle-guide-fg split. Use for `color:` text;
       keep the base tokens for background:/border:. */
    --dle-success-fg: color-mix(in srgb, var(--dle-success) 65%, var(--SmartThemeBodyColor, #fff));
    --dle-error-fg: color-mix(in srgb, var(--dle-error) 70%, var(--SmartThemeBodyColor, #fff));
    --dle-warning-fg: color-mix(in srgb, var(--dle-warning) 65%, var(--SmartThemeBodyColor, #fff));
    --dle-info-fg: color-mix(in srgb, var(--dle-info) 70%, var(--SmartThemeBodyColor, #fff));
    --dle-accent-fg: color-mix(in srgb, var(--dle-accent) 70%, var(--SmartThemeBodyColor, #fff));

    /* f060/f062: category identity hues promoted to named tokens so the graph tooltip
       badges, browse temperature cues, and legend share one palette instead of each baking
       its own hex. Fallbacks stay close to the prior inline values. */
    --dle-cat-constant: var(--SmartThemeQuoteColor, #d4a847);
    --dle-cat-seed: var(--SmartThemeUnderlineColor, #4c8dff);
    --dle-cat-bootstrap: #9c6ade;
    --dle-cat-error: var(--dle-error);
    --dle-cat-warning: var(--dle-warning);
    --dle-cat-pinned: var(--dle-info);

    /* Wave A: previously-phantom surface/text tokens (consumed but never declared).
       Theme-derived so light ST themes don't get a black island / wrong contrast.
       On dark themes these resolve close to the prior inline fallbacks. */
    --dle-bg-1: color-mix(in srgb, var(--SmartThemeBodyColor, #000) 12%, transparent);
    --dle-bg-3: color-mix(in srgb, var(--SmartThemeBodyColor, #fff) 14%, transparent);
    --dle-text: var(--SmartThemeBodyColor, #ddd);
    /* f061: text drawn ON a filled semantic color. Previously --dle-on-accent was just the
       body TEXT color, so on a LIGHT theme it became dark text on a saturated mid-tone accent
       fill with no guaranteed contrast. DLE's accent/success/error fills are all saturated
       mid-to-dark tones, so a near-white foreground is the contrast-safe pairing regardless
       of theme. Shared so the scattered on-fill sites (accent button, librarian/error badges)
       stop disagreeing (was: body-color vs raw SmartThemeBodyColor vs hardcoded #fff). The
       small text-shadow keeps the glyph legible if a user's fill lands unusually light. */
    --dle-on-accent: #fff;
    /* f061 follow-up: --dle-success is a RAW passthrough of --SmartThemeQuoteColor (unlike
       --dle-error/--dle-accent, which color-mix toward dark anchors), so it's often a pale
       mid-tone on light themes — #fff text on it is unreadable (the pre-f061 code used
       SmartThemeBodyColor here, which was contrast-correct). Track body color so the badge
       text darkens on light themes and lightens on dark, restoring contrast on both. */
    --dle-on-success: var(--SmartThemeBodyColor, #fff);
    --dle-on-error: #fff;

    /* BUG-215: brand accents — derived from theme so light themes don't kill
       contrast. Fallbacks match the prior hardcoded values. */
    --dle-guide-fg: color-mix(in srgb, var(--SmartThemeUnderlineColor, #b89cff) 75%, var(--SmartThemeBodyColor, #fff));
    --dle-guide-bg: color-mix(in srgb, var(--SmartThemeUnderlineColor, #b89cff) 18%, transparent);
    --dle-guide-border: color-mix(in srgb, var(--SmartThemeUnderlineColor, #b89cff) 40%, transparent);
    --dle-librarian-accent: color-mix(in srgb, var(--SmartThemeQuoteColor, #d4a847) 70%, var(--SmartThemeBodyColor, #fff));
    --dle-librarian-tint: var(--SmartThemeQuoteColor, #b8860b);

    /* Type scale (minor third 1.2 ratio)
       BUG-213: bumped `--dle-text-xs` from 0.7em to 0.78em so at ST's default 14px
       base it renders ~10.9px → ~11px, above the old 9.8px floor. Still compact but
       closer to WCAG 1.4.4 practical minimum.
       Settings-overhaul: re-anchored from em to calc(--mainFontSize × ratio) at the
       SAME ratios. em resolved against each element's inherited size, so nested
       small/.dle-text-sm contexts silently compounded (0.85 × 0.85 = 0.72 …); calc
       against the root var yields ONE fixed size per token everywhere while still
       tracking ST's font-scale slider (rem would not — ST sizes body, not html). */
    --dle-text-xs: calc(var(--mainFontSize, 15px) * 0.78);
    --dle-text-sm: calc(var(--mainFontSize, 15px) * 0.85);
    --dle-text-base: var(--mainFontSize, 15px);
    --dle-text-lg: calc(var(--mainFontSize, 15px) * 1.1);
    --dle-text-xl: calc(var(--mainFontSize, 15px) * 1.25);

    /* f068: single ST-aware monospace stack + code size token so every
       code/command/tool-output surface shares one face and one size instead
       of three drifting fallback stacks (bare `monospace`, full, and short). */
    --dle-font-mono: var(--monoFontFamily, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    --dle-text-code: var(--dle-text-sm);

    /* Spacing scale */
    --dle-space-1: 4px;
    --dle-space-2: 8px;
    --dle-space-3: 12px;
    --dle-space-4: 16px;
    --dle-space-5: 24px;

    /* Border radius scale */
    --dle-radius-sm: 3px;
    --dle-radius-md: 6px;
    --dle-radius-lg: 10px;
    --dle-radius-pill: 9999px;

    /* Shadow / elevation */
    --dle-shadow-sm: 0 1px 3px var(--SmartThemeShadowColor, rgba(0, 0, 0, 0.2));
    --dle-shadow-md: 0 2px 8px var(--SmartThemeShadowColor, rgba(0, 0, 0, 0.3));
    --dle-shadow-lg: 0 4px 24px var(--SmartThemeShadowColor, rgba(0, 0, 0, 0.4));

    /* Opacity scale */
    --dle-opacity-muted: 0.65;
    --dle-opacity-faint: 0.45;
    --dle-opacity-ghost: 0.25;
    --dle-opacity-disabled: 0.4;

    /* Transition-timing axis. Durations previously sprawled
       100/120/150/200/250/300ms with no shared scale; v2.6 migrated the bulk
       of transition/animation shorthands onto these three tokens so the whole
       extension's motion tempo retunes from here.
       Curve convention: incoming/reveal + hover feedback use `--dle-ease-out`
       (strong decelerate); outgoing/dismiss motion uses `--dle-ease` (expo). */
    --dle-dur-fast: 120ms;
    --dle-dur-base: 200ms;
    --dle-dur-slow: var(--animation-duration-slow, 320ms);
    --dle-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --dle-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Utility classes --- */
.dle-settings .dle-header-badge {
    font-size: 0.75em;
    color: var(--dle-text-muted);
    margin-left: 8px;
}
.dle-stub-status { margin: 6px 0; font-size: var(--dle-text-sm); opacity: 0.7; }
.dle-open-settings-btn { margin-top: 8px; }

.dle-settings .dle-text-sm {
    font-size: var(--dle-text-sm);
}

.dle-settings .dle-muted {
    color: var(--dle-text-muted);
}

/* f007: single source of truth for section descriptions across BOTH surfaces —
   the drawer stub (.dle-settings) and the real tabbed popup (.dle-settings-panel,
   which holds every actual description). One font-size, one margin pair on the
   token grid, and a muted COLOR (never opacity) so embedded <code>/<a> inside the
   description keep their own full-strength color. Zone tiers vary only
   --desc-emphasis (a mix toward the panel background), so lower tiers dim the
   description text without fading its inline links/code. Replaces the old
   duplicate .dle-settings-panel rule that used opacity:0.6 (which faded links). */
.dle-settings .dle-section-desc,
.dle-settings-panel .dle-section-desc {
    --desc-emphasis: 0%;
    font-size: var(--dle-text-sm);
    color: color-mix(in srgb, var(--dle-text-muted), var(--dle-bg-surface) var(--desc-emphasis));
    margin: var(--dle-space-1) 0 var(--dle-space-2);
}
.dle-settings-subsection-label {
    font-size: var(--dle-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
    margin: 8px 0 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid color-mix(in srgb, var(--SmartThemeBorderColor) 50%, transparent);
}

/* --- Status indicators --- */
.dle-settings .dle-status {
    display: inline-block;
    margin-left: 10px;
    font-size: var(--dle-text-sm);
}

.dle-settings .dle-status.success {
    color: var(--dle-success);
}

.dle-settings .dle-status.success::before {
    content: '\2713 ';
}

.dle-settings .dle-status.failure {
    color: var(--dle-error);
}

.dle-settings .dle-status.failure::before {
    content: '\2717 ';
}

/* Prompts tab uses a data-tone convention (ok|warn|info|err) for the status
   line and the per-row badges. Map it onto the same colour + glyph language as
   the .success/.failure class API above so the two status systems read
   identically across the settings popup. `ok`/`err` mirror success/failure;
   `warn` and `info` add the missing middle tones. */
.dle-settings .dle-status[data-tone="ok"] {
    color: var(--dle-success);
}
.dle-settings .dle-status[data-tone="ok"]::before {
    content: '\2713 ';
}
.dle-settings .dle-status[data-tone="err"] {
    color: var(--dle-error);
}
.dle-settings .dle-status[data-tone="err"]::before {
    content: '\2717 ';
}
.dle-settings .dle-status[data-tone="warn"] {
    color: var(--dle-warning-fg);
}
.dle-settings .dle-status[data-tone="warn"]::before {
    content: '\26A0 ';
}
.dle-settings .dle-status[data-tone="info"] {
    color: var(--dle-text-muted);
}
.dle-settings .dle-status[data-tone="info"]::before {
    content: '\24D8 ';
}

/* Prompts grid table — give it the card aesthetic the rest of the settings
   popup uses instead of relying on inline style attributes. Zebra rows, a
   weighted header, consistent cell padding. */
.dle-settings .dle-prompts-grid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dle-text-sm);
}
.dle-settings .dle-prompts-grid-table thead th {
    font-weight: 700;
    padding: 4px 8px;
    border-bottom: 1px solid var(--dle-border);
    color: var(--dle-text-muted);
}
.dle-settings .dle-prompts-grid-table tbody td {
    padding: 4px 8px;
    vertical-align: middle;
}
.dle-settings .dle-prompts-grid-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--SmartThemeBorderColor) 12%, transparent);
}
.dle-settings .dle-prompts-grid-table th,
.dle-settings .dle-prompts-grid-table td { text-align: left; }
.dle-settings .dle-prompts-grid-table .dle-col-actions { text-align: right; }
.dle-settings .dle-prompts-grid-section { margin-top: var(--dle-space-2); }
.dle-prompt-row-error { margin-left: var(--dle-space-1); color: var(--dle-error); }

/* BUG-161: `.dle-settings .dle-ai-stats` removed — dead rule, `.dle-ai-stats`
   only exists in drawer.html, never rendered inside `.dle-settings`. Drawer
   definition at the bottom of this file is now the sole source. */

/* --- Advanced toggle --- */
.dle-settings .dle-advanced-toggle {
    cursor: pointer;
    color: var(--dle-accent);
    font-size: var(--dle-text-sm);
    font-weight: 500;
    margin: 6px 0;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--dle-space-1);
}

.dle-settings .dle-advanced-toggle:hover {
    color: var(--SmartThemeBodyColor, #eee);
    text-decoration: underline;
}

.dle-settings .dle-advanced-icon {
    font-size: 0.8em;
    margin-right: 4px;
}

/* --- Vault row --- */
.dle-settings .dle-vault-row {
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-md);
    padding: 8px;
    margin-bottom: 6px;
    transition: background var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}

.dle-settings .dle-vault-row:hover {
    background: var(--dle-bg-hover);
}

.dle-settings .dle-vault-remove {
    color: var(--dle-error);
}

/* --- Disabled button class (for div-based buttons) --- */
.dle-settings .menu_button.disabled {
    /* BUG-173: was 0.4 via --dle-opacity-disabled; ST uses 0.5. Match ST for visual consistency. */
    opacity: 0.5;
    pointer-events: none;
}

/* --- Diagnostics export button: ~20% larger to match its prominence --- */
#dle-sp-export-diagnostics {
    font-size: 1.2em;
    padding: 7px 14px;
}
#dle-sp-export-diagnostics i {
    font-size: 1.1em;
}

/* --- Focus-visible styles (accessibility) --- */
.dle-settings button:focus-visible,
.dle-settings input:focus-visible,
.dle-settings select:focus-visible,
.dle-settings textarea:focus-visible,
.dle-settings .menu_button:focus-visible,
.dle-settings [tabindex="0"]:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--dle-focus-halo);
}

/* --- Focus-visible styles (drawer + popup) --- */
#deeplore-drawer button:focus-visible,
#deeplore-drawer input:focus-visible,
#deeplore-drawer select:focus-visible,
#deeplore-drawer a:focus-visible,
#deeplore-drawer [tabindex="0"]:focus-visible,
.dle-settings-popup button:focus-visible,
.dle-settings-popup input:focus-visible,
.dle-settings-popup select:focus-visible,
.dle-settings-popup [tabindex="0"]:focus-visible,
.dle-popup button:focus-visible,
.dle-popup input:focus-visible,
.dle-popup select:focus-visible,
.dle-popup textarea:focus-visible,
.dle-popup [tabindex="0"]:focus-visible,
.dle-graph-legend-item:focus-visible,
.dle-browse-nav-btn:focus-visible,
.dle-carto-browse-btn:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--dle-focus-halo);
}

/* --- Reduced motion support --- */
@media (prefers-reduced-motion: reduce) {
    .dle-settings,
    .dle-settings *,
    #deeplore-drawer,
    #deeplore-drawer *,
    .dle-settings-popup,
    .dle-settings-popup *,
    .dle-popup,
    .dle-popup * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    /* Explicitly disable status dot animation. (B1: the header token/entries-bar hazard
       classes that used to be listed here were removed — those bars no longer animate.
       The footer context-critical state uses a static glow only, so nothing to disable.) */
    .dle-status-dot.dle-status-active {
        animation: none !important;
    }
    .dle-shimmer { animation: none; opacity: 0.6; }
    /* f091: skeleton stays a static neutral block (no shimmer, no opacity penalty) so it
       still reads as "reserved, loading" rather than dim/error under reduced motion. */
    .dle-skeleton {
        animation: none !important;
        background: color-mix(in srgb, var(--SmartThemeBorderColor) 22%, transparent);
    }
    /* #20: explicit motion-kill list (idempotent with the shimmer/skeleton kills above
       and the wildcard duration clamp; named so the intent is unambiguous). */
    .dle-shimmer, .dle-skeleton, .dle-indexing-shimmer,
    .dle-entries-bar-container.dle-indexing-shimmer, .dle-stat-refreshing::after,
    .dle-lib-status-thinking::after, .dle-pulse, .dle-pulse-attention, .dle-wizard-pulse,
    .dle-librarian-badge.dle-visible, .dle-skip-tools-pulse,
    .dle-status-dot.dle-status-changed, .dle-why-entry.dle-why-new { animation: none !important; }
    .dle-shimmer { opacity: 0.6; }
    .dle-skeleton { background: color-mix(in srgb, var(--SmartThemeBorderColor) 22%, transparent); }
    .dle-indexing-shimmer, .dle-entries-bar-container.dle-indexing-shimmer { background-position: 0 0; }
    /* BUG-202: drop backdrop-filter when user requested reduced motion */
    #deeplore-panel.dle-overlay-mode {
        backdrop-filter: none !important;
    }
    /* Wave G: explicit kill for the new tab-panel fade (the wildcard above already
       clamps its duration; this makes the intent unambiguous). The :active press
       feedback is an instantaneous state change, not timed motion, so it is left
       intact under reduced motion by design. NOTE: this block is the canonical
       motion-kill for the .dle-settings / #deeplore-drawer / .dle-popup subtrees;
       the only DLE motion living OUTSIDE them is #dle-pipeline-status (in #form_sheld),
       which carries its own reduced-motion block near its definition. */
    .dle-tab-panel.active { animation: none !important; }
}

/* #21: stepped working-pulse — placed AFTER the #20 kill block so the wildcard
   iteration-count:1 clamp doesn't neuter the deliberate reduced-motion heartbeat. */
@media (prefers-reduced-motion: reduce) {
    .dle-status-dot.dle-status-active goo-spinner[data-motion-state="reduced"] {
        animation: dle-rm-working-pulse 2s steps(2, jump-none) infinite;
    }
}
@keyframes dle-rm-working-pulse { 0%{opacity:.55} 50%{opacity:1} 100%{opacity:.55} }

/* --- Section spacing between settings groups --- */
.dle-settings .inline-drawer-content > hr {
    margin: 10px 0;
}

/* ============================================================================
 * Popup Component Classes (Item 12)
 * Reusable classes for popup content — available globally since vars are on :root
 * ============================================================================ */

/* (type scale and spacing tokens consolidated into :root above) */

/* --- Connection Guidance Popup --- */
.dle-connection-guidance { line-height: 1.6; }
.dle-connection-guidance ol { padding-left: 1.5em; margin: var(--dle-space-2) 0; }
.dle-connection-guidance li { margin-bottom: var(--dle-space-1); }
.dle-guidance-option {
    background: color-mix(in srgb, var(--SmartThemeQuoteColor, #2a4a6b) 10%, transparent);
    border-radius: var(--dle-radius-md);
    padding: var(--dle-space-3);
    margin: var(--dle-space-3) 0;
}
.dle-guidance-option h4 {
    margin: 0 0 var(--dle-space-2) 0;
    font-size: var(--dle-text-lg);
}
.dle-guidance-option code {
    background: color-mix(in srgb, var(--SmartThemeQuoteColor, #2a4a6b) 20%, transparent);
    padding: 1px 4px;
    border-radius: 3px;
}

/* --- Phase 4: Drawer UX additions --- */

/* Why? tab: rejection group sub-headers */
.dle-why-not-group-header {
    display: flex; align-items: center; gap: var(--dle-space-2);
    padding: var(--dle-space-1) var(--dle-space-2);
    font-size: var(--dle-text-sm); font-weight: 600;
    color: var(--dle-text-muted); border-top: 1px solid var(--dle-border);
    margin-top: var(--dle-space-2);
}
.dle-why-not-group-header:first-child { border-top: none; margin-top: 0; }
.dle-why-not-group-count {
    margin-left: auto; font-size: var(--dle-text-xs);
    background: var(--dle-bg-2); border-radius: 8px; padding: 0 6px;
}
.dle-why-not-grouped { padding-left: var(--dle-space-4); }

/* Browse tab: active filter indicator */
.dle-filter-active {
    /* BUG-175: dropped !important — was stomping the green injected-entry left border
       on rows that were both filter-active and injected. Box-shadow ring is enough
       signal on its own for filter-active state. */
    border-color: var(--SmartThemeQuoteColor);
    box-shadow: 0 0 0 1px var(--SmartThemeQuoteColor);
}

/* Why? tab: collapsible entry timers section */
.dle-why-timers-section {
    border-top: 1px solid var(--dle-border);
    margin-top: var(--dle-space-2);
    padding-top: var(--dle-space-1);
}
.dle-why-timers-toggle {
    cursor: pointer; user-select: none;
    font-size: var(--dle-text-sm); color: var(--dle-text-muted);
    padding: var(--dle-space-1) var(--dle-space-2);
}
.dle-why-timers-toggle i { margin-right: var(--dle-space-1); }
/* BUG-193: `<summary>` is natively keyboard-focusable — just add a focus ring. */
.dle-why-timers-toggle:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    border-radius: var(--dle-radius-sm);
}

/* Status mascot SVG sizing inside dot */
.dle-status-dot svg { display: block; }

/* --- Phase 9: Performance Perception --- */

/* Cold start shimmer animation */
@keyframes dle-shimmer {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}
.dle-shimmer { animation: dle-shimmer 1.5s ease-in-out infinite; color: var(--dle-text-muted); }

/* f091: content-shaped skeleton primitive. Reserves the eventual content's footprint
   so the real number doesn't reflow the tile on first paint, and sweeps a neutral
   gradient (reusing the dle-indexing-shimmer keyframe defined later in this file)
   so the empty state reads as "reserved, loading" rather than a dim "…/error". */
.dle-skeleton {
    display: inline-block;
    vertical-align: middle;
    height: 0.9em;
    width: 2.2em;
    border-radius: var(--dle-radius-sm, 3px);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--SmartThemeBorderColor) 22%, transparent) 25%,
        color-mix(in srgb, var(--dle-accent) 24%, transparent) 50%,
        color-mix(in srgb, var(--SmartThemeBorderColor) 22%, transparent) 75%) center / 200% auto;
    animation: dle-indexing-shimmer 1.4s linear infinite;
}

/* --- Semantic color classes ---
   f058: these are foreground TEXT, so they use the contrast-safe -fg variants (which mix
   toward body color) instead of the raw fill tokens, which fail WCAG AA as text on light
   themes. Base tokens remain for fills/borders elsewhere. */
.dle-success { color: var(--dle-success-fg); }
.dle-error { color: var(--dle-error-fg); }
.dle-warning { color: var(--dle-warning-fg); }
.dle-info { color: var(--dle-info-fg); }
.dle-accent { color: var(--dle-accent-fg); }

/* --- Connection card (visual grouping for repeated connection config blocks) --- */
.dle-connection-card {
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-md);
    padding: var(--dle-space-2) var(--dle-space-3);
    margin: var(--dle-space-2) 0;
}
.dle-connection-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dle-space-1);
}
.dle-connection-card .dle-copy-ai-btn {
    font-size: var(--dle-text-xs);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-connection-card .dle-copy-ai-btn:hover {
    opacity: 1;
}

/* --- Card container --- */
.dle-card {
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-md);
    padding: var(--dle-space-1) var(--dle-space-2);
    margin-bottom: 4px;
}

/* --- Card header (clickable flex row) --- */
.dle-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
/* BUG-186: focus ring for keyboard users */
.dle-card-header:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
}

/* --- Content preview block --- */
.dle-preview {
    white-space: pre-wrap;
    font-size: var(--dle-text-sm);
    max-height: 300px;
    overflow-y: auto;
    background: var(--dle-bg-surface);
    padding: var(--dle-space-2);
    border-radius: var(--dle-radius-md);
}
.dle-preview--short { max-height: 200px; }
.dle-preview--tall { max-height: 400px; }

/* --- AI Notebook: hide <dle-notes> in chat during streaming (extracted on generation end) --- */
dle-notes { display: none !important; }

/* --- Muted text variants --- */
.dle-muted { opacity: var(--dle-opacity-muted); }
.dle-faint { opacity: var(--dle-opacity-faint); }
.dle-ghost { opacity: var(--dle-opacity-ghost); }

/* --- Text size utilities --- */
.dle-text-xs { font-size: var(--dle-text-xs); }
.dle-text-sm { font-size: var(--dle-text-sm); }
.dle-text-lg { font-size: var(--dle-text-lg); }
.dle-text-xl { font-size: var(--dle-text-xl); }

/* --- Badge --- */
.dle-badge {
    font-size: 0.8em;
    font-weight: bold;
}

/* --- Popup root (left-aligned) --- */
.dle-popup {
    text-align: left;
}
/* .dle-popup--mono removed — all popups use inherited/theme font */

/* --- Scrollable list region --- */
.dle-scroll-region {
    max-height: 60vh;
    overflow-y: auto;
}

/* --- Data table --- */
.dle-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.dle-table th,
.dle-table td {
    padding: var(--dle-space-1);
}
.dle-table th {
    text-align: left;
    border-bottom: 1px solid var(--dle-border);
}

/* --- Token bar fill --- */
/* Note: .dle-token-bar itself is defined under .dle-token-bar-container scope (~L1035) */
.dle-token-bar-fill {
    height: 100%;
    border-radius: var(--dle-radius-sm);
}

/* --- Cartographer token bar (per-entry, distinct from drawer's container/fill) --- */
.dle-carto-token-bar {
    height: 6px;
    background: var(--dle-border);
    border-radius: var(--dle-radius-sm);
    overflow: hidden;
    margin: 4px 0;
}
.dle-carto-token-bar-fill {
    height: 100%;
    border-radius: var(--dle-radius-sm);
}

/* --- Keyword highlight --- */
.dle-highlight {
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 30%, transparent);
    padding: 0 2px;
    border-radius: var(--dle-radius-sm);
}

/* --- Disabled / dimmed states --- */
.dle-disabled {
    opacity: var(--dle-opacity-disabled);
    pointer-events: none;
}
.dle-dimmed { opacity: 0.5; }

/* --- Danger button --- */
.dle-danger-btn {
    border-color: var(--dle-error, #f44336) !important;
    color: var(--dle-error, #f44336) !important;
}
.dle-danger-btn:hover {
    background: color-mix(in srgb, var(--dle-error, #f44336) 15%, transparent);
}

/* --- About tab logo --- */
.dle-about-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    cursor: pointer;
    color: var(--SmartThemeBodyColor);
    opacity: 0.85;
    transition: opacity var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
}
.dle-about-logo:hover { opacity: 1; }
.dle-about-logo svg { width: 100%; height: 100%; fill: currentColor; }

/* --- Info notices --- */
.dle-notice {
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: var(--dle-radius-md);
    background: color-mix(in srgb, var(--SmartThemeQuoteColor, #2a4a6b) 20%, var(--SmartThemeBlurTintColor, #1a1a2e));
    color: var(--SmartThemeBodyColor, #eee);
    font-size: 0.95em;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* AI disabled overlay */
.dle-ai-content-wrap {
    position: relative;
}

/* BUG-199: applying filter:blur to the wrap itself created a new stacking
   context that re-scoped the .dle-overlay-notice (z-index:10) and forced
   compound compositing with the notice card. Push the blur down to the
   wrap's non-overlay children so the wrap stays a normal stacking context
   and the overlay notice composites at the page level. */
.dle-ai-content-wrap.dle-blurred {
    pointer-events: none;
    user-select: none;
}
.dle-ai-content-wrap.dle-blurred > *:not(.dle-overlay-notice) {
    filter: blur(3px);
    opacity: 0.5;
}
.dle-ai-content-wrap.dle-blurred .dle-overlay-notice {
    pointer-events: auto;
}

.dle-overlay-notice {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.dle-overlay-notice-card {
    background: var(--SmartThemeBlurTintColor, rgba(20, 20, 35, 0.95));
    border: 1px solid var(--SmartThemeBorderColor, #444);
    border-radius: var(--dle-radius-md);
    padding: 24px 32px;
    text-align: center;
    max-width: 360px;
    color: var(--SmartThemeBodyColor, #ddd);
    font-size: 0.95em;
    line-height: 1.5;
    /* BUG-204: dropped backdrop-filter — parent already has filter: blur(3px)
       so the backdrop is already blurred. Double-blur was compounding GPU cost. */
    box-shadow: var(--dle-shadow-lg);
}

.dle-overlay-notice-card p {
    margin: 6px 0;
}

.dle-overlay-notice-card p:first-of-type {
    font-size: 1.05em;
    opacity: 0.7;
}

.dle-notice-link {
    color: var(--SmartThemeUnderlineColor, #9c9cff);
    text-decoration: underline;
    cursor: pointer;
}

.dle-notice-link:hover {
    opacity: 0.8;
}

@keyframes dle-pulse-glow {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 8px 2px var(--SmartThemeUnderlineColor, #9c9cff); }
}

.dle-pulse {
    animation: dle-pulse-glow 0.6s ease-in-out 3;
}

/* --- Screen reader only (DLE-scoped to avoid FA `.sr-only` collision, BUG-171) --- */
.dle-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================================
 * Zone Architecture (Item 13)
 * Settings panel tier hierarchy — visual neighborhoods
 * ============================================================================ */

/* Tier 1: Spotlight — essential setup (Enable, Quick Actions, Vaults, Tags) */
.dle-settings h4[data-zone="a"] {
    font-size: var(--dle-text-lg);
}
.dle-settings h4[data-zone="a"] + .dle-section-desc,
.dle-settings-panel h4[data-zone="a"] + .dle-section-desc {
    --desc-emphasis: 0%;
}

/* Tier 2: Key Light — core matching (Search Mode, Matching, Injection, Cartographer) */
.dle-settings h4[data-zone="b"] {
    font-size: var(--dle-text-base);
}
.dle-settings h4[data-zone="b"] + .dle-section-desc,
.dle-settings-panel h4[data-zone="b"] + .dle-section-desc {
    --desc-emphasis: 18%;
}

/* Tier 3: Ambient — AI & automation, infrastructure, reference */
.dle-settings h4[data-zone="c"],
.dle-settings h4[data-zone="d"] {
    font-size: 0.95em;
}
.dle-settings h4[data-zone="c"] + .dle-section-desc,
.dle-settings h4[data-zone="d"] + .dle-section-desc,
.dle-settings-panel h4[data-zone="c"] + .dle-section-desc,
.dle-settings-panel h4[data-zone="d"] + .dle-section-desc {
    --desc-emphasis: 32%;
}

/* Zone boundary separators (thicker hr between major zones) */
.dle-settings hr.dle-zone-separator {
    border: none;
    border-top: 2px solid var(--dle-border);
    margin: var(--dle-space-5) 0 var(--dle-space-3);
    opacity: 0.5;
}

/* ============================================================================
 * Transitions (Item 23)
 * ============================================================================ */

/* BUG-172: removed `.dle-settings .menu_button { transition: background-color 120ms ease }`.
   It was clobbering ST's shorthand `transition: var(--animation-duration-2x)` which animates
   `filter: grayscale()` on hover. Inherit ST's default instead. */

/* Advanced section expand/collapse */
.dle-settings .dle-advanced-section {
    overflow: hidden;
    transition: max-height var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out), opacity var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
}

/* Entry card expand in popups */
.dle-card {
    transition: border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}

/* --- Browse popup table --- */
.dle-browse-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dle-text-base);
    table-layout: fixed;
}
.dle-browse-table thead th {
    font-size: var(--dle-text-sm);
    color: var(--dle-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--dle-border);
    position: sticky;
    top: 0;
    background: var(--SmartThemeBlurTintColor, #1a1a1a);
    z-index: 1;
}
.dle-browse-table-row {
    cursor: pointer;
    transition: background-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-browse-table-row:hover {
    background: var(--dle-bg-hover);
}
.dle-browse-table-row:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: -2px;
}
.dle-browse-table-row td {
    padding: 4px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--dle-border) 40%, transparent);
    font-size: var(--dle-text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dle-browse-table-keys {
    color: var(--dle-text-muted);
    font-size: var(--dle-text-sm);
}
.dle-browse-table-detail {
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--dle-border);
    background: color-mix(in srgb, var(--dle-bg-hover) 50%, transparent);
}

/* Focus-visible transition */
.dle-settings [tabindex="0"] {
    transition: outline-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}

/* ============================================================================
 * Drawer Panel (Phase 0 mockup)
 * ============================================================================ */

/* --- Drawer z-index: lower than native drawers so they layer on top when DLE is pinned --- */
#deeplore-panel.pinnedOpen {
    z-index: 2999;
}

/* Fix for dynamically-injected drawers: @starting-style transition from height:0 → height:100%
   doesn't complete reliably for elements added after page load. Use explicit calc instead. */
/* BUG-212: avoid 100vh on iOS Safari (counts URL bar, causes scroll bounce).
   Use 100% as the safe fallback for ancient browsers; modern browsers use
   100dvh via the @supports gate below. */
#deeplore-panel.openDrawer {
    height: calc(100% - var(--topBarBlockSize, 35px));
    /* Issue #39: in inline (fillRight) mode the panel isn't position:fixed, so over-scroll
       at a sub-list's edge chains into ST's chat log behind it. Contain it. */
    overscroll-behavior: contain;
    touch-action: pan-y;
}
@supports (height: 100dvh) {
    #deeplore-panel.openDrawer {
        height: calc(100dvh - var(--topBarBlockSize, 35px));
    }
}

/* --- Drawer controls row (pin + close, side by side) --- */
.dle-drawer-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    align-self: flex-start;
}

/* --- Drawer pin (matches ST native: top-left, inline after drag grabber) --- */
.dle-drawer-pin {
    align-self: flex-start;
}

.dle-drawer-pin input[type="checkbox"] {
    display: none;
}

/* Show unlock when unchecked, lock when checked */
.dle-drawer-pin .checked {
    display: none;
}
.dle-drawer-pin .unchecked {
    display: block;
}
.dle-drawer-pin input:checked ~ label .checked {
    display: block;
}
.dle-drawer-pin input:checked ~ label .unchecked {
    display: none;
}

/* --- Drawer close button — inline next to lock, matches lock icon style --- */
.dle-drawer-close {
    background: none;
    border: none;
    margin: 0;
    color: var(--SmartThemeBodyColor, #ccc);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    padding: 8px;
    font-size: inherit;
    font-family: inherit;
    line-height: 1;
}
.dle-drawer-close:hover {
    opacity: 1;
}
.dle-drawer-close:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    opacity: 1;
}
.dle-drawer-settings {
    background: none;
    border: none;
    margin: 0;
    color: var(--SmartThemeBodyColor, #ccc);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    padding: 8px;
    font-size: inherit;
    font-family: inherit;
    line-height: 1;
}
.dle-drawer-settings:hover {
    opacity: 1;
    color: var(--dle-info);
}
.dle-drawer-settings:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    opacity: 1;
}
/* --- Two-zone architecture --- */
#deeplore-drawer {
    line-height: 1.4;
}

.dle-drawer-zone {
    padding: var(--dle-space-2);
}

.dle-zone-divider {
    border: none;
    border-top: 1px solid var(--dle-border);
    margin: var(--dle-space-1) 0;
}

/* Wave C: the divider inside the status zone groups the two budget bars into one cluster.
   Tighter margin than the main between-zones divider so it reads as an in-zone subdivision. */
.dle-budget-divider {
    margin: var(--dle-space-1) 0 0;
    opacity: var(--dle-opacity-muted);
}
/* Tiny muted cluster heading above the budget bars. Calm, lowercase-weight, theme-derived. */
.dle-budget-cluster-label {
    font-size: var(--dle-text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    /* f059: single dimming mechanism — was color:muted + opacity:0.65 stacked, which
       multiplied effective contrast down to ~2:1. Bake the de-emphasis into the color
       (mix toward surface) and drop the opacity so the text stays above the contrast floor. */
    color: color-mix(in srgb, var(--dle-text-muted) 80%, var(--dle-bg-surface));
    margin: 0 0 calc(-1 * var(--dle-space-1));
}

/* --- Zone 1: Fixed Status --- */
.dle-zone-status {
    display: flex;
    flex-direction: column;
    gap: var(--dle-space-2);
    background: color-mix(in srgb, var(--dle-bg-surface) 30%, transparent);
    border-left: 3px solid var(--dle-accent);
    border-radius: var(--dle-radius-md);
    padding: var(--dle-space-3);
}

/* Merged status + stats row. f028: the live phase label and the static stats are now two
   separate flex groups so a width-changing localized phase string ("Narrowing categories…",
   de/ru variants) can never reflow the entries/mode readouts. The activity group claims the
   first line and grows; the stats group wraps to a second line AS A WHOLE when space is tight,
   rather than letting individual stats jump around mid-generation. */
.dle-status-row {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    flex-wrap: wrap;
}

.dle-status-activity {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    /* Grow to fill the first line; allow shrink so the label's ellipsis can engage. */
    flex: 1 1 auto;
    min-width: 0;
}

.dle-status-stats {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    /* Stay together as one unit and never internally wrap — wraps to a second line whole. */
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.dle-pipeline-label {
    font-size: calc(var(--dle-text-xl) * 1.25);
    font-weight: 700;
    /* f028: reserve room and clamp so the longest localized phase can't shove its neighbors.
       The label fills its activity group and ellipses rather than pushing the stats around. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dle-stat-divider {
    /* f059: was color:muted + opacity:0.4 stacked. It's a decorative divider glyph, so a
       single faint color is enough — drop the redundant opacity to avoid pushing it below
       the visible floor in unpredictable theme/background combinations. */
    color: color-mix(in srgb, var(--dle-text-muted) 60%, var(--dle-bg-surface));
    font-size: calc(var(--dle-text-xs) * 1.25);
}

.dle-stat {
    font-size: calc(var(--dle-text-xs) * 1.25);
    color: var(--dle-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

/* f093: quiet "refreshing in background" adornment on the entry-count stat.
   Keeps the last-known number visible (optimistic UI) while a reuse-sync re-index
   runs — a faint pulsing dot signals freshening without implying data loss. */
.dle-stat-refreshing::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dle-accent, var(--SmartThemeQuoteColor, #aac8ff));
    flex-shrink: 0;
    margin-left: 1px;
    animation: dle-stat-refreshing-pulse 1.2s ease-in-out infinite;
}
@keyframes dle-stat-refreshing-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
    .dle-stat-refreshing::after { animation: none; opacity: 0.6; }
}

/* Active filters (compact chips in status zone) */
.dle-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dle-space-1);
}

.dle-chip-sm {
    font-size: var(--dle-text-sm);
    padding: 2px 8px;
    /* Neutral tint — differentiate from interactive gating tab chips */
    background: color-mix(in srgb, var(--SmartThemeBodyColor, #fff) 10%, transparent);
    border-color: color-mix(in srgb, var(--SmartThemeBodyColor, #fff) 20%, transparent);
}

/* --- Status mascot icon (replaces old dot) --- */
.dle-status-dot {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: color var(--animation-duration-slow, 375ms) ease;
}

.dle-status-dot svg {
    width: 100%;
    height: 100%;
}

/* f072: the fa-spinner status glyph was replaced by goo-spinner in Wave I; its sizing
   rule and the reduced-motion opt-out were dead CSS and have been removed. */

.dle-status-ok { color: var(--dle-success-fg); }
.dle-status-degraded { color: var(--dle-warning-fg); }
.dle-status-limited { color: color-mix(in srgb, var(--SmartThemeQuoteColor, #ff8c00) 70%, #f44336); }
.dle-status-offline { color: var(--dle-error-fg); }

/* --- Zone 2: Tabs --- */
.dle-zone-tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding-top: 0;
}

/* Tab bar */
.dle-tab-bar {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
    border-bottom: 1px solid var(--dle-border);
    gap: 0;
    padding: 0 var(--dle-space-2);
}

.dle-tab {
    flex: 1;
    padding: var(--dle-space-2);
    font-size: var(--dle-text-lg);
    font-weight: 500;
    color: var(--dle-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--animation-duration-2x, 250ms), border-color var(--animation-duration-2x, 250ms);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Inline tab text — shown by default, hidden in compact mode */
.dle-tab-text {
    font-size: var(--dle-text-sm);
    font-weight: 500;
    white-space: nowrap;
}

.dle-tab-bar.dle-compact-tabs .dle-tab-text {
    display: none;
}

.dle-tab:hover {
    color: var(--SmartThemeBodyColor, #eee);
}

.dle-tab.active {
    color: var(--SmartThemeBodyColor, #eee);
    text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
    border-bottom-color: var(--dle-accent);
}

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

/* (tab icons inherit font-size from .dle-tab) */

/* Tab count badges — small pill next to icon */
.dle-tab-badge {
    font-size: var(--dle-text-xs);
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--dle-accent) 30%, transparent);
    font-weight: 600;
    display: inline-block;
    visibility: hidden;
}
.dle-tab-badge:not(:empty) {
    visibility: visible;
    animation: dle-badge-pop var(--animation-duration-2x, 250ms) ease-out;
}

/* Active tab label (below tab bar) — hidden by default, shown on narrow screens */
.dle-tab-label {
    display: none;
}

/* Tab panels */
.dle-tab-panel {
    display: none;
    padding: var(--dle-space-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0; /* Allow flex item to shrink below content height for proper scrolling */
    /* Isolate scroll/layout from ST's scrollableInner so the panel is the sole
       scroll container for its content (prevents double-allocated scroll chain
       where sticky footers would scroll away with content). */
    contain: layout paint;
}

.dle-tab-panel.active {
    display: flex;
    flex-direction: column;
    /* Wave G: gentle fade/rise on tab switch (re-fires whenever the panel regains
       .active). In-drawer, so the broad prefers-reduced-motion block neutralizes it;
       an explicit kill is also listed there for clarity. */
    animation: dle-tab-fade var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
}
@keyframes dle-tab-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Panel toolbar (shared across tabs: label + diff + expand) */
.dle-panel-toolbar {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    margin-bottom: var(--dle-space-2);
    /* BUG-222: allow toolbar to wrap rather than overflow on narrow drawers
       (was overflowing below ~200px because every item was non-shrinkable). */
    flex-wrap: wrap;
    row-gap: var(--dle-space-1);
}

.dle-panel-toolbar .dle-text-sm {
    /* BUG-222: allow the label to shrink (and ellipsize via min-width:0)
       instead of forcing siblings to overflow. */
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dle-panel-toolbar .dle-section-diff {
    flex: 1;
}

.dle-panel-toolbar .dle-browse-input {
    flex: 1;
    min-width: 0;
}

/* Copy titles button (Why? tab toolbar) */
.dle-copy-titles-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--dle-text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: var(--dle-text-xs);
    opacity: var(--dle-opacity-muted);
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    line-height: 1;
}

.dle-copy-titles-btn:hover {
    opacity: 1;
    color: var(--SmartThemeBodyColor, #eee);
}

/* Tab expand button (open full popup) */
.dle-tab-expand {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--dle-text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: var(--dle-text-xs);
    opacity: var(--dle-opacity-muted);
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    line-height: 1;
}

.dle-tab-expand:hover {
    opacity: 1;
    color: var(--SmartThemeBodyColor, #eee);
}

.dle-tab-expand:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    opacity: 1;
}

/* --- Token bar (drawer version) --- */
.dle-token-bar-container {
    position: relative;
    background: var(--dle-border);
    border-radius: var(--dle-radius-sm);
    height: 18px;
    margin: 0;
    overflow: hidden;
}

.dle-token-bar-container .dle-token-bar {
    height: 100%;
    /* B4: calm NEUTRAL fill (was green = "good"). This header bar shows "this round's lore
       selection" — full ≠ good/bad/health, just the limiter working. Theme-derived gray. */
    background: color-mix(in srgb, var(--SmartThemeBodyColor, #b0b0b0) 42%, var(--dle-border));
    border-radius: var(--dle-radius-sm);
    /* BUG-168: width transition dropped — was forcing layout recalc + paint every
       frame for 300ms on every pipeline run. Background/shadow still transition
       since they don't reflow. */
    transition: background var(--dle-dur-slow, 320ms) var(--dle-ease-out, ease-out), box-shadow var(--dle-dur-slow, 320ms) var(--dle-ease-out, ease-out);
    margin: 0;
}

/* B1: header bars never go red. The .dle-budget-high/.dle-budget-critical hazard rules
   were removed here — drawer-render-status.js no longer applies those classes to the token
   or entries bars. Earned red lives ONLY on the footer context bar (overflow). */

.dle-token-bar-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--dle-text-sm);
    line-height: 18px;
    color: var(--SmartThemeBodyColor, #ccc);
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    font-weight: 600;
}

/* --- Entries bar (max entries budget) --- */
.dle-entries-bar-container {
    position: relative;
    background: var(--dle-border);
    border-radius: var(--dle-radius-sm);
    height: 14px;
    margin: 2px 0 0;
    overflow: hidden;
}

.dle-entries-bar-container .dle-entries-bar {
    height: 100%;
    /* B4: calm NEUTRAL fill (was blue/info). Same rationale as the token bar above. */
    background: color-mix(in srgb, var(--SmartThemeBodyColor, #b0b0b0) 42%, var(--dle-border));
    border-radius: var(--dle-radius-sm);
    /* BUG-168: see token-bar rule — width transition dropped to avoid reflow storm. */
    transition: background var(--dle-dur-slow, 320ms) var(--dle-ease-out, ease-out), box-shadow var(--dle-dur-slow, 320ms) var(--dle-ease-out, ease-out);
    margin: 0;
}
/* B1: entries-bar hazard rules removed — see token-bar note above. */

/* Wave C: calm NEAR-CAP pre-truncation cue (>=85% fill). Distinct but NOT red — a subtle warning
   TINT on the fill plus a faint warning hairline on the container, so the user sees lore is about
   to be trimmed before any cut happens. Honors "footer earns red / calm header": warning, never
   error. Applied by drawer-render-status.js via .dle-budget-near; cleared below cap. */
.dle-token-bar-container.dle-budget-near {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dle-warning) 40%, transparent);
}
.dle-token-bar-container.dle-budget-near .dle-token-bar {
    background: color-mix(in srgb, var(--dle-warning) 38%, var(--dle-border));
}
.dle-entries-bar-container.dle-budget-near {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dle-warning) 40%, transparent);
}
.dle-entries-bar-container.dle-budget-near .dle-entries-bar {
    background: color-mix(in srgb, var(--dle-warning) 38%, var(--dle-border));
}

.dle-entries-bar-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--dle-text-xs);
    line-height: 14px;
    color: var(--SmartThemeBodyColor, #ccc);
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    font-weight: 600;
}

/* B2: soft "cap trimmed lore" note under the header bars. Gentle, non-alarm: a muted
   info-tinted line, NOT warning-orange or error-red, NO hatch/glow. It only appears when a
   cap actually cost lore ("N of M shown" / "trimmed to fit") — calm acknowledgement that the
   limiter did its job, never an alarm. .dle-hidden toggled by drawer-render-status.js. */
.dle-bar-note {
    font-size: var(--dle-text-xs);
    line-height: 1.3;
    margin: 1px 0 0 2px;
    color: color-mix(in srgb, var(--dle-info, #6b9bd1) 70%, var(--SmartThemeBodyColor, #aaa));
    opacity: 0.85;
    font-style: italic;
}
.dle-bar-note.dle-hidden { display: none; }

/* --- Chips (gating filters, tags) --- */

.dle-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--dle-text-xs);
    padding: 2px 8px;
    border-radius: var(--dle-radius-lg);
    background: color-mix(in srgb, var(--dle-accent) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--dle-accent) 40%, transparent);
    color: var(--SmartThemeBodyColor, #eee);
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease, ease-in), transform var(--dle-dur-fast, 120ms) var(--dle-ease, ease-in);
}
/* BUG-216: use a keyframe animation with forwards fill-mode so rapid
   class toggles can't strand the chip mid-fade. */
@keyframes dle-chip-remove {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.8); }
}
.dle-chip.dle-chip-removing {
    animation: dle-chip-remove var(--dle-dur-fast, 120ms) var(--dle-ease, ease-in) forwards;
    pointer-events: none;
}

/* Chip remove button */
button.dle-chip-x {
    font-size: var(--dle-text-xs);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    background: none;
    border: none;
    color: inherit;
    padding: 4px;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

button.dle-chip-x:hover {
    opacity: 1;
}

/* --- Quick Actions --- */
.dle-quick-actions {
    padding-bottom: var(--dle-space-2);
    border-bottom: 1px solid var(--dle-border);
}

/* D4 (v2.5 Wave 3): quick-actions toolbar lives in its own zone, lifted out of the
   role="status" live region. Horizontal padding matches the status box (space-3) so the
   buttons stay visually aligned under it; the row keeps its own flex layout below. */
.dle-zone-actions {
    padding: var(--dle-space-2) var(--dle-space-3);
}

.dle-action-row {
    display: flex;
    gap: var(--dle-space-1);
    flex-wrap: wrap;
}

.dle-action-btn {
    flex: 0 0 auto;
    min-width: 36px;
    min-height: 36px;
    justify-content: center;
}

.dle-action-btn-labeled {
    gap: 6px;
    padding-left: 8px;
    padding-right: 8px;
}

.dle-action-label {
    font-size: var(--dle-text-sm);
    white-space: nowrap;
}

.dle-action-btn:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
}

/* --- Collapsible section headers --- */
.dle-section-header {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    cursor: pointer;
    padding: var(--dle-space-1) 0;
    user-select: none;
    transition: color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}

.dle-section-header:hover {
    color: var(--SmartThemeBodyColor, #eee);
}
/* BUG-185: defensive focus ring for any future use; class is not currently
   emitted by any HTML/JS but the selector is reserved. */
.dle-section-header:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    border-radius: var(--dle-radius-sm);
}

.dle-section-chevron {
    font-size: var(--dle-text-xs);
    transition: transform var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
    width: 12px;
    text-align: center;
}

.dle-section-header.collapsed .dle-section-chevron {
    transform: rotate(-90deg);
}

.dle-section-badge {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    margin-left: auto;
}

.dle-section-diff {
    font-size: var(--dle-text-xs);
    display: flex;
    gap: var(--dle-space-2);
}

.dle-diff-add { color: var(--dle-success); animation: dle-fade-in var(--animation-duration-2x, 250ms) ease-out; }
.dle-diff-remove { color: var(--dle-error); animation: dle-fade-in var(--animation-duration-2x, 250ms) ease-out; }

.dle-section-body {
    padding: var(--dle-space-1) 0 var(--dle-space-2);
}

/* --- Why? tab filter toggle --- */
.dle-why-filter-btn {
    background: none;
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-sm);
    color: var(--dle-text-muted);
    cursor: pointer;
    padding: 1px 8px;
    font-size: var(--dle-text-xs);
    transition: background-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-why-filter-btn.active {
    background: color-mix(in srgb, var(--dle-accent) 20%, transparent);
    color: var(--SmartThemeBodyColor, #eee);
    border-color: var(--dle-accent);
}
.dle-why-filter-btn:hover:not(.active) {
    background: var(--dle-bg-hover);
}

.dle-why-filter-btn:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
}

/* --- Why? tab entries --- */
.dle-why-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dle-why-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px var(--dle-space-2);
    border-radius: var(--dle-radius-sm);
    transition: background-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    animation: dle-entry-in 200ms ease-out both;
    animation-delay: calc(var(--i, 0) * 30ms);
    /* BUG-200: `will-change` removed — browser auto-promotes composited animations.
       Keeping it permanently was creating hundreds of persistent compositor layers
       in large vaults. */
}

.dle-why-entry:hover {
    background: var(--dle-bg-hover);
}

.dle-why-entry.dle-why-new {
    border-left: 2px solid var(--dle-success);
    animation: dle-entry-in 200ms ease-out both, dle-new-flash 600ms ease-out;
    animation-delay: calc(var(--i, 0) * 30ms), calc(var(--i, 0) * 30ms);
}

.dle-why-entry.dle-why-constant .dle-obsidian-link {
    color: var(--dle-text-muted);
}

.dle-why-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Obsidian link as button */
.dle-obsidian-link {
    cursor: pointer;
    color: var(--dle-info);
    text-decoration: none;
    font-size: var(--dle-text-sm);
    background: none;
    border: none;
    padding: 4px 0;
    text-align: left;
}

.dle-obsidian-link:hover {
    text-decoration: underline;
}

.dle-why-meta {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    font-size: var(--dle-text-xs);
}

.dle-why-tokens {
    color: var(--dle-text-muted);
}

.dle-why-match {
    font-weight: 600;
    font-size: var(--dle-text-xs);
    padding: 0 4px;
    border-radius: var(--dle-radius-sm);
    background: color-mix(in srgb, var(--dle-info) 20%, transparent);
    color: var(--dle-info);
}

/* Match type differentiation — semantic colors by how the entry was matched.
   Selectors match actual lowercased label output from getMatchLabel(). */
.dle-why-match[data-match-type="key"] {
    background: color-mix(in srgb, var(--dle-success) 20%, transparent);
    color: var(--dle-success);
}
.dle-why-match[data-match-type="ai"] {
    background: color-mix(in srgb, var(--dle-accent) 25%, transparent);
    color: var(--dle-accent);
    border-left: 2px solid var(--dle-accent);
    padding-left: 6px;
}
.dle-why-match[data-match-type="key+ai"] {
    background: color-mix(in srgb, var(--dle-accent) 25%, transparent);
    color: var(--dle-accent);
    border-left: 2px solid var(--dle-success);
    padding-left: 6px;
}
.dle-why-match[data-match-type="const"] {
    background: color-mix(in srgb, var(--dle-text-muted) 15%, transparent);
    color: var(--dle-text-muted);
    font-style: italic;
}
.dle-why-match[data-match-type="pin"] {
    background: color-mix(in srgb, var(--dle-info) 20%, transparent);
    color: var(--dle-info);
}
.dle-why-match[data-match-type="init"],
.dle-why-match[data-match-type="seed"] {
    background: color-mix(in srgb, var(--dle-success) 20%, transparent);
    color: var(--dle-success);
}

/* Wave C: KEY › AI breadcrumb for two-stage picks. Reuses the .dle-why-match chips (their
   data-match-type colors carry over); the separator is a quiet muted chevron. */
.dle-why-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.dle-why-bc-sep {
    color: var(--dle-text-muted);
    font-size: var(--dle-text-xs);
    opacity: var(--dle-opacity-muted);
}

/* Wave C: source-vault chip on injected rows (only when 2+ vaults enabled). Extends the
   .dle-why-match chip idiom — muted/info-tinted, theme-derived, with a small db glyph. */
.dle-why-vault {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--dle-text-xs);
    padding: 0 4px;
    border-radius: var(--dle-radius-sm);
    background: color-mix(in srgb, var(--dle-info) 14%, transparent);
    color: color-mix(in srgb, var(--dle-info) 70%, var(--SmartThemeBodyColor, #ccc));
    max-width: 9em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.dle-why-vault > i {
    font-size: var(--dle-text-sm);
    opacity: var(--dle-opacity-muted);
}

/* Wave C: verdict funnel header — N matched › N picked › N injected. A quiet DLE strip (like a
   chip row, not a banner): info-tinted hairline border + faint fill, theme-derived. */
.dle-why-funnel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dle-space-1) var(--dle-space-2);
    margin: 0 0 var(--dle-space-2);
    padding: var(--dle-space-1) var(--dle-space-2);
    border-radius: var(--dle-radius-sm);
    background: color-mix(in srgb, var(--dle-info) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--dle-info) 22%, transparent);
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
}
.dle-why-funnel[hidden] { display: none; }
.dle-funnel-seg {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.dle-funnel-n {
    font-weight: 600;
    color: color-mix(in srgb, var(--dle-info) 75%, var(--SmartThemeBodyColor, #ddd));
}
.dle-funnel-label { color: var(--dle-text-muted); }
.dle-funnel-arrow {
    color: var(--dle-text-muted);
    opacity: var(--dle-opacity-muted);
}

.dle-why-new-badge {
    font-weight: 600;
    font-size: var(--dle-text-xs);
    padding: 0 4px;
    border-radius: var(--dle-radius-sm);
    background: color-mix(in srgb, var(--dle-success) 20%, transparent);
    color: var(--dle-success);
}

/* --- Injection count badge (shared by Why? tab + Browse tab) --- */
.dle-inject-count {
    font-weight: 600;
    font-size: var(--dle-text-xs);
    padding: 0 4px;
    border-radius: var(--dle-radius-sm);
    background: color-mix(in srgb, var(--dle-accent, #9c27b0) 20%, transparent);
    color: var(--dle-accent, #9c27b0);
    white-space: nowrap;
}

/* --- Cartographer stats line --- */
.dle-carto-stats {
    color: var(--dle-text-muted, #888);
    padding: 2px 0;
}

/* --- Why Not entries (filtered out) --- */
.dle-why-not-entry {
    opacity: 0.75;
}

.dle-why-not-reason {
    font-size: var(--dle-text-xs);
    color: var(--dle-warning-fg);
    background: color-mix(in srgb, var(--dle-warning) 20%, transparent);
}

/* Wave C: Fix-It pin on a filtered-out row. HOVER/FOCUS-REVEAL (hidden until the row is hovered
   or anything inside it is keyboard-focused — :focus-within keeps it keyboard-reachable). Mirrors
   the .dle-lib-msg-action reveal idiom but adds the focus path the chat actions lack. Calm
   accent-tinted pill; theme-derived. Goes active (info tint) once clicked. */
.dle-why-fixit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--dle-text-xs);
    padding: 1px 6px;
    border-radius: var(--dle-radius-sm);
    border: 1px solid color-mix(in srgb, var(--dle-accent) 35%, transparent);
    background: color-mix(in srgb, var(--dle-accent) 14%, transparent);
    color: color-mix(in srgb, var(--dle-accent) 75%, var(--SmartThemeBodyColor, #ddd));
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), background var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    white-space: nowrap;
}
.dle-why-not-entry:hover .dle-why-fixit,
.dle-why-not-entry:focus-within .dle-why-fixit {
    opacity: 1;
}
.dle-why-fixit:hover {
    background: color-mix(in srgb, var(--dle-accent) 24%, transparent);
}
.dle-why-fixit:focus-visible {
    opacity: 1;
    outline: 2px solid var(--dle-focus);
    outline-offset: 1px;
}
.dle-why-fixit.dle-why-fixit-active {
    opacity: 1;
    border-color: color-mix(in srgb, var(--dle-info) 45%, transparent);
    background: color-mix(in srgb, var(--dle-info) 20%, transparent);
    color: color-mix(in srgb, var(--dle-info) 80%, var(--SmartThemeBodyColor, #ddd));
}
.dle-why-fixit > i { font-size: var(--dle-text-sm); }
/* Touch / no-hover devices can't hover-reveal — keep the Fix-It affordance visible-but-quiet. */
@media (hover: none) {
    .dle-why-fixit { opacity: var(--dle-opacity-muted); }
}

/* ============================================================================
 * Coarse-pointer (touch) hit-area floor — Issue #39 / WCAG 2.5.5 / Apple HIG
 * Desktop (fine pointer) is untouched. This block ONLY grows hit areas to a
 * 44px floor; visual padding and glyph sizes are preserved (icon buttons use a
 * centered flexbox so the glyph stays small while the tap target grows).
 * ============================================================================ */
@media (pointer: coarse) {
    /* Tabs / nav rows: keep visual padding, just guarantee a 44px tall hit area. */
    .dle-tab,
    .dle-settings-tab,
    .dle-nav-group-header,
    .dle-librarian-sub-tab {
        min-height: 44px;
    }

    /* Pill / text action buttons: lift the floor without changing label size. */
    .dle-tool-btn {
        min-height: 44px;
    }

    /* Small icon-only buttons: expand to a 44x44 tap target, centered so the glyph
       stays its original size. */
    button.dle-chip-x,
    .dle-drawer-close,
    .dle-tab-expand {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Browse panel --- */
.dle-browse-summary {
    padding: 2px var(--dle-space-2);
    font-size: var(--dle-text-xs);
    opacity: 0.7;
}

.dle-browse-why-not {
    font-size: 0.75em;
    opacity: 0.5;
    cursor: help;
    padding: 0 2px;
    color: var(--dle-warning, #e8a33d);
}
.dle-browse-why-not:hover {
    opacity: 0.9;
}

.dle-browse-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dle-space-1);
}

.dle-browse-filter-select,
.dle-browse-sort-select {
    /* Reflow to 2-up, then 1-up, as the drawer narrows instead of crushing every
       select to an illegible ~50px sliver (f031). min-width keeps option labels and
       their live counts readable; longer DE/RU labels just bump the row count. */
    flex: 1 1 calc(50% - var(--dle-space-1));
    font-size: var(--dle-text-xs);
    padding: 2px 4px;
    min-width: 7rem;
}

/* Keep Sort on its own full-width line once the row has wrapped on a narrow drawer. */
@media (max-width: 480px) {
    .dle-browse-sort-select {
        flex-basis: 100%;
    }
}

.dle-browse-input {
    margin-bottom: var(--dle-space-2);
}

.dle-browse-list {
    position: relative; /* virtual scroll container — children use absolute positioning */
    flex: 1 1 0;
    /* BUG-181: explicit overflow + min-height to keep virtualization bounded even
       when the flex chain changes shape. Without min-height: 0, a flex item defaults
       to min-content and the container can grow unbounded. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain; /* Issue #39: keep over-scroll from chaining into ST chat */
}

.dle-browse-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px var(--dle-space-2);
    border-radius: var(--dle-radius-sm);
    overflow: hidden;
    height: 38px; /* must match BROWSE_ROW_HEIGHT in drawer-state.js */
    box-sizing: border-box;
}

.dle-browse-entry {
    transition: height var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out), background var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-browse-entry:hover {
    background: var(--dle-bg-hover);
}

/* Injected-last-gen indicator */
.dle-browse-entry.dle-browse-injected {
    border-left: 2px solid var(--dle-success);
}

/* Entry temperature indicator — cell filter tint by injection frequency.
   f062: express temperature THEME-RELATIVE instead of hardcoding dark-tuned hex/HSL
   lightness. Previously HOT used hsl reds locked at 25-35% lightness and COLD used fixed
   indigo (#1a2255/#223388/#4455bb), so on a LIGHT theme the "hot" tint was a dark smudge
   and the cold border read as a near-black glitch rather than a cue. Now the hue comes from
   the theme tokens (--dle-error / --dle-info) and only the ALPHA scales with --dle-temp, so
   the cue is a light wash on light themes and a glow on dark. --dle-temp stays the intensity
   knob; the category hues come from the shared --dle-cat-* palette so the legend matches. */
/* HOT: theme red — strength scales with --dle-temp */
.dle-browse-entry.dle-temp-hot {
    background: color-mix(in srgb, var(--dle-cat-error) calc(var(--dle-temp, 0) * 22%), transparent);
    border-left: 3px solid color-mix(in srgb, var(--dle-cat-error) calc(var(--dle-temp, 0) * 33%), transparent);
}
.dle-browse-entry.dle-temp-hot .dle-browse-title {
    color: color-mix(in srgb, var(--dle-error-fg) calc(var(--dle-temp, 0) * 22%), currentColor);
}
/* COLD: theme blue — strength scales with COLDNESS (lower --dle-temp = colder = stronger).
   Cold hue is tempScore < 0.8, so coldness = (0.8 - --dle-temp); +floor keeps the faintest
   cold entries visible and the coldest (--dle-temp→0) gets the strongest wash. */
.dle-browse-entry.dle-temp-cold {
    background: color-mix(in srgb, var(--dle-cat-seed) calc(12% + (0.8 - var(--dle-temp, 0)) * 32%), transparent);
    border-left: 3px solid color-mix(in srgb, var(--dle-cat-seed) calc(28% + (0.8 - var(--dle-temp, 0)) * 65%), transparent);
}
.dle-browse-entry.dle-temp-cold .dle-browse-title {
    color: color-mix(in srgb, var(--dle-info-fg) calc(var(--dle-temp, 0) * 22%), currentColor);
}

.dle-browse-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.dle-browse-title {
    font-size: var(--dle-text-sm);
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dle-browse-keys {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    line-height: 1.3; /* real leading so descenders aren't clipped (f035) */
    letter-spacing: 0.02em;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dle-browse-controls {
    display: flex;
    align-items: center;
    gap: var(--dle-space-1);
    flex-shrink: 0;
}

/* Entry expand preview (inline below entry row) */
.dle-browse-preview {
    padding: 6px 8px;
    border-left: 2px solid var(--dle-border);
    animation: dle-fade-in 150ms ease-out;
    margin-top: 2px;
    width: 100%;
}
.dle-browse-preview-text {
    font-size: var(--dle-text-sm);
    opacity: 0.85;
    max-height: 100px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
}
.dle-browse-preview-meta {
    font-size: var(--dle-text-xs);
    opacity: 0.6;
    margin-top: 4px;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* When expanded, the entry contains its own preview within the JS-managed
   height. BUG-221: dropped `overflow: visible` (which depended on every
   ancestor in the virtual scroll chain leaving overflow unset) and use
   `overflow: hidden` so the row clips itself — independent of parent. */
.dle-browse-entry:has(.dle-browse-preview) {
    flex-direction: column;
    align-items: stretch;
    z-index: 10;
    background: var(--SmartThemeBlurTintColor, #1a1a1a);
    border-radius: var(--dle-radius-md);
    box-shadow: var(--dle-shadow-md);
    overflow: hidden;
}

.dle-browse-info {
    cursor: pointer;
}

.dle-browse-priority {
    font-size: var(--dle-text-xs);
    font-weight: 600;
    color: var(--dle-text-muted);
}

.dle-browse-constant {
    color: var(--dle-accent);
}

.dle-browse-guide-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: var(--dle-text-xs);
    font-weight: 600;
    border-radius: 8px;
    background: var(--dle-guide-bg);
    color: var(--dle-guide-fg);
    border: 1px solid var(--dle-guide-border);
    vertical-align: middle;
}
.dle-browse-guide-pill i { margin-right: 3px; }

button.dle-browse-pin,
button.dle-browse-block,
button.dle-browse-why {
    font-size: var(--dle-text-base);
    cursor: pointer;
    opacity: var(--dle-opacity-muted);
    background: none;
    border: none;
    color: inherit;
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.dle-browse-pin:hover,
button.dle-browse-block:hover,
button.dle-browse-why:hover {
    opacity: 1;
    background: var(--dle-bg-hover);
    border-radius: var(--dle-radius-sm);
}

button.dle-browse-pin.dle-pin-active {
    opacity: 1;
    color: var(--dle-info);
}

button.dle-browse-block.dle-block-active {
    opacity: 1;
    color: var(--dle-error);
}

/* --- Browse batch toolbar (#13 folder grouping + #26 batch optimize) --- */
.dle-browse-batch-toolbar {
    display: flex;
    align-items: center;
    gap: var(--dle-space-1);
    padding: 2px 0;
    flex-wrap: wrap;
}
.dle-browse-batch-toolbar .menu_button {
    padding: 2px 8px;
    font-size: var(--dle-text-xs);
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dle-browse-batch-toolbar .dle-toolbar-label {
    font-size: var(--dle-text-xs);
}
.dle-browse-group-toggle[data-pressed="true"],
.dle-browse-select-toggle[data-pressed="true"] {
    background: var(--dle-bg-hover);
    color: var(--dle-accent);
    border-color: var(--dle-accent);
}
.dle-browse-optimize-selected {
    margin-left: auto;
}
.dle-browse-optimize-selected:not([hidden]) {
    background: var(--dle-accent);
    color: var(--dle-on-accent, #fff);
}

/* Folder header rows (only present when grouping is on) */
.dle-browse-folder-header {
    display: flex;
    align-items: center;
    gap: var(--dle-space-1);
    height: 38px; /* MUST match BROWSE_ROW_HEIGHT */
    padding: 0 var(--dle-space-2);
    box-sizing: border-box;
    background: color-mix(in srgb, var(--SmartThemeQuoteColor, #444) 8%, transparent);
    border-left: 3px solid var(--dle-accent);
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: var(--dle-text-sm);
}
.dle-browse-folder-header:hover {
    background: var(--dle-bg-hover);
}
.dle-browse-folder-caret {
    transition: transform var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    opacity: 0.7;
    width: 12px;
    text-align: center;
}
.dle-browse-folder-header[data-expanded="true"] .dle-browse-folder-caret {
    transform: rotate(90deg);
}
.dle-browse-folder-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dle-browse-folder-count {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    font-weight: normal;
    white-space: nowrap;
}
/* f036: tint the count chip to echo the folder checkbox tri-state in select mode. */
.dle-browse-folder-count-partial {
    color: color-mix(in srgb, var(--dle-accent) 70%, var(--SmartThemeBodyColor, #ccc));
}
.dle-browse-folder-count-all {
    color: var(--dle-accent);
    font-weight: 600;
}
.dle-browse-folder-select {
    flex-shrink: 0;
}

/* Row selection checkbox (visible only in select mode) */
.dle-browse-row-select {
    flex-shrink: 0;
    margin-right: 4px;
    cursor: pointer;
}
.dle-browse-entry.dle-browse-selected {
    background: color-mix(in srgb, var(--dle-accent) 12%, transparent);
}

/* --- Contextual Gating --- */
.dle-gating-fields-container {
    display: flex;
    flex-direction: column;
    gap: var(--dle-space-1);
    padding: var(--dle-space-2) 0;
    /* BUG-210: viewport-relative cap so container fits on short drawers */
    max-height: min(320px, 40dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.dle-gating-group {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    padding: var(--dle-space-2) var(--dle-space-1);
    border-radius: var(--dle-radius-sm, 4px);
    transition: background-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-gating-group:hover {
    background: var(--dle-bg-hover);
}

.dle-gating-dot {
    /* Bumped from 6px to meet a11y minimum and add a shape ring so the
       active/empty distinction isn't carried by color alone. */
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid var(--dle-text-muted);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    /* Wave A: glyph (✓) color on the colored dot. NOT the --dle-bg-1 surface
       token — that is a translucent tint and would make the check vanish.
       Solid dark keeps contrast on the --dle-success fill across themes. */
    color: rgba(0, 0, 0, 0.85);
}
.dle-gating-dot-active {
    background: var(--dle-success);
    border-color: var(--dle-success);
}
.dle-gating-dot-active::before { content: "\2713"; } /* check */
.dle-gating-dot-empty {
    background: transparent;
    opacity: 0.6;
}
.dle-gating-dot-empty::before { content: ""; }

.dle-gating-label {
    font-size: var(--dle-text-sm);
    font-weight: 500;
    /* BUG-179: was min-width 70px + flex-shrink: 0; overflowed rows below ~250px drawer width. */
    min-width: 0;
    flex: 0 1 120px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dle-gating-value {
    display: flex;
    align-items: center;
    gap: var(--dle-space-1);
    flex-wrap: wrap;
}

.dle-gating-empty {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    font-style: italic;
}

.dle-gating-count {
    font-size: var(--dle-text-xs);
    opacity: 0.6;
    white-space: nowrap;
}

.dle-gating-set {
    font-size: var(--dle-text-xs);
    min-width: 36px;
    min-height: 36px;
    padding: 4px;
}

/* --- Folder Filter Section (Gating Tab) --- */
.dle-gating-folder-section {
    padding: var(--dle-space-2) var(--dle-space-3);
    border-bottom: 1px solid var(--dle-border);
    margin-bottom: var(--dle-space-2);
}
.dle-gating-folder-header {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    margin-bottom: var(--dle-space-1);
}
.dle-folder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dle-space-1);
    align-items: center;
}
.dle-folder-empty {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    font-style: italic;
}
/* Folder path badge in Why? tab entries */
.dle-entry-folder {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    opacity: 0.7;
    margin-left: 4px;
}
.dle-entry-folder::before {
    content: '\f07b'; /* fa-folder */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 2px;
    font-size: var(--dle-text-sm);
}
/* --- Entry Timers (cooldown / decay / warmup) --- */
.dle-gating-divider {
    border-top: 1px solid var(--dle-border);
    margin: 8px 0 4px;
}

.dle-timer-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dle-timer-row {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    padding: 2px 0;
    font-size: var(--dle-text-xs);
    animation: dle-entry-in 200ms ease-out both;
    animation-delay: calc(var(--i, 0) * 30ms);
    /* BUG-200: see .dle-why-entry rule — persistent will-change removed. */
}

.dle-timer-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.dle-timer-badge {
    font-size: var(--dle-text-xs);
    padding: 1px 5px;
    border-radius: var(--dle-radius-sm);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
}

/* Timer badge icons via Font Awesome */
.dle-timer-badge::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: var(--dle-text-xs);
    margin-right: 3px;
}
.dle-timer-cooldown::before { content: '\f017'; }
.dle-timer-stale::before { content: '\f06a'; }
.dle-timer-frequent::before { content: '\f0e7'; }
.dle-timer-warmup::before { content: '\f2dc'; }

.dle-timer-badge.dle-timer-cooldown {
    background: color-mix(in srgb, var(--SmartThemeUnderlineColor, #2196f3) 25%, transparent);
    color: var(--SmartThemeUnderlineColor, #2196f3);
}

.dle-timer-badge.dle-timer-stale {
    background: color-mix(in srgb, var(--dle-warning) 25%, transparent);
    color: var(--dle-warning-fg);
}

.dle-timer-badge.dle-timer-frequent {
    background: color-mix(in srgb, var(--dle-accent) 25%, transparent);
    color: var(--dle-accent);
}

.dle-timer-badge.dle-timer-warmup {
    background: color-mix(in srgb, var(--dle-success) 25%, transparent);
    color: var(--dle-success);
}

.dle-timer-empty {
    display: none;
}
.dle-timer-empty.dle-visible {
    display: block;
}

/* --- Tools tab --- */
.dle-tools-group {
    margin-bottom: var(--dle-space-2);
}

.dle-tools-group:last-child {
    margin-bottom: 0;
}

.dle-tools-group-label {
    display: block;
    /* BUG-214: was 0.7rem (fixed), ignoring theme font size. Switch to the theme-scaled var. */
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 2px;
    padding-bottom: 1px;
    border-bottom: 1px solid color-mix(in srgb, var(--dle-border) 40%, transparent);
}

.dle-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dle-space-1);
}

.dle-tool-btn {
    display: flex;
    align-items: center;
    gap: var(--dle-space-1);
    font-size: var(--dle-text-xs);
    padding: var(--dle-space-1) var(--dle-space-2);
    justify-content: flex-start;
    white-space: nowrap;
    min-height: 24px;
    line-height: 1.1;
}

.dle-tool-btn i {
    /* f067: was the lone `rem` in an otherwise em-relative file; normalized
       onto the matching token so the icon tracks the same scale as its label. */
    font-size: var(--dle-text-sm);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* --- Small drawer / top-panel mode --- */
/* On narrow screens ST constrains the drawer to ~100px tall.
   Hide everything except pipeline label and tabs so content is reachable. */
/* Container queries — on #deeplore-panel (not .dle-drawer-inner) because
   footer is moved outside .dle-drawer-inner by JS for sticky positioning */
#deeplore-panel {
    container-type: size;
}

@container (max-height: 250px) {
    .dle-zone-status .dle-token-bar-container,
    .dle-zone-status .dle-entries-bar-container,
    .dle-zone-status .dle-active-filters,
    /* Wave C: collapse the budget cluster's divider + label with its bars in compact height. */
    .dle-zone-status .dle-budget-divider,
    .dle-zone-status .dle-budget-cluster-label,
    /* D4: the action toolbar now lives in its own zone (lifted out of .dle-zone-status). */
    .dle-zone-actions {
        display: none;
    }
    .dle-zone-status {
        gap: 0;
        padding: var(--dle-space-1);
    }
    .dle-zone-divider {
        margin: 0;
    }
    .dle-tab-label {
        display: none;
    }
}

/* Issue #39: on a narrow drawer the wrapping tab bar climbs onto 2-3 rows and eats scarce
   vertical space. Keep it a single scannable row that scrolls horizontally instead of wrapping.
   Labels stay available (better for i18n/discoverability than forcing icon-only). */
@container (max-width: 360px) {
    .dle-tab-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none; /* Firefox — keep the row clean */
    }
    .dle-tab-bar::-webkit-scrollbar {
        display: none;
    }
    .dle-tab {
        flex: 0 0 auto; /* don't squeeze tabs; let them keep natural width and scroll */
        scroll-snap-align: start;
    }
}

/* Overlay mode — when fillRight space is too narrow (<250px), JS adds this class
   to switch from inline side-panel to a fixed-width overlay (mirrors ST mobile pattern) */
#deeplore-panel.dle-overlay-mode {
    width: min(380px, 90dvw) !important;
    min-width: unset !important;
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    /* BUG-177: explicit top/height so overlay can't drift into ST's top bar. */
    top: var(--topBarBlockSize, 42px) !important;
    height: calc(100dvh - var(--topBarBlockSize, 42px)) !important;
    /* BUG-203: ST layer cake reference (as of ST 1.12).
         #top-bar / drawers          ~1000–2000
         shadow_popup / dialogue     3000  (ST popups)
         .pinnedOpen drawer          2999  (just below popups)
         .dle-overlay-mode           3001  (just above popups intentionally:
                                            overlay is a transient panel that
                                            should sit over a passive popup
                                            until user dismisses it)
       If ST ever lowers popup z-index, revisit this value. */
    z-index: 3001;
    border-left: 1px solid var(--SmartThemeBorderColor);
    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength, 10px) * 2));
}

/* BUG-224: visual scrim for the overlay-mode panel. Click-outside dismiss is
   handled in JS; this just communicates the dismiss zone visually. The scrim
   is rendered via the panel's own ::before so no markup change is needed,
   uses pointer-events:none so it doesn't intercept clicks (JS handler still
   sees the original target), and is layered behind the panel via negative
   z-index in the same fixed stacking context. */
#deeplore-panel.dle-overlay-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
    #deeplore-panel.dle-overlay-mode::before {
        background: rgba(0, 0, 0, 0.5);
    }
}

/* --- Empty states (class-based visibility for animation) --- */
.dle-empty-state {
    display: none;
    opacity: 0;
    transform: translateY(-4px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dle-space-2);
    padding: var(--dle-space-5) var(--dle-space-4);
    color: var(--dle-text-muted);
    text-align: center;
    background: color-mix(in srgb, var(--dle-bg-surface) 40%, transparent);
    border: 1px dashed color-mix(in srgb, var(--dle-border) 50%, transparent);
    border-radius: var(--dle-radius-md);
    margin: var(--dle-space-2) 0;
    /* #19: animated reveal — display:allow-discrete + @starting-style fade/slide. */
    transition: opacity var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out),
                transform var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out),
                display var(--dle-dur-base, 200ms) allow-discrete;
}
.dle-empty-state.dle-visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}
@starting-style {
    .dle-empty-state.dle-visible { opacity: 0; transform: translateY(-4px); }
}

.dle-empty-state i {
    font-size: var(--dle-text-xl);
    opacity: var(--dle-opacity-faint);
}

.dle-empty-state p {
    font-size: var(--dle-text-sm);
    line-height: 1.5;
    opacity: 0.8;
    margin: 0;
}

/* --- Empty state tutorial guide --- */
.dle-empty-guide {
    text-align: left;
    font-size: var(--dle-text-xs);
    margin-top: var(--dle-space-2);
    line-height: 1.6;
    max-width: 320px;
}
.dle-empty-guide ol,
.dle-empty-guide ul {
    padding-left: 18px;
    margin: var(--dle-space-1) 0;
}
.dle-empty-guide li {
    margin-bottom: 2px;
}
.dle-empty-guide code {
    padding: 1px 4px;
    background: var(--dle-bg-1, rgba(0, 0, 0, 0.12));
    border-radius: 3px;
    font-size: 0.9em;
}
.dle-empty-commands {
    margin-top: var(--dle-space-2);
    opacity: 0.7;
}
/* f082: button-first CTA row in the pre-setup Injection/Browse empty guides. */
.dle-empty-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dle-space-2);
    margin-top: var(--dle-space-3);
}
.dle-empty-cta-btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
}
.dle-empty-cta-row + .dle-empty-commands {
    margin-top: var(--dle-space-2);
}
/* f077: post-setup-idle one-liner for the Injection empty state. */
.dle-empty-guide-idle {
    max-width: 320px;
    margin-top: var(--dle-space-2);
    font-size: var(--dle-text-xs);
    line-height: 1.6;
    opacity: 0.8;
}
.dle-empty-browse-link {
    color: var(--dle-accent, var(--SmartThemeQuoteColor, #6c8cff));
    text-decoration: underline;
    cursor: pointer;
}

/* --- Pipeline activity animation --- */
/* F13: amplitude halved — opacity swing from 1.0→0.7 (was 1.0→0.4) */
@keyframes dle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: var(--dle-opacity-muted); }
}

/* F13: brief strong flash on status transitions — JS adds/removes .dle-status-changed */
@keyframes dle-status-flash {
    0%   { transform: scale(1);    box-shadow: 0 0 0 currentColor; }
    50%  { transform: scale(1.15); box-shadow: 0 0 12px currentColor; }
    100% { transform: scale(1);    box-shadow: 0 0 4px currentColor; }
}

/* Wave I: the goo-spinner inside the dot IS the motion now — no container pulse
   (double-animation read as chaotic). f027: the dot now also carries a calm resting
   vs. working appearance so idle is unmistakable. Idle = dimmed + desaturated gel
   (the spinner is stopped at speed 0 from JS); active = full-strength accent tint.
   No container pulse — just a steady color/opacity shift across the state boundary. */
.dle-status-dot {
    color: color-mix(in srgb, var(--dle-text-muted, #888) 70%, transparent);
    opacity: 0.55;
    filter: saturate(0.4);
    transition: color var(--animation-duration-slow, 375ms) ease,
                opacity var(--animation-duration-slow, 375ms) ease,
                filter var(--animation-duration-slow, 375ms) ease;
}
.dle-status-dot.dle-status-active {
    color: var(--dle-accent, var(--SmartThemeQuoteColor, #aac8ff));
    opacity: 1;
    filter: none;
}

/* f027: the phase label echoes the same binary — muted at rest, full-strength accent
   while a phase runs — so the working state is anchored by more than spinner motion. */
.dle-pipeline-label {
    color: var(--dle-text-muted, #888);
    transition: color var(--animation-duration-slow, 375ms) ease;
}
.dle-pipeline-label.dle-status-active {
    color: var(--dle-accent, var(--SmartThemeQuoteColor, #aac8ff));
}

.dle-status-dot.dle-status-changed {
    animation: dle-status-flash 400ms ease-out 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZONE 3: Health Footer
   ═══════════════════════════════════════════════════════════════════════════ */

.dle-zone-footer {
    border-top: 1px solid var(--dle-border);
    padding: var(--dle-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--dle-space-2);
    flex-shrink: 0;
}

/* --- Context window bar --- */
.dle-context-bar-container {
    position: relative;
}

.dle-context-bar-track {
    position: relative;
    background: var(--dle-border);
    border-radius: var(--dle-radius-sm);
    height: 18px;
    overflow: hidden;
}

.dle-context-bar-context {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: var(--SmartThemeQuoteColor, #4caf50);
    border-radius: var(--dle-radius-sm) 0 0 var(--dle-radius-sm);
    /* BUG-168: width transition dropped. */
}

.dle-context-bar-response {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    /* A4: the reply reservation is ghosted AND hatched so it reads as "held, not consumed" —
       visually distinct from the solid used fill. It is never counted as used (split aria in
       drawer-render-footer.js announces used vs reserved separately). */
    background: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--SmartThemeBodyColor, #e0e0e0) 32%, transparent) 0 5px,
        transparent 5px 10px
    );
    /* BUG-168: width/left transitions dropped — reflow/repaint per frame. Bar snaps instead. */
}

.dle-context-bar-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--dle-text-xs);
    line-height: 18px;
    color: var(--SmartThemeBodyColor, #ccc);
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* A3: the footer context bar is the ONE bar where red is EARNED — overflow (used + reserved
   approaching max) means the conversation is about to lose history. At rest it's calm green
   (healthy room); high → orange; critical → red + hatch + static glow. Header bars never do
   this (B1). Static glow only — no animation (BUG-170 repaint-storm lesson). The USED segment
   carries the color; the reserved hatch (A4) is left ghosted. */
.dle-context-bar-container.dle-context-high .dle-context-bar-context {
    background: var(--dle-warning, #d97706);
}
.dle-context-bar-container.dle-context-critical .dle-context-bar-context {
    background:
        repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,0.30) 4px 8px),
        var(--dle-error, #dc2626);
    box-shadow: 0 0 8px color-mix(in srgb, var(--dle-error, #dc2626) 50%, transparent);
}

/* A2: real Librarian token I/O of the last agentic turn — sits just under the context bar.
   Muted/secondary so it reads as supplementary info, not a primary metric or a health signal.
   .dle-hidden toggled by drawer-render-footer.js (hidden until a Librarian turn runs). */
.dle-librarian-usage {
    font-size: var(--dle-text-xs);
    line-height: 1.4;
    margin: 2px 0 0 2px;
    color: color-mix(in srgb, var(--SmartThemeBodyColor, #aaa) 65%, transparent);
}
.dle-librarian-usage.dle-hidden { display: none; }

/* --- Footer row (health icons left, AI stats right) --- */
.dle-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 22px;
}

/* --- Health icons --- */
.dle-health-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    /* #3: footer diagnostics dock framing. */
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--dle-border) 60%, transparent);
    border-radius: var(--dle-radius-md);
    background: color-mix(in srgb, var(--dle-bg-surface, var(--SmartThemeBlurTintColor,#222)) 50%, transparent);
}

.dle-health-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 28px;
    height: 28px;
    font-size: var(--dle-text-base);
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--dle-radius-sm);
    transition: filter var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), color var(--dle-dur-slow, 320ms) var(--dle-ease-out, ease-out);
    color: var(--dle-text-muted);
    /* Button reset (changed from <a> to <button> for keyboard accessibility) */
    background: none;
    border: none;
    padding: 0;
}

.dle-health-icon:hover {
    filter: brightness(1.3);
    background: var(--dle-bg-hover); /* #3: dock hover fill */
}

.dle-health-icon:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
}

.dle-health-icon.dle-health-ok {
    color: var(--dle-success, #4caf50);
}

.dle-health-icon.dle-health-warn {
    color: var(--dle-warning, #ff9800);
}

.dle-health-icon.dle-health-error {
    color: var(--dle-error, #f44336);
}

/* Accessibility: shape indicator on health icons (not color-only).
   f046: promoted from a bare ~9px corner glyph layered on the FA icon to a solid
   badge chip — a filled status-colored circle with a high-contrast glyph and a 1px
   ring in the panel background, so the redundant encoding stays legible on any
   parent glyph and never blends into a same-tinted edge. */
.dle-health-icon.dle-health-ok::after,
.dle-health-icon.dle-health-warn::after,
.dle-health-icon.dle-health-error::after {
    position: absolute;
    bottom: -2px;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: var(--dle-text-xs);
    font-weight: bold;
    line-height: 1;
    color: #fff;
    box-shadow: 0 0 0 1px var(--dle-bg-2, var(--SmartThemeBlurTintColor, #222));
    pointer-events: none;
}
.dle-health-icon.dle-health-ok::after {
    content: '\2713'; /* checkmark */
    background: var(--dle-success, #4caf50);
}
.dle-health-icon.dle-health-warn::after {
    content: '\0021'; /* exclamation mark — reads cleaner than ⚠ at chip size */
    background: var(--dle-warning, #ff9800);
}
.dle-health-icon.dle-health-error::after {
    content: '\00d7'; /* multiplication sign / x */
    background: var(--dle-error, #f44336);
}

/* --- AI stats --- */
.dle-ai-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
}

.dle-ai-stat {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* D5 (v2.5 Wave 3): session-scope marker. A small uppercase divider chip that flags the AI
   stats as session-cumulative (all chats) so they don't read as this-chat next to the per-chat
   health icons. Quieter than the figures it labels. */
.dle-ai-stats-scope {
    font-size: var(--dle-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dle-text-muted);
    opacity: 0.7;
    padding-right: 6px;
    margin-right: 2px;
    border-right: 1px solid var(--dle-border);
    white-space: nowrap;
}

/* Stat flash — brief accent highlight when value changes */
.dle-stat-changed {
    animation: dle-stat-flash 300ms ease-out;
}

/* ============================================================================
 * Settings Popup (tabbed layout)
 * ============================================================================ */

.dle-settings-popup {
    display: grid;
    /* f003: clamp the sidebar so it can grow toward content for long de/ru labels
       ('Verbindung', 'Übereinstimmung', 'Инжекция', 'AI Connections') instead of a
       hard 190px that forces clipping. Labels also wrap (below) so nothing is lost. */
    grid-template-columns: clamp(160px, 22%, 236px) minmax(0, 1fr);
    /* Header strip spans both columns; sidebar + content share the second row. */
    grid-template-rows: auto minmax(0, 1fr);
    /* Fill the ST popup container — popup-content is flex-grow:1 inside the 90vh dialog */
    height: 100%;
    /* Clamp the floor so short/landscape phone viewports never force the dialog taller than the screen (Issue #39) */
    min-height: min(400px, 80dvh);
    /* Settings-overhaul: bolder type jumps SCOPED to the popup so the drawer,
       graph, and popups keep the old restrained scale (no blast radius). */
    --dle-text-lg: calc(var(--mainFontSize, 15px) * 1.25);
    --dle-text-xl: calc(var(--mainFontSize, 15px) * 1.6);
    --dle-rhythm: var(--dle-space-4);
}

/* ── Header strip: brand + master enable + help ── */
.dle-settings-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--dle-space-3);
    padding: var(--dle-space-3) var(--dle-space-4);
    border-bottom: 1px solid var(--dle-border);
    background: color-mix(in srgb, var(--SmartThemeBodyColor, #ccc) 4%, transparent);
}
.dle-brand {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    min-width: 0;
}
.dle-brand-logo {
    width: 27px;
    height: 27px;
    color: var(--SmartThemeBodyColor, #ccc);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.dle-brand-logo svg { width: 100%; height: 100%; display: block; }
.dle-brand-name {
    font-size: var(--dle-text-lg);
    font-weight: 600;
    white-space: nowrap;
}
.dle-version-chip {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-pill);
    padding: 1px 9px;
    white-space: nowrap;
}
.dle-header-spacer { margin-left: auto; }
.dle-master-toggle {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    font-size: var(--dle-text-sm);
    color: var(--dle-text-muted);
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.dle-master-toggle:hover { color: var(--SmartThemeBodyColor, #ccc); }
.dle-switch {
    position: relative;
    width: 42px;
    height: 23px;
    flex-shrink: 0;
}
.dle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.dle-switch .track {
    position: absolute;
    inset: 0;
    background: var(--dle-border);
    border-radius: var(--dle-radius-pill);
    transition: background var(--dle-dur-base) var(--dle-ease-out);
}
.dle-switch .track::before {
    content: "";
    position: absolute;
    height: 17px;
    width: 17px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--dle-dur-base) var(--dle-ease-out);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.dle-switch input:checked + .track { background: var(--dle-success); }
.dle-switch input:checked + .track::before { transform: translateX(19px); }
.dle-switch input:focus-visible + .track {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
}
.dle-header-icon {
    color: var(--dle-text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: var(--dle-radius-sm);
    transition: color var(--dle-dur-fast) var(--dle-ease-out);
}
.dle-header-icon:hover { color: var(--SmartThemeBodyColor, #ccc); }

/* BUG-162: collapse sidebar to a compact rail on narrow popups so content column keeps room */
@media (max-width: 600px) {
    .dle-settings-popup {
        grid-template-columns: 140px minmax(0, 1fr);
    }
}

.dle-settings-popup input:disabled,
.dle-settings-popup select:disabled,
.dle-settings-popup textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* f018/f019: single source of truth for native-control tinting across DLE surfaces.
   Previously range sliders had no accent (OS-default blue thumb) while a couple of graph
   sliders used --dle-info and a few Librarian checkboxes used --dle-accent — three divergent
   treatments. Scope one accent to every native range/checkbox in the popup + drawer so they
   all read as DLE-themed in both dark and light. Per-component overrides below are removed. */
.dle-settings-popup input[type="range"],
.dle-settings-popup input[type="checkbox"],
#deeplore-drawer input[type="range"],
#deeplore-drawer input[type="checkbox"] {
    accent-color: var(--dle-accent);
}

/* f020: disable at the row level so the label fades with the input. JS adds .dle-control-disabled
   on the field wrapper (in addition to the input's own disabled attr, which still blocks input). */
.dle-settings-popup .dle-control-disabled {
    opacity: 0.5;
}
.dle-settings-popup .dle-control-disabled label,
.dle-settings-popup .dle-control-disabled small {
    opacity: 1;
}
.dle-settings-popup .dle-control-disabled,
.dle-settings-popup .dle-control-disabled input {
    cursor: not-allowed;
}

.dle-settings-preview-banner {
    position: sticky;
    top: 0;
    z-index: 1;
}

.dle-settings-sidebar {
    /* f010: nav-rail geometry on the token grid. Shared icon width + icon-gap
       drive a DERIVED sub-tab indent (parent padding-left + icon + gap) so the
       sub-tab icon sits directly under the parent label start instead of an
       eyeballed 30px. Change once here; both tiers follow. */
    --dle-nav-pad-x: var(--dle-space-3);
    --dle-nav-icon-w: 16px;
    --dle-nav-icon-gap: var(--dle-space-2);
    --dle-nav-indent: calc(var(--dle-nav-pad-x) + var(--dle-nav-icon-w) + var(--dle-nav-icon-gap));
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--dle-border);
    background: var(--dle-bg-surface);
    padding: var(--dle-space-2) 0;
    gap: var(--dle-space-1);
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--SmartThemeBodyColor, #ccc) 22%, transparent) transparent;
}
.dle-settings-sidebar::-webkit-scrollbar { width: 8px; }
.dle-settings-sidebar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--SmartThemeBodyColor, #ccc) 18%, transparent);
    border-radius: 4px;
}

.dle-settings-tab {
    display: flex;
    align-items: center;
    gap: var(--dle-nav-icon-gap);
    padding: var(--dle-space-2) var(--dle-nav-pad-x);
    border: none;
    background: none;
    color: var(--SmartThemeBodyColor, #ccc);
    cursor: pointer;
    text-align: left;
    font-size: var(--dle-text-base);
    font-family: inherit;
    transition: background var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    border-left: 3px solid transparent;
    /* f003: wrap long de/ru labels to a second line instead of ellipsis-clipping them.
       The nav-rail was hard-clipping with no tooltip; wrapping keeps every label fully
       readable at both 190px (clamp) and the 140px narrow rail. */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    min-width: 0;
}

.dle-settings-tab:hover {
    background: var(--dle-bg-hover);
}

.dle-settings-tab.active {
    background: var(--dle-bg-hover);
    border-left-color: var(--SmartThemeQuoteColor, #4caf50);
    text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

.dle-settings-tab i {
    width: var(--dle-nav-icon-w);
    text-align: center;
    font-size: var(--dle-text-base);
    flex-shrink: 0;
}

.dle-settings-content {
    overflow-y: auto;
    padding: var(--dle-space-4) var(--dle-space-5);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--SmartThemeBodyColor, #ccc) 22%, transparent) transparent;
}
.dle-settings-content::-webkit-scrollbar { width: 8px; }
.dle-settings-content::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--SmartThemeBodyColor, #ccc) 18%, transparent);
    border-radius: 4px;
}

.dle-settings-panel {
    display: none;
    position: relative;
}

@keyframes dle-panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.dle-settings-panel.active {
    display: block;
    animation: dle-panel-in 160ms var(--dle-ease-out) 1;
}

/* ── Panel orientation header: big title + one-line subtitle ── */
.dle-panel-header {
    margin: 0 0 var(--dle-rhythm, var(--dle-space-4));
    padding-bottom: var(--dle-space-3);
    border-bottom: 1px solid var(--dle-border);
}
.dle-panel-title {
    font-size: var(--dle-text-xl);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 var(--dle-space-1);
    letter-spacing: -0.01em;
}
.dle-panel-subtitle {
    font-size: var(--dle-text-sm);
    color: var(--dle-text-muted);
    line-height: 1.55;
    margin: 0;
}
.dle-merge-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--dle-text-xs);
    color: var(--dle-accent-fg);
    background: color-mix(in srgb, var(--dle-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--dle-accent) 32%, transparent);
    border-radius: var(--dle-radius-pill);
    padding: 2px 10px;
    margin-left: var(--dle-space-2);
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Shared content vocabulary (About hero, button rows, note blocks) ── */
.dle-btn-row {
    display: flex;
    gap: var(--dle-space-2);
    flex-wrap: wrap;
    align-items: center;
}
.dle-btn-row .menu_button {
    width: auto;
    white-space: nowrap;
    margin: 0;
}
.dle-btn-row a.menu_button { text-decoration: none; }
.dle-about-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--dle-space-2);
    padding: var(--dle-space-4) var(--dle-space-4) var(--dle-space-3);
}
.dle-about-hero .dle-about-logo { margin: 0; }
.dle-about-links {
    display: flex;
    gap: var(--dle-space-2);
    flex-wrap: wrap;
    justify-content: center;
}
.dle-about-links .menu_button {
    width: auto;
    white-space: nowrap;
    text-decoration: none;
}
.dle-about-credits {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    margin: 0;
}
.dle-about-credits a { color: var(--dle-accent-fg); }
.dle-note-block {
    font-size: var(--dle-text-sm);
    color: var(--dle-text-muted);
    line-height: 1.55;
    margin: 0;
}
.dle-about-footnote {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    margin: var(--dle-space-3) 0 0;
}

/* ── Sidebar: search → pinned About → accordion groups ──
   Plain nav + aria-current pattern (the old two-tier tablist with
   presentation headers is gone; groups replaced both header rows). */
.dle-nav-search {
    padding: 2px var(--dle-space-2) var(--dle-space-1);
    position: relative;
}
.dle-nav-search input.text_pole {
    margin: 0;
    padding: 4px 8px 4px 27px;
    font-size: var(--dle-text-sm);
}
.dle-nav-search .fa-magnifying-glass {
    position: absolute;
    left: calc(var(--dle-space-2) + 9px);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    pointer-events: none;
}
.dle-nav-noresults {
    display: none;
    padding: var(--dle-space-3);
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    line-height: 1.5;
    text-align: center;
}
.dle-nav-noresults.dle-visible { display: block; }

.dle-nav-pinned {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid color-mix(in srgb, var(--dle-border) 60%, transparent);
    padding-bottom: var(--dle-space-1);
    margin-bottom: var(--dle-space-1);
}
/* pinned About shares the exact leaf-tab geometry — one icon column everywhere */
.dle-nav-pinned .dle-settings-tab {
    padding-left: calc(var(--dle-nav-pad-x) + var(--dle-space-2));
}

.dle-nav-group {
    display: flex;
    flex-direction: column;
}
.dle-nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--dle-space-2) var(--dle-nav-pad-x);
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--dle-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dle-text-muted);
    text-align: left;
    margin: 0;
    border-radius: var(--dle-radius-sm);
    transition: color var(--dle-dur-fast) var(--dle-ease-out);
}
.dle-nav-group-header:hover { color: var(--SmartThemeBodyColor, #ccc); }
.dle-nav-group-header .chev {
    filter: brightness(75%);
    transition: transform var(--dle-dur-fast) var(--dle-ease-out);
    font-size: 1.05em;
}
.dle-nav-group.collapsed .chev { transform: rotate(-90deg); }
.dle-nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: var(--dle-space-1);
}
.dle-nav-group.collapsed .dle-nav-group-items { display: none; }

/* leaf tabs: indented under their group label (icon column starts at the
   group-label text start) */
.dle-nav-group-items .dle-settings-tab {
    padding-left: calc(var(--dle-nav-pad-x) + var(--dle-space-2));
}
/* items animate in when a group expands (DLE @starting-style idiom) */
.dle-nav-group:not(.collapsed) .dle-nav-group-items .dle-settings-tab {
    transition: opacity var(--dle-dur-base) var(--dle-ease-out), transform var(--dle-dur-base) var(--dle-ease-out);
}
@starting-style {
    .dle-nav-group:not(.collapsed) .dle-nav-group-items .dle-settings-tab {
        opacity: 0;
        transform: translateY(-3px);
    }
}

/* ── Settings search filter states ── */
.dle-search-badge {
    margin-left: auto;
    font-size: var(--dle-text-xs);
    color: var(--dle-accent-fg);
    background: color-mix(in srgb, var(--dle-accent) 16%, transparent);
    border-radius: var(--dle-radius-pill);
    padding: 0 7px;
    flex-shrink: 0;
}
.dle-settings-tab.dle-filtered-out { display: none; }
.dle-nav-group.dle-filtered-out { display: none; }

/* search hit highlight in the target panel (flash + settle) */
@keyframes dle-hit-flash {
    0% {
        outline-color: var(--dle-accent);
        background: color-mix(in srgb, var(--dle-accent) 10%, transparent);
    }
    100% {
        outline-color: transparent;
        background: transparent;
    }
}
.dle-search-hit {
    outline: 2px solid transparent;
    outline-offset: 3px;
    border-radius: var(--dle-radius-sm);
    animation: dle-hit-flash 1.8s var(--dle-ease-out) 1;
}

/* Settings section card (groups related controls visually) */
.dle-settings-section {
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-lg);
    padding: var(--dle-space-3) var(--dle-space-4) var(--dle-space-4);
    margin-bottom: var(--dle-rhythm, var(--dle-space-4));
    background: color-mix(in srgb, var(--SmartThemeBodyColor, #ccc) 3%, transparent);
}
.dle-settings-section:last-child { margin-bottom: var(--dle-space-2); }
.dle-settings-section > h4:first-child {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
}
/* context-aware accent tick on section headings */
.dle-settings-section > h4:first-child::before {
    content: "";
    width: 3px;
    height: 1.05em;
    flex-shrink: 0;
    background: var(--dle-accent);
    border-radius: 2px;
}
.dle-danger-zone > h4:first-child::before { background: var(--dle-error); }

/* Section spacing inside panels */
.dle-settings-panel h4 {
    margin: 0 0 4px;
    font-size: var(--dle-text-lg);
    font-weight: 600;
    line-height: 1.25;
}

.dle-settings-panel h4:not(:first-child) {
    margin-top: 4px;
}

.dle-settings-panel hr {
    margin: 12px 0;
    border: none;
    border-top: 1px solid var(--dle-border);
}

/* Hide hr between settings sections (cards provide visual grouping) */
.dle-settings-section + hr,
.dle-settings-section + .dle-settings-section { /* reset margin for adjacent sections */ }

/* f008: paired toggle+value rows (e.g. "Unlimited Entries" + "Max Entries").
   The left column is a single-line .checkbox_label; the right column is a
   label-over-input stack. ST's .flex-container centers items, so the checkbox
   floated to the vertical middle of the taller column and read as orphaned.
   align-items:flex-end drops the checkbox onto the SAME bottom baseline as the
   input (the value control), so the toggle visually pairs with its field. */
.dle-toggle-value-row {
    align-items: flex-end;
}

/* f007: the old .dle-settings-panel .dle-section-desc block (opacity:0.6,
   margin:0 0 8px) was folded into the canonical rule near the top of this file,
   which now lists BOTH .dle-settings and .dle-settings-panel as the single source
   of truth (token-grid margins + muted color, no opacity so inline links/code
   stay crisp). */

/* Connection cards inside popup */
.dle-settings-panel .dle-connection-card {
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-md);
    padding: 8px 10px;
    margin: 4px 0;
}

.dle-settings-panel .dle-connection-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

/* ── AI Connections accordion ── */
.dle-conn-accordion {
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-md);
    overflow: hidden;
}
.dle-conn-accordion + .dle-conn-accordion { margin-top: -1px; }
.dle-conn-accordion-header {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    padding: var(--dle-space-2) var(--dle-space-3);
    cursor: pointer;
    user-select: none;
}
.dle-conn-accordion-header:hover { background: var(--dle-bg-hover); }
/* BUG-187: explicit focus ring in accent blue so focus is distinguishable from
   the green `.dle-status-ok` / connected state used elsewhere. */
.dle-conn-accordion-header:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: -2px;
}
.dle-conn-tool-icon { width: 16px; text-align: center; flex-shrink: 0; opacity: var(--dle-opacity-muted); }
.dle-conn-tool-name { font-weight: 600; font-size: var(--dle-text-sm); }
.dle-conn-badge { margin-left: auto; font-size: var(--dle-text-xs); opacity: 0.7; white-space: nowrap; }
.dle-conn-chevron { flex-shrink: 0; font-size: 0.75em; transition: transform var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out); }
.dle-conn-accordion-header[aria-expanded="true"] .dle-conn-chevron { transform: rotate(90deg); }
.dle-conn-accordion-body {
    padding: var(--dle-space-2) var(--dle-space-3) var(--dle-space-3);
    border-top: 1px solid var(--dle-border);
}
.dle-conn-accordion-body .radio_group { margin-bottom: 6px; }
.dle-conn-inherit-note { font-size: var(--dle-text-xs); color: var(--dle-text-muted); padding: var(--dle-space-1) 0; }

/* ── Injection tab table ── */
.dle-injection-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.dle-injection-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--dle-border) 40%, transparent);
    border-radius: var(--dle-radius-sm);
    background: color-mix(in srgb, var(--dle-bg-surface) 30%, transparent);
    min-height: 32px;
}
.dle-injection-type {
    display: flex;
    align-items: center;
    gap: 6px;
    /* BUG-183: shrinkable min-width, row stacks on narrow popups via breakpoint below */
    min-width: 0;
    flex: 0 1 140px;
    font-size: var(--dle-text-base);
    font-weight: 600;
}
.dle-injection-type i { width: 14px; text-align: center; opacity: 0.7; }
/* BUG-183: stack injection row controls below the label on narrow popups */
@media (max-width: 500px) {
    .dle-injection-row { flex-direction: column; align-items: stretch; }
    .dle-injection-type { flex: 0 0 auto; }
    .dle-injection-status { text-align: left; }
}
.dle-injection-controls {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.dle-injection-ext-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dle-injection-inchat-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dle-injection-pm-name code {
    font-size: var(--dle-text-sm);
    padding: 1px 4px;
    background: color-mix(in srgb, var(--dle-border) 30%, transparent);
    border-radius: 3px;
}
.dle-injection-status {
    flex-shrink: 0;
    text-align: right;
    min-width: 50px;
}

/* ── Advanced section subheaders ── */
.dle-advanced-subheader {
    display: block;
    margin-top: 10px;
    margin-bottom: 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid color-mix(in srgb, var(--dle-border) 40%, transparent);
    font-weight: 600;
    opacity: 0.7;
    font-size: var(--dle-text-sm);
}
.dle-advanced-subheader:first-child { margin-top: 0; }

/* ── Cross-tab link styling ── */
.dle-goto-tab-link {
    color: var(--SmartThemeQuoteColor, #4caf50);
    text-decoration: underline;
    cursor: pointer;
}
.dle-goto-tab-link:hover { opacity: 0.8; }

/* f021: brief flash when a typed-in number is auto-corrected to the field's
   min/max/step, so the clamp is visible rather than silent. Accent-tinted
   background + ring; theme-safe via --dle-accent (color-mix degrades gracefully). */
.dle-input-clamped {
    animation: dle-input-clamp-flash 500ms ease-out;
}
@keyframes dle-input-clamp-flash {
    from {
        background-color: color-mix(in srgb, var(--dle-accent) 35%, transparent);
        box-shadow: 0 0 0 2px var(--dle-accent);
    }
    to {
        background-color: transparent;
        box-shadow: 0 0 0 2px transparent;
    }
}

/* --- Container query: hide footer in collapsed drawers --- */
@container (max-height: 250px) {
    .dle-zone-footer {
        display: none;
    }
}

/* ============================================================================
 * Animations & Keyframes
 * ============================================================================ */

/* Fade in (used by tab panels, diff badges, browse preview) */
@keyframes dle-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Entry slide-in (used by Why? entries, timer rows) */
@keyframes dle-entry-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Entry slide-out (used by Why? entries exiting between generations) */
@keyframes dle-entry-out {
    from { opacity: 1; transform: translateX(0); max-height: 30px; }
    to { opacity: 0; transform: translateX(12px); max-height: 0; padding: 0; }
}

.dle-why-entry.dle-why-exit {
    animation: dle-entry-out var(--dle-dur-base, 200ms) var(--dle-ease, ease-in) forwards !important;
    pointer-events: none;
    overflow: hidden;
}

/* NEW entry highlight flash */
@keyframes dle-new-flash {
    0% { background-color: color-mix(in srgb, var(--dle-success) 25%, transparent); }
    100% { background-color: transparent; }
}

/* Tab badge pop-in */
@keyframes dle-badge-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Stat value flash on change */
@keyframes dle-stat-flash {
    from { color: var(--dle-accent); }
    to { color: inherit; }
}

/* Cartographer popup — entry detail expand.
   BUG-201: replaced max-height:0→2000px with display:grid + grid-template-rows
   0fr→1fr. Animates the actual content height (no clipping above 2000px,
   no easing waste, no per-frame layout cost). */
.dle-ctx-detail {
    display: grid;
    grid-template-rows: 0fr;
    grid-auto-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out), grid-auto-rows var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out), opacity var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
}
.dle-ctx-detail > * {
    min-height: 0;
    overflow: hidden;
}
.dle-ctx-detail.dle-ctx-expanded {
    grid-template-rows: 1fr;
    grid-auto-rows: 1fr;
    opacity: 1;
    margin-top: var(--dle-space-1);
}
.dle-ctx-detail.dle-ctx-expanded > * {
    overflow-y: auto;
}

/* Why-Not section — animated expand.
   BUG-201: same grid-rows fix as .dle-ctx-detail. */
.dle-why-not-section {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out), opacity var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out), padding var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
    background: color-mix(in srgb, var(--dle-warning) 5%, transparent);
    border-left: 3px solid color-mix(in srgb, var(--dle-warning) 40%, transparent);
    border-radius: 0 var(--dle-radius-md) var(--dle-radius-md) 0;
    padding: 0 var(--dle-space-2);
    margin-top: var(--dle-space-2);
}
.dle-why-not-section > * {
    min-height: 0;
    overflow: hidden;
}
.dle-why-not-section.dle-visible {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: var(--dle-space-2);
}

.dle-why-not-header {
    padding: var(--dle-space-1) 0;
    display: flex;
    align-items: center;
    gap: var(--dle-space-1);
}

/* Browse refresh spinner (inline, next to search input) */
/* f069: no color/font-size here — the goo-spinner is colored by the single global
   accent rule (currentColor) and sized by its `size` attribute, NOT font-size. */
.dle-browse-refresh-spinner {
    flex-shrink: 0;
}

/* Browse navigation buttons (Why? tab → Browse, Carto popup → Browse) */
.dle-browse-nav-btn,
.dle-carto-browse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--dle-text-muted);
    cursor: pointer;
    padding: 1px 3px;
    font-size: 0.75em;
    opacity: 0.5;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    vertical-align: middle;
}
.dle-browse-nav-btn:hover,
.dle-carto-browse-btn:hover {
    opacity: 1;
    color: var(--dle-accent, var(--SmartThemeQuoteColor, #aac8ff));
}

/* ============================================================================
 * Graph Popup (Phase 2)
 * ============================================================================ */

.dle-graph-popup {
    display: flex;
    flex-direction: column;
    gap: var(--dle-space-1, 4px);
    height: 100%;
    overflow: hidden;
}

.dle-graph-title {
    margin: 0 0 var(--dle-space-1, 4px) 0;
}

/* -- Toolbar -- */
.dle-graph-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--dle-space-1, 4px);
}

/* Override ST's text_pole full-width behavior inside graph toolbar.
   Higher specificity (3 classes) lets us drop !important. */
.dle-graph-toolbar.dle-graph-toolbar input.text_pole,
.dle-graph-toolbar.dle-graph-toolbar select.text_pole {
    width: auto;
    flex: 0 1 auto;
}

.dle-graph-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--dle-border, #444);
    flex-shrink: 0;
}

/* -- Interactive legend -- */
/* #1: the old flex-strip is now the unified docked panel. Sub-class rules
   (.dle-graph-legend-panel-*) below; .dle-graph-legend-item rules kept intact. */
.dle-graph-legend,
.dle-graph-legend-panel {
    position: absolute; top: 8px; left: 8px; z-index: 12;
    max-width: 320px; max-height: calc(100% - 16px); overflow: auto;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--SmartThemeBlurTintColor, #15151a) 88%, transparent);
    border: 1px solid var(--dle-border, #444); border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    font-size: var(--dle-text-xs, 0.7em); color: var(--SmartThemeBodyColor, #ddd);
    pointer-events: auto;
}
.dle-graph-legend-panel-heading {
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    font-size: 0.92em; margin-bottom: 6px; color: var(--dle-text-muted, #aaa);
}
.dle-graph-legend-section { margin-bottom: 6px; }
.dle-graph-legend-section:last-child { margin-bottom: 0; }
.dle-graph-legend-section-label {
    font-weight: 600; font-size: 0.85em; margin-bottom: 3px; color: var(--dle-text-muted, #999);
}
.dle-graph-legend-edges { display: flex; flex-wrap: wrap; gap: 8px; }
.dle-graph-legend-dash { font-weight: 700; }
.dle-graph-legend-color { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dle-graph-legend-color:not(.dle-graph-legend-color--expanded) { max-height: 4.6em; overflow: hidden; }
.dle-graph-legend-color--expanded { max-height: none; }
@media (max-width:600px){
    .dle-graph-legend,
    .dle-graph-legend-panel { position:static; max-width:none; margin-bottom:4px; }
}

.dle-graph-legend-item {
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 3px;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), background-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    user-select: none;
}

.dle-graph-legend-item:hover {
    background: var(--dle-bg-hover, rgba(255,255,255,0.08));
}

.dle-graph-legend-item--disabled {
    opacity: 0.3;
    text-decoration: line-through;
}

/* -- Node info bar (full-width strip at bottom of canvas container) -- */
.dle-graph-tooltip {
    position: absolute;
    z-index: 10;
    background: var(--SmartThemeBlurTintColor, #000);
    border-top: 1px solid var(--dle-border, #555);
    border-radius: 0;
    padding: 10px 12px;
    pointer-events: none;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: var(--dle-text-lg);
    line-height: 1.5;
    color: var(--SmartThemeBodyColor, #eee);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    min-height: 24px;
}

.dle-graph-tooltip-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: var(--dle-text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* f060: decouple the two axes. Previously every badge mixed a fixed 40% of the SAME theme
   color (--SmartThemeQuoteColor) into BOTH bg and fg, which (a) pulled all 7 categories
   toward one hue so they stopped being distinguishable, and (b) converged bg and fg on a
   near-identical color, dropping text contrast below 4.5:1. Now each badge keeps its identity
   hue: a light tint of the category hue for the background, and text derived from the same
   hue mixed toward body color so it adapts to dark AND light themes. Hues come from the
   shared --dle-cat-* palette so graph, browse temperature, and legend stay in sync. */
.dle-graph-tooltip-badge--constant { background: color-mix(in srgb, var(--dle-cat-constant) 22%, transparent); color: color-mix(in srgb, var(--dle-cat-constant) 55%, var(--SmartThemeBodyColor, #fff)); }
.dle-graph-tooltip-badge--seed { background: color-mix(in srgb, var(--dle-cat-seed) 22%, transparent); color: color-mix(in srgb, var(--dle-cat-seed) 55%, var(--SmartThemeBodyColor, #fff)); }
.dle-graph-tooltip-badge--bootstrap { background: color-mix(in srgb, var(--dle-cat-bootstrap) 22%, transparent); color: color-mix(in srgb, var(--dle-cat-bootstrap) 55%, var(--SmartThemeBodyColor, #fff)); }
.dle-graph-tooltip-badge--regular { background: color-mix(in srgb, var(--dle-success) 22%, transparent); color: color-mix(in srgb, var(--dle-success) 55%, var(--SmartThemeBodyColor, #fff)); }
.dle-graph-tooltip-badge--error { background: color-mix(in srgb, var(--dle-cat-error) 22%, transparent); color: color-mix(in srgb, var(--dle-cat-error) 55%, var(--SmartThemeBodyColor, #fff)); }
.dle-graph-tooltip-badge--warning { background: color-mix(in srgb, var(--dle-cat-warning) 22%, transparent); color: color-mix(in srgb, var(--dle-cat-warning) 55%, var(--SmartThemeBodyColor, #fff)); }
.dle-graph-tooltip-badge--pinned { background: color-mix(in srgb, var(--dle-cat-pinned) 22%, transparent); color: color-mix(in srgb, var(--dle-cat-pinned) 55%, var(--SmartThemeBodyColor, #fff)); }

.dle-graph-tooltip-stats {
    color: var(--dle-text-muted, #aaa);
    font-size: var(--dle-text-lg);
}

.dle-graph-tooltip-gating {
    color: var(--dle-info, #90caf9);
    font-size: var(--dle-text-lg);
    font-style: italic;
}

.dle-graph-layout-notice {
    margin-left: auto;
    font-style: italic;
    font-size: var(--dle-text-lg);
    color: var(--SmartThemeBodyColor, #fff);
}
.dle-graph-layout-notice.dle-fade-out {
    animation: dle-graph-notice-fade 3s ease forwards;
}
@keyframes dle-graph-notice-fade {
    0%   { opacity: 1; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}

/* -- Layout overlay — blocks all input during graph calculation -- */
.dle-graph-layout-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--SmartThemeBlurTintColor, #000) 55%, transparent);
    z-index: 10;
    pointer-events: all;
    border-radius: inherit;
}
.dle-graph-layout-overlay-text {
    color: var(--SmartThemeBodyColor, #fff);
    font-size: var(--dle-text-xl);
    padding: 16px 24px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--SmartThemeBlurTintColor, #000) 80%, transparent);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* -- Context menu (positioned absolute within canvas container) -- */
.dle-graph-context-menu {
    position: absolute;
    z-index: 20;
    background: color-mix(in srgb, var(--SmartThemeBlurTintColor, #1a1a2e) 97%, transparent);
    border: 1px solid var(--dle-border, #555);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 170px;
    max-width: 220px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    font-size: var(--dle-text-base);
    color: var(--SmartThemeBodyColor, #ddd);
}

.dle-graph-ctx-header {
    padding: 4px 12px 6px;
    font-weight: 600;
    font-size: var(--dle-text-sm);
    color: var(--SmartThemeBodyColor, #fff);
    border-bottom: 1px solid var(--dle-border, #444);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dle-graph-ctx-item {
    padding: 5px 12px;
    cursor: pointer;
    transition: background var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    white-space: nowrap;
}

.dle-graph-ctx-item:hover,
.dle-graph-ctx-item:focus-visible {
    background: var(--dle-bg-hover, rgba(255,255,255,0.1));
    outline: none;
}
/* BUG-190: explicit focus ring for menu items (focus-visible overrides hover) */
.dle-graph-ctx-item[role="menuitem"]:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: -2px;
}

.dle-graph-ctx-item.dle-dimmed {
    cursor: default;
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted, #888);
}

.dle-graph-ctx-item.dle-dimmed:hover {
    background: transparent;
}

.dle-graph-ctx-sep {
    height: 1px;
    background: var(--dle-border, #444);
    margin: 2px 0;
}

/* -- Draggable settings panel (inside graph popup) -- */
.dle-graph-settings-panel {
    position: absolute;
    z-index: 30;
    top: 8px;
    right: 8px;
    width: 260px;
    background: color-mix(in srgb, var(--SmartThemeBlurTintColor, #1a1a2e) 97%, transparent);
    border: 1px solid var(--dle-border, #555);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    font-size: var(--dle-text-sm);
    color: var(--SmartThemeBodyColor, #ddd);
    user-select: none;
}

.dle-graph-settings-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    cursor: grab;
    border-bottom: 1px solid var(--dle-border, #444);
    border-radius: 8px 8px 0 0;
    background: color-mix(in srgb, var(--SmartThemeBodyColor, #fff) 5%, transparent);
}

.dle-graph-settings-titlebar:active {
    cursor: grabbing;
}

.dle-graph-settings-titlebar span {
    font-weight: 600;
    font-size: var(--dle-text-sm);
    color: var(--SmartThemeBodyColor, #fff);
}

.dle-graph-settings-close {
    cursor: pointer;
    color: var(--dle-text-muted, #888);
    font-size: var(--dle-text-lg);
    line-height: 1;
    padding: 0 2px;
    transition: color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}

.dle-graph-settings-close:hover,
.dle-graph-settings-close:focus-visible {
    color: var(--SmartThemeBodyColor, #fff);
}
/* BUG-191: explicit focus ring */
.dle-graph-settings-close:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

.dle-graph-settings-body {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* BUG-180: viewport-relative instead of fixed 400px so the panel body stays
       reachable on short viewports. */
    max-height: min(400px, calc(100dvh - 160px));
    overflow-y: auto;
}

.dle-graph-settings-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dle-graph-settings-row label {
    flex: 1;
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted, #aaa);
    white-space: nowrap;
}

/* f056: stacked label + persistent micro-caption so terse slider labels read at a glance
   and on touch (where title-tooltips are invisible). The stack takes the row's flex slot. */
.dle-graph-settings-row .dle-gs-label-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dle-graph-settings-row .dle-gs-label-stack label {
    flex: none;
}

.dle-graph-settings-row .dle-gs-caption {
    font-size: var(--dle-text-2xs, 10px);
    line-height: 1.2;
    color: var(--dle-text-muted, #777);
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dle-graph-settings-row input[type="number"],
.dle-graph-settings-row input[type="range"] {
    width: 70px;
    flex-shrink: 0;
}

.dle-graph-settings-row input[type="range"] {
    width: 90px;
    /* f018/f019: graph mounts in a generic ST popup (callGenericPopup), outside #deeplore-drawer,
       so it can't inherit the global accent rule above. Keep an explicit accent here but unify it
       on --dle-accent (was --dle-info) so every native control shares one tint. */
    accent-color: var(--dle-accent);
}

.dle-graph-settings-row .dle-gs-value {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted, #888);
    min-width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dle-graph-settings-row input[type="checkbox"] {
    margin: 0;
}

.dle-graph-settings-sep {
    height: 1px;
    background: var(--dle-border, #444);
    margin: 2px 0;
}

.dle-graph-settings-section-label {
    font-size: var(--dle-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dle-text-muted, #666);
    margin-top: 2px;
}

/* --- Utility classes for inline style migration --- */

/* Text utilities */
.dle-text-warning { color: var(--dle-warning-fg); }
.dle-text-muted { color: var(--dle-text-muted); }
.dle-text-pre { white-space: pre-wrap; font-size: 0.9em; }
.dle-text-center { text-align: center; }
.dle-text-right { text-align: right; }

/* Spacing utilities */
.dle-mb-1 { margin-bottom: var(--dle-space-1); }
.dle-mb-2 { margin-bottom: var(--dle-space-2); }
.dle-mt-1 { margin-top: var(--dle-space-1); }
.dle-mt-2 { margin-top: var(--dle-space-2); }
.dle-my-3 { margin: var(--dle-space-3) 0; }
.dle-my-10 { margin: 10px 0; }

/* Layout utilities */
.dle-flex { display: flex; }
.dle-flex-col { display: flex; flex-direction: column; }
.dle-flex-between { display: flex; justify-content: space-between; align-items: center; }
.dle-gap-1 { gap: var(--dle-space-1); }
.dle-hidden { display: none; }
.dle-cursor-pointer { cursor: pointer; }

/* Graph toolbar button (repeated ~15x in graph.js) */
.dle-graph-toolbar-btn {
    height: 28px;
    padding: 2px 8px;
    font-size: var(--dle-text-base);
}
.dle-graph-toolbar-btn-wide {
    height: 28px;
    padding: 2px 8px;
    font-size: var(--dle-text-base);
    white-space: nowrap;
}
.dle-graph-toolbar-input {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    height: 28px;
    font-size: var(--dle-text-base);
}
.dle-graph-toolbar-select {
    height: 28px;
    font-size: var(--dle-text-base);
    min-width: 80px;
}

/* --- Popup component classes (inline style migration) --- */

/* Layout utilities */
.dle-w-full { width: 100%; }

/* Copy button */
.dle-copy-btn { padding: 4px 12px; margin-bottom: var(--dle-space-2); }

/* Browse popup controls (scoped to popup to avoid collision with drawer .dle-browse-controls) */
.dle-popup .dle-browse-controls { display: flex; gap: var(--dle-space-2); margin-bottom: 10px; flex-wrap: wrap; align-items: initial; flex-shrink: initial; }
.dle-browse-search { flex: 2; min-width: 200px; }
.dle-browse-filter { flex: 1; min-width: 120px; }
.dle-browse-sort { flex: 1; min-width: 140px; }

/* Browse temperature border (set via data-temp attribute).
   f062: share the --dle-cat-* hues with the .dle-temp-hot/cold rows above so the legend
   swatch and the row tint are the same theme-relative blue/red. */
.dle-browse-table-row[data-temp="hot"] { border-left: 3px solid var(--dle-cat-error); }
.dle-browse-table-row[data-temp="cold"] { border-left: 3px solid var(--dle-cat-seed); }

/* "Why not?" compact button */
.dle-whynot-btn { padding: 2px 8px; }

/* Diagnostic result inline */
.dle-diag-result { padding: var(--dle-space-1) 0; }

/* Simulation timeline step */
.dle-sim-step { border-left: 3px solid var(--dle-border); padding: var(--dle-space-1) var(--dle-space-2); margin-bottom: 2px; }
.dle-sim-step--changed { border-left-color: var(--dle-success); }

/* Optimize two-column layout */
.dle-optimize-columns { display: flex; gap: 20px; margin-bottom: 10px; }
.dle-optimize-col { flex: 1; }

/* Cartographer popup */
.dle-carto-heading { margin: var(--dle-space-3) 0 var(--dle-space-1); }
.dle-carto-heading--muted { color: var(--dle-text-muted); }
.dle-carto-divider { border-color: var(--dle-border); }
.dle-carto-section-icon { margin-right: var(--dle-space-1); }
.dle-carto-obsidian-link { color: var(--SmartThemeQuoteColor, #aac8ff); text-decoration: none; }
.dle-carto-obsidian-link:hover { text-decoration: underline; }
.dle-carto-rejected { opacity: var(--dle-opacity-muted); }
.dle-carto-entry-row { padding: 4px 0; border-bottom: 1px solid var(--dle-border); }
.dle-carto-whynot-btn { padding: 1px 6px; margin-left: 6px; }

/* Auto-suggest popup */
.dle-suggest-card { padding: var(--dle-space-2); margin-bottom: var(--dle-space-2); }
.dle-suggest-card--accepted { border-color: var(--dle-success); }
.dle-suggest-card--rejected { border-color: var(--dle-error); opacity: var(--dle-opacity-muted); }
.dle-checkbox-row { margin-bottom: var(--dle-space-2); }

/* Commands-gating field selection */
.dle-field-select--active { font-weight: bold; border-left: 3px solid var(--dle-success, #4caf50); padding-left: 8px; }

/* Commands-admin health check */
.dle-health-summary { cursor: pointer; margin: 8px 0; }
.dle-health-list { margin: 4px 0 8px 20px; }
.dle-health-section-heading { margin: var(--dle-space-3) 0 var(--dle-space-1); }

/* f084: lint fix-it hint — actionable guidance, set apart from the warning list
   below it. Accent left-border + 'Fix' lead-in chip + muted-but-legible body.
   Backtick code spans in the hint render as <code> (see renderHintHtml). */
.dle-hint {
    margin: var(--dle-space-1) 0 var(--dle-space-2) 20px;
    padding: var(--dle-space-1) var(--dle-space-2);
    border-left: 3px solid var(--dle-accent);
    background: color-mix(in srgb, var(--dle-accent) 8%, transparent);
    border-radius: 0 var(--dle-radius-sm) var(--dle-radius-sm) 0;
    color: var(--dle-text-muted);
    font-size: var(--dle-text-sm);
    line-height: 1.4;
}
.dle-hint-label {
    display: inline-block;
    margin-right: var(--dle-space-2);
    padding: 0 var(--dle-space-1);
    border-radius: var(--dle-radius-sm);
    background: var(--dle-accent);
    color: var(--dle-on-accent);
    font-size: var(--dle-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: baseline;
}
.dle-hint code {
    font-family: var(--dle-font-mono);
    font-size: var(--dle-text-code);
    padding: 0 0.3em;
    border-radius: var(--dle-radius-sm);
    background: color-mix(in srgb, var(--dle-text-muted) 18%, transparent);
    color: var(--dle-text);
}

/* Commands-vault import textarea */
.dle-import-textarea { height: 200px; font-size: var(--dle-text-sm); }

/* Commands-ai summary textarea */
.dle-summary-textarea { height: 100px; font-size: 0.9em; }

/* Rule-builder description */
.dle-rb-desc { opacity: var(--dle-opacity-muted); margin-top: var(--dle-space-1); }

/* Graph legend swatches */
.dle-graph-legend-swatch { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; max-width: 130px; }
.dle-graph-legend-swatch > :last-child:not(.dle-graph-swatch-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dle-graph-swatch-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dle-graph-legend-gradient { display: inline-flex; align-items: center; gap: 6px; }
.dle-graph-legend-gradient-bar { display: inline-block; width: 120px; height: 10px; border-radius: 3px; }
.dle-graph-field-label { color: var(--SmartThemeBodyColor, #ccc); font-weight: bold; margin-right: 8px; }
.dle-graph-legend-swatch--empty { opacity: 0.6; }

/* Legend mode: allow wrapping and overflow control */
.dle-graph-tooltip--legend {
    flex-wrap: wrap;
    white-space: normal;
    max-height: 3.5em;
    overflow: hidden;
    transition: max-height var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
    align-items: flex-start;
}
.dle-graph-tooltip--legend.dle-graph-tooltip--expanded { max-height: 50%; }
.dle-graph-legend-toggle {
    pointer-events: auto;
    cursor: pointer;
    opacity: 0.5;
    font-size: 0.7em;
    padding: 0 6px;
    user-select: none;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), transform var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
    flex-shrink: 0;
}
.dle-graph-legend-toggle:hover { opacity: 1; }
.dle-graph-tooltip--expanded .dle-graph-legend-toggle { transform: rotate(180deg); }

/* Graph canvas and wrapper */
.dle-graph-canvas { border: 1px solid var(--dle-border); border-radius: var(--dle-radius-sm); cursor: grab; width: 100%; height: 100%; min-height: 200px; background: var(--dle-bg-surface); outline: none; }
.dle-graph-canvas:focus-visible { outline: 2px solid var(--SmartThemeUnderlineColor); outline-offset: -2px; }
.dle-graph-canvas-wrap { position: relative; flex: 1; min-height: 0; }

/* Graph settings panel compact controls */
.dle-gs-preset { flex: 1; height: 22px; font-size: var(--dle-text-xs); }
.dle-gs-compact-btn { flex: 1; height: 24px; font-size: var(--dle-text-xs); }
.dle-gs-compact-select { height: 22px; font-size: var(--dle-text-xs); width: 100px; }
.dle-gs-edge-count { font-size: var(--dle-text-xs); }
.dle-gs-center-row { justify-content: center; }

/* Graph footer and screen reader */
.dle-graph-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.dle-graph-sr-details { margin: 0; }
.dle-graph-sr-summary { cursor: pointer; font-size: var(--dle-text-sm); }
.dle-graph-sr-content { max-height: 100px; overflow-y: auto; font-size: var(--dle-text-sm); }

/* Graph toolbar secondary / focus mode */
/* BUG-223: was flex-wrap:nowrap which clipped focus-mode hop +/- buttons on
   narrow graph popups. Allow wrap so the back button can drop to its own row. */
.dle-graph-toolbar--secondary { padding: 2px 6px; flex-wrap: wrap; row-gap: 4px; }
.dle-graph-hop-btn { padding: 2px 6px; }
.dle-graph-depth-display { font-size: var(--dle-text-sm); font-weight: bold; min-width: 1.5em; text-align: center; }
.dle-graph-back-btn { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
/* Promote the focus-mode exit button so the exit path is impossible to miss (R1 f050). */
.dle-graph-back-btn--accent { border: 1px solid var(--dle-accent); font-weight: bold; }
.dle-graph-back-caption { font-size: var(--dle-text-sm); font-weight: normal; opacity: 0.75; margin-left: 4px; }

/* Graph detail panel (entry details side panel) */
.dle-graph-detail-panel {
    position: absolute; top: 8px; right: 8px;
    width: 280px; max-height: 60%;
    background: var(--SmartThemeBlurTintColor, #1a1a2e); border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-md); padding: var(--dle-space-3);
    overflow-y: auto; z-index: 10; font-size: var(--dle-text-sm);
    box-shadow: var(--dle-shadow-md);
}
.dle-graph-detail-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--dle-space-2); padding-bottom: var(--dle-space-2);
    border-bottom: 1px solid var(--dle-border);
}
.dle-graph-detail-close { background: none; border: none; cursor: pointer; opacity: 0.6; color: inherit; }
.dle-graph-detail-close:hover { opacity: 1; }

/* Graph search clear button */
.dle-graph-search-wrap { position: relative; display: inline-block; }
.dle-graph-search-wrap .dle-graph-toolbar-input { padding-right: 24px; }
.dle-graph-search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; opacity: 0.5;
    color: inherit; font-size: var(--dle-text-sm); padding: 2px 4px;
}
.dle-graph-search-clear:hover { opacity: 1; }

/* Settings popup utility classes */
.dle-sp-margin-top { margin-top: 8px; }
.dle-sp-indent { margin-left: 20px; }
.dle-unlimited-warning {
    display: block;
    font-size: var(--dle-text-xs, 0.75em);
    color: var(--dle-warning, #ff9800);
    margin-top: 2px;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--dle-warning, #ff9800) 8%, transparent);
    border-radius: var(--dle-radius-sm, 4px);
}
.dle-sp-narrow-input { width: 60px; }
/* f011: cap bounded numeric fields so a 1-2 digit integer doesn't render as a
   full-width text_pole spanning the whole flex1 column. max-width (not width)
   lets the field shrink to fit yet honours the explicit .dle-sp-narrow-input
   width:60px override. 12ch holds the widest bounded value (6 digits) plus the
   native spinner. Left-aligned in its column; text/path/select stay full-width,
   and type=range sliders are untouched (different input type). */
.dle-settings-popup input[type="number"].text_pole {
    max-width: 12ch;
}
.dle-sp-command-table { width: 100%; font-size: var(--dle-text-sm); border-collapse: collapse; }
.dle-sp-command-table th { padding: 4px; text-align: center; border-bottom: 1px solid var(--SmartThemeBorderColor); }
.dle-sp-command-table td { padding: 2px 4px; }

/* Compact slash command reference grid (About tab) */
/* BUG-211: auto-fit columns so narrow settings popups don't overflow */
.dle-cmd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 14px; font-size: var(--dle-text-xs); }
.dle-cmd-grid-col { display: flex; flex-direction: column; gap: 1px; }
.dle-cmd-grid-header { font-weight: 600; padding: 2px 0 4px; border-bottom: 1px solid var(--SmartThemeBorderColor); margin-bottom: 3px; opacity: 0.85; }
.dle-cmd-row { display: flex; align-items: baseline; gap: 6px; line-height: 1.3; }
.dle-cmd-row code { font-size: 0.95em; white-space: nowrap; }
.dle-cmd-row span { color: var(--SmartThemeQuoteColor, #aaa); opacity: 0.75; font-size: 0.92em; overflow: hidden; text-overflow: ellipsis; }

/* Popup content containers */
.dle-popup-section { padding: 10px; margin-bottom: var(--dle-space-2); }
.dle-popup-detail { display: none; margin-top: var(--dle-space-2); padding-top: var(--dle-space-2); border-top: 1px solid var(--dle-border); white-space: pre-wrap; font-size: 0.9em; }
.dle-popup-detail.dle-open { display: block; }

/* Simulation/browse table columns */
.dle-col-title { text-align: left; width: 28%; }
.dle-col-keys { text-align: left; width: 40%; }
.dle-col-pri { text-align: center; width: 10%; }
.dle-col-tok { text-align: right; width: 11%; }
.dle-col-usage { text-align: right; width: 11%; }

/* ═══════════════════════════════════════════════════════════════
   Rule Builder Popup
   ═══════════════════════════════════════════════════════════════ */
.dle-rb-popup { padding: var(--dle-space-2); }
.dle-rb-header {
    padding-bottom: var(--dle-space-3);
    border-bottom: 1px solid var(--dle-border);
    margin-bottom: var(--dle-space-2);
}
.dle-rb-header h3 { margin: 0 0 var(--dle-space-1) 0; font-size: var(--dle-text-base); }
.dle-rb-errors {
    background: color-mix(in srgb, var(--dle-error) 15%, transparent);
    border: 1px solid var(--dle-error);
    border-radius: 4px;
    padding: var(--dle-space-2);
    margin-bottom: var(--dle-space-2);
    font-size: var(--dle-text-sm);
    color: var(--dle-error);
}
.dle-rb-fields { display: flex; flex-direction: column; gap: var(--dle-space-2); margin: var(--dle-space-2) 0; }
.dle-rb-field {
    border: 1px solid var(--dle-border);
    border-radius: 6px;
    padding: var(--dle-space-2);
    background: var(--dle-bg-2, var(--SmartThemeBlurTintColor));
}
.dle-rb-field-header {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    margin-bottom: var(--dle-space-2);
    flex-wrap: wrap;
}
/* Keep the four icon buttons together and push them to the right so they wrap
   as a unit below the name/label inputs when the row runs out of room (narrow
   popups, or once tooltips become localized labels — DE/RU expand heavily). */
.dle-rb-field-tools {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    margin-left: auto;
}
.dle-rb-field-num {
    font-weight: bold;
    font-size: var(--dle-text-sm);
    opacity: var(--dle-opacity-faint);
    min-width: 24px;
}
.dle-rb-field-header .text_pole { flex: 1; min-width: 0; }
.dle-rb-name { max-width: 180px; }
.dle-rb-label { max-width: 240px; }
.dle-rb-field-body { display: flex; flex-direction: column; gap: var(--dle-space-1); padding-left: 28px; }
.dle-rb-row {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    flex-wrap: wrap;
}
.dle-rb-lbl {
    font-size: var(--dle-text-sm);
    min-width: 80px;
    color: var(--dle-text-muted);
}
.dle-rb-multi-lbl, .dle-rb-enabled-lbl {
    min-width: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--dle-text-sm);
}
.dle-rb-select {
    font-size: var(--dle-text-sm);
    padding: 2px 6px;
    background: color-mix(in srgb, var(--SmartThemeBodyColor, #fff) 5%, transparent);
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-sm, 4px);
    color: inherit;
    transition: background-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-rb-select:hover { border-color: var(--dle-accent); }
.dle-rb-select:focus-visible { outline: 2px solid var(--dle-focus); outline-offset: -2px; }
.dle-rb-tolerance { max-width: 280px; }
.dle-rb-ctx { max-width: 200px; font-size: var(--dle-text-sm); }
.dle-rb-field input[type="text"],
.dle-rb-field input[type="text"].text_pole {
    transition: border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), box-shadow var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-rb-field input[type="text"]:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dle-accent) 25%, transparent);
}
.dle-rb-values { flex: 1; font-size: var(--dle-text-sm); }
.dle-rb-delete.menu_button,
.dle-rb-move-up.menu_button,
.dle-rb-move-down.menu_button,
.dle-rb-dupe.menu_button { padding: 4px 8px; min-height: 28px; }
.dle-rb-gating-disabled { opacity: 0.4; pointer-events: none; }
.dle-rb-link-icon { cursor: pointer; font-size: var(--dle-text-sm); color: var(--dle-accent); padding: 0 4px; }
/* BUG-189: focus ring */
.dle-rb-link-icon:focus-visible { outline: 2px solid var(--dle-focus); outline-offset: 2px; border-radius: 2px; }
@keyframes dle-rb-field-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dle-rb-new { animation: dle-rb-field-in 200ms ease-out; }
.dle-rb-actions {
    display: flex;
    gap: var(--dle-space-2);
    margin: var(--dle-space-2) 0;
}
.dle-rb-footer {
    display: flex;
    gap: var(--dle-space-2);
    justify-content: flex-end;
    margin-top: var(--dle-space-3);
    padding-top: var(--dle-space-2);
    border-top: 1px solid var(--dle-border);
}
.dle-manage-fields-btn { margin-left: auto; }

/* Rule builder field error marker */
.dle-rb-field-error { border-left: 3px solid var(--dle-error); }

/* Chip keyboard focus */
button.dle-chip-x:focus-visible { outline: 2px solid var(--dle-focus); outline-offset: 1px; }

/* Browse tab custom fields */
.dle-browse-fields { font-size: var(--dle-text-xs); color: var(--dle-text-muted); margin-top: 4px; }

/* Gating empty state hint */
.dle-gating-hint { font-size: var(--dle-text-xs); color: var(--dle-text-muted); padding: var(--dle-space-2); }

/* Drawer icon — custom SVG (loaded async from icon.svg, FA fallback) */
.dle-drawer-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dle-drawer-icon-svg svg {
    width: 1.1em;
    height: 1.1em;
}

/* Rule builder field remove animation */
.dle-rb-removing { opacity: 0; transform: translateY(-4px); transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease, ease-in), transform var(--dle-dur-fast, 120ms) var(--dle-ease, ease-in); }

/* Rule builder responsive breakpoints */
@media (max-width: 1024px) {
    .dle-rb-name { max-width: 140px; }
    .dle-rb-tolerance { max-width: 220px; }
    .dle-rb-ctx { max-width: 160px; }
}
@media (max-width: 768px) {
    .dle-rb-row { flex-direction: column; align-items: stretch; }
    .dle-rb-lbl { min-width: unset; }
    .dle-rb-name, .dle-rb-tolerance, .dle-rb-ctx { max-width: unset; }
}

/* ============================================================================
 * Setup Wizard
 * ============================================================================ */

.dle-wizard {
    display: flex;
    flex-direction: column;
    /* Clamp the floor so short/landscape phone viewports never push the footer nav off-screen (Issue #39) */
    min-height: min(500px, 80dvh);
    max-height: 80vh;
    gap: var(--dle-space-3);
}

/* --- Step Indicator --- */
.dle-wizard-steps {
    display: flex;
    align-items: center;
    gap: 0;
    padding: var(--dle-space-2) var(--dle-space-3);
    border-bottom: 1px solid var(--dle-border);
    flex-shrink: 0;
    overflow-x: auto;
}

.dle-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: default;
    padding: 4px 8px;
    min-width: 60px;
    opacity: 0.4;
    transition: opacity var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
}
.dle-wizard-step.active {
    opacity: 1;
}
.dle-wizard-step.completed {
    opacity: 0.85;
    cursor: pointer;
}
.dle-wizard-step.completed:hover {
    opacity: 1;
}
/* BUG-192: self-contained focus rule so the back-nav button is reachable
   regardless of which popup container the wizard renders inside. */
.dle-wizard-step.completed:focus-visible {
    opacity: 1;
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    border-radius: var(--dle-radius-sm);
}

.dle-wizard-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--dle-text-base);
    font-weight: 700;
    border: 2px solid var(--dle-border);
    transition: background-color var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out), border-color var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out), color var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out), box-shadow var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
    color: var(--dle-text-muted);
}
.dle-wizard-step.active .dle-wizard-step-dot {
    border-color: var(--dle-info);
    color: var(--dle-info);
    /* BUG-195: infinite box-shadow keyframe removed — per-frame repaint storm.
       Static glow still distinguishes the active step. */
    box-shadow: 0 0 10px color-mix(in srgb, var(--dle-info) 50%, transparent);
}
.dle-wizard-step.completed .dle-wizard-step-dot {
    border-color: var(--dle-success);
    color: var(--dle-success);
    background: color-mix(in srgb, var(--dle-success) 15%, transparent);
}

.dle-wizard-step-label {
    font-size: var(--dle-text-xs);
    white-space: nowrap;
    color: inherit;
}

.dle-wizard-step-line {
    flex: 1;
    height: 2px;
    background: var(--dle-border);
    min-width: 12px;
    margin-top: -12px;
}

/* BUG-195: @keyframes dle-wizard-dot-pulse removed with the animation. */

/* --- Page Body --- */
.dle-wizard-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--dle-space-2) var(--dle-space-4);
    overscroll-behavior: contain;
    text-align: left;
}

.dle-wizard-page {
    display: none;
    animation: dle-wizard-page-in 250ms ease-out;
}
.dle-wizard-page.active {
    display: block;
}

@keyframes dle-wizard-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.dle-wizard-page h2 {
    margin: 0 0 4px;
    font-size: var(--dle-text-xl);
}

.dle-wizard-subtitle {
    color: var(--dle-text-muted);
    font-size: var(--dle-text-sm);
    margin: 0 0 var(--dle-space-4);
}

.dle-wizard-muted {
    color: var(--dle-text-muted);
    font-size: var(--dle-text-sm);
    font-style: italic;
    margin-top: var(--dle-space-4);
}

/* --- Cards --- */
.dle-wizard-card {
    background: var(--dle-bg-2);
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-md, 8px);
    padding: var(--dle-space-3) var(--dle-space-4);
    margin-bottom: var(--dle-space-3);
}
.dle-wizard-card h3 {
    margin: 0 0 var(--dle-space-2);
    font-size: var(--dle-text-base);
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
}
.dle-wizard-card h3 i {
    color: var(--dle-info);
}
.dle-wizard-card ol {
    padding-left: 20px;
    margin: var(--dle-space-2) 0 0;
}
.dle-wizard-card ol li {
    margin-bottom: var(--dle-space-1);
}

/* --- Form Fields --- */
.dle-wizard-field {
    margin-bottom: var(--dle-space-3);
}
.dle-wizard-field > label {
    display: block;
    font-weight: 600;
    font-size: var(--dle-text-sm);
    margin-bottom: 4px;
}

.dle-wizard-field-hint {
    display: block;
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    margin-bottom: 4px;
}

.dle-wizard-row {
    display: flex;
    gap: var(--dle-space-3);
}
.dle-wizard-row-3 {
    display: flex;
    gap: var(--dle-space-3);
}
.dle-wizard-row-3 > .dle-wizard-field {
    flex: 1;
}

.dle-wizard-divider {
    border: none;
    border-top: 1px solid var(--dle-border);
    margin: var(--dle-space-3) 0;
}

.dle-wizard-checkbox {
    margin: var(--dle-space-2) 0;
}
.dle-wizard-checkbox-inline {
    margin-top: 4px;
    font-size: var(--dle-text-xs);
}

/* --- Radio Groups --- */
.dle-wizard-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--dle-space-2);
}

.dle-wizard-radio {
    display: flex;
    align-items: flex-start;
    gap: var(--dle-space-2);
    padding: var(--dle-space-2) var(--dle-space-3);
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-md, 8px);
    cursor: pointer;
    transition: border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), background var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-wizard-radio:hover {
    background: var(--dle-bg-hover);
}
.dle-wizard-radio:has(input:checked) {
    border-color: var(--dle-info);
    background: color-mix(in srgb, var(--dle-info) 8%, transparent);
}
.dle-wizard-radio input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.dle-wizard-radio div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dle-wizard-badge-rec {
    font-size: var(--dle-text-xs);
    padding: 1px 6px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--dle-success) 20%, transparent);
    color: var(--dle-success);
    font-weight: 600;
    vertical-align: middle;
    margin-left: 4px;
}

/* --- Presets --- */
.dle-wizard-preset-group {
    display: flex;
    gap: var(--dle-space-2);
    margin-bottom: var(--dle-space-2);
}

.dle-wizard-preset {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--dle-space-3);
    border: 2px solid var(--dle-border);
    border-radius: var(--dle-radius-md, 8px);
    background: var(--dle-bg-2);
    cursor: pointer;
    transition: border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), background var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), transform var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-wizard-preset:hover {
    background: var(--dle-bg-hover);
    transform: translateY(-1px);
}
.dle-wizard-preset.active {
    border-color: var(--dle-info);
    background: color-mix(in srgb, var(--dle-info) 10%, transparent);
}
.dle-wizard-preset i {
    font-size: 1.4em;
    color: var(--dle-info);
}
.dle-wizard-preset span {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
}

/* #2: onboarding welcome choice cards + action row + skip btn + panel focus. */
.dle-wizard-fork-heading { margin: var(--dle-space-4) 0 var(--dle-space-2); font-size: var(--dle-text-base); color: var(--dle-text-muted); }
.dle-wizard-fork { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dle-space-2); margin-bottom: var(--dle-space-3); }
.dle-wizard-choice-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--dle-space-1);
    text-align: left; padding: var(--dle-space-3); border: 2px solid var(--dle-border);
    border-radius: var(--dle-radius-md, 8px); background: var(--dle-bg-2); cursor: pointer;
    transition: border-color var(--dle-dur-fast,120ms) var(--dle-ease-out,ease-out),
                background var(--dle-dur-fast,120ms) var(--dle-ease-out,ease-out),
                transform var(--dle-dur-fast,120ms) var(--dle-ease-out,ease-out);
}
.dle-wizard-choice-card:hover { background: var(--dle-bg-hover); border-color: var(--dle-accent); transform: translateY(-1px); }
.dle-wizard-choice-card:focus-visible { outline: none; border-color: var(--dle-accent); box-shadow: 0 0 0 2px var(--dle-focus, var(--dle-accent)); }
.dle-wizard-choice-recommended { border-color: color-mix(in srgb, var(--dle-accent) 55%, var(--dle-border)); }
.dle-wizard-choice-icon { font-size: 1.5em; color: var(--dle-accent); }
.dle-wizard-choice-title { font-weight: 600; font-size: var(--dle-text-sm); }
.dle-wizard-choice-desc { font-size: var(--dle-text-xs); color: var(--dle-text-muted); }
.dle-wizard-choice-badge {
    position: absolute; top: var(--dle-space-1); right: var(--dle-space-1);
    font-size: var(--dle-text-xs); padding: 1px 6px; border-radius: var(--dle-radius-sm, 4px);
    background: color-mix(in srgb, var(--dle-accent) 18%, transparent); color: var(--dle-accent);
    max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dle-wizard-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dle-space-2); margin: var(--dle-space-2) 0 var(--dle-space-1); }
.dle-wizard-skip-btn { opacity: var(--dle-opacity-muted, 0.75); }
.dle-wizard-skip-btn:hover { opacity: 1; }
.dle-wizard-page:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--dle-focus, var(--dle-accent)); border-radius: var(--dle-radius-sm, 4px); }

/* --- Confirm Badge (preset selection, etc.) --- */
.dle-wizard-confirm-badge {
    font-size: var(--dle-text-sm);
    color: var(--dle-success);
    padding: var(--dle-space-1) 0;
    opacity: 0;
    transition: opacity var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
}
.dle-wizard-confirm-badge.dle-wizard-badge-visible,
.dle-wizard-confirm-badge:has(i) {
    opacity: 1;
}

/* --- Action Buttons --- */
.dle-wizard-action-btn {
    margin: var(--dle-space-2) 0;
}
.dle-wizard-action-btn.dle-wizard-btn-verified {
    color: var(--dle-success);
    border-color: var(--dle-success);
}

/* --- Result Banners --- */
.dle-wizard-result-banner {
    padding: var(--dle-space-2) var(--dle-space-3);
    border-radius: var(--dle-radius-md, 8px);
    margin: var(--dle-space-2) 0;
    font-size: var(--dle-text-sm);
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    animation: dle-wizard-page-in 200ms ease-out;
}
.dle-wizard-result-success {
    background: color-mix(in srgb, var(--dle-success) 15%, transparent);
    color: var(--dle-success);
    border: 1px solid color-mix(in srgb, var(--dle-success) 30%, transparent);
}
.dle-wizard-result-error {
    background: color-mix(in srgb, var(--dle-error) 15%, transparent);
    color: var(--dle-error);
    border: 1px solid color-mix(in srgb, var(--dle-error) 30%, transparent);
}

/* --- File Creation Status --- */
.dle-wizard-file-status {
    font-size: var(--dle-text-sm);
    padding: var(--dle-space-1) 0;
    margin-top: var(--dle-space-1);
}
/* --- Done Page --- */
.dle-wizard-done-header {
    text-align: center;
    margin-bottom: var(--dle-space-4);
}
.dle-wizard-done-check {
    font-size: 3em;
    color: var(--dle-success);
    margin-bottom: var(--dle-space-2);
    animation: dle-wizard-pop 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes dle-wizard-pop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.dle-wizard-summary {
    display: flex;
    flex-direction: column;
    gap: var(--dle-space-2);
    margin-bottom: var(--dle-space-4);
}
.dle-wizard-summary-item {
    font-size: var(--dle-text-sm);
    padding: var(--dle-space-2) var(--dle-space-3);
    background: color-mix(in srgb, var(--dle-success) 8%, transparent);
    border-radius: var(--dle-radius-md, 8px);
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    animation: dle-wizard-item-in 300ms ease-out both;
}
.dle-wizard-summary-item i {
    color: var(--dle-success);
}
@keyframes dle-wizard-item-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

.dle-wizard-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--dle-space-2);
    margin-bottom: var(--dle-space-3);
}
.dle-wizard-done-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dle-space-2);
    padding: var(--dle-space-2) var(--dle-space-3);
}

.dle-wizard-wiki-link {
    text-align: center;
    font-size: var(--dle-text-sm);
}
.dle-wizard-wiki-link a {
    color: var(--dle-info);
    text-decoration: none;
}
.dle-wizard-wiki-link a:hover {
    text-decoration: underline;
}

/* --- Bottom Nav --- */
.dle-wizard-nav {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    padding: var(--dle-space-3) var(--dle-space-4);
    border-top: 1px solid var(--dle-border);
    flex-shrink: 0;
}
.dle-wizard-nav-spacer {
    flex: 1;
}
.dle-wizard-btn-primary {
    background: color-mix(in srgb, var(--dle-info) 20%, transparent);
    border-color: var(--dle-info);
}
.dle-wizard-btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--dle-info) 30%, transparent);
}
.dle-wizard-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Pulse animation for attention */
.dle-wizard-pulse {
    animation: dle-wizard-attention 600ms ease;
}
@keyframes dle-wizard-attention {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.03); }
    50% { transform: scale(0.97); }
    75% { transform: scale(1.02); }
}

/* --- Demo vault callout --- */
.dle-wizard-demo-callout {
    border-color: var(--dle-info, var(--SmartThemeQuoteColor, #4fc3f7));
    background: color-mix(in srgb, var(--dle-info, #4fc3f7) 6%, var(--dle-bg-2));
    margin-top: var(--dle-space-4);
}
.dle-wizard-demo-callout h3 i {
    color: var(--dle-info);
}
.dle-wizard-demo-callout ol {
    padding-left: 20px;
    margin: var(--dle-space-2) 0;
}
.dle-wizard-demo-callout ol li {
    margin-bottom: var(--dle-space-2);
    line-height: 1.5;
}
.dle-wizard-demo-path-row {
    display: flex;
    align-items: center;
    gap: var(--dle-space-1);
    margin-top: 4px;
}
.dle-wizard-demo-path {
    display: inline-block;
    padding: 3px 8px;
    background: var(--dle-bg-1, rgba(0, 0, 0, 0.15));
    border-radius: var(--dle-radius-sm, 4px);
    font-size: var(--dle-text-xs);
    user-select: all;
    word-break: break-all;
    flex: 1;
}
/* BUG-208: scoped under .dle-wizard so the higher specificity beats ST's
   .menu_button base without needing !important. */
.dle-wizard .dle-wizard-demo-copy,
.dle-setup-wizard .dle-wizard-demo-copy {
    padding: 2px 8px;
    min-height: unset;
    font-size: var(--dle-text-xs);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 600px) {
    .dle-wizard-row, .dle-wizard-row-3 { flex-direction: column; }
    .dle-wizard-preset-group { flex-direction: column; }
    .dle-wizard-fork { grid-template-columns: 1fr; }
    .dle-wizard-actions-grid { grid-template-columns: 1fr; }
    .dle-wizard-step-label { display: none; }
    /* BUG-182: shrink dots + padding so 9 steps fit under 540px without scroll */
    .dle-wizard-step { min-width: 36px; padding: 4px 2px; }
    .dle-wizard-step-dot { width: 22px; height: 22px; font-size: var(--dle-text-sm); }
    .dle-wizard-step-line { min-width: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Librarian Tab
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Librarian filter toggle --- */
/* --- Librarian sub-tabs --- */
.dle-librarian-sub-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--SmartThemeBorderColor);
    margin-bottom: var(--dle-space-2);
}
.dle-librarian-sub-tab {
    flex: 1;
    position: relative;
    /* Symmetric padding by default; only reserve right gutter when a count badge is actually
       present (#f101) so badge-less tabs aren't visually off-center and translated labels
       (DE/RU) get the full width on the stacked 1100px breakpoint. */
    padding: 5px 10px;
    font-size: var(--dle-text-sm);
    font-weight: 600;
    text-align: center;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: var(--SmartThemeBodyColor);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
/* Reserve room for the absolutely-positioned badge only when it has content. */
.dle-librarian-sub-tab:has(.dle-sub-tab-count:not(:empty)) {
    padding-right: 32px;
}
.dle-librarian-sub-tab:hover {
    opacity: 0.85;
}
.dle-librarian-sub-tab.active {
    opacity: 1;
    border-bottom-color: var(--dle-accent);
    color: var(--SmartThemeBodyColor);
}
.dle-sub-tab-count {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--dle-text-xs);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

/* --- Librarian toolbar right (sort + activity filter) --- */
.dle-librarian-toolbar-right {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-bottom: var(--dle-space-2);
}
/* --- Librarian select-all bar --- */
.dle-librarian-select-all-bar {
    display: flex;
    align-items: center;
    gap: var(--dle-space-2);
    padding: 4px var(--dle-space-2);
    font-size: var(--dle-text-xs);
    border-bottom: 1px solid var(--dle-border);
}
.dle-librarian-select-all-bar input[type="checkbox"] {
    /* f019: accent-color now comes from the global #deeplore-drawer rule (single source of truth). */
    cursor: pointer;
}

/* --- Librarian action row (footer) --- */
.dle-librarian-action-row {
    display: flex;
    gap: 6px;
    padding: 6px 4px;
    border-top: 1px solid var(--dle-border);
}
.dle-librarian-action-row .dle-tool-btn {
    flex: 1;
}
.dle-librarian-action-row .dle-tool-btn[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Librarian activity row --- */
.dle-librarian-activity-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    font-size: var(--dle-text-xs);
    border-bottom: 1px solid var(--dle-border);
}
.dle-librarian-activity-row .dle-activity-icon {
    width: 14px;
    text-align: center;
    opacity: 0.7;
    flex-shrink: 0;
}
.dle-librarian-activity-row .dle-activity-query {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dle-librarian-activity-row .dle-activity-meta {
    flex-shrink: 0;
}
.dle-librarian-activity-row .dle-activity-time {
    flex-shrink: 0;
    margin-left: auto;
}
.dle-activity-results-link {
    all: unset;
    cursor: pointer;
    color: var(--SmartThemeQuoteColor);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.dle-activity-results-link:hover { opacity: 0.85; }
.dle-activity-results-link:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Librarian sort --- */
.dle-librarian-sort {
    flex: 1;
    font-size: var(--dle-text-xs);
    padding: 2px 4px;
    background: var(--SmartThemeBlurTintColor);
    color: var(--SmartThemeBodyColor);
    border: 1px solid var(--SmartThemeBorderColor);
    border-radius: var(--dle-radius-sm);
}

/* --- Librarian list --- */
.dle-librarian-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* --- Librarian entry (inbox row) --- */
.dle-librarian-entry {
    display: grid;
    grid-template-columns: 18px 18px 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--dle-text-sm);
    transition: background-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    border-left: 3px solid transparent;
    animation: dle-entry-in 200ms ease-out both;
}
.dle-librarian-entry:hover {
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 25%, var(--SmartThemeBlurTintColor, rgba(0,0,0,0.3)));
}
.dle-librarian-entry:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: -2px;
}

/* --- Selective tint (only when frequency>=2 OR urgency=high) --- */
.dle-librarian-entry.dle-gap-tinted {
    background: color-mix(in srgb,
        hsl(35, calc(var(--dle-gap, 0) * 30%), calc(25% + var(--dle-gap, 0) * 5%))
        calc(var(--dle-gap, 0) * 22%), transparent);
}

/* #3: drawer-render — bulk bar, gap-row chevron grid, browse kebab, footer dock.
   (.dle-gap-title / .dle-gap-time / .dle-gap-entry-title grid placements folded
   into their existing cosmetic rules above to avoid duplicate fighting.) */
/* f041 librarian bulk-action bar */
.dle-librarian-select-all-bar { flex-wrap: wrap; }
.dle-librarian-bulk-actions { display: none; align-items: center; gap: var(--dle-space-1); margin-left: auto; }
.dle-librarian-select-all-bar.dle-has-selection .dle-librarian-bulk-actions { display: inline-flex; animation: dle-fade-in 120ms ease-out; }
.dle-librarian-select-all-bar.dle-has-selection .dle-librarian-select-count { font-weight: 600; opacity: 1; }
.dle-librarian-bulk-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: var(--dle-text-xs);
    border: 1px solid var(--dle-border); border-radius: var(--dle-radius-sm); background: var(--dle-bg-surface, transparent);
    color: var(--dle-text, inherit); cursor: pointer;
    transition: background var(--dle-dur-fast,120ms) var(--dle-ease-out,ease-out), border-color var(--dle-dur-fast,120ms) var(--dle-ease-out,ease-out);
}
.dle-librarian-bulk-btn:hover { background: var(--dle-bg-hover); }
.dle-librarian-bulk-btn:focus-visible { outline: 2px solid var(--dle-focus); outline-offset: 1px; }
.dle-librarian-bulk-btn[disabled] { opacity: var(--dle-opacity-disabled, .45); pointer-events: none; }
.dle-librarian-bulk-btn-ghost { border-color: transparent; background: none; }
.dle-librarian-bulk-btn-ghost:hover { background: var(--dle-bg-hover); }
.dle-librarian-bulk-btn-danger:hover { border-color: var(--dle-error); color: var(--dle-error); }
.dle-librarian-bulk-sep { width: 1px; height: 16px; background: var(--dle-border); margin: 0 2px; }
/* f042 gap-row chevron + inline reason */
.dle-librarian-entry { grid-template-columns: 18px 18px 1fr auto 16px; }
.dle-gap-main { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dle-gap-title-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.dle-gap-reason-teaser { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; line-height: 1.2; }
.dle-gap-chevron { grid-column: 5; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; opacity: var(--dle-opacity-muted); font-size: var(--dle-text-xs); transition: transform var(--dle-dur-fast,120ms) var(--dle-ease-out,ease-out); }
.dle-librarian-entry[aria-expanded="true"] .dle-gap-chevron { transform: rotate(90deg); }
.dle-librarian-entry:hover .dle-gap-chevron { opacity: 1; }
/* f035 browse row kebab / hover-reveal */
.dle-browse-actions { display: inline-flex; align-items: center; position: relative; }
.dle-browse-actions-cluster { display: inline-flex; align-items: center; gap: 2px; max-width: 0; overflow: hidden; opacity: 0; transition: max-width var(--dle-dur-fast,120ms) var(--dle-ease-out,ease-out), opacity var(--dle-dur-fast,120ms) var(--dle-ease-out,ease-out); }
.dle-browse-entry:hover .dle-browse-actions-cluster,
.dle-browse-actions:focus-within .dle-browse-actions-cluster,
.dle-browse-actions.dle-actions-open .dle-browse-actions-cluster,
.dle-browse-actions.dle-actions-pinned-open .dle-browse-actions-cluster { max-width: 120px; opacity: 1; }
.dle-browse-kebab { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 4px; background: none; border: none; color: inherit; opacity: var(--dle-opacity-ghost, .35); cursor: pointer; border-radius: var(--dle-radius-sm); }
.dle-browse-entry:hover .dle-browse-kebab, .dle-browse-kebab:focus-visible, .dle-browse-actions.dle-actions-open .dle-browse-kebab { opacity: 1; }
.dle-browse-kebab:hover { background: var(--dle-bg-hover); }
.dle-browse-kebab:focus-visible { outline: 2px solid var(--dle-focus); outline-offset: 1px; }
.dle-browse-actions.dle-actions-pinned-open .dle-browse-kebab { opacity: .5; }
/* footer diagnostics dock (.dle-health-icons / .dle-health-icon:hover dock props
   folded into their canonical rules in ZONE 3 footer to avoid duplicate selectors). */
.dle-diag-dock { display: flex; flex-direction: column; gap: 2px; }
.dle-diag-dock-label { text-transform: uppercase; letter-spacing: .04em; font-size: var(--dle-text-xs); line-height: 1; }
.dle-health-icon-action { color: var(--dle-warning); }

/* --- Bulk selection --- */
.dle-gap-check {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    /* f019: accent-color now comes from the global #deeplore-drawer rule (single source of truth). */
    grid-column: 1;
    grid-row: 1;
}
/* Checkbox and status share column 1; type=2, main(title)=3, time=4, chevron=5.
   (#3: title/time/entry-title grid placement now governed by the f042 chevron
   grid block below — old explicit .dle-gap-title{3}/.dle-gap-time{4} one-liners
   superseded; .dle-gap-title/.dle-gap-time now sit inside .dle-gap-main.) */
.dle-gap-type { grid-column: 2; }
/* BUG-209: scoped under .dle-librarian-entry so source order + specificity
   beats the temperature-tint rule without !important. Selection is the
   stronger user signal so it intentionally suppresses temperature heatmap. */
.dle-librarian-entry.dle-gap-selected,
.dle-librarian-entry.dle-gap-tinted.dle-gap-selected {
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 12%, transparent);
}

/* Entrance animation moved into main .dle-librarian-entry rule above */

/* --- Gap status indicator (button with 24px minimum target) --- */
.dle-gap-status {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--dle-text-xs);
    text-align: center;
    line-height: 1;
    width: 18px;
    height: 100%;
    cursor: pointer;
    border-radius: var(--dle-radius-sm);
    grid-column: 1;
    grid-row: 1;
}
.dle-gap-status:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: -2px;
}
.dle-gap-pending { color: var(--dle-warning-fg); }
.dle-gap-written { color: var(--dle-success-fg); }

/* --- Gap type icon --- */
.dle-gap-type {
    font-size: var(--dle-text-xs);
    text-align: center;
    opacity: 0.7;
}

/* --- Gap title --- */
.dle-gap-title {
    /* #3: flows inside .dle-gap-title-row (flex), no longer its own grid cell. */
    grid-column: auto;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* f039: update flags point at an existing entry — give them the info/blue
   identity (vs the gold gap tint) and render the entry reference as a chip so
   'update Castle' reads as targeting a real entry, not describing a void.
   Mirrors the in-chat dropdown treatment for cross-surface consistency. */
.dle-gap-update-icon { color: var(--dle-info); }
.dle-librarian-entry.dle-gap-update {
    border-left-color: color-mix(in srgb, var(--dle-info) 55%, transparent);
}
.dle-gap-entry-title {
    /* #3: now flows inside .dle-gap-title-row (flex), not its own grid cell. */
    grid-column: auto;
    grid-row: auto;
    flex: 0 1 auto;
    justify-self: start;
    align-self: start;
    padding: 0 6px;
    border-radius: var(--dle-radius-sm);
    background: color-mix(in srgb, var(--dle-info) 16%, transparent);
    color: color-mix(in srgb, var(--dle-info) 75%, var(--SmartThemeBodyColor, #ccc));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
}

/* --- Gap meta (right side) --- */
.dle-gap-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--dle-text-xs);
    opacity: 0.7;
    white-space: nowrap;
}
.dle-gap-reason {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none; /* hidden by default, shown on wider drawers */
}
.dle-gap-time {
    grid-column: 4;
    grid-row: 1;
    color: var(--SmartThemeBodyColor);
    opacity: 0.5;
}
.dle-gap-freq {
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 30%, transparent);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
    font-size: var(--dle-text-xs);
}
.dle-gap-urgency-high {
    color: var(--dle-error);
    font-weight: 700;
    font-size: var(--dle-text-sm);
}
.dle-gap-no-results {
    color: var(--dle-warning-fg);
    font-style: italic;
    font-size: var(--dle-text-xs);
}

/* --- Gap score badge (colorblind fallback) --- */
.dle-gap-score {
    font-size: var(--dle-text-xs);
    font-weight: 700;
    opacity: var(--dle-opacity-faint);
    min-width: 20px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Gap expanded detail (inline triage) --- */
.dle-gap-expanded {
    height: auto !important;
}
.dle-gap-detail {
    grid-column: 1 / -1;
    padding: 6px 8px 8px;
    border-top: 1px solid color-mix(in srgb, var(--dle-border) 30%, transparent);
    animation: dle-entry-in 200ms ease-out;
}
.dle-gap-detail-reason {
    font-size: var(--dle-text-xs);
    line-height: 1.4;
    margin-bottom: 4px;
    opacity: var(--dle-opacity-muted);
}
.dle-gap-detail-meta {
    font-size: var(--dle-text-xs);
    opacity: 0.5;
    margin-bottom: 6px;
}
.dle-gap-detail-results {
    font-size: var(--dle-text-xs);
    margin-bottom: 6px;
}
.dle-gap-detail-results-label {
    font-weight: 600;
}
.dle-gap-detail-results-list {
    opacity: 0.6;
    margin-top: 2px;
}
.dle-gap-detail-actions {
    display: flex;
    gap: 6px;
}
.dle-gap-detail-actions .dle-gap-action {
    font-size: var(--dle-text-sm);
    padding: 4px 10px;
    border: 1px solid var(--SmartThemeBorderColor);
    border-radius: var(--dle-radius-sm);
    color: var(--SmartThemeBodyColor);
    background: color-mix(in srgb, var(--SmartThemeBodyColor) 8%, transparent);
    cursor: pointer;
    transition: background var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-gap-detail-actions .dle-gap-action:hover {
    background: color-mix(in srgb, var(--SmartThemeBodyColor) 16%, transparent);
    border-color: var(--SmartThemeBodyColor);
}

/* --- Librarian badge on tab button --- */
.dle-librarian-badge {
    display: none;
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: var(--dle-text-xs);
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    border-radius: 7px;
    background: var(--dle-success);
    color: var(--dle-on-success); /* f061: shared on-fill token, was raw SmartThemeBodyColor */
}
.dle-librarian-badge.dle-visible {
    display: block;
    animation: dle-badge-pulse 600ms ease;
}
@keyframes dle-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* --- Librarian stats table (settings popup) --- */
.dle-librarian-stats-panel {
    margin-top: 12px;
    padding: 8px;
    border: 1px solid var(--SmartThemeBorderColor);
    border-radius: 4px;
}
.dle-librarian-stats-heading {
    margin: 0 0 6px 0;
    font-size: var(--dle-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}
.dle-librarian-stats-table {
    width: 100%;
    font-size: var(--dle-text-sm);
    border-collapse: collapse;
}
.dle-librarian-stats-table thead tr { opacity: 0.6; }
.dle-librarian-stats-table th,
.dle-librarian-stats-table td {
    padding: 2px 4px;
}
.dle-librarian-stats-table th:not(:first-child),
.dle-librarian-stats-table td:not(:first-child) {
    text-align: right;
}
.dle-librarian-stats-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--SmartThemeBodyColor) 4%, transparent);
}
.dle-librarian-stats-alltime { font-weight: 600; }

/* Show reason text on wider drawers */
@media (min-width: 400px) {
    .dle-gap-reason { display: block; }
}

/* --- Field update flash (when AI changes a field) --- */
@keyframes dle-field-flash {
    0% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--SmartThemeQuoteColor) 60%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.dle-field-updated {
    animation: dle-field-flash 0.8s ease-out;
}
/* Persistent "AI updated" dot on field label */
.dle-ai-modified > label::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--SmartThemeQuoteColor);
    margin-left: 4px;
    vertical-align: middle;
}

/* --- Librarian empty state actions & bottom toolbar --- */
.dle-librarian-empty-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
}
.dle-librarian-toolbar-bottom {
    display: flex;
    gap: 8px;
    padding: 6px 0 2px;
}
.dle-librarian-new-entry-btn,
.dle-librarian-vault-review-btn {
    font-size: var(--dle-text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Librarian Review Popup
   ═══════════════════════════════════════════════════════════════════════════ */

.dle-librarian-review {
    max-width: 95vw !important;
    /* BUG-164: don't force 1200px min-width at narrow widths — editor panel
       was getting squeezed below ~400px between the stack breakpoint and the
       two-col grid's minmax(320px, 380px) chat column. Let the popup size
       naturally inside ST's dialog. */
    min-width: min(1350px, 95vw) !important;
}
.dle-librarian-popup {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 340px);
    gap: 16px;
    height: 80vh;
    /* Clamp the floor so short/landscape phone viewports never push the submit button off-screen (Issue #39) */
    min-height: min(500px, 80dvh);
    transition: grid-template-columns var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
}
.dle-librarian-popup.dle-librarian-chat-collapsed {
    grid-template-columns: 1fr auto;
}
.dle-librarian-chat-collapsed .dle-librarian-chat {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
}
.dle-librarian-chat-collapsed .dle-librarian-chat-header {
    flex-direction: column;
    padding: 4px;
    gap: 4px;
}
.dle-librarian-chat-collapsed .dle-librarian-chat-title,
.dle-librarian-chat-collapsed .dle-lib-activity-toggle,
.dle-librarian-chat-collapsed .dle-librarian-messages,
.dle-librarian-chat-collapsed .dle-librarian-input-row,
.dle-librarian-chat-collapsed .dle-lib-activity-log,
.dle-librarian-chat-collapsed .dle-librarian-queue {
    display: none;
}

/* --- Editor panel (left) --- */
.dle-librarian-editor {
    display: flex;
    flex-direction: column;
    gap: var(--dle-space-2);
    overflow-y: auto;
    padding-right: 12px;
}
/* dirty indicator: title bullet only, no border highlight (avoids "new content" misread) */
.dle-librarian-editor-title {
    margin: 0;
    font-size: var(--dle-text-base);
    font-weight: 700;
    color: var(--SmartThemeBodyColor);
    line-height: 1.2;
}
.dle-librarian-editor-title.dle-librarian-dirty {
    color: var(--SmartThemeQuoteColor);
}
.dle-librarian-write-action {
    display: inline-flex;
    align-items: center;
    gap: var(--dle-space-2);
    margin-right: var(--dle-space-2);
}
#dle-lib-write-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    flex-shrink: 0;
}
#dle-lib-write-btn i {
    font-size: var(--dle-text-sm);
}
.dle-lib-write-status {
    font-size: var(--dle-text-xs);
    opacity: var(--dle-opacity-muted);
    color: var(--dle-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
    transition: color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-lib-write-status:empty {
    display: none;
}
.dle-lib-write-status.dle-lib-write-status--ok {
    color: var(--dle-success);
    opacity: 1;
}
.dle-lib-write-status.dle-lib-write-status--err {
    color: var(--dle-error);
    opacity: 1;
}
.dle-librarian-field {
    display: flex;
    flex-direction: column;
    gap: var(--dle-space-1);
}
.dle-librarian-field label {
    font-size: var(--dle-text-xs);
    font-weight: 600;
    color: var(--dle-text-muted);
    opacity: var(--dle-opacity-muted);
}
.dle-librarian-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dle-space-2);
}
.dle-librarian-field-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: var(--dle-space-2);
    border-bottom: 1px solid color-mix(in srgb, var(--dle-border) 30%, transparent);
    margin-bottom: var(--dle-space-1);
}
.dle-priority-hint,
.dle-field-hint {
    font-weight: 400;
    font-size: var(--dle-text-xs);
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.55;
}
.dle-librarian-field-grow {
    flex: 1;
    min-height: 0;
}
.dle-librarian-content-area {
    flex: 1;
    min-height: 200px;
    font-family: var(--dle-font-mono);
    font-size: var(--dle-text-base);
    line-height: 1.5;
    resize: none;
}
.dle-librarian-unified-textarea {
    flex: 1;
    min-height: 0;
    font-family: var(--dle-font-mono);
    font-size: var(--dle-text-sm);
    line-height: 1.5;
    resize: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    tab-size: 2;
    padding: 12px;
}

/* Key chips */
.dle-librarian-keys {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dle-space-1);
    padding: var(--dle-space-2);
    border: 1px solid var(--SmartThemeBorderColor);
    border-radius: var(--dle-radius-sm);
    min-height: 36px;
    align-items: center;
    transition: border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-librarian-keys:focus-within {
    border-color: var(--SmartThemeQuoteColor);
}
.dle-key-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--dle-space-1);
    padding: 3px var(--dle-space-2);
    font-size: var(--dle-text-xs);
    font-weight: 500;
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--SmartThemeQuoteColor) 40%, transparent);
    border-radius: 4px;
    white-space: nowrap;
    transition: background var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-key-chip:hover {
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 35%, transparent);
}
.dle-key-remove {
    background: none;
    border: none;
    color: var(--SmartThemeBodyColor);
    cursor: pointer;
    padding: 0 2px;
    font-size: var(--dle-text-base);
    line-height: 1;
    opacity: 0.5;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-key-remove:hover { opacity: 1; }
.dle-key-input {
    border: none;
    background: transparent;
    color: var(--SmartThemeBodyColor);
    font-size: var(--dle-text-sm);
    min-width: 100px;
    flex: 1;
}
.dle-key-input:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 1px;
    border-radius: 2px;
}

/* --- Chat panel (right) --- */
.dle-librarian-chat {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--SmartThemeBorderColor);
    padding-left: 12px;
    min-height: 0;
    overflow: hidden;
}
.dle-librarian-chat-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.dle-librarian-chat-header .menu_button_icon {
    background: transparent;
    border: none;
    color: var(--dle-text-muted, #aaa);
    cursor: pointer;
    padding: 4px 6px;
}
.dle-librarian-chat-header .menu_button_icon:hover {
    color: var(--dle-text, #ddd);
}
#dle-lib-chat-collapse {
    font-size: var(--dle-text-base);
    padding: 2px 6px;
    opacity: 0.5;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
#dle-lib-chat-collapse:hover { opacity: 1; }
#dle-lib-chat-collapse { position: relative; }
.dle-chat-unread {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
    background: var(--dle-error, #e74c3c);
    color: var(--dle-on-error); /* f061: shared on-fill token, was hardcoded #fff */
    padding: 0 3px;
}
.dle-librarian-chat-title {
    flex: 1;
    margin: 0;
    font-size: var(--dle-text-base);
    font-weight: 700;
    color: var(--SmartThemeBodyColor);
}
.dle-lib-activity-toggle {
    font-size: var(--dle-text-base);
    padding: 2px 6px;
    opacity: 0.6;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-lib-activity-toggle:hover { opacity: 1; }
.dle-lib-activity-toggle[aria-expanded="true"] { opacity: 1; color: var(--SmartThemeQuoteColor); }

/* Activity log */
.dle-lib-activity-log {
    max-height: 140px;
    overflow-y: auto;
    overscroll-behavior: contain; /* Issue #39 */
    border: 1px solid var(--SmartThemeBorderColor);
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: var(--dle-text-sm);
}
.dle-lib-activity-row {
    display: grid;
    grid-template-columns: 18px 1fr auto auto;
    gap: 6px;
    padding: 3px 8px;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--SmartThemeBorderColor) 40%, transparent);
}
.dle-lib-activity-row:last-child { border-bottom: none; }
.dle-lib-activity-icon { opacity: 0.6; text-align: center; }
.dle-lib-activity-query {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.dle-lib-activity-result {
    opacity: 0.6;
    font-size: var(--dle-text-xs);
    white-space: nowrap;
}
.dle-lib-activity-time {
    opacity: 0.4;
    font-size: var(--dle-text-xs);
    white-space: nowrap;
}
.dle-lib-activity-empty {
    padding: 8px;
    text-align: center;
    opacity: 0.5;
    font-style: italic;
}
.dle-lib-activity-summary {
    padding: 4px 8px;
    font-size: var(--dle-text-xs);
    font-weight: 600;
    opacity: var(--dle-opacity-muted);
    border-bottom: 1px solid color-mix(in srgb, var(--dle-border) 30%, transparent);
}
.dle-lib-activity-gen-label {
    padding: 2px 8px;
    font-size: var(--dle-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.4;
    background: color-mix(in srgb, var(--SmartThemeBodyColor) 5%, transparent);
}
.dle-lib-activity-tokens {
    opacity: 0.4;
    font-size: var(--dle-text-xs);
    white-space: nowrap;
}
.dle-librarian-messages {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain; /* Issue #39 */
    display: flex;
    flex-direction: column;
    gap: var(--dle-space-3);
    padding: var(--dle-space-1) 0;
    min-height: 0;
}
.dle-lib-msg {
    position: relative;
    padding: var(--dle-space-2) var(--dle-space-3);
    font-size: var(--dle-text-sm);
    line-height: 1.5;
    max-width: 88%;
    word-wrap: break-word;
    white-space: pre-wrap;
    animation: dle-entry-in 200ms ease-out both;
}
.dle-lib-msg-action {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: var(--dle-text-xs);
    padding: 2px 4px;
    opacity: 0;
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
    background: none;
    border: none;
    color: var(--SmartThemeBodyColor);
    cursor: pointer;
}
.dle-lib-msg:hover .dle-lib-msg-action { opacity: 0.5; }
.dle-lib-msg:hover .dle-lib-msg-action:hover { opacity: 1; }
.dle-lib-msg-stale { opacity: 0.4; }
.dle-lib-msg-edit-area {
    width: 100%;
    resize: vertical;
    font-size: var(--dle-text-sm);
    margin-bottom: 4px;
}
.dle-lib-msg-edit-btns {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}
.dle-lib-msg-edit-btns button {
    font-size: var(--dle-text-xs);
    padding: 2px 6px;
}
.dle-lib-msg-ai {
    display: flex;
    align-items: flex-start;
    gap: var(--dle-space-2);
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
}
.dle-lib-msg-ai .dle-lib-msg-content {
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 15%, transparent);
    border-left: 3px solid color-mix(in srgb, var(--SmartThemeQuoteColor) 40%, transparent);
    border-radius: var(--dle-radius-sm) var(--dle-radius-lg) var(--dle-radius-lg) var(--dle-radius-sm);
    padding: var(--dle-space-2) var(--dle-space-3);
}
.dle-lib-avatar {
    width: 50px;
    height: 100px;
    border-radius: var(--dle-radius-sm, 6px);
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
}
.dle-lib-msg-user {
    background: color-mix(in srgb, var(--SmartThemeChatMesColorFill, #2a4a6a) 35%, transparent);
    border-right: 3px solid color-mix(in srgb, var(--SmartThemeChatMesColorFill, #2a4a6a) 60%, transparent);
    border-radius: var(--dle-radius-lg) var(--dle-radius-sm) var(--dle-radius-sm) var(--dle-radius-lg);
    align-self: flex-end;
}
.dle-lib-msg-loading {
    align-self: flex-start;
    opacity: 0.6;
    font-style: italic;
    border-left: 3px solid transparent;
}

/* Options picker cards */
.dle-lib-options {
    display: flex;
    flex-direction: column;
    gap: var(--dle-space-2);
    padding: var(--dle-space-2) 0;
    animation: dle-entry-in 200ms ease-out both;
}
.dle-lib-option-card {
    border: 1px solid var(--SmartThemeBorderColor);
    border-radius: var(--dle-radius-md);
    padding: var(--dle-space-2) var(--dle-space-3);
    transition: border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-lib-option-card:hover {
    border-color: var(--SmartThemeQuoteColor);
}
.dle-lib-option-label {
    font-size: var(--dle-text-sm);
    font-weight: 600;
    margin-bottom: 4px;
}
.dle-lib-option-fields {
    margin-bottom: 6px;
}
.dle-lib-option-field {
    font-size: var(--dle-text-xs);
    line-height: 1.4;
    opacity: var(--dle-opacity-muted);
}
/* BUG-207: scoped under .dle-librarian-popup so the higher specificity beats
   ST's .menu_button base without needing !important. */
.dle-librarian-popup .dle-lib-option-apply,
.dle-librarian-review .dle-lib-option-apply {
    font-size: var(--dle-text-xs);
    padding: 2px 10px;
}
.dle-librarian-popup .dle-lib-option-dismiss,
.dle-librarian-review .dle-lib-option-dismiss {
    font-size: var(--dle-text-xs);
    padding: 2px 10px;
    opacity: 0.7;
    width: 100%;
    box-sizing: border-box; /* width:100% + card padding must not overflow the narrow chat-column grid track */
    margin-top: 4px;
}

/* Chat input row */
.dle-librarian-input-row {
    display: flex;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--SmartThemeBorderColor);
    margin-top: auto;
}
.dle-librarian-input-row .text_pole {
    flex: 1;
    resize: none;
    overflow-y: hidden;
    min-height: unset;
    line-height: 1.4;
}
.dle-librarian-input-row .menu_button {
    padding: 4px 10px;
    min-width: 36px;
}

/* --- Emma persona: subtitle, status line, thinking indicator --- */
.dle-librarian-chat-subtitle {
    font-weight: 400;
    font-size: var(--dle-text-xs);
    opacity: 0.55;
    margin-left: 4px;
    font-style: italic;
}
.dle-lib-status-line {
    font-size: var(--dle-text-xs);
    opacity: 0.55;
    padding: 4px 2px 2px;
    font-style: italic;
    min-height: 1.4em;
    color: var(--SmartThemeBodyColor);
}
/* BUG-217: animating `content` forces a paint per step and is non-composited.
   Use a static '...' string and animate opacity, which the compositor handles
   on the GPU with no per-step paint. */
.dle-lib-status-thinking::after {
    content: '...';
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: dle-lib-dots 1.4s ease-in-out infinite;
}
@keyframes dle-lib-dots {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 1; }
}
/* BUG-196: explicit reduced-motion override so content-flashing steps don't fire. */
@media (prefers-reduced-motion: reduce) {
    .dle-lib-status-thinking::after {
        animation: none !important;
        content: '...';
    }
}

/* --- Stop button --- */
.dle-lib-stop-btn {
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 30%, transparent);
    border-color: var(--SmartThemeQuoteColor);
    padding: 4px 10px;
    min-width: 36px;
}
.dle-lib-stop-btn:hover {
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 50%, transparent);
}

/* --- Tool activity messages --- */
.dle-lib-msg-tool {
    background: color-mix(in srgb, var(--SmartThemeBorderColor) 20%, transparent);
    border-left: 2px solid var(--SmartThemeBorderColor);
    padding: 4px 8px;
    margin: 2px 0;
    font-size: var(--dle-text-sm);
    opacity: 0.85;
}
.dle-lib-tool-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--dle-font-mono);
    user-select: none;
}
.dle-lib-tool-header:hover {
    opacity: 1;
}
/* BUG-184: focus ring for keyboard users */
.dle-lib-tool-header:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    opacity: 1;
}
.dle-lib-tool-header i.fa-wrench {
    color: var(--SmartThemeQuoteColor);
    font-size: var(--dle-text-xs);
}
/* f069: removed the .dle-lib-tool-spinner rule — it set color (overriding the global
   accent contract) and font-size (inert: goo-spinner is sized by its `size` attribute).
   The spinner now falls through to the single global goo-spinner accent rule. */
.dle-lib-tool-result {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--dle-font-mono);
    font-size: var(--dle-text-code);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
    padding: 4px 6px;
    background: color-mix(in srgb, var(--SmartThemeBlurTintColor) 50%, transparent);
    border-radius: 3px;
}
.dle-lib-tool-collapsed {
    opacity: 0.6;
}
.dle-lib-tool-collapsed:hover {
    opacity: 0.85;
}
.dle-lib-tool-expand-icon {
    font-size: var(--dle-text-xs);
    margin-left: auto;
}
.dle-lib-tool-expanded {
    margin-top: 4px;
    padding-left: 4px;
    border-left: 1px solid var(--SmartThemeBorderColor);
}
.dle-lib-tool-expanded .dle-lib-msg-tool {
    margin: 1px 0;
    padding: 2px 6px;
}

/* --- Work queue (vault review) --- */
.dle-librarian-queue {
    border: 1px solid var(--SmartThemeBorderColor);
    border-radius: 4px;
    margin: 6px 0;
    max-height: 200px;
    overflow-y: auto;
    flex-shrink: 0;
}
.dle-lib-queue-header {
    font-size: var(--dle-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 15%, transparent);
    border-bottom: 1px solid var(--SmartThemeBorderColor);
}
.dle-lib-queue-item {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 2px 4px;
    padding: 6px 8px;
    font-size: var(--dle-text-base);
    cursor: pointer;
    transition: background-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-lib-queue-item:hover {
    background: color-mix(in srgb, var(--SmartThemeBodyColor) 8%, transparent);
}
.dle-lib-queue-item.dle-lib-queue-urgent {
    border-left: 2px solid var(--dle-error);
}
.dle-lib-queue-action {
    font-weight: 700;
    text-align: center;
    color: var(--dle-success);
}
.dle-lib-queue-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dle-lib-queue-reason {
    opacity: 0.6;
    font-size: var(--dle-text-sm);
    grid-column: 2;
    line-height: 1.3;
}

/* Shake animation for empty submit */
@keyframes dle-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}
.dle-shake {
    animation: dle-shake 300ms ease-out;
}

/* Clear Written button — only visible when written gaps exist */
.dle-librarian-clear-written {
    font-size: var(--dle-text-xs);
    padding: 2px 6px;
    opacity: var(--dle-opacity-muted);
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-librarian-clear-written:hover {
    opacity: 1;
}

/* Responsive: stack panels on small screens.
   BUG-164: bumped from 800px to 1100px so the editor panel never drops below
   ~520px — between 800 and 1100 the two-col layout was producing a squashed editor. */
@media (max-width: 1100px) {
    .dle-librarian-popup {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .dle-librarian-field-row-3 {
        grid-template-columns: 1fr 1fr;
    }
    .dle-librarian-chat {
        border-left: none;
        border-top: 1px solid var(--SmartThemeBorderColor);
        padding-left: 0;
        padding-top: 12px;
    }
}

/* ============================================================================
 * Librarian "Consulted Lore Vault" Dropdown
 * Mirrors ST's native .mes_reasoning_details "Thought for X seconds" pattern.
 * ============================================================================ */

.dle-librarian-details {
    margin-right: var(--mes-right-spacing, 0);
}

.dle-librarian-summary {
    list-style: none;
    margin-right: calc(var(--mes-right-spacing, 0) * -1);
}

.dle-librarian-summary::-webkit-details-marker {
    display: none;
}
/* BUG-228: Firefox uses the standard ::marker pseudo for <details>; without
   this, the default disclosure triangle leaks through next to our custom arrow. */
.dle-librarian-summary::marker {
    content: "";
    display: none;
}

.dle-librarian-header {
    cursor: pointer;
    position: relative;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0.5em 2px;
    padding: 7px 14px;
    padding-right: calc(0.7em + 14px);
    border-radius: 5px;
    background-color: color-mix(in srgb, var(--SmartThemeBlurTintColor, #1a1a2e) 85%, var(--dle-librarian-tint) 15%);
    /* f064: use the shared em-relative type scale instead of a parallel
       mainFontSize calc so the chat widget tracks the same tokens (and the
       BUG-213 readability floor) as the rest of DLE. */
    font-size: var(--dle-text-sm);
}

.dle-librarian-header:hover {
    background-color: color-mix(in srgb, var(--SmartThemeBlurTintColor, #1a1a2e) 75%, var(--dle-librarian-tint) 25%);
}

.dle-librarian-icon-header {
    color: var(--dle-librarian-accent);
    font-size: var(--dle-text-sm);
    flex-shrink: 0;
}

.dle-librarian-title {
    color: var(--SmartThemeBodyColor, #ccc);
    flex-grow: 1;
}

.dle-librarian-arrow {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    /* f064: token scale (was 0.7*mainFontSize, which undercut the BUG-213
       readability floor). xs token keeps the disclosure glyph above it. */
    font-size: var(--dle-text-xs);
    color: var(--SmartThemeBodyColor, #ccc);
    opacity: 0.6;
    transition: transform var(--dle-dur-base, 200ms) var(--dle-ease-out, ease-out);
}

.dle-librarian-details:not([open]) .dle-librarian-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Expanded content area */
.dle-librarian-content {
    display: block;
    border-left: 2px solid var(--dle-librarian-accent);
    border-radius: 2px;
    padding: 5px 5px 5px 14px;
    margin-bottom: 0.5em;
    color: var(--SmartThemeBodyColor, #ccc);
    opacity: 0.85;
    /* Bound the expanded list so a reply with many searches + flags can't
       balloon past ST's compact reasoning-block size and shove the character
       reply down the chat flow.  Internal scroll keeps the collapsed summary
       as the primary compact view. */
    max-height: 40vh;
    overflow-y: auto;
}

.dle-librarian-dropdown-entry {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    /* f064: token scale (was 0.85*mainFontSize). Entries live in .dle-librarian-content
       which inherits the chat base, so sm resolves to the same ~0.85em it did before. */
    font-size: var(--dle-text-sm);
}

.dle-librarian-dropdown-entry .dle-librarian-icon {
    flex-shrink: 0;
    width: 1.2em;
    text-align: center;
    color: color-mix(in srgb, var(--SmartThemeQuoteColor, #d4a847) 60%, gold);
    font-size: var(--dle-text-sm);
}

.dle-librarian-dropdown-entry .dle-librarian-query {
    font-weight: 500;
}

.dle-librarian-dropdown-entry .dle-librarian-query::before {
    content: '"';
    opacity: 0.5;
}

.dle-librarian-dropdown-entry .dle-librarian-query::after {
    content: '"';
    opacity: 0.5;
}

.dle-librarian-dropdown-entry .dle-librarian-result {
    opacity: 0.65;
    font-size: 0.9em;
}

.dle-librarian-dropdown-entry .dle-librarian-result::before {
    content: '\2192  '; /* → */
}

/* f039: 'update existing entry' flags read distinct from 'new gap' flags.
   Gap flags keep the gold tint; update flags borrow the info/blue token so a
   'this entry is stale' signal doesn't look like a 'this lore is missing' one.
   The ' — EntryTitle' reference rides inside .dle-librarian-query here (single
   span), so we tint the whole update query to point at the named entry. */
.dle-librarian-dropdown-entry.dle-flag-update .dle-librarian-icon {
    color: var(--dle-info);
}
.dle-librarian-dropdown-entry.dle-flag-update .dle-librarian-query {
    color: color-mix(in srgb, var(--dle-info) 75%, var(--SmartThemeBodyColor, #ccc));
}

/* ═══ Phase 10: Competitive Feature Steals ═══ */

/* Command palette */
.dle-command-palette { max-height: 60vh; display: flex; flex-direction: column; }
.dle-palette-search-wrap { margin-bottom: var(--dle-space-3); }
.dle-palette-search { width: 100%; }
.dle-palette-list { overflow-y: auto; flex: 1; }
.dle-palette-item {
    display: flex; gap: var(--dle-space-3); align-items: baseline;
    padding: var(--dle-space-2) var(--dle-space-3); cursor: pointer;
    border-radius: var(--dle-radius-md);
}
.dle-palette-item:hover, .dle-palette-item:focus-visible {
    background: var(--dle-bg-2);
}
.dle-palette-cmd { min-width: 180px; flex-shrink: 0; font-family: var(--dle-font-mono); color: var(--dle-text-muted); font-size: var(--dle-text-code); }
.dle-palette-desc { font-size: var(--dle-text-sm); }
.dle-palette-empty { padding: var(--dle-space-3); color: var(--dle-text-muted); font-size: var(--dle-text-sm); }

/* Activity feed */
.dle-activity-feed-wrap {
    padding: var(--dle-space-1) var(--dle-space-2);
    font-size: var(--dle-text-xs);
}
.dle-activity-feed-toggle {
    cursor: pointer; color: var(--dle-text-muted);
    user-select: none; font-size: var(--dle-text-xs);
}
.dle-activity-row {
    display: flex; gap: var(--dle-space-3); padding: 2px 0;
    color: var(--dle-text-muted);
}
.dle-activity-time { min-width: 50px; }

/* Browse: related entries chips */
.dle-browse-related { margin-top: var(--dle-space-2); }
.dle-browse-related-chip {
    display: inline-block; padding: 1px 8px; margin: 2px;
    background: var(--dle-bg-2); border-radius: 12px;
    font-size: var(--dle-text-xs); cursor: pointer;
}
.dle-browse-related-chip:hover { background: var(--dle-bg-3, var(--dle-border)); }

/* Pipeline status toast — slides up from behind the input box */
#form_sheld { position: relative; }
#send_form  { position: relative; z-index: 2; }

/* Wave I sized the toast up 50% (padding 5/16 → 8/24, font 0.82em → 1.23em).
   f049 rebalanced it back down (padding 6/20, font 1.05em, spinner 38 → 28 in
   index.js) so the transient per-turn status no longer dominates the durable
   footer/diagnostics surfaces — visual weight should track information durability. */
#dle-pipeline-status {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    padding: 6px 20px;
    font-size: 1.05em;
    font-style: italic;
    color: var(--SmartThemeBodyColor, #ddd);
    /* f044: blend the tint toward the theme BODY color, not literal white, so the
       panel separates from the chat background in BOTH dark and light themes (a
       near-white light tint mixed with more white was nearly invisible). */
    background: color-mix(in srgb, var(--SmartThemeBlurTintColor, #222) 88%, var(--SmartThemeBodyColor));
    /* f044: subtle DLE-branded left accent so the toast reads as a DLE surface
       regardless of theme. */
    border: 1px solid color-mix(in srgb, var(--SmartThemeBorderColor) 60%, transparent);
    border-left: 3px solid var(--dle-accent);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1;
    pointer-events: none;
    animation: dle-toast-in var(--dle-dur-slow, 320ms) var(--dle-ease-out, ease-out) forwards;
}
#dle-pipeline-status.dle-toast-out { animation: dle-toast-out var(--dle-dur-base, 200ms) var(--dle-ease, ease-in) forwards; }

/* Wave D: phase text cross-fades on change (the spinner node is left untouched so its
   spin never restarts). Uses the Wave A motion tokens. The swap class is re-triggered
   from JS via a remove → reflow → re-add cycle in _updatePipelineStatus. */
.dle-pipeline-status-text { display: inline-block; }
.dle-pipeline-status-text.dle-phase-swap {
    animation: dle-phase-swap var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
@keyframes dle-phase-swap {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}

/* #6 (LP1): consulting-vault heartbeat (elapsed) + cancel on the pipeline toast. */
.dle-pipeline-elapsed { margin-left: 6px; font-size: var(--dle-text-xs); opacity: var(--dle-opacity-muted); font-variant-numeric: tabular-nums; }
.dle-pipeline-cancel {
    margin-left: 8px; padding: 1px 7px; font-size: var(--dle-text-xs); cursor: pointer;
    border: 1px solid var(--dle-border); border-radius: var(--dle-radius-sm);
    background: var(--dle-bg-surface, transparent); color: var(--dle-text, inherit);
    transition: background var(--dle-dur-fast,120ms) var(--dle-ease-out,ease-out), border-color var(--dle-dur-fast,120ms) var(--dle-ease-out,ease-out);
}
.dle-pipeline-cancel:hover { background: var(--dle-bg-hover); border-color: var(--dle-error); color: var(--dle-error); }
.dle-pipeline-cancel:focus-visible { outline: 2px solid var(--dle-focus); outline-offset: 1px; }

/* Wave D: explicit reduced-motion coverage. #dle-pipeline-status lives in #form_sheld,
   OUTSIDE the descendant-scoped reduced-motion block (which only covers .dle-settings *
   and #deeplore-drawer *), so it needs its own opt-out. _removePipelineStatus has a
   setTimeout fallback, so killing dle-toast-out's animationend is safe.
   Wave G decision: kept HERE, next to the toast it governs, rather than folded into the
   broad block — locality wins, and the broad block can't reach #form_sheld anyway. */
@media (prefers-reduced-motion: reduce) {
    #dle-pipeline-status,
    #dle-pipeline-status.dle-toast-out,
    .dle-pipeline-status-text.dle-phase-swap {
        animation: none !important;
    }
}

/* GOTCHA: translateY(%) is relative to element's own height, not parent's.
   calc(100% + var(--bottomFormBlockSize)) ensures the toast hides behind the
   variable-height send form (textarea can be resized). */
@keyframes dle-toast-in {
    from { transform: translateY(calc(100% + var(--bottomFormBlockSize, 50px))); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes dle-toast-out {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(calc(100% + var(--bottomFormBlockSize, 50px))); opacity: 0; }
}

/* Toggle-active state for one-shot action buttons (e.g. skip-tools) */
.dle-action-btn.dle-toggle-active {
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 25%, transparent);
    border-color: var(--SmartThemeQuoteColor);
}
.dle-action-btn.dle-toggle-active i {
    color: var(--dle-warning, #e2a832);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Wave G — a11y hardening (Windows High Contrast) + universal press feedback
   ═══════════════════════════════════════════════════════════════════════════ */

/* Universal pressed feedback — every DLE button / role=button / role=radio dips on
   :active so a click registers physically (was a single :active rule in the whole
   sheet). Instantaneous state change (no transition) → reduced-motion safe. Scoped
   to DLE roots so ST's own controls are untouched. */
#deeplore-drawer button:active,
#deeplore-drawer [role="button"]:active,
#deeplore-drawer [role="radio"]:active,
.dle-settings button:active,
.dle-settings [role="button"]:active,
.dle-popup button:active,
.dle-popup [role="button"]:active {
    transform: translateY(1px);
}

/* Forced-colors (Windows High Contrast): DLE leans on color-mix(…transparent) tints
   and custom borders that the OS palette strips, so state conveyed by background tint
   disappears. Restore it with system colors + explicit borders. The preview harness
   can't emulate forced-colors, so these are authored conservatively against verified
   class names rather than visually tuned. */
@media (forced-colors: active) {
    /* Keyboard focus must be a visible system outline everywhere DLE renders. */
    #deeplore-drawer :focus-visible,
    .dle-settings :focus-visible,
    .dle-popup :focus-visible {
        outline: 2px solid Highlight !important;
        outline-offset: 2px;
    }

    /* Panel delineation — its tinted bg/border collapse to Canvas. */
    #deeplore-panel { border: 1px solid CanvasText; }

    /* Selected radio / active tab / pressed quick-filter: the "current" tint vanishes
       → mark with a system border + Highlight text. */
    .dle-tab.active,
    .dle-why-filter-btn[aria-checked="true"],
    .dle-librarian-sub-tab[aria-checked="true"],
    .dle-qf-pill[aria-pressed="true"] {
        border: 1px solid Highlight !important;
        color: Highlight !important;
    }

    /* Browse row state cues (injected / selected) read via bg → add an inset ring. */
    .dle-browse-injected { outline: 1px solid Highlight; outline-offset: -1px; }
    .dle-browse-selected { outline: 2px solid Highlight; outline-offset: -2px; }

    /* Pin / block toggles signal "engaged" via tint → border them when active. */
    .dle-pin-active,
    .dle-block-active { border: 1px solid Highlight !important; }

    /* Health dots, temperature tints and token heat are color-as-data — preserve their
       hues instead of letting the OS flatten them to CanvasText. */
    #dle-drawer-footer [data-health],
    .dle-status-dot,
    .dle-temp-hot,
    .dle-temp-cold,
    .dle-why-tokens { forced-color-adjust: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Wave I — goo-spinner integration
   ═══════════════════════════════════════════════════════════════════════════ */
/* The component fills with currentColor (instances pass color="currentColor"), so this
   one rule makes EVERY goo-spinner take the DLE accent and adapt to dark/light via the
   theme-derived var. Size is set per-instance via the `size` attribute (NOT width/height
   here — the internal jelly physics reads the attribute, so a CSS size override would
   desync the box from the blob orbit). vertical-align keeps inline spinners on the
   text baseline (toast, buttons, refresh glyph). */
goo-spinner {
    color: var(--dle-accent, var(--SmartThemeQuoteColor, #5b8def));
    vertical-align: middle;
    line-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   F18 — Temperature legend gradient line (browse tab)
   ═══════════════════════════════════════════════════════════════════════════ */
.dle-browse-temp-legend {
    height: 3px;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--dle-info) 70%, transparent) 0%,
        transparent 50%,
        color-mix(in srgb, var(--dle-error) 70%, transparent) 100%
    );
    border-radius: 2px;
    margin: var(--dle-space-1) 0 var(--dle-space-2);
    position: relative;
}
.dle-browse-temp-legend::before,
.dle-browse-temp-legend::after {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    position: absolute;
    top: -14px;
}
.dle-browse-temp-legend::before {
    content: 'rarely injected';
    left: 0;
}
.dle-browse-temp-legend::after {
    content: 'frequently injected';
    right: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   New agent classes
   ═══════════════════════════════════════════════════════════════════════════ */

/* Chip warn variant — base chip styling applies; this adds warn tinting */
.dle-chip-warn {
    background: color-mix(in srgb, var(--dle-warning) 20%, transparent);
    border-color: color-mix(in srgb, var(--dle-warning) 40%, transparent);
    color: var(--SmartThemeBodyColor, #eee);
}

/* Reasoning warning button — button reset, chip classes paint */
.dle-reasoning-warning-btn {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--dle-space-1);
}
.dle-reasoning-warning-btn:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Chip dismiss × button */
.dle-chip-dismiss {
    font-size: var(--dle-text-sm);
    opacity: var(--dle-opacity-muted);
    cursor: pointer;
    margin-left: var(--dle-space-1);
    padding: 0 var(--dle-space-1);
    background: none;
    border: none;
    color: inherit;
    line-height: 1;
    border-radius: 2px;
}
.dle-chip-dismiss:hover,
.dle-chip-dismiss:focus-visible {
    opacity: 1;
    outline: 1px solid var(--dle-focus);
}

/* Gating value chip — interactive, mirrors .dle-folder-badge-chip */
.dle-folder-badge-chip,
.dle-gating-value-chip {
    cursor: pointer;
}
.dle-folder-badge-chip:hover,
.dle-gating-value-chip:hover {
    opacity: 0.8;
}
/* BUG-188: focus ring for keyboard users */
.dle-folder-badge-chip:focus-visible,
.dle-gating-value-chip:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
}

/* Browse quick-filter toolbar container */
.dle-browse-quick-filters {
    display: flex;
    gap: var(--dle-space-2);
    flex-wrap: wrap;
    padding: var(--dle-space-1) var(--dle-space-2);
}
.dle-browse-quick-filters:empty {
    display: none;
}

/* Browse quick-filter pill — chip style + pressed state */
.dle-browse-quick-filter-pill,
.dle-qf-pill {
    font-size: var(--dle-text-xs);
    padding: 2px var(--dle-space-2);
    border: 1px solid var(--dle-border, var(--SmartThemeBorderColor));
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    color: var(--dle-text-muted);
    transition: background var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-browse-quick-filter-pill:hover,
.dle-qf-pill:hover {
    color: var(--SmartThemeBodyColor, #eee);
}
.dle-browse-quick-filter-pill:focus-visible,
.dle-qf-pill:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
}
.dle-browse-quick-filter-pill[aria-pressed="true"],
.dle-browse-quick-filter-pill.dle-qf-active,
.dle-qf-pill[aria-pressed="true"],
.dle-qf-pill.dle-qf-active {
    background: color-mix(in srgb, var(--dle-accent) 20%, transparent);
    color: var(--dle-accent);
    border-color: var(--dle-accent);
}

/* Browse clear-filters button (inside empty state) */
.dle-browse-clear-filters {
    margin-top: var(--dle-space-2);
    padding: 4px var(--dle-space-3);
    background: transparent;
    border: 1px solid var(--dle-accent);
    color: var(--dle-accent);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--dle-text-sm);
}
.dle-browse-clear-filters:hover {
    background: color-mix(in srgb, var(--dle-accent) 15%, transparent);
}
.dle-browse-clear-filters:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
}

/* Browse active filters summary paragraph */
.dle-browse-active-filters-list {
    font-size: var(--dle-text-sm);
    color: var(--dle-text-muted);
    margin: var(--dle-space-1) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dle-space-1);
    justify-content: center;
}
.dle-browse-active-filters-list:empty {
    display: none;
}
.dle-browse-active-filter-chip {
    font-size: var(--dle-text-xs);
    padding: 2px var(--dle-space-2);
    border: 1px solid var(--dle-border, var(--SmartThemeBorderColor));
    border-radius: 999px;
    background: color-mix(in srgb, var(--dle-accent) 12%, transparent);
    color: var(--dle-text-muted);
}

/* P50 legend in empty-no-data state */
.dle-empty-legend {
    font-size: var(--dle-text-xs);
    color: var(--dle-text-muted);
    margin-top: var(--dle-space-2);
    opacity: var(--dle-opacity-muted, 0.7);
}

/* ============================================================================
 * P3 Polish — Status, Footer, Browse, Gating, Librarian
 * ============================================================================ */

/* Item 7: skip-tools state-change pulse (1 iter, 600ms, subtle scale+fade) */
@keyframes dle-skip-tools-pulse {
    0%   { transform: scale(1);    opacity: 1; }
    40%  { transform: scale(1.18); opacity: 0.75; }
    100% { transform: scale(1);    opacity: 1; }
}
.dle-skip-tools-pulse {
    animation: dle-skip-tools-pulse 600ms ease-out 1;
}

/* Item 8: indexing shimmer on entries-bar-container (infinite while active) */
@keyframes dle-indexing-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.dle-indexing-shimmer {
    background: linear-gradient(90deg,
        transparent 25%,
        color-mix(in srgb, var(--dle-accent) 30%, transparent) 50%,
        transparent 75%) center / 200% auto;
    animation: dle-indexing-shimmer 1.4s linear infinite;
}

/* Item 9: browse copy-title ghost button matching .dle-browse-pin */
button.dle-browse-copy-title-btn {
    font-size: var(--dle-text-base);
    cursor: pointer;
    opacity: var(--dle-opacity-muted);
    background: none;
    border: none;
    color: inherit;
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
button.dle-browse-copy-title-btn:hover {
    opacity: 1;
    background: var(--dle-bg-hover);
    border-radius: var(--dle-radius-sm);
}
button.dle-browse-copy-title-btn:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
    border-radius: var(--dle-radius-sm);
}

/* Item 10: gating-clear-btn — × dismiss matching chip dismiss style */
.dle-gating-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dle-text-muted);
    font-size: var(--dle-text-sm);
    padding: 0 var(--dle-space-1);
    border-radius: var(--dle-radius-sm);
    line-height: 1;
    opacity: var(--dle-opacity-muted);
}
.dle-gating-clear-btn:hover {
    opacity: 1;
    color: var(--dle-error);
    background: color-mix(in srgb, var(--dle-error) 12%, transparent);
}
.dle-gating-clear-btn:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
}

/* Item 11: librarian clear + invert buttons matching .dle-librarian-select-all-bar style */
.dle-librarian-clear-btn,
.dle-librarian-invert-btn {
    font-size: var(--dle-text-xs);
    padding: 2px var(--dle-space-2);
    background: none;
    border: 1px solid var(--dle-border);
    border-radius: var(--dle-radius-sm);
    color: var(--dle-text-muted);
    cursor: pointer;
    opacity: var(--dle-opacity-muted);
    transition: opacity var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out), border-color var(--dle-dur-fast, 120ms) var(--dle-ease-out, ease-out);
}
.dle-librarian-clear-btn:hover,
.dle-librarian-invert-btn:hover {
    opacity: 1;
    border-color: var(--dle-accent);
    color: var(--dle-accent);
}
.dle-librarian-clear-btn:focus-visible,
.dle-librarian-invert-btn:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
}

/* Item 12: why-clear-filter-pill inline pill matching .dle-browse-clear-filters */
.dle-why-clear-filter-pill {
    display: inline-block;
    padding: 2px var(--dle-space-2);
    background: transparent;
    border: 1px solid var(--dle-accent);
    color: var(--dle-accent);
    border-radius: var(--dle-radius-pill);
    cursor: pointer;
    font-size: var(--dle-text-xs);
    line-height: 1.4;
    vertical-align: middle;
}
.dle-why-clear-filter-pill:hover {
    background: color-mix(in srgb, var(--dle-accent) 15%, transparent);
}
.dle-why-clear-filter-pill:focus-visible {
    outline: 2px solid var(--dle-focus);
    outline-offset: 2px;
}

/* v2.5: proxy mode migration — pulse-glow attention on the migrated feature's
   accordion when the post-migration popup opens Settings. 4 pulses × 1.2s ≈ 5s,
   matched by the 6s setTimeout in _maybeShowProxyDeprecationNotice. */
@keyframes dle-pulse-attention-kf {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--dle-warning) 60%, transparent); }
}
.dle-pulse-attention {
    animation: dle-pulse-attention-kf 1.2s ease-in-out 4;
    outline: 2px solid var(--dle-warning);
    outline-offset: 2px;
}

/* v2.6 R2 E1: dle-notify toast facade — copyable error bodies + action buttons */
.dle-toast-copyable { cursor: copy; }
.dle-toast-copyable::after {
    content: 'copy';
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.5;
    margin-left: 6px;
    font-size: 0.72em;
    vertical-align: middle;
}
.dle-toast-copyable:hover::after { opacity: 0.9; }
.dle-toast-copied::after { content: 'copied'; opacity: 1; color: var(--dle-success-fg, #6cc070); }
.dle-toast-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dle-toast-action { font-size: 0.8em; padding: 2px 10px; }


/* WI import report popup — responsive 2-column field list + EM explainer box */
.dle-import-report-cols {
    columns: 2;
    column-gap: 2em;
}
@media (max-width: 600px) {
    .dle-import-report-cols {
        columns: 1;
    }
}
.dle-import-report-em-box {
    border: 1px solid var(--SmartThemeBorderColor, #444);
    padding: 0.75em;
    border-radius: 4px;
    margin: 0.5em 0;
}

/* #5: import recovery reconciliation table. */
.dle-import-recovery { margin-top: var(--dle-space-4); }
.dle-import-recovery-bulk { margin: var(--dle-space-2) 0; }
.dle-import-recovery-table { width: 100%; border-collapse: collapse; font-size: var(--dle-text-sm); margin-top: var(--dle-space-2); }
.dle-import-recovery-table th, .dle-import-recovery-table td { text-align: left; padding: var(--dle-space-1) var(--dle-space-2); border-bottom: 1px solid var(--dle-border); vertical-align: top; }
.dle-import-recovery-table th { color: var(--dle-text-muted); font-weight: 600; white-space: nowrap; }
.dle-import-recovery-entry { word-break: break-word; }
.dle-import-recovery-action { white-space: nowrap; }
.dle-import-recovery-row-done { opacity: var(--dle-opacity-muted); }
.dle-import-cat { display: inline-block; padding: 0 var(--dle-space-1); border-radius: var(--dle-radius-sm); font-size: var(--dle-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; border: 1px solid currentColor; margin-right: var(--dle-space-1); white-space: nowrap; }
.dle-import-cat-transient { color: var(--dle-info-fg); }
.dle-import-cat-collision { color: var(--dle-warning-fg); }
.dle-import-cat-convert { color: var(--dle-error-fg); }
.dle-import-cat-write { color: var(--dle-warning-fg); }
.dle-import-cat-unknown { color: var(--dle-text-muted); }
.dle-import-recovery-status { font-size: var(--dle-text-sm); font-weight: 600; }
.dle-import-recovery-status-pending { color: var(--dle-text-muted); }
.dle-import-recovery-status-ok { color: var(--dle-success-fg); }
.dle-import-recovery-status-fail { color: var(--dle-error-fg); }
.dle-import-recovery-status-dismissed { color: var(--dle-text-muted); opacity: var(--dle-opacity-muted); }
@media (max-width: 600px) { .dle-import-recovery-table th:nth-child(2), .dle-import-recovery-table td.dle-import-recovery-reason { font-size: var(--dle-text-xs); } }