/* ═══════════════════════════════════════════════════════════
   Kodus — Command Center Stylesheet v3.0
   VS Code-inspired developer power tool aesthetic.
   Icon rail + terminal-fills-viewport + persistent status bar.
   ALL colors through CSS variables — no hardcoded hex.
   ═══════════════════════════════════════════════════════════ */

/* ── Theme Variables ────────────────────────────────────── */

:root {
    /* Backgrounds — deeper blacks, more contrast between layers */
    --kodus-bg:            #050505;
    --kodus-bg-secondary:  #0a0a0a;
    --kodus-bg-card:       #111111;
    --kodus-bg-elevated:   #161616;
    --kodus-bg-terminal:   #030303;
    --kodus-bg-input:      #0a0a0a;
    --kodus-bg-hover:      rgba(255, 255, 255, 0.04);
    --kodus-bg-rail:       #070707;

    /* Text — neutral grey, no blue tint */
    --kodus-text:          #ffffff;
    --kodus-text-secondary:#e0e0e0;
    --kodus-text-dim:      #b0b0b0;
    --kodus-text-muted:    #888888;

    /* Accent — #009460 green family */
    --kodus-accent:        #009460;
    --kodus-accent-rgb:    0, 148, 96;
    --kodus-accent-hover:  #00b876;
    --kodus-accent-dim:    rgba(0, 148, 96, 0.15);
    --kodus-accent-glow:   rgba(0, 148, 96, 0.25);
    --kodus-accent-text:   #2ee89b;
    --kodus-accent-bright: #5cffbe;

    /* Borders */
    --kodus-border:        rgba(255, 255, 255, 0.06);
    --kodus-border-light:  rgba(255, 255, 255, 0.1);
    --kodus-border-accent: rgba(0, 148, 96, 0.3);

    /* Status colors */
    --kodus-green:         #22c55e;
    --kodus-green-dim:     rgba(34, 197, 94, 0.15);
    --kodus-red:           #ef4444;
    --kodus-red-dim:       rgba(239, 68, 68, 0.15);
    --kodus-yellow:        #eab308;
    --kodus-yellow-dim:    rgba(234, 179, 8, 0.15);
    --kodus-blue:          #60a5fa;
    --kodus-purple:        #00b876;
    --kodus-purple-dim:    rgba(0, 184, 118, 0.15);

    /* Typography */
    --kodus-font-sans:     -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --kodus-font-mono:     -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Spacing */
    --kodus-radius:        8px;
    --kodus-radius-lg:     12px;
    --kodus-radius-xl:     16px;

    /* Layout dimensions */
    --kodus-header-h:      40px;
    --kodus-footer-h:      28px;
    --kodus-rail-w:        56px;

    /* Transitions */
    --kodus-ease:          cubic-bezier(0.16, 1, 0.3, 1);
    --kodus-transition:    0.2s var(--kodus-ease);

    /* Depth shadows */
    --kodus-shadow-sm:     0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --kodus-shadow-md:     0 4px 12px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
    --kodus-shadow-lg:     0 12px 40px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
    --kodus-shadow-glow:   0 0 20px var(--kodus-accent-dim), 0 0 60px rgba(0, 148, 96, 0.06);
}


/* ── Reset & Base ───────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* All inputs 16px globally — prevents iOS auto-zoom on focus */
input, select, textarea { font-size: 16px !important; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--kodus-font-sans);
    font-size: 14px;
    color: var(--kodus-text);
    background: var(--kodus-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

/* Noise texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}


/* ═══════════════════════════════════════════════════════════
   APP SHELL — Full viewport, no scroll on body
   ═══════════════════════════════════════════════════════════ */

.kodus-app {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #000;
    padding-top: env(safe-area-inset-top, 0px);
    position: relative;
}

/* Global WebGL background — one instance, covers the entire app */
.app-webgl {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.6;
    pointer-events: none;
}
.app-webgl::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1;
}
.app-webgl canvas {
    width: 100% !important;
    height: 100% !important;
}


/* ── Header (40px slim) ─────────────────────────────────── */

.kodus-header {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: var(--kodus-header-h);
    min-height: var(--kodus-header-h);
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

/* Subtle accent line at top of header */
.kodus-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kodus-accent-dim), transparent);
    pointer-events: none;
}

.kodus-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kodus-brand-name {
    font-family: var(--kodus-font-mono);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--kodus-accent) 0%, var(--kodus-accent-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px var(--kodus-accent-dim));
}

.kodus-brand-logo {
    height: 24px;
    width: auto;
    filter: drop-shadow(0 0 8px var(--kodus-accent-dim));
}

.kodus-brand-name span {
    -webkit-text-fill-color: var(--kodus-text-dim);
    font-weight: 400;
    animation: blink-smooth 1.2s ease-in-out infinite;
}

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

.kodus-header-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-family: var(--kodus-font-mono);
    color: var(--kodus-text-dim);
}

.kodus-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kodus-header-user {
    font-family: var(--kodus-font-mono);
    font-size: 0.72rem;
    color: var(--kodus-text-dim);
}

.kodus-header-user-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}
.kodus-header-user-link:hover {
    background: var(--kodus-bg-hover, rgba(255,255,255,0.06));
}

.kodus-header-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.kodus-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kodus-header-avatar-initials {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    font-family: var(--kodus-font-mono);
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,148,96,0.35), rgba(0,148,96,0.1));
}

/* Avatar inside conv-header chat bubbles */
.conv-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    vertical-align: middle;
}
.conv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.conv-avatar-initials {
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    font-family: var(--kodus-font-mono);
    letter-spacing: 0;
    background: linear-gradient(135deg, rgba(0,148,96,0.35), rgba(0,148,96,0.1));
}


/* ── Body: Rail + Main ──────────────────────────────────── */

.kodus-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    position: relative;
    z-index: 1;
}


/* ── Icon Rail (56px) ───────────────────────────────────── */

.kodus-rail {
    width: var(--kodus-rail-w);
    min-width: var(--kodus-rail-w);
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
    position: relative;
    flex-shrink: 0;
    z-index: 50;
}

.kodus-rail-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--kodus-radius);
    color: var(--kodus-text-muted);
    cursor: pointer;
    transition: color 0.25s var(--kodus-ease), background 0.25s var(--kodus-ease);
    padding: 0;
}

.kodus-rail-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: filter 0.25s var(--kodus-ease);
}

.kodus-rail-btn:hover {
    color: var(--kodus-text-secondary);
    background: var(--kodus-bg-hover);
}

.kodus-rail-btn.active {
    color: var(--kodus-accent-text);
}

.kodus-rail-btn.active svg {
    filter: drop-shadow(0 0 6px var(--kodus-accent-dim));
}

/* Active indicator — accent bar on left */
.kodus-rail-indicator {
    position: absolute;
    left: 0;
    width: 3px;
    height: 24px;
    background: var(--kodus-accent);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px var(--kodus-accent-glow), 0 0 20px rgba(0, 148, 96, 0.08);
    transition: top 0.3s var(--kodus-ease), opacity 0.2s;
    opacity: 0;
    pointer-events: none;
}

/* Tooltip — slides out right of rail */
.kodus-rail-tooltip {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--kodus-bg-elevated);
    color: var(--kodus-text);
    font-size: 0.72rem;
    font-family: var(--kodus-font-sans);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--kodus-border-light);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s 0.3s, transform 0.2s 0.3s var(--kodus-ease);
    box-shadow: var(--kodus-shadow-md);
    z-index: 200;
}

.kodus-rail-btn:hover .kodus-rail-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}


/* ── Main Content Area ──────────────────────────────────── */

.kodus-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    position: relative;
}


/* ── Tab Panels ─────────────────────────────────────────── */

.kodus-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

.kodus-panel.active {
    display: flex;
}


/* Content layer sits above the WebGL background */
.panel-content {
    position: relative;
    z-index: 2;
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Layout containers that already exist (rules, insights, projects) need z-index */
.rules-layout,
.insights-layout,
.projects-layout {
    position: relative;
    z-index: 2;
}

/* Cards on top of WebGL should have a subtle glass effect */
.panel-content .kodus-card,
.panel-content .sessions-section,
.panel-content .training-form-bar,
.panel-content .personas-container {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Sessions sections need card-like styling */
.sessions-section {
    border-radius: var(--kodus-radius-lg);
    padding: 14px;
    margin-bottom: 12px;
}

/* Training form bar glass treatment */
.training-form-bar {
    border-radius: var(--kodus-radius-lg);
    margin-bottom: 12px;
}

/* Stats row glass treatment */
.panel-content .stats-row {
    position: relative;
    z-index: 2;
}


/* ═══════════════════════════════════════════════════════════
   CONSOLE VIEW
   ═══════════════════════════════════════════════════════════ */

/* Console toolbar — compact dense row */
.console-toolbar {
    flex-shrink: 0;
    background: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 12px;
    position: relative;
    z-index: 2;
    overflow: visible;
    min-height: fit-content;
}

.console-toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 6px;
}

.console-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.kodus-select.console-select {
    width: auto;
    min-width: 100px;
    max-width: 160px;
    padding: 5px 28px 5px 8px;
    font-size: 10px !important;
    height: 30px !important;
}
.console-select-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.console-select-label {
    font-size: 0.6rem;
    color: var(--kodus-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-left: 2px;
}

.console-input {
    width: auto;
    flex: 1;
    max-width: 200px;
    padding: 5px 8px;
    font-size: 16px;
}

.console-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.console-options-btn svg {
    transition: transform 0.3s var(--kodus-ease);
}

.console-options-btn.open svg {
    transform: rotate(45deg);
}

/* Collapsible options drawer */
.console-options {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 0 0;
    flex-wrap: wrap;
}

/* ── Chat Mode ─────────────────────────────────────────────── */
/* In chat mode: keep the toolbar-row visible so the threads hamburger
   stays accessible, but hide the dropdown groups and action buttons
   that are not relevant in chat mode. */
.console-toolbar.chat-mode-hidden .console-toolbar-row .console-select-group {
    display: none !important;
}

.console-toolbar.chat-mode-hidden .console-toolbar-actions > * {
    display: none !important;
}

.console-toolbar.chat-mode-hidden .console-options > *:not(.chat-mode-toggle):not(#dirInput):not(#buildNowBtn) {
    display: none !important;
}

.console-toolbar.chat-mode-hidden {
    padding: 6px 12px;
}

.chat-mode-toggle.chat-mode-active .kodus-toggle-track {
    background: var(--kodus-accent);
}

.chat-mode-toggle.chat-mode-active .kodus-toggle-track::after {
    transform: translateX(14px);
}

.chat-stream-active .conv-body {
    border-left: 2px solid var(--kodus-accent);
    padding-left: 8px;
}

.conv-reasoning {
    margin: 0 0 8px 0;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid var(--kodus-text-dim);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--kodus-text-dim);
}
.conv-reasoning > summary {
    cursor: pointer;
    font-style: italic;
    user-select: none;
    list-style: none;
    opacity: 0.7;
}
.conv-reasoning > summary::-webkit-details-marker { display: none; }
.conv-reasoning > summary::before {
    content: '\25B8 ';
    display: inline-block;
    transition: transform 0.15s;
}
.conv-reasoning[open] > summary::before {
    content: '\25BE ';
}
.conv-reasoning-body {
    margin-top: 6px;
    white-space: pre-wrap;
    font-family: var(--kodus-font-mono, ui-monospace, monospace);
    font-size: 0.78rem;
    line-height: 1.5;
    opacity: 0.75;
}

.chat-thinking-btn {
    position: relative;
}

.chat-thinking-btn.active {
    color: var(--kodus-accent);
}

.chat-thinking-btn.active::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: rgba(6, 182, 212, 0.15);
    z-index: -1;
}

.conv-route-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.7rem;
    color: var(--kodus-text-dim);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    user-select: none;
    opacity: 0.65;
}

#buildNowBtn {
    color: var(--kodus-text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--kodus-border);
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

#buildNowBtn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
}

#buildNowBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.console-options .kodus-toggle {
    margin-right: 4px;
}

.console-maxiter {
    display: flex;
    align-items: center;
    gap: 6px;
}

.console-maxiter .kodus-input {
    width: 60px;
    padding: 4px 6px;
    font-size: 0.78rem;
    text-align: center;
}


/* ── Mobile options toggle (hidden on desktop) ────────── */

.kodus-btn.mobile-opts-btn {
    display: none;
}

/* ── Mobile threads hamburger (hidden on desktop) ────── */

.mobile-threads-btn {
    display: none;
}

@media (max-width: 768px) {
    /* Distribute console-select-groups proportionally across the
       toolbar row so all 5 dropdowns fit on a single line. */
    .console-toolbar-row > .console-select-group {
        flex: 2 1 0;
        min-width: 0;
    }
    /* Short-value dropdowns (Reasoning, Billing, Language) get less
       weight than Provider/Model so they don't dominate. */
    .console-toolbar-row > .console-select-group:has(> #reasoningSelect),
    .console-toolbar-row > .console-select-group:has(> #keyModeSelect),
    .console-toolbar-row > .console-select-group:has(> #frameworkSelect) {
        flex: 1 1 0;
    }
    .kodus-select.console-select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: 9px !important;
        padding: 4px 18px 4px 5px;
    }
    .console-select-label {
        font-size: 0.5rem;
    }
    .kodus-btn.mobile-opts-btn {
        display: inline-flex;
        padding: 3px 10px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        z-index: 10;
    }
    .kodus-btn.mobile-opts-btn.active {
        color: var(--kodus-accent-text);
        border-color: var(--kodus-accent);
        background: var(--kodus-accent-dim);
    }
    .mobile-threads-btn {
        display: inline-flex;
        padding: 4px 10px;
        font-size: 1.1rem;
        min-width: 36px;
        min-height: 36px;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        line-height: 1;
        cursor: pointer;
        flex-shrink: 0;
        background: rgba(0, 0, 0, 0.9);
        color: var(--kodus-text-dim);
        border: 1px solid var(--kodus-border);
        border-radius: 6px;
    }
    .mobile-threads-btn.active {
        color: var(--kodus-accent-text);
        border-color: var(--kodus-accent);
        background: var(--kodus-accent-dim);
    }
}

/* ── Thread sidebar backdrop (mobile only) ────────────── */

.thread-sidebar-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .thread-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 140;
        background: rgba(0, 0, 0, 0.5);
        display: none;
    }
    .thread-sidebar-backdrop.visible {
        display: block;
    }
}


/* ── Rubber Duck label ────────────────────────────────── */

.rubber-duck-label {
    font-size: 0.78rem;
}

/* ── Mode Indicators (above prompt) ──────────────────── */

.mode-indicators {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    background: var(--kodus-bg-secondary);
    border-top: 1px solid var(--kodus-border);
    flex-wrap: wrap;
}

.mode-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.mode-badge-fast {
    background: var(--kodus-yellow-dim, rgba(234, 179, 8, 0.15));
    color: var(--kodus-yellow);
    border: 1px solid rgba(234, 179, 8, 0.25);
}

.mode-badge-duck {
    background: var(--kodus-purple-dim);
    color: var(--kodus-purple);
    border: 1px solid rgba(139, 92, 246, 0.25);
}

/* Options button active indicators */
.console-options-btn.mode-fast-active {
    border-color: var(--kodus-yellow);
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.2);
}

.console-options-btn.mode-duck-active {
    border-color: var(--kodus-purple);
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.2);
}

/* ── Agent Run Stats ─────────────────────────────────── */

.agent-run-stats {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.run-stat {
    font-size: 0.7rem;
    color: var(--kodus-text-dim);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.run-stat-icon {
    font-size: 0.68rem;
    opacity: 0.7;
}

.run-stat-confidence-high { color: var(--kodus-green); }
.run-stat-confidence-med { color: var(--kodus-yellow); }
.run-stat-confidence-low { color: var(--kodus-red); }

/* ── Config Tags & Flags ─────────────────────────────── */

.config-value-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.config-tag {
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--kodus-accent-dim);
    color: var(--kodus-accent-text);
    white-space: nowrap;
}

.config-flag {
    font-size: 0.7rem;
    font-family: var(--kodus-font-mono);
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--kodus-bg-elevated);
    color: var(--kodus-text-secondary);
    border: 1px solid var(--kodus-border);
}


/* ── Terminal Wrap (fills all remaining space) ─────────── */

.terminal-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
    overflow: hidden;
}


/* Terminal output area */
.kodus-terminal {
    flex: 1;
    position: relative;
    z-index: 2;
    background: transparent;
    font-family: var(--kodus-font-mono);
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--kodus-text-secondary);
    overflow-y: auto;
    padding: 12px 16px;
    /* No smooth scroll — prevents visible scroll-down on thread load */
    min-height: 0;
    border: none;
    border-radius: 0;
}


/* Inner vignette shadow — Lowered to 1 so messages at 2 sit on top */
.kodus-terminal::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.35), inset 0 2px 12px rgba(0,0,0,0.4);
}

/* Terminal line text glow */
.kodus-terminal .line {
    white-space: pre-wrap;
    word-wrap: break-word;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 4px rgba(0, 148, 96, 0.06);
}

/* ═══════════════════════════════════════════════════════════
   PROJECTS VIEW — cPanel-style project manager
   ═══════════════════════════════════════════════════════════ */

.projects-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Sidebar: project list */
.projects-sidebar {
    width: 220px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.projects-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--kodus-border);
    flex-shrink: 0;
}

.projects-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--kodus-text-secondary);
}

.projects-list {
    flex: 1;
    overflow-y: auto;
}

.project-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--kodus-border);
    transition: background 0.15s;
    font-family: var(--kodus-font-mono);
    font-size: 0.78rem;
    color: var(--kodus-text-secondary);
}

.project-list-item:hover {
    background: var(--kodus-bg-hover);
}

.project-list-item.active {
    background: var(--kodus-accent-dim);
    color: var(--kodus-accent-text);
}

.project-list-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.5;
}

.project-list-item.active svg {
    opacity: 1;
    color: var(--kodus-accent-text);
}

.project-list-item.bulk-selected {
    background: rgba(0, 148, 96, 0.08);
}
#projectsList.bulk-mode .project-list-item {
    user-select: none;
}

.project-list-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-list-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--kodus-text-muted);
    font-size: 0.72rem;
}

/* Detail: project content */
.projects-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.projects-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--kodus-text-dim);
}

/* Project toolbar */
.project-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--kodus-border);
    background: var(--kodus-bg-secondary);
    flex-shrink: 0;
    gap: 8px;
}

.project-toolbar-name {
    font-family: var(--kodus-font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kodus-accent-text);
}

.project-toolbar-actions {
    display: flex;
    gap: 6px;
}

/* File browser */
.project-files {
    flex: 1;
    overflow-y: auto;
    font-family: var(--kodus-font-mono);
    font-size: 0.75rem;
}

.project-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.1s;
    color: var(--kodus-text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.02);
}

.project-file-item:hover {
    background: var(--kodus-bg-hover);
}

.project-file-item.active {
    background: var(--kodus-accent-dim);
    color: var(--kodus-accent-text);
}

.project-file-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.5;
}

.project-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-file-size {
    color: var(--kodus-text-muted);
    font-size: 0.65rem;
    flex-shrink: 0;
}

.project-file-dir {
    color: var(--kodus-accent-text);
}

.project-file-dir .project-file-icon {
    opacity: 0.8;
}

/* Code viewer */
.project-code-viewer {
    flex: 1;
    overflow: auto;
    background: var(--kodus-bg-terminal);
    tab-size: 4;
}
.project-code-viewer pre {
    margin: 0;
    background: transparent !important;
}
.project-code-viewer pre code {
    font-family: var(--kodus-font-mono);
    font-size: 0.75rem;
    line-height: 1.7;
}
.project-code-viewer pre code.language-plaintext {
    color: var(--kodus-text-secondary);
}

.project-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-family: var(--kodus-font-mono);
    font-size: 0.68rem;
    color: var(--kodus-text-dim);
    background: var(--kodus-bg-card);
    border-bottom: 1px solid var(--kodus-border);
    flex-shrink: 0;
}

.project-breadcrumb span {
    cursor: pointer;
}

.project-breadcrumb span:hover {
    color: var(--kodus-accent-text);
}

.project-breadcrumb .sep {
    opacity: 0.3;
    cursor: default;
}

/* Quick actions grid (cPanel style) */
.project-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
}

