styles.css

/* Obsidian Agent - Styles (Kilo Code Pattern) */

/* Sidebar min-width: prevent buttons from being cut off (FEATURE-1907) */
.workspace-leaf-content[data-type="obsilo-agent-sidebar"] {
    min-width: 320px;
}

/* ── Sandbox iframe (Self-Development Phase 3) ──────────────────────── */
.agent-sandbox-iframe {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border: 0;
}

/* Sidebar Container
 *
 * This block also carries the --vo-* design tokens: the "own layer" of the
 * redesign, a single-source token set on top of Obsidian's theme variables so
 * spacing, radius, elevation and status colours come from one place instead of
 * hand-set pixels. The INTERACTIVE accent deliberately stays the user's theme
 * (--interactive-accent) so custom community themes keep working. Only shadows
 * need an explicit light/dark pair; everything else maps to theme-aware
 * Obsidian vars. Dark overrides follow the same `.theme-dark` selector pattern
 * the diff tokens already use.
 *
 * The tokens live INSIDE this rule rather than in a second
 * `.obsidian-agent-sidebar` block on purpose: the Obsidian review bot's CSS
 * lint (tier 7) fails on any duplicated bare selector. */
.obsidian-agent-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    /* Allow text selection in chat (override Obsidian's default sidebar behavior) */
    user-select: text;
    -webkit-user-select: text;

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

    /* Radii */
    --vo-radius-sm: 8px;
    --vo-radius-md: 12px;
    --vo-radius-lg: 15px;
    --vo-radius-pill: 999px;

    /* Surfaces + hairlines (theme-aware via Obsidian vars) */
    --vo-surface-1: var(--background-secondary);
    --vo-surface-2: var(--background-secondary-alt);
    --vo-line: var(--background-modifier-border);
    --vo-line-strong: var(--background-modifier-border-hover, var(--background-modifier-border));

    /* Elevation. Light values here, dark overridden below. */
    --vo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
    --vo-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);

    /* Accent stays the user's theme; a soft tint for fills/backgrounds. */
    --vo-accent: var(--interactive-accent);
    --vo-accent-soft: color-mix(in srgb, var(--interactive-accent) 16%, transparent);

    /* Status colours (theme-aware; used by tool activity + step timeline) */
    --vo-status-run: var(--color-orange);
    --vo-status-ok: var(--color-green);
    --vo-status-err: var(--color-red);
}

.theme-dark .obsidian-agent-sidebar {
    --vo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --vo-shadow-md: 0 12px 30px -10px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Header */
.agent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Left padding matches the tab labels below (~12px) so the brand glyph
     * lines up flush-left with the tab strip instead of sitting indented. */
    padding: 12px 12px;
    border-bottom: 1px solid var(--background-modifier-border);
    flex-shrink: 0;
}

.agent-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-normal);
}

/* Brand glyph: pink → violet gradient rounded square carrying a diagonal
 * slash, the coloured square-slash mark from the Obsidian community listing.
 * Brand colours are fixed by design (not theme-tinted) so the mark stays
 * recognisable on every theme, the way an app icon does. */
.agent-brand-glyph {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 7px;
    background: linear-gradient(145deg, #e6547f 0%, #a24bd8 55%, #7b5cf0 100%);
    box-shadow: var(--vo-shadow-sm);
}

/* The slash, a rotated white bar, so we depend on no icon font. rotate(45deg)
 * of a vertical bar leans bottom-left → top-right, i.e. a forward slash. */
.agent-brand-glyph::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 13px;
    border-radius: 2px;
    background: #ffffff;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Wordmark: the product name in the UI face, no longer monospace. */
.agent-brand-name {
    font-family: var(--font-interface);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-normal);
}

/* Vault Health Badge (FEATURE-1901 / BUG-025 2026-04-19):
 * The badge is now a header-button styled like its neighbours. Colour comes
 * from the severity-* class and drives the lucide heart-pulse icon via
 * currentColor. Hidden via the shared `agent-u-hidden` utility when no
 * findings exist. */
.health-badge {
    cursor: pointer;
}
.health-badge .toolbar-icon {
    color: currentColor;
}
.health-badge:hover {
    opacity: 0.85;
}

/* Vault Health Repair Modal (FEATURE-1901, FIX-15) */
.vault-health-modal {
    max-width: 600px;
}
.vault-health-top-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--background-modifier-border);
    padding-bottom: 8px;
}
/* FIX-19-02-19: gleicher Tab-Standard wie die Settings (.agent-settings-tab).
   Vorher erbten die Knoepfe Obsidians Default-Button-Look (graue Pille mit
   Rahmen und Schatten), weil `.modal button` spezifischer ist als eine
   einzelne Klasse. Deshalb hier mit `.modal`-Praefix und !important auf den
   drei Eigenschaften, die der Default setzt. */
.modal .vault-health-top-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--background-modifier-border);
    padding: 0;
}
.modal button.vault-health-top-tab.vault-health-top-tab {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
    transition: color 0.1s;
}
.modal button.vault-health-top-tab:hover { color: var(--text-normal); }
.modal button.vault-health-top-tab.is-active {
    color: var(--text-normal);
    border-bottom-color: var(--interactive-accent);
    font-weight: 500;
}

/* Severity-Filter: dieselbe Sprache, eine Stufe leiser. */
.modal .vault-health-filter-row {
    display: flex;
    gap: 2px;
    margin: 12px 0 8px;
    flex-wrap: wrap;
}
.modal button.vault-health-filter-tab.vault-health-filter-tab {
    padding: 4px 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
}
.modal button.vault-health-filter-tab:hover { color: var(--text-normal); }
.modal button.vault-health-filter-tab.is-active {
    color: var(--text-normal);
    border-bottom-color: var(--interactive-accent);
    font-weight: 500;
}
.vault-health-knowledge-review-toolbar {
    display: flex;
    gap: 6px;
    margin: 8px 0 12px 0;
}
/* IMP-19-01-01: Auto-fix CTA above the severity filter pills.
   Plain text + button; no background, no border. */
.vault-health-autofix-banner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 8px 0;
}
.vault-health-autofix-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 600;
}
/* FIX-19-05-08: gleiche Groesse/Farbe wie eine setting-item-description. */
.vault-health-autofix-desc {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    line-height: 1.5;
}
.vault-health-autofix-btn {
    align-self: flex-start;
    margin-top: 6px;
}
/* IMP-19-01-02: sticky apply-bar at the top of the Findings tab.
   Stays visible while the user scrolls through long finding lists.
   FIX-19-05-08: der Apply-Knopf behaelt seine natuerliche Breite und steht
   rechtsbuendig (Settings-Look). FIX-19-09 (Review-Bot Tier 7): die zwei
   frueheren .vault-health-apply-sticky-Bloecke hier in-place gemergt. */
.vault-health-apply-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 8px 0 12px 0;
    padding: 8px 0;
    background: var(--background-primary);
    border-bottom: 1px solid var(--background-modifier-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.vault-health-apply-sticky-btn { width: auto; }
.resolve-conflict-modal .resolve-conflict-confirm,
.batch-resolve-modal .batch-resolve-actions,
.batch-resolve-modal .batch-resolve-filter-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
}

/* FIX-19-05-05: Aktionen als vertikale Liste, jede mit erklaerender Caption. */
.resolve-conflict-modal .resolve-conflict-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.resolve-conflict-modal .resolve-conflict-action {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.resolve-conflict-modal .resolve-conflict-action-caption {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    line-height: 1.4;
}
/* FIX-19-05-05: "Warum ist diese Notiz hier"-Block. */
.resolve-conflict-modal .resolve-conflict-why {
    padding: 0.6em 0.75em;
    margin: 0.5em 0;
    border-left: 3px solid var(--interactive-accent, var(--text-accent));
    background: var(--background-secondary);
    border-radius: var(--radius-s, 4px);
    line-height: 1.5;
}
.resolve-conflict-modal .resolve-conflict-why p {
    margin: 0;
}
.batch-resolve-modal .batch-resolve-filter-label {
    margin-right: 12px;
}
.batch-resolve-modal .batch-resolve-counter,
.batch-resolve-modal .batch-resolve-preview {
    margin: 8px 0;
    color: var(--text-muted);
    font-size: 13px;
}
/* FIX-19-05-07: native Setting-Zeilen im Modal (Scan/Re-Check-Toolbars).
   Kein oberer Trennstrich (sie stehen am Kopf des Tabs), etwas kompakter. */
.vault-health-modal .vault-health-inline-setting {
    border-top: none;
    padding: 8px 0 12px;
}
.vault-health-severity {
    display: inline-block;
    min-width: 54px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 6px;
}
.vault-health-severity.severity-high {
    background: var(--color-red);
    color: var(--text-on-accent);
}
.vault-health-severity.severity-medium {
    background: var(--color-orange);
    color: var(--text-on-accent);
}
.vault-health-severity.severity-low {
    background: var(--text-faint);
    color: var(--background-primary);
}
/* FIX-19-05-07: Sektionen im Settings-Register. Die Section-Kopfzeile liest
   sich wie eine agent-settings-section-Ueberschrift (Uppercase, muted,
   Unterlinie), der Rahmen bleibt fuer die Klappbarkeit dezent. */
.vault-health-section {
    margin: 16px 0 8px;
    border: none;
    border-radius: 0;
}
.vault-health-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--background-modifier-border);
}
.vault-health-section-header:hover { color: var(--text-normal); }
.vault-health-section-content {
    padding: 4px 0 8px;
}
.vault-health-tag-info {
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
}
/* Individual finding rows -- FIX-19-05-07: Zeilenrhythmus wie ein
   setting-item (Trennlinie, vertikaler Abstand), damit sich der Tab wie die
   Settings liest. Titel + Confidence links, Aktionen rechts. */
.vault-health-finding-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 2px;
    font-size: 13px;
    border-top: 1px solid var(--background-modifier-border);
}
.vault-health-section-content > .vault-health-finding-row:first-child {
    border-top: none;
}
.vault-health-finding-row input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
}
.vault-health-note-link {
    color: var(--text-accent);
    cursor: pointer;
    border-bottom: 1px dotted currentColor;
    font-weight: 500;
    line-height: 1.4;
}
.vault-health-note-link:hover {
    color: var(--text-accent-hover);
}
.vault-health-path-count {
    color: var(--text-muted);
    font-size: 11px;
}
/* FIX-19-05-08: die Begruendung als setting-item-description-Register,
   flush unter der Zeile (kein fester Einzug, da die Review-Zeilen keine
   Checkbox haben und ein 26px-Versatz dort verrutschte). */
.vault-health-fix-preview {
    padding: 0 0 8px 0;
    font-size: var(--font-ui-smaller);
    line-height: 1.5;
    color: var(--text-muted);
}
.vault-health-finding-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
/* Primaeraktion "Fix with agent": normaler CTA-Knopf im Settings-Format. */
.vault-health-fix-with-agent-btn {
    font-size: var(--font-ui-smaller);
}
/* Sekundaeres Ausblenden/Discuss-Icon: exakt das .agent-info-btn-Register der
   Settings -- KEIN Hintergrund, kein Rahmen, auch nicht im Hover, nur die
   Farbe wechselt. Doppelte Klasse (Spezifitaet 0,2,0) schlaegt Obsidians
   `.modal button`-Default OHNE !important, genau wie bei .agent-info-btn. */
.vault-health-icon-btn.vault-health-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--text-faint);
    line-height: 0;
    border-radius: 0;
    transition: color 0.15s ease;
}
.vault-health-icon-btn.vault-health-icon-btn:hover {
    color: var(--text-normal);
    background: transparent;
    background-color: transparent;
    box-shadow: none;
}
.vault-health-icon-btn svg { width: 16px; height: 16px; }
.vault-health-reset-btn {
    font-size: 12px;
    color: var(--text-muted);
}
.vault-health-search-row {
    margin-bottom: 8px;
}
.vault-health-search-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-primary);
    font-size: 13px;
}
.vault-health-dismissed-list {
    max-height: 300px;
    overflow-y: auto;
}
.vault-health-empty {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}
/* Buttons + results */
.vault-health-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
}
.vault-health-progress {
    color: var(--text-muted);
    font-style: italic;
}
.vault-health-results {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}
.vault-health-results li {
    padding: 3px 0;
    font-size: 13px;
}
.vault-health-remaining {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}
.vault-health-error {
    color: var(--color-red);
    font-size: 12px;
}
.health-badge.severity-high {
    color: var(--color-red);
}
.health-badge.severity-medium {
    color: var(--color-orange);
}
.health-badge.severity-low {
    color: var(--text-muted);
}

.agent-meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* Chat Wrapper (contains messages + history panel overlay) */
.chat-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* Chat Messages (compact layout: padding/gap merged from former duplicate
   "Compact chat" section so the selector appears only once) */
.chat-messages {
    height: 100%;
    overflow-y: auto;
    padding: var(--vo-space-3) var(--vo-space-4);
    padding-bottom: 140px;  /* Safety margin: Input-Container ist ~120px hoch */
    display: flex;
    flex-direction: column;
    gap: var(--vo-space-3);
}

.message {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message-content {
    padding: 7px 10px;
    border-radius: var(--vo-radius-sm);
    max-width: 100%;
    line-height: 1.55;
    font-size: 14px;
    user-select: text;
    cursor: text;
    transition: opacity 150ms ease-out;
}

/* v2.10.4: text selection in chat consolidated into one ruleset.
   The view container already declares `user-select: text` (line 24);
   the chat-specific selectors only need to keep that on through the
   message subtree. Specificity is high enough to win over Obsidian's
   default `.sidebar-view * { user-select: none }` without !important.

   User feedback 2026-06-24: inline chat bubbles need the same rule.
   When the panel mounts as a CM6 block widget the surrounding
   `.cm-content` propagates the editor's `user-select: text` to the
   widget, but Obsidian themes occasionally reset it on nested
   markdown-rendered children. Re-declaring it on the inline-panel
   bubble + descendants restores copy-from-response. */
.obsidian-agent-sidebar .message,
.obsidian-agent-sidebar .message-content,
.obsidian-agent-sidebar .user-message .message-content,
.obsidian-agent-sidebar .user-message .message-content *,
.obsidian-agent-sidebar .assistant-message .message-content,
.obsidian-agent-sidebar .assistant-message .message-content *,
.agent-inline-panel__body,
.agent-inline-panel__body *,
.agent-inline-panel__bubble,
.agent-inline-panel__bubble * {
    user-select: text;
    -webkit-user-select: text;
    cursor: auto;
}

.message-content h1 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 20px;
    font-weight: 700;
    border-bottom: 1px solid var(--background-modifier-border);
    padding-bottom: 6px;
}

.message-content h2 {
    margin-top: 18px;
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 600;
    border-bottom: 1px solid var(--background-modifier-border);
    padding-bottom: 4px;
}

.message-content h3 {
    margin-top: 16px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
}

.message-content h4 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-normal);
}

/* Tables */
.message-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}

.message-content th,
.message-content td {
    border: 1px solid var(--background-modifier-border);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}

.message-content th {
    background: var(--background-secondary);
    font-weight: 600;
}

.message-content tr:nth-child(even) {
    background: var(--background-secondary-alt);
}

/* Callouts — smaller/subtler in chat context */
.message-content .callout {
    margin: 10px 0 4px;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    background: var(--background-secondary);
    border-left: 3px solid var(--text-faint);
}

.message-content .callout .callout-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.message-content .callout .callout-icon {
    width: 14px;
    height: 14px;
}

.message-content p {
    margin-bottom: 8px;
}

.message-content ul,
.message-content ol {
    margin-left: 0;
    padding-left: 16px;
    margin-bottom: 8px;
}

.message-content li {
    margin-bottom: 4px;
}

/* Keeping the question reachable is handled by the pinned-question BAR (see
 * .vo-pinned-question), not by position: sticky on the bubble. Sticky was
 * shipped first and failed in the field for a reason worth recording: the
 * Copilot plugin ships an unscoped `.message{position:relative}` rule that
 * outranks a same-specificity `.user-message` sticky purely by stylesheet
 * order -- and, independently, flat sticky siblings would all pile up at
 * top: 0 because they share one containing block. An overlay bar has neither
 * problem. */
.user-message {
    align-items: flex-end;
}

/* The prompt keeps its bubble (it is the marker the answer hangs off), but a
 * neutral, quiet one. It used to be tinted with ~20% of the theme accent,
 * which made the question shout louder than the answer it introduces. The
 * answer stays unboxed and full width, so the two never compete. */
.user-message .message-content {
    /* A very light grey box, mixed from the text colour rather than taken from
     * a surface token: the chat ground IS --background-secondary, so a surface
     * token rendered the bubble invisible. Mixing against the text colour keeps
     * it a faint tint of the ground in light AND dark themes.
     * The text itself stays --text-normal; muted made the question read like a
     * disabled control next to the full-strength answer. */
    background: color-mix(in srgb, var(--text-normal) 7%, transparent);
    color: var(--text-normal);
    align-self: flex-end;
    max-width: 85%;
    border-radius: 12px 12px 4px 12px;
    padding: 7px 11px;
    font-size: 13px;
    cursor: text;
}

/* Pinned question bar: floats at the top of the chat while the CURRENT
 * question is scrolled out of view, so the prompt stays reachable during a
 * long answer (Claude-Code pattern). One line with ellipsis; click toggles
 * the full text. Lives in .chat-wrapper (position: relative), z-index below
 * the history panel's 10. Styled as a floating card on --background-primary,
 * the same treatment the active tab uses, so it reads as deliberately ON
 * TOP of the chat rather than as a band trying to blend in. */
.vo-pinned-question {
    position: absolute;
    top: var(--vo-space-2);
    left: var(--vo-space-4);
    right: var(--vo-space-4);
    z-index: 3;
    padding: 6px 12px;
    background: var(--background-primary);
    border: 1px solid var(--vo-line);
    border-radius: var(--vo-radius-md);
    box-shadow: var(--vo-shadow-md);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    font-size: 13px;
    color: var(--text-normal);
}

.vo-pinned-question-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Expanded: full question, wrapped; very long prompts scroll inside the bar
 * instead of covering the whole conversation. */
.vo-pinned-question.vo-pinned-question-expanded .vo-pinned-question-text {
    white-space: normal;
    max-height: 12em;
    overflow-y: auto;
}

/* FEAT-24-08 / ADR-114 Steering-Hook: distinct visual for mid-run
   corrections so the user can spot them in the chat history and tell
   apart queued vs delivered vs discarded. */
.chat-message-steering {
    align-items: flex-end;
}

.chat-message-steering .steering-marker {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    align-self: flex-end;
    padding-right: 4px;
}

.chat-message-steering .steering-marker-icon {
    display: inline-flex;
    align-items: center;
    --icon-size: 12px;
}

.chat-message-steering .steering-marker-icon svg {
    width: 12px;
    height: 12px;
}

.chat-message-steering .message-content {
    border-left: 3px solid var(--interactive-accent-hover, var(--interactive-accent));
    background: var(--background-modifier-form-field, var(--background-secondary));
    color: var(--text-normal);
    border-radius: 12px 12px 4px 12px;
}

.chat-message-steering .steering-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    align-self: flex-end;
    padding-right: 4px;
}

.chat-message-steering .steering-footer-icon {
    display: inline-flex;
    align-items: center;
}

.chat-message-steering .steering-footer-icon svg {
    width: 12px;
    height: 12px;
}

.chat-message-steering.steering-pending .steering-footer {
    color: var(--text-muted);
    font-style: italic;
}

.chat-message-steering.steering-delivered .steering-footer {
    color: var(--text-success, var(--color-green));
}

.chat-message-steering.steering-discarded .message-content {
    opacity: 0.6;
    border-left-color: var(--text-error, var(--color-red));
}

.chat-message-steering.steering-discarded .steering-footer {
    color: var(--text-error, var(--color-red));
}

.assistant-message .message-content {
    background: transparent;
    border: none;
    color: var(--text-normal);
    padding: 2px 0 4px;
    font-size: 14px;
    cursor: text;
}

/* Reusable brand mark: the pink → violet rounded square carrying the slash,
 * the same square-slash used in the sidebar header and the community listing.
 * A floating marker in the message gutter was tried first and had to be
 * dropped: absolutely positioned beside a panel, it always collided with that
 * panel's top-left corner. The mark now lives INSIDE the surfaces it belongs
 * to (currently the plan panel header), which makes the collision structurally
 * impossible. Sized by the element it is applied to via --vo-mark-size.
 *
 * Drawn in CSS on purpose: DOMPurify strips <svg> when a chat is rehydrated
 * from history, so an icon-font/SVG mark would vanish in reloaded chats. */
.vo-brand-mark {
    --vo-mark-size: 16px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: var(--vo-mark-size);
    height: var(--vo-mark-size);
    border-radius: calc(var(--vo-mark-size) / 3.6);
    background: linear-gradient(145deg, #e6547f 0%, #a24bd8 55%, #7b5cf0 100%);
}

/* The slash: a thin bar, centred then rotated. A gradient colour-band was
 * tried first and renders as a chunky diagonal split of the square at these
 * sizes, not as a slash; a fixed bar stays crisp at any size. */
.vo-brand-mark::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: calc(var(--vo-mark-size) * 0.58);
    margin-left: -1px;
    margin-top: calc(var(--vo-mark-size) * -0.29);
    border-radius: 1px;
    background: #ffffff;
    transform: rotate(45deg);
}

/* Live token meter: ticks the estimated output while the model streams
 * (Claude-Code-style count-up). The exact per-turn total still lands in the
 * footer via TaskMonitor; this is the in-flight estimate for the current turn. */
.vo-live-meter {
    display: inline-flex;
    align-items: center;
    gap: var(--vo-space-1);
    width: fit-content;
    margin: 2px 0 6px;
    padding: 2px 8px;
    border-radius: var(--vo-radius-pill);
    background: var(--vo-surface-2);
    color: var(--text-muted);
    font-family: var(--font-monospace);
    font-size: 11px;
}

/* Activity animation: the mark's own slash spins inside the icon box. More
 * distinctive than a generic spinner, and it ties the running state to the
 * product's mark. Only the bar rotates; the gradient square stays put. */
.vo-live-meter-icon {
    --vo-mark-size: 14px;
}

.vo-live-meter-icon::before {
    animation: vo-slash-spin 1.6s linear infinite;
}

/* Starts at the mark's resting 45deg so there is no jump when it begins. */
@keyframes vo-slash-spin {
    from { transform: rotate(45deg); }
    to   { transform: rotate(405deg); }
}

.vo-live-meter-label {
    color: var(--text-muted);
}

/* Token count, secondary to the activity word. Hidden until the model has
 * produced output, so no stray separator shows during the first tool phase.
 * Tabular figures keep the digits from jittering as the number climbs. */
.vo-live-meter-tokens {
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.vo-live-meter-tokens:empty {
    display: none;
}

.vo-live-meter-tokens::before {
    content: "\00b7";
    margin: 0 4px;
}

@media (prefers-reduced-motion: reduce) {
    .vo-live-meter-icon::before { animation: none; }
}

.message-section {
    margin-top: 12px;
}

.message-cta {
    margin-top: 16px;
    margin-bottom: 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* Tool Cards */
.tool-message {
    background: var(--background-secondary-alt);
    border-left: 3px solid var(--interactive-accent);
}

.tool-card {
    padding: 12px;
}

.tool-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.tool-target {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-monospace);
}

.tool-status {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.tool-status.approved {
    color: var(--color-green);
}

/* Approval Buttons */
.approval-buttons {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.approve-btn {
    flex: 1;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    background: var(--color-green);
    color: white;
}

.approve-btn:hover {
    opacity: 0.8;
}

.deny-btn {
    flex: 1;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    background: var(--color-red);
    color: white;
}

.deny-btn:hover {
    opacity: 0.8;
}

/* Checkpoint Indicators */
.checkpoint-message {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 4px 8px;
    background: var(--background-secondary);
    border-radius: 4px;
}

.checkpoint-indicator {
    font-family: var(--font-monospace);
}

/* =============================================================== */
/* First-Run Wizard Modal (Phase 2.3)                              */
/* =============================================================== */

.vault-operator-wizard .wizard-header {
    border-bottom: 1px solid var(--background-modifier-border);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.vault-operator-wizard .wizard-header h2 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-normal);
}

.vault-operator-wizard .wizard-header .wizard-step-counter {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vault-operator-wizard .wizard-progress {
    display: flex;
    gap: 4px;
    margin: 0 0 20px 0;
}

.vault-operator-wizard .wizard-progress-segment {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--background-modifier-border);
    transition: background-color 0.15s ease;
}

.vault-operator-wizard .wizard-progress-segment.active {
    background: var(--interactive-accent);
}

.vault-operator-wizard .wizard-body {
    min-height: 320px;
    padding: 0 0 8px 0;
}

.vault-operator-wizard .wizard-body p {
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.vault-operator-wizard .wizard-section {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 20px 0 8px;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--background-modifier-border);
}

.vault-operator-wizard .wizard-section:first-child {
    margin-top: 0;
}

.vault-operator-wizard .wizard-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 0 16px 0;
    border-radius: 4px;
    background: var(--background-secondary);
    font-size: 13px;
}

.vault-operator-wizard .wizard-status-icon {
    flex-shrink: 0;
    display: flex;
    color: var(--text-muted);
}

.vault-operator-wizard .wizard-status.is-ok .wizard-status-icon {
    color: var(--color-green);
}

.vault-operator-wizard .wizard-status.is-empty .wizard-status-icon {
    color: var(--text-muted);
}

.vault-operator-wizard .wizard-status strong {
    font-weight: 600;
    color: var(--text-normal);
}

.vault-operator-wizard .wizard-provider-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    margin: 8px 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-primary);
}

