styles.css

/* =========================== */
/* SPACING TOKENS              */
/* =========================== */

:root {
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 12px;
    --space-l: 16px;
    --space-xl: 24px;
    --space-xxl: 32px;

    /* Faux-glass material tokens — layered light cues on opaque fill via
       color-mix(), replacing the earlier backdrop-filter approach.

       The faux-glass technique uses the theme's accent color radial gradient
       as a backdrop (see .chat-layout), then each chrome surface applies a
       semi-opaque color-mix fill so the gradient reads through without
       requiring Obsidian's "Translucent Window" setting or any GPU-composited
       blur pass. This avoids Android perf regressions while preserving the
       "frosted" visual impression on all platforms.

       One intentional exception: .chat-modal-overlay retains
       backdrop-filter: blur(2px) because modal overlays are fixed-position,
       infrequently repainted, and serve a distinct "dim the world behind me"
       function that opaque fill cannot replicate. All per-message or
       per-scroll surfaces (user bubble, textarea, send button, welcome card)
       use the opaque color-mix approach. */
    --glass-fill: color-mix(in srgb, var(--background-primary) 55%, transparent);
    --glass-fill-strong: color-mix(in srgb, var(--background-primary) 72%, transparent);
    --glass-stroke: color-mix(in srgb, var(--text-normal) 14%, transparent);
    --glass-highlight: color-mix(in srgb, var(--text-normal) 22%, transparent);
    --glass-rim: color-mix(in srgb, var(--text-normal) 6%, transparent);
    --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);

    /* Backdrop gradient for the chat view, so the chrome surfaces'
       backdrop-filter has variance to blur. Uses the theme's accent color
       (--interactive-accent-rgb) so the tint matches whatever theme the
       user picked. Strong enough (25-30%) that the blur reads as a real
       material, but keeps the chat content area readable. */
    --glass-backdrop:
        radial-gradient(120% 80% at 80% -15%, rgba(var(--interactive-accent-rgb), 0.30) 0%, rgba(var(--interactive-accent-rgb), 0) 55%),
        radial-gradient(90% 70% at 15% 110%, rgba(var(--interactive-accent-rgb), 0.22) 0%, rgba(var(--interactive-accent-rgb), 0) 60%),
        linear-gradient(160deg, var(--background-primary) 0%, var(--background-primary-alt) 100%);
}

/* ======================================== */
/* LIGHT THEME OVERRIDES — Glass Material   */
/* ======================================== */

/* Glass tokens: lighter strokes for light backgrounds (fills auto-adapt via color-mix) */
body.theme-light {
    --glass-stroke: color-mix(in srgb, var(--text-normal) 8%, transparent);
    --glass-highlight: color-mix(in srgb, var(--background-primary) 60%, transparent);
    --glass-rim: color-mix(in srgb, var(--text-normal) 4%, transparent);
    --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

/* Chat layout gradient: light version uses soft tints instead of dark */
body.theme-light .chat-layout {
    background:
        radial-gradient(ellipse at 80% 10%, color-mix(in srgb, var(--interactive-accent) 20%, var(--background-primary)) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 90%, color-mix(in srgb, var(--interactive-accent) 12%, var(--background-primary)) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--interactive-accent) 6%, var(--background-primary)) 0%, transparent 70%),
        var(--background-primary);
}

/* User bubble: light accent tint */
body.theme-light .message-container.message-user .message-bubble {
    background: rgba(var(--interactive-accent-rgb), 0.12);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Input field */
body.theme-light .chat-textarea {
    background: var(--background-primary);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-normal);
}

/* Send button */
body.theme-light .chat-send-button {
    background: rgba(var(--interactive-accent-rgb), 0.15);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.theme-light .chat-send-button:hover:not(:disabled) {
    background: rgba(var(--interactive-accent-rgb), 0.25);
}

/* Welcome elements */
body.theme-light .chat-welcome-hotkeys-container {
    background: rgba(var(--interactive-accent-rgb), 0.08);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.06);
}

body.theme-light .chat-welcome-button.mod-cta {
    background: rgba(var(--interactive-accent-rgb), 0.12);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Header and input container glass surfaces */
body.theme-light .chat-header {
    background: var(--glass-fill);
    border-bottom-color: var(--glass-stroke);
}

body.theme-light .chat-input-container {
    background: var(--glass-fill);
    border-top-color: var(--glass-stroke);
}

/* Sidebar */
body.theme-light .chat-sidebar {
    background: var(--background-secondary);
    border-right-color: rgba(0, 0, 0, 0.08);
}

/* Message content readability */
body.theme-light .message-content {
    color: var(--text-normal);
}

/* =========================== */
/* NATIVE CHATBOT STYLES      */
/* =========================== */

/* Main Chat View Layout — three-layer glass architecture:

   Layer 1 (::before) — Colorful gradient using theme accent colors,
                         BLURRED via filter:blur() on the element itself.
                         This does NOT use backdrop-filter (which requires
                         Obsidian's "Translucent Window" setting enabled).
                         filter:blur() works unconditionally.
                         Extended past bounds with negative inset so blur
                         edges don't show; container clips with overflow:hidden.

   Layer 2 (::after)  — Translucent dark tint that sits over the blurred
                         gradient, giving it the frosted-glass look. No
                         blur on this layer — just a color wash.

   Glass architecture: gradient lives on .chat-layout (not .chat-view-container
   because Obsidian's .view-content blocks background-image). All child
   surfaces are transparent so the gradient reads through. */
.chat-view-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.chat-layout {
    display: flex;
    height: 100%;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 15% 10%, color-mix(in srgb, var(--interactive-accent) 24%, var(--background-primary)) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 50%, color-mix(in srgb, var(--interactive-accent) 15%, var(--background-primary)) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 90%, color-mix(in srgb, var(--interactive-accent) 8%, var(--background-primary)) 0%, transparent 70%),
        var(--background-primary);
}

/* Chat Sidebar */
.chat-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    background: var(--background-primary);
    border-right: 1px solid var(--background-modifier-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
    box-shadow: var(--shadow-l);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.chat-sidebar-visible {
    transform: translateX(0);
}

.chat-sidebar-hidden {
    transform: translateX(-100%);
}

.chat-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 50;
}

.chat-backdrop-visible {
    opacity: 1;
    visibility: visible;
}

.chat-sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--background-modifier-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.chat-sidebar-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

.chat-new-button {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.chat-new-button:hover {
    background: var(--interactive-accent-hover);
}

/* Conversation List */
.conversation-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.conversation-list-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 1rem;
    font-style: italic;
}

.conversation-item {
    position: relative;
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid transparent;
}

.conversation-item:hover {
    background: var(--background-modifier-hover);
}

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

.conversation-content {
    padding-right: 3.5rem;
    min-width: 0;
}

.conversation-title {
    font-weight: 500;
    color: var(--text-normal);
    margin-bottom: 0.25rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-preview {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.2;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-timestamp {
    font-size: 0.7rem;
    color: var(--text-faint);
}

/* Conversation action buttons container */
.conversation-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.conversation-item:hover .conversation-actions {
    opacity: 1;
    pointer-events: auto;
}

/* Individual action button styling */
.conversation-action-btn {
    --icon-size: 14px;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    background: var(--background-modifier-hover);
    color: var(--text-muted);
    padding: 0;
    transition: background-color 0.15s, color 0.15s;
}

.conversation-action-btn:hover {
    background: var(--background-modifier-active-hover);
    color: var(--text-normal);
}

/* Edit button specific styling */
.conversation-edit-btn:hover {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

/* Delete button specific styling */
.conversation-delete-btn:hover {
    background: var(--background-modifier-error);
    color: var(--text-on-accent);
}

/* Conversation Search */
.conversation-search-container {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--background-modifier-border);
}

.conversation-search-input {
    box-sizing: border-box;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}

.conversation-search-input:focus {
    border-color: var(--interactive-accent);
}

.conversation-search-input::placeholder {
    color: var(--text-faint);
}

/* Load More Button */
.conversation-load-more-btn {
    display: block;
    width: calc(100% - 1rem);
    margin: 0.5rem auto;
    padding: 0.5rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-primary);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, color 0.2s;
}

.conversation-load-more-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.conversation-load-more-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* =========================== */
/* CLAUDE HEADLESS EXPERIMENT  */
/* =========================== */

.nexus-claude-headless-modal textarea.nexus-claude-headless-prompt {
    width: 100%;
    min-height: 10rem;
    resize: vertical;
}

.nexus-claude-headless-status {
    margin-bottom: var(--space-m);
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    white-space: pre-wrap;
    font-size: 0.9rem;
}

.nexus-claude-headless-status-muted {
    color: var(--text-muted);
    background: var(--background-secondary);
}

.nexus-claude-headless-status-success {
    color: var(--text-normal);
    background: var(--background-secondary);
}

.nexus-claude-headless-status-warning {
    color: var(--text-normal);
    background: var(--background-secondary);
}

.nexus-claude-headless-status-error {
    color: var(--text-normal);
    background: color-mix(in srgb, var(--background-modifier-error) 20%, var(--background-primary));
    border-color: var(--background-modifier-error);
}

.nexus-claude-headless-output {
    max-height: 18rem;
    overflow: auto;
    margin: 0 0 var(--space-m);
    padding: var(--space-m);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    background: var(--background-secondary);
    color: var(--text-normal);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-monospace);
    font-size: 0.85rem;
}

.nexus-claude-headless-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-s);
    flex-wrap: wrap;
}

/* Inline rename input */
.conversation-rename-input {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--interactive-accent);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: inherit;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.conversation-rename-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--interactive-accent-hover);
}

/* Chat Header — transparent on the glass pane. No border, no shadow,
   no backdrop-filter (the container handles all glass material). */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    box-shadow: none;
    flex-shrink: 0;
}

.chat-header .chat-title {
    font-size: 15px;
}

.chat-header .chat-hamburger-button,
.chat-header .chat-live-voice-button,
.chat-header .chat-settings-button {
    padding: 4px;
}

/* Header buttons — flat icons matching the status bar icon style.
   No raised appearance, just the icon as the tap target. */
.chat-hamburger-button,
.chat-live-voice-button,
.chat-settings-button {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.chat-hamburger-button:hover,
.chat-live-voice-button:hover,
.chat-settings-button:hover {
    background: none;
    color: var(--text-normal);
}

.chat-live-voice-button-active {
    color: var(--interactive-accent);
}

.chat-hamburger-button:focus-visible,
.chat-live-voice-button:focus-visible,
.chat-settings-button:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.chat-title {
    font-weight: 600;
    color: var(--text-normal);
    font-size: 16px;
    flex: 1;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chat Selectors Container - REMOVED (now in modal) */

/* Chat Main Area */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.message-display-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* Chat Input Container — transparent on the glass pane. */
.chat-input-container {
    padding: 7px 11px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
    border: none;
    background: transparent;
    box-shadow: none;
    width: 100%;
}

/* Input wrapper - contains textarea and embedded send button */
.chat-input-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Welcome State - Minimal */
.chat-welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.chat-welcome-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.chat-welcome-icon {
    display: flex;
    justify-content: center;
    color: var(--text-faint);
    margin-bottom: 0.5rem;
}

.chat-welcome-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.5;
}

.chat-welcome-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-normal);
    margin-bottom: 0.25rem;
}

.chat-welcome-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem 0;
}

.chat-welcome-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0 0 0.75rem 0;
}

/* Welcome hotkeys card — faux-glass: opaque accent-tinted fill over the gradient */
.chat-welcome-hotkeys-container {
    background: color-mix(in srgb, var(--interactive-accent) 22%, var(--background-primary));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.25);
}

.chat-welcome-hotkeys {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.chat-welcome-hotkey {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-on-accent);
    position: relative;
    z-index: 2;
}

.chat-welcome-hotkey code {
    font-family: var(--font-monospace);
    font-size: 0.7rem;
    background: var(--background-primary);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--text-normal);
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.chat-welcome-hotkey span {
    white-space: nowrap;
}

/* Welcome screen button */
.chat-welcome-button {
    padding: 8px 16px;
    font-size: 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--background-modifier-border);
    background: var(--interactive-normal);
    color: var(--text-normal);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.chat-welcome-button:hover {
    background: var(--interactive-hover);
}

.chat-welcome-button.mod-cta {
    background: color-mix(in srgb, var(--interactive-accent) 30%, var(--background-primary));
    color: var(--text-normal);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.chat-welcome-button.mod-cta:hover {
    background: var(--interactive-accent-hover);
}

/* Message Display */
.message-display {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    background: transparent;
}

.message-display-event-row {
    display: flex;
    justify-content: center;
    padding: 0.45rem 0;
}

.message-display-event-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: min(100%, 32rem);
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 999px;
    background: var(--background-secondary);
    color: var(--text-accent);
    font-size: 0.82rem;
    line-height: 1.35;
}

.message-display-event-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--interactive-accent);
    flex: 0 0 auto;
    animation: chat-pre-send-pulse 1.2s ease-in-out infinite;
}

.message-display-event-text {
    font-weight: 600;
}

/* Compaction divider — subtle centered rule with label, inserted
   after context compaction completes. Transparent background so the
   glass gradient shows through. */
.compaction-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.5rem;
}

.compaction-divider-rule {
    flex: 1;
    height: 1px;
    background: var(--background-modifier-border);
}

.compaction-divider-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Message Container (wrapper for bubble + external actions) */
.message-container {
    width: 90%;
    position: relative;
    animation: messageSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* Ensure the assistant message group wrapper and all message parents
   are transparent so the gradient shows through. */
.message-group {
    background: transparent;
}

/* Wider screens - reduce bubble width for better readability */
@media (min-width: 1200px) {
    .message-container {
        width: 85%;
    }
}

/* Very wide screens - further reduce for optimal reading */
@media (min-width: 1600px) {
    .message-container {
        width: 70%;
    }
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-container.message-user {
    align-self: stretch;
    width: 100%;
    max-width: none;
}

.message-container.message-assistant {
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin-top: 1.4rem;
}

.message-container.message-image {
    align-self: stretch;
    width: 100%;
    max-width: none;
}

/* Generated Image Bubble */
.image-bubble {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    padding: 0.75rem;
}

.generated-image-container {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.generated-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    object-fit: contain;
}

.generated-image-open-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    background: var(--interactive-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    color: var(--text-normal);
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s;
    justify-content: center;
}

.generated-image-open-btn:hover {
    background: var(--interactive-hover);
}

.generated-image-open-btn svg {
    width: 14px;
    height: 14px;
}

/* Message Bubbles — ported from .mock-device--glass .minimal-user-bubble
   (mockup CSS line 2231) and .minimal-message-content--assistant (line 2284).
   Production class structure differs from the mockup's .minimal-* prefix
   so the values are applied to .message-container.message-* .message-bubble.

   Per user clarification: user bubble color follows the active Obsidian
   theme (var(--interactive-accent)) instead of the mockup's hardcoded
   --mock-user-bubble purple. The mockup's box-shadow + border-radius +
   padding are kept verbatim. */
.message-bubble {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    min-height: fit-content;
}

/* User bubble — faux-glass: opaque accent-tinted fill so the bubble reads
   as "the user's color" without a blur pass on every message (avoids
   per-message GPU compositing cost). */
.message-container.message-user .message-bubble {
    width: 100%;
    max-width: none;
    padding: 0.82rem 1.08rem 0.76rem;
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--interactive-accent) 28%, var(--background-primary));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 10px 24px rgba(0, 0, 0, 0.2);
    color: var(--text-normal);
}

/* Assistant: NO bubble. The text floats on the chat background flush with
   the same horizontal padding as the user bubble (1.08rem) so the column
   feels visually consistent. Mockup line 2284-2290. */
.message-container.message-assistant .message-bubble {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 1.08rem;
    width: 100%;
    box-sizing: border-box;
}

/* Role icons + message-header removed in the glass redesign. The header
   used to host the role icon and action buttons; both are now gone, so
   we collapse the header. */
.message-role-icon {
    display: none;
}

.message-header {
    display: none;
}

/* Action row — ported from .mock-device--glass .minimal-actions-row
   (mockup CSS line 2259) + .minimal-actions-row--user (line 2270) +
   .minimal-actions-row--assistant (line 2292). Always visible, no pill
   background, free-floating below the message. */
.message-actions-external {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.18rem;
    margin-top: 0.14rem;
    padding: 0;
    line-height: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
}

/* User row: align self left, full width, padded to match bubble inset,
   actions pushed to the right edge. Mockup line 2270-2277. */
.message-container.message-user .message-actions-external {
    align-self: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 22px;
    min-height: 22px;
    box-sizing: border-box;
    padding: 0 1.08rem;
    justify-content: flex-end;
    gap: 0.11rem;
    margin-top: 10px;
    margin-left: 0;
    overflow: visible;
}

/* User-message action buttons (edit, retry) get a plugin-unique class from
   MessageBubble.ts — reserved for future styling that might need to bypass
   cascade fighting. Currently no declarations; layout spacing lives on the
   parent .message-actions-external via margin-top. */

/* Assistant row: full width, padded to match content inset, left-aligned.
   Mockup line 2292-2297. */
.message-container.message-assistant .message-actions-external {
    width: 100%;
    box-sizing: border-box;
    padding: 0 1.2rem;
    margin-top: 4px;
}

/* Action button — ported from .mock-device--glass .minimal-action-btn
   (mockup CSS line 2315). 28x28 pill, transparent background, muted
   icons at 16x16 with stroke-width 1.9. */
.message-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.message-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.9;
}

/* Beat Obsidian's .clickable-icon defaults with a compound selector
   (specificity (0,0,3,0) beats Obsidian's (0,0,2,0)) so no background
   is ever painted on hover/active/focus — only the icon color changes. */
.message-action-btn.message-action-btn:hover,
.message-action-btn.clickable-icon:hover {
    background: transparent;
    color: var(--text-normal);
}

.message-action-btn.message-action-btn:active,
.message-action-btn.message-action-btn:focus-visible,
.message-action-btn.clickable-icon:active,
.message-action-btn.clickable-icon:focus-visible {
    background: transparent;
}

.message-action-btn.message-action-btn:active,
.message-action-btn.clickable-icon:active {
    color: var(--interactive-accent);
}

.message-action-btn.message-action-btn:focus-visible,
.message-action-btn.clickable-icon:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
}

.message-action-btn.copy-success {
    color: var(--text-success);
}