.project-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    background: var(--kodus-bg-card);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius-lg);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.1s;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.project-action-card:hover {
    border-color: var(--kodus-border-light);
    background: var(--kodus-bg-elevated);
}

.project-action-card:active {
    transform: scale(0.98);
}

.project-action-card svg {
    width: 28px;
    height: 28px;
    color: var(--kodus-text-dim);
    transition: color 0.2s;
}

.project-action-card:hover svg {
    color: var(--kodus-accent-text);
}

.project-action-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kodus-text);
}

.project-action-sub {
    font-size: 0.68rem;
    color: var(--kodus-text-muted);
    font-family: var(--kodus-font-mono);
    word-break: break-all;
    max-width: 100%;
}

/* Launch card is the hero — accent colored */
.project-action-launch {
    border-color: var(--kodus-border-accent);
    background: rgba(0, 148, 96, 0.04);
}

.project-action-launch svg {
    color: var(--kodus-accent-text);
}

.project-action-launch:hover {
    background: var(--kodus-accent-dim);
    border-color: var(--kodus-accent);
}


@media (max-width: 768px) {
    .project-actions-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }
}

@media (max-width: 768px) {
    .projects-layout {
        flex-direction: column;
    }
    .projects-sidebar {
        width: 100%;
        min-width: auto;
        max-height: 35vh;
        border-right: none;
        border-bottom: 1px solid var(--kodus-border);
    }
}


/* ── Inline Thought Blocks ────────────────────────────── */

.thought-inline {
    position: relative;
    z-index: 2;
    margin: 8px 0;
    border-left: 2px solid var(--kodus-text-muted);
    padding: 0;
    opacity: 0.7;
}

.thought-inline-header {
    padding: 3px 10px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--kodus-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.thought-inline-body {
    padding: 2px 10px 6px;
    font-family: var(--kodus-font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--kodus-text-dim);
    white-space: pre-wrap;
    word-wrap: break-word;
}


/* ── Load Older Messages ─────────────────────────────── */

.load-older {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 8px;
    font-size: 0.72rem;
    font-family: var(--kodus-font-mono);
    color: var(--kodus-accent-text);
    cursor: pointer;
    border-bottom: 1px solid var(--kodus-border);
    margin-bottom: 8px;
}

.load-older:hover {
    background: var(--kodus-accent-dim);
}


/* ── Iteration Marker (old styles — replaced by .iteration-badge in tc- section) ── */

.iteration-marker {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 2px 0;
    margin: 10px 0 6px;
}

.iteration-marker::before,
.iteration-marker::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--kodus-border);
}


/* ── Inline Diff Blocks ──────────────────────────────── */

.diff-block {
    position: relative;
    z-index: 2;
    margin: 8px 0;
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    overflow: hidden;
    font-family: var(--kodus-font-mono);
    font-size: 0.78rem;
    line-height: 1.6;
}

.diff-block-header {
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--kodus-text-dim);
    background: var(--kodus-bg-elevated);
    border-bottom: 1px solid var(--kodus-border);
}

.diff-line {
    padding: 1px 10px;
    white-space: pre-wrap;
    word-break: break-all;
    display: flex;
    align-items: baseline;
}

.diff-ln {
    display: inline-block;
    min-width: 3ch;
    text-align: right;
    color: var(--kodus-text-muted);
    opacity: 0.5;
    margin-right: 6px;
    user-select: none;
    font-size: 0.7em;
    flex-shrink: 0;
}

.diff-marker {
    display: inline-block;
    width: 1ch;
    margin-right: 8px;
    flex-shrink: 0;
    font-weight: 700;
}
.diff-line-old .diff-marker { color: #ff6b6b; }
.diff-line-new .diff-marker { color: #4ade80; }

.diff-line-old {
    background: rgba(239, 68, 68, 0.1);
    color: var(--kodus-red);
}

.diff-line-new {
    background: rgba(34, 197, 94, 0.1);
    color: var(--kodus-green);
}


/* ANSI color classes */
.kodus-terminal .ansi-bold   { font-weight: 700; }
.kodus-terminal .ansi-dim    { opacity: 0.6; }
.kodus-terminal .ansi-red    { color: var(--kodus-red); text-shadow: 0 0 6px var(--kodus-red-dim); }
.kodus-terminal .ansi-green  { color: var(--kodus-green); text-shadow: 0 0 6px var(--kodus-green-dim); }
.kodus-terminal .ansi-yellow { color: var(--kodus-yellow); text-shadow: 0 0 6px var(--kodus-yellow-dim); }
.kodus-terminal .ansi-blue   { color: var(--kodus-blue); text-shadow: 0 0 6px rgba(96, 165, 250, 0.15); }
.kodus-terminal .ansi-magenta{ color: var(--kodus-purple); text-shadow: 0 0 6px var(--kodus-purple-dim); }
.kodus-terminal .ansi-cyan   { color: var(--kodus-accent-text); text-shadow: 0 0 6px var(--kodus-accent-dim); }
.kodus-terminal .ansi-white  { color: var(--kodus-text); }
.kodus-terminal .ansi-bg-dark{ background: rgba(255, 255, 255, 0.05); padding: 0 2px; border-radius: 2px; }

/* New line flash */
.kodus-terminal .line-flash {
    animation: line-flash-anim 0.35s ease-out forwards;
}

@keyframes line-flash-anim {
    0% { background: rgba(0, 148, 96, 0.1); }
    100% { background: transparent; }
}

.kodus-terminal::-webkit-scrollbar { width: 6px; }
.kodus-terminal::-webkit-scrollbar-track { background: transparent; }
.kodus-terminal::-webkit-scrollbar-thumb {
    background: var(--kodus-border-light);
    border-radius: 3px;
}
.kodus-terminal::-webkit-scrollbar-thumb:hover {
    background: var(--kodus-text-muted);
}

/* Terminal placeholder */
.terminal-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
    min-height: 200px;
    color: var(--kodus-text-muted);
    font-family: var(--kodus-font-mono);
    font-size: 0.8rem;
    position: relative;
    z-index: 10;
    user-select: none;
}

.terminal-placeholder .ph-svg {
    width: 120px;
    height: 120px;
    opacity: 1;
    filter: drop-shadow(0 0 20px var(--kodus-accent));
}

.terminal-placeholder .ph-text {
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--kodus-text);
}

.terminal-placeholder .ph-sub {
    color: var(--kodus-text-secondary);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
    margin-top: -6px;
}


/* ── Todo Bar (above prompt input) ──────────────────────── */

.todo-bar {
    flex-shrink: 0;
    max-height: 180px;
    overflow-y: auto;
    padding: 6px 12px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--kodus-font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--kodus-text-secondary);
    z-index: 2;
}
.todo-bar::-webkit-scrollbar { width: 4px; }
.todo-bar::-webkit-scrollbar-thumb { background: var(--kodus-border-light); border-radius: 2px; }
.todo-bar-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--kodus-text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
}
.todo-bar-header:hover { color: var(--kodus-text); }
.todo-bar-toggle { font-size: 0.6rem; }
.todo-bar-collapsed .todo-bar-header { margin-bottom: 0; }
.todo-bar-header .todo-bar-progress {
    margin-left: auto;
    color: var(--kodus-accent);
    font-variant-numeric: tabular-nums;
}
.todo-bar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.todo-bar-item .todo-icon { flex-shrink: 0; width: 14px; text-align: center; }
.todo-bar-item.todo-pending .todo-icon { color: var(--kodus-text-muted); }
.todo-bar-item.todo-in-progress .todo-icon { color: #f0ad4e; }
.todo-bar-item.todo-in-progress .todo-task { color: var(--kodus-text); font-weight: 600; }
.todo-bar-item.todo-completed .todo-task { text-decoration: line-through; color: var(--kodus-text-muted); }
.todo-bar-item.todo-completed .todo-icon { color: #5cb85c; }
.todo-bar-item.todo-cancelled .todo-task { color: var(--kodus-text-muted); }
.todo-bar-item.todo-cancelled .todo-icon { color: var(--kodus-text-muted); }

/* ── Terminal Prompt (bottom of terminal) ────────────────── */

.terminal-prompt {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 2;
}

.terminal-prompt-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--kodus-text);
    font-family: var(--kodus-font-mono);
    font-size: 0.82rem;
    line-height: 1.65;
    resize: none;
    min-height: 24px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 2px 0;
}

.terminal-prompt-input::placeholder {
    color: var(--kodus-text-muted);
}

.terminal-prompt-input::-webkit-scrollbar { width: 4px; }
.terminal-prompt-input::-webkit-scrollbar-thumb {
    background: var(--kodus-border-light);
    border-radius: 2px;
}

/* Send button */
.terminal-send-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kodus-accent);
    color: var(--kodus-accent-on-accent, #fff);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    margin-top: 1px;
}
.terminal-send-btn:hover {
    background: var(--kodus-accent-hover);
    box-shadow: 0 0 12px var(--kodus-accent-dim);
}
.terminal-send-btn:active {
    transform: scale(0.93);
}
.terminal-send-btn svg {
    width: 16px;
    height: 16px;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER STATUS BAR (28px, VS Code style)
   ═══════════════════════════════════════════════════════════ */

.kodus-footer-bar {
    height: var(--kodus-footer-h);
    min-height: var(--kodus-footer-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--kodus-font-mono);
    font-size: 0.68rem;
    color: var(--kodus-text-dim);
    flex-shrink: 0;
    gap: 12px;
    user-select: none;
    transition: border-color 0.3s, background 0.3s;
}

.kodus-footer-bar.running {
    border-top-color: var(--kodus-border-accent);
    background: linear-gradient(180deg, rgba(0, 148, 96, 0.03) 0%, var(--kodus-bg-secondary) 100%);
}

.footer-bar-left,
.footer-bar-center,
.footer-bar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.footer-bar-left { flex: 0 0 auto; }
.footer-bar-center { flex: 1; justify-content: center; }
.footer-bar-right { flex: 0 0 auto; }

.footer-sep {
    color: var(--kodus-text-muted);
    opacity: 0.4;
    margin: 0 4px;
}


/* ── Status Dot ─────────────────────────────────────────── */

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kodus-text-muted);
    display: inline-block;
    transition: background 0.3s var(--kodus-ease);
    flex-shrink: 0;
}

.status-dot.running {
    background: var(--kodus-green);
    animation: pulse-dot 1.5s ease-in-out infinite;
    box-shadow: 0 0 6px var(--kodus-green-dim);
}

.status-dot.waiting {
    background: var(--kodus-yellow);
    animation: pulse-dot-waiting 2.5s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255, 200, 0, 0.2);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--kodus-green); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px var(--kodus-green-dim); }
}

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


/* ═══════════════════════════════════════════════════════════
   RULES VIEW — Sidebar + Detail layout
   ═══════════════════════════════════════════════════════════ */

.rules-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Rules sidebar (left 40%) */
.rules-sidebar {
    width: 40%;
    min-width: 280px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.rules-sidebar-header {
    flex-shrink: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--kodus-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rules-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rules-count {
    font-size: 0.72rem;
    color: var(--kodus-text-dim);
    font-family: var(--kodus-font-mono);
    margin-right: auto;
}

/* Rules source tabs — segmented control style */
.rules-source-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--kodus-border);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
}
.rules-source-tab {
    flex: 1;
    padding: 6px 10px;
    font-size: 0.72rem;
    font-weight: 500;
    background: transparent;
    border: none;
    border-radius: var(--kodus-radius, 6px);
    color: var(--kodus-text-dim);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: center;
    white-space: nowrap;
}
.rules-source-tab:hover {
    color: var(--kodus-text);
    background: rgba(255, 255, 255, 0.05);
}
.rules-source-tab.active {
    color: var(--kodus-accent-text);
    background: var(--kodus-accent-dim);
    box-shadow: 0 0 8px var(--kodus-accent-dim);
}

/* Accent button variant (Promote to Global, etc.) */
.kodus-btn-accent {
    background: var(--kodus-accent);
    color: var(--kodus-accent-on-accent, #fff);
    border: none;
}
.kodus-btn-accent:hover {
    background: var(--kodus-accent-hover);
    box-shadow: 0 0 12px var(--kodus-accent-dim);
}

/* Project folder cards in rules */
.project-rule-card {
    padding: 12px 14px;
    border-bottom: 1px solid var(--kodus-border);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border-left: 3px solid transparent;
}
.project-rule-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-left-color: var(--kodus-accent);
}
.project-rule-card-name {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--kodus-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.project-rule-card-name svg {
    width: 16px;
    height: 16px;
    color: var(--kodus-accent);
    flex-shrink: 0;
}
.project-rule-card-stats {
    font-size: 0.7rem;
    color: var(--kodus-text-dim);
    margin-top: 4px;
    padding-left: 24px;
}

/* Scrollable rules list */
.rules-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.rules-list::-webkit-scrollbar { width: 5px; }
.rules-list::-webkit-scrollbar-track { background: transparent; }
.rules-list::-webkit-scrollbar-thumb {
    background: var(--kodus-border-light);
    border-radius: 3px;
}

/* Individual rule item in sidebar */
.rule-item {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.2s var(--kodus-ease), border-color 0.2s;
    position: relative;
}

.rule-item:hover {
    background: var(--kodus-bg-hover);
}

.rule-item.active {
    background: rgba(0, 148, 96, 0.05);
    border-left-color: var(--kodus-accent);
}

.rule-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.rule-item-id {
    font-family: var(--kodus-font-mono);
    font-size: 0.68rem;
    color: var(--kodus-text-muted);
}

.rule-item-text {
    font-size: 0.78rem;
    color: var(--kodus-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rules detail (right 60%) */
.rules-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px 20px;
    min-width: 0;
}

.rules-detail::-webkit-scrollbar { width: 6px; }
.rules-detail::-webkit-scrollbar-track { background: transparent; }
.rules-detail::-webkit-scrollbar-thumb {
    background: var(--kodus-border-light);
    border-radius: 3px;
}

.rules-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 12px;
    color: var(--kodus-text-muted);
}

.rules-detail-empty-icon {
    opacity: 0.3;
}

.rules-detail-empty-text {
    font-size: 0.85rem;
}

/* Rule detail content (populated by JS) */
.rule-detail-section {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--kodus-accent-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.rule-detail-text {
    font-family: var(--kodus-font-mono);
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--kodus-text);
    background: var(--kodus-bg-terminal);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    padding: 12px 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 16px;
}

.rule-detail-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid var(--kodus-border);
    font-size: 0.78rem;
    color: var(--kodus-text-dim);
}


/* ═══════════════════════════════════════════════════════════
   TRAINING VIEW
   ═══════════════════════════════════════════════════════════ */

.training-form-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--kodus-bg-secondary);
    border-bottom: 1px solid var(--kodus-border);
    flex-wrap: wrap;
}

.personas-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.personas-container::-webkit-scrollbar { width: 6px; }
.personas-container::-webkit-scrollbar-track { background: transparent; }
.personas-container::-webkit-scrollbar-thumb {
    background: var(--kodus-border-light);
    border-radius: 3px;
}

/* Persona cards — 2 column grid with gradient avatars */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.persona-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--kodus-bg-card);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    padding: 12px;
    transition: border-color 0.25s var(--kodus-ease), box-shadow 0.25s, transform 0.25s;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.persona-card:hover {
    transform: translateY(-2px);
    border-color: var(--kodus-border-light);
    box-shadow: var(--kodus-shadow-md), 0 0 20px rgba(0, 148, 96, 0.04);
    backdrop-filter: blur(2px);
}

/* Gradient accent border on hover */
.persona-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--kodus-accent), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.persona-card:hover::before {
    opacity: 1;
}

/* Gradient avatar circle */
.persona-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kodus-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.persona-card-info {
    flex: 1;
    min-width: 0;
}

.persona-card-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kodus-text);
    margin-bottom: 4px;
}

.persona-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

/* Skill level visual bar */
.persona-skill-bar {
    height: 3px;
    background: var(--kodus-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
    width: 100%;
    max-width: 80px;
}

.persona-skill-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--kodus-accent), var(--kodus-accent-bright));
    transition: width 0.5s var(--kodus-ease);
}

.persona-card-traits {
    font-size: 0.72rem;
    color: var(--kodus-text-dim);
    line-height: 1.4;
}

.persona-domain-header {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--kodus-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 0 6px;
    border-bottom: 1px solid var(--kodus-border);
    margin-bottom: 10px;
    text-shadow: 0 0 12px var(--kodus-accent-dim);
}

.persona-domain-header:first-child {
    padding-top: 0;
}


/* ═══════════════════════════════════════════════════════════
   SESSIONS VIEW
   ═══════════════════════════════════════════════════════════ */

#panel-sessions {
    overflow-y: auto;
    padding: 16px;
}

/* Stats row — gradient accent cards */
.stats-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.stat-block {
    flex: 1;
    min-width: 100px;
    background: linear-gradient(135deg, var(--kodus-bg-elevated) 0%, var(--kodus-bg-card) 100%);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    padding: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

/* Accent glow line at top */
.stat-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kodus-accent-dim), transparent);
    pointer-events: none;
}

.stat-block:hover {
    transform: translateY(-2px);
    border-color: var(--kodus-border-light);
    box-shadow: var(--kodus-shadow-md);
}

.stat-value {
    font-family: var(--kodus-font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kodus-accent);
    text-shadow: 0 0 16px var(--kodus-accent-dim);
}

.stat-label {
    font-size: 0.65rem;
    color: var(--kodus-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* Sessions section grouping */
.sessions-section {
    margin-bottom: 16px;
}

.sessions-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kodus-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 0;
    border-bottom: 1px solid var(--kodus-border);
    margin-bottom: 10px;
}

/* Timeline cards for sessions */
.sessions-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--kodus-accent-dim);
    border-radius: var(--kodus-radius);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 8px;
}

.session-card:hover {
    background: rgba(0, 148, 96, 0.03);
    border-left-color: var(--kodus-accent);
    box-shadow: var(--kodus-shadow-sm);
}

.session-card-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.session-card-status.completed { background: var(--kodus-text-muted); }
.session-card-status.running   { background: var(--kodus-green); animation: pulse-dot 1.5s ease-in-out infinite; }

.session-card-info {
    flex: 1;
    min-width: 0;
}

.session-card-title {
    font-size: 0.82rem;
    color: var(--kodus-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-card-meta {
    font-size: 0.72rem;
    color: var(--kodus-text-dim);
}

.session-card-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════
   CONFIG VIEW
   ═══════════════════════════════════════════════════════════ */

#panel-config {
    overflow-y: auto;
    padding: 16px;
}

.config-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--kodus-border);
    transition: background 0.2s var(--kodus-ease);
}

.config-item:hover {
    background: var(--kodus-bg-hover);
}

.config-key {
    font-family: var(--kodus-font-mono);
    font-size: 0.78rem;
    color: var(--kodus-accent-text);
}

.config-value {
    font-family: var(--kodus-font-mono);
    font-size: 0.78rem;
    color: var(--kodus-text-secondary);
    text-align: right;
    word-break: break-all;
}

.config-value.masked {
    color: var(--kodus-text-muted);
}

/* CLI install command styling */
.cli-install-cmd {
    display: inline-block;
    background: var(--kodus-bg-darker, #1a1a2e);
    color: var(--kodus-accent, #7c6aef);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--kodus-mono);
    font-size: 0.78rem;
    border: 1px solid var(--kodus-border);
    user-select: all;
    transition: background 0.15s;
}
.cli-install-cmd:hover {
    background: var(--kodus-bg-hover, #252540);
}


/* ═══════════════════════════════════════════════════════════
   CARDS (used by config, legacy views)
   ═══════════════════════════════════════════════════════════ */

.kodus-card {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--kodus-radius-lg);
    overflow: hidden;
    box-shadow: var(--kodus-shadow-sm);
    transition: box-shadow 0.3s var(--kodus-ease), border-color 0.3s;
    margin-bottom: 12px;
}

.kodus-card:hover {
    border-color: var(--kodus-border-light);
}

.kodus-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--kodus-border);
    background: rgba(255, 255, 255, 0.01);
}

.kodus-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kodus-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kodus-card-body {
    padding: 14px;
}

.kodus-card-body.no-pad {
    padding: 0;
}