.vault-operator-wizard .wizard-provider-card.is-recommended {
    border-color: var(--interactive-accent);
    border-width: 2px;
    padding: 11px 13px;
}

.vault-operator-wizard .wizard-provider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.vault-operator-wizard .wizard-provider-name {
    font-weight: 600;
    color: var(--text-normal);
}

.vault-operator-wizard .wizard-provider-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 10px;
    background: var(--background-modifier-border);
    color: var(--text-muted);
}

.vault-operator-wizard .wizard-provider-badge.is-free {
    background: color-mix(in srgb, var(--color-green) 15%, transparent);
    color: var(--color-green);
}

.vault-operator-wizard .wizard-provider-badge.is-paid {
    background: var(--background-modifier-border);
    color: var(--text-muted);
}

.vault-operator-wizard .wizard-provider-badge.is-recommended {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

.vault-operator-wizard .wizard-provider-link {
    font-size: 12px;
    color: var(--interactive-accent);
    text-decoration: none;
}

.vault-operator-wizard .wizard-provider-link:hover {
    text-decoration: underline;
}

.vault-operator-wizard .wizard-provider-note {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.vault-operator-wizard .wizard-action-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.vault-operator-wizard .wizard-radio-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.vault-operator-wizard .wizard-radio-row input[type="radio"] {
    margin-top: 4px;
}

.vault-operator-wizard .wizard-radio-row label {
    flex: 1;
    cursor: pointer;
}

.vault-operator-wizard .wizard-keyrow {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.vault-operator-wizard .wizard-keyrow input {
    flex: 1;
}

.vault-operator-wizard .wizard-asset-status {
    font-size: 12px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vault-operator-wizard .wizard-asset-status.is-installed { color: var(--color-green); }
.vault-operator-wizard .wizard-asset-status.is-outdated  { color: var(--color-orange); }
.vault-operator-wizard .wizard-asset-status.is-missing   { color: var(--text-muted); }
.vault-operator-wizard .wizard-asset-status.is-error     { color: var(--color-red); }

.vault-operator-wizard .wizard-asset-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.vault-operator-wizard .wizard-skip-list {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-orange) 8%, var(--background-primary));
    border-left: 3px solid var(--color-orange);
    font-size: 12px;
}

.vault-operator-wizard .wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--background-modifier-border);
}

.vault-operator-wizard .wizard-footer-left,
.vault-operator-wizard .wizard-footer-right {
    display: flex;
    gap: 6px;
}

/* AI Disclaimer (sits below the input area as a single small centred line) */
.chat-ai-disclaimer {
    flex-shrink: 0;
    text-align: center;
    font-size: 9px;
    line-height: 1.2;
    color: var(--text-faint);
    padding: 2px 12px 3px 12px;
    background: var(--background-primary);
}

/* Chat Input Container (Kilo Code pattern) */
.chat-input-container {
    flex-shrink: 0;
    padding: 12px;
    border-top: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    position: relative;
}

/* Unified bordered wrapper (like Kilo Code) */
.chat-input-wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--vo-line-strong);
    border-radius: var(--vo-radius-lg);
    background: var(--input-background);
    overflow: hidden;
    box-shadow: var(--vo-shadow-md);
}

/* Prevent themes from adding a focus ring/border-color change that creates a
   visible line between the chips area and the textarea. Class-repetition
   bumps specificity (0,3,0) so we don't need !important. */
.chat-input-wrapper.chat-input-wrapper:focus-within {
    border-color: var(--background-modifier-border);
    outline: none;
    box-shadow: none;
}

/* Textarea */
.chat-textarea {
    width: 100%;
    height: var(--agent-textarea-h, auto);
    padding: 12px;
    border: none;
    background: transparent;
    resize: none;
    font-family: var(--font-text);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-normal);
    min-height: 72px;
    max-height: 360px;
    overflow-y: auto;
}

.chat-textarea:focus {
    outline: none;
}

.chat-textarea::placeholder {
    color: var(--text-muted);
}

/* Chat Toolbar (integrated in input wrapper) */
.chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--vo-space-2) var(--vo-space-3);
    border-top: 1px solid var(--vo-line);
    background: transparent;
}

.chat-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Context chips inside input area (top of input wrapper) */
.chat-context-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px 0;
    border-bottom: none;
}

.chat-context-chips:empty {
    display: none;
}

.chat-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 6px;
    background: var(--background-modifier-border);
    border-radius: 100px;
    font-size: 11px;
    font-family: var(--font-interface);
    color: var(--text-muted);
    max-width: 260px;
    overflow: hidden;
    cursor: default;
}

.context-chip-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-faint);
}

.context-chip-icon svg {
    width: 10px;
    height: 10px;
}

.context-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-chip-remove {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 1px;
    color: var(--text-faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s;
    line-height: 1;
}

.chat-context-chip:hover .context-chip-remove {
    opacity: 1;
}

.context-chip-remove svg {
    width: 9px;
    height: 9px;
}

/* IMP-02-02-01: the forced-workflow chip is accented so it reads apart from
   the neutral active-file context chip. */
.chat-forced-workflow-chip {
    background: var(--background-modifier-hover);
    color: var(--text-accent);
    cursor: default;
}

.chat-forced-workflow-chip .context-chip-icon {
    color: var(--text-accent);
}

/* Toolbar Buttons -- borderless by default, modern flat look. The send
 * button is the single exception and re-introduces a border below.
 * Class repetition (.toolbar-button.toolbar-button) bumps selector
 * specificity to (0,2,0) so we overrule Obsidian's default button
 * `box-shadow` / `border` from theme button selectors without using
 * !important. */
.toolbar-button.toolbar-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: none;
    border-radius: 4px;
    background: none;
    box-shadow: none;
    outline: none;
    min-height: 0;
    height: auto;
    color: var(--text-normal);
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s, color 0.15s;
}

.toolbar-button.toolbar-button:hover {
    background: var(--background-modifier-hover);
    box-shadow: none;
}

.toolbar-button.toolbar-button:focus,
.toolbar-button.toolbar-button:focus-visible {
    box-shadow: none;
    outline: none;
}

/* Ghost modifier kept for backward compatibility -- effectively the same
 * look as the base button now, just muted text colour. */
.toolbar-button.toolbar-ghost {
    color: var(--text-muted);
}

.toolbar-button.toolbar-ghost:hover {
    color: var(--text-normal);
}

/* Web search toggle — active state */
.web-toggle-button.web-toggle-active {
    color: var(--interactive-accent);
}
.web-toggle-button.web-toggle-active:hover {
    color: var(--interactive-accent-hover);
}

.toolbar-icon {
    display: flex;
    align-items: center;
}

.toolbar-icon svg {
    width: 16px;
    height: 16px;
}

/* Mode Button — no border, icon + label + chevron, compact */
.mode-button {
    min-width: unset;
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 3px 5px;
    font-size: 11px;
}

.mode-button:hover {
    background: var(--background-modifier-hover);
    border: none;
    color: var(--text-normal);
}

.mode-label {
    font-weight: 500;
    font-size: 11px;
}

.mode-chevron {
    display: flex;
    align-items: center;
    margin-left: 1px;
}

.mode-chevron svg {
    width: 10px;
    height: 10px;
}

/* Send Button -- the one toolbar button that keeps a border, by design.
 * Sits visually apart from the borderless left-side cluster. Class repetition
 * (.toolbar-button.send-button.send-button) bumps specificity to (0,3,0) so
 * the bordered look wins over the borderless .toolbar-button.toolbar-button
 * base without !important. */
.toolbar-button.send-button.send-button {
    background: var(--vo-accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: var(--vo-radius-pill);
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
}

.toolbar-button.send-button.send-button:hover {
    background: var(--interactive-accent-hover);
    color: var(--text-on-accent);
    border: none;
}

.toolbar-button.send-button:active {
    opacity: 0.7;
}

/* FEAT-33-12: Send-to-Sidebar button -- sits directly left of the Send
 * button in the inline composer. Borderless, matches the toolbar idiom of
 * the left-side cluster. The arrow-right-to-line icon makes the affordance
 * read as "ship this thread off to the sidebar". */
.toolbar-button.send-to-sidebar-button {
    background: none;
    color: var(--text-muted);
    padding: 3px 6px;
}
.toolbar-button.send-to-sidebar-button:hover {
    color: var(--interactive-accent);
}

/* Stop Button -- replaces the send button while a task is running, so it
 * inherits the same bordered shape for positional continuity. Same
 * specificity bump pattern as .send-button. */
.toolbar-button.stop-button.stop-button {
    background: none;
    color: var(--text-muted);
    border: 1px solid var(--vo-line-strong);
    border-radius: var(--vo-radius-pill);
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
}

.toolbar-button.stop-button.stop-button:hover {
    background: var(--background-modifier-hover);
    color: var(--color-red);
    border-color: var(--color-red);
}

/* Streaming indicator (for Q&A mode, no tools) */
.message-streaming .message-content::after {
    content: '▋';
    animation: blink 1s step-end infinite;
    color: var(--text-faint);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Header right (new chat button) */
.agent-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Header buttons -- same borderless treatment as toolbar buttons. Class
 * repetition (.header-button.header-button) bumps specificity to (0,2,0) so
 * we beat the native <button> styling from the Obsidian theme without
 * !important. */
.header-button.header-button {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
    min-height: 0;
    height: auto;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.1s, background 0.1s;
}

.header-button.header-button:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
    box-shadow: none;
}

.header-button.header-button:focus,
.header-button.header-button:focus-visible {
    box-shadow: none;
    outline: none;
}

.header-button svg {
    width: 16px;
    height: 16px;
}

/* Browser-style chat nav arrows: bare icons, no chrome, set apart from
 * the rest of the header controls. Modifier-only, additive on top of
 * .header-button so the existing layout stays untouched. */
.header-button.header-button--nav {
    padding: 0;
    background: none;
    border-radius: 0;
}

.header-button.header-button--nav:hover:not(:disabled) {
    background: none;
}

.header-button.header-button--nav:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Spacing: separate the nav cluster (now sitting at the far right of
 * the header) from the primary controls to its left. Targets the FIRST
 * nav arrow that immediately follows a non-nav header button. */
.header-button:not(.header-button--nav) + .header-button.header-button--nav {
    margin-left: 10px;
}

/* SoakReportModal: a wide read-only textarea shows the JSON snapshot
 * so the user can manually copy or save to vault. Modal owns focus
 * which makes clipboard.writeText reliable. */
.vault-operator-soak-report-modal .vault-operator-soak-report-textarea {
    width: 100%;
    min-height: 360px;
    font-family: var(--font-monospace);
    font-size: 12px;
    line-height: 1.45;
    white-space: pre;
    resize: vertical;
}

/* Tool call — borderless, subtle rows (Kilo Code style) */
.tool-call-details {
    margin: 1px 0;
    font-size: 11px;
    overflow: hidden;
    /* Redesign: tool steps read calmly but are no longer half-hidden. The old
     * opacity:.65 made the agent's actual work near-invisible; muted colours
     * carry the "quiet" now, full opacity carries the legibility. */
    opacity: 1;
    transition: opacity 100ms ease-out;
}

.tool-call-details:hover {
    opacity: 1;
}

.tool-call-details[open] {
    opacity: 1;
}

.tool-call-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    cursor: pointer;
    color: var(--text-muted);
    list-style: none;
    user-select: none;
    font-size: 11px;
}

.tool-call-summary::-webkit-details-marker {
    display: none;
}

/* Each step icon is a node ON the thread line: a fixed 14px box (centre x=13,
 * matching .agent-steps-body::before) whose opaque background masks the line
 * so the step reads as a point on it, not a row crossed by it. The fixed width
 * matters twice: it holds the node geometry, and it keeps the row aligned in
 * REHYDRATED chats, where DOMPurify strips the <svg> and an auto-width span
 * would collapse to 0 and drag the row left. */
.tool-call-summary .tool-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--background-primary);
}

.tool-call-summary .tool-icon svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.tool-call-summary .tool-name {
    font-family: var(--font-monospace);
    font-weight: normal;
    margin-bottom: 0;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
}

.tool-call-summary .tool-brief-param {
    flex: 1;
    font-family: var(--font-monospace);
    font-size: 10px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 2px;
}

.tool-call-summary .tool-time {
    font-size: 10px;
    color: var(--text-faint);
    flex-shrink: 0;
    margin-left: 6px;
}

.tool-call-summary .tool-status {
    flex-shrink: 0;
    font-size: 10px;
    width: 10px;
    text-align: center;
    /* Reset the 8px top margin the legacy .tool-card rule sets on .tool-status.
     * In this flex row it pushed the status dot below the text baseline; only
     * visible as slight sloppiness before, plainly wrong against the thread. */
    margin-top: 0;
}

.tool-call-summary .tool-running::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-faint);
    animation: tool-pulse 1s ease-in-out infinite;
}

@keyframes tool-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.tool-call-summary .tool-done { color: var(--color-green); }
.tool-call-summary .tool-error { color: var(--color-red); }

.tool-diff-badge {
    font-size: 11px;
    color: var(--color-green);
    background: var(--background-modifier-hover);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    font-family: var(--font-monospace);
}

/* .context-condensed-badge: superseded by the later definition near the
   Timeline section. Dead in cascade order; kept only as a placeholder
   comment so the rule is defined exactly once in this file. */

.tool-call-input,
.tool-call-output {
    border-top: 1px solid var(--background-modifier-border);
    padding: 4px 8px;
}

/* Grouped tool rows — compact list under a single collapsible header */
.tool-group-body {
    padding: 2px 4px 4px 24px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tool-group-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 1px 0;
    font-size: 11px;
    color: var(--text-faint);
    transition: color 100ms ease-out;
}

.tool-group-item .tool-item-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.tool-group-item .tool-item-icon svg { width: 10px; height: 10px; }
.tool-group-item.item-done { color: var(--text-muted); }
.tool-group-item.item-done .tool-item-icon { color: var(--color-green); }
.tool-group-item.item-error { color: var(--text-normal); }
.tool-group-item.item-error .tool-item-icon { color: var(--color-red); }

.tool-item-brief {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
    font-family: var(--font-monospace);
}

.tool-call-input pre,
.tool-call-output pre {
    margin: 0;
    font-family: var(--font-monospace);
    font-size: 11px;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-all;
}

.tool-status.tool-running {
    color: var(--text-faint);
}

.tool-status.tool-done {
    color: var(--color-green);
}

.tool-status.tool-error {
    color: var(--color-red);
}

/* Token usage footer (Feature 6) */
.message-footer {
    padding: 4px 12px 0;
    font-size: 10px;
    color: var(--text-faint);
    font-family: var(--font-interface);
    text-align: right;
}

/* FIX-24-05-06: the cost line owns this child of the footer, so the
   condensation feedback and the condense badges beside it survive the write.
   Own row below any badge, alignment and colour inherited from the footer. */
.message-footer .vo-cost-line {
    display: block;
    margin-top: 2px;
}

/* FEAT-24-05: cost footer crossed the warn threshold */
.message-footer.agent-cost-warn {
    color: var(--text-warning, var(--color-orange));
    font-weight: var(--font-semibold, 600);
}

/* Error row inside steps block (Feature 5) */
.tool-step-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    margin: 2px 0;
    border-radius: 4px;
    background: var(--background-modifier-error);
}

.tool-step-error .tool-step-icon {
    flex-shrink: 0;
    color: var(--text-error);
    display: flex;
    align-items: center;
}

.tool-step-error .tool-step-icon svg {
    width: 14px;
    height: 14px;
}

.tool-step-error .tool-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tool-step-error .error-title {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-error);
}

.tool-step-error .error-detail {
    font-size: 11px;
    color: var(--text-muted);
}

/* Markdown content reset for chat bubbles */
.assistant-message .message-content p:last-child {
    margin-bottom: 0;
}

.assistant-message .message-content pre {
    background: var(--code-background);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    overflow-x: auto;
}

.assistant-message .message-content code {
    font-family: var(--font-monospace);
    font-size: 12px;
    background: var(--code-background);
    padding: 1px 4px;
    border-radius: 3px;
}

/* Disabled textarea during generation */
.chat-textarea:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Scrollbar */
.chat-messages::-webkit-scrollbar,
.chat-textarea::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track,
.chat-textarea::-webkit-scrollbar-track {
    background: var(--background-secondary);
}

.chat-messages::-webkit-scrollbar-thumb,
.chat-textarea::-webkit-scrollbar-thumb {
    background: var(--background-modifier-border);
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.chat-textarea::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}


/* ── Model button (toolbar) — no border, label + chevron, compact ───────── */
.model-button {
    flex-shrink: 0;
    background: var(--vo-surface-2);
    border: none;
    border-radius: var(--vo-radius-pill);
    color: var(--text-muted);
    padding: 4px 10px;
    font-size: 11px;
}

.model-button:hover {
    background: var(--background-modifier-hover);
    border: none;
    color: var(--text-normal);
}

.model-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.model-label {
    white-space: nowrap;
    font-size: 11px;
}

/* ── Provider badge ────────────────────────────────────────────────────── */
.provider-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    background: var(--provider-bg, #607d8b);
}

/* ── Settings tab navigation ───────────────────────────────────────────── */
.agent-settings {
    padding-top: 0;
}

.agent-settings-nav {
    display: flex;
    gap: 2px;
    padding: 12px 0 0;
    border-bottom: 1px solid var(--background-modifier-border);
}

.agent-settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
    transition: color 0.1s;
}

.agent-settings-tab-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.agent-settings-tab-icon svg { width: 14px; height: 14px; }

.agent-settings-tab:hover { color: var(--text-normal); }

.agent-settings-tab.active {
    color: var(--text-normal);
    border-bottom-color: var(--interactive-accent);
    font-weight: 500;
}

.agent-settings-coffee-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-bottom: 2px;
}

.agent-settings-coffee-btn .bmc-header-btn {
    height: 26px;
    width: auto;
    display: block;
    border-radius: 4px;
}

/* ── Sub-tab navigation ──────────────────────────────────────────────── */
.agent-settings-subnav {
    display: flex;
    /* FEAT-30-07: bei Platzmangel bricht die Leiste zwischen Tabs um,
     * statt rechts aus dem Panel zu laufen. */
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px 0 0;
    border-bottom: 1px solid var(--background-modifier-border);
    margin-bottom: 24px;
}

.agent-settings-subtab {
    padding: 4px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.1s;
    border-radius: 4px 4px 0 0;
    /* FEAT-30-07: ein Tab-Label bricht nie innerhalb des Tabs um. */
    white-space: nowrap;
}
.agent-settings-subtab:hover { color: var(--text-normal); }

.agent-settings-subtab.active {
    color: var(--text-normal);
    border-bottom-color: var(--interactive-accent);
    font-weight: 500;
}

.agent-semantic-status {
    margin-top: 4px;
    font-weight: 500;
    color: var(--text-muted);
}

/* ── Risk note for beta settings ────────────────────────────────────── */
.setting-risk-note {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-error);
}

/* ── Excluded folder picker ─────────────────────────────────────────── */
.excluded-folder-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    margin-top: 2px;
    padding-bottom: 10px;
}

.excluded-folder-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--background-modifier-hover);
    font-size: 11px;
    color: var(--text-muted);
}

.excluded-folder-remove {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: var(--text-faint);
}
.excluded-folder-remove:hover { color: var(--text-error); }
.excluded-folder-remove svg { width: 10px; height: 10px; }

.excluded-folder-input {
    width: 100%;
    font-size: 12px;
}

/* ── "Coming soon" empty state ───────────────────────────────────────── */
.agent-settings-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    color: var(--text-muted);
    text-align: center;
}

.agent-settings-coming-soon-icon {
    display: flex;
    align-items: center;
    opacity: 0.35;
}

.agent-settings-coming-soon-icon svg { width: 32px; height: 32px; }

.agent-settings-coming-soon-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-normal);
}

.agent-settings-coming-soon-desc {
    font-size: 12px;
    line-height: 1.5;
    max-width: 280px;
}

.agent-settings-content {
    padding: 12px 0;
}

/* ── Model table ────────────────────────────────────────────────────────── */
.model-table {
    width: 100%;
    font-size: 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

/* Models table: name | provider | key | enable-toggle | default-radio | actions */
.model-row {
    display: grid;
    grid-template-columns: 1fr 100px 36px 75px 66px 48px;
    align-items: center;
    padding: 5px 8px;
    gap: 4px;
    border-bottom: 1px solid var(--background-modifier-border);
}

/* Embeddings table: name | provider | key | active-radio | actions */
.embedding-table .model-row {
    grid-template-columns: 1fr 100px 36px 66px 48px;
}

/* EPIC-26 / FEAT-26-03 -- Providers table: name | key | enable | default | actions */
.providers-table .model-row {
    grid-template-columns: 1fr 36px 75px 66px 88px;
}

/* Two-line provider row: large label + tier summary sub-line */
.mc-name-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-row:last-child { border-bottom: none; }

.model-row-header {
    background: var(--background-secondary);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    padding: 5px 8px;
    line-height: 1.3;
}

.model-row-active .mc-name-text { color: var(--interactive-accent); }

.model-row-active .mc-name {
    border-left: 2px solid var(--interactive-accent);
    padding-left: 6px;
}

.model-row:not(.model-row-header):hover { background: var(--background-modifier-hover); }
.model-row-disabled { opacity: 0.5; }

.mc-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.mc-name-text { font-size: 12px; color: var(--text-normal); }
.mc-provider { overflow: hidden; }

/* Header cells - allow wrapping for longer localized texts */
.model-row-header .mc-enable,
.model-row-header .mc-default {
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
}

.mc-key { display: flex; align-items: center; justify-content: center; }
.mc-key svg { width: 12px; height: 12px; }
.mc-key-ok { color: var(--color-green); }
.mc-key-missing { color: var(--text-faint); }

/* ── Enable column — small toggle switch ─────── */
.mc-enable { display: flex; justify-content: center; align-items: center; }

.mc-toggle {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}
/* Spezifitaet 0,1,2 -- gleicht Theme-Selektoren wie
 * `.workspace-leaf input[type='checkbox']` aus. Ohne den `[type='checkbox']`
 * Anker rendert Obsidian seinen Default-iOS-Toggle on top auf unsere
 * Custom-Pille (Doppel-Toggle). `appearance: none` plus explizite
 * background/box-shadow/border-Resets entkoppeln den input von jedem
 * Theme-Override. */
.mc-toggle input[type='checkbox'] {
    appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    position: absolute;
    pointer-events: none;
}
.mc-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: var(--background-modifier-border);
    transition: background 0.18s;
}
.mc-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--background-primary);
    transition: transform 0.18s;
}
.mc-toggle input:checked + .mc-toggle-track {
    background: var(--interactive-accent);
}
.mc-toggle input:checked + .mc-toggle-track::after {
    transform: translateX(12px);
}

/* ── Radio buttons (Models "Default" + Embeddings "Active") ── */
.mc-default { display: flex; justify-content: center; align-items: center; }
.mc-default input[type='radio'],
.mc-enable input[type='radio'] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-faint);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.mc-default input[type='radio']::before,
.mc-enable input[type='radio']::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--interactive-accent);
    transition: transform 0.15s;
}
.mc-default input[type='radio']:checked,
.mc-enable input[type='radio']:checked {
    border-color: var(--interactive-accent);
}
.mc-default input[type='radio']:checked::before,
.mc-enable input[type='radio']:checked::before {
    transform: translate(-50%, -50%) scale(1);
}
.mc-default input[type='radio']:disabled,
.mc-enable input[type='radio']:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mc-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.mc-actions button { padding: 3px 5px; border-radius: 4px; }

.mc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
}

.mc-action-btn:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.mc-action-del:hover { color: var(--color-red); }
.mc-action-btn svg { width: 14px; height: 14px; }