.message-action-btn.message-edit-confirm:not(:hover):not(:active) {
    color: var(--interactive-accent);
}

.message-action-btn.is-hidden {
    display: none;
}

.message-edit-textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    resize: vertical;
}

.message-edit-textarea:focus {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
    border-radius: 1.15rem;
}

/* Message content typography — ported from .mock-device--glass
   .minimal-message-content (mockup line 2242) and .minimal-message-content
   p (line 2249). 18px base, 1.52 line-height, 0.38rem paragraph gap. */
.message-reasoning {
    margin: 0 0 0.5rem 0;
    border-left: 2px solid var(--background-modifier-border);
    padding-left: 0.5rem;
}

.message-reasoning-summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    font-style: italic;
    list-style: none;
    user-select: none;
}

.message-reasoning-summary::-webkit-details-marker {
    display: none;
}

.message-reasoning-content {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    white-space: pre-wrap;
    opacity: 0.85;
}

.message-content {
    color: var(--text-normal);
    font-size: 18px;
    line-height: 1.52;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    user-select: text;
    cursor: text;
}

.message-content p {
    margin: 0 0 0.38rem 0;
}

.message-content p:last-child {
    margin-bottom: 0;
}

.message-content code {
    background: var(--background-modifier-border);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: var(--font-monospace);
    font-size: 0.9em;
}

.message-content pre {
    background: var(--background-modifier-border);
    padding: 0.5rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.message-content pre code {
    background: none;
    padding: 0;
}

.message-content ul,
.message-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    color: inherit;
}

.message-content ul li,
.message-content ol li {
    margin: 0.25rem 0;
    color: inherit;
}

.message-content ul li::marker,
.message-content ol li::marker {
    color: inherit;
}

.message-sources {
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--background-modifier-border);
}

.message-sources-title {
    margin-bottom: 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.message-source-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.message-source-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 999px;
    background: var(--background-secondary);
    color: var(--text-accent);
    font-size: 0.8rem;
    line-height: 1.3;
    text-decoration: none;
}

.message-source-link:hover {
    border-color: var(--interactive-accent);
    background: var(--background-modifier-hover);
    color: var(--text-accent-hover);
}

/* Chat Input */
.chat-input {
    padding: 1rem;
    background: transparent;
    width: 100%;
    box-sizing: border-box;
}

.chat-input-compacting .chat-textarea {
    border-color: var(--text-accent);
    box-shadow: 0 0 0 1px rgba(var(--interactive-accent-rgb), 0.12);
}


/* Chat textarea — opaque background so typed text stays legible against
   the gradient backdrop. Subtle border for the input field boundary only.
   --chat-input-height is set dynamically by ChatInput.autoResizeInput(). */
.chat-textarea {
    width: 100%;
    min-height: 60px;
    max-height: 146px;
    height: var(--chat-input-height, auto);
    padding: 11px 55px 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: var(--background-primary);
    box-shadow: none;
    color: var(--text-normal);
    font-family: var(--font-interface);
    font-size: 14px;
    line-height: 1.45;
    resize: none;
    outline: none;
    overflow-y: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.chat-textarea:focus {
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.15);
}

.chat-textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Contenteditable specific styles */
.chat-textarea[contenteditable="true"] {
    cursor: text;
}

.chat-textarea[contenteditable="false"] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Placeholder for contenteditable */
.chat-textarea[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

/* Reference badges in contenteditable */
.chat-reference {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-monospace);
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

/* Tool reference (green) */
.chat-reference-tool {
    background: color-mix(in srgb, var(--color-green) 15%, transparent);
    color: var(--color-green);
    border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
}

/* Agent reference (purple) */
.chat-reference-agent {
    background: color-mix(in srgb, var(--color-purple) 15%, transparent);
    color: var(--color-purple);
    border: 1px solid color-mix(in srgb, var(--color-purple) 30%, transparent);
}

/* Note reference (blue) */
.chat-reference-note {
    background: color-mix(in srgb, var(--color-blue) 15%, transparent);
    color: var(--color-blue);
    border: 1px solid color-mix(in srgb, var(--color-blue) 30%, transparent);
}

/* Dark mode adjustments */
.theme-dark .chat-reference-tool {
    background: color-mix(in srgb, var(--color-green) 25%, transparent);
}

.theme-dark .chat-reference-agent {
    background: color-mix(in srgb, var(--color-purple) 25%, transparent);
}

.theme-dark .chat-reference-note {
    background: color-mix(in srgb, var(--color-blue) 25%, transparent);
}

/* Send button - circular, embedded and vertically centered in input */
/* Send button — faux-glass circle: opaque accent-tinted fill matching the message bubble treatment */
.chat-send-button {
    --icon-size: 16px;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: color-mix(in srgb, var(--interactive-accent) 28%, var(--background-primary));
    color: var(--text-normal);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, opacity 0.2s, transform 0.15s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.chat-send-button:hover:not(:disabled) {
    background: rgba(var(--interactive-accent-rgb), 0.50);
    transform: translateY(-50%) scale(1.05);
}

.chat-send-button:active:not(:disabled) {
    transform: translateY(-50%) scale(0.95);
}

.chat-send-button:disabled {
    cursor: not-allowed;
}

/* Disabled state - muted appearance */
.chat-send-button.disabled-mode {
    background: var(--background-modifier-border);
    color: var(--text-muted);
    opacity: 0.5;
}

/* Compacting state — distinct from plain disabled: accent ring pulse so
   sighted users can tell compaction is running, not that the app is broken. */
.chat-input-compacting .chat-send-button.disabled-mode {
    background: color-mix(in srgb, var(--interactive-accent) 20%, var(--background-primary));
    color: var(--interactive-accent);
    opacity: 1;
    animation: pulse-compacting 1.2s ease-in-out infinite;
}

@keyframes pulse-compacting {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--interactive-accent-rgb), 0.5); }
    50% { box-shadow: 0 0 0 4px rgba(var(--interactive-accent-rgb), 0); }
}

/* Stop button mode - red circular button */
.chat-send-button.stop-mode {
    --icon-size: 12px;
    background: var(--text-error);
    color: white;
    animation: pulse-stop 1.5s ease-in-out infinite;
}

.chat-send-button.stop-mode:hover {
    background: var(--text-error);
    opacity: 0.9;
}

/* Live voice composer takeover. Text status lives in ToolStatusBar; the
   composer stays visual: session dot, waveform/indicator, and stop button. */
.chat-live-composer {
    display: none;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 11px 55px 11px 13px;
    border: 1px solid color-mix(in srgb, var(--background-modifier-border) 78%, transparent);
    border-radius: 11px;
    background: var(--background-primary);
    box-sizing: border-box;
    overflow: hidden;
}

.chat-input-live-mode .chat-textarea,
.chat-input-live-mode .chat-send-button {
    display: none;
}

.chat-input-live-mode .chat-live-composer {
    display: flex;
}

.chat-live-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-error);
    animation: chat-live-dot-pulse 1.8s ease-in-out infinite;
}

.chat-live-waveform {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 3px;
    padding-inline: 2px;
}

.chat-live-wave-bar {
    flex: 1 1 0;
    min-width: 2px;
    max-width: 8px;
    height: 30px;
    border-radius: 999px;
    background: var(--interactive-accent);
    opacity: 0.54;
    transform-origin: center;
    animation: chat-live-wave-listening 1.55s ease-in-out infinite;
}

.chat-live-wave-phase-0 { animation-delay: -0ms; }
.chat-live-wave-phase-1 { animation-delay: -80ms; }
.chat-live-wave-phase-2 { animation-delay: -160ms; }
.chat-live-wave-phase-3 { animation-delay: -240ms; }
.chat-live-wave-phase-4 { animation-delay: -320ms; }
.chat-live-wave-phase-5 { animation-delay: -400ms; }
.chat-live-wave-phase-6 { animation-delay: -480ms; }
.chat-live-wave-phase-7 { animation-delay: -560ms; }
.chat-live-wave-phase-8 { animation-delay: -640ms; }
.chat-live-wave-phase-9 { animation-delay: -720ms; }
.chat-live-wave-phase-10 { animation-delay: -800ms; }
.chat-live-wave-phase-11 { animation-delay: -880ms; }

.chat-input-live-connecting .chat-live-wave-bar,
.chat-input-live-error .chat-live-wave-bar {
    display: none;
}

.chat-input-live-connecting .chat-live-dot {
    background: var(--color-yellow);
}

.chat-input-live-listening .chat-live-dot {
    background: var(--text-error);
}

.chat-input-live-user-speaking .chat-live-dot {
    background: var(--color-cyan);
}

.chat-input-live-assistant-speaking .chat-live-dot {
    background: var(--color-green);
}

.chat-input-live-error .chat-live-dot {
    background: var(--text-error);
    animation-duration: 760ms;
}

.chat-input-live-user-speaking .chat-live-wave-bar {
    background: var(--color-cyan);
    opacity: 0.86;
    animation-name: chat-live-wave-user;
    animation-duration: 560ms;
}

.chat-input-live-assistant-speaking .chat-live-wave-bar {
    background: var(--color-green);
    opacity: 0.9;
    animation-name: chat-live-wave-assistant;
    animation-duration: 1040ms;
}

.chat-input-live-connecting .chat-live-waveform,
.chat-input-live-error .chat-live-waveform {
    justify-content: center;
}

.chat-input-live-connecting .chat-live-waveform::before {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-yellow) 32%, transparent);
    border-top-color: var(--color-yellow);
    animation: chat-live-connecting-spin 860ms linear infinite;
}

.chat-input-live-connecting .chat-live-waveform::after {
    content: "";
    position: absolute;
    width: min(180px, 58%);
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-yellow) 52%, transparent), transparent);
    transform: translateY(18px);
    opacity: 0.68;
}

.chat-input-live-error .chat-live-composer {
    border-color: color-mix(in srgb, var(--text-error) 58%, var(--background-modifier-border));
}

.chat-input-live-error .chat-live-waveform::before,
.chat-input-live-error .chat-live-waveform::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 2px;
    border-radius: 999px;
    background: var(--text-error);
}

.chat-input-live-error .chat-live-waveform::before {
    transform: rotate(45deg);
}

.chat-input-live-error .chat-live-waveform::after {
    transform: rotate(-45deg);
}

.chat-live-stop-button {
    --icon-size: 12px;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--text-error) 56%, var(--background-modifier-border));
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-error) 24%, var(--background-primary));
    color: var(--text-normal);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, opacity 0.2s, transform 0.15s;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--background-primary) 72%, var(--text-normal));
}

.chat-live-stop-button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text-error) 34%, var(--background-primary));
    transform: translateY(-50%) scale(1.05);
}

.chat-live-voice-output {
    display: none;
}

@keyframes chat-live-dot-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-error) 32%, transparent);
        opacity: 0.82;
    }
    50% {
        box-shadow: 0 0 0 5px transparent;
        opacity: 1;
    }
}

@keyframes chat-live-wave-listening {
    0%, 100% {
        transform: scaleY(0.24);
        opacity: 0.32;
    }
    50% {
        transform: scaleY(0.54);
        opacity: 0.62;
    }
}

@keyframes chat-live-wave-user {
    0%, 100% { transform: scaleY(0.28); }
    38% { transform: scaleY(1.22); }
    72% { transform: scaleY(0.56); }
}

@keyframes chat-live-wave-assistant {
    0%, 100% { transform: scaleY(0.42); }
    25% { transform: scaleY(1.22); }
    65% { transform: scaleY(0.82); }
}

@keyframes chat-live-connecting-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-stop {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--text-error-rgb, 239, 68, 68), 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(var(--text-error-rgb, 239, 68, 68), 0); }
}

@keyframes chat-pre-send-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.88);
    }
}

.chat-loading-spinner {
    animation: spin 1s linear infinite;
}

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

.chat-model-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.model-select {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    color: var(--text-normal);
    font-size: 0.8rem;
}

/* Error Display */
.chat-error {
    background: var(--background-modifier-error);
    color: var(--text-error);
    padding: 0.75rem 1rem;
    margin: 0.5rem 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--text-error);
    animation: errorSlideIn 0.3s ease-out;
}

@keyframes errorSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .chat-sidebar {
        min-width: 200px;
        width: 250px;
    }

    .message-container {
        width: 85%;
    }
}

/* Extra small screens and narrow sidebars */
@media (max-width: 480px), (max-width: 320px) {
    .message-container {
        width: 95%;
    }

    .chat-textarea {
        font-size: 14px;
    }
}

/* Dark Theme Adjustments */
.theme-dark .chat-textarea {
    background: var(--background-primary);
}

.theme-dark .message-assistant {
    background: transparent;
}

/* =========================== */
/* ORIGINAL ACCORDION STYLES  */
/* =========================== */

/* Accordion Styles */
.mcp-accordion {
    margin-bottom: 1rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background-color: var(--background-primary);
}

.mcp-accordion-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mcp-accordion-header {
    order: 1; /* Header first */
    border-bottom: 1px solid var(--background-modifier-border);
    background-color: var(--background-secondary);
}

.mcp-accordion-content {
    order: 2; /* Content second */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Handle border when accordion is open */
.mcp-accordion-content.is-open {
    border-top: 1px solid var(--background-modifier-border);
    max-height: 70vh; /* Use viewport height for better responsive behavior */
    overflow-y: auto; /* Enable vertical scrolling when content exceeds height */
    padding: 15px;
}

.mcp-accordion-content.is-open ~ .mcp-accordion-header {
    border-bottom: none;
}

.mcp-accordion-toggle {
    width: 100%;
    padding: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-normal);
    text-align: left;
}

.mcp-accordion-toggle:hover {
    background-color: var(--background-modifier-hover);
}

.mcp-accordion-title {
    font-size: 1.1em;
    font-weight: 500;
    flex: 1;
    text-align: left;
}

.mcp-accordion-icon {
    width: 24px;
    height: 24px;
    position: relative;
}

.mcp-accordion-icon::before,
.mcp-accordion-icon::after {
    content: '';
    position: absolute;
    background-color: var(--text-normal);
    transition: transform 0.25s ease-out;
}

.mcp-accordion-icon::before {
    top: 11px;
    left: 6px;
    width: 12px;
    height: 2px;
}

.mcp-accordion-icon::after {
    top: 6px;
    left: 11px;
    width: 2px;
    height: 12px;
}

.mcp-accordion-icon.is-open::after {
    transform: rotate(90deg);
}

.mcp-accordion-content > div {
    padding: 1rem;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .mcp-accordion-toggle {
        padding: 0.8rem;
    }

    .mcp-accordion-title {
        font-size: 1em;
    }
}

/* Setup Prompt Styles */
.mcp-section {
    margin-bottom: 1.5rem;
}

.mcp-section pre {
    background-color: var(--background-secondary);
    padding: 12px;
    border-radius: 4px;
    margin: 10px 0;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

.mcp-section code {
    font-family: var(--font-monospace);
    font-size: 0.9em;
}

.mcp-section button.mod-cta {
    margin-top: 8px;
    margin-bottom: 16px;
    padding: 6px 12px;
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mcp-section button.mod-cta:hover {
    background-color: var(--interactive-accent-hover);
}

/* =============================== */
/* EXPERIMENTAL WARNING STYLES    */
/* =============================== */

/* ChatView Experimental Warning Banner */
.chat-experimental-warning {
    background: var(--background-modifier-error);
    border: 1px solid var(--background-modifier-error-border, var(--background-modifier-border));
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    flex-wrap: wrap;
}

.chat-experimental-warning .warning-icon {
    font-size: 1.1em;
    color: var(--text-warning);
}

.chat-experimental-warning .warning-text {
    color: var(--text-on-accent);
}

.chat-experimental-warning .warning-link {
    color: var(--text-accent);
    text-decoration: underline;
    font-weight: 500;
}

.chat-experimental-warning .warning-link:hover {
    color: var(--text-accent-hover);
}

/* Settings Tab Experimental Warning Styles */
.experimental-warning-container {
    background: var(--background-modifier-error);
    border: 1px solid var(--background-modifier-error-border, var(--background-modifier-border));
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.experimental-warning-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.experimental-warning-icon {
    font-size: 1.2em;
    color: var(--text-warning);
}

.experimental-warning-title {
    margin: 0;
    color: var(--text-on-accent);
    font-size: 1.1em;
    font-weight: 600;
}

.experimental-warning-message {
    color: var(--text-on-accent);
    line-height: 1.4;
}

.experimental-warning-message p {
    margin: 0 0 8px 0;
}

.experimental-warning-message a {
    color: var(--text-accent);
    text-decoration: underline;
    font-weight: 500;
}

.experimental-warning-message a:hover {
    color: var(--text-accent-hover);
}

/* ChatView Settings Section */
.chatview-controls-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--background-modifier-border);
}

.chatview-controls-section h4 {
    margin: 0 0 16px 0;
    color: var(--text-normal);
    font-size: 1em;
    font-weight: 600;
}

.acknowledgment-display {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--background-secondary);
}

.acknowledgment-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

.acknowledgment-status.acknowledged {
    color: var(--text-success);
}

.acknowledgment-status.not-acknowledged {
    color: var(--text-muted);
}

.acknowledgment-check {
    font-weight: bold;
    font-size: 1em;
}

.acknowledgment-pending {
    font-weight: bold;
    font-size: 1em;
    opacity: 0.6;
}

/* ChatView Info Section */
.chatview-info-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--background-modifier-border);
}

.chatview-info-section h4,
.chatview-info-section h5 {
    margin: 0 0 12px 0;
    color: var(--text-normal);
    font-weight: 600;
}

.chatview-info-section h4 {
    font-size: 1em;
}

.chatview-info-section h5 {
    font-size: 0.95em;
    margin-top: 16px;
}

.chatview-info-section p {
    margin: 0 0 12px 0;
    color: var(--text-normal);
    line-height: 1.4;
}

.chatview-usage-notes ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.chatview-usage-notes li {
    margin-bottom: 4px;
    color: var(--text-normal);
    line-height: 1.3;
}

/* Settings Styles */
.nexus-settings {
    padding: 12px;
    max-width: 100%;
}

.nexus-settings textarea {
    min-height: 100px;
    width: 100%;
    font-family: var(--font-monospace);
}

/* Setup instructions */
.mcp-setup-instructions {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--background-secondary);
    border-radius: 5px;
}

/* Agents grid */
.mcp-agents-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.mcp-agent {
    padding: 10px;
    background-color: var(--background-secondary);
    border-radius: 5px;
    transition: transform 0.2s ease;
}