/* Config page grid — two columns on wide screens */
.config-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
}
@media (min-width: 768px) {
    .config-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.config-grid .kodus-card {
    margin-bottom: 0;
}
/* Full-width cards span both columns */
.config-grid .kodus-card.full-width {
    grid-column: 1 / -1;
}

/* GitHub form row — inline label + input */
.gh-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.gh-field .config-key {
    flex: 0 0 70px;
}
.gh-field .kodus-input {
    flex: 1;
    max-width: 340px;
}


/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */

.kodus-input,
.kodus-select,
.kodus-textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 16px;
    font-family: inherit;
    color: var(--kodus-text);
    background: var(--kodus-bg-input);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    outline: none;
    transition: border-color var(--kodus-transition), box-shadow var(--kodus-transition), background var(--kodus-transition);
}

.kodus-input:focus,
.kodus-select:focus,
.kodus-textarea:focus {
    border-color: var(--kodus-accent);
    box-shadow: 0 0 0 3px var(--kodus-accent-dim), 0 0 12px rgba(0, 148, 96, 0.06);
    background: rgba(11, 11, 18, 0.9);
}

.kodus-textarea {
    font-family: var(--kodus-font-mono);
    font-size: 0.82rem;
    resize: vertical;
    min-height: 72px;
    line-height: 1.6;
}

.kodus-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    padding-right: 1.8rem;
    cursor: pointer;
}

#providerSelect,
#modelSelect {
    font-size: 10px !important;
}

.kodus-select option {
    background: var(--kodus-bg-card);
    color: var(--kodus-text);
}

.filter-option:hover {
    background: var(--kodus-bg-hover) !important;
}

.kodus-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--kodus-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.form-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.form-row > * { flex: 1; min-width: 0; }

.form-group {
    margin-bottom: 0.75rem;
}


/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

.kodus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    border: none;
    border-radius: var(--kodus-radius);
    cursor: pointer;
    transition: all var(--kodus-transition);
    white-space: nowrap;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.kodus-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.kodus-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--kodus-accent), rgba(0, 148, 96, 0.8));
    box-shadow: 0 2px 8px rgba(0, 148, 96, 0.2);
}

.kodus-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--kodus-accent-hover), var(--kodus-accent));
    box-shadow: 0 4px 16px rgba(0, 148, 96, 0.3), 0 0 20px var(--kodus-accent-dim);
    transform: translateY(-1px);
}

.kodus-btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
}

.kodus-btn-secondary {
    color: var(--kodus-text-secondary);
    background: var(--kodus-bg-elevated);
    border: 1px solid var(--kodus-border);
}

.kodus-btn-secondary:hover:not(:disabled) {
    color: var(--kodus-text);
    border-color: var(--kodus-border-light);
    background: var(--kodus-bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--kodus-shadow-sm);
}

.kodus-btn-secondary:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
}

.kodus-btn-danger {
    color: var(--kodus-red);
    background: var(--kodus-red-dim);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.kodus-btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

.kodus-btn-danger:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
}

.kodus-btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.72rem;
}

.kodus-btn-icon {
    padding: 0.4rem;
    line-height: 1;
}


/* ═══════════════════════════════════════════════════════════
   TOGGLE SWITCH
   ═══════════════════════════════════════════════════════════ */

.kodus-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--kodus-text-secondary);
    user-select: none;
    white-space: nowrap;
}

.kodus-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kodus-toggle-track {
    width: 32px;
    height: 18px;
    background: var(--kodus-bg-elevated);
    border: 1px solid var(--kodus-border);
    border-radius: 9px;
    position: relative;
    transition: background var(--kodus-transition), border-color var(--kodus-transition), box-shadow var(--kodus-transition);
    flex-shrink: 0;
}

.kodus-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: var(--kodus-text-dim);
    border-radius: 50%;
    transition: transform var(--kodus-transition), background var(--kodus-transition), box-shadow var(--kodus-transition);
}

.kodus-toggle input:checked + .kodus-toggle-track {
    background: var(--kodus-accent-dim);
    border-color: var(--kodus-accent);
    box-shadow: 0 0 8px var(--kodus-accent-dim);
}

.kodus-toggle input:checked + .kodus-toggle-track::after {
    transform: translateX(14px);
    background: var(--kodus-accent);
    box-shadow: 0 0 6px var(--kodus-accent-glow);
}


/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */

.kodus-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.kodus-table th {
    text-align: left;
    padding: 0.55rem 0.85rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--kodus-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--kodus-border);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    background: rgba(255,255,255,0.01);
    transition: color var(--kodus-transition);
}

.kodus-table th:hover {
    color: var(--kodus-text-secondary);
}

.kodus-table td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--kodus-border);
    color: var(--kodus-text-secondary);
    vertical-align: top;
}

.kodus-table tbody tr {
    transition: background 0.2s var(--kodus-ease);
}

.kodus-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.012);
}

.kodus-table tbody tr:hover {
    background: rgba(0, 148, 96, 0.04);
}

.kodus-table tbody tr:last-child td {
    border-bottom: none;
}

.kodus-table .rule-text-cell {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kodus-table .clickable-row {
    cursor: pointer;
}

.kodus-table .clickable-row:hover {
    background: rgba(0, 148, 96, 0.06);
}


/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */

.kodus-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 20px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.kodus-badge-accent {
    color: var(--kodus-accent-text);
    background: var(--kodus-accent-dim);
    border-color: rgba(0, 148, 96, 0.15);
}

.kodus-badge-green {
    color: var(--kodus-green);
    background: var(--kodus-green-dim);
    border-color: rgba(34, 197, 94, 0.15);
}

.kodus-badge-red {
    color: var(--kodus-red);
    background: var(--kodus-red-dim);
    border-color: rgba(239, 68, 68, 0.15);
}

.kodus-badge-yellow {
    color: var(--kodus-yellow);
    background: var(--kodus-yellow-dim);
    border-color: rgba(234, 179, 8, 0.15);
}

.kodus-badge-purple {
    color: var(--kodus-purple);
    background: var(--kodus-purple-dim);
    border-color: rgba(0, 184, 118, 0.15);
}

.kodus-badge-dim {
    color: var(--kodus-text-dim);
    background: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.08);
}


/* ═══════════════════════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════════════════════ */

.kodus-search {
    flex: 1;
    min-width: 140px;
    position: relative;
}

.kodus-search input {
    width: 100%;
    padding: 5px 8px 5px 28px;
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--kodus-text);
    background: var(--kodus-bg-input);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    outline: none;
    transition: border-color var(--kodus-transition), box-shadow var(--kodus-transition);
}

.kodus-search input:focus {
    border-color: var(--kodus-accent);
    box-shadow: 0 0 0 3px var(--kodus-accent-dim), 0 0 10px rgba(0, 148, 96, 0.05);
}

.kodus-search svg {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    color: var(--kodus-text-dim);
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════ */

.kodus-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.kodus-modal-overlay.visible {
    display: flex;
}

.kodus-modal {
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: var(--kodus-bg-card);
    border: 1px solid var(--kodus-border-light);
    border-radius: var(--kodus-radius-xl);
    display: flex;
    flex-direction: column;
    box-shadow: var(--kodus-shadow-lg), 0 0 60px rgba(0,0,0,0.4);
}

.kodus-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--kodus-border);
    flex-shrink: 0;
}

.kodus-modal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kodus-text);
}

.kodus-modal-close {
    color: var(--kodus-text-dim);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    font-size: 1.15rem;
    transition: color var(--kodus-transition), transform var(--kodus-transition);
}

.kodus-modal-close:hover {
    color: var(--kodus-text);
    transform: scale(1.1);
}

.kodus-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.kodus-modal-body::-webkit-scrollbar { width: 6px; }
.kodus-modal-body::-webkit-scrollbar-track { background: transparent; }
.kodus-modal-body::-webkit-scrollbar-thumb {
    background: var(--kodus-border-light);
    border-radius: 3px;
}

.kodus-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--kodus-border);
    flex-shrink: 0;
}

.kodus-modal.wide {
    max-width: 900px;
}


/* ═══════════════════════════════════════════════════════════
   PROMPT PREVIEW
   ═══════════════════════════════════════════════════════════ */

.prompt-preview {
    font-family: var(--kodus-font-mono);
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--kodus-text-secondary);
    background: var(--kodus-bg-terminal);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    padding: 1.25rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}


/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */

.kodus-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 10px 0;
}


/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */

.kodus-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--kodus-text-muted);
}

.kodus-empty-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

.kodus-empty-text {
    font-size: 0.85rem;
}


/* ═══════════════════════════════════════════════════════════
   LOADING SPINNER
   ═══════════════════════════════════════════════════════════ */

.kodus-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--kodus-border-light);
    border-top-color: var(--kodus-accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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


/* ═══════════════════════════════════════════════════════════
   LOGOUT BUTTON
   ═══════════════════════════════════════════════════════════ */

.kodus-logout {
    color: var(--kodus-text-dim);
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.72rem;
    font-family: inherit;
    padding: 0.2rem 0.5rem;
    border-radius: var(--kodus-radius);
    transition: color var(--kodus-transition), background var(--kodus-transition), border-color var(--kodus-transition);
}

.kodus-logout:hover {
    color: var(--kodus-text);
    background: var(--kodus-bg-hover);
    border-color: var(--kodus-border);
}


/* ═══════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════ */

/* ── Inline Confirm Dialog (replaces native confirm()) ── */
.kodus-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.kodus-confirm-box {
    background: var(--kodus-bg-elevated);
    border: 1px solid var(--kodus-border-light);
    border-radius: 12px;
    padding: 24px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.kodus-confirm-msg {
    color: var(--kodus-text);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.kodus-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.kodus-confirm-btn {
    padding: 8px 20px;
    border-radius: 6px;
    border: 1px solid var(--kodus-border-light);
    background: var(--kodus-bg-card);
    color: var(--kodus-text);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s;
}

.kodus-confirm-btn:hover {
    background: var(--kodus-bg-hover);
}

.kodus-confirm-btn.danger {
    background: var(--kodus-red);
    border-color: var(--kodus-red);
    color: #fff;
}

.kodus-confirm-btn.danger:hover {
    background: #dc2626;
}

.kodus-toast-container {
    position: fixed;
    top: calc(var(--kodus-header-h) + 8px);
    right: 1rem;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.kodus-toast {
    pointer-events: auto;
    padding: 0.6rem 1rem;
    font-size: 0.78rem;
    font-family: var(--kodus-font-sans);
    border-radius: var(--kodus-radius);
    border: 1px solid var(--kodus-border);
    background: var(--kodus-bg-elevated);
    color: var(--kodus-text);
    box-shadow: var(--kodus-shadow-lg);
    max-width: 340px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s var(--kodus-ease), transform 0.3s var(--kodus-ease);
    position: relative;
    overflow: hidden;
}

.kodus-toast.visible {
    opacity: 1;
    transform: translateX(0);
}

.kodus-toast::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--kodus-accent);
    animation: toast-progress 4s linear forwards;
    width: 100%;
}

@keyframes toast-progress {
    from { width: 100%; }
    to { width: 0%; }
}

.kodus-toast.toast-error {
    border-color: rgba(239, 68, 68, 0.3);
    background: var(--kodus-red-dim);
    color: var(--kodus-red);
}

.kodus-toast.toast-error::after { background: var(--kodus-red); }

.kodus-toast.toast-success {
    border-color: rgba(34, 197, 94, 0.3);
    background: var(--kodus-green-dim);
    color: var(--kodus-green);
}

.kodus-toast.toast-success::after { background: var(--kodus-green); }

.kodus-toast.toast-warning {
    border-color: rgba(234, 179, 8, 0.3);
    background: var(--kodus-yellow-dim);
    color: var(--kodus-yellow);
}

.kodus-toast.toast-warning::after { background: var(--kodus-yellow); }


/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */

.kodus-login-body {
    /* Override the global `body { height:100%; overflow:hidden }` so the
       document can grow when the card is tall (/register has a plans grid
       plus invite, form, and card payment fields). Page-level scroll is
       the natural behavior — we don't want a nested scroll on the card. */
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    /* Column layout so the legal footer stacks below the card.
       align-items:center keeps the card horizontally centered;
       the card's margin-block:auto keeps it vertically centered
       when short and pushes the footer to the bottom of the viewport. */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--kodus-bg);
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
}

/* WebGL background container — fixed so it stays in view while the page scrolls */
.login-webgl-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.6;
    pointer-events: none;
}

.login-webgl-bg canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Fallback animated gradient if WebGL fails */
/* Spinning conic overlay removed — WebGL bg is enough */

.login-card {
    width: 100%;
    max-width: 400px;
    background: rgba(18, 18, 18, 0.82);
    border: 1px solid var(--kodus-border-light);
    border-radius: var(--kodus-radius-xl);
    padding: 2.5rem 2rem;
    box-shadow: var(--kodus-shadow-lg), 0 0 80px rgba(0,0,0,0.3);
    backdrop-filter: blur(24px) saturate(1.4);
    position: relative;
    z-index: 1;
    /* Center-when-short, top-align-when-tall. Pairs with align-items:
       flex-start on the body — the auto margins collapse to 0 when the
       card is taller than the flex container, so the page scrolls. */
    margin-block: auto;
}
/* Wider variant — used on /register where the plans grid needs elbow room */
.login-card.login-card-wide {
    max-width: 820px;
    padding: 2rem 2rem 2.25rem;
}

/* Accent glow border on login card */
.login-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 148, 96, 0.25), transparent 50%, rgba(0, 184, 118, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    font-family: var(--kodus-font-mono);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--kodus-accent) 0%, var(--kodus-accent-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 16px var(--kodus-accent-dim));
}

.login-logo-img {
    max-width: 180px;
    height: auto;
    filter: drop-shadow(0 0 16px var(--kodus-accent-dim));
}

.login-logo span {
    -webkit-text-fill-color: var(--kodus-text-dim);
    animation: blink-smooth 1.2s ease-in-out infinite;
}

.login-subtitle {
    color: var(--kodus-text-dim);
    font-size: 0.82rem;
    margin-top: 0.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}

.login-card .form-group,
.kodus-card .form-group {
    margin-bottom: 1.5rem;
}

.login-card .form-group label,
.kodus-card .form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--kodus-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.login-card .form-group input,
.kodus-card .form-group input {
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 16px;
    font-family: var(--kodus-font-mono);
    background: rgba(5, 5, 8, 0.6);
    color: var(--kodus-text);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-card .form-group input:focus,
.kodus-card .form-group input:focus {
    border-color: var(--kodus-accent);
    box-shadow: 0 0 0 3px var(--kodus-accent-dim), 0 0 20px rgba(0, 148, 96, 0.08);
}

.login-btn {
    width: 100%;
    padding: 0.7rem;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, var(--kodus-accent), var(--kodus-accent-hover));
    border: none;
    border-radius: var(--kodus-radius);
    cursor: pointer;
    transition: all 0.25s var(--kodus-ease);
    box-shadow: 0 2px 8px rgba(0, 148, 96, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.login-btn:hover {
    background: linear-gradient(135deg, var(--kodus-accent-hover), var(--kodus-accent));
    box-shadow: 0 4px 20px var(--kodus-accent-glow), 0 0 30px var(--kodus-accent-dim);
    transform: translateY(-1px);
}

.login-btn:active {
    transform: translateY(0) scale(0.98);
}

.login-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Profile quota bars — 4h / week / month iteration + month tokens */
.quota-row { margin-bottom: 0.9rem; }
.quota-row:last-child { margin-bottom: 0; }
.quota-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
}
.quota-label {
    color: var(--kodus-text-secondary, rgba(255,255,255,0.75));
    font-weight: 500;
}
.quota-value {
    font-family: var(--kodus-font-mono, monospace);
    font-size: 0.72rem;
    color: var(--kodus-text, #fff);
}
.quota-value-sep {
    color: var(--kodus-text-dim, rgba(255,255,255,0.35));
    margin: 0 2px;
}
.quota-bar {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.quota-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--kodus-accent, #009460), #0fd992);
    border-radius: inherit;
    transition: width 0.4s ease;
}
.quota-bar-warn {
    background: linear-gradient(90deg, #eab308, #f59e0b);
}
.quota-bar-full {
    background: linear-gradient(90deg, #ef4444, #f97316);
}
.quota-bar-unlimited {
    background: repeating-linear-gradient(90deg, rgba(0,148,96,0.4) 0 8px, rgba(0,148,96,0.15) 8px 16px);
}
.quota-reset {
    margin-top: 0.25rem;
    font-size: 0.68rem;
    color: var(--kodus-text-dim, rgba(255,255,255,0.45));
    font-family: var(--kodus-font-mono, monospace);
}

/* Public plans grid on /register (visible even without an invite) */
.plans-showcase {
    margin-bottom: 1.5rem;
}
.plans-showcase-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.plans-showcase-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kodus-text, #fff);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex: 1;
}
.plans-showcase-note {
    margin-top: 0.75rem;
    font-size: 0.72rem;
    color: var(--kodus-text-muted, rgba(255,255,255,0.6));
    text-align: center;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 8px;
}
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 0.7rem;
    align-items: stretch;
}
@media (max-width: 480px) {
    .plans-grid { grid-template-columns: 1fr; }
}
.plan-grid-empty {
    padding: 1.25rem;
    font-size: 0.78rem;
    color: var(--kodus-text-muted, rgba(255,255,255,0.55));
    text-align: center;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
}
.plan-card {
    position: relative;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 0.85rem 0.9rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
    height: 100%;  /* grid stretch fills the row so all cards align */
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.plan-card:hover {
    border-color: rgba(0, 148, 96, 0.35);
    background: rgba(0, 148, 96, 0.04);
    transform: translateY(-1px);
}
.plan-card:focus-visible {
    outline: 2px solid var(--kodus-accent, #009460);
    outline-offset: 2px;
}
.plan-card-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.plan-card-cta {
    margin-top: auto;   /* pinned to the bottom of the card */
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    font-size: 0.72rem;
    color: var(--kodus-text-muted, rgba(255,255,255,0.55));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.plan-card-picked .plan-card-cta {
    color: var(--kodus-accent-text, #86efac);
}
/* Best-value is marked by the ribbon alone — keep the card visually equal
   to the others so the "picked" state stays the only strong emphasis. */
.plan-card-best { /* ribbon handles it */ }
.plan-card-picked {
    border-color: var(--kodus-accent, #009460) !important;
    box-shadow: 0 0 0 2px var(--kodus-accent-dim, rgba(0,148,96,0.25));
}
.plan-card-ribbon {
    position: absolute;
    top: -8px;
    right: 10px;
    background: var(--kodus-accent, #009460);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.plan-card-ribbon-picked {
    background: #60a5fa;
    right: auto;
    left: 10px;
}
.plan-card-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kodus-text, #fff);
}
.plan-card-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
.plan-card-price-amt {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kodus-text, #fff);
}
.plan-card-price-per {
    font-size: 0.7rem;
    color: var(--kodus-text-muted, rgba(255,255,255,0.55));
}
.plan-card-desc {
    font-size: 0.72rem;
    color: var(--kodus-text-secondary, rgba(255,255,255,0.7));
    line-height: 1.3;
    min-height: 2.6em;
}
.plan-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.68rem;
    color: var(--kodus-text-secondary, rgba(255,255,255,0.72));
    line-height: 1.5;
    flex: 1;    /* grow so the CTA is pushed to the bottom of the card */
}
.plan-card-features li {
    padding-left: 0.95rem;
    position: relative;
}
.plan-card-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--kodus-accent, #009460);
    font-size: 0.72rem;
    font-weight: 700;
}
.plan-badge-save {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.55rem;
    padding: 1px 5px;
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Plan panel on signup — hero card above the form */
.plan-panel {
    background: linear-gradient(135deg, rgba(0, 148, 96, 0.12), rgba(0, 148, 96, 0.04));
    border: 1px solid rgba(0, 148, 96, 0.3);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
}
.plan-panel-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}
.plan-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--kodus-accent-text, #fff);
    flex: 1;
}
.plan-desc {
    font-size: 0.78rem;
    color: var(--kodus-text-secondary, rgba(255,255,255,0.75));
    line-height: 1.4;
    margin-bottom: 0.6rem;
}
.plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.plan-price-amt {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kodus-text, #fff);
}
.plan-price-per {
    color: var(--kodus-text-muted, rgba(255,255,255,0.6));
    font-size: 0.78rem;
}
.plan-price-savings {
    margin-left: auto;
    font-size: 0.68rem;
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    padding: 3px 8px;
    border-radius: 10px;
}
.plan-billing-toggle {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 2px;
    font-size: 0.72rem;
}
.plan-toggle-btn {
    background: none;
    border: none;
    color: var(--kodus-text-muted, rgba(255,255,255,0.6));
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.72rem;
    font-family: inherit;
}
.plan-toggle-btn.active {
    background: var(--kodus-accent);
    color: #fff;
}
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    color: var(--kodus-text-secondary, rgba(255,255,255,0.78));
}
.plan-features li {
    padding-left: 1.2rem;
    position: relative;
    margin-bottom: 2px;
}
.plan-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--kodus-accent);
    font-weight: 700;
}
.plan-caps {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.68rem;
    color: var(--kodus-text-dim, rgba(255,255,255,0.45));
    font-family: var(--kodus-font-mono, monospace);
}

/* Square card mount */
.sq-card-container {
    min-height: 90px;
    padding: 0.6rem;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--kodus-border-light, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
}
.sq-card-error {
    padding: 0.75rem;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 6px;
    font-size: 0.78rem;
}

/* Remember-me — brand-colored custom checkbox */
.login-remember {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: -0.25rem 0 1rem;
    font-size: 0.8rem;
    color: var(--kodus-text-secondary);
    cursor: pointer;
    user-select: none;
}
.login-remember input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--kodus-border-light, rgba(255,255,255,0.15));
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.login-remember input[type="checkbox"]:hover {
    border-color: var(--kodus-accent);
}
.login-remember input[type="checkbox"]:checked {
    background: var(--kodus-accent);
    border-color: var(--kodus-accent);
    box-shadow: 0 0 0 3px var(--kodus-accent-dim);
}
.login-remember input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.login-remember input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--kodus-accent-dim);
}
.login-remember:hover { color: var(--kodus-text); }