.model-table-footer { margin-top: 4px; margin-bottom: 24px; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.model-add-btn { font-size: 12px; padding: 4px 10px; }
.model-import-btn {
    font-size: 12px;
    padding: 4px 10px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    color: var(--text-normal);
    cursor: pointer;
}
.model-import-btn:hover { background: var(--background-modifier-hover); }

/* ── Code Import Modal ─────────────────────────────────────────────────── */

.code-import-modal { max-width: 560px; }
.cim-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cim-title { margin: 0; font-size: 14px; }
.cim-experimental-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    background: var(--color-yellow);
    color: var(--background-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cim-instructions { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }

.cim-textarea {
    width: 100%;
    min-height: 200px;
    font-family: var(--font-monospace);
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--text-normal);
    resize: vertical;
    box-sizing: border-box;
    tab-size: 4;
}
.cim-textarea:focus { outline: none; border-color: var(--color-accent); }
.cim-textarea::placeholder { color: var(--text-faint); font-size: 11px; }

.cim-parse-row { display: flex; justify-content: flex-end; margin: 6px 0; }
.cim-parse-btn {
    font-size: 12px;
    padding: 4px 10px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    color: var(--text-normal);
    cursor: pointer;
}
.cim-parse-btn:hover { background: var(--background-modifier-hover); }

.cim-preview-box {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 5px;
    padding: 10px 12px;
    font-size: 12px;
    margin-bottom: 8px;
}

.cim-preview-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.cim-format-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    background: var(--background-modifier-border);
    color: var(--text-muted);
    text-transform: capitalize;
}

.cim-provider-sel {
    font-size: 12px;
    padding: 2px 6px;
    background: var(--background-modifier-form-field);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    color: var(--text-normal);
}

.cim-preview-field { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.cim-field-label { color: var(--text-muted); font-size: 11px; min-width: 80px; flex-shrink: 0; }
.cim-field-value { color: var(--text-normal); font-family: var(--font-monospace); font-size: 11px; word-break: break-all; }

.cim-models-section { margin-top: 8px; border-top: 1px solid var(--background-modifier-border); padding-top: 8px; }
.cim-models-header { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
.cim-models-list { display: flex; flex-direction: column; gap: 3px; }

.cim-model-item { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 4px; border-radius: 3px; }
.cim-model-icon { display: flex; align-items: center; flex-shrink: 0; }
.cim-model-icon svg { width: 12px; height: 12px; }
.cim-ok { color: var(--color-green); }
.cim-warn { color: var(--color-yellow); }
.cim-model-name { font-family: var(--font-monospace); color: var(--text-normal); }
.cim-model-dup { font-size: 10px; color: var(--text-faint); font-style: italic; }
.cim-model-note { display: block; font-size: 10px; color: var(--text-muted); margin-left: 22px; margin-top: 1px; }

.cim-warnings { margin-bottom: 8px; }
.cim-warning-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-yellow); padding: 3px 0; }
.cim-warning-icon { display: flex; align-items: center; flex-shrink: 0; }
.cim-warning-icon svg { width: 12px; height: 12px; }

.cim-apikey-row { margin-bottom: 10px; }
.cim-apikey-label { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.cim-apikey-desc { font-size: 10px; color: var(--text-faint); margin-bottom: 4px; }
.cim-apikey-input {
    width: 100%;
    padding: 4px 8px;
    background: var(--background-modifier-form-field);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    color: var(--text-normal);
    font-size: 12px;
    box-sizing: border-box;
}

/* Temperature row */
.cim-temp-row { margin-bottom: 10px; }
.cim-temp-label { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.cim-temp-desc { font-size: 10px; color: var(--text-faint); margin-bottom: 4px; }
.cim-temp-desc.cim-temp-fixed { color: var(--color-yellow); }
.cim-temp-input {
    width: 80px;
    padding: 4px 8px;
    background: var(--background-modifier-form-field);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    color: var(--text-normal);
    font-size: 12px;
}
.cim-temp-input:disabled { opacity: 0.6; cursor: not-allowed; }

/* Test Connection row */
.cim-test-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cim-test-btn {
    flex-shrink: 0;
    font-size: 12px;
    padding: 4px 12px;
}
.cim-test-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cim-test-result { display: none; font-size: 11px; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.cim-test-result.cim-test-ok { display: flex; color: var(--color-green); }
.cim-test-result.cim-test-fail { display: block; color: var(--color-red); }
.cim-test-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.cim-test-icon svg { width: 14px; height: 14px; }
.cim-test-hint { font-size: 10px; color: var(--color-yellow); margin-top: 4px; }
.cim-test-detail { font-size: 10px; color: var(--text-muted); margin-top: 4px; word-break: break-word; }

.cim-actions { display: flex; gap: 6px; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--background-modifier-border); }
.cim-import-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.model-table-empty {
    padding: 20px 12px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    font-style: italic;
}

.model-table-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.5;
}

/* ── Model Config Modal ─────────────────────────────────────────────────── */
.model-config-modal .modal-title { margin: 0 0 12px; font-size: 14px; }

.mcm-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

/* Label column has a fixed max-width so the input column keeps a usable
   amount of space. Long explanatory descriptions are moved into the (i)
   info-popover next to the label (see wireMcmDescTooltips), so the label
   column itself stays short.
   Affects ModelConfigModal AND ProviderDetailModal (both use .mcm-row). */
.mcm-row {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(180px, 1fr);
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.mcm-label {
    color: var(--text-muted);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Hidden by default: the .mcm-desc spans live in the DOM so the helper
   can read their text and attach a tooltip-icon, but they no longer
   render inline. Per-element opt-out via .mcm-desc.is-inline. */
.mcm-desc {
    display: none;
    font-size: 10px;
    color: var(--text-faint);
    line-height: 1.35;
}
.mcm-desc.is-inline {
    display: inline;
}

.mcm-input, .mcm-select {
    width: 100%;
    padding: 4px 8px;
    background: var(--background-modifier-form-field);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    color: var(--text-normal);
    font-size: 12px;
}

.mcm-input-sm { max-width: 100px; }

/* suggest row: select + fetch button */
.mcm-suggest-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}
.mcm-suggest-sel {
    flex: 1;
    min-width: 0;
}
.mcm-fetch-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-modifier-form-field);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.mcm-fetch-btn:hover {
    color: var(--text-normal);
    border-color: var(--text-muted);
}
.mcm-fetch-btn svg {
    width: 13px;
    height: 13px;
}
.mcm-recommend-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 4px;
    color: var(--text-accent);
    cursor: pointer;
    font-size: var(--font-ui-smaller);
    white-space: nowrap;
}
.mcm-recommend-btn:hover {
    text-decoration: underline;
}
.mcm-checkbox-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}
.mcm-checkbox-line input[type="checkbox"] {
    flex-shrink: 0;
}

.mcm-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid var(--background-modifier-border);
}

/* EPIC-26 / FEAT-26-03 Welle A follow-up: compact form-control wrapper
   used by ProviderDetailModal so each row matches ModelConfigModal's
   12px / 110px-label layout. Right-aligns buttons + toggles in the
   same column as inputs/selects. */
.provider-detail-modal .mcm-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.provider-detail-modal .mcm-control .mcm-input,
.provider-detail-modal .mcm-control .mcm-select {
    flex: 1 1 auto;
}

.provider-detail-modal .mcm-btn {
    padding: 4px 10px;
    font-size: 12px;
    background: var(--background-modifier-form-field);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    color: var(--text-normal);
    cursor: pointer;
}

.provider-detail-modal .mcm-btn:hover {
    background: var(--background-modifier-hover);
}

.provider-detail-modal .mcm-btn.mod-cta {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: transparent;
}

.provider-detail-modal .mcm-btn.mod-cta:hover {
    background: var(--interactive-accent-hover, var(--interactive-accent));
}

.provider-detail-modal .mcm-btn.mod-warning {
    color: var(--text-error, var(--color-red));
    border-color: var(--background-modifier-border);
}

.provider-detail-modal .mcm-btn.mod-warning:hover {
    background: var(--background-modifier-error-hover, var(--background-modifier-hover));
}

/* EPIC-26 / FEAT-26-03 -- inline label-line so a tier badge sits next
   to the row label without breaking the .mcm-label vertical stack.
   nowrap keeps the info-button glued to the label text (AUDIT-030
   follow-up: prior `flex-wrap: wrap` pushed the `(i)` to a new line
   when label + icon exceeded the grid column width). */
.mcm-label .mcm-label-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Info-icon next to a setting name. Just the Lucide `info` glyph in
   muted color, nothing else. Class repetition (.agent-info-btn.agent-info-btn)
   bumps specificity to (0,2,0) on the plain selector and the descendant form
   already sits at (0,3,0), so both forms overrule Obsidian's default
   .setting-item button styling without !important. */
.agent-info-btn.agent-info-btn,
.setting-item .setting-item-name .agent-info-btn {
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 0 6px;
    cursor: pointer;
    color: var(--text-faint);
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 0;
    border-radius: 0;
}
.agent-info-btn.agent-info-btn:hover,
.setting-item .setting-item-name .agent-info-btn:hover {
    color: var(--text-normal);
    background: transparent;
    background-color: transparent;
    box-shadow: none;
}
.agent-info-btn:focus-visible {
    outline: 1px solid var(--interactive-accent);
    outline-offset: 2px;
    border-radius: 50%;
}
.agent-info-btn svg { width: 14px; height: 14px; }

/* Info-popover opened by clicking .agent-info-btn. Centered overlay
   with a dismiss-on-backdrop click and Escape-key shortcut. Body text
   matches the Obsidian setting-item-description size so the visual
   register stays consistent with the surrounding settings UI. */
.agent-info-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: var(--layer-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
}
.agent-info-popover {
    background: var(--background-primary);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    max-width: 420px;
    width: calc(100% - 48px);
    padding: 14px 16px 16px;
}
.agent-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.agent-info-title {
    font-weight: var(--font-semibold);
    color: var(--text-normal);
    font-size: 13px;
}
/* Modal close button. Class repetition bumps specificity to (0,2,0) so we
 * defeat the Obsidian default button styling inside .modal-* containers
 * without !important. */
.agent-info-close.agent-info-close {
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 2px;
    margin: 0;
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    line-height: 0;
}
.agent-info-close.agent-info-close:hover {
    color: var(--text-normal);
    background: transparent;
    background-color: transparent;
}
.agent-info-close svg { width: 14px; height: 14px; }
.agent-info-body {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    white-space: pre-wrap;
}

/* Slider with inline, click-to-edit value display. Track on the left,
   value on the right inside the same control. Reads as one widget,
   not as a slider plus a separate input box. */
.agent-slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}
.agent-slider {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.agent-slider-value {
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text-normal);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
}
.agent-slider-value:hover,
.agent-slider-value:focus-visible {
    background: var(--background-modifier-hover);
    outline: none;
}
.agent-slider-value-editing {
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text-normal);
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--background-modifier-border);
    background: transparent;
    cursor: text;
    user-select: none;
}
.agent-slider-input.agent-slider-input {
    width: 100%;
    min-width: 38px;
    padding: 2px 6px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-normal);
}
.agent-slider-input:focus { outline: none; box-shadow: none; }
.agent-slider-input::-webkit-inner-spin-button,
.agent-slider-input::-webkit-outer-spin-button {
    display: none;
    margin: 0;
}

/* EPIC-26 follow-up #3 -- tier row in ProviderDetailModal.
 * Custom grid (label left, control right) so the colored tier badge
 * sits right-aligned ABOVE the dropdown instead of inline with the
 * tier label (where it overlapped the description text). */
.provider-detail-modal .mcm-tier-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 18px;
    align-items: start;
    padding: 10px 0;
    border-top: 1px solid var(--background-modifier-border);
}
.provider-detail-modal .mcm-tier-row:first-of-type { border-top: none; }
.provider-detail-modal .mcm-tier-label-col { min-width: 0; }
.provider-detail-modal .mcm-tier-label {
    font-weight: 600;
    color: var(--text-normal);
    margin-bottom: 2px;
}
.provider-detail-modal .mcm-tier-desc {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}
.provider-detail-modal .mcm-tier-control-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.provider-detail-modal .mcm-tier-badge-top {
    align-self: flex-end;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.provider-detail-modal .mcm-tier-dropdown {
    width: 100%;
    max-width: 320px;
}
.provider-detail-modal .mcm-tier-manual-back {
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
}
/* FIX-55-02 (issue #55): free-text model-id input. Text-input look, same
   width as the tier dropdowns. Previously carried the 'dropdown' class,
   which Obsidian styles for <select> elements and which breaks an input. */
.provider-detail-modal .mcm-tier-manual-input {
    width: 100%;
    max-width: 320px;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--input-radius, 5px);
    background: var(--background-primary);
    color: var(--text-normal);
}

/* EPIC-26 / FEAT-26-03 -- section header inside .mcm-form */
.mcm-section {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 14px 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--background-modifier-border);
}
.mcm-form > .mcm-section:first-child { margin-top: 4px; }

/* Inline warning row inside the form (e.g. "Advisor disabled"). Rendered as a
   plain block child of contentEl, no grid context above, so no grid override
   needed. */
.mcm-warn {
    color: var(--text-warning, var(--text-accent));
    font-size: 12px;
    padding: 6px 8px;
    background: var(--background-modifier-error-hover, var(--background-secondary));
    border-radius: 4px;
}
.mcm-warn-icon { display: inline-flex; align-items: center; vertical-align: middle; }
.mcm-warn-icon svg { width: 14px; height: 14px; }

/* Inline hint row (faint italic) e.g. "Save first, then refresh". Plain block,
   no grid parent. */
.mcm-hint {
    font-size: 11px;
    color: var(--text-faint);
    font-style: italic;
    padding: 4px 8px;
}

/* Danger-style button (matches mod-warning convention) */
.mcm-btn-danger {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-error, var(--text-error));
    border-radius: 4px;
    color: var(--text-error);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}
.mcm-btn-danger:hover { background: var(--background-modifier-error-hover, var(--background-modifier-hover)); }

.mcm-btn-test {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    color: var(--text-normal);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    margin-right: auto;
}

.mcm-btn-test:hover { background: var(--background-modifier-hover); }

.mcm-test-result {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-top: 4px;
}

.mcm-ok {
    background: color-mix(in srgb, var(--color-green) 12%, transparent);
    color: var(--color-green);
    border: 1px solid color-mix(in srgb, var(--color-green) 25%, transparent);
}

.mcm-err {
    background: color-mix(in srgb, var(--color-red) 12%, transparent);
    color: var(--color-red);
    border: 1px solid color-mix(in srgb, var(--color-red) 25%, transparent);
}

.mcm-result-icon { display: flex; align-items: center; flex-shrink: 0; }
.mcm-result-icon svg { width: 12px; height: 12px; }

/* ── Provider setup guide ───────────────────────────────────────────────── */
.mcm-guide {
    margin-bottom: 4px;
}

.mcm-guide-inner {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 5px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

.mcm-guide-inner strong {
    color: var(--text-normal);
    font-size: 12px;
    display: block;
    margin-bottom: 6px;
}

.mcm-guide-steps {
    margin: 0 0 6px 16px;
    padding: 0;
}

.mcm-guide-steps li {
    margin-bottom: 3px;
}

.mcm-guide-steps a {
    color: var(--interactive-accent);
    text-decoration: none;
}

.mcm-guide-steps a:hover {
    text-decoration: underline;
}

.mcm-guide-steps code {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    padding: 0 4px;
    font-family: var(--font-monospace);
    font-size: 11px;
}

.mcm-guide-tip {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 4px;
}

/* Custom provider table */
.mcm-guide-table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 11px;
}

.mcm-guide-table tr:not(:last-child) td {
    border-bottom: 1px solid var(--background-modifier-border);
}

.mcm-guide-table td {
    padding: 3px 6px;
    vertical-align: top;
}

.mcm-guide-service {
    font-weight: 500;
    color: var(--text-normal);
    white-space: nowrap;
    width: 80px;
}

.mcm-guide-url code {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    padding: 0 4px;
    font-family: var(--font-monospace);
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Test result detail ─────────────────────────────────────────────────── */
.mcm-result-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.mcm-result-detail {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid currentColor;
    opacity: 0.85;
    font-size: 11px;
    white-space: pre-line;
    line-height: 1.6;
}

/* ── Ollama model browser ───────────────────────────────────────────────── */
.mcm-ollama-browser {
    grid-column: 1 / -1;
    margin: -2px 0 2px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mcm-browse-btn {
    align-self: flex-start;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
}

.mcm-browse-icon {
    display: flex;
    align-items: center;
}

.mcm-browse-icon svg {
    width: 12px;
    height: 12px;
}

.mcm-browse-btn:hover:not(:disabled) {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.mcm-browse-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.mcm-model-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    max-height: 120px;
    overflow-y: auto;
}

.mcm-model-item {
    padding: 2px 8px;
    font-size: 11px;
    font-family: var(--font-monospace);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    color: var(--text-normal);
    cursor: pointer;
}

.mcm-model-item:hover {
    background: var(--background-modifier-hover);
    border-color: var(--interactive-accent);
}

.mcm-model-item-selected {
    background: color-mix(in srgb, var(--interactive-accent) 15%, transparent);
    border-color: var(--interactive-accent);
    color: var(--interactive-accent);
    font-weight: 500;
}

.mcm-model-empty {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    padding: 2px 0;
}

/* ── Compact chat (overrides merged into earlier blocks; only context-
   specific selectors below remain unique to this section) ──────────── */

/* User message: right-aligned pill, compact */
/* .user-message base styles (incl. align-items and the sticky pinning) are
   merged into the earlier block; only context-specific selectors remain
   below, so the bare selector is defined exactly once in this file. */

/* Selection highlight: deeper tint of the accent so text stays readable
   against the very light user-message bubble. */
.user-message .message-content::selection,
.user-message .message-content *::selection {
    background: color-mix(in srgb, var(--interactive-accent) 30%, transparent);
    color: var(--text-normal);
}

.user-message .message-content::-moz-selection,
.user-message .message-content *::-moz-selection {
    background: color-mix(in srgb, var(--interactive-accent) 30%, transparent);
    color: var(--text-normal);
}

/* User message action bar (copy, edit) */
.user-message-actions {
    display: flex;
    gap: 1px;
    justify-content: flex-end;
    opacity: 0;
    margin-top: 2px;
    transition: opacity 0.15s;
}

.user-message:hover .user-message-actions {
    opacity: 1;
}

/* Assistant-message bubble styles merged into the earlier block
   (line 390 area). user-select is granted by the consolidated rule
   .obsidian-agent-sidebar .assistant-message .message-content. */

/* Visible selection highlighting for assistant messages */
.assistant-message .message-content::selection,
.assistant-message .message-content *::selection {
    background: var(--text-selection);
    color: var(--text-normal);
}

.assistant-message .message-content::-moz-selection,
.assistant-message .message-content *::-moz-selection {
    background: var(--text-selection);
    color: var(--text-normal);
}

/* Assistant-message pre/code styles merged into the earlier block
   (line 1349 area). */

/* Tool calls now live inside .message-tools wrapper */
.message-tools {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 2px;
}

/* The wrapper is created for EVERY assistant turn, including pure text answers
 * that never call a tool. As an empty in-flow flex item it still contributed
 * its margin plus the parent's gap, pushing the answer down ~6px and leaving
 * the brand mark floating too high. Collapsing it when empty makes the mark
 * align identically for text turns and tool turns. */
.message-tools:empty {
    display: none;
}

/* ── Agent steps block ──────────────────────────────────────────────────── */
/* All tool calls for one turn are grouped under a single collapsible block. */
/* A thin left border replaces the old individual card borders.               */
/* Redesign: no card. The steps are a thread, drawn as one vertical line with a
 * node per step (see .agent-steps-body below) -- a box around the agent's work
 * competed with the message bubbles for attention and boxed in the brand mark
 * sitting in the gutter. No border, no fill, no radius: only the line carries
 * the grouping. Top margin is 0 so the block's first row lines up with the
 * brand mark beside it. */
.agent-steps-block {
    margin: 0 0 var(--vo-space-2);
}

/* Hide the native disclosure triangle */
.agent-steps-block > summary {
    list-style: none;
}
.agent-steps-block > summary::-webkit-details-marker {
    display: none;
}

/* Summary line: icon + label, single row. The 7px left pad puts the 12px
 * summary icon's centre on x=13, the same axis the step nodes below use, so
 * the header reads as the top of the thread. */
.agent-steps-summary {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0 2px 7px;
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
    font-size: 11px;
}
.agent-steps-summary:hover {
    color: var(--text-normal);
}

/* Spinning loader icon inside summary */
.steps-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.steps-icon svg {
    width: 12px;
    height: 12px;
}

/* Label text */
.steps-label {
    font-family: var(--font-monospace);
    font-size: 11px;
}

/* Body: individual tool call <details> elements */
.agent-steps-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 3px;
}

/* The thread line. It is drawn HERE and not on .tool-call-details, because
 * those clip their overflow (see .tool-call-details) and would cut the line at
 * every row boundary. Inset top and bottom so it spans first node to last
 * rather than running into the rows above and below. */
.agent-steps-body::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 9px;
    bottom: 9px;
    width: 2px;
    background: var(--vo-line);
}

/* Individual tool entries inside the block are slightly more compact */
.agent-steps-body .tool-call-details {
    margin: 0;
}

/* Once a plan exists, renderTodoBox MOVES the whole .message-tools subtree into
 * the plan box, which paints its own surface. The step nodes mask the thread
 * line with a background colour, so that colour has to follow the surface they
 * now sit on, otherwise each node shows as a light dot on a darker panel. */
.todo-activity-log .tool-call-summary .tool-icon,
.todo-activity-log .tool-computing-icon {
    background: var(--vo-surface-1);
}

/* ── Auto-approve bar ─────────────────────────────────────────────────── */
/* Auto-approve bar removed — approval managed in Settings */

/* ── Completion card ─────────────────────────────────────────────────── */
.completion-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px 8px;
    margin-top: 4px;
    border-radius: 4px;
    border-left: 3px solid var(--color-green);
    background: color-mix(in srgb, var(--color-green) 7%, transparent);
    font-size: 12px;
}

.completion-card-header {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-green);
    font-weight: 500;
    font-size: 12px;
}

.completion-icon { display: flex; align-items: center; }
.completion-icon svg { width: 13px; height: 13px; }
.completion-body { color: var(--text-normal); font-size: 12px; }
.completion-body p { margin-bottom: 3px; }
.completion-body p:last-child { margin-bottom: 0; }

/* ── Question card (Kilo Code style) ─────────────────────────────────── */
/* ── Todo Box ────────────────────────────────────────────────────────────── */
/* Plan view: a clean card on the token system. The old heavy 3px accent bar
 * and 4px radius are replaced by a soft-elevated surface, and the steps are
 * connected by a vertical timeline spine so the plan reads as a sequence. */
.agent-todo-box {
    /* No top margin: the panel is the first thing in the turn, so it starts
     * flush with the turn instead of drifting down away from it. */
    margin: 0 0 var(--vo-space-2);
    border: 1px solid var(--vo-line);
    border-radius: var(--vo-radius-md);
    background: var(--vo-surface-1);
    overflow: hidden;
    box-shadow: var(--vo-shadow-sm);
}

.todo-box-header {
    display: flex;
    align-items: center;
    gap: var(--vo-space-2);
    padding: var(--vo-space-2) var(--vo-space-3);
    border-bottom: 1px solid var(--vo-line);
}

/* The panel's leading icon is the brand mark (see .vo-brand-mark), which
 * replaced the generic checklist glyph so the agent has a face here. */
.todo-box-icon {
    --vo-mark-size: 16px;
}

.todo-box-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.todo-box-list {
    position: relative;
    padding: var(--vo-space-3) 0;
}

/* Timeline spine: a hairline behind the status-icon column, inset top and
 * bottom so it runs between the first and last node, not to the box edges.
 * left = icon-column centre (item padding-left + half the 16px node). */
.todo-box-list::before {
    content: "";
    position: absolute;
    left: calc(var(--vo-space-3) + 7px);
    top: calc(var(--vo-space-3) + 8px);
    bottom: calc(var(--vo-space-3) + 8px);
    width: 2px;
    background: var(--vo-line);
}

.todo-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--vo-space-2);
    padding: var(--vo-space-1) var(--vo-space-3);
    font-size: 12.5px;
    line-height: 1.45;
}

/* Each status icon is a node on the spine; its surface-coloured background
 * masks the line so every step reads as a distinct point on the timeline. */
.todo-item-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--vo-surface-1);
    color: var(--text-faint);
}

.todo-item-icon svg {
    width: 13px;
    height: 13px;
}

.todo-item-text {
    color: var(--text-normal);
}

.todo-done .todo-item-icon  { color: var(--vo-status-ok); }
.todo-done .todo-item-text  { color: var(--text-muted); text-decoration: line-through; }

.todo-in-progress .todo-item-icon { color: var(--vo-accent); }
.todo-in-progress .todo-item-icon svg { animation: thinking-spin 1.4s linear infinite; }
.todo-in-progress .todo-item-text { color: var(--text-normal); font-weight: 600; }

.todo-pending .todo-item-icon { color: var(--text-faint); }
.todo-pending .todo-item-text { color: var(--text-muted); }

/* ── Activity log (collapsed tool calls inside Plan box) ─────────────────── */
.todo-activity-log {
    margin-top: 4px;
    border-top: 1px solid var(--background-modifier-border);
    padding-top: 0;
}