.mcp-agent:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mcp-agent-name {
    margin: 0 0 5px 0;
    color: var(--text-accent);
}

.mcp-agent-description {
    margin: 0;
    font-size: 0.9em;
}

/* Template info */
.template-pack-info {
    margin-top: 8px;
    padding: 10px;
    background-color: var(--background-secondary);
    border-radius: 4px;
    font-size: 0.9em;
}

.template-pack-info ul {
    margin: 8px 0;
    padding-left: 20px;
}

.mcp-config-section {
    margin-bottom: 1.5rem;
}

.mcp-config-section pre {
    background-color: var(--background-primary);
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

/* Memory settings styles */
.memory-settings-container {
    margin-top: 10px;
    display: block;
}

.memory-settings-container h3 {
    margin-top: 24px;
    margin-bottom: 16px;
    padding-bottom: 0;
}

.memory-settings-tabs {
    display: flex;
    border-bottom: 1px solid var(--background-modifier-border);
    margin-bottom: 15px;
}

.nexus-settings-tabs {
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: none;
}

.memory-tab {
    padding: 8px 15px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-right: 5px;
    user-select: none;
    border-radius: 4px 4px 0 0;
}

.nexus-settings-tab {
    flex: 1 1 120px;
    min-width: 120px;
    margin-right: 0;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    background: var(--background-primary);
}

.memory-tab.active {
    color: var(--text-accent);
    background-color: var(--background-secondary);
    border-top: 1px solid var(--background-modifier-border);
    border-right: 1px solid var(--background-modifier-border);
    border-left: 1px solid var(--background-modifier-border);
    border-bottom: none;
}

.nexus-settings-tab.active {
    border: 1px solid var(--interactive-accent);
    background: var(--background-secondary);
}

.nexus-settings-accordion {
    margin-bottom: 16px;
}

.nexus-settings-accordion-content {
    padding: 0;
}

.memory-tab-content {
    display: block;
}

.memory-tab-pane {
    display: none;
    padding: 10px 0;
}

.memory-tab-pane.active {
    display: block;
}

.memory-settings-textarea {
    width: 100%;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 8px;
    font-family: var(--font-monospace);
    resize: vertical;
}

.memory-usage-stats {
    background-color: var(--background-secondary);
    border-radius: 4px;
    padding: 16px;
    margin: 16px 0;
    display: block;
}

.memory-usage-progress {
    width: 100%;
    height: 8px;
    background-color: var(--background-modifier-border);
    border-radius: 4px;
    margin: 8px 0 16px 0;
    overflow: hidden;
}

.memory-usage-bar {
    height: 100%;
    background-color: var(--interactive-accent);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.memory-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    align-items: center;
}

.memory-model-usage {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--background-primary);
    border-radius: 5px;
    border: 1px solid var(--background-modifier-border);
}

.memory-actions button {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.memory-settings-desc {
    margin-bottom: 8px;
    opacity: 0.8;
}

.memory-advanced-toggle {
    text-align: right;
    margin-top: 16px;
    cursor: pointer;
    color: var(--text-accent);
}

.memory-advanced-settings {
    display: none;
}

.memory-advanced-settings.show {
    display: block;
}

.memory-notice {
    padding: 10px;
    background-color: var(--background-secondary);
    border-left: 3px solid var(--text-accent);
    margin-bottom: 15px;
}

/* Memory info notice */
.memory-info-notice {
    background-color: var(--background-secondary);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 16px;
    border-left: 4px solid var(--interactive-accent);
}


/* Progress indicator for indexing */
.memory-indexing-progress {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 12px;
}

.memory-progress-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--interactive-accent-rgb), 0.3);
    border-radius: 50%;
    border-top-color: var(--interactive-accent);
    animation: memory-spin 1s linear infinite;
}

@keyframes memory-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Indexing Progress Bar */
.mcp-progress-container {
    display: flex;
    flex-direction: column;
    background-color: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 5px;
    padding: 10px;
    margin: 8px 0;
}

.mcp-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.mcp-progress-text {
    font-size: 0.9em;
    color: var(--text-normal);
}

.mcp-progress-bar-container {
    height: 10px;
    background-color: var(--background-modifier-border);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.mcp-progress-bar {
    height: 100%;
    background-color: var(--interactive-accent);
    width: 0%;
    transition: width 0.5s ease;
}

.mcp-progress-cancel {
    align-self: flex-end;
    cursor: pointer;
    font-size: 0.8em;
    color: var(--text-error);
    margin-top: 5px;
}

.mcp-progress-cancel:hover {
    text-decoration: underline;
}



/* Modal Styles */
.folder-container {
    max-height: 400px;
    overflow-y: auto;
    margin: 1em 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 8px;
}

.folder-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
    cursor: pointer;
}

.folder-checkbox {
    margin-right: 8px;
}

.folder-name {
    flex: 1;
}

.modal-button-container {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 1em;
}

.folder-item:hover {
    background-color: var(--background-modifier-hover);
}

.folder-indent {
    padding-left: 20px;
}

.nexus-folder-item {
    display: flex;
    align-items: center;
    padding: 4px;
    cursor: pointer;
}

.nexus-checkbox {
    margin-right: 8px;
}

.nexus-folder-name {
    flex: 1;
}

/* Links */
a {
    color: var(--text-accent);
    text-decoration: underline;
}

a:hover {
    color: var(--text-accent-hover);
}


/* MCP Connection Status */
.mcp-connector-status {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: var(--font-ui-smaller);
}

.mcp-connector-status .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.mcp-connector-status .status-indicator.connected {
    background-color: var(--interactive-success);
}

.mcp-connector-status .status-indicator.disconnected {
    background-color: var(--text-error);
}

.mcp-connector-status .status-indicator.starting {
    background-color: var(--text-warning);
}

/* Config Modal Styles */
.mcp-config-toggle {
    margin-bottom: 20px;
    padding: 10px;
    background-color: var(--background-secondary);
    border-radius: 5px;
}

.mcp-config-label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.mcp-config-tabs {
    margin-bottom: 20px;
}

.mcp-tab-buttons {
    display: flex;
    border-bottom: 1px solid var(--background-modifier-border);
    margin-bottom: 10px;
}

.mcp-tab-button {
    padding: 8px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-right: 10px;
}

.mcp-tab-button:hover {
    background-color: var(--background-modifier-hover);
}

.mcp-tab-active {
    border-bottom: 2px solid var(--interactive-accent);
    font-weight: bold;
}

.mcp-tab-content {
    margin-bottom: 20px;
}

.mcp-tab-content.active {
    display: block;
}

.mcp-tab-content.hidden {
    display: none;
}

/* Memory Stats Styles */
.memory-stats-secondary {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-top: 0.25rem;
}

/* Settings Validation Styles */
.setting-error {
    color: var(--text-error);
    font-size: 0.8em;
    margin-top: 0.25rem;
    font-weight: 500;
}

.setting-warning {
    color: var(--text-warning);
    font-size: 0.8em;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Ollama Setup Instructions Styling */
.ollama-setup-instructions {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 16px;
    margin: 16px 0;
}

.ollama-step {
    margin-bottom: 16px;
}

.ollama-step:last-child {
    margin-bottom: 0;
}

.ollama-step h5 {
    color: var(--text-accent);
    margin: 0 0 8px 0;
    font-weight: 600;
}

.ollama-step p {
    margin: 8px 0;
    color: var(--text-normal);
}

.ollama-step ul {
    margin: 8px 0;
    padding-left: 20px;
}

.ollama-step li {
    margin: 4px 0;
    color: var(--text-normal);
}

.ollama-step code {
    background: var(--background-primary-alt);
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    padding: 2px 6px;
    font-family: var(--font-monospace);
    font-size: 0.9em;
    color: var(--text-normal);
}

.ollama-step a {
    color: var(--text-accent);
    text-decoration: none;
}

.ollama-step a:hover {
    text-decoration: underline;
}

/* Dimension Warning Styles */
.dimension-info-container {
    background-color: var(--background-secondary);
    border: 1px solid var(--interactive-accent);
    border-radius: 4px;
    padding: 12px;
    margin: 16px 0;
    border-left: 4px solid var(--interactive-accent);
}

.dimension-info-text {
    color: var(--text-normal);
    margin: 0;
    font-weight: 500;
}

.dimension-warning-container {
    background-color: var(--background-modifier-error-rgb);
    border: 1px solid var(--text-error);
    border-radius: 4px;
    padding: 12px;
    margin: 16px 0;
    border-left: 4px solid var(--text-error);
}

.dimension-warning-text {
    color: var(--text-error);
    margin: 0 0 12px 0;
    font-weight: 500;
    line-height: 1.4;
}

/* Searchable Card Manager */
.searchable-card-manager-search {
    margin-bottom: var(--space-m);
}

.searchable-card-manager-input {
    width: 100%;
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
}

.searchable-card-manager-input:focus {
    border-color: var(--interactive-accent);
    outline: none;
}

.searchable-card-manager-group {
    margin-bottom: var(--space-l);
}

.searchable-card-manager-group--hidden {
    display: none;
}

/* Card Manager Styles - Unified for all card-based UIs */
.card-manager-add-button {
    margin-bottom: var(--space-l);
}

.card-manager-add-button button {
    width: 100%;
}

.card-manager-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
}

.card-manager-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
    background-color: var(--background-secondary);
    border-radius: 6px;
    border: 1px dashed var(--background-modifier-border);
}

.agent-management-card {
    background-color: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    padding: 16px;
    transition: all 0.2s ease;
}

.agent-management-card:hover {
    border-color: var(--interactive-accent);
    background-color: var(--background-modifier-hover);
}

.agent-management-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.agent-management-card-title {
    font-weight: 600;
    font-size: 1.1em;
    color: var(--text-normal);
    flex: 1;
}

.agent-management-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-management-toggle {
    display: flex;
    align-items: center;
}

.agent-management-delete-btn:hover {
    background-color: var(--text-error);
    color: var(--text-on-accent);
}

.agent-management-card-description {
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.4;
}

.agent-management-card-status {
    font-size: 0.9em;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.agent-management-card-status.enabled {
    color: var(--text-success);
    background-color: rgba(var(--color-green-rgb), 0.1);
}

.agent-management-card-status.disabled {
    color: var(--text-muted);
    background-color: var(--background-modifier-border);
}

/* Coming Soon Provider Card */
.provider-coming-soon {
    opacity: 0.6;
    pointer-events: none;
}

.provider-coming-soon .agent-management-card-description {
    color: var(--text-accent);
    font-style: italic;
}

/* Modal content styling */
.modal-content h1 {
    margin-bottom: 20px;
    font-size: 1.5em;
    font-weight: 600;
}

.modal-content h2 {
    margin-top: 20px;
    margin-bottom: 8px;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-normal);
}

.modal-content h2:first-of-type {
    margin-top: 0;
}

.agent-modal-input,
.agent-modal-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background-color: var(--background-primary);
    color: var(--text-normal);
    font-family: var(--font-interface);
    font-size: var(--font-ui-medium);
    margin-bottom: 4px;
}

.agent-modal-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: var(--font-interface);
    line-height: 1.5;
}

.agent-modal-input:focus,
.agent-modal-textarea:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
}

/* Usage Chart Styles */
.usage-chart-container {
    width: 100%;
}

.usage-chart-title {
    margin-bottom: 16px;
    color: var(--text-normal);
}

.usage-budget-section {
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background-color: var(--background-secondary);
}

.usage-budget-header {
    margin: 0 0 8px 0;
    color: var(--text-normal);
}

.usage-progress-container {
    margin-bottom: 8px;
}

.usage-progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--background-modifier-border);
    border-radius: 4px;
    overflow: hidden;
}

.usage-progress-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.usage-progress-fill.success {
    background-color: var(--text-success);
}

.usage-progress-fill.warning {
    background-color: var(--text-warning);
}

.usage-progress-fill.error {
    background-color: var(--text-error);
}

.usage-budget-text {
    font-size: 0.9em;
    color: var(--text-muted);
}

.usage-budget-warning {
    color: var(--text-error);
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 4px;
}

.usage-budget-input {
    width: 100%;
    margin-top: 8px;
    padding: 4px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background-color: var(--background-primary);
    color: var(--text-normal);
}

.usage-costs-section {
    margin-bottom: 16px;
}

.usage-section-title {
    margin: 0 0 8px 0;
    color: var(--text-normal);
}

.usage-total-cost {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-normal);
    margin-bottom: 12px;
}

.usage-stacked-progress-container {
    width: 100%;
    height: 8px;
    background-color: var(--background-modifier-border);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    margin-bottom: 8px;
}

.usage-progress-segment {
    height: 100%;
    transition: width 0.3s ease;
}

.usage-provider-list {
    font-size: 0.9em;
    margin-top: 8px;
}

.usage-provider-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    color: var(--text-muted);
}

.usage-provider-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.usage-provider-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.usage-provider-name {
    color: var(--text-normal);
}

.usage-provider-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.usage-provider-cost {
    font-family: var(--font-monospace);
}

.usage-provider-percentage {
    font-size: 0.8em;
    color: var(--text-faint);
}

.usage-no-data {
    color: var(--text-muted);
    font-size: 0.9em;
    font-style: italic;
}

.usage-actions {
    margin-top: 16px;
}

.usage-reset-button {
    padding: 6px 12px;
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.usage-reset-button:hover {
    background-color: var(--interactive-accent-hover);
}

/* LLM Usage Tab Styles */
.llm-usage-main-container {
    padding: 16px;
}

.llm-usage-error {
    color: var(--text-error);
    padding: 20px;
    text-align: center;
    border: 1px solid var(--text-error);
    border-radius: 6px;
    background-color: var(--background-secondary);
}

.llm-usage-error-button {
    margin-top: 12px;
    padding: 6px 12px;
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.llm-usage-button-container {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

/* LLM Provider Modal Styles */
.llm-provider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.llm-provider-model-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.llm-provider-model-name {
    min-width: 150px;
    font-weight: bold;
}

.llm-provider-description-input {
    flex: 1;
}

.llm-provider-input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background-color: var(--background-primary);
    color: var(--text-normal);
}

.llm-provider-input.validating {
    border-color: var(--color-yellow);
    background-color: color-mix(in srgb, var(--color-yellow) 20%, transparent);
    border-width: 2px;
}

.llm-provider-input.success {
    border-color: var(--color-green);
    background-color: color-mix(in srgb, var(--color-green) 10%, transparent);
    border-width: 2px;
}

.llm-provider-input.error {
    border-color: var(--color-red);
    background-color: color-mix(in srgb, var(--color-red) 10%, transparent);
    border-width: 2px;
}

.llm-provider-button-container {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}


/* Progress Bar Component Styles */
.progress-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: var(--background-secondary);
    border-radius: 4px;
    margin: 8px 0;
}

.progress-bar-content {
    flex: 1;
}

.progress-bar-text {
    font-size: 0.9em;
    color: var(--text-normal);
    margin-bottom: 4px;
}

.progress-bar-track {
    width: 100%;
    height: 8px;
    background-color: var(--background-modifier-border);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--interactive-accent);
    transition: width 0.3s ease;
}

/* Agent Management Styles */
.agent-management-button-container {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}


/* Token Usage Component Styles */
.token-usage-progress-bar {
    /* Dynamic width set via JS */
}

/* Usage Settings Tab Styles */
.usage-settings-budget-container {
    margin-top: 20px;
}

/* Diff styles for main.js compiled code */
.diff-insert {
    background: color-mix(in srgb, var(--color-green) 15%, transparent);
}

.diff-delete {
    background: color-mix(in srgb, var(--color-red) 15%, transparent);
}

/* =============================================================================
   CHAT SELECTORS AND PROGRESS
   ============================================================================= */

/* Model Selector */
.model-selector {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.model-selector-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.model-selector-dropdown {
    width: 100%;
}

.model-selector .model-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 12px;
    min-width: 0;
}

.model-select:focus {
    outline: none;
    border-color: var(--interactive-accent);
}

/* Agent Selector */
.agent-selector {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agent-selector-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.agent-selector-dropdown {
    width: 100%;
}

.agent-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 12px;
    min-width: 0;
}

.agent-select:focus {
    outline: none;
    border-color: var(--interactive-accent);
}

.agent-info {
    margin-top: 4px;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 10px;
    max-height: 60px;
    overflow: hidden;
}

.agent-info-default {
    color: var(--text-muted);
    font-style: italic;
}

.agent-info-active {
    background: var(--background-modifier-form-field);
    border: 1px solid var(--background-modifier-border);
}

.agent-info-name {
    font-weight: 500;
    color: var(--text-normal);
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-info-description {
    color: var(--text-muted);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-info-prompt {
    color: var(--text-faint);
    font-size: 9px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.context-warning-critical {
    background: rgba(var(--color-red-rgb), 0.1);
    color: var(--color-red);
    border: 1px solid var(--color-red);
}

/* =============================================================================
   MODAL DIALOGS FOR CHAT
   ============================================================================= */

.chat-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.chat-modal {
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  box-shadow: var(--shadow-l);
  min-width: 400px;
  max-width: 500px;
  width: 90vw;
}

.chat-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--background-modifier-border);
}

.chat-modal-header h3 {
  margin: 0;
  color: var(--text-normal);
  font-size: 16px;
  font-weight: 600;
}

.chat-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.chat-modal-close:hover {
  background: var(--background-modifier-hover);
}

.chat-modal-content {
  padding: 20px;
}

.chat-modal-content p {
  margin: 0 0 16px 0;
  color: var(--text-normal);
}

.chat-title-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: 14px;
  transition: border-color 0.2s;
}

.chat-title-input:focus {
  outline: none;
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 2px var(--interactive-accent-hover);
}

.chat-title-input.chat-input-error {
  border-color: var(--color-red);
  box-shadow: 0 0 0 2px rgba(var(--color-red-rgb), 0.3);
}

.chat-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid var(--background-modifier-border);
}