.login-error {
    display: none;
    color: var(--kodus-red);
    font-size: 0.82rem;
    text-align: center;
    margin-top: 1rem;
    text-shadow: 0 0 8px var(--kodus-red-dim);
}

.login-error.visible { display: block; }

.login-success {
    display: none;
    color: var(--kodus-green, #4ade80);
    font-size: 0.82rem;
    text-align: center;
    margin-top: 1rem;
    text-shadow: 0 0 8px var(--kodus-green-dim, rgba(74, 222, 128, 0.4));
}
.login-success.visible { display: block; }

/* ── Profile page ─────────────────────────────────────────── */

.profile-card {
    max-width: 480px;
}

.profile-avatar-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-avatar-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 148, 96, 0.15);
}

.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, rgba(0, 148, 96, 0.25), rgba(0, 148, 96, 0.08));
}

.profile-avatar-actions {
    display: flex;
    gap: 0.5rem;
}

.profile-avatar-btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.profile-avatar-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}
.profile-avatar-btn-danger {
    color: var(--kodus-red, #ef4444);
    border-color: rgba(239, 68, 68, 0.2);
}
.profile-avatar-btn-danger:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
}

.profile-avatar-hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.profile-readonly-hint {
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 0.4rem;
    letter-spacing: 0;
    text-transform: none;
}

.login-card input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.profile-section-divider {
    display: flex;
    align-items: center;
    margin: 1.75rem 0 1.25rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.45);
}
.profile-section-divider::before,
.profile-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}
.profile-section-divider span {
    padding: 0 0.85rem;
}

/* ── Admin user-management table ──────────────────────────── */

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.admin-users-table th,
.admin-users-table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: middle;
}
.admin-users-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.admin-users-table tr:hover td {
    background: rgba(255,255,255,0.02);
}
.admin-user-name {
    font-family: var(--kodus-font-mono, monospace);
    font-weight: 500;
    color: var(--kodus-text, #e5e7eb);
}
.admin-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    flex-shrink: 0;
}
.admin-user-avatar-initials {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    background: linear-gradient(135deg, rgba(0,148,96,0.35), rgba(0,148,96,0.1));
}

.admin-user-search {
    width: 220px;
    padding: 0.4rem 0.7rem;
    font-size: 0.82rem;
    font-family: var(--kodus-font-mono, monospace);
    background: rgba(5, 5, 8, 0.6);
    color: var(--kodus-text, #e5e7eb);
    border: 1px solid var(--kodus-border, rgba(255,255,255,0.1));
    border-radius: var(--kodus-radius, 6px);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-user-search:focus {
    border-color: var(--kodus-accent, #009460);
    box-shadow: 0 0 0 3px var(--kodus-accent-dim, rgba(0,148,96,0.15));
}
.admin-user-search::placeholder {
    color: rgba(255,255,255,0.3);
}

/* ── Dialog system (kodusModal/kodusConfirm/kodusAlert) ───── */
/*  Uses kodus-dialog-* class names to avoid colliding with the pre-existing
    static .kodus-modal-overlay / .kodus-modal system used by openModal(id). */

.kodus-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.kodus-dialog-overlay.visible { opacity: 1; }

.kodus-dialog {
    background: rgba(18, 18, 18, 0.98);
    border: 1px solid var(--kodus-border-light, rgba(255,255,255,0.12));
    border-radius: var(--kodus-radius-xl, 12px);
    padding: 0;
    min-width: 340px;
    max-width: 560px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    transform: translateY(10px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.kodus-dialog-overlay.visible .kodus-dialog {
    transform: translateY(0);
    opacity: 1;
}

.kodus-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.kodus-dialog-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kodus-text, #e5e7eb);
}
.kodus-dialog-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.4rem;
    transition: color 0.15s;
}
.kodus-dialog-close:hover { color: rgba(255,255,255,0.9); }

.kodus-dialog-body {
    padding: 1.1rem 1.25rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--kodus-text, #e5e7eb);
}
.kodus-dialog-body .form-group { margin-bottom: 1rem; }
.kodus-dialog-body label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--kodus-text-dim, rgba(255,255,255,0.5));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.kodus-dialog-body input[type="text"],
.kodus-dialog-body input[type="email"],
.kodus-dialog-body input[type="password"],
.kodus-dialog-body textarea,
.kodus-dialog-body select {
    width: 100%;
    padding: 0.55rem 0.8rem;
    font-size: 0.88rem;
    font-family: var(--kodus-font-mono, monospace);
    background: rgba(5,5,8,0.6);
    color: var(--kodus-text, #e5e7eb);
    border: 1px solid var(--kodus-border, rgba(255,255,255,0.1));
    border-radius: var(--kodus-radius, 6px);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.kodus-dialog-body input:focus,
.kodus-dialog-body select:focus,
.kodus-dialog-body textarea:focus {
    border-color: var(--kodus-accent, #009460);
    box-shadow: 0 0 0 3px var(--kodus-accent-dim, rgba(0,148,96,0.15));
}
.kodus-dialog-body input[type="checkbox"] {
    width: auto;
    vertical-align: middle;
    margin-right: 0.4rem;
}
.kodus-dialog-message {
    padding: 0.65rem 0.8rem;
    border-radius: var(--kodus-radius, 6px);
    font-size: 0.82rem;
    margin-bottom: 0.85rem;
}
.kodus-dialog-message-info    { background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.25);  color: #93c5fd; }
.kodus-dialog-message-success { background: rgba(74,222,128,0.1);  border: 1px solid rgba(74,222,128,0.3);   color: #86efac; }
.kodus-dialog-message-warning { background: rgba(234,179,8,0.08);  border: 1px solid rgba(234,179,8,0.3);    color: #fde68a; }
.kodus-dialog-message-error   { background: rgba(239,68,68,0.1);   border: 1px solid rgba(239,68,68,0.3);    color: #fca5a5; }

.kodus-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.kodus-dialog-copyable {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.kodus-dialog-copyable input { flex: 1; }

/* Checkbox rows — uppercase label style interferes with readable checkbox text */
.kodus-dialog-body label.kodus-dialog-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--kodus-text, #e5e7eb);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
    cursor: pointer;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--kodus-border, rgba(255,255,255,0.1));
    border-radius: var(--kodus-radius, 6px);
    background: rgba(5,5,8,0.4);
    transition: border-color 0.15s, background 0.15s;
}
.kodus-dialog-body label.kodus-dialog-check:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(5,5,8,0.6);
}
.kodus-dialog-body label.kodus-dialog-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 0;
    accent-color: var(--kodus-accent, #009460);
}
.kodus-dialog-body label.kodus-dialog-check-hint {
    display: block;
    font-size: 0.72rem;
    color: var(--kodus-text-dim, rgba(255,255,255,0.5));
    margin-top: 0.25rem;
}

/* Inline-stats block inside a dialog (shown on edit user for context) */
.kodus-dialog-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.85rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--kodus-radius, 6px);
}
.kodus-dialog-stat {
    font-size: 0.78rem;
}
.kodus-dialog-stat-label {
    display: block;
    color: var(--kodus-text-dim, rgba(255,255,255,0.5));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
    margin-bottom: 0.2rem;
}
.kodus-dialog-stat-value {
    color: var(--kodus-text, #e5e7eb);
    font-family: var(--kodus-font-mono, monospace);
    font-size: 0.85rem;
}

/* Section divider inside a dialog body (reuses profile-section-divider visual) */
.kodus-dialog-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0 0.85rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.4);
}
.kodus-dialog-divider::before,
.kodus-dialog-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.07);
}
.kodus-dialog-divider span { padding: 0 0.85rem; }

/* Put destructive button on the left of dialog footer */
.kodus-dialog-footer .kodus-btn-danger { margin-right: auto; }

/* ── Batch sub-call rendering in tool detail modal ────────── */

.td-batch-subcalls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.td-batch-subcall {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--kodus-radius, 6px);
    padding: 0.55rem 0.75rem;
}
.td-batch-subcall-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
}
.td-batch-subcall-idx {
    color: var(--kodus-text-dim, rgba(255,255,255,0.4));
    font-family: var(--kodus-font-mono, monospace);
    font-size: 0.72rem;
}
.td-batch-subcall-name {
    font-family: var(--kodus-font-mono, monospace);
    color: var(--kodus-accent, #009460);
    font-weight: 500;
}
.td-batch-subcall-path {
    margin-left: auto;
    color: var(--kodus-text-dim, rgba(255,255,255,0.5));
    font-family: var(--kodus-font-mono, monospace);
    font-size: 0.72rem;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.td-batch-subcall-args {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    padding: 0.5rem 0.7rem;
    font-size: 0.72rem;
    font-family: var(--kodus-font-mono, monospace);
    color: rgba(255,255,255,0.75);
    max-height: 180px;
    overflow: auto;
    margin: 0;
    white-space: pre;
}
.td-batch-subcall-diffs {
    margin-top: 0.5rem;
}

/* ── File Browser sidebar ─────────────────────────────────── */

.file-browser-sidebar {
    position: fixed;
    top: 40px;  /* below kodus-header */
    right: 0;
    bottom: 28px; /* above kodus-footer-bar */
    width: 320px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: -12px 0 32px rgba(0,0,0,0.45);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.2s ease;
}
.file-browser-sidebar.open {
    transform: translateX(0);
}
.file-browser-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.file-browser-title {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--kodus-text, #e5e7eb);
    margin-right: auto;
}
.file-browser-path {
    font-size: 0.7rem;
    color: var(--kodus-text-dim, rgba(255,255,255,0.5));
    font-family: var(--kodus-font-mono, monospace);
    padding: 0.45rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-browser-close {
    background: none;
    border: none;
    color: var(--kodus-text-dim, rgba(255,255,255,0.5));
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
}
.file-browser-close:hover { color: rgba(255,255,255,0.9); }
.file-browser-refresh {
    background: none;
    border: 1px solid var(--kodus-border, rgba(255,255,255,0.1));
    color: var(--kodus-text-dim, rgba(255,255,255,0.6));
    font-size: 0.72rem;
    padding: 0.3rem 0.55rem;
    border-radius: 4px;
    cursor: pointer;
}
.file-browser-refresh:hover { color: var(--kodus-text, #e5e7eb); border-color: rgba(255,255,255,0.2); }

.file-browser-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.35rem 0;
    font-family: var(--kodus-font-mono, monospace);
    font-size: 0.78rem;
}
.file-browser-entry {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.85rem;
    color: var(--kodus-text, #e5e7eb);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-browser-entry:hover {
    background: rgba(255,255,255,0.04);
}
.file-browser-entry-dir {
    color: var(--kodus-accent, #009460);
}
.file-browser-entry-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}
.file-browser-entry-size {
    margin-left: auto;
    color: var(--kodus-text-dim, rgba(255,255,255,0.4));
    font-size: 0.7rem;
    flex-shrink: 0;
}
.file-browser-indent {
    display: inline-block;
    width: 14px;
    flex-shrink: 0;
}
/* Small inline hint under form fields */
.form-help {
    font-size: 0.7rem;
    color: var(--kodus-text-dim);
    margin: -0.5rem 0 0.75rem;
}
.form-help code {
    background: var(--kodus-bg-elevated);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.9em;
}

/* Skills panel */
.skills-cat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--kodus-border);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kodus-text-dim);
}
.skills-cat-count {
    background: var(--kodus-bg-elevated);
    color: var(--kodus-text-muted);
    padding: 0 0.5rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0;
}
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}
.skill-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem;
    background: var(--kodus-bg-card);
    border: 1px solid var(--kodus-border);
    border-radius: 8px;
    transition: border-color 0.15s;
}
.skill-card:hover { border-color: var(--kodus-border-light); }
.skill-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.skill-name {
    font-family: var(--kodus-font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kodus-accent-text);
    flex: 1;
}
.skill-chip {
    font-size: 0.62rem;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--kodus-bg-elevated);
    color: var(--kodus-text-muted);
    border: 1px solid var(--kodus-border);
}
.skill-chip-own { background: rgba(0, 148, 96, 0.15); color: var(--kodus-accent-text); border-color: rgba(0, 148, 96, 0.3); }
.skill-chip-shared { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border-color: rgba(59, 130, 246, 0.3); }
.skill-chip-team { background: rgba(168, 85, 247, 0.12); color: #d8b4fe; border-color: rgba(168, 85, 247, 0.3); }
.skill-desc {
    font-size: 0.78rem;
    color: var(--kodus-text-muted);
    line-height: 1.4;
    min-height: 2.5em;
}
.skill-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.35rem;
}