.todo-activity-summary {
    font-size: 11px;
    color: var(--text-faint);
    cursor: pointer;
    list-style: none;
    padding: 3px 8px;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.todo-activity-summary::-webkit-details-marker { display: none; }

.todo-activity-badge {
    font-size: 10px;
    color: var(--text-faint);
    background: var(--background-secondary);
    padding: 1px 6px;
    border-radius: 8px;
}

/* ── Followup / question list (unified layout) ─────────────────────────── */
/* Used for both [followups] blocks at end of responses AND ask_followup_question cards */
.followup-list {
    margin-top: 10px;
    padding-top: 0;
}

.followup-heading {
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.5;
}

.followup-item-row {
    position: relative;
    margin-bottom: 4px;
}
.followup-append-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.followup-item-row:hover .followup-append-btn {
    opacity: 1;
    pointer-events: auto;
}
.followup-append-btn:hover {
    border-color: var(--interactive-accent);
    color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}
/* Class-repetition (.followup-item.followup-item) bumps specificity to
   (0,2,0) so we override default button/list-item styles without
   needing !important on white-space and height. */
.followup-item.followup-item {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    height: auto;
    min-height: 0;
    max-width: 100%;
    overflow: visible;
    padding: 6px 32px 6px 12px;
    margin: 3px 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    background: var(--background-secondary);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    line-height: 1.45;
}

.followup-item:hover {
    border-color: var(--interactive-accent);
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}

/* ── Setup Welcome Buttons ─────────────────────────────────────────────── */
.setup-welcome-buttons {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.setup-welcome-btn {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid var(--background-modifier-border);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: all 0.15s ease;
}
.setup-welcome-btn-primary {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
    font-weight: 600;
}
.setup-welcome-btn-primary:hover {
    opacity: 0.85;
}
.setup-welcome-btn-secondary {
    background: var(--background-secondary);
    color: var(--text-muted);
}
.setup-welcome-btn-secondary:hover {
    color: var(--text-normal);
    border-color: var(--interactive-accent);
}

/* ── Disabled onboarding buttons (after choice is made) ──────────────── */
.setup-btn-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ── Provider selection buttons (2x2 grid) ───────────────────────────── */
.setup-provider-buttons {
    flex-wrap: wrap;
}
.setup-provider-buttons .setup-welcome-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    text-align: center;
}

.question-input-row {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 4px;
    padding-left: 10px;
}

.question-input {
    flex: 1;
    padding: 3px 7px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 12px;
}

.question-submit-btn {
    padding: 3px 10px;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

/* ── Inline approval row (within tool call area) ─────────────────────── */
.tool-approval-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;  /* Mehr Padding für bessere Sichtbarkeit */
    margin: 8px 0;       /* Mehr Abstand zu anderen Elementen */
    border-radius: 8px;  /* Konsistent mit Message-Bubbles */
    border: 1px solid color-mix(in srgb, #f0a020 30%, var(--background-modifier-border));
    background: color-mix(in srgb, #f0a020 4%, transparent);
    font-size: 12px;
}

.tool-approval-icon { display: flex; align-items: center; color: #f0a020; flex-shrink: 0; }
.tool-approval-icon svg { width: 11px; height: 11px; }

.tool-approval-text {
    flex: 1;
    color: var(--text-muted);
    font-size: 11px;
}

.tool-approval-actions { display: flex; gap: 3px; flex-shrink: 0; }

.tool-approval-btn {
    padding: 1px 7px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 11px;
    cursor: pointer;
}

.approval-allow-once {
    background: var(--color-green);
    color: white;
    border-color: var(--color-green);
}

.approval-enable {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--background-modifier-border);
}

.approval-enable:hover {
    border-color: var(--interactive-accent);
    color: var(--interactive-accent);
}

/* configDir write warning — Shai Hulud Mitigation */
.tool-approval-config-warning {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 8px;
    margin-top: 2px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-red) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-red) 25%, var(--background-modifier-border));
}
.tool-approval-warning-icon { display: flex; align-items: center; color: var(--color-red); flex-shrink: 0; margin-top: 1px; }
.tool-approval-warning-icon svg { width: 12px; height: 12px; }
.tool-approval-warning-text { color: var(--color-red); font-size: 11px; line-height: 1.4; }

.approval-deny-small {
    background: transparent;
    color: var(--text-faint);
    border: none;
    padding: 1px 4px;
}

.approval-deny-small:hover { color: var(--color-red); }

/* ── Install-prompt row (in-chat asset install consent) ──────────────── */
.tool-approval-row.install-prompt-row {
    /* Slightly cooler tone than the amber approval row so the two never blur */
    border-color: color-mix(in srgb, var(--interactive-accent) 30%, var(--background-modifier-border));
    background: color-mix(in srgb, var(--interactive-accent) 4%, transparent);
}
.tool-approval-row.install-prompt-row .tool-approval-icon { color: var(--interactive-accent); }
.tool-approval-row.install-prompt-row .tool-approval-text {
    color: var(--text-normal);
    font-weight: 500;
}
.tool-approval-row.install-prompt-row .tool-approval-explanation {
    color: var(--text-muted);
    font-size: 11px;
    width: 100%;
    line-height: 1.45;
}
.tool-approval-row.install-prompt-row .tool-approval-explanation.is-hidden {
    display: none;
}

/* Human-readable explanation in approval card */
.tool-approval-explanation {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    color: var(--text-normal);
    line-height: 1.4;
    margin-top: 2px;
}

.tool-approval-target {
    font-weight: 600;
    color: var(--text-normal);
    word-break: break-all;
}

/* Content-hash grant (M-1 follow-up): the pinned-scope note on a sandbox-script card */
.tool-approval-sandbox-script {
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* FEAT-44-02b: scope-only batch approval -- planned file list on the card */
.tool-approval-scope {
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-normal);
}

.tool-approval-scope-summary {
    font-weight: 600;
    line-height: 1.4;
}

.tool-approval-scope-heading {
    margin-top: 4px;
    color: var(--text-muted);
}

.tool-approval-scope-list {
    margin: 4px 0 0;
    padding: 6px 8px 6px 24px;
    background: var(--background-secondary);
    border-radius: 4px;
    font-family: var(--font-monospace);
    font-size: 11px;
    line-height: 1.5;
    max-height: 160px;
    overflow-y: auto;
    word-break: break-all;
}

.tool-approval-scope-more {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.tool-approval-code-preview {
    width: 100%;
    margin-top: 4px;
}

.tool-approval-code-preview code {
    display: block;
    font-size: 11px;
    font-family: var(--font-monospace);
    background: var(--background-secondary);
    border-radius: 4px;
    padding: 6px 8px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 80px;
    overflow-y: auto;
    color: var(--text-muted);
}

.tool-approval-fo-preview {
    width: 100%;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-normal);
    background: var(--background-secondary);
    border-radius: 4px;
    padding: 6px 8px;
}

.tool-approval-fo-preview-sample {
    color: var(--text-muted);
}

.tool-approval-details-toggle {
    width: 100%;
    font-size: 11px;
    color: var(--text-faint);
    cursor: pointer;
    margin-top: 2px;
}

/* IMP-41-03-05: background research task status tile above the input */
.background-task-tile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 11px;
    color: var(--text-muted);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    margin-bottom: 4px;
}

.background-task-tile-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.background-task-tile-stop {
    font-size: 11px;
    padding: 1px 8px;
}

/* IMP-41-01-02: countdown shown during the final 60s before auto-deny */
.tool-approval-countdown {
    font-size: 11px;
    color: var(--text-faint);
    margin-left: auto;
    align-self: center;
}

.tool-approval-details-toggle:hover {
    color: var(--interactive-accent);
    text-decoration: underline;
}

.tool-approval-details {
    width: 100%;
    display: none;
}

.tool-approval-details.is-visible {
    display: block;
}

.tool-approval-details-content {
    font-size: 11px;
    font-family: var(--font-monospace);
    background: var(--background-secondary);
    border-radius: 4px;
    padding: 6px 8px;
    margin: 4px 0 0 0;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 120px;
    overflow-y: auto;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Checkpoint markers (Kilo Code pattern) ──────────────────────────── */
.checkpoint-marker {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    margin: 4px 0;
    font-size: 11px;
    color: var(--text-faint);
    opacity: 0.5;
    transition: opacity 0.15s;
}

.checkpoint-marker:hover {
    opacity: 1;
}

.checkpoint-marker::before {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--background-modifier-border));
    pointer-events: none;
}

.checkpoint-marker::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--background-modifier-border));
    pointer-events: none;
}

.checkpoint-icon {
    display: flex;
    align-items: center;
}

.checkpoint-icon svg {
    width: 12px;
    height: 12px;
}

.checkpoint-label {
    white-space: nowrap;
    font-size: 10px;
}

/* Action row -- always visible ghost icon buttons.
 * Pattern adapted from Kilo Code's CheckpointMenu
 * (forked-kilocode/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx):
 * three primary actions in a row + a "more" overflow for the rarely-used
 * "Delete chat from here" option. Borderless, transparent, icon-only,
 * tooltip via aria-label. */
.checkpoint-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    margin-left: 2px;
}

.checkpoint-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--text-faint);
    cursor: pointer;
    opacity: 0.5;
    box-shadow: none;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.checkpoint-marker:hover .checkpoint-action-btn {
    opacity: 0.8;
}

.checkpoint-action-btn:hover {
    opacity: 1;
    color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}

.checkpoint-action-btn svg {
    width: 13px;
    height: 13px;
}

/* FIX-44-12: rehydrated marker whose snapshot the shadow repo no longer holds
   (pruned refs). Dimmed, no action buttons; the aria-label tooltip says why. */
.checkpoint-marker-expired {
    opacity: 0.55;
    cursor: help;
}

.checkpoint-restored {
    color: var(--color-green);
    font-size: 10px;
    margin-left: auto;
}

/* ── Undo bar (fallback) ─────────────────────────────────────────────── */
.undo-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    margin: 2px 0;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.undo-label { flex: 1; }

.undo-btn {
    padding: 2px 8px;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

.undo-btn:hover {
    border-color: var(--interactive-accent);
    color: var(--interactive-accent);
}

.undo-success { color: var(--color-green); }
.undo-error { color: var(--color-red); }

/* ── Settings section headings ───────────────────────────────────────── */
.agent-settings-section {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    margin: 24px 0 8px;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--background-modifier-border);
}

.agent-settings-section:first-child { margin-top: 2px; }

/* Sub-section headings (h4) nest under an uppercase main section, so they
   read as children: normal case, no underline, tighter top margin. */
h4.agent-settings-section {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    margin: 16px 0 6px;
    border-bottom: none;
}

.agent-settings-section .agent-info-btn {
    /* Section headings are uppercase muted, so keep the info icon
       in the same muted tone. The 6 px gap from the flex container
       already provides the left margin. */
    margin-left: 0;
    color: var(--text-faint);
}

/* Plain explanatory paragraph that sits directly under a section
   heading. Used when the section title alone is not enough to
   convey the model, e.g. the cross-surface receive-side policy.
   Same register as setting-item-description: muted, 12 px, no
   coloured background. */
.agent-settings-section-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 12px;
    padding: 0;
    background: transparent;
    border: none;
}

/* Pinned-to-memory star: always visible (status indicator), accent
   colour, no fill -- the regular `star` icon stays as outline. */
.history-row-action.history-row-action-pinned {
    color: var(--text-accent);
    opacity: 1;
}

.agent-settings-soul-intro {
    margin: 4px 0 16px 0;
    padding: 10px 14px;
    background: var(--background-secondary);
    border-left: 3px solid var(--interactive-accent);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-muted);
}
.agent-settings-soul-intro p {
    margin: 0;
}
.agent-settings-soul-intro p + p {
    margin-top: 6px;
}

.agent-settings-soul-block {
    margin: 10px 0;
    padding: 10px 12px;
    background: var(--background-secondary);
    border-radius: 6px;
    border: 1px solid var(--background-modifier-border);
}
.agent-settings-soul-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.agent-settings-soul-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-normal);
}
.agent-settings-soul-desc {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
.agent-settings-soul-desc-example {
    color: var(--text-faint);
    font-style: italic;
}
.agent-settings-soul-header button {
    width: 24px;
    height: 24px;
    line-height: 1;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
}
.agent-settings-soul-empty {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-faint);
    font-style: italic;
}
.agent-settings-soul-list {
    margin: 8px 0 0 0;
    padding: 0;
    list-style: none;
}
.agent-settings-soul-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--background-modifier-border);
}
.agent-settings-soul-list li:last-child {
    border-bottom: none;
}
.agent-settings-soul-text {
    flex: 1 1 auto;
    color: var(--text-normal);
}
.agent-settings-soul-remove {
    background: none;
    border: 1px solid var(--background-modifier-border);
    color: var(--text-muted);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
}
.agent-settings-soul-remove:hover {
    color: var(--text-error);
}
/* Memory viewer modal (FEATURE-0319b).
   v2.10.4: switched from :has() to an explicit container class set by
   MemoryViewerModal.onOpen() to avoid the :has() warning from the
   review-bot. Visual behaviour identical. */
.memory-viewer-modal-container {
    width: min(900px, 92vw);
    max-width: none;
}
.memory-viewer-modal {
    width: 100%;
}
.memory-viewer-intro {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 6px 0;
}
.memory-viewer-stats {
    font-size: 11px;
    color: var(--text-faint);
    margin: 0 0 12px 0;
}
.memory-viewer-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--background-modifier-border);
}
.memory-viewer-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    margin-bottom: -1px;
}
.memory-viewer-tab:hover {
    color: var(--text-normal);
}
.memory-viewer-tab-active {
    color: var(--text-accent);
    border-bottom-color: var(--text-accent);
}
.memory-viewer-filter {
    margin-bottom: 12px;
}
.memory-viewer-filter input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-secondary);
    color: var(--text-normal);
    font-size: 13px;
}
.memory-viewer-section {
    margin: 18px 0;
}
.memory-viewer-section-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-normal);
    border-bottom: 1px solid var(--background-modifier-border);
    padding-bottom: 4px;
}
.memory-viewer-section-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin: 4px 0 8px 0;
}
.memory-viewer-empty {
    font-size: 12px;
    color: var(--text-faint);
    font-style: italic;
    padding: 4px 0;
}
.memory-viewer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.memory-viewer-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--background-modifier-border);
}
.memory-viewer-item:last-child {
    border-bottom: none;
}
.memory-viewer-item-main {
    flex: 1 1 auto;
    min-width: 0;
}
.memory-viewer-item-text {
    font-size: 13px;
    color: var(--text-normal);
    line-height: 1.4;
    word-break: break-word;
}
.memory-viewer-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.memory-viewer-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--background-modifier-border);
    color: var(--text-muted);
    text-transform: lowercase;
}
.memory-viewer-tag-primary {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    font-weight: 500;
}
.memory-viewer-item-meta {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 4px;
}
.memory-viewer-item-actions {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    align-self: flex-start;
}
.memory-viewer-item-edit,
.memory-viewer-item-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
}
.memory-viewer-item-edit:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}
.memory-viewer-item-delete:hover {
    color: var(--text-error);
    background: var(--background-modifier-hover);
}
.memory-viewer-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed var(--background-modifier-border);
}
.memory-viewer-wipe {
    background: var(--background-modifier-error);
    color: var(--text-on-accent, #ffffff);
    border: 1px solid var(--background-modifier-error);
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}
.memory-viewer-wipe:hover {
    background: var(--text-error);
    border-color: var(--text-error);
}
.memory-viewer-footer-hint {
    font-size: 11px;
    color: var(--text-faint);
    flex: 1;
}

.agent-settings-soul-import {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 8px 0;
    padding-top: 8px;
    border-top: 1px dashed var(--background-modifier-border);
}
.agent-settings-soul-import button {
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}
.agent-settings-soul-import-hint {
    font-size: 11px;
    color: var(--text-faint);
}
.agent-settings-soul-caps {
    margin: 16px 0;
}
.agent-settings-soul-caps summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
}
.agent-settings-soul-cap-list {
    margin: 4px 0 0 16px;
    padding: 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* Plain paragraph -- neutral, no background. */
.agent-settings-paragraph {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 8px 0 16px;
}

/* Inline muted hint or status text inside a settings tab. Plain
   paragraph register, no coloured box -- the section info popover
   carries the explanatory weight, and the coloured intro callout
   at the top of each tab keeps higher visual priority. */
.agent-settings-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 6px 0 12px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* FEAT-24-12: a settings value that was NOT applied. Used by the cost-display
   fields, where a rejected number must not look accepted: the rate field keeps
   its last good value and the override list names the lines it dropped. */
.agent-settings-invalid,
.agent-settings-invalid .setting-item-description {
    color: var(--text-error);
}

/* ── Unified box system (2026-05-18) ────────────────────────────────────
 * One base class `.vault-op-box` plus a semantic modifier:
 *   --intro    blue,    tab introduction
 *   --info     grey,    helper / aside
 *   --warning  amber,   caution
 *   --error    red,     risk / failure
 * Inner parts: .vault-op-box__icon, .vault-op-box__text, .vault-op-box__actions.
 * Status badges (test result, enrichment progress) stay inline and use
 * .vault-op-status with .is-ok / .is-error / .is-pending.
 */
.vault-op-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--color-blue) 35%, var(--background-modifier-border));
    border-left: 4px solid var(--color-blue);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-blue) 7%, var(--background-primary));
}

.vault-op-box__icon {
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    color: var(--color-blue);
}

.vault-op-box__text {
    flex: 1;
    color: var(--text-normal);
}

.vault-op-box__text p {
    margin: 3px 0 0;
}

.vault-op-box__text p:last-child {
    margin-bottom: 0;
}

.vault-op-box__text strong {
    font-weight: var(--font-semibold);
    color: var(--text-normal);
}

.vault-op-box__actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.vault-op-box--info {
    border-color: var(--background-modifier-border);
    border-left-color: var(--interactive-accent);
    background: var(--background-secondary);
}
.vault-op-box--info .vault-op-box__icon { color: var(--interactive-accent); }

.vault-op-box--warning {
    border-color: color-mix(in srgb, var(--color-yellow) 35%, var(--background-modifier-border));
    border-left-color: var(--color-yellow);
    background: color-mix(in srgb, var(--color-yellow) 7%, var(--background-primary));
}
.vault-op-box--warning .vault-op-box__icon { color: var(--color-yellow); }

.vault-op-box--error {
    border-color: color-mix(in srgb, var(--text-error) 35%, var(--background-modifier-border));
    border-left-color: var(--text-error);
    background: color-mix(in srgb, var(--text-error) 7%, var(--background-primary));
}
.vault-op-box--error .vault-op-box__icon { color: var(--text-error); }
.vault-op-box--error .vault-op-box__text { color: var(--text-error); }

.vault-op-status {
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vault-op-status.is-ok { color: var(--color-green); }
.vault-op-status.is-error { color: var(--text-error); }
.vault-op-status.is-pending { color: var(--text-muted); }

/* Compact Obsidian Setting items within the behavior tab */
.agent-settings-content .setting-item {
    padding: 6px 0;
    border-top: 1px solid var(--background-modifier-border-hover, rgba(0,0,0,0.06));
    border-radius: 0;
}

.agent-settings-content .setting-item:first-of-type,
.agent-settings-content .agent-settings-section + .setting-item,
.agent-settings-content .agent-settings-desc + .setting-item,
.agent-settings-content .agent-semantic-status + .setting-item {
    border-top: none;
}

/* Section headings — reset any inherited h3 padding/margin from Obsidian */
.agent-settings-content .agent-settings-section {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.agent-settings-content .setting-item-name {
    font-size: 13px;
}

.agent-settings-content .setting-item-description {
    font-size: 11px;
    margin-top: 1px;
}

/* FEAT-04-10 design pass: compact text buttons across the whole settings
 * surface. Settings names render at 13px, so default-height Obsidian
 * buttons read oversized next to them. Icon-only recipes keep their own
 * sizing (excluded below). Modals are untouched (outside this container). */
.agent-settings-content button:not(.clickable-icon):not(.agent-info-btn):not(.agent-info-close):not(.agent-rules-edit-btn):not(.agent-rules-export-btn):not(.agent-rules-delete-btn):not(.agent-skill-action-btn):not(.agent-icon-only-btn):not(.agent-settings-subtab) {
    font-size: 12px;
    height: auto;
    min-height: 0;
    min-width: 80px;
    padding: 4px 10px;
    line-height: 1.3;
}

/* FEAT-30-07: einklappbarer Plugin-API-Methoden-Katalog im Permissions-Tab */
.agent-permissions-catalog {
    margin: 8px 0 16px;
    padding: 6px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
}
.agent-permissions-catalog > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
}
.agent-permissions-catalog[open] > summary {
    color: var(--text-normal);
    margin-bottom: 6px;
}

/* FEAT-30-07: Recipe-Editor (Custom recipes) */
.agent-recipe-editor-textarea {
    width: 100%;
    min-width: 320px;
    font-family: var(--font-monospace);
    font-size: 12px;
}
.agent-recipe-editor-errors {
    margin: 8px 0;
    padding: 8px 12px;
    border: 1px solid var(--text-error);
    border-radius: 6px;
    color: var(--text-error);
    font-size: 12px;
}
.agent-recipe-editor-errors ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

/* Suppress blinking cursor once tools have appeared (response will render on complete) */
.message-streaming .message-tools:not(:empty) ~ .message-content::after {
    display: none;
}

/* Tool rows are fully opaque while the task is running — subtle only on hover after done */
.message-streaming .tool-call-details {
    opacity: 1;
}

/* ── Thinking / Reasoning block ──────────────────────────────────────── */
.thinking-block {
    margin: var(--vo-space-1) 0 var(--vo-space-2);
    /* Same accent-tinted spine as the tool steps so reasoning and actions read
     * as one connected thread. */
    border-left: 2px solid color-mix(in srgb, var(--vo-accent) 35%, var(--vo-line));
    padding-left: var(--vo-space-3);
    transition: opacity 150ms ease-out;
}

.thinking-header {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--text-faint);
    font-size: 11px;
    user-select: none;
    padding: 1px 0;
}

.thinking-header:hover { color: var(--text-muted); }

.thinking-spinner { display: flex; align-items: center; }
.thinking-spinner svg {
    width: 11px;
    height: 11px;
    animation: thinking-spin 1.4s linear infinite;
}

@keyframes thinking-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.thinking-label { font-size: 11px; }

.thinking-content {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
    padding: 3px 0 2px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* ── Response action bar ─────────────────────────────────────────────── */
.message-actions {
    display: flex;
    gap: 1px;
    align-items: center;
    opacity: 1;
    margin-top: 6px;
    padding: 0 2px;
    justify-content: flex-end;
}

/* ── Perplexity-style inline citations ──────────────────────────────── */

/* Inline citation badge [1], [2] */
.source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--background-modifier-border);
    color: var(--text-muted);
    cursor: pointer;
    vertical-align: super;
    margin: 0 1px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.source-badge:hover {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

/* Sources indicator next to action buttons */
.sources-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-faint);
    cursor: pointer;
    margin-right: auto;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.1s, background 0.1s;
}

.sources-indicator:hover {
    color: var(--text-muted);
    background: var(--background-modifier-hover);
}

.sources-indicator-icon {
    display: flex;
    align-items: center;
}

.sources-indicator-icon svg {
    width: 12px;
    height: 12px;
}

/* Source popup (single source or panel) */
.source-popup {
    position: fixed;
    z-index: 1000;
    top: var(--popup-top);
    bottom: var(--popup-bottom);
    left: var(--popup-left);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 10px 14px;
    max-width: 320px;
    min-width: 180px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    font-size: 12px;
    line-height: 1.4;
}

.source-popup-title {
    font-weight: 600;
    color: var(--text-accent);
    cursor: pointer;
    margin-bottom: 2px;
}

.source-popup-title:hover {
    text-decoration: underline;
}

.source-popup-context {
    color: var(--text-muted);
    font-size: 11px;
}

/* Sources panel (all sources list) */
.sources-panel {
    max-height: 300px;
    overflow-y: auto;
}

.source-panel-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 0;
    flex-wrap: wrap;
}

.source-panel-row:not(:last-child) {
    border-bottom: 1px solid var(--background-modifier-border);
}

.source-panel-row .source-badge {
    flex-shrink: 0;
    vertical-align: baseline;
}

.source-panel-title {
    font-weight: 600;
    color: var(--text-accent);
    cursor: pointer;
}

.source-panel-title:hover {
    text-decoration: underline;
}

.source-panel-context {
    width: 100%;
    color: var(--text-muted);
    font-size: 11px;
    padding-left: 21px;
}

.message-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-faint);
    cursor: pointer;
    transition: color 0.1s, background 0.1s;
}

.message-action-btn:hover {
    color: var(--text-muted);
    background: var(--background-modifier-hover);
}

.message-action-btn svg {
    width: 13px;
    height: 13px;
}

/* ── Working / loading indicator ─────────────────────────────────────── */
.message-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    color: var(--text-faint);
    font-size: 12px;
}