.chat-btn-primary,
.chat-btn-secondary {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.chat-btn-primary {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}

.chat-btn-primary:hover {
  background: var(--interactive-accent-hover);
}

.chat-btn-secondary {
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
}

.chat-btn-secondary:hover {
  background: var(--background-modifier-hover);
}

/* Responsive design for cards */
@media (max-width: 768px) {
    .card-manager-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .agent-management-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .agent-management-card-actions {
        align-self: flex-end;
    }

    .chat-modal {
        min-width: 300px;
        margin: 20px;
    }
}

/* AI Loading Animation Styles */
.ai-loading {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}

/* AI loading in header (inline with icon) */
.ai-loading-header {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 8px;
  font-size: 0.95em;
}

.ai-loading .dots,
.ai-loading-header .dots {
  display: inline-block;
  width: 20px;
  text-align: left;
  margin-left: 2px;
  animation: ai-pulse 1.5s ease-in-out infinite;
}

@keyframes ai-pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

/* Message loading state */
.message-content .ai-loading {
  min-height: 24px;
  display: flex;
  align-items: center;
}

/* Ensure loading messages have proper styling */
.message.assistant .ai-loading {
  background: var(--background-secondary);
  border-radius: 8px;
  padding: 12px;
  margin: 4px 0;
}

/* Streaming message styles */
.streaming-content {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.streaming-cursor {
  display: inline-block;
  animation: cursor-blink 1s infinite;
  color: var(--interactive-accent);
  font-weight: bold;
}

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

.final-content {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* =========================== */
/* BRANCH NAVIGATION STYLES   */
/* =========================== */

/* Message-level Branch Navigator - integrated into action pill */
.message-branch-navigator {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: -4px;
}

.message-branch-navigator-hidden {
  display: none;
}

.message-branch-navigator-visible {
  display: flex;
}

/* Branch indicator (X/Y counter) */
.message-branch-indicator {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 24px;
  text-align: center;
  user-select: none;
  letter-spacing: 0.3px;
  padding: 0 2px;
}

/* Branch buttons - extend message-action-btn styles */
.message-action-btn.message-branch-prev svg,
.message-action-btn.message-branch-next svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

/* Subtle hover effect for branch buttons */
.message-action-btn.message-branch-prev:hover:not(:disabled),
.message-action-btn.message-branch-next:hover:not(:disabled) {
  color: var(--text-accent);
}

/* Disabled state for branch buttons */
.message-action-btn.message-branch-prev:disabled,
.message-action-btn.message-branch-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  color: var(--text-faint);
}

/* Branch nav buttons: sized close to the 12px chevron so there's no phantom
   padding inside. Chevron edge-aligned toward the indicator (flex-end/start)
   eliminates the remaining ~2px wasted space. Mobile bumps to 24 for tap. */
.message-action-btn.message-branch-prev,
.message-action-btn.message-branch-next {
  width: 16px;
  height: 16px;
}
/* Extra class repeat outweighs Obsidian's .clickable-icon justify-content
   default, which otherwise re-centers the chevron. */
.message-action-btn.message-action-btn.message-branch-prev {
  justify-content: flex-end;
}
.message-action-btn.message-action-btn.message-branch-next {
  justify-content: flex-start;
}
/* Mobile touch-target override — restore comfortable tap size but keep the
   edge-align so the chevrons still cluster tightly to the indicator. */
body.is-mobile .message-action-btn.message-branch-prev,
body.is-mobile .message-action-btn.message-branch-next {
  width: 24px;
  height: 24px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .message-branch-navigator {
    gap: 2px;
  }

  .message-branch-indicator {
    font-size: 10px;
    min-width: 20px;
  }
}

/* Conversation-level Branch Navigator Container (Legacy) */
.branch-navigator-container {
  margin-left: auto; /* Push to right side of header */
}

.branch-navigator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  transition: all 0.2s ease;
}

.branch-navigator-hidden {
  display: none;
}

.branch-navigator-visible {
  display: flex;
  animation: branch-appear 0.3s ease;
}

/* Branch Navigation Buttons */
.branch-nav-button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  width: 20px;
  height: 20px;
}

.branch-nav-button:hover:not(:disabled) {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.branch-nav-button:active:not(:disabled) {
  background: var(--background-modifier-active);
  transform: scale(0.95);
}

.branch-nav-button:disabled,
.branch-nav-button.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  color: var(--text-faint);
}

.branch-nav-button svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

/* Branch Indicator */
.branch-indicator {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 24px;
  text-align: center;
  user-select: none;
  letter-spacing: 0.5px;
}

/* Header Integration */
.chat-header .branch-navigator-container {
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
}

.chat-header:hover .branch-navigator-container,
.chat-header .branch-navigator-container.branch-navigator-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Branch Navigator Animations */
@keyframes branch-appear {
  from {
    opacity: 0;
    transform: scale(0.8) translateX(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

/* Dark Mode Adjustments */
.theme-dark .branch-navigator {
  background: var(--background-primary-alt);
  border-color: var(--background-modifier-border-hover);
}

.theme-dark .branch-nav-button:hover:not(:disabled) {
  background: var(--background-modifier-hover);
  color: var(--text-accent);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .branch-navigator {
    gap: 6px;
    padding: 3px 6px;
  }
  
  .branch-nav-button {
    width: 18px;
    height: 18px;
  }
  
  .branch-nav-button svg {
    width: 10px;
    height: 10px;
  }
  
  .branch-indicator {
    font-size: 10px;
    min-width: 20px;
  }
}
/* =========================== */
/* CHAT SETTINGS MODAL STYLES */
/* =========================== */

.chat-settings-modal {
    padding: 20px;
    min-width: 500px;
    max-width: 600px;
}

.chat-settings-modal h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--text-normal);
}

/* =========================== */
/* MCP SETUP UI STYLES        */
/* =========================== */

/* Setup sections */
.mcp-setup-section {
    margin: 20px 0;
    padding: 15px;
    background: var(--background-secondary);
    border-radius: 6px;
    border: 1px solid var(--background-modifier-border);
}

.mcp-setup-separator {
    margin: 20px 0;
}

.mcp-setup-or {
    text-align: center;
    margin: 10px 0;
    color: var(--text-muted);
    font-weight: 500;
}

/* Config status */
.mcp-config-status {
    margin: 15px 0;
    padding: 12px;
    border-radius: 5px;
    background-color: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
}

.mcp-status {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mcp-status span {
    font-weight: 500;
    font-size: 14px;
}

.mcp-status-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    padding: 0;
}

.mcp-status-neutral {
    color: var(--text-muted);
}

.mcp-status-warning {
    color: var(--text-warning);
}

.mcp-status-success {
    color: var(--text-success);
}

/* Info box */
.mcp-info-box {
    margin: 15px 0;
    padding: 12px;
    border-left: 3px solid var(--interactive-accent);
    background-color: var(--background-secondary);
    border-radius: 4px;
}

.mcp-info-box strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text-normal);
}

.mcp-info-box ol,
.mcp-info-box ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.mcp-info-box li {
    margin: 6px 0;
    color: var(--text-normal);
    font-size: 13px;
}

/* Next steps notification */
.mcp-next-steps {
    margin: 15px 0;
    padding: 15px;
    border-radius: 5px;
    background-color: var(--background-primary-alt);
    border: 1px solid var(--interactive-accent);
    animation: fadeIn 0.3s ease-in;
}

.mcp-next-steps h5 {
    margin: 0 0 12px 0;
    color: var(--text-normal);
    font-size: 16px;
}

.mcp-next-steps-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mcp-next-steps-info p {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.mcp-next-steps-info strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text-normal);
    font-size: 13px;
}

.mcp-next-steps-info ul,
.mcp-next-steps-info ol {
    margin: 6px 0 0 0;
    padding-left: 20px;
}

.mcp-next-steps-info li {
    margin: 4px 0;
    font-size: 13px;
    color: var(--text-normal);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================== */
/* SUGGESTER AUTOCOMPLETE      */
/* =========================== */

/* Suggester dropdown container */
.suggester-container {
    position: fixed;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    padding: 4px;
}

.theme-dark .suggester-container {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Base suggester item styles */
.suggester-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 4px;
    min-height: 48px;
}

.suggester-item:hover {
    background-color: var(--background-modifier-hover);
}

.suggester-item.is-selected {
    background-color: var(--background-modifier-active-hover);
}

/* Icon container */
.suggester-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Content container */
.suggester-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Title text */
.suggester-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description text */
.suggester-description {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge container */
.suggester-badge-container {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Base badge */
.suggester-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* Category badge (for tools) */
.category-badge {
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
}

/* Size badge (for notes) */
.size-badge {
    background-color: var(--background-modifier-border);
    color: var(--text-muted);
}

/* Token info badge */
.token-info {
    background-color: var(--background-secondary-alt);
    color: var(--text-muted);
}

/* Token warning badges */
.token-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.token-badge-info {
    background-color: var(--color-cyan);
    color: white;
}

.token-badge-warning {
    background-color: var(--color-yellow);
    color: var(--text-normal);
}

.token-badge-error {
    background-color: var(--color-red);
    color: white;
}

/* Specific suggester type styles */
.note-suggester-item .suggester-icon {
    color: var(--color-blue);
}

.agent-suggester-item .suggester-icon {
    color: var(--color-purple);
}

.tool-suggester-item .suggester-icon {
    color: var(--color-green);
}

/* Suggester dropdown container */
.suggestion-container {
    background-color: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    box-shadow: var(--shadow-l);
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}

/* Scrollbar styling for suggester */
.suggestion-container::-webkit-scrollbar {
    width: 8px;
}

.suggestion-container::-webkit-scrollbar-track {
    background: transparent;
}

.suggestion-container::-webkit-scrollbar-thumb {
    background: var(--background-modifier-border);
    border-radius: 4px;
}

.suggestion-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Empty state */
.suggester-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ===========================================
   Chat Settings Modal - Complete Styling
   =========================================== */

/* Header */
.chat-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.chat-settings-header h2 {
    margin: 0;
}

/* Button Containers */
.chat-settings-buttons {
    display: flex;
    gap: 8px;
}

/* ===========================================
   Note Picker Modal - Complete Styling
   =========================================== */

/* Header */
.note-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.note-picker-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.note-picker-actions {
    display: flex;
    gap: 8px;
}

/* Form */
.note-picker-form {
    max-width: 600px;
    margin: 0 auto;
}

.note-picker-search {
    margin-bottom: 12px;
}

/* File List */
.note-picker-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    margin-top: 12px;
}

.note-picker-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--background-modifier-border);
    transition: background-color 0.1s ease;
}

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

.note-picker-item:hover {
    background-color: var(--background-modifier-hover);
}

.note-picker-item.is-selected {
    background-color: var(--background-modifier-hover);
    font-weight: 600;
}

.note-picker-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
}

.note-picker-item.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===========================================
   Thinking Section - New Styling
   =========================================== */

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

/* Effort slider label */
.thinking-effort-value {
    min-width: 60px;
    text-align: center;
    font-weight: 500;
    margin-left: 8px;
}

/* ===========================================
   Generic Utility Classes
   =========================================== */

/* Hidden utility - used for conditional visibility */
.is-hidden.is-hidden {
    display: none;
}

/* ===========================================
   Chat Settings Renderer - Shared Component
   =========================================== */

.chat-settings-renderer {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

/* Section boxes */
.csr-section {
    background: var(--background-secondary);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.csr-section-header {
    background: var(--background-modifier-hover);
    padding: var(--space-s) var(--space-m);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.csr-section-desc {
    padding: var(--space-xs) var(--space-m) 0;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
}

.csr-info-icon {
    cursor: help;
    opacity: 0.6;
    font-size: 11px;
}

.csr-info-icon:hover {
    opacity: 1;
}

.csr-section-content {
    padding: var(--space-s) var(--space-m) var(--space-m);
}

.csr-section-content .setting-item {
    border: none;
    padding: var(--space-xs) 0;
}

.csr-section-content .setting-item:first-child {
    padding-top: var(--space-xs);
}

.csr-section-content .setting-item:last-child {
    padding-bottom: 0;
}

.nexus-voice-section-desc {
    padding-left: 0;
    padding-right: 0;
}

.nexus-voice-group-label {
    margin-top: var(--space-m);
    padding-top: var(--space-s);
    border-top: 1px solid var(--background-modifier-border);
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.nexus-voice-section-desc + .nexus-voice-group-label {
    margin-top: var(--space-s);
    border-top: none;
}

.nexus-voice-warning {
    margin-top: var(--space-s);
    padding: var(--space-s);
    border: 1px solid var(--background-modifier-error);
    border-radius: var(--radius-s);
    background: var(--background-modifier-error);
    color: var(--text-error);
    font-size: 12px;
}

/* Effort slider row */
.csr-effort-row {
    padding-left: var(--space-s);
    border-left: 2px solid var(--background-modifier-border);
    margin-top: var(--space-xs);
}

.csr-effort-value {
    min-width: 50px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-muted);
    margin-left: var(--space-s);
}

.csr-temp-value {
    min-width: 30px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-muted);
    margin-left: var(--space-s);
}

.csr-provider-warning {
    margin-top: var(--space-s);
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--background-modifier-border);
    border-left: 3px solid var(--text-warning);
    border-radius: var(--radius-s);
    background: var(--background-primary);
}

.csr-provider-warning-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-warning);
    margin-bottom: var(--space-xxs);
}

.csr-provider-warning-text {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Context notes */
.csr-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-s) 0 var(--space-xs);
    margin-top: var(--space-xs);
    border-top: 1px solid var(--background-modifier-border);
}

.csr-notes-header span {
    font-size: 13px;
    color: var(--text-normal);
}

.csr-add-btn {
    background: transparent;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--space-xxs) var(--space-s);
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
}

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

.csr-notes-list {
    margin-top: var(--space-xs);
}

.csr-notes-empty {
    font-size: 12px;
    color: var(--text-faint);
    padding: var(--space-xs) 0;
}

.csr-note-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-s);
    background: var(--background-primary);
    border-radius: var(--radius-s);
    margin-bottom: var(--space-xs);
}

.csr-note-path {
    font-size: 12px;
    color: var(--text-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.csr-note-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 var(--space-xs);
    font-size: 16px;
    line-height: 1;
}

.csr-note-remove:hover {
    color: var(--text-error);
}

/* ===========================================
   Nexus Settings UI - Tab-Based Navigation
   =========================================== */

/* Header section */
.nexus-settings-header {
    padding: 16px 0;
    border-bottom: 1px solid var(--background-modifier-border);
    margin-bottom: 16px;
}

.nexus-settings-header h2 {
    margin: 0 0 4px 0;
    font-size: 1.5em;
}

.nexus-settings-desc {
    color: var(--text-muted);
    margin: 0 0 12px 0;
}

.nexus-settings-version-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.nexus-settings-version {
    color: var(--text-muted);
    font-size: 0.9em;
}

.nexus-update-badge {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
}

/* Back button */
.nexus-back-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-normal);
    cursor: pointer;
    margin-bottom: var(--space-l);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-s);
    background: var(--background-modifier-hover);
    border: 1px solid var(--background-modifier-border);
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.15s ease;
}

.nexus-back-button:hover {
    background: var(--background-modifier-border);
    border-color: var(--background-modifier-border-hover);
}

.nexus-back-button:active {
    transform: translateY(1px);
}

.nexus-back-button-icon {
    display: flex;
    align-items: center;
}

.nexus-back-button-icon svg {
    display: block;
}

/* Skeleton loading cards */
@keyframes nexus-skeleton-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
}

.nexus-skeleton-card {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 16px;
    animation: nexus-skeleton-pulse 1.5s ease-in-out infinite;
}

.nexus-skeleton-title {
    height: 20px;
    width: 60%;
    background: var(--background-modifier-border);
    border-radius: 4px;
    margin-bottom: 12px;
}

.nexus-skeleton-description {
    height: 14px;
    width: 80%;
    background: var(--background-modifier-border);
    border-radius: 4px;
    margin-bottom: 16px;
}

.nexus-skeleton-actions {
    height: 24px;
    width: 40%;
    background: var(--background-modifier-border);
    border-radius: 4px;
}

/* List items */
.nexus-list-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background-color 0.1s ease;
}

.nexus-list-item:hover {
    background: var(--background-modifier-hover);
}

.nexus-list-item-content {
    flex: 1;
    min-width: 0;
}

.nexus-list-item-title {
    font-weight: 500;
    margin-bottom: 2px;
}

.nexus-list-item-subtitle {
    color: var(--text-muted);
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status badges */
.nexus-status-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.nexus-status-badge.configured {
    background: var(--background-modifier-success);
    color: var(--text-on-accent);
}

.nexus-status-badge.not-configured {
    color: var(--text-muted);
    background: var(--background-modifier-border);
}

/* Provider defaults section */
.nexus-provider-defaults {
    background: var(--background-secondary);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
}

/* Provider group titles */
.nexus-provider-group-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 24px 0 8px 0;
    padding: 0 4px;
}

/* Get Started intro section */
.nexus-intro {
    margin-bottom: 16px;
}

.nexus-intro-desc {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.nexus-capabilities h4 {
    margin: 0 0 12px 0;
    font-size: 0.95em;
}

.nexus-capability-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

@media (max-width: 500px) {
    .nexus-capability-list {
        grid-template-columns: 1fr;
    }
}

.nexus-capability-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: var(--text-normal);
}

.nexus-cap-icon {
    font-size: 1.1em;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.nexus-divider {
    border: none;
    border-top: 1px solid var(--background-modifier-border);
    margin: 24px 0;
}

/* Get Started setup paths */
.nexus-setup-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0;
}

@media (max-width: 500px) {
    .nexus-setup-paths {
        grid-template-columns: 1fr;
    }
}

.nexus-setup-path {
    padding: 24px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}

.nexus-setup-path:hover {
    border-color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}

.nexus-setup-path-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.nexus-setup-path-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.nexus-setup-path-desc {
    color: var(--text-muted);
    font-size: 0.85em;
}

/* MCP config output */
.nexus-mcp-output {
    background: var(--background-primary-alt);
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: var(--font-monospace);
    font-size: 0.85em;
    white-space: pre-wrap;
    word-break: break-all;
}

/* MCP config input */
.nexus-mcp-input {
    width: 100%;
    font-family: var(--font-monospace);
    font-size: 0.85em;
}

/* Config path display */
.nexus-config-path {
    background: var(--background-primary-alt);
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.nexus-config-path code {
    font-family: var(--font-monospace);
    font-size: 0.9em;
    word-break: break-all;
}

/* Setup steps */
.nexus-setup-step {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--background-modifier-border);
}

.nexus-setup-step:last-child {
    border-bottom: none;
}

.nexus-setup-step h4 {
    margin: 0 0 8px 0;
}

/* Setup instructions list */
.nexus-setup-instructions {
    margin: 12px 0;
    padding-left: 24px;
}