/* @-mention menu (anchored above taskInput) */
.skill-mention-menu {
    position: fixed;
    display: none;
    z-index: 500;
    max-height: 280px;
    overflow-y: auto;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--kodus-border-light);
    border-radius: 8px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    padding: 4px;
}
.skill-mention-item {
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}
.skill-mention-item.selected,
.skill-mention-item:hover {
    background: var(--kodus-bg-hover);
}
.skill-mention-name {
    font-family: var(--kodus-font-mono);
    font-size: 0.82rem;
    color: var(--kodus-text);
}
.skill-mention-owner {
    color: var(--kodus-text-dim);
    font-size: 0.72rem;
    margin-left: 4px;
}
.skill-mention-desc {
    font-size: 0.72rem;
    color: var(--kodus-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.skill-mention-empty {
    padding: 10px 12px;
    font-size: 0.76rem;
    color: var(--kodus-text-dim);
}

/* Git sidebar — same chrome as file browser, with status-colored rows */
.git-changed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    margin-left: 4px;
    background: var(--kodus-accent, #009460);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    border-radius: 8px;
    line-height: 1;
}
.git-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.85rem;
    color: var(--kodus-text, #e5e7eb);
    cursor: pointer;
    user-select: none;
}
.git-row:hover { background: rgba(255,255,255,0.04); }
.git-row-status {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--kodus-font-mono, monospace);
}
.git-row-path {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--kodus-font-mono, monospace);
    font-size: 0.76rem;
}
.git-row-stats {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-family: var(--kodus-font-mono, monospace);
    color: var(--kodus-text-dim, rgba(255,255,255,0.45));
}
.git-row-stats .add { color: #22c55e; }
.git-row-stats .del { color: #ef4444; }
.git-status-modified { color: #eab308; }
.git-status-added    { color: #22c55e; }
.git-status-deleted  { color: #ef4444; }
.git-status-untracked { color: #38bdf8; }
.git-status-conflict { color: #f97316; }
.git-section-head {
    padding: 0.5rem 0.85rem 0.3rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kodus-text-dim, rgba(255,255,255,0.45));
}

/* Unified diff viewer */
.git-diff-modal .kodus-dialog {
    max-width: min(1100px, 95vw);
    max-height: 90vh;
}
.git-diff-meta {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    color: var(--kodus-text-dim, rgba(255,255,255,0.5));
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: var(--kodus-font-mono, monospace);
}
.git-diff-pre {
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 70vh;
    font-family: var(--kodus-font-mono, monospace);
    font-size: 0.76rem;
    line-height: 1.5;
    background: rgba(0,0,0,0.35);
}
.git-diff-line {
    display: block;
    padding: 0 0.85rem;
    white-space: pre;
    color: var(--kodus-text, #e5e7eb);
}
.git-diff-line.add { background: rgba(34,197,94,0.10); color: #86efac; }
.git-diff-line.del { background: rgba(239,68,68,0.10); color: #fca5a5; }
.git-diff-line.hunk { color: #60a5fa; background: rgba(59,130,246,0.06); }
.git-diff-line.meta { color: var(--kodus-text-dim, rgba(255,255,255,0.4)); }

.file-browser-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--kodus-text-dim, rgba(255,255,255,0.5));
    font-size: 0.8rem;
}

/* File source viewer modal — full-height scroll, monospace content */
.file-viewer-modal .kodus-dialog {
    max-width: 920px;
    width: 95%;
    max-height: 90vh;
}
.file-viewer-modal .kodus-dialog-body {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.file-viewer-pre {
    flex: 1;
    overflow: auto;
    margin: 0;
    padding: 1rem 1.25rem;
    font-family: var(--kodus-font-mono, monospace);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--kodus-text, #e5e7eb);
    background: rgba(0,0,0,0.3);
    white-space: pre;
    tab-size: 4;
}
.file-viewer-meta {
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.72rem;
    color: var(--kodus-text-dim, rgba(255,255,255,0.5));
    font-family: var(--kodus-font-mono, monospace);
    display: flex;
    justify-content: space-between;
}

/* ── Force-password-reset UI lock ─────────────────────────── */

.force-reset-banner {
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    background: rgba(239, 68, 68, 0.06);
}
.force-reset-banner .kodus-card-body {
    color: var(--kodus-text, #e5e7eb);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* While force-reset is active, disable every rail button except profile+logout */
body.force-reset-active .kodus-rail-btn {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(1);
}
body.force-reset-active .kodus-header-user-link {
    pointer-events: auto; /* allow reopening profile panel via header */
}
body.force-reset-active .thread-sidebar,
body.force-reset-active .kodus-footer-bar {
    opacity: 0.4;
    pointer-events: none;
}

.login-toggle {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem;
    color: var(--kodus-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* Secondary row (e.g. "Forgot password?") — no divider, tighter spacing */
.login-toggle-secondary {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: none;
}

.login-toggle-btn {
    background: none;
    border: 1px solid var(--kodus-border-light);
    color: var(--kodus-accent-text);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: var(--kodus-radius);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    letter-spacing: 0.02em;
}

.login-toggle-btn:hover {
    background: var(--kodus-accent-dim);
    border-color: var(--kodus-accent);
    color: var(--kodus-accent-bright);
}

/* (register-field animation removed — register is its own page now) */


/* ═══════════════════════════════════════════════════════════
   SCROLLBAR (global)
   ═══════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--kodus-border-light);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--kodus-text-muted);
}


/* ═══════════════════════════════════════════════════════════
   GSAP ANIMATION HELPERS
   ═══════════════════════════════════════════════════════════ */

.gsap-fade-up {
    opacity: 0;
    transform: translateY(12px);
}

.gsap-fade-in {
    opacity: 0;
}

.gsap-scale-in {
    opacity: 0;
    transform: scale(0.95);
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Noise texture stays on mobile — it's a lightweight CSS pseudo-element */

    :root {
        --kodus-header-h: 36px;
        --kodus-footer-h: 26px;
        --kodus-rail-w: 0px;
    }

    .kodus-header { padding: 0 10px; }

    /* Rail becomes bottom horizontal bar on mobile */
    .kodus-body {
        flex-direction: column;
    }

    .kodus-rail {
        width: 100%;
        min-width: 100%;
        height: 44px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0 4px;
        gap: 0;
        border-right: none;
        border-top: 1px solid var(--kodus-border);
        order: 2; /* Move below main */
        overflow: visible;
        flex-shrink: 0;
    }

    .kodus-rail::-webkit-scrollbar { display: none; }

    .kodus-rail-btn {
        width: 40px;
        height: 34px;
        flex-shrink: 0;
        border-radius: 8px;
    }

    .kodus-rail-btn svg {
        width: 19px;
        height: 19px;
    }

    /* Active button gets a filled background highlight instead of a bar */
    .kodus-rail-btn.active {
        background: var(--kodus-accent-dim);
        color: var(--kodus-accent-text);
    }

    /* Hide tooltips on mobile (touch devices) */
    .kodus-rail-tooltip {
        display: none;
    }

    /* Hide the position-based indicator bar on mobile — using bg highlight instead */
    .kodus-rail-indicator {
        display: none;
    }

    .kodus-main {
        order: 1;
        flex: 1;
        min-height: 0;
    }

    /* Footer pinned at very bottom with safe area */
    .kodus-footer-bar {
        order: 3;
        font-size: 0.6rem;
        padding: 0 8px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        min-height: calc(var(--kodus-footer-h) + env(safe-area-inset-bottom, 0px));
    }

    /* Console toolbar: compact single row — dropdowns + buttons only */
    .console-toolbar {
        padding: 4px 8px;
    }

    .console-toolbar-row {
        flex-wrap: wrap;
        gap: 6px;
        row-gap: 8px;
    }

    /* Mobile sizing for console selects is consolidated in the
       earlier .kodus-select.console-select @media block above. */
    .console-select {
        padding: 4px 18px 4px 5px;
    }

    .console-toolbar-actions {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: flex-start;
        flex-shrink: 0;
        gap: 4px;
        padding-top: 4px;
    }

    .console-toolbar-actions .kodus-btn-sm {
        padding: 3px 10px;
        font-size: 0.72rem;
    }

    /* Options row: hidden by default on mobile, gear button reveals */
    .console-options {
        display: none;
        gap: 10px;
        padding: 6px 0 2px;
    }

    .console-options.mobile-open {
        display: flex;
    }

    /* In chat mode on mobile, collapse the toolbar into a single
       wrap-friendly row containing hamburger + Stop + Chat toggle
       + Build Now. We use display:contents on the inner wrappers
       so their children become direct flex items of the toolbar. */
    .console-toolbar.chat-mode-hidden {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
    }
    .console-toolbar.chat-mode-hidden .console-toolbar-row,
    .console-toolbar.chat-mode-hidden .console-toolbar-actions,
    .console-toolbar.chat-mode-hidden .console-options {
        display: contents;
    }

    /* Dir input: full width on its own row so it's clear what it is */
    .console-dir-input {
        flex: 0 0 100%;
        max-width: none;
    }

    .console-options .kodus-toggle {
        font-size: 0.72rem;
    }

    .console-maxiter .kodus-label {
        font-size: 0.72rem;
    }

    .console-maxiter .kodus-input {
        width: 50px;
    }

    .mode-indicators {
        flex-direction: column;
        gap: 4px;
    }

    .agent-run-stats {
        gap: 6px;
    }

    /* Terminal gets maximum space */
    .kodus-terminal {
        padding: 8px 10px;
        font-size: 0.75rem;
        line-height: 1.6;
    }

    .terminal-prompt {
        padding: 6px 8px;
    }

    /* Rules layout stacks */
    .rules-layout {
        flex-direction: column;
    }

    .rules-sidebar {
        width: 100%;
        min-width: auto;
        max-width: none;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--kodus-border);
    }

    .rules-detail {
        min-height: 200px;
    }

    /* Insights layout stacks */
    .insights-layout {
        flex-direction: column;
    }

    .insights-sidebar {
        width: 100%;
        min-width: auto;
        max-width: none;
        max-height: 35vh;
        border-right: none;
        border-bottom: 1px solid var(--kodus-border);
    }

    .insights-detail {
        min-height: 200px;
    }

    .cli-flags-grid {
        grid-template-columns: 1fr;
    }

    /* Persona grid single column */
    .persona-grid {
        grid-template-columns: 1fr;
    }

    /* Stat blocks wrap nicely */
    .stats-row {
        gap: 8px;
    }

    .stat-block {
        min-width: 80px;
    }

    /* Modals fill screen */
    .kodus-modal {
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: var(--kodus-radius-lg);
    }

    /* Vignette + WebGL stay on mobile — modern phones handle these fine */

    .login-card {
        backdrop-filter: blur(16px);
        padding: 2rem 1.5rem;
    }

    .form-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .training-form-bar {
        flex-wrap: wrap;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .kodus-header-status { display: none; }

    .stat-block {
        min-width: 70px;
        padding: 8px;
    }

    .stat-value { font-size: 1.1rem; }

    /* Login WebGL stays full opacity — small screens deserve the same visuals */

    .kodus-login-body::after {
        animation: none;
        background: none;
    }

    .login-logo {
        font-size: 1.8rem;
    }
}


/* ═══════════════════════════════════════════════════════════
   LEGACY COMPAT — old class names still used by JS
   (kodus-status-bar, kodus-filter-bar references)
   ═══════════════════════════════════════════════════════════ */

/* Status bar class used by JS setAgentStatus */
.kodus-status-bar {
    /* Mapped to footer bar — JS adds .running class */
}

.kodus-status-bar.running {
    border-color: var(--kodus-border-accent);
}

/* Filter bar (used in old rules layout, kept for JS compat) */
.kodus-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Config grid */
.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}


/* ═══════════════════════════════════════════════════════════
   CONVERSATION THREAD — session detail viewer
   Chat-bubble style with visual role differentiation.
   ═══════════════════════════════════════════════════════════ */

.conversation-thread {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--kodus-bg);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius-lg);
}

.conv-message {
    padding: 12px 16px;
    border-radius: 12px;
    border-left: none;
    transition: background 0.2s;
    max-width: 80%;
    margin: 6px 0;
}

/* ── User message card — exact fork of sms-ai-card from conversations/inbox.php ── */
@keyframes kodusEdgeRunner {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes kodusUserGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.conv-user {
    margin-left: auto;
    position: relative;
    border-radius: 1rem;
    isolation: isolate;
    z-index: 2;
    padding: 0;
    background: transparent;
    transform: translateZ(0);
}
.conv-user::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(1rem + 2px);
    padding: 2px;
    /* Cyan to Emerald - Production Grade */
    background: linear-gradient(135deg, #22d3ee 0%, #009460 50%, #22d3ee 100%);
    background-size: 200% 200%;
    animation: kodusEdgeRunner 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    transform: translateZ(0);
}
.conv-user-inner {
    position: relative;
    border-radius: 1rem;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(20, 20, 20, 0.95) 40%,
        rgba(20, 20, 20, 0.95) 60%,
        rgba(30, 30, 30, 0.9) 100%
    );
    backdrop-filter: blur(12px);
    color: #e2e8f0;
    overflow: hidden;
    padding: 0; /* Padding handled by children */
}
.conv-user .conv-header {
    padding: 1rem 1.125rem 0;
}
.conv-user .conv-body {
    padding: 0.25rem 1.125rem 1rem;
}

@keyframes kodusPillScanner {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

.conv-assistant {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--kodus-border-light);
    margin-right: auto;
    border-radius: 1rem;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}
.conv-assistant:hover {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 148, 96, 0.5) 100%);
    border-color: rgba(92, 255, 190, 1);
}

.conv-assistant::before {
    display: none;
    pointer-events: none;
}

.conv-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.7rem;
}

.conv-role {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.conv-role-user {
    color: rgba(255, 255, 255, 0.8);
}

.conv-role-assistant {
    color: var(--kodus-accent-text);
}

.conv-turn {
    color: var(--kodus-text-muted);
    font-size: 0.68rem;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
}

.conv-body {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--kodus-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--kodus-font-sans);
}

.conv-user .conv-body {
    color: #fff;
}

.conv-user .conv-time {
    color: rgba(255, 255, 255, 0.6);
}

/* Session card completed status — more visible */
.session-card-status.completed {
    background: var(--kodus-green);
    opacity: 0.6;
}

/* Session card — hover lift */
.session-card:hover {
    transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════
   AGENT THINKING INDICATOR
   ═══════════════════════════════════════════════════════════ */

.agent-thinking {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--kodus-text-secondary);
    font-size: 0.82rem;
    margin: 6px 0;
    max-width: 200px;
    background: var(--kodus-bg-elevated);
    border: 1px solid var(--kodus-border);
    border-radius: 12px 12px 12px 4px;
}

.thinking-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kodus-accent);
    animation: thinking-bounce 1.4s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Legacy single dot — keep for compat */
.thinking-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kodus-accent);
    animation: thinking-bounce 1.4s ease-in-out infinite;
}

/* ── Activity Feed — premium terminal ── */
.activity-group {
    margin: 8px 0;
    padding: 0 0 0 14px;
    border-left: 2px solid var(--kodus-accent);
    font-family: var(--kodus-font-mono);
    font-size: 0.76rem;
    position: relative;
    max-height: 72px;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Slim scrollbar */
.activity-group::-webkit-scrollbar { width: 3px; }
.activity-group::-webkit-scrollbar-track { background: transparent; }
.activity-group::-webkit-scrollbar-thumb { background: var(--kodus-accent-dim); border-radius: 3px; }
.activity-group::before {
    content: '';
    position: absolute;
    left: -1px; top: 0; bottom: 0; width: 2px;
    background: var(--kodus-accent);
    box-shadow: 0 0 8px var(--kodus-accent-glow), 0 0 24px rgba(0, 148, 96, 0.12);
}

/* Each line */
.activity-line {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--kodus-font-mono);
    font-size: 0.75rem;
    color: var(--kodus-text-secondary);
    animation: act-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.4s;
}
@keyframes act-in {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Settled = past lines */
.activity-line.settled { opacity: 0.35; animation: none; }
.activity-line.settled .activity-text { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: var(--kodus-text-dim); }
.activity-line.settled .activity-spinner { display: none; }

/* Verbose-only items: hidden by default, shown when terminal has .verbose-active */
.verbose-only { display: none; }
.kodus-terminal.verbose-active .verbose-only { display: flex; }

/* Icon */
.activity-icon {
    flex-shrink: 0;
    width: 14px;
    text-align: center;
    font-size: 0.72rem;
}
.activity-icon-ok { color: var(--kodus-green); text-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }
.activity-icon-err { color: var(--kodus-red); text-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }
.activity-icon-warn { color: var(--kodus-yellow); }
.activity-icon-tool { color: var(--kodus-accent-text); text-shadow: 0 0 6px var(--kodus-accent-glow); }

/* ── Active text — continuous wave + shimmer ── */
.activity-text {
    min-width: 0;
    overflow: hidden;
    display: inline-flex;
    position: relative;
    color: var(--kodus-text);
}
/* Each character — continuous floating wave while active */
.act-char {
    display: inline-block;
    animation: act-wave-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards,
               act-float 1.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 18ms), calc(var(--i) * 40ms + 0.35s);
    opacity: 0;
    color: var(--kodus-accent-text);
}
/* Entry wave */
@keyframes act-wave-in {
    0% { opacity: 0; transform: translateY(8px); }
    60% { opacity: 1; transform: translateY(-2px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* Continuous float — subtle bobbing wave */
@keyframes act-float {
    0%, 100% { transform: translateY(0); color: var(--kodus-text); }
    50% { transform: translateY(-1.5px); color: var(--kodus-accent-text); }
}
/* Settled = dead still */
.activity-line.settled .act-char {
    opacity: 0.5;
    transform: none;
    animation: none;
    color: var(--kodus-text-dim);
}
.activity-line.settled .activity-text::after { display: none; }

/* ── Spinner — hugs the text, not the edge ── */
.activity-spinner {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    border: 2px solid var(--kodus-accent-dim);
    border-top-color: var(--kodus-accent);
    border-radius: 50%;
    animation: act-spin 0.5s linear infinite;
    box-shadow: 0 0 10px var(--kodus-accent-glow), 0 0 20px rgba(0, 148, 96, 0.15);
}
@keyframes act-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .activity-line { animation: none; }
    .act-char { animation: none; opacity: 1; transform: none; color: var(--kodus-text); }
    .activity-text::after { display: none; }
    .activity-spinner { animation: none; }
}

/* Collapsible debug blocks (banner, iterations, tool calls) */
/* Collapsible thought block — thinking disclosure */
.thought-block {
    margin: 8px 0;
    font-size: 0.78rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}
.thought-summary {
    cursor: pointer;
    color: var(--kodus-text-secondary);
    font-size: 0.78rem;
    padding: 8px 14px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s, background 0.2s;
    border-radius: 6px;
}
.thought-summary:hover {
    color: var(--kodus-accent-text);
    background: rgba(255, 255, 255, 0.03);
}
.thought-summary::before {
    content: 'â–¸';
    color: var(--kodus-accent);
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.thought-block[open] .thought-summary::before {
    transform: rotate(90deg);
}
.thought-summary::-webkit-details-marker { display: none; }
.thought-body {
    padding: 10px 14px 12px;
    color: var(--kodus-text-secondary);
    font-size: 0.76rem;
    line-height: 1.6;
    white-space: pre-wrap;
    border-left: 2px solid var(--kodus-accent-dim);
    margin: 0 14px 8px;
}

.debug-block {
    margin: 4px 0;
    font-size: 0.72rem;
}

.debug-summary {
    cursor: pointer;
    color: var(--kodus-text-muted);
    font-family: var(--kodus-font-mono);
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
    list-style: none;
}

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

.debug-summary::before {
    content: 'â–¸ ';
    color: var(--kodus-text-dim);
}

.debug-block[open] .debug-summary::before {
    content: 'â–¾ ';
}

.debug-summary:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--kodus-border);
}

.debug-content {
    padding: 4px 0 4px 16px;
    border-left: 1px solid var(--kodus-border);
    margin: 4px 0 4px 8px;
    max-height: 200px;
    overflow-y: auto;
}

.debug-content .line {
    font-size: 0.7rem;
    opacity: 0.6;
}

/* Chat-style messages inside the terminal */
.kodus-terminal .conv-message {
    margin: 12px 4px;
    overflow: visible;
}

.kodus-terminal .conv-user {
    margin-left: auto;
    margin-right: 4px;
    isolation: isolate;
    max-width: 85%;
}

.kodus-terminal .conv-assistant {
    margin-right: auto;
    margin-left: 0;
}

/* ═══════════════════════════════════════════════════════════
   COMPACT TOOL PILLS — Inline flow with shared detail panel
   ═══════════════════════════════════════════════════════════ */

/* ── Pill Flow Container ── */
.tc-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 2px 0;
    align-items: center;
}

/* ── Individual Tool Pill (inline, compact) ── */
@keyframes pillPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
@keyframes pillBorderCycle {
    0% { border-color: #3b82f6; box-shadow: 0 0 6px rgba(59, 130, 246, 0.4); }
    33% { border-color: #8b5cf6; box-shadow: 0 0 6px rgba(139, 92, 246, 0.4); }
    66% { border-color: #06b6d4; box-shadow: 0 0 6px rgba(6, 182, 212, 0.4); }
    100% { border-color: #3b82f6; box-shadow: 0 0 6px rgba(59, 130, 246, 0.4); }
}

.tc-card {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 3px 8px;
    border-radius: 1rem;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    user-select: none;
    font-family: var(--kodus-font-mono);
    font-size: 0.7rem;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    position: relative;
    overflow: visible;
}

.tc-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--kodus-border-light);
}

.tc-card-settled {
    border-color: rgba(0, 148, 96, 0.8);
    background: rgba(0, 0, 0, 0.9);
}

.tc-card-settled:hover {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 148, 96, 0.5) 100%);
    border-color: rgba(92, 255, 190, 1);
}

/* Successful settled pills: override category color so ALL successful pills
   are green (matching .tc-pill-write's #22c55e). Applies only when the card
   settled without an error (.tc-card-error is added on failure), and excludes
   the review/strategy variants which have their own color coding (purple/yellow). */
.tc-card-settled:not(.tc-card-error):not(.tc-card-review):not(.tc-card-review-issue):not(.tc-card-strategy) .tc-pill,
.tc-card-settled:not(.tc-card-error):not(.tc-card-review):not(.tc-card-review-issue):not(.tc-card-strategy) .tc-pill-read,
.tc-card-settled:not(.tc-card-error):not(.tc-card-review):not(.tc-card-review-issue):not(.tc-card-strategy) .tc-pill-search,
.tc-card-settled:not(.tc-card-error):not(.tc-card-review):not(.tc-card-review-issue):not(.tc-card-strategy) .tc-pill-write,
.tc-card-settled:not(.tc-card-error):not(.tc-card-review):not(.tc-card-review-issue):not(.tc-card-strategy) .tc-pill-exec,
.tc-card-settled:not(.tc-card-error):not(.tc-card-review):not(.tc-card-review-issue):not(.tc-card-strategy) .tc-pill-meta,
.tc-card-settled:not(.tc-card-error):not(.tc-card-review):not(.tc-card-review-issue):not(.tc-card-strategy) .tc-pill-think {
    color: #22c55e;
}

/* Clickable pill indicator — subtle dot shows detail data is available */
.tc-has-detail {
    cursor: pointer;
}
.tc-has-detail::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(92, 255, 190, 0.8);
    margin-left: 3px;
    vertical-align: middle;
}

.tc-card-running {
    background: linear-gradient(90deg,
        rgba(59, 130, 246, 0.15) 0%,
        rgba(139, 92, 246, 0.2) 25%,
        rgba(6, 182, 212, 0.15) 50%,
        rgba(139, 92, 246, 0.2) 75%,
        rgba(59, 130, 246, 0.15) 100%
    );
    background-size: 300% 100%;
    animation: pillBgSweep 0.8s linear infinite, pillPulse 0.6s ease-in-out infinite;
    border-color: rgba(59, 130, 246, 0.4);
}
.tc-card-running:hover {
    border-color: rgba(96, 165, 250, 1);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}
@keyframes pillBgSweep {
    0% { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}

.tc-card-error {
    border-color: var(--kodus-red-dim);
}
/* Bulk file read cards */
.bulk-read-header { font-size: 0.8rem; color: var(--kodus-text-muted); margin-bottom: 8px; }
.bulk-file-card { margin-bottom: 6px; border: 1px solid var(--kodus-border); border-radius: 6px; overflow: hidden; }
.bulk-file-header { padding: 6px 10px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; }
.bulk-file-header code { color: var(--kodus-accent); font-weight: 600; }
.bulk-file-meta { font-size: 0.7rem; color: var(--kodus-text-dim); }
.bulk-file-code { margin: 0; padding: 8px 12px; background: rgba(0,0,0,0.2); font-size: 0.72rem; line-height: 1.5; max-height: 300px; overflow-y: auto; }
.bulk-file-code code { white-space: pre; }
.bulk-file-error { padding: 6px 10px; color: var(--kodus-red); font-size: 0.78rem; background: rgba(233,69,96,0.08); border-radius: 4px; margin-bottom: 4px; }
.tc-error-reason {
    font-size: 0.75rem;
    color: #f87171;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(248, 113, 113, 0.08);
    border-radius: 4px;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-card-active {
    border-color: var(--kodus-accent);
    background: rgba(0, 148, 96, 0.1);
}

/* Hide the old card header — pill IS the card now */
.tc-card-header {
    display: contents;
}

/* ── Tool Name Pill (embedded in card) ── */
.tc-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    border-radius: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: none;
    background: none;
}

.tc-pill-icon {
    font-size: 0.6rem;
    line-height: 1;
}

.tc-pill-name {
    line-height: 1;
}

/* ── Args (file name) shown inline in pill ── */
.tc-card-args {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
    color: var(--kodus-text-dim);
    opacity: 0.7;
    display: none;
}
.kodus-terminal.verbose-active .tc-card-args {
    display: inline;
}

/* ── Hide todo_write pills in non-verbose mode ── */
.tc-card.tc-todo-write {
    display: none !important;
}
.kodus-terminal.verbose-active .tc-card.tc-todo-write {
    display: inline-flex !important;
}

/* Pill color categories */
.tc-pill-read {
    color: #60a5fa;
}

.tc-pill-search {
    color: #60a5fa;
}

.tc-pill-write {
    color: #22c55e;
}

.tc-pill-exec {
    color: #eab308;
}

.tc-pill-meta {
    color: #a78bfa;
}

.tc-pill-think {
    color: #f59e0b;
}

/* ── Status indicator (inline in pill) ── */
.tc-card-status {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
}

.tc-status-icon {
    font-size: 0.6rem;
    font-weight: 700;
}

.tc-status-ok {
    color: var(--kodus-green);
}

.tc-status-err {
    color: var(--kodus-red);
}

/* ── Spinner for running state ── */
.tc-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--kodus-accent-dim);
    border-top-color: var(--kodus-accent);
    border-radius: 50%;
    animation: tc-spin 0.6s linear infinite;
}

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

/* ── Chevron (hidden in compact mode) ── */
.tc-card-chevron {
    display: none;
}

/* ── Detail Panel (full-width below pills, shared) ── */
.tc-detail-panel {
    display: none;
    width: 100%;
    margin: 4px 0;
    border-radius: 6px;
    border: 1px solid var(--kodus-border);
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    font-family: var(--kodus-font-mono);
}

.tc-detail-panel.tc-detail-open {
    display: block;
}

/* ── Tooltip (JS-positioned directly under the hovered element) ── */
.kodus-tooltip {
    position: fixed;
    background: var(--kodus-bg-elevated);
    color: var(--kodus-text);
    border: 1px solid var(--kodus-border-light);
    padding: 10px 32px 10px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: normal;
    max-width: 340px;
    z-index: 600;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.15s;
}

.kodus-tooltip.visible {
    opacity: 1;
    pointer-events: auto;
}

.kodus-tooltip-text {
    display: block;
}

.kodus-tooltip-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--kodus-text-dim);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.kodus-tooltip-close:hover,
.kodus-tooltip-close:focus-visible {
    color: var(--kodus-text);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

/* ── Routing page ── */
.routing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

@media (min-width: 1600px) {
    .routing-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 900px) {
    .routing-grid { grid-template-columns: 1fr; }
}

.routing-group-title {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--kodus-accent-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 0 2px;
    border-bottom: 1px solid var(--kodus-border);
    margin-bottom: 1px;
}

.routing-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}

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

.routing-tool-name {
    font-family: var(--kodus-font-mono);
    font-size: 0.7rem;
    color: var(--kodus-text);
    min-width: 130px;
    flex-shrink: 0;
}

.routing-provider, .routing-model {
    font-size: 0.7rem;
    padding: 1px 4px;
}

/* Tool inventory pills */
.tool-inv-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-family: var(--kodus-font-mono);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--kodus-border);
    color: var(--kodus-text-dim);
}