.message-loading-icon {
    display: flex;
    align-items: center;
}

.message-loading-icon svg {
    width: 13px;
    height: 13px;
    animation: thinking-spin 1.4s linear infinite;
}

.message-loading-text {
    color: var(--text-faint);
}

/* Hide the blinking cursor when the loading indicator is present.
   v2.10.4: switched from :has(.message-loading) to an explicit
   has-loading flag class set in createMessageEl() and removed in
   removeLoading(). Avoids the :has() invalidation cost the
   review-bot warns about. */
.message-streaming .message-content.has-loading::after {
    display: none;
}

/* ── Between-iteration "Analyzing results…" indicator ──────────────── */
/* The transient "analyzing" row is a duplicate now: the turn's status line at
 * the top says the same thing, with the token count next to it. Kept in the
 * DOM (several code paths create and clear it) but not shown twice, so the
 * former flex layout below is inert and left only as a record of its shape. */
.tool-computing-row {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--text-faint);
}

/* Same node geometry as a finished step, so the transient "analyzing" row sits
 * on the thread line instead of hanging beside it. */
.tool-computing-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--background-primary);
}

.tool-computing-icon svg {
    width: 10px;
    height: 10px;
    animation: thinking-spin 1.4s linear infinite;
}

.tool-computing-text {
    font-size: 11px;
    color: var(--text-faint);
}

/* ── Attachment chip bar (input area) ────────────────────────────────── */
.chat-attachment-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px 0;
    border-bottom: none;
}

.chat-attachment-chips:empty {
    display: none;
}

.chat-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 4px;
    background: white;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-muted);
    max-width: 180px;
    overflow: hidden;
    cursor: default;
}

.attachment-chip-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.attachment-chip-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-faint);
}

.attachment-chip-icon svg { width: 11px; height: 11px; }

.attachment-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.attachment-chip-remove {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 1px;
    color: var(--text-faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s;
}

.chat-attachment-chip:hover .attachment-chip-remove { opacity: 1; }
.attachment-chip-remove svg { width: 9px; height: 9px; }

/* Drag-over highlight on input wrapper */
.chat-input-wrapper.drag-over {
    border-color: var(--interactive-accent);
    background: color-mix(in srgb, var(--interactive-accent) 5%, var(--input-background));
}

/* ── Attachment previews above user message bubble ───────────────────── */
.message-attachment-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    margin-bottom: 4px;
    max-width: 85%;
    align-self: flex-end;
}

.message-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px 2px 4px;
    background: white;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
}

.message-attachment-chip .attachment-chip-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.message-attachment-chip .attachment-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── "Current" badge on active file chip ─────────────────────────────── */
.attachment-current-badge {
    display: inline-block;
    padding: 0px 4px;
    margin-left: 2px;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.6;
    flex-shrink: 0;
}

/* ── Modes Settings Tab ────────────────────────────────────────────────── */

/* ── Modes Tab — Kilo Code style ────────────────────────────────────────── */

.modes-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.modes-select {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 0.92em;
    cursor: pointer;
}

.modes-select optgroup {
    font-weight: 700;
    font-size: 0.88em;
    color: var(--text-muted);
}

.modes-btn-group {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.modes-top-btn {
    white-space: nowrap;
}

/* Form area */

.modes-form-area {
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 16px;
    background: var(--background-secondary);
}

.modes-field {
    margin-bottom: 14px;
}

.modes-field-label {
    display: block;
    font-weight: 600;
    font-size: 0.88em;
    margin-bottom: 4px;
    color: var(--text-normal);
}

.modes-field-desc {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.4;
}

.modes-textarea {
    width: 100%;
    font-family: var(--font-monospace);
    font-size: 0.82em;
    padding: 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    resize: vertical;
    box-sizing: border-box;
}

.modes-textarea:disabled {
    opacity: 0.55;
    cursor: default;
}

.modes-groups-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 12px;
    padding: 8px 0;
}

.modes-group-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.modes-group-row input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Customized badge (built-in modes with user overrides) */

.modes-customized-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    margin-bottom: 12px;
    background: color-mix(in srgb, var(--interactive-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--interactive-accent) 30%, transparent);
    border-radius: 6px;
    font-size: 12px;
}

.modes-customized-icon {
    display: flex;
    align-items: center;
    color: var(--interactive-accent);
}

.modes-customized-icon svg {
    width: 13px;
    height: 13px;
}

.modes-customized-text {
    color: var(--interactive-accent);
    font-weight: 500;
}

.modes-restore-btn {
    font-size: 12px;
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
}

.modes-restore-btn:hover:not(:disabled) {
    color: var(--text-normal);
    border-color: var(--text-muted);
}

.modes-restore-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Bottom action bar */

.modes-bottom-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--background-modifier-border);
}

.modes-active-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-green);
    margin-right: auto;
}

.modes-export-btn {
    margin-left: auto;
}

.modes-delete-btn {
    margin-left: 4px;
}

.modes-preview-btn {
    /* sits before export — no extra margin needed */
}

/* Tools header row (label + Edit button) */

.modes-tools-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.modes-tools-header .modes-field-label {
    margin-bottom: 0;
}

.modes-edit-tools-btn {
    font-size: 0.8em;
    padding: 2px 10px;
    border: 1px solid var(--interactive-accent);
    color: var(--interactive-accent);
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.modes-edit-tools-btn:hover {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

.modes-tools-list {
    font-size: 0.88em;
    color: var(--text-muted);
    line-height: 1.6;
    display: block;
    margin-top: 2px;
}

.modes-tools-none {
    font-size: 0.88em;
    color: var(--text-faint);
    font-style: italic;
    display: block;
    margin-top: 2px;
}

.modes-group-desc {
    font-size: 0.82em;
    color: var(--text-muted);
    font-weight: normal;
}

/* Global Custom Instructions section */

.modes-global-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--background-modifier-border);
}

.modes-global-section h3 {
    margin-top: 0;
    margin-bottom: 6px;
}

/* ── System Prompt Preview Modal ───────────────────────────────────────── */

.system-prompt-preview-modal {
    max-width: 800px;
}

.system-prompt-preview-pre {
    font-family: var(--font-monospace);
    font-size: 0.78em;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 12px;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    overflow-y: auto;
    max-height: 70vh;
    color: var(--text-normal);
}

/* ── New Mode Modal ─────────────────────────────────────────────────────── */

.new-mode-modal .new-mode-groups {
    margin: 10px 0;
}

.new-mode-groups-label,
.new-mode-field-label {
    display: block;
    font-weight: 600;
    font-size: 0.88em;
    margin-bottom: 4px;
    color: var(--text-normal);
}

.new-mode-groups-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 12px;
    margin-bottom: 10px;
}

.new-mode-group-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.new-mode-textarea {
    width: 100%;
    font-family: var(--font-monospace);
    font-size: 0.82em;
    padding: 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    resize: vertical;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.new-mode-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.new-mode-field-desc {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.4;
}

.new-mode-location {
    margin: 10px 0;
}

.new-mode-loc-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
}

.new-mode-loc-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.88em;
}

/* Backup section */

.agent-backup-section {
    margin-bottom: 24px;
}

.agent-backup-section h4 {
    margin: 16px 0 8px;
    font-size: 14px;
    font-weight: 600;
}

.agent-backup-category-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.agent-backup-category-row {
    display: flex;
    align-items: center;
}

.agent-backup-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
}

.agent-backup-label input[type="checkbox"] {
    flex-shrink: 0;
}

.agent-backup-label-text {
    display: inline;
}

.agent-backup-label-name {
    font-weight: 500;
}

.agent-backup-label-desc {
    color: var(--text-muted);
}

.agent-backup-label-stats {
    color: var(--text-faint);
    font-size: 12px;
}

.agent-backup-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.agent-backup-import-info {
    color: var(--text-muted);
    font-size: 13px;
    margin: 4px 0 8px;
}

.agent-backup-warning {
    color: var(--text-error);
    font-size: 12px;
    margin: 8px 0 4px;
}

/* ── Operation Log ─────────────────────────────────────────────────── */
.agent-log-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.agent-log-date-select {
    flex: 1;
    max-width: 160px;
}

.agent-log-table-wrap {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    margin-bottom: 8px;
}

.agent-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.agent-log-table th,
.agent-log-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--background-modifier-border);
    text-align: left;
    white-space: nowrap;
}

.agent-log-table thead th {
    background: var(--background-secondary);
    font-weight: 600;
    color: var(--text-muted);
    position: sticky;
    top: 0;
}

.agent-log-success { color: var(--color-green); font-weight: 600; }
.agent-log-error   { color: var(--color-red);   font-weight: 600; }
.agent-log-error-msg { color: var(--text-muted); font-size: 11px; }

.agent-log-row-expandable { cursor: pointer; }
.agent-log-row-expandable:hover { background: var(--background-secondary); }
.agent-log-row-expanded { background: var(--background-secondary); }

.agent-log-detail-row td { padding: 0 8px 8px; }
.agent-log-hidden { display: none; }

.agent-log-detail-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 6px 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agent-log-detail-content {
    font-size: 11px;
    line-height: 1.4;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 6px 8px;
    margin: 0 0 4px;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.agent-log-detail-error {
    border-color: var(--color-red);
    color: var(--color-red);
}

.agent-log-download-btn {
    font-size: 12px;
}

/* ── Rules tab ─────────────────────────────────────────────────────── */
.agent-rules-create-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.agent-rules-name-input {
    flex: 1;
}

.agent-rules-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.agent-rules-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    font-size: var(--font-ui-small);
    border-bottom: 1px solid var(--background-modifier-border-hover);
}

.agent-rules-row:last-child {
    border-bottom: none;
}

/* ── Plugin Skills compact table ── */
.agent-skill-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* Empty state text (no background box) */
.agent-empty-state {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 0;
    margin: 0;
}

/* Collapsible skill group headers */
.agent-skill-group-header {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 6px 0;
    font-weight: var(--font-semibold);
    font-size: var(--font-ui-medium);
    color: var(--text-normal);
    user-select: none;
}
.agent-skill-group-header:hover {
    color: var(--text-accent);
}
.agent-skill-group-chevron {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}
.agent-skill-group-chevron svg {
    width: 16px;
    height: 16px;
}
.agent-skill-group-collapsed {
    display: none;
}

/* Shares the visual language of the Models/Providers table (.model-table):
   boxed with a filled header bar, so every list across the settings reads the
   same (IMP-04-10-01). Columns/cells stay context-specific.
   The border/radius live on a wrapper div (.agent-table-box): a <table> with
   border-collapse: collapse ignores border-radius and overflow clipping, so
   the box must be an outer block element. */
.agent-table-box {
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.agent-skill-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 0;
    table-layout: fixed;
}

.agent-skill-table thead th {
    text-align: left;
    padding: 5px 8px;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 10px;
    background: var(--background-secondary);
    border-bottom: 1px solid var(--background-modifier-border);
}

.agent-skill-th-status { width: 16px; }
.agent-skill-th-cmds { width: 80px; }
.agent-skill-th-actions { width: 80px; }
.agent-skill-th-toggle { width: 50px; text-align: center; }

.agent-skill-table tbody tr {
    border-bottom: 1px solid var(--background-modifier-border);
}

.agent-skill-table tbody tr:last-child {
    border-bottom: none;
}

.agent-skill-table tbody tr:hover {
    background: var(--background-modifier-hover);
}

.agent-skill-table tbody tr.agent-skill-disabled {
    opacity: 0.5;
}

.agent-skill-table td {
    padding: 3px 8px;
    vertical-align: middle;
}

.agent-skill-status-cell {
    width: 16px;
    text-align: center;
}

.agent-skill-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.agent-skill-dot-on {
    background: var(--color-green);
}

.agent-skill-dot-off {
    background: var(--text-faint);
}

.agent-skill-name-cell {
    vertical-align: top;
    padding-top: 5px;
    padding-bottom: 5px;
    word-wrap: break-word;
    overflow: hidden;
    overflow-wrap: break-word;
}

.agent-skill-name {
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.agent-skill-desc {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 1px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.agent-skill-desc-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* FIX-29-05-01: SKILL.md files rejected by frontmatter validation. */
.agent-skill-rejected-box {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--background-modifier-border);
    border-left: 3px solid var(--text-warning);
    border-radius: var(--radius-s);
    background-color: var(--background-secondary);
}

.agent-skill-rejected-box h4 {
    margin: 0 0 4px;
    font-size: var(--font-ui-small);
    color: var(--text-normal);
}

.agent-skill-rejected-desc {
    margin: 0 0 8px;
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    line-height: 1.4;
}

.agent-skill-rejected-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.agent-skill-rejected-list li {
    margin-bottom: 8px;
}

.agent-skill-rejected-name {
    font-weight: var(--font-semibold);
    color: var(--text-normal);
}

.agent-skill-rejected-reason {
    font-size: var(--font-ui-smaller);
    color: var(--text-warning);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.agent-skill-rejected-path {
    font-size: var(--font-ui-smaller);
    color: var(--text-faint);
    font-family: var(--font-monospace);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.agent-skill-source-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.agent-skill-source-bundled,
.agent-skill-source-builtin {
    background-color: var(--background-modifier-success);
    color: var(--text-on-accent);
}

.agent-skill-source-agent,
.agent-skill-source-learned {
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
}

/* Legacy `pro` renders as User: the tier is gone, and a purple badge would
   claim a provenance the skill no longer has. */
.agent-skill-source-user,
.agent-skill-source-pro {
    background-color: var(--background-modifier-border);
    color: var(--text-muted);
}

.agent-skill-source-registry {
    background-color: var(--color-cyan, #0e7490);
    color: var(--text-on-accent);
}

.agent-skill-cmd-cell {
    width: 80px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    word-break: keep-all;
    overflow: visible;
    white-space: nowrap;
}

.agent-skill-actions-cell {
    width: 100px;
    text-align: right;
    white-space: nowrap;
}

/* Borderless icon button used in skill rows. Higher specificity via
   the table-cell ancestor wins over Obsidian's default .setting-item
   button styling. Matches the chat-toolbar button look (transparent,
   icon-only). */
.agent-skill-actions-cell button.agent-skill-action-btn,
.agent-skill-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
}

.agent-skill-action-btn svg {
    width: 14px;
    height: 14px;
}

.agent-skill-actions-cell button.agent-skill-action-btn:hover,
.agent-skill-action-btn:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
    box-shadow: none;
}

.agent-skill-action-btn-faint {
    opacity: 0.3;
}

/* ---------------------------------------------------------------------------
 * Generic borderless icon-only buttons across the Settings tab.
 *
 * Targets any <button> inside .agent-settings that has a direct <svg> child
 * AND no other direct children (i.e. setIcon() was called on it and there
 * is no accompanying label text). Text-buttons (Create, Import, Reload,
 * Save) and CTA-styled buttons (.mod-cta) keep their default look so
 * primary actions stay visually distinct.
 *
 * FIX-29-17 (Review-Bot CSS-lint, post v2.11.7): replaced the
 * `:has() / :not(:has())` selector chain with an explicit class set by
 * `decorateIconOnlyButtons(root)` at render time (called from
 * AgentSettingsTab.buildTabContent). Same pattern the codebase already
 * applies for MemoryViewerModal (line ~3562) and the message-loading
 * container (line ~4153). Drops the broad style-invalidation cost of
 * `:has()` flagged by the bot.
 * ------------------------------------------------------------------------ */
.agent-settings button.agent-icon-only-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
}

.agent-settings button.agent-icon-only-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
    box-shadow: none;
}

.agent-settings button.agent-icon-only-btn svg {
    width: 14px;
    height: 14px;
}

.agent-settings button.agent-icon-only-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.agent-skill-toggle-cell {
    width: 50px;
    text-align: center;
}

.agent-skill-toggle.checkbox-container {
    transform: scale(0.75);
    margin: 0 auto;
}

.agent-rules-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    font-size: var(--font-ui-small);
}

.agent-rules-actions {
    display: flex;
    gap: 4px;
}

.agent-rules-toggle.checkbox-container {
    transform: scale(0.75);
    flex-shrink: 0;
    margin-left: 4px;
}

/* Inside a table toggle cell, center like the Skills toggles. */
.agent-skill-toggle-cell .agent-rules-toggle.checkbox-container {
    margin: 0 auto;
}

.agent-rules-edit-btn,
.agent-rules-export-btn,
.agent-rules-delete-btn {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.agent-rules-edit-btn:hover,
.agent-rules-export-btn:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}
.agent-rules-delete-btn:hover {
    color: var(--color-red);
    background: var(--background-modifier-hover);
}
.agent-rules-edit-btn svg,
.agent-rules-export-btn svg,
.agent-rules-delete-btn svg {
    width: 14px;
    height: 14px;
}

.agent-rules-import-btn {
    font-size: 12px;
    padding: 2px 8px;
}

.agent-workflow-slug {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-monospace);
    background: var(--background-modifier-hover);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 4px;
    white-space: nowrap;
}

/* As the first element of a table sub-line the pill needs no lead-in gap. */
.agent-skill-desc > .agent-workflow-slug:first-child { margin-left: 0; }

/* ── Autocomplete dropdown (Sprint B3) ──────────────────────────────── */
.autocomplete-dropdown {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 100;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
}

.autocomplete-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--background-modifier-border-hover);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--background-modifier-hover);
}

.autocomplete-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.autocomplete-label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.autocomplete-tag {
    font-size: 9px;
    color: var(--text-on-accent);
    background: var(--interactive-accent);
    padding: 0 5px;
    border-radius: 3px;
    flex-shrink: 0;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* FEAT-02-11: file vs folder tag variants. File = light grey chip,
   folder = darker grey chip. Skills/prompts/workflows keep the accent
   colour because they omit tagVariant. */
.autocomplete-tag.tag-file {
    color: var(--text-muted);
    background: var(--background-modifier-border);
    opacity: 1;
}

.autocomplete-tag.tag-folder {
    color: var(--text-normal);
    background: var(--background-modifier-border-hover);
    opacity: 1;
}

.autocomplete-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-monospace);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Per-model temperature controls (ModelConfigModal) ────────────── */

.mcm-temperature-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.mcm-temperature-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mcm-temperature-toggle-label {
    font-size: 12px;
    color: var(--text-normal);
    cursor: pointer;
}

.mcm-temperature-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mcm-temperature-slider {
    flex: 1;
    cursor: pointer;
}

.mcm-temperature-value {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-normal);
    min-width: 32px;
    text-align: right;
}

.mcm-temperature-note {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}



/* ── Chat History Modal ──────────────────────────────────────────────── */
.chat-history-modal { min-width: 400px; }

.chat-history-list { display: flex; flex-direction: column; gap: 8px; }

.chat-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-secondary);
}

.chat-history-info { flex: 1; min-width: 0; }

.chat-history-title {
    font-weight: 500;
    font-size: var(--font-ui-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-history-date {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin-top: 2px;
}

.chat-history-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.chat-history-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
}

.chat-history-delete-btn:hover { color: var(--color-red); }

.chat-history-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 24px 0;
}

/* ── ApproveEditModal ────────────────────────────────────────────────── */
.approve-edit-modal { min-width: 520px; max-width: 800px; }

.approve-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}

.approve-edit-path {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.approve-edit-path-icon { display: inline-flex; align-items: center; flex-shrink: 0; }

.approve-edit-stats { display: flex; gap: 8px; flex-shrink: 0; font-weight: 600; font-size: var(--font-ui-small); }
.diff-stat-added  { color: var(--color-green); }
.diff-stat-removed { color: var(--color-red); }
.diff-stat-none   { color: var(--text-muted); font-weight: normal; }

.approve-edit-diff {
    font-family: var(--font-monospace);
    font-size: var(--font-ui-smaller);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    overflow: auto;
    max-height: 420px;
    background: var(--background-primary);
    margin-bottom: 16px;
}

.diff-line {
    display: flex;
    gap: 4px;
    padding: 1px 8px;
    line-height: 1.5;
}

.diff-line-added   { background: rgba(var(--color-green-rgb, 68,196,68), 0.12); border-left: 3px solid var(--color-green); }
.diff-line-removed { background: rgba(var(--color-red-rgb, 240,60,60), 0.12);   border-left: 3px solid var(--color-red);   }
.diff-line-unchanged { border-left: 3px solid transparent; }

.diff-line-prefix {
    color: var(--text-muted);
    user-select: none;
    flex-shrink: 0;
    width: 12px;
}

.diff-line-added   > .diff-line-prefix { color: var(--color-green); }
.diff-line-removed > .diff-line-prefix { color: var(--color-red); }

.diff-line-content { white-space: pre-wrap; word-break: break-all; }

/* Side-by-side diff rows */
.diff-row {
    display: flex;
}

.diff-side {
    flex: 1;
    display: flex;
    gap: 4px;
    padding: 1px 8px;
    line-height: 1.5;
    min-width: 0;
    overflow: hidden;
}

.diff-side-old { border-right: 1px solid var(--background-modifier-border); }

.diff-side.diff-line-added   { background: rgba(var(--color-green-rgb, 68,196,68), 0.12); }
.diff-side.diff-line-removed { background: rgba(var(--color-red-rgb, 240,60,60), 0.12); }

.diff-side-empty {
    background: var(--background-secondary);
    min-height: 1.5em;
}

.diff-collapse-btn {
    display: block;
    width: 100%;
    background: var(--background-secondary);
    border: none;
    border-top: 1px solid var(--background-modifier-border);
    border-bottom: 1px solid var(--background-modifier-border);
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    padding: 4px 8px;
    cursor: pointer;
    text-align: left;
}

.diff-collapse-btn:hover { color: var(--text-normal); background: var(--background-modifier-hover); }

.approve-edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.approve-edit-reject { color: var(--color-red); }

/* ── DiffReviewModal ─────────────────────────────────────────────────── */
.diff-review-modal {
    width: 70vw;
    height: 70vh;
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
}
.diff-review-modal .modal-content { flex: 1; overflow-y: auto; min-height: 0; }

/* Semantic Group (replaces per-hunk containers) */
.diff-semantic-group {
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    margin: 8px 0;
    overflow: hidden;
}
.diff-group-approved { border-color: var(--color-green); }
.diff-group-rejected { border-color: var(--color-red); opacity: 0.5; }

/* Section Header */
.diff-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--background-secondary);
    border-bottom: 1px solid var(--background-modifier-border);
    font-size: var(--font-ui-small);
}
.diff-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-normal);
}
.diff-section-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-muted);
}
.diff-section-stats {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    font-size: var(--font-ui-smaller);
}
.diff-section-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Section Buttons */
.diff-section-btn {
    padding: 2px 10px;
    font-size: 11px;
    border-radius: 3px;
    border: 1px solid var(--background-modifier-border);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
}
.diff-section-keep:hover { border-color: var(--color-green); color: var(--color-green); }
.diff-section-undo:hover { border-color: var(--color-red); color: var(--color-red); }
.diff-section-edit:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Section body (diff lines) */
.diff-section-body {
    font-family: var(--font-monospace);
    font-size: var(--font-ui-smaller);
}

/* Section Editor Textarea */
.diff-section-editor {
    padding: 8px 10px;
    border-top: 1px solid var(--background-modifier-border);
    background: var(--background-primary-alt);
}
.diff-section-editor-label {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin-bottom: 6px;
}
.diff-section-textarea {
    width: 100%;
    min-height: 60px;
    max-height: 300px;
    font-family: var(--font-monospace);
    font-size: var(--font-ui-smaller);
    line-height: 1.5;
    padding: 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    resize: vertical;
    box-sizing: border-box;
}
.diff-section-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}
.diff-section-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}

/* Checkpoint diff header */
.checkpoint-diff-header {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Footer */
.diff-review-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--background-modifier-border);
    margin-top: 12px;
}
.diff-review-reject-all { color: var(--color-red); }
.diff-review-accept-selected:disabled { opacity: 0.4; }

/* ─── MCP Settings Tab ─────────────────────────────────────────── */

.agent-mcp-add-btn { margin: 12px 0; }

/* IMP-14-03-01: relay worker is older than the bundled one. */
.mcp-worker-outdated {
    color: var(--text-warning);
    font-weight: var(--font-semibold);
}

/* Server list renders as the same table layout as the Skills tab
 * (FEAT-04-10 design pass): status | name+desc | source | actions. */
.agent-mcp-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
}
.agent-mcp-status-dot.connected     { background: var(--color-green); }
.agent-mcp-status-dot.disconnected  { background: var(--text-faint); }
.agent-mcp-status-dot.error         { background: var(--color-red); }
.agent-mcp-status-dot.connecting    { background: var(--color-yellow); }
.agent-mcp-status-dot.awaiting-auth { background: var(--color-yellow); }

/* 3 icon buttons (24px) + gaps + cell padding without shrink. */
.agent-mcp-th-actions,
.agent-th-actions { width: 104px; }
.agent-mcp-actions-cell,
.agent-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}
.agent-mcp-desc-error { color: var(--color-red); }