.nexus-setup-instructions li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* MCP Setup - Compact Row Layout */
.nexus-mcp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--background-secondary);
    border-radius: 8px;
    margin-top: 12px;
}

.nexus-mcp-status {
    font-weight: 500;
    color: var(--text-muted);
}

.nexus-mcp-status.nexus-mcp-warning {
    color: var(--text-error);
}

.nexus-mcp-status.nexus-mcp-success {
    color: var(--text-success);
}

.nexus-mcp-actions {
    display: flex;
    gap: 8px;
}

.nexus-mcp-actions button {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85em;
}

.nexus-mcp-help {
    color: var(--text-muted);
    font-size: 0.85em;
    margin: 8px 0 0 0;
}

.nexus-mcp-node-warning {
    border: 1px solid var(--background-modifier-error);
    margin-bottom: 4px;
}

/* Manual Config Section */
.nexus-manual-config {
    margin-top: 16px;
}

.nexus-manual-config h4 {
    margin: 0 0 8px 0;
    font-size: 1em;
    color: var(--text-normal);
}

.nexus-config-code {
    background: var(--background-primary-alt);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: 12px;
    margin: 8px 0;
    overflow-x: auto;
    font-size: 0.85em;
}

.nexus-config-code code {
    font-family: var(--font-monospace);
    white-space: pre;
}

.nexus-manual-config .nexus-config-path {
    margin-top: 12px;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.nexus-manual-config .nexus-config-path a {
    color: var(--text-accent);
    text-decoration: none;
    font-family: var(--font-monospace);
    font-size: 0.85em;
}

.nexus-manual-config .nexus-config-path a:hover {
    text-decoration: underline;
}

/* Reasoning - Compact Inline */
.nexus-thinking-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--background-modifier-border);
}

.nexus-thinking-effort {
    display: flex;
    gap: 4px;
    margin-right: 8px;
}

.nexus-effort-pill {
    padding: 3px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75em;
    cursor: pointer;
    transition: all 0.15s ease;
}

.nexus-effort-pill:hover {
    border-color: var(--interactive-accent);
    color: var(--text-normal);
}

.nexus-effort-pill.is-active {
    background: var(--interactive-accent);
    border-color: var(--interactive-accent);
    color: var(--text-on-accent);
}

/* Copy container */
.nexus-copy-container {
    margin-top: 12px;
}

/* Placeholder message */
.nexus-placeholder {
    color: var(--text-muted);
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* Loading message */
.nexus-loading-message {
    color: var(--text-muted);
    font-style: italic;
    padding: 16px;
}

/* Error message */
.nexus-error {
    color: var(--text-error);
    padding: 16px;
    background: var(--background-modifier-error);
    border-radius: 6px;
}

/* Detail view title */
.nexus-detail-title {
    margin-bottom: 16px;
}

/* Form actions container */
.nexus-form-actions {
    display: flex;
    gap: var(--space-m);
    justify-content: flex-end;
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--background-modifier-border);
}

/* Modern Form - Stacked layout for cleaner look */
.nexus-modern-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 560px;
}

.nexus-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Breathing room between consecutive form-field groups (e.g., Context section
   Purpose / Preferences / Dedicated agent / Key files). Targets only stacked
   siblings, leaving .ws-section-body scroll/clip behavior untouched. */
.nexus-form-field + .nexus-form-field {
    margin-top: var(--space-m);
}

.nexus-form-field-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-m) 0;
    border-top: 1px solid var(--background-modifier-border);
}

.nexus-form-label {
    font-size: var(--font-ui-small);
    font-weight: var(--font-semibold);
    color: var(--text-normal);
}

.nexus-form-hint {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin-top: calc(-1 * var(--space-xxs));
}

.nexus-form-input,
.nexus-form-textarea {
    width: 100%;
    padding: var(--space-m) var(--space-m);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    font-family: var(--font-interface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nexus-form-input:focus,
.nexus-form-textarea:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px var(--interactive-accent-hover);
}

.nexus-form-input::placeholder,
.nexus-form-textarea::placeholder {
    color: var(--text-faint);
}

.nexus-form-textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

.nexus-form-textarea-large {
    min-height: 160px;
}

/* Toggle styling */
.nexus-toggle-label-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.nexus-toggle-wrapper {
    flex-shrink: 0;
}

.nexus-toggle-checkbox {
    width: 42px;
    height: 24px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--background-modifier-border-hover);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}

.nexus-toggle-checkbox::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--background-primary);
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.nexus-toggle-checkbox:checked {
    background: var(--interactive-accent);
}

.nexus-toggle-checkbox:checked::before {
    transform: translateX(18px);
}

/* Form select dropdown */
.nexus-form-select {
    width: 100%;
    padding: var(--space-m) var(--space-m);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    font-family: var(--font-interface);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.nexus-form-select:focus {
    outline: none;
    border-color: var(--interactive-accent);
}

/* Obsidian native components - make them fill width in forms */
.nexus-form-field input[type="text"],
.nexus-form-field textarea,
.nexus-form-field .dropdown {
    width: 100%;
}

.nexus-dropdown-container,
.nexus-dropdown-container .dropdown {
    width: 100%;
}

/* Workflow editor styles */
.nexus-workflow-header {
    display: flex;
    align-items: center;
    gap: var(--space-l);
    margin-bottom: var(--space-xl);
}

.nexus-workflow-title {
    margin: 0;
}

.nexus-workflow-form {
    max-width: 600px;
}

.nexus-workflow-form .setting-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-m);
    padding: var(--space-l) 0;
}

.nexus-workflow-form .setting-item-info {
    width: 100%;
}

.nexus-workflow-form .setting-item-control {
    width: 100%;
    justify-content: flex-start;
}

.nexus-workflow-form .setting-item-control input[type="text"],
.nexus-workflow-form .setting-item-control textarea,
.nexus-workflow-form .setting-item-control .dropdown {
    width: 100%;
    max-width: none;
}

.nexus-workflow-form .setting-item-control textarea {
    min-height: 180px;
}

.nexus-workflow-form .setting-item-description {
    margin-top: var(--space-xs);
}

.nexus-workflow-section-title {
    margin: var(--space-l) 0 var(--space-s);
    font-size: var(--font-ui-medium);
    color: var(--text-normal);
}

.nexus-workflow-schedule {
    margin-top: var(--space-s);
    padding-top: var(--space-s);
    border-top: 1px solid var(--background-modifier-border);
}

.nexus-workflow-schedule-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

/* Item row with native input component */
.nexus-item-row input[type="text"] {
    flex: 1;
    min-width: 0;
}

/* Workspace Form - Scrollable single form */
.nexus-workspace-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

/* Form section with header */
.nexus-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--space-l) 0;
    border-bottom: 1px solid var(--background-modifier-border);
}

.nexus-form-section:first-child {
    padding-top: 0;
}

.nexus-form-section:last-child {
    border-bottom: none;
}

.nexus-section-header {
    margin: 0 0 var(--space-xs) 0;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Item list container */
.nexus-item-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

/* Item row (workflow or file entry) */
.nexus-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-m) var(--space-m);
    background: var(--background-secondary);
    border-radius: var(--radius-s);
}

/* Item info section */
.nexus-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    min-width: 0;
}

.nexus-item-title {
    font-weight: var(--font-medium);
    color: var(--text-normal);
}

.nexus-item-subtitle {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Item input (for key files) */
.nexus-item-input {
    flex: 1;
    min-width: 0;
}

/* Item actions */
.nexus-item-actions {
    display: flex;
    gap: var(--space-s);
    flex-shrink: 0;
    align-items: center;
}

/* Small buttons for item actions */
.nexus-btn-small {
    padding: var(--space-xs) var(--space-m);
    font-size: var(--font-ui-smaller);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.nexus-item-actions .clickable-icon {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nexus-btn-danger {
    color: var(--text-error);
}

.nexus-btn-danger:hover {
    background: var(--background-modifier-error);
    border-color: var(--background-modifier-error);
    color: var(--text-on-accent);
}

/* Add button */
.nexus-btn-add {
    align-self: flex-start;
    padding: var(--space-xs) var(--space-m);
    font-size: var(--font-ui-small);
    border: 1px dashed var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: var(--space-xs);
}

.nexus-btn-add:hover {
    border-color: var(--interactive-accent);
    color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}

.nexus-task-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.nexus-task-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

/* Row primitives — task + project rows in BoxedSection bodies */
.ws-group-label {
    font-size: 12px;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 12px 0 4px;
    border-bottom: 1px solid var(--background-modifier-border);
    margin-bottom: 4px;
}

.ws-group-label:first-child {
    padding-top: 0;
}

.setting-item.is-task,
.setting-item.is-project {
    padding: 8px 0;
    border-top: 1px solid var(--background-modifier-border);
}

.setting-item.is-task:first-child,
.setting-item.is-project:first-child {
    border-top: none;
}

.setting-item.is-task.is-done .setting-item-name {
    text-decoration: line-through;
    color: var(--text-muted);
}

.setting-item.is-project.is-archived .setting-item-name {
    color: var(--text-muted);
}

/* Dependency + note-link rows (task detail) reuse the .setting-item shell. */
.setting-item.is-dep,
.setting-item.is-note-link {
    padding: var(--space-s) 0;
    border-top: 1px solid var(--background-modifier-border);
}

.setting-item.is-dep:first-child,
.setting-item.is-note-link:first-child {
    border-top: none;
}

/* Status pill on dependency rows (no pill for 'done' — rendered conditionally). */
.ws-status-pill {
    display: inline-block;
    padding: var(--space-xxs) var(--space-s);
    border-radius: 4px;
    font-size: 11px;
    margin-left: var(--space-s);
    color: var(--text-muted);
    background: var(--background-modifier-border);
}

.ws-status-pill.is-in_progress {
    color: var(--text-on-accent);
    background: var(--interactive-accent);
}

.ws-status-pill.is-cancelled {
    opacity: 0.6;
    text-decoration: line-through;
}

/* Inline add-control row primitive (deps / notes "Add" rows). */
.ws-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-m);
}

.ws-field-inline {
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
}

.task-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.task-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.task-meta-item.is-overdue {
    color: var(--text-error);
}

.task-meta-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.task-meta-dot.is-critical { background: var(--text-error); }
.task-meta-dot.is-high { background: var(--text-warning); }
.task-meta-dot.is-medium { background: var(--text-accent); }
.task-meta-dot.is-low { background: var(--text-faint); }

.nexus-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.nexus-breadcrumb .nexus-breadcrumb-link {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    min-height: unset;
    appearance: none;
    font: inherit;
    color: var(--text-accent);
    cursor: pointer;
}

.nexus-breadcrumb .nexus-breadcrumb-link:hover {
    color: var(--interactive-accent);
    text-decoration: underline;
}

.nexus-breadcrumb-current {
    color: var(--text-normal);
    font-weight: var(--font-medium);
}

.nexus-breadcrumb-separator {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}

.nexus-breadcrumb-separator svg {
    width: 14px;
    height: 14px;
}

.nexus-settings-page-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* File Picker */
.nexus-file-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
}

.nexus-file-picker-left {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.nexus-file-picker-left h3 {
    margin: 0;
}

.nexus-file-picker-actions {
    display: flex;
    gap: var(--space-s);
}

.nexus-file-picker-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    margin-top: var(--space-m);
}

.nexus-file-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    padding: var(--space-m) var(--space-m);
    cursor: pointer;
    border-bottom: 1px solid var(--background-modifier-border);
    transition: background 0.1s ease;
}

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

.nexus-file-item:hover {
    background: var(--background-modifier-hover);
}

.nexus-file-item-selected {
    background: var(--background-modifier-hover);
}

.nexus-file-item-selected .nexus-file-name {
    color: var(--interactive-accent);
}

.nexus-file-name {
    font-weight: var(--font-medium);
    color: var(--text-normal);
}

.nexus-file-folder {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

.nexus-file-path {
    color: var(--text-normal);
}

.nexus-file-hint {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin-left: var(--space-s);
}

.nexus-file-picker-hint,
.nexus-file-picker-empty,
.nexus-file-picker-more {
    padding: var(--space-xl);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-ui-small);
}

.nexus-file-picker-more {
    padding: var(--space-m);
    background: var(--background-secondary);
    border-top: 1px solid var(--background-modifier-border);
}

.nexus-file-picker-info {
    margin-bottom: var(--space-s);
}

.nexus-selected-count {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
}

/* Empty state */
.nexus-empty-state {
    text-align: center;
    padding: 32px;
}

.nexus-empty-message {
    color: var(--text-muted);
}

/* =========================== */
/* NEXUS MODEL LOADING OVERLAY */
/* =========================== */

.nexus-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nexus-loading-overlay.is-visible {
    opacity: 1;
}

.nexus-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 300px;
    text-align: center;
}

.nexus-loading-spinner {
    width: 48px;
    height: 48px;
    color: var(--interactive-accent);
}

.nexus-spinner {
    width: 100%;
    height: 100%;
    animation: nexus-spinner-rotate 2s linear infinite;
}

@keyframes nexus-spinner-rotate {
    100% { transform: rotate(360deg); }
}

.nexus-loading-status {
    font-size: var(--font-ui-medium);
    color: var(--text-normal);
    font-weight: 500;
}

.nexus-loading-progress-container {
    width: 200px;
    height: 4px;
    background: var(--background-modifier-border);
    border-radius: 2px;
    overflow: hidden;
}

.nexus-loading-progress-bar {
    height: 100%;
    background: var(--interactive-accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.nexus-loading-progress-text {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
}

/* =========================== */
/* NEXUS MODAL - REDESIGN     */
/* =========================== */

.nexus-modal {
    padding: 0;
}

/* Hide the "Ready/Saved" status for Nexus - not applicable */
.llm-provider-modal.llm-provider-modal-nexus .save-status {
    display: none;
}

.nexus-description {
    margin: 0 0 20px 0;
    color: var(--text-muted);
    font-size: var(--font-ui-small);
    line-height: 1.5;
}

/* Device Status - Compact Single Line */
.nexus-device-card {
    margin-bottom: 16px;
}

.nexus-device-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-ui-small);
    color: var(--text-muted);
}

.nexus-device-icon {
    flex-shrink: 0;
}

.nexus-device-success .nexus-device-icon {
    color: var(--color-green);
}

.nexus-device-warning .nexus-device-icon {
    color: var(--color-yellow);
}

.nexus-device-error .nexus-device-icon {
    color: var(--color-red);
}

.nexus-icon-spin {
    animation: nexus-icon-spin 1s linear infinite;
}