.tool-inv-pill.routed {
    border-color: var(--kodus-accent);
    color: var(--kodus-accent-text);
    background: var(--kodus-accent-dim);
}

/* ── Tool detail modal (mobile) ── */
.tc-detail-modal {
    background: rgba(0, 0, 0, 1);
    border: 1px solid var(--kodus-border-light);
    border-radius: 12px;
    width: 90dvw;
    max-width: 90dvw;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.tc-detail-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--kodus-border);
}

.tc-detail-modal-close {
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--kodus-text-muted);
    line-height: 1;
}

.tc-detail-modal-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    font-family: var(--kodus-font-mono);
    font-size: 0.72rem;
}

.td-modal-title {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--kodus-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Tool Detail Sections ── */
.td-section {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.td-section:last-child { border-bottom: none; }

.td-section-header {
    background: rgba(255, 255, 255, 0.02);
}
.td-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.td-intent {
    font-size: 0.68rem;
    color: var(--kodus-text-muted);
    font-style: italic;
    font-family: var(--kodus-font);
}
.td-status {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.td-status-ok {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.td-status-err {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.td-section-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--kodus-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.td-section-icon {
    font-size: 0.8rem;
}

/* Argument key-value pairs */
.td-arg-row {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    border-left: 2px solid rgba(96, 165, 250, 0.3);
}
.td-arg-key {
    color: #60a5fa;
    font-weight: 600;
    font-size: 0.68rem;
    min-width: 80px;
    flex-shrink: 0;
    padding-top: 2px;
}
.td-arg-val {
    margin: 0;
    font-size: 0.68rem;
    color: var(--kodus-text-dim);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    flex: 1;
}
.td-muted {
    font-size: 0.68rem;
    color: var(--kodus-text-muted);
    opacity: 0.5;
    font-style: italic;
}

/* Diff display */
.td-diff-path {
    font-size: 0.68rem;
    color: var(--kodus-accent);
    margin-bottom: 6px;
    padding: 3px 8px;
    background: rgba(0, 148, 96, 0.08);
    border-radius: 4px;
    display: inline-block;
}
.td-diff-block {
    font-family: var(--kodus-font-mono);
    font-size: 0.68rem;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.td-diff-old {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.08);
    padding: 2px 8px;
    border-left: 3px solid rgba(239, 68, 68, 0.4);
    display: flex;
    align-items: baseline;
}
.td-diff-new {
    color: #86efac;
    background: rgba(74, 222, 128, 0.08);
    padding: 2px 8px;
    border-left: 3px solid rgba(74, 222, 128, 0.4);
    display: flex;
    align-items: baseline;
}
.td-diff-ln {
    display: inline-block;
    min-width: 3ch;
    text-align: right;
    color: var(--kodus-text-muted);
    opacity: 0.45;
    margin-right: 6px;
    user-select: none;
    font-size: 0.88em;
    flex-shrink: 0;
}
.td-diff-marker {
    display: inline-block;
    width: 1ch;
    margin-right: 8px;
    flex-shrink: 0;
    font-weight: 700;
}
.td-diff-old .td-diff-marker { color: #ff6b6b; }
.td-diff-new .td-diff-marker { color: #4ade80; }

/* Result output */
.td-result-meta {
    font-size: 0.62rem;
    color: var(--kodus-text-muted);
    margin-bottom: 6px;
    opacity: 0.6;
}
.td-result-output {
    margin: 0;
    font-size: 0.68rem;
    color: var(--kodus-text-dim);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    max-height: 50vh;
    overflow-y: auto;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.td-result-output.td-collapsed {
    max-height: 4.5em;
    overflow: hidden;
}
.td-expand-btn {
    font-size: 0.68rem;
    color: var(--kodus-accent, #6c8cff);
    cursor: pointer;
    padding: 4px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.td-expand-btn:hover {
    text-decoration: underline;
}
.td-args-wrap {
    max-height: 50vh;
    overflow-y: auto;
}
.td-args-wrap.td-collapsed {
    max-height: 4.5em;
    overflow: hidden;
}
.td-result-error {
    margin: 0;
    font-size: 0.68rem;
    color: #fca5a5;
    padding: 8px;
    background: rgba(239, 68, 68, 0.06);
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.15);
    white-space: pre-wrap;
}

/* ── Stream chunk bubble (typewriter from Node runner) ── */
.stream-active {
    background: var(--kodus-bg-elevated);
    border: 1px solid var(--kodus-border-light);
    border-radius: 12px 12px 12px 4px;
    max-width: 80%;
    margin-right: auto;
    margin-left: 0;
}

.stream-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--kodus-text);
}

/* ── Paperclip attach button ── */
.terminal-prompt-btn {
    background: none;
    border: none;
    color: var(--kodus-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.terminal-prompt-btn:hover {
    color: var(--kodus-accent);
    background: var(--kodus-accent-dim);
}

/* ── Image preview chip ── */
.image-preview {
    padding: 4px 8px 4px 40px;
    display: flex;
    align-items: center;
}
.image-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--kodus-bg-elevated);
    border: 1px solid var(--kodus-border-light);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.72rem;
    color: var(--kodus-text-dim);
}
.image-chip-thumb {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    object-fit: cover;
}
.image-chip-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.image-chip-remove {
    cursor: pointer;
    color: var(--kodus-text-muted);
    font-size: 1rem;
    line-height: 1;
}
.image-chip-remove:hover {
    color: var(--kodus-red);
}

/* ── Consultation badges ── */
.consultation-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-family: var(--kodus-font-mono);
    margin: 3px 0;
}
.consultation-badge.consulting {
    color: var(--kodus-text-dim);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--kodus-border);
}
.consultation-badge.approved {
    color: var(--kodus-green);
    background: var(--kodus-green-dim);
}
.consultation-badge.rejected {
    color: var(--kodus-red);
    background: var(--kodus-red-dim);
}

/* ── Inline iteration badge inside flow ── */
.tc-iter-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(0, 148, 96, 0.8);
    color: rgba(0, 148, 96, 0.8);
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--kodus-font-mono);
    flex-shrink: 0;
}
.kodus-terminal.verbose-active .tc-iter-badge {
    display: inline-flex;
}

/* ── Code result block inside card body ── */
.tc-result-code {
    margin: 0;
    padding: 8px 0;
    font-family: var(--kodus-font-mono);
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--kodus-text-secondary);
    overflow-x: auto;
    overflow-y: auto;
    max-height: 300px;
    white-space: pre;
    counter-reset: line;
}

.tc-result-ln {
    display: inline-block;
    width: 36px;
    text-align: right;
    padding-right: 10px;
    margin-right: 6px;
    color: var(--kodus-text-muted);
    opacity: 0.5;
    user-select: none;
    border-right: 1px solid var(--kodus-border);
}

.tc-result-more {
    display: block;
    padding: 4px 0 4px 52px;
    color: var(--kodus-text-muted);
    font-style: italic;
    font-size: 0.68rem;
}

.tc-result-error {
    padding: 8px 12px;
    color: var(--kodus-red);
    font-size: 0.74rem;
    font-family: var(--kodus-font-mono);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Diff inside card ── */
.tc-card-diff .tc-card-body .diff-block {
    margin: 0;
    border: none;
    border-radius: 0;
}

.tc-card-diff .tc-card-body .diff-block-header {
    display: none;
}

/* ── Iteration Marker (redesigned as centered badge divider) ── */
.iteration-marker {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 2px 0;
    margin: 10px 0 6px;
}

.iteration-marker::before,
.iteration-marker::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--kodus-border);
}

.iteration-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    margin: 0 10px;
    font-family: var(--kodus-font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--kodus-text-muted);
    background: var(--kodus-bg-elevated);
    border: 1px solid var(--kodus-border);
    border-radius: 9px;
    letter-spacing: 0.04em;
}

/* ── Warning line ── */
.tc-warning-line {
    display: none;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    margin: 4px 0;
    border-radius: 6px;
    background: rgba(234, 179, 8, 0.06);
    border-left: 3px solid var(--kodus-yellow);
    font-family: var(--kodus-font-mono);
    flex-basis: 100%;
    order: 999;
}
.kodus-terminal.verbose-active .tc-warning-line {
    display: flex;
}
    font-size: 0.74rem;
}

.tc-warning-icon {
    flex-shrink: 0;
    color: var(--kodus-yellow);
    font-size: 0.8rem;
    line-height: 1.4;
}

.tc-warning-text {
    color: var(--kodus-yellow);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Error line ── */
.tc-error-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    margin: 4px 0;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.06);
    border-left: 3px solid var(--kodus-red);
    font-family: var(--kodus-font-mono);
    font-size: 0.74rem;
}

.tc-error-icon {
    flex-shrink: 0;
    color: var(--kodus-red);
    font-size: 0.8rem;
    line-height: 1.4;
    font-weight: 700;
}

.tc-error-text {
    color: var(--kodus-red);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Task Complete Card ── */
.tc-complete-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.tc-complete-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    color: var(--kodus-green);
    font-size: 0.9rem;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.tc-complete-body {
    flex: 1;
    min-width: 0;
}

.tc-complete-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kodus-green);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.tc-complete-summary {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--kodus-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Done Footer (usage-style) ── */
.tc-done-footer {
    text-align: center;
    padding: 8px 0;
    margin: 8px 0;
    font-family: var(--kodus-font-mono);
    font-size: 0.65rem;
    color: var(--kodus-text-muted);
    opacity: 0.6;
    letter-spacing: 0.03em;
}

.tc-waiting-card {
    text-align: center;
    padding: 12px 0;
    margin: 8px 0;
    font-family: var(--kodus-font-mono);
    font-size: 0.75rem;
    color: var(--kodus-yellow);
    letter-spacing: 0.03em;
}

.tc-waiting-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--kodus-yellow);
    animation: pulse-dot-waiting 2.5s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 6px;
}

.footer-bar.waiting {
    border-top-color: var(--kodus-yellow);
}

/* ── Debug Noise (hidden by default, shown in verbose mode) ── */
.tc-debug-noise {
    display: none;
    padding: 1px 10px;
    font-family: var(--kodus-font-mono);
    font-size: 0.65rem;
    color: var(--kodus-text-muted);
    opacity: 0.4;
}

.kodus-terminal.verbose-active .tc-debug-noise {
    display: block;
}

.tc-reasoning-details {
    margin: 4px 0 8px 0;
    border: 1px solid var(--kodus-border);
    border-radius: 6px;
    overflow: hidden;
}
.tc-reasoning-summary {
    padding: 6px 12px;
    font-family: var(--kodus-font-mono);
    font-size: 0.72rem;
    color: var(--kodus-text-muted);
    cursor: pointer;
    background: var(--kodus-surface);
    user-select: none;
}
.tc-reasoning-summary:hover {
    color: var(--kodus-text);
}
.tc-reasoning-body {
    padding: 8px 12px;
    font-family: var(--kodus-font-mono);
    font-size: 0.75rem;
    color: var(--kodus-text-muted);
    max-height: 400px;
    overflow-y: auto;
    border-top: 1px solid var(--kodus-border);
}

/* ── Verbose-dependent assistant messages ──
   Short messages (<150 chars): inline caption in pill flow by default, full bubble in verbose.
   Long messages: always full bubble (no special class). */
/* Inline captions always hidden — redundant with verbose bubbles */
.conv-assistant-inline {
    display: none !important;
}
/* Assistant messages: always visible when standalone, but inside tc-flow they
   should only show in verbose mode to keep the pill stream compact. */
.conv-assistant-verbose {
    display: block;
    width: 100%;
}
.tc-flow > .conv-assistant-verbose {
    display: none;
    flex-basis: 100%;
    min-width: 0;
}
.kodus-terminal.verbose-active .tc-flow > .conv-assistant-verbose {
    display: block;
    flex-basis: 100%;
    margin: 4px 0;
}

/* ── Inline code in assistant messages ── */
.tc-inline-code {
    display: inline;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    font-family: var(--kodus-font-mono);
    font-size: 0.88em;
    color: var(--kodus-accent-text);
}

.tc-code-block {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--kodus-border);
    font-family: var(--kodus-font-mono);
    font-size: 0.76rem;
    line-height: 1.6;
    overflow-x: auto;
    color: var(--kodus-text-secondary);
    white-space: pre;
}

.tc-heading {
    display: block;
    font-weight: 600;
    color: var(--kodus-text);
}

.tc-h1 { font-size: 1.05em; margin: 4px 0; }
.tc-h2 { font-size: 0.95em; margin: 3px 0; }
.tc-h3 { font-size: 0.88em; margin: 2px 0; }

.tc-list-bullet {
    color: var(--kodus-accent);
    margin-right: 4px;
}

/* ── Improved assistant message styling ── */
.kodus-terminal .conv-assistant {
    margin-right: auto;
    margin-left: 0;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--kodus-border-light);
    padding: 12px 16px;
    position: relative;
    isolation: isolate;
    transition: background 0.2s, border-color 0.2s;
    border-radius: 1rem;
}
.kodus-terminal .conv-assistant:hover {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 148, 96, 0.5) 100%);
    border-color: rgba(92, 255, 190, 1);
}

.kodus-terminal .conv-assistant .conv-body {
    color: var(--kodus-text);
    font-size: 0.82rem;
    line-height: 1.7;
    font-family: var(--kodus-font-sans);
    white-space: pre-wrap;
}

.kodus-terminal .conv-assistant .conv-body strong {
    color: var(--kodus-accent-text);
    font-weight: 600;
}

/* ── Mobile responsive adjustments ── */
@media (max-width: 480px) {
    .tc-card-header {
        padding: 5px 8px;
        gap: 6px;
    }

    .tc-pill {
        padding: 2px 6px;
        font-size: 0.62rem;
    }

    .tc-pill-icon {
        display: none;
    }

    .tc-card-args {
        font-size: 0.66rem;
    }

    .tc-result-code {
        font-size: 0.66rem;
    }

    .tc-result-ln {
        width: 28px;
        padding-right: 6px;
    }

    .tc-complete-card {
        padding: 10px 12px;
        gap: 10px;
    }

    .tc-complete-icon {
        width: 24px;
        height: 24px;
        font-size: 0.78rem;
    }

    .tc-warning-line,
    .tc-error-line {
        font-size: 0.68rem;
        padding: 5px 8px;
    }

    .iteration-badge {
        min-width: 18px;
        height: 16px;
        font-size: 0.55rem;
        padding: 0 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-spinner {
        animation: none;
    }

    .tc-card {
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   THREAD SIDEBAR
   ═══════════════════════════════════════════════════════════ */

.thread-sidebar {
    width: 220px;
    min-width: 220px;
    background: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.25s var(--kodus-ease), min-width 0.25s var(--kodus-ease), opacity 0.2s;
    position: relative;
    z-index: 2;
}

.thread-sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
    opacity: 0;
    pointer-events: none;
}

/* Only show thread sidebar when console tab is active */
.thread-sidebar.hidden-tab {
    display: none;
}

.thread-sidebar-header {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.thread-new-btn {
    flex: 1;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-family: var(--kodus-font-sans);
    font-weight: 600;
    color: var(--kodus-accent-text);
    background: var(--kodus-accent-dim);
    border: 1px solid var(--kodus-border-accent);
    border-radius: var(--kodus-radius);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    text-align: center;
}

.thread-new-btn:hover {
    background: rgba(0, 148, 96, 0.2);
    border-color: var(--kodus-accent);
    box-shadow: 0 0 10px var(--kodus-accent-dim);
}

.thread-collapse-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--kodus-radius);
    color: var(--kodus-text-muted);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.thread-collapse-btn:hover {
    color: var(--kodus-text-secondary);
    background: var(--kodus-bg-hover);
}

.thread-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.thread-list::-webkit-scrollbar {
    width: 4px;
}

.thread-list::-webkit-scrollbar-track {
    background: transparent;
}

.thread-list::-webkit-scrollbar-thumb {
    background: var(--kodus-border-light);
    border-radius: 2px;
}

.thread-item {
    padding: 10px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}

.thread-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.thread-item.active {
    background: rgba(0, 148, 96, 0.06);
    border-left-color: var(--kodus-accent);
}

.thread-item-title {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--kodus-text);
    line-height: 1.3;
}

.thread-item.active .thread-item-title {
    color: var(--kodus-accent-text);
}

.thread-item-meta {
    font-size: 0.68rem;
    color: var(--kodus-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.thread-item-meta .thread-msg-count {
    background: var(--kodus-bg-elevated);
    padding: 0 5px;
    border-radius: 8px;
    font-size: 0.62rem;
    color: var(--kodus-text-muted);
    line-height: 1.5;
}

.thread-item.active .thread-item-meta .thread-msg-count {
    background: var(--kodus-accent-dim);
    color: var(--kodus-accent-text);
}

/* Thread item actions (rename/delete) — snapped to bottom-right */
.thread-item-actions {
    position: absolute;
    right: 6px;
    bottom: 4px;
    display: none;
    gap: 2px;
}

.thread-item:hover .thread-item-actions,
.thread-item.active .thread-item-actions,
.thread-item.bulk-selected .thread-item-actions {
    display: flex;
}

.thread-action-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kodus-bg-elevated);
    border: 1px solid var(--kodus-border);
    border-radius: 4px;
    color: var(--kodus-text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 0.65rem;
    transition: color 0.15s, background 0.15s;
    z-index: 10;
}

.thread-action-btn:hover {
    color: var(--kodus-text);
    background: var(--kodus-bg-hover);
}

.thread-action-btn.danger:hover {
    color: var(--kodus-red);
    background: var(--kodus-red-dim);
}

/* Bulk select mode */
.thread-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--kodus-bg-elevated);
    border-bottom: 1px solid var(--kodus-border);
    font-size: 0.72rem;
    color: var(--kodus-text-dim);
    position: sticky;
    top: 0;
    z-index: 20;
}
.thread-bulk-bar button {
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--kodus-border);
    background: var(--kodus-bg-input);
    color: var(--kodus-text);
    cursor: pointer;
    font-size: 0.68rem;
}
.thread-bulk-bar button.danger {
    background: var(--kodus-red-dim);
    border-color: var(--kodus-red-dim);
    color: var(--kodus-red);
}
.thread-bulk-bar button.danger:hover {
    background: rgba(239, 68, 68, 0.3);
}
.thread-select-cb {
    width: 14px;
    height: 14px;
    accent-color: var(--kodus-accent);
    cursor: pointer;
    display: none;
    flex-shrink: 0;
}
.thread-item.bulk-selected .thread-select-cb {
    display: inline-block;
}
.thread-item.bulk-selected {
    background: rgba(0, 148, 96, 0.08);
}