/* Registry discovery (FEAT-04-11) */
.agent-mcp-discover-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
}
.agent-mcp-discover-input { flex: 1; }
.agent-mcp-discover-warn {
    color: var(--text-warning);
    font-size: var(--font-smaller);
    font-weight: var(--font-semibold);
}
.agent-mcp-th-publisher { width: 120px; }
/* Discovery rows have a tall 3-line name cell; align the pill and the
 * Details button to the top so they sit next to the server NAME, not at
 * the vertical middle where they read as disjoint from the row. */
.agent-mcp-discover-table td { vertical-align: top; }
.agent-mcp-discover-table .agent-skill-cmd-cell { padding-top: 4px; }
.agent-mcp-discover-action {
    text-align: right;
    vertical-align: top;
    padding: 2px 8px 0;
    white-space: nowrap;
}
.agent-mcp-discover-more { margin: 8px 0 4px; }
/* Unverified trust pill: outline, deliberately unassertive. */
.agent-mcp-trust-none {
    background: transparent;
    border: 1px solid var(--background-modifier-border);
    color: var(--text-muted);
}
.agent-mcp-discover-links {
    display: flex;
    gap: 16px;
    margin: 4px 0 8px;
}
.agent-mcp-setup-steps {
    font-size: 12px;
    color: var(--text-muted);
    margin: 8px 0;
    padding-left: 20px;
}
.agent-mcp-setup-steps li { margin: 3px 0; }
.agent-mcp-setup-get {
    display: inline-block;
    margin: 4px 0 12px;
    text-decoration: none;
}
/* Discovery details modal: one consistent type scale. */
.agent-mcp-detail-desc {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.agent-mcp-detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 12px;
    margin: 0 0 12px;
}
.agent-mcp-detail-label { color: var(--text-muted); }
.agent-mcp-detail-value { color: var(--text-normal); word-break: break-word; }
.agent-mcp-detail-next {
    font-size: 12px;
    color: var(--text-normal);
    background: var(--background-secondary);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0 0 12px;
}
.agent-mcp-link-secondary { color: var(--text-muted); font-size: var(--font-smaller); }

/* MCP Add/Edit modal */
.agent-mcp-modal-input {
    width: 100%;
    margin: 4px 0 12px;
    padding: 4px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-secondary);
    color: var(--text-normal);
    font-family: var(--font-monospace);
    font-size: var(--font-smaller);
    box-sizing: border-box;
}
.agent-mcp-section { margin-bottom: 8px; }
.agent-mcp-modal-save { margin-top: 8px; }

/* ─── Custom Prompts Tab ───────────────────────────────────────── */

.agent-prompt-builtin-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }

.agent-prompt-builtin-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--background-modifier-border);
}
.agent-prompt-builtin-name  { font-weight: 600; min-width: 130px; }
.agent-prompt-builtin-desc  { color: var(--text-muted); font-size: var(--font-smaller); }

.agent-prompt-form {
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-secondary);
}
.agent-prompt-form-title { font-weight: 600; margin: 0 0 8px; }
.agent-prompt-input {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 4px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    box-sizing: border-box;
}
.agent-prompt-textarea {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 4px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-family: var(--font-monospace);
    font-size: var(--font-smaller);
    resize: vertical;
    box-sizing: border-box;
}
.agent-prompt-form-btns { display: flex; gap: 8px; }
.agent-prompt-add-btn   { margin-bottom: 12px; }
.agent-prompt-mode-row  { display: flex; align-items: flex-start; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.agent-prompt-mode-label { font-size: var(--font-smaller); color: var(--text-muted); }
.agent-prompt-mode-select { width: 100%; }
.agent-prompt-mode-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-on-accent);
    background: var(--interactive-accent);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Tool Picker Popover (Copilot style) ───────────────────────────────── */
.tool-picker-popover {
    position: var(--tp-pos, fixed);
    z-index: 1000;
    top: var(--tp-top);
    bottom: var(--tp-bottom);
    left: var(--tp-left);
    width: var(--tp-w);
    min-width: var(--tp-min-w, 320px);
    max-width: var(--tp-max-w, 400px);
    max-height: var(--tp-max-h, 520px);
    background: var(--background-primary);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: none;
}

.tool-picker-header {
    padding: 10px 12px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.tool-picker-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-normal);
}

.tool-picker-count {
    font-size: 11px;
    color: var(--text-faint);
}

.tool-picker-search {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--background-modifier-border);
    border-radius: 0;
    padding: 5px 12px;
    font-size: 12px;
    background: transparent;
    box-shadow: none;
    outline: none;
    flex-shrink: 0;
}

.tool-picker-scroll {
    overflow-y: auto;
    flex: 1;
    padding: 2px 0;
}

/* Top-level category row */
.tp-cat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    cursor: pointer;
    user-select: none;
}

.tp-cat-row:hover {
    background: var(--background-modifier-hover);
}

.tp-cat-arrow {
    font-size: 10px;
    color: var(--text-faint);
    display: inline-block;
    transition: transform 0.15s;
    flex-shrink: 0;
    width: 10px;
    text-align: center;
}

.tp-cat-row.is-open .tp-cat-arrow {
    transform: rotate(90deg);
}

.tp-cat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    flex: 1;
}

.tp-cat-group-cb {
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.tp-cat-body {
    /* display toggled by JS */
}

/* Sub-category row (tool group inside Built-In) */
.tp-subcat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 20px;
    cursor: pointer;
    user-select: none;
}

.tp-subcat-row:hover {
    background: var(--background-modifier-hover);
}

.tp-subcat-arrow {
    font-size: 9px;
    color: var(--text-faint);
    transition: transform 0.15s;
    flex-shrink: 0;
    width: 10px;
    text-align: center;
}

.tp-subcat-row.is-open .tp-subcat-arrow {
    transform: rotate(90deg);
}

.tp-subcat-icon {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-subcat-icon svg {
    width: 14px;
    height: 14px;
}

.tp-subcat-label {
    font-size: 12px;
    color: var(--text-normal);
    flex: 1;
    font-weight: 600;
}

.tp-subcat-body {
    /* display toggled by JS */
}

/* Individual item row */
.tp-item-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 48px;
}

/* Items under top-level categories (MCP/Skills/Workflows) —
   same indent as tool items under Built-In sub-categories */
.tp-item-indent-cat {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 48px;
}

.tp-item-row input[type="checkbox"],
.tp-item-indent-cat input[type="checkbox"] {
    order: 99;
    margin-left: auto;
}

.tp-item-row:hover,
.tp-item-indent-cat:hover {
    background: var(--background-modifier-hover);
}

.tp-item-name {
    font-size: 12px;
    color: var(--text-normal);
    flex-shrink: 0;
}

.tp-item-desc {
    font-size: 11px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.tp-empty-hint {
    display: block;
    font-size: 11px;
    color: var(--text-faint);
    font-style: italic;
    padding: 4px 10px 4px 28px;
}

/* FEAT-04-12: one-line "whose selection is this" hint under the per-agent
   MCP section of the tool picker. */
.tp-section-hint {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 10px 6px 28px;
}

/* EPIC-26 / FEAT-26-05 -- chat-header model picker rows.
   Flat list (no category indentation) + vertical label/desc stack. */
.chat-model-picker .tp-item-row.chat-model-picker-row {
    padding: 6px 10px;
    cursor: pointer;
    gap: 10px;
}
.chat-model-picker .tp-item-label-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.chat-model-picker .tp-item-label {
    font-size: 12px;
    color: var(--text-normal);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-model-picker .tp-item-desc {
    /* override the auto-flex from .tp-item-desc so the description
       sits below the label, not in a wide flex cell to the right */
    flex: 0 0 auto;
}
.chat-model-picker .tp-item-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
}
.chat-model-picker .tp-item-icon svg { width: 14px; height: 14px; }

.chat-model-picker-check {
    display: inline-flex;
    align-items: center;
    color: var(--text-accent);
    margin-left: auto;
}
.chat-model-picker-check svg { width: 14px; height: 14px; }

/* Provider switcher chips (issue #48.5) */
.chat-model-picker-providers {
    padding: 6px 8px;
    border-bottom: 1px solid var(--background-modifier-border);
}
.chat-model-picker-providers .dropdown {
    width: 100%;
}

/* Tier badge -- small pill next to the model name */
.chat-model-picker-tier {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 8px;
    color: var(--text-on-accent, white);
    background: var(--text-muted);
}
.chat-model-picker-tier-fast     { background: #5c6bc0; }
.chat-model-picker-tier-mid      { background: #2e7d32; }
.chat-model-picker-tier-flagship { background: #c27c4a; }
/* FIX-55-01: badge for manually typed tier-override ids (issue #55) */
.chat-model-picker-manual-badge {
    background: var(--background-modifier-border);
    color: var(--text-muted);
}

.chat-model-picker-auto {
    border-bottom: 1px solid var(--background-modifier-border);
    margin-bottom: 4px;
}

/* Issue #44: per-conversation thinking binary switch.
   A pill track with a sliding knob, accent-filled when on. */
.chat-model-picker-thinking {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--background-modifier-border);
    padding: 8px 10px;
    flex-shrink: 0;
}

.chat-model-picker-thinking-label {
    font-size: 11px;
    color: var(--text-muted);
}

.chat-model-picker-thinking-switch {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 18px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 999px;
    background: var(--background-modifier-border);
    cursor: pointer;
    transition: background 0.12s ease;
}

.chat-model-picker-thinking-switch.is-on {
    background: var(--interactive-accent);
    border-color: var(--interactive-accent);
}

.chat-model-picker-thinking-knob {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--background-primary);
    transition: transform 0.12s ease;
}

.chat-model-picker-thinking-switch.is-on .chat-model-picker-thinking-knob {
    transform: translateX(16px);
}

.chat-model-picker-thinking-switch:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.chat-model-picker-thinking-state {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-normal);
    min-width: 22px;
    text-align: right;
}

/* IMP-54-05a: one-line discoverability hint sitting where the effort slider
   would be (thinking on, but Auto active or the pinned model resolves no
   effort levels). Muted, single line, toggled live with the thinking switch. */
.chat-model-picker-effort-hint {
    border-top: 1px solid var(--background-modifier-border);
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-faint);
    flex-shrink: 0;
}

/* Per-conversation reasoning-effort slider: a Claude-Code-style pill slider
   with discrete dot markers and a round knob, accent-filled up to the knob. */
.chat-model-picker-effort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--background-modifier-border);
    padding: 8px 10px;
    flex-shrink: 0;
}

.chat-model-picker-effort-labelwrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.chat-model-picker-effort-label {
    font-size: 11px;
    color: var(--text-muted);
}

.chat-model-picker-effort-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-normal);
}

/* A visible pill track with a round knob slightly larger than the pill so the
   circle stands proud above and below the track at every stop. The knob box
   always stays inside the pill horizontally (left travels 0..width-KNOB), so
   the full circle is visible at both extremes ('auto' flush-left, 'max'
   flush-right) without any visual clipping by the pill's rounded ends. */
.chat-model-picker-effort-pill {
    position: relative;
    width: 148px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--background-modifier-border);
    cursor: pointer;
    /* let a pointer drag move the knob without the list scrolling underneath */
    touch-action: none;
    /* knob overhangs the track vertically; never clip it. */
    overflow: visible;
}

/* Accent track filled up to the knob centre: KNOB_PX/2 + frac * (100% - KNOB_PX),
   with KNOB_PX = 18px, so the fill always ends exactly under the knob. */
.chat-model-picker-effort-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(9px + var(--effort-frac, 0) * (100% - 18px));
    border-radius: 999px;
    background: var(--interactive-accent);
    pointer-events: none;
}

.chat-model-picker-effort-dots {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 7.5px = knob-centre inset (9px) minus half a dot (1.5px), so the dot
       centres line up exactly with the knob stops. */
    padding: 0 7.5px;
    pointer-events: none;
}

.chat-model-picker-effort-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--background-primary);
    opacity: 0.65;
}

/* The knob: 18px circle that sits ON TOP of the 6px track. Its top-left
   travels from left=0 to left=width-18px, so the full circle is always
   visible inside the pill's horizontal bounding box -- flush-left at 'auto'
   and flush-right at 'max' without any visual clipping. */
.chat-model-picker-effort-knob {
    position: absolute;
    top: 50%;
    left: calc(var(--effort-frac, 0) * (100% - 18px));
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--background-primary);
    border: 2px solid var(--interactive-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.chat-model-picker-effort-pill:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

/* Issue #44: thinking-override badge on the chat-header model button */
/* Footer */
.tool-picker-footer {
    border-top: 1px solid var(--background-modifier-border);
    padding: 5px 10px;
    flex-shrink: 0;
}

.tool-picker-save-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
}

.tool-picker-save-btn:hover {
    color: var(--text-normal);
}

.tp-save-icon {
    display: flex;
    align-items: center;
}

.tp-save-icon svg {
    width: 12px;
    height: 12px;
}

/* ── Settings: Tool Group Accordion ────────────────────────────────────── */
.modes-tool-group-accordion {
    margin-bottom: 4px;
    border-radius: 6px;
    border: 1px solid var(--background-modifier-border);
    overflow: hidden;
}

.modes-tool-group-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    background: var(--background-secondary);
    list-style: none;
    user-select: none;
    transition: background 0.1s;
}

.modes-tool-group-summary:hover {
    background: var(--background-modifier-hover);
}

.modes-tool-group-summary::-webkit-details-marker { display: none; }

.modes-tool-group-label {
    font-weight: 500;
    font-size: 13px;
    flex: 1;
}

.modes-tool-count-badge {
    font-size: 11px;
    color: var(--text-faint);
    background: var(--background-primary);
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: auto;
    border: 1px solid var(--background-modifier-border);
}

.modes-tool-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0;
    background: var(--background-primary);
}

.modes-tool-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 10px 5px 28px;
    transition: background 0.08s;
}

.modes-tool-row:hover {
    background: var(--background-modifier-hover);
}

.modes-tool-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
}

/* Label container: stacked label + description */
.modes-tool-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
}

.modes-tool-label-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-normal);
}

.modes-tool-label-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ── Mode Editor: Forced Skills + Allowed MCP sections ─────────────────── */
.modes-skills-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0;
    background: var(--background-primary);
}

.modes-skills-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 10px 5px 28px;
    transition: background 0.08s;
}

.modes-skills-row:hover {
    background: var(--background-modifier-hover);
}

.modes-skills-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
}

.modes-skills-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-normal);
    cursor: pointer;
}

.modes-skills-desc {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 1px;
}

.modes-loading-hint {
    font-size: 11px;
    color: var(--text-faint);
    font-style: italic;
    padding: 6px 28px;
}

/* ── Global: Borderless buttons and selects inside the plugin ───────────── */
.agent-sidebar button,
.agent-settings-panel button {
    border: none;
}

.agent-sidebar select,
.agent-settings-panel select {
    border: none;
    background: var(--background-secondary);
}

/* Sub-category label font-weight merged into earlier .tp-subcat-label block. */

/* ── ContentEditorModal ──────────────────────────────────────────────────── */
.content-editor-modal {
    padding: 16px;
}

.content-editor-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
}

.content-editor-textarea {
    width: 100%;
    min-height: 360px;
    font-family: var(--font-monospace);
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--text-normal);
    resize: vertical;
    box-sizing: border-box;
}

.content-editor-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.content-editor-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-end;
}

/* ── Vault File Picker Popover ───────────────────────────────────────────── */
.vault-file-picker {
    position: var(--vfp-pos, fixed);
    z-index: 1000;
    top: var(--vfp-top);
    bottom: var(--vfp-bottom);
    left: var(--vfp-left);
    width: var(--vfp-w);
    min-width: 280px;
    max-width: 320px;
    max-height: var(--vfp-max-h, 280px);
    display: flex;
    flex-direction: column;
    background: var(--background-primary);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    padding: 0;
}

.vfp-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--background-modifier-border);
    flex-shrink: 0;
}

.vfp-search-icon {
    display: flex;
    align-items: center;
    color: var(--text-faint);
    flex-shrink: 0;
}

.vfp-search-icon svg { width: 13px; height: 13px; }

.vfp-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--text-normal);
    box-shadow: none;
}

.vfp-search-input::placeholder { color: var(--text-faint); }

.vfp-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.vfp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    cursor: pointer;
    user-select: none;
}

.vfp-row:hover,
.vfp-row-active { background: var(--background-modifier-hover); }

.vfp-row-checked { background: color-mix(in srgb, var(--interactive-accent) 8%, transparent); }

.vfp-row input[type="checkbox"] {
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--interactive-accent);
    pointer-events: none;
}

.vfp-row-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.vfp-row-name {
    font-size: 12px;
    color: var(--text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vfp-row-path {
    font-size: 10px;
    color: var(--text-faint);
    font-family: var(--font-monospace);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* FEAT-02-12: workflow "force" pin -- a secondary control on the row, pushed
   to the right, distinct from the primary click that inserts the workflow. */
.vfp-row-pin {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 3px;
    color: var(--text-faint);
    cursor: pointer;
}

.vfp-row-pin:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}

.vfp-row-pin svg {
    width: 14px;
    height: 14px;
}

.vfp-row-pin-active { color: var(--interactive-accent); }

.vfp-row-pinned { background: color-mix(in srgb, var(--interactive-accent) 8%, transparent); }

/* FEAT-02-12: chat "..." options popover -- toggle rows on top, action rows below. */
.chat-options-popover { padding: 4px; }

.cop-group { display: flex; flex-direction: column; }

.cop-group-actions {
    border-top: 1px solid var(--background-modifier-border);
    margin-top: 4px;
    padding-top: 4px;
}

.cop-toggle-row,
.cop-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
}

/* :not(.cop-toggle-row) keeps this a distinct selector from the shared
   block above (always true for an action row) so the bare .cop-action-row
   is not defined twice (review-bot Tier 7 duplicate-selector). */
.cop-action-row:not(.cop-toggle-row) { cursor: pointer; user-select: none; }

.cop-action-row:hover { background: var(--background-modifier-hover); }

.cop-row-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.cop-row-icon svg { width: 16px; height: 16px; }

.cop-row-label {
    font-size: 13px;
    color: var(--text-normal);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cop-row-toggle { flex-shrink: 0; display: flex; align-items: center; }

.vfp-empty {
    padding: 16px 10px;
    font-size: 12px;
    color: var(--text-faint);
    font-style: italic;
    text-align: center;
}

.vfp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-top: 1px solid var(--background-modifier-border);
    flex-shrink: 0;
    gap: 8px;
}

.vfp-count {
    font-size: 11px;
    color: var(--interactive-accent);
    font-weight: 500;
    flex: 1;
}

.vfp-add-btn {
    padding: 3px 12px;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
}

.vfp-add-btn:hover { opacity: 0.85; }

/* ─── History Panel ─────────────────────────────────────────────────────────── */

.history-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--background-primary);
    border-right: 1px solid var(--background-modifier-border);
    z-index: 10;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
}

.history-panel-open {
    transform: translateX(0);
}

.history-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--background-modifier-border);
    flex-shrink: 0;
}

.history-panel-title {
    font-size: 14px;
    font-weight: 700;
    font-family: Consolas, monospace;
    color: var(--text-normal);
}

.history-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
}

.history-panel-filter {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* BA-26 / FEAT-23-03: Source-Tabs */
.history-panel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 16px 8px;
    border-bottom: 1px solid var(--background-modifier-border);
    flex-shrink: 0;
}
.history-panel-tab {
    background: none;
    border: 1px solid var(--background-modifier-border);
    border-radius: 999px;
    padding: 3px 10px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.78em;
    line-height: 1.4;
}
.history-panel-tab:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}
.history-panel-tab-active {
    color: var(--text-on-accent);
    background: var(--interactive-accent);
    border-color: var(--interactive-accent);
}

/* BA-26 / FEAT-23-03: Source-Pill on conversation rows */
.history-row-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.history-row-source-pill {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: 500;
    background: var(--background-modifier-border);
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap;
}
.history-row-source-pill-claude-ai,
.history-row-source-pill-claude-code {
    background: rgba(204, 120, 92, 0.18);
    color: rgb(204, 120, 92);
}
.history-row-source-pill-chatgpt {
    background: rgba(16, 163, 127, 0.18);
    color: rgb(16, 163, 127);
}
.history-row-source-pill-perplexity {
    background: rgba(82, 82, 199, 0.18);
    color: rgb(82, 82, 199);
}

/* BA-26 / FEAT-23-04: Pending-Marker */
.history-row-pending-marker {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: 500;
    background: rgba(217, 161, 32, 0.18);
    color: rgb(217, 161, 32);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* FIX-23-01-01: Thread-Pill (klickbarer Filter-Button) auf Listeneintraegen.
   Style matched .history-row-source-pill 1:1, plus button-resets damit der
   Browser-Default fuer <button> nicht reinkommt. */
.history-row-thread-pill {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: 500;
    background: rgba(120, 80, 200, 0.16);
    color: rgb(120, 80, 200);
    line-height: 1.4;
    white-space: nowrap;
    border: none;
    margin: 0;
    box-shadow: none;
    cursor: pointer;
    font-family: inherit;
    height: auto;
    min-height: 0;
}
.history-row-thread-pill:hover {
    background: rgba(120, 80, 200, 0.28);
    box-shadow: none;
}

/* FIX-23-01-01: Thread-Filter-Chip (oben in der Sidebar wenn Filter aktiv) */
.history-panel-thread-chip-row {
    padding: 6px 16px 0;
    flex-shrink: 0;
}
.history-panel-thread-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    background: rgba(120, 80, 200, 0.18);
    color: rgb(120, 80, 200);
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 500;
}
.history-panel-thread-chip-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: rgb(120, 80, 200);
    line-height: 0;
}
.history-panel-thread-chip-close:hover {
    color: rgb(80, 50, 160);
}

.history-panel-memory-toggle {
    background: none;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    color: var(--text-muted);
    flex-shrink: 0;
}
.history-panel-memory-toggle:hover {
    color: var(--text-normal);
}
.history-panel-memory-toggle-active {
    color: var(--text-accent);
    border-color: var(--text-accent);
    background: var(--background-secondary);
}

.history-panel-filter-input {
    flex: 1 1 auto;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-secondary);
    color: var(--text-normal);
}

.history-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
}

.history-panel-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

.history-group-label {
    padding: 12px 8px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.history-row {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    gap: 8px;
}

.history-row:hover {
    background: var(--background-modifier-hover);
}

.history-row-active {
    background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
}

.history-row-info {
    flex: 1;
    min-width: 0;
}

.history-row-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-row-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.history-row-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

/* Hide hover-only buttons by default; reveal the whole bar on row hover. */
.history-row-action {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    opacity: 0;
}

.history-row:hover .history-row-action {
    opacity: 1;
}

/* Memory-pinned star styles already defined earlier (line 3081 area). */

.history-row-action:hover {
    color: var(--text-normal);
}

.history-row-action-danger:hover {
    color: var(--text-error);
}

/* ── Task Selection Modal (FEATURE-100) ─────────────────────────────── */

.task-selection-modal {
    max-width: 520px;
}

.task-selection-title {
    margin: 0 0 4px 0;
}

.task-selection-subtitle {
    margin: 0 0 12px 0;
    color: var(--text-muted);
    font-size: var(--font-ui-small);
}

.task-selection-toggle {
    margin-bottom: 8px;
    font-size: var(--font-ui-small);
}

.task-selection-toggle a {
    cursor: pointer;
    color: var(--text-accent);
}

.task-selection-list {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 16px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
}

.task-selection-item {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border-bottom: 1px solid var(--background-modifier-border);
}

.task-selection-item:last-child {
    border-bottom: none;
}

.task-selection-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.task-selection-checkbox {
    flex-shrink: 0;
    margin-top: 2px;
}

.task-selection-text {
    flex: 1;
    line-height: 1.4;
}

.task-selection-meta {
    margin-left: 26px;
    margin-top: 2px;
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

.task-selection-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Utility classes ──────────────────────────────────────────────────── */
/* Class repetition raises specificity to (0,2,0) so plain theme styles do
   not override these utilities without needing !important. */
.agent-u-hidden.agent-u-hidden { display: none; }
.agent-u-visibility-hidden.agent-u-visibility-hidden {
    opacity: 0;
    pointer-events: none;
}
.agent-u-cursor-pointer { cursor: pointer; }

/* Copy button spacing (SystemPromptPreviewModal) */
.agent-u-mb-12 { margin-bottom: 12px; }

/* EmbeddingsTab quick-setup guide */
.agent-embed-guide {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-left: 3px solid var(--interactive-accent);
    background: var(--background-secondary);
    border-radius: 4px;
}

/* ── Security warning callouts (Settings > Permissions) ────────────────── */
.agent-setting-warning {
    font-size: 11px;
    color: #d97706;
    margin-top: -8px;
    padding: 0 55px 8px 0;
    line-height: 1.4;
}
.agent-setting-warning-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 4px;
    color: #d97706;
}
.agent-setting-warning--high-risk .agent-setting-warning-icon {
    color: #d97706;
}
.agent-setting-warning-icon svg {
    width: 12px;
    height: 12px;
}
/* Disabled state for category toggles when master auto-approve is off */
.agent-approval-categories--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Condensation Feedback */
.condensation-feedback {
    display: flex;
    padding: 8px 12px;
    background: var(--background-secondary);
    border-radius: 4px;
    margin-bottom: 8px;
    border-left: 3px solid var(--interactive-accent);
}

.condensation-feedback-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    flex: 1;
}