@keyframes nexus-icon-spin {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* Model Section */
.nexus-model-section {
    margin-bottom: 20px;
}

.nexus-dropdown-container {
    margin-bottom: 8px;
}

.nexus-dropdown-container .setting-item {
    border: none;
    padding: 0;
}

.nexus-dropdown-container .setting-item-control {
    width: 100%;
}

.nexus-dropdown-container select {
    width: 100%;
}

.nexus-label {
    display: block;
    font-size: var(--font-ui-small);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.nexus-model-desc {
    margin-bottom: 16px;
}

.nexus-model-desc-text {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

/* Action Area */
.nexus-action-area {
    margin-top: 16px;
}

/* Download Setting - full width CTA button */
.nexus-download-setting.setting-item {
    border: none;
    padding: 0;
}

.nexus-download-setting .setting-item-control {
    width: 100%;
}

.nexus-download-setting .setting-item-control button {
    width: 100%;
}

/* Delete Setting - just the red button */
.nexus-delete-setting.setting-item {
    border: none;
    padding: 0;
}

.nexus-delete-setting .setting-item-info {
    display: none;
}

/* Cancel Setting - compact inline button */
.nexus-cancel-setting.setting-item {
    border: none;
    padding: 0;
    margin: 0;
}

.nexus-cancel-setting .setting-item-info {
    display: none;
}

.nexus-cancel-setting .setting-item-control {
    width: auto;
}

/* Progress */
.nexus-progress-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nexus-progress-bar {
    height: 6px;
    background: var(--background-modifier-border);
    border-radius: 3px;
    overflow: hidden;
}

.nexus-progress-fill {
    height: 100%;
    background: var(--interactive-accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.nexus-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nexus-progress-text {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

/* =========================== */
/* MOBILE COMPATIBILITY        */
/* =========================== */
/*
 * Obsidian adds .is-mobile class to body on mobile devices (phones only).
 * Tablets use desktop layout.
 *
 * Touch target standards:
 * - WCAG AA minimum: 24×24px
 * - WCAG AAA / Apple HIG: 44×44px
 * - Material Design: 48×48dp
 */

/* ------------------------------ */
/* TOUCH TARGET SIZES (Mobile)    */
/* ------------------------------ */
/* Increase button sizes to 44px minimum for touch accessibility */

body.is-mobile .chat-send-button {
    width: 44px;
    height: 44px;
    right: 8px;
    /* Inherits top: 50% and transform: translateY(-50%) from base style */
    --icon-size: 18px;
}

/* Message action buttons - 44px touch targets for phones */
body.is-mobile .message-action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    --icon-size: 16px;
}

/* Action button container - mobile sizing and always-visible (touch can't hover) */
body.is-mobile .message-actions-external {
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    opacity: 0.85;
    pointer-events: auto;
    transform: translateY(0);
    height: 32px;
    min-height: 32px;
    margin-top: -2px;
    overflow: visible;
}

body.is-mobile .message-container.message-user .message-actions-external {
    align-items: flex-start;
    gap: 0;
    height: 24px;
    min-height: 24px;
    margin-top: 10px;
    padding: 0 0.72rem;
}

body.is-mobile .message-container.message-user .message-action-btn {
    transform: translateY(2px);
}

/* Assistant messages: keep in corner but smaller on mobile */
body.is-mobile .message-container.message-assistant .message-actions-external {
    top: 0.25rem;
    right: 0.25rem;
    padding: 0 0.95rem;
    justify-content: flex-start;
    width: fit-content;
    margin-top: 4px;
}

body.is-mobile .message-container.message-assistant .message-action-btn {
    justify-content: flex-start;
}

/* Message bubbles - more padding and margin on mobile */
body.is-mobile .message-bubble {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Message content - ensure left alignment */
body.is-mobile .message-content {
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
}

/* Mobile: conversation action buttons always visible */
body.is-mobile .conversation-actions {
    opacity: 0.7;
    pointer-events: auto;
}

body.is-mobile .conversation-item:active .conversation-actions {
    opacity: 1;
}

body.is-mobile .conversation-action-btn {
    width: 44px;
    height: 44px;
    --icon-size: 16px;
}

body.is-mobile .conversation-content {
    padding-right: 6.25rem;
}

body.is-mobile .chat-new-button {
    padding: 0.75rem 1rem;
    min-height: 44px;
}

body.is-mobile .chat-hamburger-button,
body.is-mobile .chat-settings-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

body.is-mobile .message-container:active .message-actions-external {
    opacity: 1;
    pointer-events: auto;
}

body.is-mobile .conversation-delete-btn {
    opacity: 0.6;
}

body.is-mobile .conversation-item:active .conversation-delete-btn {
    opacity: 1;
}

/* ------------------------------ */
/* RESPONSIVE SIDEBAR (Mobile)    */
/* ------------------------------ */
/* Full-screen overlay sidebar on phones */

body.is-mobile .chat-sidebar {
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 1000;
}

body.is-mobile .chat-backdrop {
    z-index: 999;
}

body.is-mobile .chat-main {
    width: 100%;
    margin-left: 0;
    min-width: 0;
    --chat-keyboard-offset: 0px;
}

/* Hamburger always visible on mobile */
body.is-mobile .chat-hamburger-button {
    display: flex;
}

/* ------------------------------ */
/* INPUT AREA ADJUSTMENTS         */
/* ------------------------------ */
/* Better mobile keyboard support */

body.is-mobile .chat-input-container {
    padding: 8px 12px;
    /* Handle iOS safe area for home indicator */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    position: relative;
    z-index: 2;
    transform: translateY(calc(-1 * var(--chat-keyboard-offset, 0px)));
    transition: transform 120ms ease-out;
    will-change: transform;
}

body.is-mobile .chat-main.chat-keyboard-active .chat-input-container {
    order: 2;
    padding: 10px 12px 14px;
    background: color-mix(in srgb, var(--background-primary) 82%, transparent);
    transform: none;
}

body.is-mobile .chat-main.chat-keyboard-active .tool-status-bar-container {
    order: 3;
    margin-top: 0;
    position: relative;
    z-index: 3;
    transform: none;
    transition: transform 120ms ease-out;
    will-change: transform;
}

body.is-mobile .chat-main.chat-keyboard-active .message-display-container,
body.is-mobile .chat-main.chat-keyboard-active .nexus-branch-header-container {
    display: none;
}

body.is-mobile .chat-main.chat-keyboard-active .chat-input-wrapper {
    min-height: var(--chat-keyboard-editor-height, clamp(185px, 42vh, 280px));
}

body.is-mobile .chat-textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
    min-height: 64px; /* Taller for better touch UX */
    max-height: 160px;
    padding: 12px 60px 12px 14px; /* More room for the 44px send button */
}

body.is-mobile .chat-main.chat-keyboard-active .chat-textarea {
    min-height: var(--chat-keyboard-editor-height, clamp(185px, 42vh, 280px));
    max-height: var(--chat-keyboard-editor-height, min(54vh, 320px));
    padding: 14px 60px 56px 14px;
    border-radius: 14px;
}

body.is-mobile .chat-main.chat-keyboard-active .chat-send-button {
    top: auto;
    bottom: 14px;
    transform: none;
}

body.is-mobile .chat-main.chat-keyboard-active .chat-send-button:hover:not(:disabled),
body.is-mobile .chat-main.chat-keyboard-active .chat-send-button:active:not(:disabled),
body.is-mobile .chat-main.chat-keyboard-active .chat-send-button:focus,
body.is-mobile .chat-main.chat-keyboard-active .chat-send-button:focus-visible {
    transform: none;
}

body.is-mobile .chat-send-button:focus:not(:focus-visible) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.is-mobile .chat-main:not(.chat-keyboard-active) .chat-input-container {
    background: transparent;
}

/* ------------------------------ */
/* MESSAGE CONTAINER ADJUSTMENTS  */
/* ------------------------------ */

body.is-mobile .message-container {
    width: 100%;
    max-width: none;
}

body.is-mobile .messages-container {
    padding: 0.75rem 0.65rem;
    gap: 0.12rem;
    scroll-padding-bottom: calc(0.75rem + var(--chat-keyboard-offset, 0px));
}

body.is-mobile .chat-main.chat-keyboard-active .messages-container {
    padding-bottom: 0.75rem;
}

body.is-mobile .message-container.message-user .message-bubble {
    padding: 0.65rem 0.78rem;
}

body.is-mobile .message-container.message-assistant .message-bubble {
    padding: 0 0.78rem;
    margin-bottom: 0;
}

body.is-mobile .message-container.message-assistant {
    margin-top: 1.4rem;
}

body.is-mobile .tool-status-bar {
    padding: 4px 12px 0;
    font-size: 14px;
}

body.is-mobile .tool-status-bar-hidden {
    padding: 0 12px;
}

body.is-mobile .tool-status-row--primary {
    height: 24px;
}

body.is-mobile .tool-status-row--meta {
    min-height: 44px;
    height: 44px;
    gap: 4px;
}

body.is-mobile .tool-status-row--meta button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
}

body.is-mobile .tool-status-agent-slot {
    flex: 0 0 44px;
}

body.is-mobile .tool-status-cost {
    font-size: 13px;
    margin-right: 2px;
}

body.is-mobile .context-badge {
    flex-basis: 48px;
    width: 48px;
    font-size: 13px;
}

/* ------------------------------ */
/* MODAL ADJUSTMENTS              */
/* ------------------------------ */
/* Full-width modals on mobile */

body.is-mobile .chat-modal,
body.is-mobile .chat-settings-modal {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    overflow-y: auto;
}

body.is-mobile .modal {
    max-width: 100vw;
    max-height: 100vh;
}

body.is-mobile .modal-content {
    max-height: 100vh;
    overflow-y: auto;
}

/* ------------------------------ */
/* REDUCED ANIMATIONS             */
/* ------------------------------ */
/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .message-bubble,
    .message-container,
    .loading-spinner,
    .chat-sidebar,
    .chat-backdrop {
        animation: none;
        transition: none;
    }

    .chat-input-compacting .chat-send-button.disabled-mode {
        animation: none;
    }
}

/* ------------------------------ */
/* HEADER ADJUSTMENTS             */
/* ------------------------------ */

body.is-mobile .chat-header {
    padding: 8px 12px;
}

body.is-mobile .chat-experimental-warning {
    display: none;
}

body.is-mobile .chat-title {
    font-size: 0.9rem;
    max-width: min(60vw, 18rem);
}

/* ------------------------------ */
/* WELCOME SCREEN                 */
/* ------------------------------ */

body.is-mobile .chat-welcome {
    padding: 1.5rem;
}

body.is-mobile .chat-welcome-title {
    font-size: 1.25rem;
}

/* ------------------------------ */
/* BRANCH NAVIGATOR               */
/* ------------------------------ */

body.is-mobile .branch-navigator {
    min-height: 44px;
}

body.is-mobile .branch-navigator button {
    min-width: 44px;
    min-height: 44px;
}

/* ------------------------------ */
/* LOADING OVERLAY                */
/* ------------------------------ */

body.is-mobile .nexus-loading-overlay {
    padding: 1rem;
}

/* ------------------------------ */
/* CHAT MODALS AND MENUS          */
/* ------------------------------ */

body.is-mobile .suggester-container,
body.is-mobile .suggestion-container {
    max-width: calc(100vw - 24px);
    max-height: min(45vh, 320px);
}

body.is-mobile .nexus-agent-status-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
}

body.is-mobile .nexus-agent-status-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
}

body.is-mobile .nexus-agent-list {
    max-height: 60vh;
    gap: 8px;
}

body.is-mobile .nexus-agent-row-compact {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
}

body.is-mobile .nexus-agent-info {
    flex: 1 1 calc(100% - 96px);
}

body.is-mobile .nexus-agent-tool-container {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
}

body.is-mobile .nexus-agent-actions {
    margin-top: 0;
    margin-left: auto;
}

body.is-mobile .nexus-agent-view-btn,
body.is-mobile .nexus-agent-stop-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

body.is-mobile .nexus-branch-header {
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px;
}

body.is-mobile .nexus-branch-back,
body.is-mobile .nexus-branch-action-btn {
    min-height: 44px;
}

body.is-mobile .nexus-branch-info {
    flex: 1 1 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}

body.is-mobile .nexus-branch-task {
    max-width: 100%;
}

/* ------------------------------ */
/* DESKTOP HOVER STYLES           */
/* ------------------------------ */
/* Only apply hover effects on devices that support hover */

@media (hover: hover) and (pointer: fine) {
    .message-container:hover .message-actions-external {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .conversation-item:hover .conversation-delete-btn {
        opacity: 1;
    }
}

/* ------------------------------ */
/* FALLBACK: Touch device query   */
/* ------------------------------ */
/* For cases where .is-mobile may not be applied (tablets) */

@media (hover: none) and (pointer: coarse) {
    .message-actions-external {
        opacity: 0.85;
        pointer-events: auto;
    }

    .conversation-actions {
        opacity: 0.7;
        pointer-events: auto;
    }

    .conversation-delete-btn {
        opacity: 0.6;
    }

    .chat-send-button {
        width: 44px;
        height: 44px;
    }

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

    .suggester-container,
    .suggestion-container {
        max-width: calc(100vw - 24px);
        max-height: min(45vh, 320px);
    }
}

/* ------------------------------ */
/* SUGGESTER STYLES               */
/* ------------------------------ */

/* Suggester container positioning */
.suggester-container-positioned {
  position: fixed;
}

/* Suggester container display states */
.suggester-container-visible {
  display: block;
}

.suggester-container-hidden {
  display: none;
}

/* Suggester dropdown styles (TextAreaSuggester specific) */
.suggester-dropdown-styled {
  max-height: 300px;
  z-index: 1000;
}

/* ------------------------------ */
/* Progressive Tool Accordion     */
/* ------------------------------ */

.progressive-accordion-hidden {
  display: none;
}

.progressive-accordion-header-visible {
  display: flex;
}

.progressive-accordion-content-visible {
  display: block;
}

.progressive-accordion-section-visible {
  display: block;
}

/* ------------------------------ */
/* MODAL BUTTON CONTAINERS        */
/* ------------------------------ */

.modal-button-container-flex {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* ------------------------------ */
/* CONVERSATION LIST STATES       */
/* ------------------------------ */

.conversation-actions-hidden {
    opacity: 0;
    pointer-events: none;
}

/* ------------------------------ */

.mcp-progress-container-hidden {
    display: none;
}

.mcp-progress-container-visible {
    display: flex;
}

/* ------------------------------ */
/* LLM PROVIDER MODALS            */
/* ------------------------------ */

/* Model list styles */
.llm-provider-model-list {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

/* Help section styles */
.llm-provider-help-summary {
    cursor: pointer;
    font-weight: 500;
}

.llm-provider-help-content {
    margin-top: 0.5em;
    padding-left: 1em;
}

.llm-provider-help-list {
    margin: 0.5em 0;
}

.llm-provider-model-toggle {
    margin-left: auto;
}

/* Nexus progress bar fill - width set dynamically via JS */
.llm-provider-progress-fill {
    height: 100%;
    transition: width 0.2s ease;
}

/* Hidden state */
.llm-provider-hidden {
    display: none;
}

/* Visible state */
.llm-provider-visible {
    display: block;
}

/* ------------------------------ */
/* SUBAGENT UI COMPONENTS         */
/* ------------------------------ */

/* Agent Status Menu Button (header icon + badge) */
.nexus-agent-status-button {
    position: relative;
    padding: 4px 8px;
    margin-right: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nexus-agent-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nexus-agent-status-badge {
    position: absolute;
    top: -2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.nexus-badge-hidden {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

.nexus-agents-active .nexus-agent-status-icon {
    color: var(--interactive-accent);
}

/* Spinner animation for loader-2 icon when agents running */
.nexus-status-running .nexus-agent-status-icon svg {
    animation: nexus-spin 1s linear infinite;
    color: var(--interactive-accent);
}

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

/* Green icon when all agents complete */
.nexus-status-success .nexus-agent-status-icon svg {
    color: var(--color-green);
}

/* Completion pulse animation */
.nexus-agent-completion-pulse {
    animation: nexus-completion-pulse 1s ease-out;
}

@keyframes nexus-completion-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--interactive-accent-rgb), 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--interactive-accent-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--interactive-accent-rgb), 0);
    }
}

/* ----------------------------------------
   Agent Status Modal - Compact Layout
   ---------------------------------------- */
.nexus-agent-status-modal .modal-content {
    padding: 0;
}

.nexus-agent-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}

.nexus-agent-section-header {
    padding: 4px 12px;
    font-size: var(--font-ui-smaller);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nexus-agent-empty {
    padding: 16px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-ui-small);
}

.nexus-agent-row-compact {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    gap: 12px;
    border-bottom: 1px solid var(--background-modifier-border);
}

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

.nexus-agent-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.nexus-agent-task {
    font-weight: 500;
    font-size: var(--font-ui-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-normal);
}

.nexus-agent-meta {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}


.nexus-agent-tool-badge {
    font-size: var(--font-ui-smaller);
    padding: 2px 8px;
    border-radius: var(--radius-s);
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    white-space: nowrap;
    font-weight: 500;
}

.nexus-agent-tool-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
}

.nexus-agent-view-btn {
    color: var(--text-muted);
    padding: 4px;
}

.nexus-agent-view-btn:hover {
    color: var(--text-normal);
}

.nexus-agent-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.nexus-agent-stop-btn {
    color: var(--text-error);
    padding: 4px;
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nexus-agent-stop-btn:hover {
    background: var(--background-modifier-hover);
}

/* Branch Header Container (separate from message display to prevent clobbering) */
.nexus-branch-header-container {
    /* Empty by default, only shows content when branch header is rendered */
}

.nexus-branch-header-container:empty {
    display: none;
}

/* Branch Header (navigation when viewing branch) */
.nexus-branch-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--background-secondary);
    border-bottom: 1px solid var(--background-modifier-border);
    flex-wrap: wrap;
}

.nexus-branch-back {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-ui-small);
    transition: background 0.15s ease, color 0.15s ease;
}

.nexus-branch-back:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.nexus-branch-back-icon {
    display: flex;
    align-items: center;
}

.nexus-branch-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.nexus-branch-task {
    font-weight: 500;
    color: var(--text-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

.nexus-branch-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-ui-smaller);
}

.nexus-status-text {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.nexus-status-running {
    background: rgba(var(--color-blue-rgb), 0.15);
    color: var(--color-blue);
}

.nexus-status-complete {
    background: rgba(var(--color-green-rgb), 0.15);
    color: var(--color-green);
}

.nexus-status-cancelled {
    background: rgba(var(--color-red-rgb), 0.15);
    color: var(--color-red);
}

.nexus-status-max_iterations {
    background: rgba(var(--color-yellow-rgb), 0.15);
    color: var(--color-yellow);
}

.nexus-status-abandoned {
    background: rgba(var(--color-orange-rgb), 0.15);
    color: var(--color-orange);
}

/* State icons (using Obsidian setIcon) */
.nexus-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
}

.nexus-state-icon svg {
    width: 14px;
    height: 14px;
}

/* Running state - spinning animation */
.nexus-state-icon-running svg {
    animation: nexus-spin 1.5s linear infinite;
}

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

/* State icon colors */
.nexus-state-icon-running {
    color: var(--color-blue);
}

.nexus-state-icon-complete {
    color: var(--color-green);
}

.nexus-state-icon-cancelled {
    color: var(--color-red);
}

.nexus-state-icon-max_iterations {
    color: var(--color-yellow);
}

.nexus-state-icon-abandoned {
    color: var(--color-orange);
}

/* Status icon in branch header */
.nexus-status-icon {
    display: inline-flex;
    align-items: center;
}

/* Branch action buttons */
.nexus-branch-action-btn {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: var(--font-ui-smaller);
    cursor: pointer;
}

.nexus-branch-cancel-btn {
    color: var(--text-error);
}

.nexus-branch-continue-btn {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

/* View Branch Link (in tool results) */
.nexus-view-branch-link-container {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--background-modifier-border);
}

.nexus-view-branch-link {
    color: var(--interactive-accent);
    font-size: var(--font-ui-small);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.nexus-view-branch-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Agent Status Modal */
.nexus-agent-status-modal {
    max-width: 500px;
}

.nexus-agent-item {
    padding: 12px;
    background: var(--background-secondary);
    border-radius: 6px;
    border: 1px solid var(--background-modifier-border);
}

.nexus-agent-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.nexus-no-agents {
    text-align: center;
    color: var(--text-muted);
    padding: 24px;
}

/* =========================== */
/* INLINE AI EDITING MODAL    */
/* =========================== */

.claudesidian-inline-edit-modal {
    width: 500px;
    max-width: 85vw;
    box-sizing: border-box;
}

.claudesidian-inline-edit-modal .modal-container {
    max-width: 100%;
    overflow: hidden;
}

.claudesidian-inline-edit-modal .modal-content {
    padding: 0;
}

.claudesidian-inline-edit-content {
    padding: 20px;
}

.claudesidian-inline-edit-header {
    margin: 0 0 16px 0;
    font-size: 1.25em;
    font-weight: 600;
    color: var(--text-normal);
}

.claudesidian-inline-edit-section {
    margin-bottom: 16px;
}

.claudesidian-inline-edit-label {
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Selected text preview */
.claudesidian-inline-edit-preview {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: 12px;
    max-height: 150px;
    overflow-y: auto;
}

.claudesidian-inline-edit-preview-text {
    margin: 0;
    font-family: var(--font-monospace);
    font-size: 0.85em;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-normal);
}

/* Instruction input */
.claudesidian-inline-edit-instruction-setting {
    margin: 0;
    padding: 0;
    border: none;
}

.claudesidian-inline-edit-instruction-setting .setting-item-control {
    width: 100%;
}

.claudesidian-inline-edit-instruction-input {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    font-size: 0.95em;
}

/* Model selector */
.claudesidian-inline-edit-model-setting {
    margin: 0;
    padding: 0;
    border: none;
}

.claudesidian-inline-edit-model-setting .setting-item-control {
    width: 100%;
}

.claudesidian-inline-edit-model-setting select {
    width: 100%;
}

/* Action buttons */
.claudesidian-inline-edit-buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--background-modifier-border);
}