/* Inline rename input */
.thread-rename-input {
    width: 100%;
    background: var(--kodus-bg-input);
    border: 1px solid var(--kodus-border-accent);
    border-radius: 4px;
    color: var(--kodus-text);
    font-size: 0.82rem;
    font-family: var(--kodus-font-sans);
    padding: 2px 6px;
    outline: none;
}

.thread-rename-input:focus {
    border-color: var(--kodus-accent);
    box-shadow: 0 0 0 2px var(--kodus-accent-dim);
}

/* Thread expand btn in rail — pulses when sidebar is collapsed */
.thread-expand-btn {
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s, background 0.2s;
}

.thread-expand-btn.sidebar-visible {
    opacity: 1;
    color: var(--kodus-accent-text);
}

.thread-expand-btn.sidebar-collapsed {
    opacity: 1;
    color: var(--kodus-accent);
    background: var(--kodus-accent-dim);
    border-radius: 6px;
}

/* Empty thread list state */
.thread-list-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--kodus-text-muted);
    font-size: 0.78rem;
}

.thread-list-empty svg {
    display: block;
    margin: 0 auto 8px;
    opacity: 0.3;
}

/* ═══════════════════════════════════════════════════════════
   INSIGHTS VIEW — Sidebar + Detail layout (mirrors Rules)
   ═══════════════════════════════════════════════════════════ */

.insights-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Insights sidebar (left) */
.insights-sidebar {
    width: 240px;
    min-width: 240px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.insights-sidebar-header {
    flex-shrink: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--kodus-border);
}

.insights-nav {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.insights-nav::-webkit-scrollbar { width: 4px; }
.insights-nav::-webkit-scrollbar-track { background: transparent; }
.insights-nav::-webkit-scrollbar-thumb { background: var(--kodus-border-light); border-radius: 2px; }

.insights-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-family: var(--kodus-font-sans);
    color: var(--kodus-text-secondary);
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-align: left;
}

.insights-nav-btn:hover {
    background: var(--kodus-bg-hover);
    color: var(--kodus-text);
}

.insights-nav-btn.active {
    background: rgba(0, 148, 96, 0.05);
    border-left-color: var(--kodus-accent);
    color: var(--kodus-accent-text);
}

.insights-nav-btn svg {
    flex-shrink: 0;
    color: inherit;
}

.insights-nav-divider {
    height: 1px;
    background: var(--kodus-border);
    margin: 6px 12px;
}

.insights-nav-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--kodus-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px 2px;
}

/* Insights detail (right) */
.insights-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px 20px;
    min-width: 0;
}

.insights-detail::-webkit-scrollbar { width: 6px; }
.insights-detail::-webkit-scrollbar-track { background: transparent; }
.insights-detail::-webkit-scrollbar-thumb { background: var(--kodus-border-light); border-radius: 3px; }

.insights-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 12px;
    color: var(--kodus-text-muted);
}

.insights-detail-empty-icon { opacity: 0.3; }
.insights-detail-empty-text { font-size: 0.85rem; }

/* Memory table */
.memory-table {
    width: 100%;
    border-collapse: collapse;
}

.memory-table th {
    text-align: left;
    padding: 6px 10px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--kodus-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--kodus-border);
}

.memory-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--kodus-border);
    font-size: 0.78rem;
    vertical-align: top;
}

.memory-table tr {
    cursor: pointer;
    transition: background 0.15s;
}

.memory-table tr:hover {
    background: var(--kodus-bg-hover);
}

.memory-key {
    font-family: var(--kodus-font-mono);
    font-weight: 600;
    color: var(--kodus-accent-text);
    font-size: 0.75rem;
}

.memory-value {
    color: var(--kodus-text-secondary);
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.memory-detail-value {
    font-family: var(--kodus-font-mono);
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--kodus-text);
    background: var(--kodus-bg-terminal);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    padding: 14px 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Scratchpad & onboarding */
.scratchpad-content,
.onboarding-content {
    font-family: var(--kodus-font-mono);
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--kodus-text-secondary);
    background: var(--kodus-bg-terminal);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    padding: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: calc(100vh - 200px);
    max-height: calc(100dvh - 200px);
    overflow-y: auto;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
}

/* Report list */
.report-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.report-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--kodus-radius);
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
}

.report-item:hover {
    background: var(--kodus-bg-hover);
    border-color: var(--kodus-border);
}

.report-item-date {
    font-family: var(--kodus-font-mono);
    font-size: 0.68rem;
    color: var(--kodus-text-dim);
    flex-shrink: 0;
    min-width: 80px;
}

.report-item-title {
    font-size: 0.82rem;
    color: var(--kodus-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-item-size {
    font-size: 0.65rem;
    color: var(--kodus-text-muted);
    flex-shrink: 0;
}

/* Report viewer modal content */
.report-viewer-content {
    font-family: var(--kodus-font-mono);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--kodus-text-secondary);
    background: var(--kodus-bg-terminal);
    padding: 16px 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 200px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Section header for insights detail */
.insights-section-header {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kodus-text);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kodus-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.insights-section-header .kodus-badge {
    font-size: 0.6rem;
}


/* ═══════════════════════════════════════════════════════════
   CONFIG DASHBOARD — Stats + Tool Inventory
   ═══════════════════════════════════════════════════════════ */

/* Tool category sections */
/* Template selector buttons */
.template-btn.active {
    background: var(--kodus-accent);
    color: var(--kodus-bg);
    border-color: var(--kodus-accent);
}

/* Tool inventory grid — 3 columns on wide screens */
.tool-categories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 640px) {
    .tool-categories-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 1024px) {
    .tool-categories-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.tool-category {
    margin-bottom: 0;
}

.tool-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--kodus-bg-secondary);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.tool-category-header:hover {
    background: var(--kodus-bg-hover);
    border-color: var(--kodus-border-light);
}

.tool-category-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kodus-text);
    flex: 1;
}

.tool-category-count {
    font-size: 0.62rem;
    font-family: var(--kodus-font-mono);
    color: var(--kodus-text-dim);
    background: var(--kodus-bg-elevated);
    padding: 1px 6px;
    border-radius: 8px;
}

.tool-category-chevron {
    font-size: 0.65rem;
    color: var(--kodus-text-dim);
    transition: transform 0.2s var(--kodus-ease);
}

.tool-category.open .tool-category-chevron {
    transform: rotate(90deg);
}

.tool-category-body {
    display: none;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--kodus-border);
    margin-left: 8px;
    margin-top: 4px;
}

.tool-category.open .tool-category-body {
    display: block;
}

.tool-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 8px;
    font-size: 0.75rem;
}

.tool-item-name {
    font-family: var(--kodus-font-mono);
    color: var(--kodus-accent-text);
    flex-shrink: 0;
    font-weight: 500;
}

.tool-item-desc {
    color: var(--kodus-text-dim);
    font-size: 0.72rem;
}

/* Speed optimization list */
.speed-opt-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.speed-opt-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--kodus-green-dim);
    color: var(--kodus-green);
    border: 1px solid rgba(34, 197, 94, 0.12);
    cursor: default;
    transition: transform 0.15s;
}

.speed-opt-tag:hover {
    transform: translateY(-1px);
}

.speed-opt-check {
    font-size: 0.6rem;
}

/* CLI flags grid */
.cli-flags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}

.cli-flag-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 0;
}

.cli-flag-name {
    font-family: var(--kodus-font-mono);
    font-size: 0.72rem;
    color: var(--kodus-accent-text);
    background: var(--kodus-bg-elevated);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--kodus-border);
    flex-shrink: 0;
}

.cli-flag-desc {
    font-size: 0.68rem;
    color: var(--kodus-text-dim);
}


/* ═══════════════════════════════════════════════════════════
   FOOTER — Cost & Confidence
   ═══════════════════════════════════════════════════════════ */

.footer-cost {
    font-family: var(--kodus-font-mono);
    transition: color 0.3s;
}

.footer-cost.cost-low { color: var(--kodus-green); }
.footer-cost.cost-med { color: var(--kodus-yellow); }
.footer-cost.cost-high { color: var(--kodus-red); }

.footer-balance {
    font-family: var(--kodus-font-mono);
    font-weight: 600;
    transition: color 0.3s;
}
/* Colors are inverse of cost: more credits = green, running low = red */
.footer-balance.balance-high { color: var(--kodus-green); }
.footer-balance.balance-med  { color: var(--kodus-yellow); }
.footer-balance.balance-low  { color: var(--kodus-red); }

/* ═══════════════════════════════════════════════════════════
   Low-balance banner (chat UI, above the input)
   ═══════════════════════════════════════════════════════════ */
.kodus-low-balance-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.10);
    border-bottom: 1px solid rgba(239, 68, 68, 0.30);
    color: #fca5a5;
    font-size: 0.82rem;
    position: sticky;
    top: 0;
    z-index: 50;
}
.kodus-low-balance-icon {
    font-size: 1.1rem;
    flex: 0 0 auto;
}
.kodus-low-balance-banner > span:nth-child(2) {
    flex: 1;
    color: var(--kodus-text);
}
.kodus-low-balance-banner > span:nth-child(2) b {
    color: #fca5a5;
}
.kodus-low-balance-close {
    background: transparent;
    border: 0;
    color: var(--kodus-text-dim);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.kodus-low-balance-close:hover { color: var(--kodus-text); }

.footer-confidence {
    font-family: var(--kodus-font-mono);
    font-weight: 600;
    transition: color 0.3s;
}

.footer-confidence.conf-high { color: var(--kodus-green); }
.footer-confidence.conf-med { color: var(--kodus-yellow); }
.footer-confidence.conf-low { color: var(--kodus-red); }

/* Session card cost badges */
.cost-badge {
    font-family: var(--kodus-font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
}

.cost-badge-green {
    color: var(--kodus-green);
    background: var(--kodus-green-dim);
}

.cost-badge-yellow {
    color: var(--kodus-yellow);
    background: var(--kodus-yellow-dim);
}

.cost-badge-red {
    color: var(--kodus-red);
    background: var(--kodus-red-dim);
}

/* Dependency graph code block */
.dep-graph-code {
    font-family: var(--kodus-font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--kodus-text-secondary);
    background: var(--kodus-bg-terminal);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    padding: 14px 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    max-height: 60vh;
}


/* Mobile: thread sidebar as overlay */
@media (max-width: 768px) {
    .thread-sidebar {
        position: fixed;
        top: calc(var(--kodus-header-h) + env(safe-area-inset-top, 0px));
        left: 0;
        bottom: calc(44px + var(--kodus-footer-h) + env(safe-area-inset-bottom, 0px));
        width: 260px;
        min-width: 260px;
        z-index: 150;
        box-shadow: var(--kodus-shadow-lg);
        display: none;
    }

    .thread-sidebar.mobile-open {
        display: flex;
    }

    .thread-sidebar.collapsed {
        display: none;
    }

    .thread-sidebar.hidden-tab {
        display: none;
    }

    .thread-collapse-btn {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   FEATURE 2: SCRATCHPAD EDITOR
   ═══════════════════════════════════════════════════════════ */

.scratchpad-editor {
    width: 100%;
    min-height: 300px;
    padding: 1rem;
    font-family: var(--kodus-font-mono);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--kodus-text-secondary);
    background: var(--kodus-bg-terminal);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    resize: vertical;
    outline: none;
    transition: border-color var(--kodus-transition), box-shadow var(--kodus-transition);
}

.scratchpad-editor:focus {
    border-color: var(--kodus-accent);
    box-shadow: 0 0 0 3px var(--kodus-accent-dim);
}


/* ═══════════════════════════════════════════════════════════
   FEATURE 3: MEMORY DELETE BUTTON
   ═══════════════════════════════════════════════════════════ */

.memory-delete-btn {
    background: none;
    border: none;
    color: var(--kodus-text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color var(--kodus-transition), background var(--kodus-transition);
    line-height: 1;
}

.memory-delete-btn:hover {
    color: var(--kodus-red);
    background: var(--kodus-red-dim);
}


/* ═══════════════════════════════════════════════════════════
   FEATURE 6: VISUAL DIFF VIEWER
   ═══════════════════════════════════════════════════════════ */

.diff-viewer-content {
    font-family: var(--kodus-font-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    overflow-x: auto;
}

.diff-header {
    display: flex;
    border-bottom: 1px solid var(--kodus-border);
    background: var(--kodus-bg-elevated);
}

.diff-label {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.72rem;
    font-weight: 600;
}

.diff-old-label {
    color: var(--kodus-red);
    border-right: 1px solid var(--kodus-border);
}

.diff-new-label {
    color: var(--kodus-green);
}

.diff-body {
    max-height: 65vh;
    overflow-y: auto;
}

.diff-row {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.diff-line-num {
    min-width: 36px;
    padding: 1px 6px;
    text-align: right;
    color: var(--kodus-text-muted);
    background: var(--kodus-bg-secondary);
    border-right: 1px solid var(--kodus-border);
    user-select: none;
    flex-shrink: 0;
}

.diff-old-cell,
.diff-new-cell {
    flex: 1;
    padding: 1px 8px;
    white-space: pre-wrap;
    word-break: break-all;
    min-width: 0;
}

.diff-old-cell {
    border-right: 1px solid var(--kodus-border);
}

.diff-same {
    color: var(--kodus-text-dim);
}

.diff-changed .diff-old-cell {
    background: rgba(239, 68, 68, 0.08);
    color: var(--kodus-red);
}

.diff-changed .diff-new-cell {
    background: rgba(34, 197, 94, 0.08);
    color: var(--kodus-green);
}

.diff-added .diff-new-cell {
    background: rgba(34, 197, 94, 0.1);
    color: var(--kodus-green);
}

.diff-removed .diff-old-cell {
    background: rgba(239, 68, 68, 0.1);
    color: var(--kodus-red);
}


/* ═══════════════════════════════════════════════════════════
   FEATURE 8: STALE RULES
   ═══════════════════════════════════════════════════════════ */

.stale-rule-item {
    padding: 10px 12px;
    border-bottom: 1px solid var(--kodus-border);
    transition: background var(--kodus-transition);
}

.stale-rule-item:hover {
    background: var(--kodus-bg-hover);
}

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


/* ═══════════════════════════════════════════════════════════
   FEATURE 11: VETERAN PERSONA BADGE
   ═══════════════════════════════════════════════════════════ */

.persona-veteran {
    font-size: 0.65rem;
    color: var(--kodus-yellow);
    font-weight: 600;
    margin-left: 4px;
}


/* ═══════════════════════════════════════════════════════════
   FEATURE 12: TOOL BADGES
   ═══════════════════════════════════════════════════════════ */

.agent-run-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

.tool-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 0.6rem;
    font-family: var(--kodus-font-mono);
    color: var(--kodus-text-dim);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--kodus-border);
    border-radius: 3px;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
   FEATURE 13: WORKING DIR IN FOOTER
   ═══════════════════════════════════════════════════════════ */

.footer-workdir {
    font-family: var(--kodus-font-mono);
    color: var(--kodus-text-muted);
    font-size: 0.65rem;
    margin-right: 6px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer-workdir:not(:empty)::after {
    content: '|';
    margin-left: 6px;
    color: var(--kodus-border-light);
}


/* ═══════════════════════════════════════════════════════════
   FEATURE 14: NIGHT SHIFT INFO
   ═══════════════════════════════════════════════════════════ */

.night-shift-info {
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--kodus-bg-elevated);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
}

.night-shift-note {
    font-size: 0.78rem;
    color: var(--kodus-text-secondary);
}

.night-shift-note code {
    font-family: var(--kodus-font-mono);
    font-size: 0.72rem;
    color: var(--kodus-accent-text);
    background: var(--kodus-accent-dim);
    padding: 1px 5px;
    border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════
   INSIGHTS code blocks
   ═══════════════════════════════════════════════════════════ */

.insights-detail code {
    font-family: var(--kodus-font-mono);
    font-size: 0.72rem;
    color: var(--kodus-accent-text);
    background: var(--kodus-accent-dim);
    padding: 1px 5px;
    border-radius: 3px;
}

/* ── CLI Relay Thread Badges ────────────────────────────── */

.thread-relay-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    margin-left: 6px;
    vertical-align: middle;
}

.thread-section-header {
    padding: 8px 14px 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kodus-text-dim);
    opacity: 0.6;
}

/* ── Review + Strategy pills — use .tc-card base, just override border/hover colors ── */
.tc-card-review.tc-card-settled { border-color: rgba(147, 51, 234, 0.8); }
.tc-card-review.tc-card-settled:hover {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(147, 51, 234, 0.5) 100%);
    border-color: rgba(192, 132, 252, 1);
}
.tc-card-review-issue.tc-card-settled { border-color: rgba(239, 68, 68, 0.8); }
.tc-card-review-issue.tc-card-settled:hover {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(239, 68, 68, 0.5) 100%);
    border-color: rgba(248, 113, 113, 1);
}
.tc-card-strategy.tc-card-settled { border-color: rgba(234, 179, 8, 0.8); }
.tc-card-strategy.tc-card-settled:hover {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(234, 179, 8, 0.5) 100%);
    border-color: rgba(251, 191, 36, 1);
}

/* ── Review/Strategy modal (chat-style) ── */
.war-room-modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.war-room-modal.active { opacity: 1; }
.war-room-modal-content {
  background: var(--kodus-surface, #1a1a2e); border: 1px solid var(--kodus-border, #2a2a4a);
  border-radius: 12px; width: 90dvw; max-width: 700px; max-height: 85dvh;
  display: flex; flex-direction: column; overflow: hidden;
}
.war-room-modal-header {
  padding: 14px 18px; border-bottom: 1px solid var(--kodus-border, #2a2a4a);
  display: flex; align-items: center; gap: 10px;
}
.war-room-modal-header .modal-type-badge {
  padding: 2px 8px; border-radius: 8px; font-size: 0.7rem; font-weight: 600;
}
.war-room-modal-header .modal-type-badge.review-badge {
  background: rgba(147, 51, 234, 0.2); color: #c084fc;
}
.war-room-modal-header .modal-type-badge.strategy-badge {
  background: rgba(234, 179, 8, 0.2); color: #fbbf24;
}
.war-room-modal-header .modal-close {
  margin-left: auto; cursor: pointer; color: var(--kodus-text-muted); font-size: 1.2rem;
  background: none; border: none; padding: 4px 8px;
}
.war-room-modal-header .modal-close:hover { color: var(--kodus-text); }
.war-room-modal-body {
  padding: 16px 18px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 12px;
}
/* Chat bubble for each model turn */
.war-room-turn {
  display: flex; flex-direction: column; gap: 4px;
}
.war-room-turn-header {
  display: flex; align-items: center; gap: 6px; font-size: 0.72rem;
}
.war-room-turn-model {
  font-weight: 600; padding: 1px 6px; border-radius: 6px;
  font-size: 0.68rem;
}
.war-room-turn-content {
  background: var(--kodus-bg, #0f0f23); border: 1px solid var(--kodus-border, #2a2a4a);
  border-radius: 8px; padding: 10px 14px; font-size: 0.78rem;
  line-height: 1.5; color: var(--kodus-text, #e2e8f0);
  white-space: pre-wrap;
}
/* Consensus banner */
.war-room-consensus {
  background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px; padding: 12px 16px; text-align: center;
  color: #4ade80; font-weight: 600; font-size: 0.82rem;
}

/* ──────────────────────────────────────────────
   Legal footer on auth pages (login / register)
   ────────────────────────────────────────────── */
.legal-footer {
    width: 100%;
    max-width: 980px;
    margin: 1.5rem auto 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
    position: relative;
    z-index: 2;
}
.legal-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 0.55rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #737373;
    margin-bottom: 0.5rem;
}
.legal-footer-links a {
    color: #a3a3a3;
    text-decoration: none;
    transition: color 0.15s ease;
}
.legal-footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}
.legal-footer-links span {
    color: #404040;
    user-select: none;
}
.legal-footer-copy {
    font-size: 0.7rem;
    color: #ffffff;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT TOUR
   Spotlight + tooltip system for first-run product tour.
   Boots from kodus_user.settings.tour, replayable via #tourHelpBtn.
   ═══════════════════════════════════════════════════════════ */

/* Help (?) button in header — left of user avatar */
.kodus-header-help {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--kodus-bg-elevated);
    border: 1px solid var(--kodus-border);
    color: var(--kodus-text-dim);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    margin-right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--kodus-transition), border-color var(--kodus-transition),
                box-shadow var(--kodus-transition), transform var(--kodus-transition);
}
.kodus-header-help:hover {
    color: var(--kodus-accent-text);
    border-color: var(--kodus-accent-dim);
    box-shadow: 0 0 0 2px var(--kodus-accent-dim);
}
.kodus-header-help:active { transform: scale(0.95); }
.kodus-header-help.pulse-once {
    animation: kodus-tour-help-pulse 1.4s ease-out 3;
}
@keyframes kodus-tour-help-pulse {
    0%   { box-shadow: 0 0 0 0 var(--kodus-accent-glow); }
    50%  { box-shadow: 0 0 0 7px rgba(0, 148, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 148, 96, 0); }
}

/* Mobile — shrink slightly */
@media (max-width: 640px) {
    .kodus-header-help { width: 22px; height: 22px; font-size: 0.7rem; margin-right: 0.35rem; }
}

/* Full-screen overlay; the spotlight cuts a hole via box-shadow */
.kodus-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
}
.kodus-tour-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Click-blocker — fully transparent so the surrounding UI stays readable.
   It just catches clicks so the page can't be re-arranged out from under
   the spotlight while the tour is running. */
.kodus-tour-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}