.condensation-icon {
    color: var(--interactive-accent);
    flex-shrink: 0;
}

.condensation-title {
    font-weight: 600;
    color: var(--text-normal);
}

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

.condensation-cost {
    margin-left: auto;
    font-weight: 500;
    color: var(--text-accent);
}

/* Timeline Entry for Context Condensing (fallback badge) */
.context-condensed-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}

.context-condensed-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* ReviewBot: no-static-styles-assignment -- dismiss link for task hint */
.agent-u-task-hint-dismiss-link {
    display: block;
    margin-top: 6px;
    font-size: 0.85em;
}

/* ── Implicit Connection Suggestions (FEATURE-1506) ──────────────── */

.agent-suggestions-banner {
    border-top: 1px solid var(--background-modifier-border);
    background-color: var(--background-secondary);
    padding: 0;
    flex-shrink: 0;
}

.agent-suggestions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--text-muted);
}

.agent-suggestions-header:hover {
    color: var(--text-normal);
}

.agent-suggestions-toggle {
    display: flex;
    align-items: center;
}

.agent-suggestions-toggle svg {
    width: 14px;
    height: 14px;
}

.agent-suggestions-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.agent-suggestions-close {
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.agent-suggestions-close:hover {
    color: var(--text-normal);
}

.agent-suggestions-close svg {
    width: 14px;
    height: 14px;
}

.agent-suggestions-list {
    overflow: hidden;
    transition: max-height 0.2s ease;
    max-height: 300px;
}

.agent-suggestions-list.is-collapsed {
    max-height: 0;
}

.agent-suggestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    font-size: 0.78em;
    border-top: 1px solid var(--background-modifier-border-hover);
}

.agent-suggestion-item:hover {
    background-color: var(--background-modifier-hover);
}

.agent-suggestion-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-suggestion-link {
    color: var(--text-accent);
}

.agent-suggestion-arrow {
    color: var(--text-faint);
    margin: 0 2px;
}

.agent-suggestion-score {
    color: var(--text-faint);
    font-size: 0.9em;
}

.agent-suggestion-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
    flex-shrink: 0;
}

.agent-suggestion-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.agent-suggestion-btn:hover {
    background-color: var(--background-modifier-hover);
    color: var(--text-normal);
}

.agent-suggestion-btn svg {
    width: 14px;
    height: 14px;
}

.agent-suggestion-dismiss:hover {
    color: var(--text-error);
}

/* ── Connector Card (MCP Settings) ───────────────────────── */

.agent-mcp-connector-card {
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0 16px;
    background: var(--background-secondary);
}

.agent-mcp-connector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.agent-mcp-connector-name {
    font-weight: 600;
    font-size: 0.95em;
}

.agent-mcp-status-badge {
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.agent-mcp-status-badge.running {
    background: var(--color-green);
    color: var(--text-on-accent);
}

.agent-mcp-status-badge.enabled {
    background: var(--color-yellow);
    color: var(--text-on-accent);
}

.agent-mcp-status-badge.off {
    background: var(--background-modifier-border);
    color: var(--text-muted);
}

/* ── Relay Setup Wizard ──────────────────────────────── */

.agent-relay-step {
    margin: 12px 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--background-modifier-border-hover);
}

.agent-relay-step:last-child {
    border-bottom: none;
}

.agent-relay-step p {
    margin: 4px 0;
    font-size: 0.9em;
    color: var(--text-muted);
}

.agent-relay-step pre {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 6px 0;
    font-size: 0.85em;
    overflow-x: auto;
}

.agent-relay-step code {
    font-family: var(--font-monospace);
    white-space: pre;
}

/* ── Settings buttons: muted look across all Vault Operator tabs ──────────
 * Sebastian feedback 2026-05-20 (FEAT-29-01):
 * Plugin settings buttons should all render in the muted opacity used by
 * Obsidian's disabled-button state, regardless of enabled/disabled status.
 * Disabled-state cues come from the tooltip on hover plus the no-op notice
 * on click, not from a separate visual treatment. Selector scoped to the
 * Obsidian settings modal so other plugins are unaffected.
 */
.modal-container .vertical-tab-content .setting-item-control > button,
.modal-container .vertical-tab-content .setting-item-control > .clickable-icon,
.modal-container .vertical-tab-content .setting-item-control > .extra-setting-button {
    opacity: 0.65;
    transition: opacity 0.15s ease;
}
.modal-container .vertical-tab-content .setting-item-control > button:hover:not(:disabled),
.modal-container .vertical-tab-content .setting-item-control > .clickable-icon:hover,
.modal-container .vertical-tab-content .setting-item-control > .extra-setting-button:hover {
    opacity: 1;
}
.modal-container .vertical-tab-content .setting-item-control > button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* FEAT-29-09 SkillVersionsModal -- moved off element.style.setProperty */
.skill-version-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--background-modifier-border);
}
.skill-version-info { flex: 1; }
.skill-version-meta { font-size: 12px; }
.skill-version-actions { display: flex; gap: 4px; }

/* FEAT-29-08 PartialTranslationModal -- moved off element.style.setProperty */
.partial-translation-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}
.partial-translation-table th {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--background-modifier-border);
}
.partial-translation-table td { padding: 4px 8px; }
.partial-translation-heading { margin-top: 16px; }
.partial-translation-reason { font-size: 0.9em; }
.partial-translation-button-bar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* ── Inline-Editor-AI-Actions (EPIC-33) ───────────────────────────── */
.agent-inline-menu {
    position: absolute;
    z-index: 1000;
    background: var(--background-secondary);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    font-size: var(--font-ui-small);
    user-select: none;
}
.agent-inline-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: inherit;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
}
.agent-inline-menu__item:hover,
.agent-inline-menu__item:focus {
    background: var(--background-modifier-hover);
    outline: none;
}
.agent-inline-menu__item:active {
    background: var(--background-modifier-active-hover);
}
.agent-inline-action-preview {
    background: var(--background-primary-alt);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 0;
    font-size: var(--font-ui-small);
}
.agent-inline-action-preview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 600;
}
.agent-inline-action-preview__body {
    white-space: pre-wrap;
}
.agent-inline-action-preview__actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.agent-inline-diff-add {
    background: rgba(40, 167, 69, 0.18);
    border-bottom: 1px solid rgba(40, 167, 69, 0.6);
}
.agent-inline-diff-remove {
    background: rgba(220, 53, 69, 0.18);
    text-decoration: line-through;
    border-bottom: 1px solid rgba(220, 53, 69, 0.6);
}
.agent-inline-diff-hunk-actions {
    display: inline-flex;
    gap: 4px;
    margin-left: 4px;
}
.agent-inline-diff-hunk-actions button {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--background-modifier-hover);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    cursor: pointer;
}

/* ── Inline Chat Panel (EPIC-33 UX-refresh) ───────────────────────── */
.agent-inline-panel {
    position: absolute;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--background-primary);
    color: var(--text-normal);
    /* User feedback 2026-06-24 (round 3): bumped to the faint-text token
       and 2 px so the frame reads as a distinct enclosure against busy
       note backgrounds in both light and dark mode. Earlier
       `--background-modifier-border-hover` was still too subtle. */
    border: 2px solid var(--text-faint);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    font-size: var(--font-ui-small);
    /* overflow: visible so the @-mention / slash-command autocomplete
       dropdown can rise above the composer (the dropdown lives inside
       .chat-input-container and uses position:absolute + bottom:100%).
       The chat-bubble scroll area has its own overflow-y:auto, so the
       panel's content still scrolls properly. */
    overflow: visible;
}
/* FEAT-33-12: inline-block variant -- panel renders inside a CM6 block
   widget so it flows with the editor instead of overlaying it. Position is
   handled by the CM6 layout, the panel is full-width. `position: relative`
   (not static) so the absolute close button anchors to the panel itself
   (user feedback 2026-06-24 round 3: previously the X drifted into the
   composer area because it fell through to a far-away positioned
   ancestor when the panel was static). */
.agent-inline-panel--inline-block {
    position: relative;
    z-index: auto;
    width: 100%;
    max-height: 60vh;
    /* User feedback 2026-06-24 round 3: a full text line of breathing room
       above + below so the panel visually detaches from prose. Earlier
       0.75 em felt cramped. */
    margin: 1.5em 0;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}
/* The composer is the bottom-most child and carries its own background
   from the sidebar styles. With the panel's `overflow: visible` (needed
   so the autocomplete dropdown can escape the composer rect), the
   composer's square background was painting over the panel's rounded
   bottom corners. Round the composer's bottom corners to the same
   radius minus the border width so the visible curve stays continuous
   with the frame. (user feedback 2026-06-24 round 3) */
.agent-inline-panel .agent-inline-panel__composer {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: hidden;
}
.agent-inline-panel--inline-block .agent-inline-panel__drag-handle,
.agent-inline-panel--inline-block .agent-inline-panel__resize-handle {
    display: none;
}
/* Wrapper the CM6 block-widget hands to CodeMirror. Acts as a flex
   container so the panel can expand vertically without breaking the
   editor's line layout. overflow:visible so the autocomplete dropdown
   can escape the widget bounds (same reason as .agent-inline-panel). */
.agent-inline-chat-block {
    display: block;
    width: 100%;
    /* Matching breathing room on the CM6 block wrapper so the half-line
       margin is honored even if the inner panel's margin collapses with
       the wrapper. */
    margin: 0.75em 0;
    overflow: visible;
}

/* FEAT-33-12 (user feedback 2026-06-24): selection-affordance pill.
   Appears next to a settled selection and -- on click -- opens the
   inline chat. position:fixed so it floats independently of the
   editor scroll layer; left/top are set per-instance via setCssStyles
   based on the live selection rect. Keep this LIGHT: the pill must
   not feel like a modal or popover. */
/* FEAT-33-12 selection-affordance pill -- intentionally chromeless.
   Bare lucide icon in the accent colour, sitting above the top-right
   corner of the marked text. The class is doubled in the selector
   ('.agent-inline-action-pill.agent-inline-action-pill') to win over
   theme-level button rules that would otherwise paint a background or
   border. `appearance: none` neutralises the native button chrome.
   svg uses stroke: currentColor so the lucide stroke inherits the
   pill's color (which is what makes the accent colour visible idle). */
.agent-inline-action-pill.agent-inline-action-pill {
    position: fixed;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    background-color: transparent;
    background-image: none;
    color: var(--interactive-accent);
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    opacity: 1;
    transition: color 80ms ease-out, transform 80ms ease-out;
}
.agent-inline-action-pill.agent-inline-action-pill:hover,
.agent-inline-action-pill.agent-inline-action-pill:focus,
.agent-inline-action-pill.agent-inline-action-pill:focus-visible {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    outline: none;
}
.agent-inline-action-pill.agent-inline-action-pill:hover {
    color: var(--interactive-accent-hover, var(--interactive-accent));
    transform: scale(1.15);
}
/* :active merged (was a duplicate selector): the focus resets plus the
   scale(1) that cancels the hover scale. */
.agent-inline-action-pill.agent-inline-action-pill:active {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    outline: none;
    transform: scale(1);
}
.agent-inline-action-pill svg {
    width: 18px;
    height: 18px;
    color: inherit;
    stroke: currentColor;
    fill: none;
}

/* FEAT-33-12 (user feedback 2026-06-24): persistent highlight of the
   selection that triggered the inline chat. The native DOM selection
   disappears as soon as the user clicks into the chat composer, so we
   paint the same range as a CodeMirror mark decoration. The decoration
   survives focus changes and is cleaned up when the inline chat closes.
   Background colour is intentionally distinct from native selection so
   the user can tell "this is what the chat is working on" vs an active
   text selection. */
.agent-inline-selection-highlight {
    background-color: var(--text-selection);
    border-bottom: 2px solid var(--interactive-accent);
}
.agent-inline-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: var(--background-secondary);
    border-bottom: 1px solid var(--background-modifier-border);
}
/* Selection preview at the top of the panel. */
.agent-inline-panel__anchor {
    position: relative;
    padding: 8px 28px 8px 12px;
    background: var(--background-secondary);
    border-bottom: 1px solid var(--background-modifier-border);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.agent-inline-panel__anchor-label {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.agent-inline-panel__anchor-text {
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 4.4em;
    overflow: hidden;
}
.agent-inline-panel__anchor-text--expanded {
    max-height: 320px;
    overflow-y: auto;
}
/* Anchor-toggle: same frameless treatment as the close button.
   Obsidian default `button` background is forced to transparent via
   !important so no theme can re-introduce the tile on hover. */
/* Pattern M (class repetition) instead of !important: doubling the
 * class bumps specificity from (0,1,0) to (0,2,0) which beats both
 * `button { background: var(--interactive-normal) }` and most theme
 * `.popover button` overrides without the bot's avoid-!important
 * warning. Verified visually in the 3.0.x release. */
.agent-inline-panel__anchor-toggle.agent-inline-panel__anchor-toggle,
.agent-inline-panel__anchor-toggle.agent-inline-panel__anchor-toggle:hover,
.agent-inline-panel__anchor-toggle.agent-inline-panel__anchor-toggle:focus,
.agent-inline-panel__anchor-toggle.agent-inline-panel__anchor-toggle:active,
.agent-inline-panel__anchor-toggle.agent-inline-panel__anchor-toggle:focus-visible {
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}
.agent-inline-panel__anchor-toggle {
    position: absolute;
    bottom: 4px;
    right: 6px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.agent-inline-panel__anchor-toggle:hover {
    color: var(--text-normal);
}
.agent-inline-panel__anchor-toggle-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    line-height: 1;
}
.agent-inline-panel__anchor-toggle-icon svg {
    width: 14px;
    height: 14px;
}

/* Close button (absolute top-right corner). */
/* Close button: frameless icon button, mirrors the other icon
   buttons in the panel. NO background ever (Obsidian's default
   `button { background: var(--interactive-normal) }` would otherwise
   render a tile on hover). `!important` is the cleanest way to
   ensure no theme accidentally re-introduces the tile. */
/* Pattern M (class repetition): same approach as the anchor toggle
 * block above -- doubling the class bumps specificity to (0,2,0) so
 * the no-tile rule wins without `!important`. */
.agent-inline-panel__close.agent-inline-panel__close,
.agent-inline-panel__close.agent-inline-panel__close:hover,
.agent-inline-panel__close.agent-inline-panel__close:focus,
.agent-inline-panel__close.agent-inline-panel__close:active,
.agent-inline-panel__close.agent-inline-panel__close:focus-visible {
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}
.agent-inline-panel__close {
    position: absolute;
    top: 4px;
    right: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    z-index: 1;
}
.agent-inline-panel__close:hover {
    color: var(--text-normal);
}

/* Drag handle: slim strip at the top of the panel. Pointer drag
 * moves the whole window. Centered grip dots hint at the affordance
 * but stay subtle so the panel does not look like a system window. */
.agent-inline-panel__drag-handle {
    flex: 0 0 auto;
    height: 14px;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    user-select: none;
    -webkit-user-select: none;
    opacity: 0.55;
    transition: opacity 0.12s ease;
}
.agent-inline-panel__drag-handle::before {
    content: '⋯⋯';
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1;
}
.agent-inline-panel__drag-handle:hover {
    opacity: 0.95;
}

/* Resize handle: corner triangle in the bottom-right. Sits absolutely
 * inside the panel root so the body keeps its full flex extent. */
.agent-inline-panel__resize-handle {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg,
            transparent 0%, transparent 50%,
            var(--text-faint) 50%, var(--text-faint) 60%,
            transparent 60%, transparent 70%,
            var(--text-faint) 70%, var(--text-faint) 80%,
            transparent 80%);
    opacity: 0.6;
    z-index: 2;
}
.agent-inline-panel__resize-handle:hover {
    opacity: 1;
}

/* Message body (flex column, scrollable). */
.agent-inline-panel__body {
    flex: 1;
    min-height: 100px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.agent-inline-panel__body:empty {
    min-height: 40px;
}
/* Message bubbles -- mirror the sidebar's .message-content pattern:
   assistant text has NO background and NO border, user bubble carries
   a subtle accent-tint with asymmetric radius. Identical numbers as
   styles.css lines 350-484 (sidebar). */
.agent-inline-panel__bubble {
    padding: 7px 10px;
    border-radius: 8px;
    line-height: 1.45;
    font-size: 13px;
    white-space: normal;
    word-wrap: break-word;
    max-width: 100%;
    border: none;
    background: transparent;
    user-select: text;
    cursor: text;
}
.agent-inline-panel__bubble--user {
    background: color-mix(in srgb, var(--interactive-accent) 20%, var(--background-primary));
    color: var(--text-normal);
    align-self: flex-end;
    max-width: 85%;
    border-radius: 12px 12px 4px 12px;
    padding: 6px 11px;
    border: none;
}
.agent-inline-panel__bubble--assistant {
    background: transparent;
    border: none;
    align-self: stretch;
    max-width: 100%;
    padding: 4px 2px;
}
.agent-inline-panel__bubble--system {
    background: transparent;
    align-self: center;
    font-size: var(--font-ui-smaller);
    font-style: italic;
    color: var(--text-muted);
    border: none;
}
/* Rendered Markdown inside the assistant bubble: same paragraph
   spacing + heading treatment as the sidebar .message-content. */
.agent-inline-panel__bubble--assistant p {
    margin: 0 0 8px 0;
}
.agent-inline-panel__bubble--assistant p:last-child { margin-bottom: 0; }
.agent-inline-panel__bubble--assistant ul,
.agent-inline-panel__bubble--assistant ol {
    margin-left: 0;
    padding-left: 16px;
    margin-bottom: 8px;
}
.agent-inline-panel__bubble--assistant li { margin-bottom: 4px; }
.agent-inline-panel__bubble--assistant h1,
.agent-inline-panel__bubble--assistant h2,
.agent-inline-panel__bubble--assistant h3,
.agent-inline-panel__bubble--assistant h4 {
    margin-top: 14px;
    margin-bottom: 8px;
    font-weight: 600;
}
.agent-inline-panel__bubble--assistant h1:first-child,
.agent-inline-panel__bubble--assistant h2:first-child,
.agent-inline-panel__bubble--assistant h3:first-child {
    margin-top: 0;
}
.agent-inline-panel__bubble--assistant code {
    background: var(--background-secondary);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.92em;
}
.agent-inline-panel__bubble--assistant pre {
    background: var(--background-secondary);
    padding: 8px 10px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 8px 0;
}
.agent-inline-panel__bubble--assistant pre code {
    background: transparent;
    padding: 0;
}

/* Status pill. */
.agent-inline-panel__status {
    padding: 4px 12px;
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    border-top: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
}
.agent-inline-panel__status--error {
    color: var(--text-error);
    background: var(--background-modifier-error-hover);
}

/* Composer wrapper inside the panel: cap padding so the sidebar
   styles do not push the panel beyond its width budget. */
.agent-inline-panel__composer {
    border-top: 1px solid var(--background-modifier-border);
    padding: 6px 8px;
}
/* Lookup-Button is the inline-specific quick-action sitting next to "+". */
.agent-inline-panel .lookup-button {
    /* Inherits .toolbar-button base styling from the sidebar; no extra
       rules needed beyond hover hint that matches the sidebar buttons. */
}
.agent-inline-panel .lookup-button:hover {
    color: var(--interactive-accent);
}
/* Constrain the composer textarea so it fits the panel width. */
.agent-inline-panel .chat-textarea {
    min-height: 60px;
    max-height: 140px;
}

/* ── EditReviewPanel: the approval gate (FEAT-44-15 redesign) ─────────
 *
 * The gate is what the user reads before the agent writes, so it has to be
 * readable first and pretty second.
 *
 * The one structural rule: there is ONE scroll container (`__body`) holding ONE
 * row element per diff line, and each row is a two-column grid. A grid row is as
 * tall as its tallest cell, so when a German paragraph wraps to three lines on
 * the left and one on the right, BOTH cells become three lines tall and the two
 * sides stay in lock-step. No JavaScript, no scroll syncing, no measuring.
 *
 * The previous build had two independent scroll containers, which cannot work:
 * that is diff2html's long-standing bug (#99) -- when a line wraps in one table,
 * the other table has no way to learn about it.
 */

/* `.agent-edit-review-modal` lands on the `.modal` element itself, so the
 * selector must be `.modal.agent-edit-review-modal`. Repeating the class lifts
 * specificity above Obsidian's own `.modal` width rules without `!important`. */
.modal.agent-edit-review-modal.agent-edit-review-modal.agent-edit-review-modal {
    /* Capped, not 95vw. On a wide monitor 95vw gave each column ~1000px, which is
     * roughly 130 characters of prose -- you have to move your head to take one
     * line in, and comparing two of them side by side stops working. 1240px total
     * puts each column near 70 characters, which is the range typography has
     * agreed on for a century. */
    width: min(1240px, 95vw);
    min-width: min(900px, 96vw);
    max-width: min(1240px, 95vw);
    height: 88vh;
    max-height: 88vh;
}
.modal.agent-edit-review-modal .modal-content {
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.agent-edit-review {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 420px;
    background: var(--background-primary);
    color: var(--text-normal);

    /* Colour tokens. Only --color-red/-green/-blue/-orange and their -rgb
     * variants are reliable across themes; --background-modifier-error is a
     * solid dark red in some themes and a soft tint in others, so it is unusable
     * for a tint. The row tint stays soft and the word highlight carries the
     * signal -- that is the pattern every mature diff converged on. */
    --vo-add-row: rgba(var(--color-green-rgb), 0.10);
    --vo-add-word: rgba(var(--color-green-rgb), 0.32);
    --vo-add-bar: var(--color-green);
    --vo-del-row: rgba(var(--color-red-rgb), 0.09);
    --vo-del-word: rgba(var(--color-red-rgb), 0.26);
    --vo-del-bar: var(--color-red);
}
.theme-dark .agent-edit-review {
    --vo-add-row: rgba(var(--color-green-rgb), 0.13);
    --vo-add-word: rgba(var(--color-green-rgb), 0.30);
    --vo-del-row: rgba(var(--color-red-rgb), 0.16);
    --vo-del-word: rgba(var(--color-red-rgb), 0.36);
}

/* Header ------------------------------------------------------------- */
.agent-edit-review__header {
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--background-modifier-border);
}
.agent-edit-review__title {
    font-size: var(--font-ui-medium);
    font-weight: 600;
    color: var(--text-normal);
}
.agent-edit-review__subtitle {
    margin-top: 2px;
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}
.agent-edit-review__empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.agent-edit-review__main {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* File list (only when more than one file) ---------------------------- */
.agent-edit-review__filelist {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--background-modifier-border);
    overflow-y: auto;
    padding: 10px 0;
    background: var(--background-secondary);
}
.agent-edit-review__filelist-heading {
    padding: 0 14px 8px;
    font-size: var(--font-ui-smaller);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.agent-edit-review__file {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-ui-small);
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}
.agent-edit-review__file:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}
.agent-edit-review__file.is-selected {
    background: var(--background-modifier-active-hover);
    color: var(--text-normal);
    font-weight: 500;
}
.agent-edit-review__file.is-skipped .agent-edit-review__file-label {
    text-decoration: line-through;
    opacity: 0.55;
}
.agent-edit-review__file-status {
    color: var(--text-faint);
    font-family: var(--font-monospace);
}
.agent-edit-review__file-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Diff pane ----------------------------------------------------------- */
.agent-edit-review__diff {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.agent-edit-review__diff-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--background-modifier-border);
}
.agent-edit-review__diff-path {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-ui-small);
    color: var(--text-muted);
}
.agent-edit-review__stats {
    font-size: var(--font-ui-smaller);
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
    white-space: nowrap;
}
.agent-edit-review__stats.is-changed {
    color: var(--text-muted);
}
.agent-edit-review__edit-btn,
.agent-edit-review__skip-btn {
    padding: 3px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    cursor: pointer;
    box-shadow: none;
    white-space: nowrap;
}
.agent-edit-review__edit-btn:hover,
.agent-edit-review__skip-btn:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}
.agent-edit-review__edit-btn.is-active,
.agent-edit-review__skip-btn.is-active {
    color: var(--text-on-accent);
    background: var(--interactive-accent);
    border-color: var(--interactive-accent);
}

/* Column headings ------------------------------------------------------ */
.agent-edit-review__edit-discard-btn {
    padding: 3px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    cursor: pointer;
    box-shadow: none;
    white-space: nowrap;
}
.agent-edit-review__edit-discard-btn:hover {
    color: var(--text-error);
    background: var(--background-modifier-hover);
}
.agent-edit-review__edit-discard-btn.is-hidden {
    display: none;
}