/* Loading state */
.claudesidian-inline-edit-loading-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.claudesidian-inline-edit-loading-header h2 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-normal);
}

.claudesidian-inline-edit-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--background-modifier-border);
    border-top-color: var(--interactive-accent);
    border-radius: 50%;
    animation: claudesidian-inline-edit-spin 0.8s linear infinite;
}

@keyframes claudesidian-inline-edit-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Streaming preview */
.claudesidian-inline-edit-streaming-preview {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.claudesidian-inline-edit-streaming-text {
    color: var(--text-accent);
}

/* Result state */
.claudesidian-inline-edit-original-section {
    margin-bottom: 12px;
}

.claudesidian-inline-edit-collapsible-header {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 0;
}

.claudesidian-inline-edit-collapsible-header:hover {
    color: var(--text-accent);
}

.claudesidian-inline-edit-collapse-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.claudesidian-inline-edit-collapsible-content {
    margin-top: 6px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.claudesidian-inline-edit-collapsible-content.claudesidian-inline-edit-collapsed {
    display: none;
}

.claudesidian-inline-edit-result-container {
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.claudesidian-inline-edit-result-textarea {
    width: 100%;
    min-height: 150px;
    max-height: 400px;
    padding: 12px;
    font-family: var(--font-monospace);
    font-size: 0.85em;
    background: var(--background-primary);
    color: var(--text-normal);
    border: none;
    resize: vertical;
}

.claudesidian-inline-edit-result-textarea:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--interactive-accent);
}

/* Error state */
.claudesidian-inline-edit-error-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.claudesidian-inline-edit-error-header h2 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-error);
}

.claudesidian-inline-edit-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-error);
}

.claudesidian-inline-edit-error-section {
    background: rgba(var(--background-modifier-error-rgb), 0.1);
    border: 1px solid var(--background-modifier-error);
    border-radius: var(--radius-s);
    padding: 12px;
}

.claudesidian-inline-edit-error-message {
    margin: 0;
    color: var(--text-error);
    font-size: 0.95em;
}

/* ------------------------------ */
/* EMBEDDING STATUS BAR           */
/* ------------------------------ */

.nexus-embedding-control-interactive {
    cursor: pointer;
    margin-left: 4px;
}

.nexus-embedding-status-visible {
    display: flex;
}

.nexus-embedding-status-hidden {
    display: none;
}

/* ------------------------------ */
/* EMBEDDING IFRAME               */
/* ------------------------------ */

.nexus-embedding-iframe-hidden {
    display: none;
    width: 0;
    height: 0;
}

/* ------------------------------ */
/* MARKDOWN RENDERER FALLBACK     */
/* ------------------------------ */

.markdown-renderer-plaintext {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ------------------------------ */
/* INLINE STYLE REFACTOR          */
/* ------------------------------ */
/* Refactored inline styles to CSS classes for better maintainability */

/* Loading Overlay Styles */
.chat-loading-overlay-visible {
    display: flex;
}

.chat-loading-overlay-hidden {
    display: none;
}

/* Chat Service Loading State */
.chat-service-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: var(--text-muted);
}

.chat-service-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--background-modifier-border);
    border-top-color: var(--interactive-accent);
    border-radius: 50%;
    animation: chat-service-spin 1s linear infinite;
}

@keyframes chat-service-spin {
    to { transform: rotate(360deg); }
}

.chat-service-loading-text {
    font-size: 14px;
}

/* Chat Service Error State */
.chat-service-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: var(--text-muted);
}

.chat-service-error-icon {
    font-size: 32px;
}

.chat-service-error-text {
    font-size: 14px;
}

/* Progress Bar Styles */
.chat-progress-bar-reset {
    width: 0%;
}

/* Warning Banner Fade Out */
.chat-warning-banner-fadeout {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Input Auto-Resize Styles */
.chat-input-auto-height {
    height: auto;
}

.chat-input-overflow-auto {
    overflow-y: auto;
}

.chat-input-overflow-hidden {
    overflow-y: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   OAuth Connect UI
   ═══════════════════════════════════════════════════════════════════════ */

/* Connected banner above API key input */
.oauth-banner-container {
    margin-bottom: 4px;
}

.oauth-connected-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-s);
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.oauth-connected-status {
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    font-weight: 500;
}

.oauth-connected-status::before {
    content: "\2713 ";
    color: var(--color-green);
    font-weight: bold;
}

.oauth-disconnect-btn {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: 2px 8px;
    cursor: pointer;
}

.oauth-disconnect-btn:hover {
    color: var(--text-normal);
    border-color: var(--text-muted);
}

/* Connecting state */
.oauth-connecting {
    opacity: 0.6;
    cursor: wait;
}

/* CLI status banner (for statusOnly secondary providers like Gemini CLI, Claude Code) */
.cli-status-banner {
    margin-bottom: var(--space-sm, 8px);
}

.cli-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs, 4px) var(--space-sm, 8px);
    border-radius: var(--radius-s);
    background-color: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
}

.cli-status-text {
    font-size: var(--font-ui-small);
}

.cli-status-authenticated {
    color: var(--text-success, var(--interactive-accent));
}

.cli-status-not-authenticated {
    color: var(--text-muted);
}

.cli-status-check-btn {
    font-size: var(--font-ui-smaller);
    padding: var(--space-xs, 4px) var(--space-sm, 8px);
    cursor: pointer;
}

.cli-status-checking {
    opacity: 0.6;
    cursor: wait;
}

/* Device code inline display */
.oauth-device-code-container {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background: var(--background-secondary);
    border-radius: var(--radius-m);
    border: 1px solid var(--background-modifier-border);
}

.oauth-device-code-hidden {
    display: none;
}

.oauth-device-code-instruction {
    color: var(--text-muted);
    font-size: 0.85em;
    margin: 0 0 var(--space-2) 0;
}

.oauth-device-code-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.oauth-device-code-value {
    font-family: var(--font-monospace);
    font-size: 1.4em;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: var(--text-normal);
    flex: 1;
}

.oauth-device-code-url {
    color: var(--text-faint);
    font-size: 0.8em;
    margin: 0;
}

/* Consent modal */
.oauth-consent-modal,
.oauth-preauth-modal {
    max-width: 480px;
}

.oauth-consent-warning {
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

.oauth-consent-fields,
.oauth-preauth-fields {
    margin-bottom: 16px;
}

.oauth-consent-buttons,
.oauth-preauth-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.app-config-status-warning {
    color: var(--text-accent);
}

.app-config-settings-divider {
    border-top: 1px solid var(--background-modifier-border);
    margin-top: 16px;
    padding-top: 8px;
}

.app-config-settings-heading {
    margin: 8px 0 4px;
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
}

/* =========================== */
/* TASK BOARD VIEW            */
/* =========================== */

.nexus-task-board-view {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.nexus-task-board-shell {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: var(--space-l);
    min-height: 100%;
    padding: var(--space-l);
    overflow: visible;
}

.nexus-task-board-columns-wrapper {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: visible;
}

.nexus-task-board-header,
.nexus-task-board-toolbar,
.nexus-task-board-column {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
}

.nexus-task-board-header,
.nexus-task-board-toolbar {
    padding: var(--space-l);
}

.nexus-task-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-l);
}

.nexus-task-board-header h2,
.nexus-task-board-column-header h3 {
    margin: 0;
}

.nexus-task-board-kicker,
.nexus-task-board-field-label,
.nexus-task-board-card-meta,
.nexus-task-board-stat {
    color: var(--text-faint);
    font-size: 0.75rem;
}

.nexus-task-board-subtitle {
    margin: var(--space-xs) 0 0;
    color: var(--text-muted);
}

.nexus-task-board-actions {
    display: flex;
    gap: var(--space-s);
}

.nexus-task-board-button {
    min-height: 34px;
    padding: 0 var(--space-m);
    border-radius: var(--radius-s);
}

.nexus-task-board-button-secondary {
    background: var(--background-primary);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
}

.nexus-task-board-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    align-items: end;
}

.nexus-task-board-field {
    display: flex;
    flex-direction: column;
    flex: 0 1 220px;
    gap: var(--space-xs);
}

.nexus-task-board-field-search {
    flex: 1 1 280px;
    min-width: 0;
}

.nexus-task-board-input {
    width: 100%;
    min-height: 36px;
    padding: 0 var(--space-m);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--text-normal);
}

.nexus-task-board-textarea {
    padding: var(--space-s) var(--space-m);
    min-height: 96px;
    resize: vertical;
}

.nexus-task-board-stats {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-m);
    margin-left: auto;
    white-space: nowrap;
}

.nexus-task-board-columns {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-m);
    min-height: 0;
    align-items: flex-start;
    overflow: visible;
    padding-bottom: 2px;
}

.nexus-task-board-column {
    flex: 1 0 260px;
    min-width: 260px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    padding: var(--space-m);
}

.nexus-task-board-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    margin-bottom: var(--space-m);
}

.nexus-task-board-column-header h3 {
    font-size: 0.95rem;
}

.nexus-task-board-column-count {
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-s);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.nexus-task-board-column-body {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: 2px;
    border-radius: var(--radius-s);
    overflow: visible;
}

.nexus-task-board-column-body.is-drop-target {
    background: var(--background-modifier-hover);
    outline: 1px dashed var(--interactive-accent);
}

.nexus-task-board-card {
    padding: var(--space-m);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    cursor: grab;
}

.nexus-task-board-card:hover {
    background: var(--background-modifier-hover);
}

.nexus-task-board-card.is-dragging {
    opacity: 0.5;
}

.nexus-task-board-card-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-s);
}

.nexus-task-board-card-title {
    color: var(--text-normal);
    font-weight: 600;
    line-height: 1.35;
}

.nexus-task-board-card-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-xs);
}

.nexus-task-board-card-meta {
    margin-top: var(--space-xs);
}

.nexus-task-board-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.nexus-task-board-card-link {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-xs);
    font-size: var(--font-smaller);
    color: var(--text-accent);
    background: var(--background-secondary);
    border-radius: var(--radius-s);
    cursor: pointer;
    text-decoration: none;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-task-board-card-link::before {
    content: '[[';
    color: var(--text-faint);
    margin-right: 1px;
}

.nexus-task-board-card-link::after {
    content: ']]';
    color: var(--text-faint);
    margin-left: 1px;
}

.nexus-task-board-card-link:hover {
    color: var(--interactive-accent-hover);
    background: var(--background-modifier-hover);
}

.nexus-task-board-icon-button {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
}

/* ── Swimlane grouping ── */

.nexus-task-board-swimlane {
    margin-top: var(--space-m);
}

.nexus-task-board-swimlane:first-child {
    margin-top: 0;
}

.nexus-task-board-swimlane-header {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-xs) 0;
    border-bottom: 1px dashed var(--background-modifier-border);
    margin-bottom: var(--space-s);
    cursor: default;
    user-select: none;
}

.nexus-task-board-swimlane-toggle {
    flex: 0 0 auto;
}

.nexus-task-board-swimlane-title {
    font-weight: 600;
    font-size: var(--font-small);
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nexus-task-board-swimlane-progress {
    font-size: var(--font-smaller);
    color: var(--text-faint);
    white-space: nowrap;
}

.nexus-task-board-swimlane-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.nexus-task-board-swimlane.is-collapsed .nexus-task-board-swimlane-body {
    display: none;
}

.nexus-task-board-swimlane-ungrouped .nexus-task-board-swimlane-title {
    font-weight: normal;
    color: var(--text-faint);
}

/* ── End swimlane grouping ── */

.nexus-task-board-empty-column,
.nexus-task-board-loading-text,
.nexus-task-board-error p {
    color: var(--text-muted);
}

.nexus-task-board-loading,
.nexus-task-board-error {
    padding: var(--space-xl);
}

.nexus-task-board-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
}

.nexus-task-board-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--background-modifier-border);
    border-top-color: var(--interactive-accent);
    border-radius: 50%;
    animation: nexus-spin 0.8s linear infinite;
}

@keyframes nexus-spin {
    to { transform: rotate(360deg); }
}

.nexus-task-board-error h3 {
    margin-top: 0;
}

/* Task edit modal — reuses nexus-form-* and nexus-workspace-form classes */
.nexus-task-edit-modal {
    padding: var(--space-l);
}

.nexus-task-edit-modal .nexus-detail-title {
    margin-top: 0;
}

.nexus-task-edit-modal .nexus-item-actions select {
    font-size: var(--font-smaller);
    padding: var(--space-xs);
}

body.is-mobile .nexus-task-board-shell {
    padding: var(--space-m);
}

@media (max-width: 1100px) {
    .nexus-task-board-stats {
        justify-content: flex-start;
        margin-left: 0;
    }
}

@media (max-width: 760px) {
    .nexus-task-board-header {
        flex-direction: column;
    }

    .nexus-task-board-toolbar {
        display: flex;
        flex-direction: column;
    }

    .nexus-task-board-field,
    .nexus-task-board-field-search,
    .nexus-task-board-stats,
    .nexus-task-board-column {
        flex-basis: auto;
        min-width: 0;
    }
}

/* =========================== */
/* NOTE INPUT SUGGESTER        */
/* =========================== */

.nexus-note-suggester-item {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
}

.nexus-note-suggester-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

.nexus-note-suggester-content {
    min-width: 0;
    flex: 1;
}

.nexus-note-suggester-name {
    font-weight: var(--font-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nexus-note-suggester-path {
    font-size: var(--font-smaller);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   Ingest Drop Overlay
   ============================================ */

.nexus-ingest-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--background-primary) 85%, transparent);
    border: 3px dashed var(--interactive-accent);
    border-radius: var(--radius-l);
    pointer-events: none;
    transition: opacity 150ms ease;
}

.nexus-ingest-drop-overlay-hidden {
    opacity: 0;
    visibility: hidden;
}

.nexus-ingest-drop-overlay-visible {
    opacity: 1;
    visibility: visible;
}

.nexus-ingest-drop-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3, 12px);
}

.nexus-ingest-drop-overlay-icon {
    color: var(--interactive-accent);
    width: 48px;
    height: 48px;
}

.nexus-ingest-drop-overlay-icon svg {
    width: 48px;
    height: 48px;
}

.nexus-ingest-drop-overlay-text {
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
    font-weight: var(--font-semibold);
}

.nexus-ingest-drop-overlay-hint {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
}

/* ============================================
   Ingest Progress Banner
   ============================================ */

.nexus-ingest-progress-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.nexus-ingest-progress-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background-color: var(--background-secondary);
    border-bottom: 1px solid var(--background-modifier-border);
    min-height: 44px;
}

.nexus-ingest-progress-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.nexus-ingest-progress-icon svg {
    width: 20px;
    height: 20px;
}