/* Spotlight is just an accent ring + soft glow around the target.
   NO dimming, NO blur — users need to SEE the surrounding UI to learn it. */
.kodus-tour-spotlight {
    position: absolute;
    border-radius: 8px;
    border: 2px solid var(--kodus-accent);
    box-shadow: 0 0 0 4px var(--kodus-accent-dim),
                0 0 28px 6px var(--kodus-accent-glow);
    pointer-events: none;
    transition: top 240ms cubic-bezier(.4, 0, .2, 1),
                left 240ms cubic-bezier(.4, 0, .2, 1),
                width 240ms cubic-bezier(.4, 0, .2, 1),
                height 240ms cubic-bezier(.4, 0, .2, 1),
                border-radius 240ms ease;
}
.kodus-tour-spotlight.spotlight-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid var(--kodus-accent);
    opacity: 0.45;
    animation: kodus-tour-spot-pulse 1.6s ease-out infinite;
    pointer-events: none;
}
@keyframes kodus-tour-spot-pulse {
    0%   { transform: scale(1); opacity: 0.45; }
    100% { transform: scale(1.18); opacity: 0; }
}
/* No-target step (welcome / end-card) — hide the ring; tooltip centers itself */
.kodus-tour-spotlight.no-target {
    border: 0;
    box-shadow: none;
    width: 0; height: 0;
}
.kodus-tour-spotlight.no-target.spotlight-pulse::after { display: none; }

/* Tooltip — positioned next to the spotlight */
.kodus-tour-tooltip {
    position: absolute;
    z-index: 401;
    width: 320px;
    max-width: calc(100vw - 2rem);
    background: var(--kodus-bg-card);
    border: 1px solid var(--kodus-border-light);
    border-radius: var(--kodus-radius-lg);
    box-shadow: var(--kodus-shadow-lg), 0 0 40px rgba(0, 148, 96, 0.12);
    color: var(--kodus-text);
    font-size: 0.85rem;
    line-height: 1.45;
    overflow: hidden;
    transition: top 240ms cubic-bezier(.4, 0, .2, 1),
                left 240ms cubic-bezier(.4, 0, .2, 1);
}
.kodus-tour-tooltip.centered {
    /* Welcome / end-card centered placement */
    inset: 0;
    margin: auto;
    width: 380px;
    max-height: 80vh;
    height: max-content;
    position: fixed;
}

/* Arrow */
.kodus-tour-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--kodus-bg-card);
    border-left: 1px solid var(--kodus-border-light);
    border-top: 1px solid var(--kodus-border-light);
    transform: rotate(45deg);
}
.kodus-tour-tooltip[data-pos="top"]    .kodus-tour-arrow { bottom: -7px; left: 50%; margin-left: -6px; transform: rotate(225deg); }
.kodus-tour-tooltip[data-pos="bottom"] .kodus-tour-arrow { top:    -7px; left: 50%; margin-left: -6px; transform: rotate(45deg); }
.kodus-tour-tooltip[data-pos="left"]   .kodus-tour-arrow { right:  -7px; top:  50%; margin-top:  -6px; transform: rotate(135deg); }
.kodus-tour-tooltip[data-pos="right"]  .kodus-tour-arrow { left:   -7px; top:  50%; margin-top:  -6px; transform: rotate(-45deg); }
.kodus-tour-tooltip.centered .kodus-tour-arrow { display: none; }

/* Header: chapter dots + close */
.kodus-tour-tt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.95rem 0.4rem;
    border-bottom: 1px solid var(--kodus-border);
}
.kodus-tour-chapters {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}
.kodus-tour-chap-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kodus-border-light);
    transition: background var(--kodus-transition);
}
.kodus-tour-chap-dot.done   { background: var(--kodus-accent-dim); }
.kodus-tour-chap-dot.active { background: var(--kodus-accent); box-shadow: 0 0 6px var(--kodus-accent-glow); }
.kodus-tour-tt-close {
    background: none;
    border: 0;
    color: var(--kodus-text-dim);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    margin-left: 0.5rem;
    padding: 0;
    transition: color var(--kodus-transition);
}
.kodus-tour-tt-close:hover { color: var(--kodus-text); }

/* Body */
.kodus-tour-tt-body {
    padding: 0.7rem 0.95rem;
}
.kodus-tour-tt-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kodus-text);
    margin: 0 0 0.35rem;
}
.kodus-tour-tt-text {
    color: var(--kodus-text-dim);
    margin: 0;
}
.kodus-tour-tt-text + .kodus-tour-tt-text {
    margin-top: 0.4rem;
}
.kodus-tour-tt-text code {
    background: var(--kodus-bg-input);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--kodus-accent-text);
    font-family: var(--kodus-font-mono);
    font-size: 0.78rem;
}
.kodus-tour-tt-meta {
    margin-top: 0.55rem;
    font-size: 0.72rem;
    color: var(--kodus-text-dim);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Footer: nav buttons + step counter */
.kodus-tour-tt-footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    border-top: 1px solid var(--kodus-border);
    background: var(--kodus-bg-secondary);
}
.kodus-tour-tt-counter {
    font-size: 0.7rem;
    color: var(--kodus-text-dim);
    margin-right: auto;
    font-variant-numeric: tabular-nums;
}
.kodus-tour-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--kodus-text-dim);
    padding: 4px 9px;
    font-size: 0.75rem;
    border-radius: 5px;
    cursor: pointer;
    transition: color var(--kodus-transition), background var(--kodus-transition),
                border-color var(--kodus-transition);
}
.kodus-tour-btn:hover {
    color: var(--kodus-text);
    background: var(--kodus-bg-hover);
}
.kodus-tour-btn-primary {
    background: var(--kodus-accent);
    color: #fff;
    border-color: var(--kodus-accent);
    font-weight: 600;
}
.kodus-tour-btn-primary:hover {
    background: var(--kodus-accent-hover);
    color: #fff;
    border-color: var(--kodus-accent-hover);
}
.kodus-tour-btn-ghost {
    color: var(--kodus-text-dim);
    border-color: var(--kodus-border);
}
.kodus-tour-btn-ghost:hover {
    border-color: var(--kodus-border-light);
}
.kodus-tour-btn-danger { color: #ff6b6b; }
.kodus-tour-btn-danger:hover { color: #ff8a8a; background: rgba(255, 107, 107, 0.1); }

/* Welcome / end-card body — taller and richer */
.kodus-tour-tooltip.centered .kodus-tour-tt-body {
    padding: 1.1rem 1.25rem 1rem;
}
.kodus-tour-tooltip.centered .kodus-tour-tt-title {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}
.kodus-tour-tooltip.centered .kodus-tour-tt-text {
    font-size: 0.85rem;
}

/* Demo pills/cards — these classes match what the seeded thread renders.
   Defined here so they stay consistent even if the live runtime renderer
   changes. They also have to look at-rest correct (no spinner motion etc). */
.tc-card[data-demo="1"] {
    background: var(--kodus-bg-input);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    padding: 0.5rem 0.75rem;
    margin: 0.4rem 0;
    font-family: var(--kodus-font-mono);
    font-size: 0.78rem;
}
.tc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--kodus-text);
    font-weight: 600;
}
.tc-card[data-demo="1"] .tc-card-tool { color: var(--kodus-accent-text); }
.tc-card[data-demo="1"] .tc-card-status { color: var(--kodus-accent); }
.tc-card[data-demo="1"] .tc-card-body { color: var(--kodus-text-dim); margin-top: 0.25rem; }
.tc-card[data-demo="1"].tc-card-running .tc-card-status { color: #ffae42; }
.tc-card[data-demo="1"].tc-card-settled { border-color: var(--kodus-accent-dim); }

.todo-bar[data-demo="1"] {
    background: var(--kodus-bg-input);
    border: 1px solid var(--kodus-border);
    border-radius: var(--kodus-radius);
    padding: 0.45rem 0.65rem;
    margin: 0.4rem 0;
    font-size: 0.78rem;
}
.todo-bar[data-demo="1"] .todo-item { color: var(--kodus-text-dim); padding: 1px 0; }
.todo-bar[data-demo="1"] .todo-item.todo-done   { color: var(--kodus-accent-text); text-decoration: line-through; opacity: 0.7; }
.todo-bar[data-demo="1"] .todo-item.todo-done::before   { content: '✓ '; }
.todo-bar[data-demo="1"] .todo-item.todo-active { color: var(--kodus-text); font-weight: 600; }
.todo-bar[data-demo="1"] .todo-item.todo-active::before { content: 'â–¸ '; color: var(--kodus-accent); }
.todo-bar[data-demo="1"] .todo-item:not(.todo-done):not(.todo-active)::before { content: 'â - ‹ '; }

.agent-pill[data-demo="1"] {
    display: inline-block;
    margin: 0.35rem 0.3rem 0 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid;
    cursor: pointer;
}
.agent-pill-review[data-demo="1"]   { color: #6fb3ff; border-color: rgba(111,179,255,0.4); background: rgba(111,179,255,0.08); }
.agent-pill-strategy[data-demo="1"] { color: #c08bff; border-color: rgba(192,139,255,0.4); background: rgba(192,139,255,0.08); }
.agent-pill-consult[data-demo="1"]  { color: var(--kodus-text-dim); border-color: var(--kodus-border-light); background: var(--kodus-bg-input); cursor: default; }
.agent-pill-consult[data-demo="1"] .spinner-dot {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--kodus-accent); margin-right: 4px; vertical-align: 1px;
    animation: kodus-tour-dot 1s ease-in-out infinite;
}
@keyframes kodus-tour-dot {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    .kodus-tour-spotlight,
    .kodus-tour-tooltip,
    .kodus-tour-overlay { transition: none; }
    .kodus-tour-spotlight.spotlight-pulse::after,
    .kodus-header-help.pulse-once,
    .agent-pill-consult[data-demo="1"] .spinner-dot { animation: none; }
}


/* Tour help-button popover menu — anchored under #tourHelpBtn */
.kodus-tour-help-menu {
    position: fixed;
    z-index: 410;
    width: 240px;
    background: var(--kodus-bg-card);
    border: 1px solid var(--kodus-border-light);
    border-radius: var(--kodus-radius-lg);
    box-shadow: var(--kodus-shadow-lg), 0 0 30px rgba(0, 148, 96, 0.1);
    padding: 0.4rem;
    color: var(--kodus-text);
    animation: kodus-tour-menu-in 140ms ease-out;
}
@keyframes kodus-tour-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kodus-tour-help-menu-head {
    padding: 0.5rem 0.65rem 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kodus-text-dim);
    font-weight: 600;
}
.kodus-tour-help-menu-divider {
    padding: 0.55rem 0.65rem 0.3rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--kodus-border);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kodus-text-dim);
    font-weight: 600;
}
.kodus-tour-help-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
    color: var(--kodus-text);
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    transition: background var(--kodus-transition), color var(--kodus-transition);
}
.kodus-tour-help-item:hover {
    background: var(--kodus-bg-hover);
    color: var(--kodus-accent-text);
}
.kodus-tour-help-item-primary {
    color: var(--kodus-accent-text);
    font-weight: 600;
}
.kodus-tour-help-num {
    flex: 0 0 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--kodus-bg-elevated);
    border: 1px solid var(--kodus-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--kodus-text-dim);
}
.kodus-tour-help-item:hover .kodus-tour-help-num {
    color: var(--kodus-accent-text);
    border-color: var(--kodus-accent-dim);
}
.kodus-tour-help-item-primary .kodus-tour-help-num {
    background: var(--kodus-accent);
    color: #fff;
    border-color: var(--kodus-accent);
}
.kodus-tour-help-label {
    flex: 1;
}

@media (prefers-reduced-motion: reduce) {
    .kodus-tour-help-menu { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   BUILD-NOW SPLASH OVERLAY
   Full-screen takeover while the conversation summarizer streams.
   Reuses kodus-tour-spot-pulse for the halo rings around the emblem.
   ════════════════════════════════════════════════════════════ */
.kodus-build-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
}
.kodus-build-overlay.visible {
    display: flex;
}
.kodus-build-card {
    width: min(92vw, 540px);
    background: var(--kodus-bg-card);
    border: 1px solid var(--kodus-border-light);
    border-radius: var(--kodus-radius-xl);
    padding: 2.25rem 2rem 1.75rem;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 60px var(--kodus-accent-dim);
    text-align: center;
    transform: scale(0.96);
    position: relative;
}
.kodus-build-card.error {
    border-color: var(--kodus-red);
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 60px var(--kodus-red-dim);
}
.kodus-build-emblem-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kodus-build-halo {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--kodus-accent);
    opacity: 0;
    pointer-events: none;
    animation: kodus-tour-spot-pulse 1.8s ease-out infinite;
}
.kodus-build-halo.delay {
    animation-delay: 0.9s;
}
.kodus-build-emblem {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 10px var(--kodus-accent-glow));
    animation: kodus-build-emblem-glow 2.4s ease-in-out infinite;
    transform-origin: 50% 50%;
    will-change: transform;
}
@keyframes kodus-build-emblem-glow {
    0%, 100% { filter: drop-shadow(0 0 8px var(--kodus-accent-glow)); }
    50%      { filter: drop-shadow(0 0 18px var(--kodus-accent-bright)); }
}
.kodus-build-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--kodus-text);
    margin-bottom: 0.4rem;
    letter-spacing: -0.005em;
}
.kodus-build-phase {
    font-size: 0.85rem;
    color: var(--kodus-text-dim);
    min-height: 1.2em;
    margin-bottom: 1.25rem;
}
.kodus-build-card.error .kodus-build-phase {
    color: var(--kodus-red);
}
.kodus-build-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.9rem;
}
.kodus-build-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(90deg, var(--kodus-accent) 0%, var(--kodus-accent-bright) 100%);
    border-radius: inherit;
    box-shadow: 0 0 12px var(--kodus-accent-glow);
}
.kodus-build-bar-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.18) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: -100% 0;
    animation: kodus-build-bar-shimmer 1.6s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes kodus-build-bar-shimmer {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}
.kodus-build-meta {
    font-size: 0.72rem;
    color: var(--kodus-text-dim);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    margin-bottom: 1rem;
    min-height: 1.1em;
}
.kodus-build-cancel {
    font-size: 0.78rem;
    color: var(--kodus-text-dim);
    background: transparent;
    border: 1px solid var(--kodus-border);
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    transition: color 140ms, border-color 140ms, background 140ms;
}
.kodus-build-cancel:hover {
    color: var(--kodus-text);
    border-color: var(--kodus-border-light);
    background: rgba(255,255,255,0.03);
}

.kodus-fw-picker {
    width: 100%;
    text-align: center;
}

.kodus-fw-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--kodus-text);
    margin-bottom: 1rem;
}

.kodus-fw-tabs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.kodus-fw-tab {
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--kodus-border);
    border-radius: 10px;
    padding: 0.55rem 1rem;
    cursor: pointer;
    transition: background 220ms ease, border-color 220ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 100px;
    overflow: hidden;
    will-change: transform, box-shadow;
}

/* A subtle sheen that sweeps across the tab on hover. */
.kodus-fw-tab::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 600ms ease;
}
.kodus-fw-tab:hover::before {
    left: 140%;
}

.kodus-fw-tab:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--kodus-border-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.kodus-fw-tab.active {
    background: rgba(var(--kodus-accent-rgb), 0.14);
    border-color: var(--kodus-accent);
    animation: kodus-fw-tab-pulse 2.4s ease-in-out infinite;
}

@keyframes kodus-fw-tab-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--kodus-accent-rgb), 0.35), 0 0 18px rgba(var(--kodus-accent-rgb), 0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--kodus-accent-rgb), 0),   0 0 28px rgba(var(--kodus-accent-rgb), 0.32); }
}

.kodus-fw-tab-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--kodus-text);
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.kodus-fw-pill {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--kodus-accent);
    background: rgba(var(--kodus-accent-rgb), 0.15);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Shimmering RECOMMENDED pill — a green light sweeps across endlessly. */
.kodus-fw-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(var(--kodus-accent-rgb), 0.45) 45%,
        rgba(92, 255, 190, 0.55) 50%,
        rgba(var(--kodus-accent-rgb), 0.45) 55%,
        transparent 100%);
    transform: translateX(-120%);
    animation: kodus-fw-pill-shimmer 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes kodus-fw-pill-shimmer {
    0%   { transform: translateX(-120%); }
    60%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

.kodus-fw-detail {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--kodus-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    text-align: left;
    margin-bottom: 1rem;
}

.kodus-fw-reason {
    font-size: 0.82rem;
    color: var(--kodus-text);
    margin-bottom: 0.65rem;
    line-height: 1.45;
}

.kodus-fw-pros, .kodus-fw-cons {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.kodus-fw-cons {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.kodus-fw-pro, .kodus-fw-con {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.4;
}

.kodus-fw-pro {
    color: #4ade80;
}

.kodus-fw-pro svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.kodus-fw-con {
    color: var(--kodus-text-dim);
}

.kodus-fw-con svg {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.5;
}

.kodus-fw-build-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #000;
    background: linear-gradient(135deg, var(--kodus-accent) 0%, var(--kodus-accent-bright) 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    border: none;
    border-radius: 10px;
    padding: 0.6rem 1.6rem;
    cursor: pointer;
    overflow: hidden;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease, background-position 600ms ease;
    animation: kodus-fw-build-glow 2.2s ease-in-out infinite;
    will-change: transform, box-shadow;
}

@keyframes kodus-fw-build-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--kodus-accent-rgb), 0.45), 0 6px 18px rgba(var(--kodus-accent-rgb), 0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(var(--kodus-accent-rgb), 0),   0 10px 26px rgba(var(--kodus-accent-rgb), 0.45); }
}

/* Light sweep across the button face. */
.kodus-fw-build-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 50%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: kodus-fw-build-sweep 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes kodus-fw-build-sweep {
    0%   { left: -120%; }
    55%  { left: 160%; }
    100% { left: 160%; }
}

.kodus-fw-build-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px) scale(1.03);
    background-position: 100% 50%;
}

.kodus-fw-build-btn:active {
    transform: translateY(0) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .kodus-build-halo,
    .kodus-build-emblem,
    .kodus-build-bar-shimmer,
    .kodus-fw-tab.active,
    .kodus-fw-pill::after,
    .kodus-fw-build-btn,
    .kodus-fw-build-btn::before { animation: none; }
}