.agent-edit-review__colheads {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-bottom: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
}
.agent-edit-review__colhead {
    padding: 5px 14px;
    font-size: var(--font-ui-smaller);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.agent-edit-review__colhead + .agent-edit-review__colhead {
    box-shadow: inset 1px 0 0 0 var(--background-modifier-border);
}

/* THE single scroll container ------------------------------------------ */
.agent-edit-review__body {
    flex: 1;
    overflow-y: auto;
    /* Prose wraps. It is never scrolled sideways. */
    overflow-x: hidden;
    /* Proportional, not monospace: this is German prose, not code. Monospace
     * eats 20-30 % more width for the same characters and reads as "code". */
    font-family: var(--font-text);
    font-size: var(--font-ui-medium);
    line-height: 1.6;
    padding: 6px 0 24px;
}
.agent-edit-review.is-editing .agent-edit-review__body,
.agent-edit-review.is-editing .agent-edit-review__colheads {
    display: none;
}

.agent-edit-review__empty-diff {
    padding: 24px 14px;
    color: var(--text-faint);
    text-align: center;
}

/* Sticky section heading: in a note THIS is what orients you, not a line
 * number. Nobody references line 47 of a transcript. */
.agent-edit-review__hunk-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 4px 14px;
    background: var(--background-secondary);
    border-top: 1px solid var(--background-modifier-border);
    border-bottom: 1px solid var(--background-modifier-border);
    font-size: var(--font-ui-smaller);
    font-weight: 600;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* One row = one diff line = both columns. The row is as tall as its tallest
 * cell, which is the entire alignment mechanism. */
.agent-edit-review__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;

    /* Free virtualization: the browser skips layout and paint for rows that are
     * off-screen. `auto` in contain-intrinsic-size makes it remember the height
     * it last measured, which is what variable-height wrapped rows need. */
    content-visibility: auto;
    contain-intrinsic-size: auto 26px;
}
.agent-edit-review__row--collapsed {
    grid-template-columns: 1fr;
}
.agent-edit-review__collapsed {
    width: 100%;
    padding: 3px 14px;
    margin: 3px 0;
    background: var(--background-secondary);
    border: none;
    border-top: 1px solid var(--background-modifier-border);
    border-bottom: 1px solid var(--background-modifier-border);
    border-radius: 0;
    box-shadow: none;
    color: var(--text-faint);
    font-size: var(--font-ui-smaller);
    text-align: center;
    cursor: pointer;
}
.agent-edit-review__collapsed:hover {
    background: var(--background-modifier-hover);
    color: var(--text-muted);
}

.agent-edit-review__cell {
    display: grid;
    /* Marker slot | text. Row-invariant, so the text edges line up down the
     * whole column. */
    grid-template-columns: 1.5em minmax(0, 1fr);
    align-items: start;
    /* Grid blowout guard. Together with minmax(0,1fr) and overflow-wrap:anywhere
     * below, this is what stops one long URL from bursting the column. */
    min-width: 0;
    /* The change bar slot is ALWAYS there, so a changed line does not shift the
     * text by 3px relative to an unchanged one. */
    border-left: 3px solid transparent;
    padding: 1px 12px 1px 0;
}
.agent-edit-review__cell--new {
    box-shadow: inset 1px 0 0 0 var(--background-modifier-border);
}

.agent-edit-review__cell.is-del {
    background: var(--vo-del-row);
    border-left-color: var(--vo-del-bar);
}
.agent-edit-review__cell.is-add {
    background: var(--vo-add-row);
    border-left-color: var(--vo-add-bar);
}
.agent-edit-review__cell.is-pad {
    background: var(--background-secondary);
    opacity: 0.4;
}

/* Redundant, non-colour cue (WCAG 1.4.1: meaning must not rest on colour
 * alone -- ~8 % of men cannot separate red from green). */
.agent-edit-review__marker {
    font-family: var(--font-monospace);
    font-size: var(--font-ui-smaller);
    line-height: 1.6;
    text-align: center;
    color: var(--text-faint);
    user-select: none;
}
.agent-edit-review__cell.is-del .agent-edit-review__marker {
    color: var(--vo-del-bar);
}
.agent-edit-review__cell.is-add .agent-edit-review__marker {
    color: var(--vo-add-bar);
}

.agent-edit-review__text {
    min-width: 0;
    white-space: pre-wrap;
    /* `anywhere`, NOT `break-word`. Only `anywhere` is honoured when the browser
     * computes min-content, so a 200-character URL cannot force the grid track
     * wider than its share. With `break-word` the column still bursts. */
    overflow-wrap: anywhere;
}
.agent-edit-review__text.is-mono {
    font-family: var(--font-monospace);
    font-size: var(--font-ui-small);
}

/* The word-level highlight. The row tint says WHICH line changed; this says
 * WHAT changed in it. That contrast is the whole readability gain. */
.agent-edit-review__word {
    border-radius: 3px;
    padding: 0 1px;
}
/* text-decoration-thickness / -color are only partially supported on the
 * Electron build behind Obsidian 1.7.4, so the strike is left at its default
 * weight and inherits the text colour. The row tint already carries the
 * del/add signal; the strike only has to be visible. */
.agent-edit-review__word.is-del-word {
    background: var(--vo-del-word);
    text-decoration: line-through;
}
.agent-edit-review__word.is-add-word {
    background: var(--vo-add-word);
}

/* Editing surface: a plain textarea. Separate from the diff on purpose -- the
 * old contenteditable WAS the diff, so the highlighting fell apart as soon as
 * you typed, and the text had to be scraped back out of the mangled DOM. */
.agent-edit-review__textarea {
    display: none;
    flex: 1;
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 12px 16px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-family: var(--font-text);
    font-size: var(--font-ui-medium);
    line-height: 1.6;
    resize: none;
    outline: none;
}
.agent-edit-review.is-editing .agent-edit-review__textarea {
    display: block;
}

/* Deleting: the whole note is the loss. Say so, do not just tint it. */
.agent-edit-review.is-deleting .agent-edit-review__colhead + .agent-edit-review__colhead {
    color: var(--vo-del-bar);
}

/* Footer -------------------------------------------------------------- */
.agent-edit-review__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
}
.agent-edit-review__apply-run-btn,
.agent-edit-review__apply-session-btn {
    border: 1px solid var(--background-modifier-border);
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
}
.agent-edit-review__apply-run-btn:hover,
.agent-edit-review__apply-session-btn:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}
.agent-edit-review__discard-btn {
    border: 1px solid var(--background-modifier-border);
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
}
.agent-edit-review__discard-btn:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}

/* Checkpoint marker in the inline panel inherits the sidebar
 * `.checkpoint-marker` rules (divider lines + ghost icon buttons). The
 * legacy `.agent-inline-panel__checkpoint-*` styles were removed when
 * the inline marker adopted the sidebar DOM (EPIC-33 checkpoint-
 * parity wave, 2026-06-23). The remaining
 * `.agent-inline-panel__bubble--checkpoint` modifier raises the
 * default opacity from the sidebar's 0.5 (decorative) to a fully
 * visible state -- in the inline panel the marker IS the main
 * post-edit affordance, not a separator between tool steps. */
.agent-inline-panel__bubble--checkpoint {
    align-self: stretch;
    max-width: 100%;
    padding: 4px 6px;
}
.agent-inline-panel__bubble--checkpoint.checkpoint-marker {
    opacity: 1;
    color: var(--text-normal);
    font-size: var(--font-ui-small);
}
.agent-inline-panel__bubble--checkpoint .checkpoint-label {
    font-size: var(--font-ui-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agent-inline-panel__bubble--checkpoint .checkpoint-action-btn {
    opacity: 0.8;
}
.agent-inline-panel__bubble--checkpoint .checkpoint-action-btn:hover {
    opacity: 1;
}

/* FEAT-42-05: clickable language-pack download notice */
.agent-clickable-notice {
    cursor: pointer;
}

/* FIX-19-01-12: Orphan-Verknuepfungs-Modal. Ersetzt den geloeschten
   Move-Repair; eine Zeile pro isolierter Note mit Kandidaten-Dropdown. */
.vault-health-orphan-link .vault-health-orphan-list {
    max-height: 50vh;
    overflow-y: auto;
    margin: 12px 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
}
.vault-health-orphan-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--background-modifier-border);
}
.vault-health-orphan-row:last-child {
    border-bottom: none;
}
.vault-health-orphan-main {
    flex: 1;
    min-width: 0;
}
.vault-health-orphan-path {
    font-weight: 600;
    overflow-wrap: anywhere;
}
.vault-health-orphan-select {
    width: 100%;
    margin-top: 4px;
}
.vault-health-orphan-nocand {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.vault-health-orphan-link .vault-health-fix-preview {
    padding-left: 0;
}
.vault-health-orphan-togglebar {
    margin-top: 10px;
}
.vault-health-orphan-empty {
    margin: 16px 0;
    color: var(--text-muted);
}
.vault-health-orphan-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* IMP-19-01-03 W3: Plan-Approval (ADR-165) + Outcome-Screen (ADR-166). */
.vault-health-plan-list {
    max-height: 45vh;
    overflow-y: auto;
    margin: 12px 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
}
.vault-health-plan-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--background-modifier-border);
}
.vault-health-plan-row:last-child { border-bottom: none; }
.vault-health-plan-action {
    flex-shrink: 0;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--background-secondary);
    color: var(--text-muted);
}
.vault-health-plan-path { overflow-wrap: anywhere; }
.vault-health-plan-deferred, .vault-health-outcome-timeout {
    margin: 8px 0;
    color: var(--text-warning);
    font-size: 12px;
}
.vault-health-plan-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}
.vault-health-outcomes {
    margin: 10px 0;
    padding: 8px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
}
.vault-health-outcome-line { font-weight: 600; }
.vault-health-outcome-group { margin-top: 6px; }
.vault-health-outcome-head { font-size: 12px; color: var(--text-muted); }
.vault-health-outcome-path { font-size: 12px; padding-left: 12px; overflow-wrap: anywhere; }
.vault-health-kr-gates { margin-top: 8px; font-size: 12px; color: var(--text-muted); }

/* FIX-19-01-18: ehrlicher Zaehler in der Freigabe-Ansicht. */
.vault-health-plan-summary {
    font-weight: 600;
    margin: 8px 0 2px;
}
.vault-health-plan-breakdown {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.vault-health-plan-note {
    font-size: 12px;
    color: var(--text-muted);
    border-left: 2px solid var(--background-modifier-border);
    padding-left: 8px;
    margin-bottom: 8px;
}

/* FIX-19-02-06: Aufschluesselung in der Findings-Landeansicht. Sagt ohne
   Zusatzklick, woraus die Gesamtzahl besteht und wie viel der Deckel
   verschweigt. */
.vault-health-breakdown {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin: 0.25em 0 0.75em 0;
    line-height: 1.5;
}

/* FIX-19-05-04: Re-Check-Zeile (Zeitstempel + Knopf) im Findings-Tab. */
.vault-health-rescan-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    margin: 0.25em 0 0.75em 0;
}

.vault-health-last-checked {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

/* FIX-19-05-04: Freshness-Scan-Knopf + Hinweis im Knowledge-review-Tab. */
.vault-health-freshness-toolbar {
    margin: 0.5em 0 1em 0;
}

.vault-health-freshness-hint {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin-top: 0.4em;
    line-height: 1.5;
}

/* FIX-19-05-03: der Cap-Hinweis als prominente Infobox statt einer leicht
   zu ueberlesenden Akzent-Zeile. Er erklaert, warum der Button mehr Fixes
   zeigt als die sichtbaren Paare -- direkt und abgesetzt. */
.vault-health-breakdown-overflow {
    margin-top: 0.6em;
    padding: 0.6em 0.75em;
    border-radius: var(--radius-s, 4px);
    border-left: 3px solid var(--interactive-accent, var(--text-accent));
    background: var(--background-secondary);
    color: var(--text-normal);
    font-size: var(--font-ui-smaller);
    line-height: 1.5;
}

/* FIX-19-02-21: ein abgebrochener Nachlauf darf nicht wie Entwarnung aussehen. */
.vault-health-run-failed {
    color: var(--text-warning, var(--text-accent));
}

/* FIX-19-02-22: die Luecke zwischen Befunden und Schreibvorgaengen. */
.vault-health-plan-nochange {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin: 4px 0 8px;
}

/* FIX-19-02-25: Plan und Ergebnis am selben Nenner. */
.vault-health-result-vs-plan {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin: 8px 0 4px;
}

/* FEAT-19-02-01: Alle abwaehlen, neben dem Anwenden-Knopf. */
.modal button.vault-health-select-toggle.vault-health-select-toggle {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    cursor: pointer;
    padding: 4px 8px;
    text-decoration: underline;
}
.modal button.vault-health-select-toggle:hover { color: var(--text-normal); }
/* FIX-19-09 (Review-Bot Tier 7): .vault-health-apply-sticky (display/
   align-items/gap) in den ersten Block oben gemergt -- kein Duplikat mehr. */

/* FEAT-19-05-01: Batch-Repair-Buttons. */
.modal button.vault-health-batch-btn,
.modal button.vault-health-next-batch-btn {
    margin-left: 8px;
}
.modal button.vault-health-cancel-btn {
    margin-top: 8px;
    color: var(--text-muted);
}

/* FIX-19-09-03: Relations-Callouts. Der selbstbildende Rueckverweis-Block
   nutzt den Callout-Typ [!relation-in] (eingehende Verweise). Diese Regeln
   werden mit dem Plugin ausgeliefert -- der Nutzer muss kein CSS-Snippet
   installieren. relation/relation-out/relation-rel sind vorbereitet, falls
   spaeter ausgehende/verwandte Relations dazukommen. Grau + Lucide-Icons. */
/* Review-Bot Tier 7 (no-duplicate-selector): jeder relation*-Selektor genau
   EINMAL definiert. --callout-color (Grau) in jeden Block wiederholt, statt
   einen zusaetzlichen Gruppen-Selektor, der dieselben Selektoren ein zweites
   Mal auffuehren wuerde. */
.callout[data-callout="relation"] {
    --callout-color: 150, 150, 150;
    --callout-icon: lucide-git-commit-horizontal;
}
.callout[data-callout="relation-in"] {
    --callout-color: 150, 150, 150;
    --callout-icon: lucide-log-in;
}
.callout[data-callout="relation-out"] {
    --callout-color: 150, 150, 150;
    --callout-icon: lucide-log-out;
}
.callout[data-callout="relation-rel"] {
    --callout-color: 150, 150, 150;
    --callout-icon: lucide-waypoints;
}

/* FIX-19-09-05: vault-operator-Auto-Block-Markerzeilen im Editor ausblenden.
   Die CM6-Extension (markerHideExtension) setzt diese Klasse gezielt NUR auf
   reine Markerzeilen (<!-- vault-operator:... -->), nicht auf andere HTML-
   Kommentare. Die Zeile kollabiert auf 0 Hoehe und wird transparent -- der
   Cursor kann noch hinein (kein display:none, das die Navigation braechte),
   aber sichtbar ist nichts mehr. */
.cm-line.vault-operator-hidden-marker {
    height: 0;
    padding: 0;
    margin: 0;
    line-height: 0;
    font-size: 0;
    color: transparent;
    overflow: hidden;
}

/* Read-only monospace inputs in the local MCP connection details: the URL
   and auth token are meant to be selected and copied, not edited. */
.agent-mono-input {
    font-family: var(--font-monospace);
    font-size: var(--font-smaller);
}

/* Clickable tool count in the MCP server list (opens the tool list modal). */
.agent-mcp-toolcount-link {
    cursor: pointer;
    color: var(--text-accent);
    /* Plain underline: the `dotted` text-decoration-style (and the
       -line/-style longhands) are only partially supported on the bot's
       Obsidian CSS baseline, so a solid underline is the compatible form. */
    text-decoration: underline;
}
.agent-mcp-toolcount-link:hover {
    color: var(--text-accent-hover);
}

/* Scrollable tool list modal: name + short description per tool. */
.agent-mcp-tool-list {
    max-height: 60vh;
    overflow-y: auto;
    margin-top: 8px;
}
.agent-mcp-tool-row {
    padding: 6px 0;
    border-bottom: 1px solid var(--background-modifier-border);
}
.agent-mcp-tool-name {
    font-family: var(--font-monospace);
    font-size: var(--font-smaller);
    color: var(--text-normal);
}
.agent-mcp-tool-desc {
    font-size: var(--font-smaller);
    color: var(--text-muted);
    margin-top: 2px;
}

/* FEAT-55-06: cross-session topic awareness -- read-only related-conversation
   suggestion. Deliberately unobtrusive (the spec calls for non-intrusive,
   dismissible). Reuses the neutral row shape without the approval accent. */
.related-conversations-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    margin: 6px 0;
    border-radius: 8px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    font-size: 12px;
}
.related-conversations-label { display: flex; align-items: center; gap: 4px; color: var(--text-muted); }
.related-conversations-icon { display: flex; align-items: center; }
.related-conversations-item {
    background: var(--background-modifier-hover);
    border: none;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-normal);
}
.related-conversations-item:hover { background: var(--background-modifier-active-hover); }
.related-conversations-dismiss {
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 11px;
    margin-left: auto;
}

/* FEAT-55-01 (user request 2026-07-25): History tag for conversations with an
   interrupted-task snapshot, plus a clickable boot notice that jumps to the
   interrupted chat. */
.history-row-interrupted-marker {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: 500;
    background: rgba(224, 108, 117, 0.18);
    color: var(--text-muted);
    margin-left: 6px;
}
.vo-clickable-notice { cursor: pointer; }
.vo-clickable-notice:hover { text-decoration: underline; }

/* FEAT-55-01 in-view chat tabs: a tab strip inside the sidebar view. */
.vo-tab-strip {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    padding: 4px 4px 0 4px;
    border-bottom: 1px solid var(--background-modifier-border);
    scrollbar-width: thin;
}
.vo-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 160px;
    padding: 4px 8px;
    border-radius: 6px 6px 0 0;
    background: var(--background-secondary);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
.vo-tab:hover { background: var(--background-modifier-hover); }
.vo-tab-active {
    background: var(--background-primary);
    color: var(--text-normal);
    font-weight: 500;
}
.vo-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.vo-tab-running-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--interactive-accent);
    flex-shrink: 0;
    animation: vo-tab-pulse 1.4s ease-in-out infinite;
}
@keyframes vo-tab-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.vo-tab-close {
    display: flex;
    align-items: center;
    opacity: 0.5;
    border-radius: 3px;
}
.vo-tab-close:hover { opacity: 1; background: var(--background-modifier-hover); }
.vo-tab-add {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
}
.vo-tab-add:hover { background: var(--background-modifier-hover); color: var(--text-normal); }

/* AUDIT 2026-07-26 M-18: the specific-permissions list at the end of the
   Permissions tab. Compact by design: one line per grant, so a vault with a
   dozen of them stays reviewable instead of pushing the switches off-screen. */
.agent-granted {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--background-modifier-border);
}

.agent-granted-empty {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

.agent-granted-empty-icon {
    display: inline-flex;
    color: var(--text-success);
}

.agent-granted-list {
    display: flex;
    flex-direction: column;
}

.agent-granted-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--background-modifier-border);
}

.agent-granted-row:last-child {
    border-bottom: none;
}

.agent-granted-main {
    flex: 1;
    min-width: 0;
}

.agent-granted-title {
    font-size: var(--font-ui-small);
}

.agent-granted-meta {
    margin-top: 1px;
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.agent-granted-revoke {
    flex: none;
    font-size: var(--font-ui-smaller);
    padding: 3px 10px;
    cursor: pointer;
    color: var(--text-error);
}

/* -- Skill registry (FEAT-31-01) ------------------------------------------ */

.agent-registry-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
}

.agent-registry-status {
    margin: 0 0 10px;
    max-width: 62ch;
    color: var(--text-muted);
    font-size: var(--font-ui-small);
}

/* The summary line only when it carries something to do. Same size as the
   muted line it replaces, so nothing below it shifts, and the colour is the
   whole difference. */
.agent-registry-modal__summary--action {
    color: var(--text-warning, var(--color-orange));
    font-weight: 600;
}

.agent-registry-error {
    color: var(--text-error);
    font-size: var(--font-ui-small);
}

.agent-registry-tag {
    font-size: var(--font-ui-smaller);
    padding: 1px 7px;
    border-radius: 100px;
    background-color: var(--background-modifier-border);
    color: var(--text-muted);
}

/* -- Registry card states and detail modal (FEAT-31-01) ------------------- */

.agent-skill-detail__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.agent-skill-detail__desc {
    color: var(--text-muted);
}

.agent-skill-detail__facts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 0;
}

.agent-skill-detail__fact {
    display: flex;
    gap: 10px;
    font-size: var(--font-ui-small);
}

.agent-skill-detail__fact-label {
    min-width: 90px;
    color: var(--text-faint);
}

.agent-skill-detail__loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: var(--font-ui-small);
}

.agent-skill-detail__pre {
    padding: 10px 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background-color: var(--background-primary-alt);
    font-size: var(--font-ui-smaller);
    white-space: pre-wrap;
    word-break: break-word;
}

/* -- Skill registry dialog (FEAT-31-01) ---------------------------------- */

.agent-registry-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.agent-registry-open-btn__icon {
    display: inline-flex;
}

.agent-registry-modal {
    width: min(760px, 92vw);
}

.agent-registry-modal__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-registry-modal__lede {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-ui-small);
}

.agent-registry-modal__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 0;
    color: var(--text-muted);
}

.agent-registry-modal__spinner {
    display: inline-flex;
    animation: agent-registry-spin 1s linear infinite;
}

@keyframes agent-registry-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .agent-registry-modal__spinner {
        animation: none;
    }
}

.agent-registry-modal__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    background-color: var(--background-primary-alt);
}

.agent-registry-modal__search:focus-within {
    border-color: var(--interactive-accent);
}

.agent-registry-modal__search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--text-faint);
}

.agent-registry-modal__input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 4px 0;
}

.agent-registry-modal__input:focus {
    box-shadow: none;
}

.agent-registry-modal__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-faint);
    font-size: var(--font-ui-smaller);
}

.agent-registry-modal__stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.agent-registry-modal__list {
    display: flex;
    flex-direction: column;
    max-height: 52vh;
    overflow-y: auto;
    border: 1px solid var(--background-modifier-border);
    border-radius: 10px;
}

.agent-registry-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
}

.agent-registry-row:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: -2px;
}

.agent-registry-row:not(:last-child) {
    border-bottom: 1px solid var(--background-modifier-border);
}

.agent-registry-row:hover {
    background-color: var(--background-modifier-hover);
}

.agent-registry-row__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.agent-registry-row__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.agent-registry-row__name {
    font-weight: 600;
    color: var(--text-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-registry-row__desc {
    color: var(--text-muted);
    font-size: var(--font-ui-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-registry-row__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.agent-registry-row__size {
    color: var(--text-faint);
    font-size: var(--font-ui-smaller);
    font-variant-numeric: tabular-nums;
}

.agent-registry-row__chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--text-faint);
}

.agent-registry-chip {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: var(--font-ui-smaller);
}

.agent-registry-chip--in {
    color: var(--text-success);
}

.agent-registry-chip--out {
    color: var(--text-accent);
}

/* The one chip that asks for an action. Warning orange rather than the accent,
   because the accent is already spoken for by "Not installed", and the state
   the user is meant to act on must not read as a state they can ignore. The
   base chip draws its border from currentColor, so the colour carries the ring
   with it and the weight does the rest. */
.agent-registry-chip--update {
    color: var(--text-warning, var(--color-orange));
    font-weight: 600;
}

/* Not an action, a caveat: this copy is not the published one. Muted on
   purpose, so it sits beside the update chip without competing with it. */
.agent-registry-chip--changed {
    color: var(--text-muted);
}

.agent-registry-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 2px;
    border: none;
    box-shadow: none;
    background: transparent;
    color: var(--text-accent);
    cursor: pointer;
}

.agent-registry-back:hover {
    text-decoration: underline;
}

.agent-registry-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

.agent-registry-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-skill-detail__source {
    min-width: 0;
}

/* -- Skills tab controls (FEAT-31-01) ------------------------------------ */

/* Both section headings, aligned by construction rather than by inheritance.
   .agent-settings-section already carries an explicit text-align: left, which
   is evidence that something in this pane does not leave headings alone; this
   guarantees the same without also making the Skills tab the only one whose
   headings are small uppercase while Prompts, Rules and Workflows keep theirs
   at full size. */
.agent-skill-heading {
    text-align: left;
    margin: 20px 0 8px;
}

.agent-skill-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.agent-skill-filter-row {
    display: flex;
    margin-bottom: 14px;
}

.agent-skill-filter-input {
    flex: 1 1 auto;
    min-width: 0;
}

.agent-skill-groups {
    display: flex;
    flex-direction: column;
}

/* A licence the user is asked to accept, linked from the dialog that asks. */
.agent-confirm-link {
    margin: -4px 0 0;
    font-size: var(--font-ui-small);
}