.nexus-ingest-progress-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nexus-ingest-progress-filename {
    font-size: var(--font-ui-small);
    font-weight: var(--font-semibold);
    color: var(--text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nexus-ingest-progress-stage {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

.nexus-ingest-progress-bar-container {
    height: 4px;
    background-color: var(--background-modifier-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}

.nexus-ingest-progress-bar-fill {
    height: 100%;
    background-color: var(--interactive-accent);
    border-radius: 2px;
    width: 0%;
    transition: width 300ms ease;
}

.nexus-ingest-progress-dismiss {
    flex-shrink: 0;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-s);
    padding: 2px;
}

.nexus-ingest-progress-dismiss:hover {
    color: var(--text-normal);
    background-color: var(--background-modifier-hover);
}

.nexus-ingest-progress-dismiss-hidden {
    display: none;
}

/* Stage-specific banner styles */
.nexus-ingest-progress-complete .nexus-ingest-progress-stage {
    color: var(--text-accent);
}

.nexus-ingest-progress-complete .nexus-ingest-progress-bar-fill {
    background-color: var(--text-accent);
}

.nexus-ingest-progress-error .nexus-ingest-progress-stage {
    color: var(--background-modifier-error);
}

.nexus-ingest-progress-error .nexus-ingest-progress-bar-fill {
    background-color: var(--background-modifier-error);
}

/* ============================================
   Ingest Confirm Modal
   ============================================ */

.nexus-ingest-confirm-modal {
    max-width: 480px;
}

.nexus-ingest-confirm-file-info {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px);
    background-color: var(--background-secondary);
    border-radius: var(--radius-m);
    margin-bottom: var(--space-4, 16px);
}

.nexus-ingest-confirm-file-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: var(--text-accent);
}

.nexus-ingest-confirm-file-icon svg {
    width: 36px;
    height: 36px;
}

.nexus-ingest-confirm-file-details {
    min-width: 0;
}

.nexus-ingest-confirm-filename {
    font-weight: var(--font-semibold);
    color: var(--text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nexus-ingest-confirm-filetype {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

.nexus-ingest-confirm-options {
    margin-bottom: var(--space-4, 16px);
}

.nexus-ingest-confirm-hidden {
    display: none;
}

.nexus-ingest-confirm-vision-settings {
    padding-left: var(--space-3, 12px);
    border-left: 2px solid var(--background-modifier-border);
    margin-top: var(--space-2, 8px);
}

.nexus-ingest-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2, 8px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--background-modifier-border);
}

.nexus-ingest-confirm-cancel {
    min-width: 80px;
    min-height: 44px;
}

.nexus-ingest-confirm-submit {
    min-width: 80px;
    min-height: 44px;
}

/* ========================================================================= */
/* TOOL STATUS BAR (Mobile Chat Glass Phase 1)                           */
/* ========================================================================= */

.tool-status-bar-container {
  flex: 0 0 auto;
  margin-top: auto;
}

/* Tool Status Bar — transparent, snug against input below. */
.tool-status-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 24px 0;
  font-size: 16px;
  overflow: hidden;
  transition: height 0.2s ease-in-out;
  background: transparent;
  border: none;
  box-shadow: none;
}

.tool-status-bar-hidden {
  height: 0;
  padding: 0 24px;
  gap: 0;
  border-top: none;
  box-shadow: none;
}

.tool-status-row--primary {
  height: 28px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tool-status-slot {
  position: relative;
  width: 100%;
  height: 1.46em;
  color: var(--text-muted);
}

.tool-status-text-present,
.tool-status-text-past,
.tool-status-text-failed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* Slot-machine animation states */
.tool-status-text-present.entering,
.tool-status-text-past.entering,
.tool-status-text-failed.entering {
  transform: translateY(100%);
  opacity: 0;
}

.tool-status-text-present.active,
.tool-status-text-past.active,
.tool-status-text-failed.active {
  transform: translateY(0);
  opacity: 1;
}

.tool-status-text-present.exiting,
.tool-status-text-past.exiting,
.tool-status-text-failed.exiting {
  transform: translateY(-100%);
  opacity: 0;
}

/* Shimmer animation for active/present status */
.tool-status-text-present {
  background: linear-gradient(
    90deg,
    var(--text-muted) 0%,
    var(--text-muted) 40%,
    var(--text-normal) 50%,
    var(--text-muted) 60%,
    var(--text-muted) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-sweep 2s linear infinite;
}

@keyframes shimmer-sweep {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* Thinking Loader — inline icon + typewriter word in assistant bubble */
.thinking-loader {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text-muted);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  contain: layout;
}

.thinking-loader-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: inherit;
}

.thinking-loader-icon svg {
  width: 18px;
  height: 18px;
}

.thinking-loader-text {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .tool-status-text-present {
    animation: none;
    -webkit-text-fill-color: initial;
    background: none;
    color: var(--text-normal);
  }

  .tool-status-text-present.entering,
  .tool-status-text-past.entering,
  .tool-status-text-failed.entering,
  .tool-status-text-present.exiting,
  .tool-status-text-past.exiting,
  .tool-status-text-failed.exiting {
    transition: none;
  }

  /* Context badge at 100% threshold: disable the pulse animation for
     motion-sensitive users. Danger state remains readable because the
     percentage number and the aria-label ("danger") carry the meaning;
     color is a visual reinforcement, not the sole indicator (WCAG 1.4.1). */
  .context-badge-danger {
    animation: none;
  }

  /* Live voice composer: disable the continuous dot pulse, waveform bars,
     and connecting spinner for motion-sensitive users. The session dot
     keeps its color and the ToolStatusBar text + button aria-label carry
     the state meaning, so motion is a reinforcement, not the sole indicator
     (WCAG 1.4.1). */
  .chat-live-dot,
  .chat-live-wave-bar,
  .chat-input-live-connecting .chat-live-waveform::before {
    animation: none;
  }
}

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

.tool-status-row--meta {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tool-status-row--meta > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Status bar action icons — ported from .mock-device--glass
   .tool-status-{task,inspect,compact}-icon (mockup line 2110) and their
   svg children (line 2123). 24x24 buttons with 16x16 svgs. */
/* Flat icon buttons — no raised appearance, just the icon as the target.
   Override Obsidian's default button styling (background, border, shadow). */
.tool-status-row--meta button {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.tool-status-row--meta button svg {
  width: 16px;
  height: 16px;
}

.tool-status-row--meta button:hover {
  color: var(--text-normal);
  background: none;
}

.tool-status-row--meta button:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.tool-status-agent-slot {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

/* Tool status cost readout — ported from .mock-device--glass .tool-status-cost
   (mockup line 2087). 16px to match the optimized tool-status-bar typography. */
.tool-status-cost {
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  margin-right: 8px;
}

/* Context Badge — ported from .mock-device--glass .context-badge
   (mockup line 2098). 16px font, fixed 56px width so the badge has a
   stable footprint regardless of percentage digit count. */
.context-badge {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  flex-basis: 56px;
  width: 56px;
  padding: 2px 6px;
  border-radius: var(--radius-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.context-badge-safe {
  color: var(--color-green);
}

.context-badge-warm {
  color: var(--color-yellow);
}

.context-badge-hot {
  color: var(--color-orange);
}

.context-badge-danger {
  color: var(--color-red);
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0% { box-shadow: 0 0 0 0 rgba(var(--color-red-rgb), 0.4); }
  70% { box-shadow: 0 0 0 4px rgba(var(--color-red-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--color-red-rgb), 0); }
}

.tool-inspection-modal {
    width: min(720px, calc(100vw - 32px));
    max-width: min(720px, calc(100vw - 32px));
}

.tool-inspection-modal__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.tool-inspection-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tool-inspection-summary,
.tool-inspection-loading,
.tool-inspection-empty {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

.tool-inspection-loading,
.tool-inspection-empty {
    text-align: center;
    padding: 8px 0 0;
}

.tool-inspection-loading-hidden,
.tool-inspection-empty-hidden {
    display: none;
}

.tool-inspection-scroll {
    max-height: min(70vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tool-inspection-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tool-inspection-message {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 12px;
    background: var(--background-secondary);
}

.tool-inspection-message-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tool-inspection-message-meta {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

.tool-inspection-message-preview {
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    line-height: 1.4;
}

.tool-inspection-calls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tool-inspection-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--background-modifier-border);
    background: color-mix(in srgb, var(--background-primary) 92%, transparent);
}

.tool-inspection-card--complete {
    border-color: color-mix(in srgb, var(--color-green) 28%, var(--background-modifier-border));
}

.tool-inspection-card--failed {
    border-color: color-mix(in srgb, var(--text-error) 36%, var(--background-modifier-border));
}

.tool-inspection-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tool-inspection-card-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tool-inspection-card-title {
    font-size: var(--font-ui-medium);
    font-weight: 600;
    color: var(--text-normal);
}

.tool-inspection-card-summary,
.tool-inspection-card-technical,
.tool-inspection-card-id {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    word-break: break-word;
}

.tool-inspection-card-error {
    color: var(--text-error);
    font-size: var(--font-ui-small);
    line-height: 1.4;
}

.tool-inspection-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--font-ui-smaller);
    font-weight: 600;
}

.tool-inspection-pill--pending {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--background-modifier-border) 70%, transparent);
}

.tool-inspection-pill--complete {
    color: var(--color-green);
    background: color-mix(in srgb, var(--color-green) 16%, transparent);
}

.tool-inspection-pill--failed {
    color: var(--text-error);
    background: color-mix(in srgb, var(--text-error) 14%, transparent);
}

.tool-inspection-block {
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    background: var(--background-primary);
    overflow: hidden;
}

.tool-inspection-block-summary {
    cursor: pointer;
    padding: 10px 12px;
    font-size: var(--font-ui-smaller);
    font-weight: 600;
    color: var(--text-normal);
}

.tool-inspection-code {
    margin: 0;
    padding: 0 12px 12px;
    color: var(--text-normal);
    font-family: var(--font-monospace);
    font-size: var(--font-ui-smaller);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 768px) {
    .tool-inspection-modal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }

    .tool-inspection-modal__content {
        padding: 12px;
    }

    .tool-inspection-scroll {
        max-height: 72vh;
    }

    .tool-inspection-card-header {
        flex-direction: column;
    }
}

/* ============================================================
   States section (workspace detail → States)
   ============================================================ */

.nexus-states-section {
    /* inherits .nexus-form-section spacing/borders */
}

.nexus-states-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-m);
    flex-wrap: wrap;
}

.nexus-states-archived-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
}

.nexus-states-toolbar-label {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
}

.nexus-states-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.nexus-states-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-m);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-secondary);
}

.nexus-states-row--archived {
    opacity: 0.65;
}

.nexus-states-row-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    flex: 1 1 auto;
    min-width: 0;
}

.nexus-states-row-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
    font-size: var(--font-ui-medium);
    font-weight: var(--font-semibold);
    color: var(--text-normal);
    overflow-wrap: anywhere;
}

.nexus-states-archived-badge {
    font-size: var(--font-ui-smaller);
    font-weight: var(--font-normal);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px var(--space-xs);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
}

.nexus-states-row-meta {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

.nexus-states-row-description {
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    overflow-wrap: anywhere;
}

.nexus-states-row-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
    flex: 0 0 auto;
}

.nexus-states-action-btn {
    /* clickable-icon supplies most styling; only tweak hit target */
    padding: var(--space-xs);
}

.nexus-states-delete-btn:hover {
    color: var(--text-error);
}

.nexus-states-error {
    color: var(--text-error);
}

/* Danger icon button (workspace rows): transparent clickable-icon that turns
   red on hover — mirrors the StatesSectionRenderer delete idiom. Avoids
   Obsidian's `mod-warning` filled-red-square background that swamps the glyph. */
.clickable-icon.nexus-icon-danger:hover {
    color: var(--text-error);
}

/* State edit modal */

.nexus-state-edit-modal h2 {
    margin-top: 0;
}

.nexus-state-edit-label {
    display: block;
    margin-top: var(--space-m);
    margin-bottom: var(--space-xs);
    font-size: var(--font-ui-small);
    font-weight: var(--font-semibold);
    color: var(--text-normal);
}

.nexus-state-edit-input {
    width: 100%;
}

.nexus-state-edit-textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
}

/* ============================================================
   Skills management section (Settings → Apps → Skills → edit)
   Mirrors the states-management visual language.
   ============================================================ */

.skills-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    flex-wrap: wrap;
    margin-bottom: var(--space-s);
}

.skills-header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
    flex-wrap: wrap;
}

.skills-archived-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
}

.skills-toolbar-label {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
}

.skills-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.skills-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-m);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-secondary);
}

.skills-row--archived {
    opacity: 0.65;
}

.skills-row-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    flex: 1 1 auto;
    min-width: 0;
}

.skills-row-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
    font-size: var(--font-ui-medium);
    font-weight: var(--font-semibold);
    color: var(--text-normal);
    overflow-wrap: anywhere;
}

.skills-row-name {
    font-family: var(--font-monospace);
}

.skills-archived-badge {
    font-size: var(--font-ui-smaller);
    font-weight: var(--font-normal);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px var(--space-xs);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
}

.skills-row-meta {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

.skills-row-description {
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    overflow-wrap: anywhere;
}

.skills-row-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
    flex: 0 0 auto;
}

.skills-action-btn {
    padding: var(--space-xs);
}

.skills-action-btn.is-busy {
    opacity: 0.5;
    pointer-events: none;
}

.skills-delete-btn:hover {
    color: var(--text-error);
}

.skills-error {
    color: var(--text-error);
}

/* Skill edit modal */

.skills-edit-modal h2 {
    margin-top: 0;
}

.skills-edit-label {
    display: block;
    margin-top: var(--space-m);
    margin-bottom: var(--space-xs);
    font-size: var(--font-ui-small);
    font-weight: var(--font-semibold);
    color: var(--text-normal);
}

.skills-edit-input {
    width: 100%;
}

.skills-edit-input--readonly {
    opacity: 0.7;
}

.skills-edit-textarea {
    width: 100%;
    min-height: 160px;
    resize: vertical;
    font-family: var(--font-monospace);
}

.skills-edit-errors {
    margin-top: var(--space-s);
}

.skills-edit-error {
    margin: var(--space-xxs) 0;
    font-size: var(--font-ui-smaller);
    color: var(--text-error);
}

/* Custom app-config section container */

.app-config-custom-section {
    margin-bottom: var(--space-m);
}

/* =====================================================================
 * Workspace settings — boxed section primitive (.ws-section family)
 *
 * Mockup: docs/mockups/workspace-tab-redesign-v3-subpages.html
 * Used by: src/settings/components/BoxedSection.ts
 * Sticky header + scrollable body (default max-height: 320px;
 * pass `unbounded: true` to BoxedSection to remove the cap).
 * ===================================================================== */

.ws-section {
    margin-top: var(--space-l);
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    overflow: hidden;
}

.ws-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-m) var(--space-l);
    border-bottom: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.ws-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-normal);
    margin: 0;
}

.ws-section-action {
    appearance: none;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: 1px solid var(--interactive-accent);
    /* Tap-target floor: 6px 12px → ~30px tall for mobile parity (WCAG 2.5.5). */
    padding: 6px var(--space-m);
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1.3;
}

.ws-section-action:hover {
    background: var(--interactive-accent-hover);
    border-color: var(--interactive-accent-hover);
}

.ws-section-body {
    max-height: 320px;
    overflow-y: auto;
    padding: 0 var(--space-l) var(--space-m);
}

.ws-section-body.is-unbounded {
    max-height: none;
}

.ws-section-body::-webkit-scrollbar {
    width: 10px;
}

.ws-section-body::-webkit-scrollbar-thumb {
    background: var(--background-modifier-border);
    border-radius: 5px;
    border: 2px solid var(--background-secondary);
}

.ws-section-body::-webkit-scrollbar-thumb:hover {
    background: var(--background-modifier-border-hover);
}

/* Toolbar cluster — filter / sort / toggle / inline +action slot */
.ws-section-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.ws-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.ws-section-toggle input[type="checkbox"] {
    accent-color: var(--interactive-accent);
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

.ws-section-toggle:hover {
    color: var(--text-normal);
}

.ws-section-select {
    appearance: none;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 2px 8px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.ws-section-select:hover {
    color: var(--text-normal);
    border-color: var(--background-modifier-border-hover);
}

/* =====================================================================
 * Workspace settings — file-picker tree (.ws-tree family)
 *
 * Mockup: docs/mockups/workspace-tab-redesign-v3-subpages.html
 * Used by: src/components/workspace/FilePickerRenderer.ts
 * Multi-select tree with lazy-expanded folders + checkbox selection.
 * Depth indentation via [data-depth] caps with clamp() on mobile.
 * ===================================================================== */

.ws-tree {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    margin-top: var(--space-m);
    padding: var(--space-s) 0;
}

.ws-tree::-webkit-scrollbar {
    width: 10px;
}

.ws-tree::-webkit-scrollbar-thumb {
    background: var(--background-modifier-border);
    border-radius: 5px;
    border: 2px solid var(--background-secondary);
}

.ws-tree-row {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-xs) var(--space-l);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-normal);
    transition: background 0.1s ease;
}

.ws-tree-row:hover {
    background: var(--background-modifier-hover);
}

.ws-tree-row.is-folder .ws-tree-name {
    font-weight: var(--font-medium);
}

.ws-tree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

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

.ws-tree-row.is-folder .ws-tree-icon {
    color: var(--text-accent);
}

.ws-tree-checkbox {
    accent-color: var(--interactive-accent);
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.ws-tree-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Depth-based indentation via [data-depth]. The base indent (--space-l) plus a
 * clamp()-bounded per-level step keeps deep trees from overflowing on narrow
 * (mobile) viewports while preserving hierarchy on desktop. */
.ws-tree-row[data-depth="0"],
.ws-tree-empty[data-depth="1"] { padding-left: var(--space-l); }
.ws-tree-row[data-depth="1"],
.ws-tree-empty[data-depth="2"] { padding-left: calc(var(--space-l) + clamp(10px, 5vw, 20px)); }
.ws-tree-row[data-depth="2"],
.ws-tree-empty[data-depth="3"] { padding-left: calc(var(--space-l) + clamp(10px, 5vw, 20px) * 2); }
.ws-tree-row[data-depth="3"],
.ws-tree-empty[data-depth="4"] { padding-left: calc(var(--space-l) + clamp(10px, 5vw, 20px) * 3); }
.ws-tree-row[data-depth="4"],
.ws-tree-empty[data-depth="5"] { padding-left: calc(var(--space-l) + clamp(10px, 5vw, 20px) * 4); }
.ws-tree-row[data-depth="5"],
.ws-tree-empty[data-depth="6"] { padding-left: calc(var(--space-l) + clamp(10px, 5vw, 20px) * 5); }
.ws-tree-row[data-depth="6"],
.ws-tree-empty[data-depth="7"] { padding-left: calc(var(--space-l) + clamp(10px, 5vw, 20px) * 6); }
.ws-tree-row[data-depth="7"],
.ws-tree-empty[data-depth="8"] { padding-left: calc(var(--space-l) + clamp(10px, 5vw, 20px) * 7); }
.ws-tree-row[data-depth="8"],
.ws-tree-empty[data-depth="9"] { padding-left: calc(var(--space-l) + clamp(10px, 5vw, 20px) * 8); }
.ws-tree-row[data-depth="9"],
.ws-tree-empty[data-depth="10"] { padding-left: calc(var(--space-l) + clamp(10px, 5vw, 20px) * 9); }
.ws-tree-row[data-depth="10"],
.ws-tree-empty[data-depth="11"] { padding-left: calc(var(--space-l) + clamp(10px, 5vw, 20px) * 10); }

.ws-tree-empty {
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
    padding-right: var(--space-m);
    color: var(--text-faint);
    font-size: var(--font-ui-smaller);
    font-style: italic;
}

/* Paired short form fields (e.g., Hour + Minute in the workflow schedule).
 * Collapses to a single column under the mobile breakpoint below. */
.ws-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
}

.ws-field-grid .ws-field {
    margin-top: 0;
}

/* Graceful degradation: only pin the sticky section header on browsers that
 * support position: sticky (older iOS WebView lacks reliable support). */
@supports not (position: sticky) {
    .ws-section-header {
        position: static;
    }
}

/* =====================================================================
 * Mobile breakpoint (~480px) — workspace settings primitives
 *
 * isDesktopOnly: false — production runs on Obsidian mobile. Let the tab
 * scroll naturally instead of nesting an internal scroll context, collapse
 * paired fields to a single column, and tighten meta clusters.
 * ===================================================================== */
@media (max-width: 480px) {
    .ws-field-grid {
        grid-template-columns: 1fr;
    }

    .ws-section-body {
        max-height: none;
        overflow: visible;
    }

    .task-meta {
        gap: var(--space-s);
    }

    .ws-tree {
        max-height: none;
        overflow: visible;
    }
}

/* Read-aloud progress modal. Reuses the live-voice .chat-live-dot +
   .chat-live-waveform / .chat-live-wave-bar visuals (animations + their
   prefers-reduced-motion handling are defined with those classes). All width
   overrides are SCOPED to the read-aloud context so the shared live-voice
   rules used elsewhere are untouched. */

/* Constrain the modal FRAME (not just contentEl) so it renders at a sensible
   centered width instead of full-screen-wide. min() caps it to the viewport on
   narrow/mobile screens so it never overflows. */
.read-aloud-progress-modal {
    width: min(520px, 100%);
    max-width: 100%;
}

.read-aloud-progress-visual {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: var(--space-m) 0;
}

/* Make the 24 bars span the waveform edge-to-edge. The shared
   .chat-live-wave-bar caps growth at max-width:8px (fine for the narrow chat
   input), so in this wider modal we spread the bars (space-between) AND raise
   the per-bar cap so they thicken into a proper full-width waveform. */
.read-aloud-progress .chat-live-waveform {
    justify-content: space-between;
}

.read-aloud-progress .chat-live-wave-bar {
    max-width: 12px;
}

.read-aloud-progress-status {
    color: var(--text-muted);
    font-size: 13px;
}