/* ============================
   RESET & BASE
   ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:          #eef2f7;
    --surface:     #ffffff;
    --surface-2:   #f0f2f5;
    --surface-3:   #e4e9f0;
    --border:      #cdd4e0;
    --border-2:    #b0baca;
    --primary:     #2563eb;
    --primary-dim: rgba(37,99,235,.12);
    --danger:      #dc2626;
    --danger-dim:  rgba(220,38,38,.10);
    --success:     #059669;
    --success-dim: rgba(5,150,105,.10);
    --warn:        #d97706;
    --warn-dim:    rgba(217,119,6,.10);
    --text-1:      #0f172a;
    --text-2:      #293548;
    --text-3:      #4b5e78;
    --accent:      #2563eb;
    --radius:      10px;
    --radius-lg:   14px;
    --explore-history-w: 320px;
    --agent-panel-w: 320px;
    --pane-resizer-w: 8px;
    font-family: 'Inter', system-ui, sans-serif;

    /* theme-aware surface colors (overridden in dark mode section) */
    --chat-bg:       #ffffff;
    --chat-input-bg: #f4f4f5;
    --bubble-app-bg: #f3f4f6;
    --bubble-user-bg:#2563eb;
    --code-bg:       rgba(0,0,0,.05);
}

/* === DARK MODE === */
[data-theme="dark"] {
    --bg:          #0d1117;
    --surface:     #161b22;
    --surface-2:   #1c2129;
    --surface-3:   #21262d;
    --border:      #30363d;
    --border-2:    #3d444d;
    --primary:     #58a6ff;
    --primary-dim: rgba(88,166,255,.12);
    --danger:      #f85149;
    --danger-dim:  rgba(248,81,73,.12);
    --success:     #3fb950;
    --success-dim: rgba(63,185,80,.12);
    --warn:        #d29922;
    --warn-dim:    rgba(210,153,34,.12);
    --accent:      #58a6ff;
    --text-1:      #e6edf3;
    --text-2:      #8b949e;
    --text-3:      #6e7681;
    --chat-bg:       #0d1117;
    --chat-input-bg: #161b22;
    --bubble-app-bg: #1c2129;
    --bubble-user-bg:#1f6feb;
    --code-bg:       rgba(255,255,255,.06);
}
[data-theme="dark"] body {
    background: var(--bg);
    color: var(--text-1);
}

body {
    background: var(--bg);
    color: var(--text-1);
    line-height: 1.6;
    min-height: 100vh;
    overflow: hidden;
}

/* ============================
   APP SHELL
   ============================ */
body > .app {
    display: grid;
    grid-template-columns: var(--explore-history-w) 1fr;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

.pane-resizer {
    width: var(--pane-resizer-w);
    cursor: col-resize;
    background: transparent;
    position: relative;
}
.pane-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: var(--border);
}
.pane-resizer:hover::before,
.pane-resizer:focus-visible::before {
    background: var(--primary);
}
body.pane-resizing,
body.pane-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.exploration-layout {
    display: none;
}

.exploration-history {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

.exploration-history.history-collapsed {
    width: 44px;
    min-width: 44px;
    overflow: hidden;
}
/* When sidebar is collapsed, let the chat panel take full width */
body > .app.sidebar-collapsed {
    grid-template-columns: 44px 1fr;
}

.exploration-history.history-collapsed .agent-panel-history-panes {
    display: none;
}

.exploration-history.history-collapsed .agent-panel-history-header {
    display: flex;
    justify-content: center;
    padding: 8px 4px;
}

.exploration-history.history-collapsed .history-tabs-strip,
.exploration-history.history-collapsed #memory-count,
.exploration-history.history-collapsed #clear-sessions-btn {
    display: none !important;
}

.exploration-history.history-collapsed .history-header-actions {
    width: 100%;
    justify-content: center;
}

/* ============================
   AGENT PANEL (unified right column)
   ============================ */
.agent-panel {
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    position: relative;
}

.agent-panel.browser-strip-collapsed .agent-panel-header {
    padding-right: 52px;
}

.agent-panel.browser-strip-collapsed .agent-panel-form {
    padding-right: 52px;
}

.agent-panel .agent-panel-header {
    padding-right: calc(var(--explore-history-w) + 4px);
}

.agent-panel .agent-panel-form {
    padding-right: var(--explore-history-w);
}

.agent-panel-header {
    padding: 10px 18px;
    min-height: 51px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.agent-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-right: 14px;
}

.header-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2563eb, #6d28d9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.logo-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.3px;
}

/* Scrollable new-agent form — fills all space above history */
.agent-panel-form {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 16px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-bottom: 1px solid var(--border);
}
.agent-panel-form::-webkit-scrollbar       { width: 3px; }
.agent-panel-form::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

/* History section separator + tab bar */
.agent-panel-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    min-height: 51px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface-2);
}

/* Resizable history side window */
.history-resizer {
    width: 8px;
    cursor: col-resize;
    position: relative;
    background: transparent;
}

.history-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: var(--border);
}

.history-resizer:hover::before,
.history-resizer:focus-visible::before {
    background: var(--primary);
}

body.history-resizing,
body.history-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.agent-panel-history-panes {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--surface);
}
.agent-panel-history-panes .tab-pane {
    padding: 8px 6px;
    min-height: 0;
}

.exploration-history.history-collapsed .agent-panel-history-panes {
    display: none;
}

#history-collapse-btn {
    transition: transform 0.16s ease;
}

.exploration-history.history-collapsed #history-collapse-btn {
    transform: rotate(180deg);
}

/* Footer: start + stop */
.agent-panel-footer {
    padding: 13px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    background: var(--surface);
}
.history-tabs-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
}

.history-tab-btn {
    border: 1px solid var(--border-2);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.history-tab-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-dim);
}

.history-tab-btn.active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-dim);
}
/* ============================
   FORM ELEMENTS
   ============================ */
.form-section { display: flex; flex-direction: column; gap: 8px; }

.chat-dialog-section {
    background: var(--chat-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    gap: 8px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-browser-layout {
    display: flex;
    gap: 12px;
    min-height: 360px;
    flex: 1;
    min-width: 0;
}

.chat-browser-layout.browser-pane-collapsed {
    gap: 0;
}

.chat-browser-layout .chat-dialog-section {
    flex: 1 1 auto;
}

.chat-browser-layout.browser-pane-collapsed .chat-dialog-section {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.browser-preview-section {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--explore-history-w);
    min-width: var(--explore-history-w);
    background: var(--surface);
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    z-index: 5;
}

.browser-preview-section[data-visible="false"] {
    display: flex;
}

.browser-preview-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    min-height: 51px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.browser-preview-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.browser-preview-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    padding: 10px;
}

.browser-preview-refresh-btn {
    border: 1px solid var(--border-2);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.browser-preview-refresh-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-dim);
}

.browser-preview-stage {
    position: relative;
    flex: 1;
    min-height: 260px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top, rgba(37,99,235,.10), transparent 48%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
}

.browser-preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    display: block;
    background: #f8fafc;
}

.browser-preview-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    font-size: 0.86rem;
    color: var(--text-3);
    line-height: 1.5;
}

.browser-action-overlay {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(6px);
}

#browser-preview-collapse-btn {
    transition: transform 0.16s ease;
}

.browser-preview-section.browser-preview-collapsed {
    width: 44px;
    min-width: 44px;
}

.browser-preview-section.browser-preview-collapsed .browser-preview-header {
    justify-content: center;
    align-items: center;
    padding: 8px 4px;
    min-height: 51px;
    border-bottom: 1px solid var(--border);
}

.browser-preview-section.browser-preview-collapsed .browser-preview-titleblock,
.browser-preview-section.browser-preview-collapsed .browser-preview-refresh-btn,
.browser-preview-section.browser-preview-collapsed #browser-preview-fullscreen-btn,
.browser-preview-section.browser-preview-collapsed .browser-preview-body {
    display: none;
}

.browser-preview-section.browser-preview-collapsed .browser-preview-header-actions {
    width: 100%;
    justify-content: center;
}

.browser-preview-section.browser-preview-collapsed #browser-preview-collapse-btn {
    transform: rotate(180deg);
}

/* Fullscreen mode */
.browser-preview-section.browser-preview-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: 0;
    z-index: 9999;
    border: none;
    border-radius: 0;
}

.browser-preview-section.browser-preview-fullscreen .browser-preview-stage {
    min-height: 0;
}

.browser-preview-section.browser-preview-fullscreen #browser-preview-fullscreen-btn svg {
    transform: rotate(180deg);
}

.chat-dialog-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.chat-session-pill {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* chat-thread base — see Section 4 for authoritative styles */

@media (max-width: 1180px) {
    .chat-browser-layout {
        flex-direction: column;
    }

    .chat-browser-layout.browser-pane-collapsed {
        gap: 12px;
    }

    .chat-browser-layout.browser-pane-collapsed .chat-dialog-section {
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
        border-right: 1px solid var(--border);
    }

    .browser-preview-section {
        position: static;
        width: 100%;
        min-width: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .browser-preview-section.browser-preview-collapsed {
        width: 100%;
        min-width: 0;
        border-radius: var(--radius);
    }

    .agent-panel .agent-panel-header {
        padding-right: 18px;
    }

    .agent-panel .agent-panel-form {
        padding-right: 0;
    }

    .agent-panel.browser-strip-collapsed .agent-panel-header {
        padding-right: 18px;
    }

    .agent-panel.browser-strip-collapsed .agent-panel-form {
        padding-right: 0;
    }
}

.chat-thread-empty {
    font-size: 0.78rem;
    color: var(--text-3);
    line-height: 1.45;
}

/* chat-bubble base styles are in section 5 below */

/* chat-bubble-role, chat-bubble-text, chat-bubble-meta base styles are in section 5 below */

.briefing-feedback-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 2px 0 4px 40px;
}

/* Workflow step history — collapsible summary inside system bubble */
.workflow-steps-summary {
    display: block;
}
.workflow-steps-summary > summary {
    cursor: pointer;
    list-style: disclosure-closed;
    padding: 0;
    user-select: none;
}
.workflow-steps-summary[open] > summary { list-style: disclosure-open; }
.workflow-history-steps {
    margin: 8px 0 2px 22px;
    padding: 0;
    font-size: 0.80rem;
    color: #4b5e78;
    line-height: 1.5;
}
.workflow-history-steps li { margin: 2px 0; }
[data-theme="dark"] .workflow-history-steps { color: #8b949e; }
.briefing-fb-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 1rem;
    transition: background .15s;
}
.briefing-fb-btn:hover {
    background: var(--primary-dim);
}

/* Old .chat-bubble.user/app/system base overrides removed — section 5 handles all bubble styling */

/* ── Thinking / typing indicator ── */
.thinking-bubble .chat-bubble-content {
    padding: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}
.thinking-dots {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    height: 18px;
}
.thinking-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6b7280;
    animation: thinking-bounce 1.2s infinite ease-in-out;
}
.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% { opacity: 0.3; transform: translateY(0); }
    30%            { opacity: 1;   transform: translateY(-5px); }
}
[data-theme="dark"] .thinking-dots span {
    background: #9ca3af;
}

/* ── Agent activity bubbles (inline chat) ── */
.chat-bubble.agent-activity {
    max-width: 100%;
    margin: 0 !important;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    position: relative;
}
/* Vertical connector line between agent bubbles */
.chat-bubble.agent-activity::before {
    content: none;
}
/* First agent bubble: start line from center */
.chat-bubble.agent-activity:first-of-type::before,
.chat-bubble.agent-activity.agent-flow-start::before {
    top: 50%;
}
/* Last agent / completed: end line at center */
.chat-bubble.agent-activity.agent-flow-end::before {
    bottom: 50%;
}
/* Connector dot on the line */
.chat-bubble.agent-activity::after {
    content: none;
}
.chat-bubble.agent-activity.active::after {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
    animation: agent-dot-pulse 1.5s ease-in-out infinite;
}
.chat-bubble.agent-activity.completed::after {
    border-color: #10b981;
    background: #10b981;
}
.chat-bubble.agent-activity.error::after {
    border-color: #ef4444;
    background: #ef4444;
}
@keyframes agent-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); }
}

.agent-activity-content {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.82rem;
    color: var(--text-2);
    width: fit-content;
    max-width: 100%;
    line-height: 1.35;
    margin-left: 0;
}
.agent-activity-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.agent-activity-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.agent-activity-label strong {
    color: var(--text-1);
    font-weight: 600;
}

/* ── Agent thinking animation (active state) ── */
.chat-bubble.agent-activity.active .agent-activity-content {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    animation: agent-think-glow 2s ease-in-out infinite;
}
@keyframes agent-think-glow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 10%, transparent); }
    50%      { box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent) 18%, transparent); }
}
.agent-activity-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin-left: 4px;
    height: 14px;
}
.agent-activity-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    animation: thinking-bounce 1.2s infinite ease-in-out;
}
.agent-activity-dots span:nth-child(2) { animation-delay: 0.2s; }
.agent-activity-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Completed / error states */
.chat-bubble.agent-activity.completed .agent-activity-content {
    background: color-mix(in srgb, #10b981 6%, var(--bg-2));
    border: 1px solid color-mix(in srgb, #10b981 15%, transparent);
    color: var(--text-3);
}
.chat-bubble.agent-activity.error .agent-activity-content {
    background: color-mix(in srgb, #ef4444 8%, var(--bg-2));
    border: 1px solid color-mix(in srgb, #ef4444 15%, transparent);
    color: #b91c1c;
}
[data-theme="dark"] .chat-bubble.agent-activity.error .agent-activity-content {
    color: #fca5a5;
}
[data-theme="dark"] .chat-bubble.agent-activity::before {
    background: #21262d;
}
[data-theme="dark"] .chat-bubble.agent-activity::after {
    background: #161b22;
    border-color: #30363d;
}
[data-theme="dark"] .chat-bubble.agent-activity.active::after {
    border-color: var(--accent);
    background: var(--accent);
}
[data-theme="dark"] .chat-bubble.agent-activity.completed::after {
    border-color: #10b981;
    background: #10b981;
}

/* Plan bubble */
.chat-bubble.agent-activity.plan-bubble {
    margin: 0 !important;
}
.plan-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 2px 0;
    border-left: none;
    margin-left: 0;
}
.plan-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-1);
}
.plan-steps-list {
    margin: 0 0 0 18px;
    padding: 0;
    font-size: 0.78rem;
    color: var(--text-2);
    line-height: 1.55;
}
.plan-steps-list li {
    padding: 0;
}
/* Step bubble */
.chat-bubble.agent-activity.step-bubble .agent-activity-content {
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-2));
}

/* ── Smart Suggest: agent flow suggestion bubble ───────────────── */
.suggest-agent-bubble {
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-2)) !important;
    margin-top: 4px;
    animation: suggestFadeIn 0.35s ease;
    align-self: flex-start !important;
    text-align: left !important;
}
.suggest-agent-bubble .chat-avatar {
    font-size: 1.15rem;
    display: flex !important;
}
.suggest-agent-bubble .chat-bubble-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
}
.suggest-agent-bubble .chat-bubble-role {
    display: block !important;
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--accent);
    margin-bottom: 2px;
}
.suggest-agent-bubble .suggest-text {
    font-size: 0.82rem;
    color: var(--text-2);
    margin-bottom: 8px;
}
.suggest-agent-bubble .suggest-btn-row {
    position: relative;
    z-index: 10;
}
.suggest-agent-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.suggest-agent-btn:hover {
    background: color-mix(in srgb, var(--accent) 85%, #000);
    transform: translateY(-1px);
}
.suggest-agent-btn:active {
    transform: translateY(0);
}
.suggest-agent-btn svg {
    flex-shrink: 0;
}
/* Yes / No button row */
.suggest-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.suggest-agent-btn.suggest-no {
    background: var(--bg-3, #e5e7eb);
    color: var(--text-2, #4b5563);
}
.suggest-agent-btn.suggest-no:hover {
    background: color-mix(in srgb, var(--bg-3, #e5e7eb) 80%, #000);
}
[data-theme="dark"] .suggest-agent-btn.suggest-no {
    background: rgba(255,255,255,.1);
    color: var(--text-2, #9ca3af);
}
[data-theme="dark"] .suggest-agent-btn.suggest-no:hover {
    background: rgba(255,255,255,.15);
}
[data-theme="dark"] .suggest-agent-bubble {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)) !important;
}
@keyframes suggestFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.label-hint {
    font-weight: 400;
    color: var(--text-3);
    text-transform: none;
    font-size: 0.75rem;
    letter-spacing: 0;
}

.form-control {
    width: 100%;
    background: var(--surface-2);
    color: var(--text-1);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    padding: 10px 13px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}

.form-control::placeholder { color: var(--text-3); }

select.form-control {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 36px;
}

select.form-control option,
select.form-control optgroup {
    background: #ffffff;
    color: #0f172a;
}

/* File Upload */
.file-upload-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.file-upload-row .file-upload-area { flex: 1; margin-top: 0; }
.folder-path-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.folder-browse-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    font-size: 0.8rem;
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
}
.folder-browse-btn:hover { border-color: var(--primary); color: var(--primary); }
.folder-clear-btn {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
}
.folder-clear-btn:hover { color: #ef4444; }
.folder-path-input {
    flex: 1;
    font-size: 0.78rem;
    padding: 7px 10px;
    font-family: var(--font-mono, monospace);
    cursor: default;
    color: var(--text-2);
}
.folder-path-status {
    font-size: 0.72rem;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
}
.folder-path-status.ok  { color: #22c55e; }
.folder-path-status.err { color: #ef4444; }

/* ── Folder tree (Settings > Integrations) ────────────── */
.folder-tree-container ul {
    list-style: none;
    margin: 0;
    padding-left: 18px;
}
.folder-tree-container > ul { padding-left: 0; }
.ft-store {
    font-weight: 600;
    font-size: .85rem;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-1);
}
.ft-store-icon { font-size: 1rem; }
.ft-node {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    font-size: .82rem;
    line-height: 1.4;
}
.ft-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform .15s ease;
    color: var(--text-3);
    border-radius: 3px;
}
.ft-toggle:hover { color: var(--text-1); background: var(--bg-hover, rgba(128,128,128,.1)); }
.ft-toggle.open { transform: rotate(90deg); }
.ft-toggle.leaf { visibility: hidden; }
.ft-toggle svg { display: block; width: 16px; height: 16px; }
.ft-cb {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--primary);
}
.ft-icon { font-size: .92rem; flex-shrink: 0; }
.ft-label {
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-count {
    color: var(--text-3);
    font-size: .76rem;
    flex-shrink: 0;
}
.ft-children { margin: 0; }
.ft-children.collapsed { display: none; }
.ft-desc-row {
    padding: 2px 0 4px 36px;
}
.ft-desc-input {
    width: 100%;
    max-width: 320px;
    font-size: .78rem;
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-2);
    color: var(--text-2);
    outline: none;
}
.ft-desc-input:focus { border-color: var(--primary); }
.ft-desc-input::placeholder { color: var(--text-3); font-style: italic; }

.file-upload-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    background: var(--surface-2);
    border: 1px dashed var(--border-2);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-2);
    font-size: 0.875rem;
    transition: border-color 0.15s, color 0.15s;
    margin-top: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.file-upload-area:hover { border-color: var(--primary); color: var(--primary); }
.file-upload-area input[type="file"] { display: none; }

/* ============================
   BUTTONS
   ============================ */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 11px 20px;
    transition: all 0.15s ease;
    color: #fff;
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; pointer-events: none; }
.btn-block { width: 100%; }

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success { background: var(--surface-3); color: var(--text-1); border: 1px solid var(--border-2); }
.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.btn-success:hover:not(:disabled) { background: var(--border); color: #fff; transform: translateY(-1px); }

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-2);
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    color: var(--text-3);
    transition: all 0.15s;
    padding: 0;
}

.icon-btn:hover { background: var(--surface-3); color: var(--text-2); }

/* ============================
   MAIN CONTENT
   ============================ */
.main-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
}

/* ============================
   STATUS BAR
   ============================ */
.status-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface);
}

.token-counter {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.token-counter svg { opacity: 0.6; }

/* WS connection health dot */
.ws-health {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .3s, box-shadow .3s;
}
.ws-health.connected    { background: var(--success); box-shadow: 0 0 0 3px rgba(5,150,105,.20); animation: wsHealthPulse 2.4s ease-in-out infinite; }
.ws-health.disconnected { background: var(--danger);  box-shadow: 0 0 0 3px rgba(220,38,38,.20); animation: none; }

@keyframes wsHealthPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(5,150,105,.25); }
    50%       { box-shadow: 0 0 0 5px rgba(5,150,105,.08); }
}

.model-label {
    font-size: 0.7rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    line-height: 1;
}

.status-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* States */
.status-chip.idle    { background: var(--surface-2); border-color: var(--border-2); color: var(--text-2); }
.status-chip.running { background: var(--primary-dim); border-color: rgba(37,99,235,.30); color: #1d4ed8; }
.status-chip.success { display: none; }
.status-chip.error   { background: var(--danger-dim); border-color: rgba(220,38,38,.30); color: #991b1b; }

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

/* Spinner inside status bar */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }
svg.spin { animation: spin .7s linear infinite; }

/* ============================
   PANELS (runs area only)
   ============================ */
.panels {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px 20px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Badge */
.badge {
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--surface-3);
    color: var(--text-2);
    border: 1px solid var(--border-2);
    border-radius: 99px;
    padding: 2px 9px;
    min-width: 20px;
    text-align: center;
}
.badge-ok {
    background: rgba(34,197,94,.12);
    color: #22c55e;
    border-color: rgba(34,197,94,.25);
}
.badge-warn {
    background: rgba(234,179,8,.12);
    color: #eab308;
    border-color: rgba(234,179,8,.25);
}



/* ============================
   SCROLL AREA
   ============================ */
.scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.85rem;
    min-height: 0;
}

.scroll-area::-webkit-scrollbar { width: 4px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

/* ============================
   LOG ENTRIES
   ============================ */
.log-entry {
    display: flex;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.55;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

.log-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 1px;
    flex-shrink: 0;
}

.log-ts {
    font-size: 0.68rem;
    color: var(--text-3, #9ca3af);
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 2px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

.log-agent {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(100,116,139,.10);
    color: var(--text-2, #64748b);
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 1px;
    flex-shrink: 0;
}

.log-entry.info    .log-tag { background: rgba(37,99,235,.12);  color: #1e40af; }
.log-entry.success .log-tag { background: rgba(5,150,105,.12);   color: #065f46; }
.log-entry.error   .log-tag { background: rgba(220,38,38,.12);   color: #991b1b; }
.log-entry.memory  .log-tag { background: rgba(109,40,217,.12);  color: #5b21b6; }
.log-entry.curated .log-tag { background: rgba(13,148,136,.12);  color: #0f766e; }
.log-entry.research .log-tag{ background: rgba(180,83,9,.12);    color: #78350f; }

.log-entry.info    { border-color: rgba(37,99,235,.22);  background: rgba(37,99,235,.03); }
.log-entry.success { border-color: rgba(5,150,105,.22);  background: rgba(5,150,105,.03); }
.log-entry.error   { border-color: rgba(220,38,38,.22);  background: rgba(220,38,38,.03); }
.log-entry.memory  { border-color: rgba(109,40,217,.22); background: rgba(109,40,217,.03); }
.log-entry.curated { border-color: rgba(13,148,136,.22); background: rgba(13,148,136,.03); }
.log-entry.research{ border-color: rgba(180,83,9,.22);   background: rgba(180,83,9,.03); }

/* Live streaming output */
.log-entry.stream    .log-tag { background: rgba(5,150,105,.12); color: #065f46; }
.log-entry.stream { border-color: rgba(5,150,105,.22); background: rgba(5,150,105,.04); }

/* Keep streaming reasoning and final answer vertically stacked. */
.log-entry.stream {
    flex-wrap: wrap;
    row-gap: 4px;
}
.log-entry.stream .thinking-block {
    order: 2;
    flex: 1 0 100%;
    width: 100%;
    margin: 2px 0 0 0;
}
.log-entry.stream .stream-body {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
}

/* Handoff entries */
.log-entry.handoff .log-tag { background: rgba(67,56,202,.12); color: #3730a3; }
.log-entry.handoff { border-color: rgba(67,56,202,.22); background: rgba(67,56,202,.03); }

/* Tool-use entries */
.log-entry.tool .log-tag { background: rgba(161,98,7,.12); color: #78350f; }
.log-entry.tool { border-color: rgba(161,98,7,.22); background: rgba(161,98,7,.03); }

/* HITL approval entries */
.log-entry.hitl .log-tag { background: rgba(194,65,12,.12); color: #9a3412; }
.log-entry.hitl { border-color: rgba(194,65,12,.22); background: rgba(194,65,12,.03); }

/* Clarifying question */
.log-entry.clarify .log-tag { background: rgba(109,40,217,.12); color: #5b21b6; }
.log-entry.clarify { border-color: rgba(109,40,217,.25); background: rgba(109,40,217,.04); }

.log-entry.clarify-reply .log-tag { background: rgba(37,99,235,.12); color: #1e40af; }
.log-entry.clarify-reply { border-color: rgba(37,99,235,.22); background: rgba(37,99,235,.03); }

.clarify-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* Disclaimer modal */
.disclaimer-modal {
    max-width: 520px;
}
.disclaimer-body {
    font-size: 0.84rem;
    color: var(--text-2);
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--border);
}
.disclaimer-body p { margin: 0; }
.disclaimer-body ul {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.disclaimer-body li { color: var(--text-2); }
.disclaimer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.disclaimer-version {
    font-size: 0.72rem;
    color: var(--text-3, #9ca3af);
    letter-spacing: 0.2px;
}

.clarify-question { font-weight: 500; color: var(--text-1); line-height: 1.5; }
.clarify-form { display: flex; flex-direction: column; gap: 4px; }

.agent-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    transition: border-color 0.2s, background 0.2s;
    min-width: 0;
    cursor: default;
    position: relative;
    isolation: isolate;
}
.agent-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1; }
.agent-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.agent-name { font-size: 0.72rem; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.agent-state-label {
    font-size: 0.58rem; color: var(--text-3);
    text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── Snake border animation for active agent cards ───────────────────── */
@property --agent-snake-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes snake-rotate {
    to { --agent-snake-angle: 360deg; }
}

/* Agent states */
.agent-card.active {
    border-color: transparent;
    background: rgba(37,99,235,.08);
    background-clip: padding-box;
}
.agent-card.active::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 9px;
    z-index: -1;
    background: conic-gradient(
        from var(--agent-snake-angle),
        transparent      0deg 255deg,
        rgba(37,99,235,.20) 255deg 285deg,
        #3b82f6          285deg 325deg,
        rgba(147,197,253,.55) 325deg 348deg,
        transparent      348deg 360deg
    );
    animation: snake-rotate 1.8s linear infinite;
}
.agent-card.active  .agent-state-label { color: #1d4ed8; }
.agent-card.active  .agent-name  { color: #1e3a8a; }

.agent-card.done    { border-color: rgba(5,150,105,.40); background: rgba(5,150,105,.07); }
.agent-card.done[data-agent="reportout"] { cursor: pointer; }
.agent-card.done[data-agent="reportout"]:hover {
    background: rgba(5,150,105,.14);
    border-color: rgba(5,150,105,.70);
}

.agent-card.done    .agent-state-label { color: #065f46; }

.agent-card.error   { border-color: rgba(220,38,38,.40); background: rgba(220,38,38,.07); }
.agent-card.error   .agent-state-label { color: #991b1b; }

.agent-card.skip    { opacity: 0.38; }
.agent-card.skip    .agent-state-label { color: var(--text-3); }

/* Connectors between cards — vertical line with arrow */
.agent-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2px;
    height: 18px;
    padding: 0;
    margin: 0 auto;
    position: relative;
    font-size: 0;
    color: transparent;
    background: var(--border-2);
    flex-shrink: 0;
    user-select: none;
}
.agent-connector::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--border-2);
}
.agent-connector.flash {
    background: var(--primary);
    animation: connector-flash 0.7s ease forwards;
}
.agent-connector.flash::after {
    border-top-color: var(--primary);
}
@keyframes connector-flash {
    0%   { background: var(--primary); }
    100% { background: var(--border-2); }
}

/* Blinking cursor at end of active stream */
@keyframes blink-cursor { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.log-entry.stream-active .stream-body::after {
    content: '▌';
    color: #059669;
    animation: blink-cursor 0.8s step-end infinite;
    margin-left: 1px;
}

/* Thinking block (collapsible reasoning output) */
.thinking-block {
    margin: 2px 0 4px 0;
    padding: 0;
    font-size: 0.72rem;
    color: var(--text-3);
    border: none;
    opacity: 0.7;
    width: 100%;
}
.thinking-block summary {
    cursor: pointer;
    color: var(--text-3);
    font-size: 0.70rem;
    font-style: italic;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.thinking-block summary::before {
    content: '▶';
    font-size: 0.55rem;
    transition: transform 0.15s;
    display: inline-block;
}
.thinking-block[open] summary::before {
    transform: rotate(90deg);
}
.thinking-block summary::-webkit-details-marker { display: none; }
.thinking-block summary:hover {
    color: var(--text-2);
}
.thinking-block summary::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0;
    opacity: 0;
    border-radius: 999px;
    border: 1.5px solid transparent;
    vertical-align: middle;
}
.thinking-block-active summary::after {
    width: 11px;
    height: 11px;
    margin-left: 6px;
    opacity: 0.95;
    border-color: rgba(37,99,235,.22);
    border-top-color: #2563eb;
    animation: thinking-summary-spin 0.78s linear infinite;
}
.thinking-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-mono, 'Fira Code', 'Cascadia Code', monospace);
    font-size: 0.68rem;
    font-style: italic;
    line-height: 1.4;
    margin: 2px 0 0;
    padding: 4px 8px 4px 12px;
    color: var(--text-3);
    border-left: 1.5px solid var(--border);
    max-height: none;
    overflow: visible;
    background: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    transition: border-color 0.22s ease, color 0.22s ease, opacity 0.22s ease;
}
.thinking-body::after {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: 3px;
    height: 100%;
    opacity: 0;
    background: linear-gradient(180deg, rgba(37,99,235,0), rgba(37,99,235,.85), rgba(37,99,235,0));
    transform: translateY(-45%);
    pointer-events: none;
}
.thinking-body-active {
    color: var(--text-2);
    border-left-color: rgba(37,99,235,.42);
}
.thinking-body-active::after {
    opacity: 1;
    animation: thinking-body-scan 1.3s linear infinite;
}
.thinking-line {
    white-space: pre-wrap;
    word-break: break-word;
    opacity: 0.92;
    transform-origin: left center;
}
.thinking-body-active .thinking-line:last-child {
    animation: thinking-line-live 1.1s ease-in-out infinite;
}
.thinking-body-active .thinking-line:last-child::after {
    content: ' ...';
    display: inline-block;
    width: 1.8em;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: baseline;
    color: rgba(37,99,235,.95);
    animation: thinking-ellipsis-text 1.15s steps(4, end) infinite;
}
.thinking-line-enter {
    animation: thinking-line-in 0.28s ease-out;
}
@keyframes thinking-line-in {
    0% {
        opacity: 0;
        transform: translateY(6px);
        filter: blur(3px);
    }
    100% {
        opacity: 0.92;
        transform: translateY(0);
        filter: blur(0);
    }
}
@keyframes thinking-line-live {
    0%, 100% {
        opacity: 0.9;
    }
    50% {
        opacity: 1;
    }
}
@keyframes thinking-body-scan {
    0% {
        transform: translateY(-55%);
    }
    100% {
        transform: translateY(55%);
    }
}
@keyframes thinking-summary-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes thinking-ellipsis-text {
    0% {
        width: 0;
    }
    100% {
        width: 1.8em;
    }
}
.thinking-bubble {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    gap: 6px !important;
    display: flex !important;
    width: auto !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
}
.thinking-bubble + .chat-bubble {
    margin-top: 8px !important;
}
.chat-thread .thinking-bubble + .chat-bubble {
    margin-top: 8px !important;
}
/* Collapsed thinking blocks should barely take space */
.thinking-bubble .thinking-block:not([open]) {
    margin: 0;
}
.thinking-bubble .thinking-block {
    margin: 0 !important;
    width: auto !important;
}
.thinking-bubble .thinking-body {
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
}



.log-details {
    flex: 1;
    cursor: pointer;
}
.log-details summary {
    color: var(--text-2);
    font-size: 0.82rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.log-details summary::before {
    content: '▶';
    font-size: 0.6rem;
    color: var(--text-3);
    transition: transform 0.15s;
    flex-shrink: 0;
}
.log-details[open] summary::before { transform: rotate(90deg); }
.log-details .log-body {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: pre-wrap;
    line-height: 1.5;
}

.log-body { color: var(--text-2); flex: 1; }

/* ============================
   MEMORY ITEMS
   ============================ */
.memory-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
}

.memory-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-3);
}

.memory-item-header .clear-user-btn {
    margin-left: auto;
}
.memory-item-header .identity-edit-btn {
    margin-left: auto;
}
.memory-item-header .identity-edit-btn + .clear-user-btn {
    margin-left: 0;
}

/* Identity sub-tabs */
.identity-sub-tab {
    font-weight: 500;
    transition: background .15s, color .15s;
}
.identity-sub-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Identity inline edit form */
.identity-edit-form {
    padding: 10px 13px;
}
.identity-edit-textarea {
    width: 100%;
    min-height: 180px;
    padding: 10px;
    font-family: 'Inter', monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    border: 1px solid var(--border-2);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-1);
    resize: vertical;
    box-sizing: border-box;
}
.identity-edit-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}
.identity-edit-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    justify-content: flex-end;
}

.identity-rich-body {
    white-space: normal;
    font-family: "Segoe UI", "Inter", sans-serif;
    color: var(--text-1);
    line-height: 1.65;
}

.identity-rich-body strong {
    color: var(--text-1);
    font-weight: 700;
}

.identity-rich-body code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.78rem;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 6px;
    padding: 1px 5px;
}

.identity-heading {
    margin: 0 0 10px;
    font-size: 0.85rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--text-1);
}

.identity-heading:not(:first-child) {
    margin-top: 16px;
}

.identity-paragraph {
    margin: 0 0 10px;
}

.identity-list {
    margin: 0 0 12px 18px;
    padding: 0;
}

.identity-list li {
    margin: 0 0 7px;
    color: var(--text-1);
}

.identity-empty {
    margin: 0;
    color: var(--text-2);
}

.memory-step-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--primary-dim);
    color: var(--primary);
    border: 1px solid rgba(59,130,246,.3);
    border-radius: 99px;
    padding: 2px 8px;
}

.memory-item-step {
    font-size: 0.8rem;
    color: var(--text-2);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.memory-item-body {
    padding: 11px 13px;
    font-size: 0.83rem;
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Fira Code', 'Consolas', monospace;
    line-height: 1.6;
}

.memory-history-item {
    display: block;
}

.memory-history-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-3);
    list-style: none;
    cursor: pointer;
}

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

.memory-history-summary::before {
    content: '▶';
    font-size: 0.62rem;
    color: var(--text-3);
    transition: transform .15s ease;
    flex-shrink: 0;
}

.memory-history-item[open] .memory-history-summary::before {
    transform: rotate(90deg);
}

.memory-history-preview {
    margin-left: auto;
    color: var(--text-3);
    font-size: 0.75rem;
    max-width: 46%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================
   TOGGLE SWITCH
   ============================ */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--surface-3);
    border: 1px solid var(--border-2);
    border-radius: 99px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: var(--text-3);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.toggle input:checked + .toggle-slider { background: var(--primary-dim); border-color: rgba(59,130,246,.4); }
.toggle input:checked + .toggle-slider::before { transform: translate(16px, -50%); background: var(--primary); }

.hint-text { font-size: 0.78rem; color: var(--text-3); margin: 0; line-height: 1.4; }

.copilot-footer-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.copilot-footer-select {
    min-height: 34px;
    min-width: 148px;
    padding: 6px 30px 6px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    line-height: 1.2;
}

.copilot-quickstart-btn {
    min-height: 34px;
    padding-inline: 12px;
}

.copilot-footer-label {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-3);
    line-height: 1;
    white-space: nowrap;
}

.toggle.toggle-sm {
    width: 32px;
    height: 18px;
}

.toggle.toggle-sm .toggle-slider::before {
    width: 12px;
    height: 12px;
}

.toggle.toggle-sm input:checked + .toggle-slider::before {
    transform: translate(14px, -50%);
}

.copilot-section {
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    padding: 14px 16px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 34%),
        linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 82%, white 18%));
    border-radius: 14px;
    gap: 14px;
}

.copilot-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}

.copilot-panel-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-3);
    line-height: 1.45;
    max-width: 56ch;
}

.copilot-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.copilot-control-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.5);
    min-height: 96px;
}

.copilot-brief-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 14px;
    min-height: 0;
}

.copilot-brief-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.copilot-brief-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-2);
    line-height: 1.3;
}

.copilot-brief-card .hint-text {
    margin-top: 0;
    max-width: 54ch;
}

.copilot-card-toggle {
    margin-top: 2px;
}

.copilot-inline-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.74rem;
}

.copilot-time-input,
.copilot-select {
    min-height: 38px;
}

.copilot-instructions-wrap {
    margin-bottom: 0;
}

.copilot-panel-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.copilot-status-note {
    flex: 1;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-2);
}

#pane-copilot > .settings-note {
    max-width: 64ch;
}

.copilot-status-note.err { color: #b91c1c; }
.copilot-status-note.ok { color: #065f46; }

.copilot-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .copilot-panel-footer,
    .copilot-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .copilot-panel-grid {
        grid-template-columns: 1fr;
    }

    .copilot-brief-card {
        grid-template-columns: 1fr;
    }

    .copilot-card-toggle {
        margin-top: 0;
    }

    .copilot-footer-control {
        width: 100%;
        flex-wrap: wrap;
    }

    .copilot-footer-select {
        flex: 1 1 180px;
        min-width: 0;
    }
}

/* Compact options grid (Internet / Email / Approval / Speed) */
.options-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.option-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.option-label {
    font-size: 0.8rem;
    color: var(--text-2);
    white-space: nowrap;
}

/* ============================
   UPLOAD STATUS
   ============================ */
.upload-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 11px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-2);
}

.upload-status.uploading { color: #1d4ed8; border-color: rgba(37,99,235,.30); }
.upload-status.done      { color: #065f46; border-color: rgba(5,150,105,.30); }
.upload-status.err       { color: #991b1b; border-color: rgba(220,38,38,.30); }

/* ============================
   TABS (Memory / Sessions)
   ============================ */
.tab {
    padding: 4px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-2);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tab:hover { color: var(--text-1); }

.tab.active {
    background: var(--surface-3);
    color: var(--text-1);
    border: 1px solid var(--border-2);
}

.tab-pane { display: none; }
.tab-pane.active {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* ============================
   SESSION CARDS
   ============================ */
.session-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: border-color 0.15s;
}

.session-card:hover { border-color: var(--border-2); }

.session-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 8px;
    margin-bottom: 6px;
}

.session-card-goal {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-1);
    line-height: 1.4;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.session-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-3);
}

.session-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
}

.session-badge.done    { background: rgba(107,114,128,.12); color: var(--text-2); }
.session-badge.partial { background: rgba(107,114,128,.12); color: var(--text-2); }
.session-badge.source  { background: rgba(107,114,128,.12); color: var(--text-2); text-transform: capitalize; }
.session-badge.schedule-active { background: rgba(107,114,128,.12); color: var(--text-2); }
.session-badge.schedule-paused { background: rgba(107,114,128,.12); color: var(--text-2); }

/* Skill badges row on session cards */
.session-skills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    width: 100%;
    margin-top: 3px;
}
.session-badge.skill {
    font-size: 0.62rem;
    font-weight: 500;
    padding: 1px 6px;
    letter-spacing: 0.2px;
}
.session-badge.skill.builtin { background: rgba(59,130,246,.10); color: rgba(59,130,246,.85); }
.session-badge.skill.custom  { background: rgba(168,85,247,.10); color: rgba(168,85,247,.85); }

/* Scheduled flows section in sessions panel */
.sessions-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-3);
    padding: 4px 0 6px;
}
.sessions-schedule-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.schedule-card-inline.schedule-disabled {
    opacity: 0.55;
}

.session-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.session-history-card .session-card-header {
    margin-bottom: 4px;
}

.session-history-card .session-card-actions {
    margin-top: 0;
    flex-wrap: wrap;
}

.btn-xs {
    padding: 3px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-2);
    background: var(--surface-3);
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-xs:hover { background: var(--border-2); color: var(--text-1); }
.btn-xs.danger { color: var(--text-2); border-color: var(--border-2); }
.btn-xs.danger:hover { background: var(--border-2); color: var(--text-1); }
.btn-xs.active { border-color: var(--primary); color: var(--primary); }
.btn-xs.active:hover { background: rgba(5,150,105,.08); }

.sessions-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-3);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ============================
   HITL APPROVAL MODAL
   ============================ */
.approval-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    overflow-y: auto;
}

.approval-modal {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    width: min(480px, 90vw);
    box-shadow: 0 16px 48px rgba(15,23,42,.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: modal-in 0.2s ease;
}

@keyframes modal-in {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.approval-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.approval-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
}

.approval-icon { font-size: 1.3rem; }

.approval-step-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.approval-step-desc {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.875rem;
    color: var(--text-1);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.approval-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}
/* ── Settings Modal ──────────────────────────────────────────────────────── */
.settings-gear-btn {
    opacity: 0.6;
    transition: opacity .15s, transform .25s;
}
.settings-gear-btn:hover { opacity: 1; transform: rotate(35deg); }

.settings-modal {
    width: min(720px, 96vw);
    max-width: 720px;
    max-height: calc(100vh - 32px);
    padding: 22px 26px;
    gap: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.settings-modal-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
}

.settings-dialog-body {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    width: 148px;
    flex-shrink: 0;
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    padding: 8px;
    gap: 2px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-2);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
}
.settings-nav-item:hover {
    background: rgba(100,116,139,.12);
    color: var(--text-1);
}
.settings-nav-item.active {
    background: var(--primary, #2563eb);
    color: #fff;
}
.settings-nav-item svg { flex-shrink: 0; }

.settings-panes {
    flex: 1;
    overflow: hidden;
}

.settings-pane {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}
.settings-pane.active { display: flex; }

.settings-pane-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-3);
    margin: 0;
}

.settings-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}

/* Tool cards in settings pane */
.tools-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}
.tool-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tool-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tool-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tool-card-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-1);
    font-family: 'Fira Code', 'Cascadia Code', monospace;
}
.tool-card-desc {
    font-size: 0.77rem;
    color: var(--text-2);
    line-height: 1.4;
}
.tool-card-args {
    font-size: 0.7rem;
    color: var(--text-3);
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    background: none;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-all;
}
.tool-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 4px;
    color: var(--text-3);
    opacity: 0.6;
    transition: opacity .15s, color .15s;
    flex-shrink: 0;
}
.tool-delete-btn:hover { opacity: 1; color: var(--danger); }

.tool-source-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 4px;
    color: var(--text-3);
    opacity: 0.6;
    font-size: .78rem;
    transition: opacity .15s, color .15s;
    flex-shrink: 0;
}
.tool-source-btn:hover { opacity: 1; color: var(--accent); }

.tool-card.tool-card-disabled {
    opacity: 0.62;
    border-style: dashed;
}

.settings-note {
    font-size: 0.8rem;
    color: var(--text-2);
    margin: 2px 0 0;
    line-height: 1.45;
}
.settings-note.ok   { color: #059669; }
.settings-note.err  { color: var(--danger); }

.context-pane-intro {
    max-width: 56ch;
}

.context-pane-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    align-items: start;
}

.context-memory-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.context-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface-2) 88%, var(--surface) 12%) 100%);
    min-height: 0;
}

.context-card-collapsible {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.context-card-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.context-card-toggle:hover {
    background: color-mix(in srgb, var(--surface-2) 72%, var(--surface) 28%);
}

.context-card-heading {
    min-width: 0;
}

.context-card-subtitle {
    margin: 0;
    font-size: 0.79rem;
    color: var(--text-2);
}

.context-card-toggle-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.context-card-toggle-label {
    display: inline-flex;
    align-items: center;
    min-width: 68px;
    justify-content: flex-end;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.context-card-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--text-3);
    transition: transform 0.15s ease;
}

.context-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent 28%);
}

.context-card-collapsible:not(.is-open) .context-card-body {
    display: none;
}

.context-card-collapsible:not(.is-open) .context-card-chevron {
    transform: rotate(-90deg);
}

.context-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.context-sources-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.context-sources-summary-tree {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.context-tree-root {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 72%, var(--surface-2) 28%);
}

.context-tree-root-header,
.context-tree-branch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.context-tree-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-1);
}

.context-tree-children {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 10px;
    border-left: 1px dashed var(--border-2);
}

.context-tree-branch {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.context-tree-branch-title {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}

.context-tree-branch-count {
    font-size: 0.72rem;
    color: var(--text-3);
}

.context-tree-leaf {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    font-size: 0.79rem;
    line-height: 1.35;
    color: var(--text-1);
}

.context-tree-leaf-muted {
    color: var(--text-3);
}

.context-tree-bullet {
    width: 6px;
    height: 6px;
    margin-top: 0.38rem;
    border-radius: 999px;
    background: var(--border-2);
    flex-shrink: 0;
}

.context-tree-path {
    min-width: 0;
    word-break: break-word;
}

.context-summary-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.context-source-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.context-source-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.context-source-label {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--text-1);
    word-break: break-word;
}

.context-source-meta {
    font-size: 0.76rem;
    color: var(--text-3);
}

.context-source-desc {
    font-size: 0.78rem;
    color: var(--text-2);
    line-height: 1.4;
}

.context-source-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-2);
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.71rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.context-inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.context-inline-form .form-control {
    flex: 1;
    min-width: 0;
}

.context-inline-form-slim .btn {
    min-width: 104px;
}

.context-inline-form-slim {
    justify-content: flex-end;
}

.context-managed-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.context-managed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 84%, var(--surface) 16%);
}

.context-managed-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.context-managed-title {
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--text-1);
    word-break: break-word;
}

.context-managed-meta {
    font-size: 0.74rem;
    color: var(--text-3);
}

.context-managed-desc {
    font-size: 0.78rem;
    color: var(--text-2);
    line-height: 1.4;
}

.context-managed-remove {
    border: 1px solid var(--border-2);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.context-managed-remove:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.context-empty-state {
    padding: 8px 10px;
    border: 1px dashed var(--border-2);
    border-radius: 10px;
    color: var(--text-3);
    font-size: 0.76rem;
    background: color-mix(in srgb, var(--surface-2) 70%, transparent 30%);
}

@media (max-width: 720px) {
    .context-inline-form {
        flex-wrap: wrap;
    }

    .context-inline-form .btn {
        width: 100%;
    }

    .context-managed-item {
        flex-direction: column;
    }
}

.ollama-profile-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface-2) 78%, var(--surface) 22%) 100%);
}

.ollama-profile-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ollama-profile-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-2);
    line-height: 1.45;
}

.ollama-profile-summary span::before {
    content: '\2022';
    margin-right: 12px;
    color: var(--text-3);
}

.ollama-profile-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--primary-dim);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.ollama-profile-copy {
    max-width: 62ch;
}

.ollama-profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.ollama-command-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.75rem;
    color: var(--text-2);
}

.ollama-inline-link {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    color: var(--primary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ollama-inline-link:hover {
    text-decoration: underline;
}

.ollama-profile-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ollama-profile-primary {
    padding: 8px 14px;
    font-size: 0.8rem;
}

.ollama-inline-button {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 999px;
    padding: 8px 12px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.ollama-inline-button:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-dim);
}

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

.ollama-profile-note {
    min-height: 1.2em;
}

/* ── Settings sub-tab navigation ──────────────────────────────────────────── */
.settings-sub-nav {
    display: flex;
    gap: 2px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
    overflow-x: auto;
    flex-shrink: 0;
}
.settings-sub-tab {
    appearance: none;
    border: none;
    background: none;
    padding: 6px 13px;
    border-radius: 999px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-3);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.settings-sub-tab:hover {
    background: rgba(100,116,139,.10);
    color: var(--text-1);
}
.settings-sub-tab.active {
    background: var(--primary-dim, rgba(37,99,235,.1));
    color: var(--primary, #2563eb);
    font-weight: 600;
}


.settings-sub-pane {
    display: none;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}
.settings-sub-pane.active { display: flex; }

.settings-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 14px 0;
}

.settings-toggles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    margin-top: 6px;
}
.settings-toggles-grid .option-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-toggles-grid .option-label {
    font-size: 0.78rem;
    color: var(--text-2);
}

.settings-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

/* ── Help Modal ────────────────────────────────────────────────────────────── */
.help-modal {
    width: min(780px, 96vw);
    max-width: 780px;
    max-height: calc(100vh - 32px);
    padding: 22px 26px;
    gap: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-dialog-body {
    min-height: 380px;
    max-height: 60vh;
}

.help-nav {
    width: 138px;
}

.help-panes {
    overflow-y: auto;
}

.help-content {
    font-size: 0.84rem;
    color: var(--text-1);
    line-height: 1.65;
}
.help-content p { margin: 0 0 8px; }
.help-content ul, .help-content ol {
    margin: 0 0 10px;
    padding-left: 20px;
}
.help-content li { margin-bottom: 4px; }
.help-content li strong { color: var(--text-1); }
.help-content code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.8rem;
    font-family: 'Fira Code', 'Cascadia Code', monospace;
}
.help-content kbd {
    display: inline-block;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.78rem;
    font-family: inherit;
    font-weight: 600;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
    min-width: 22px;
    text-align: center;
}
.help-shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}
.help-shortcuts-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.83rem;
    color: var(--text-1);
}
.help-shortcuts-table td:first-child {
    width: 160px;
    white-space: nowrap;
}

/* ── Final Report Modal ───────────────────────────────────────────────────── */
.report-modal {
    width: min(920px, 94vw);
    max-width: 920px;
    max-height: 88vh;
}

.report-content {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.9rem;
    color: var(--text-1);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow: auto;
    min-height: 260px;
    max-height: 60vh;
}

/* ── Answer section: the main deliverable, prominent ──────────── */
.report-answer {
    white-space: normal;
    word-break: break-word;
    color: var(--text-1);
    font-size: 0.92rem;
    line-height: 1.7;
}
.report-answer p { margin: 0 0 10px; }
.report-answer p:last-child { margin-bottom: 0; }
.report-answer ul, .report-answer ol { margin: 0 0 10px 20px; padding: 0; }
.report-answer li { margin: 0 0 5px; }
.report-answer code {
    background: rgba(0,0,0,.05);
    border: 1px solid var(--border-2);
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 0.84em;
}
.report-answer pre {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    font-size: 0.82em;
    margin: 0 0 10px;
}
.report-answer strong { color: var(--text-1); }
.report-answer a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(99, 102, 241, .3);
    transition: border-color 0.15s, color 0.15s;
    word-break: break-all;
}
.report-answer a:hover {
    color: #4338ca;
    border-bottom-color: #4338ca;
}
.report-body a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(99, 102, 241, .3);
    transition: border-color 0.15s, color 0.15s;
    word-break: break-all;
}
.report-body a:hover {
    color: #4338ca;
    border-bottom-color: #4338ca;
}

/* ── Notes section: collapsible, subtle ────────────────────────── */
.report-notes {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 0.82rem;
    color: var(--text-2);
}
.report-notes summary {
    cursor: pointer;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-2);
    user-select: none;
}
.report-notes summary:hover { color: var(--text-1); }
.report-notes > .report-body {
    padding: 0 12px 10px;
}

/* ── Minor/legacy sections: small box ─────────────────────────── */
.report-section.report-minor {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 10px 13px;
    margin-top: 10px;
}
.report-section.report-minor h4 {
    margin: 0 0 6px;
    color: var(--text-2);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.report-body {
    white-space: normal;
    word-break: break-word;
    color: var(--text-1);
}
.report-body p { margin: 0 0 8px; }
.report-body p:last-child { margin-bottom: 0; }
.report-body ul { margin: 0 0 8px 18px; padding: 0; }
.report-body li { margin: 0 0 4px; }
.report-body code {
    background: rgba(0,0,0,.05);
    border: 1px solid var(--border-2);
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 0.84em;
}

.report-empty {
    color: var(--text-2);
}

/* ── Swim lanes (stacked vertically) ───────────────────────────────────── */
.runs-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 0;
}

.runs-empty-hint {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    font-size: 0.85rem;
    border: 1px dashed var(--border-2);
    border-radius: var(--radius-lg);
}

/* Each swim lane — vertical flow card */
.run-lane {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .2s;
    min-height: 0;
}

.run-lane.lane-done   { border-color: rgba(5,150,105,.5); }
.run-lane.lane-error  { border-color: rgba(220,38,38,.5); }
.run-lane.lane-paused { border-color: rgba(217,119,6,.6); opacity: .85; }

/* Lane header */
.lane-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface-2);
}

.lane-goal-box {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lane-run-id {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.lane-goal {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.35;
    display: block;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* per-lane step progress bar */
.lane-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}
.lane-progress-wrap.hidden { display: none; }
.lane-progress-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-3);
    white-space: nowrap;
    min-width: 68px;
}
.lane-progress-track {
    flex: 1;
    height: 5px;
    background: var(--border-2);
    border-radius: 99px;
    overflow: hidden;
}
.lane-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary);
    border-radius: 99px;
    transition: width .35s ease;
}

.lane-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border-2);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    transition: border-color .15s, color .15s;
    flex-shrink: 0;
    padding: 0;
}
.lane-btn:hover    { border-color: var(--primary); color: var(--primary); }
.lane-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.lane-clear-btn:hover    { border-color: var(--text-3);  color: var(--text-3); }

/* Lane agent strip — vertical stack */
.lane-agents {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-y: auto;
    background: var(--surface);
}
.lane-agents .agent-card {
    width: 100%;
    min-width: unset;
    padding: 7px 12px;
    gap: 10px;
    border-radius: 8px;
    box-sizing: border-box;
}
.lane-agents .agent-icon        { font-size: 1rem; }
.lane-agents .agent-name        { font-size: 0.72rem; }
.lane-agents .agent-state-label { font-size: 0.55rem; }
.lane-agents::-webkit-scrollbar        { width: 3px; }
.lane-agents::-webkit-scrollbar-thumb  { background: var(--border-2); border-radius: 2px; }

/* Vertical connector between agent cards */
.lane-agents .agent-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 16px;
    padding: 0;
    margin: 0;
    position: relative;
    font-size: 0;
    color: transparent;
    background: none;
    flex-shrink: 0;
}
.lane-agents .agent-connector::before {
    content: '';
    display: block;
    width: 2px;
    height: 100%;
    background: var(--border-2);
    border-radius: 1px;
}
.lane-agents .agent-connector::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--border-2);
}
.lane-agents .agent-connector.flash::before {
    background: var(--primary);
}
.lane-agents .agent-connector.flash::after {
    border-top-color: var(--primary);
}

/* Lane plan list */
.lane-plan {
    flex-shrink: 0;
    max-height: 120px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
    padding: 6px 12px;
    background: var(--surface);
}
.lane-plan::-webkit-scrollbar       { width: 3px; }
.lane-plan::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }

.plan-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.plan-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-2);
    line-height: 1.4;
    padding: 5px 0;
    transition: color .15s, opacity .15s;
}
.plan-step-badge {
    flex: 0 0 auto;
    min-width: 48px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}
.plan-step-text {
    flex: 1 1 auto;
    min-width: 0;
}
.plan-step-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.plan-step-detail {
    font-size: 0.66rem;
    color: var(--text-3);
    line-height: 1.35;
}
.plan-list li.step-completed {
    color: var(--success);
    text-decoration: line-through;
    opacity: 0.65;
}
.plan-list li.step-completed .plan-step-badge {
    border-color: color-mix(in srgb, var(--success) 35%, var(--border-2));
    background: color-mix(in srgb, var(--success) 12%, white);
    color: var(--success);
}
.plan-list li.step-active {
    color: var(--primary);
    font-weight: 600;
}
.plan-list li.step-active .plan-step-badge {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-2));
    background: color-mix(in srgb, var(--primary) 12%, white);
    color: var(--primary);
}
.plan-list li.step-issue {
    color: #b45309;
    font-weight: 600;
}
.plan-list li.step-issue .plan-step-badge {
    border-color: #f59e0b;
    background: #fff7ed;
    color: #b45309;
}
.plan-list li.step-completed .plan-step-detail {
    color: color-mix(in srgb, var(--success) 78%, var(--text-3));
}
.plan-list li.step-active .plan-step-detail {
    color: color-mix(in srgb, var(--primary) 72%, var(--text-3));
}
.plan-list li.step-issue .plan-step-detail {
    color: #92400e;
}

/* Lane log */
.lane-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px;
    transition: max-height .2s ease;
    display: flex;
    flex-direction: column;
}

/* Collapsed log */
.run-lane.log-collapsed .lane-log {
    display: none;
}
.run-lane.log-collapsed {
    min-height: 0;
    flex-shrink: 0;
}


#run-tabs.run-tabs {
    display: none;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-1);
}
#run-tabs.run-tabs.has-multiple-tabs {
    display: flex;
}

.run-tab {
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .15s, color .15s;
}

.run-tab:hover { border-color: var(--primary); color: var(--primary); }
.run-tab.active { border-color: var(--primary); color: var(--primary); background: var(--primary-dim, rgba(99,102,241,.1)); font-weight: 600; }
.run-tab.done { color: #22c55e; border-color: rgba(34,197,94,.35); }
.run-tab.error { color: #ef4444; border-color: rgba(239,68,68,.35); }

/* ====================================================================
   MODERN UI OVERHAUL — Clean, spacious, ChatGPT-inspired
   ==================================================================== */

/* ── 1. LAYOUT — Chat takes center stage ─────────────────────────────── */
body > .app {
    grid-template-columns: minmax(200px, 26vw) 1fr;
    background: #f7f7f8;
    transition: grid-template-columns 0.25s ease;
}
body > .app.sidebar-collapsed {
    grid-template-columns: 44px 1fr;
}

/* History sidebar */
.exploration-history {
    background: #f7f7f8;
    border-right: 1px solid rgba(0,0,0,.12);
}
.exploration-history .agent-panel-history-header {
    justify-content: flex-start;
    padding: 10px 12px;
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,.12);
    gap: 8px;
}
.exploration-history #history-collapse-btn {
    display: inline-flex !important;
}
.agent-panel-history-panes { background: transparent; }

.sessions-empty {
    background: transparent;
    border: 1px dashed rgba(0,0,0,.18);
    border-radius: 12px;
    color: #6b7280;
    font-size: 0.8rem;
}
.session-card {
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: box-shadow .15s, border-color .15s;
}
.session-card:hover {
    border-color: rgba(0,0,0,.22);
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
/* Swim lanes / panels (hidden — agent activity now in chat) */

/* ── 3. RIGHT PANEL — Chat interface ─────────────────────────────────── */
.agent-panel {
    background: #ffffff;
    border-left: none;
    display: flex;
    flex-direction: column;
}
.agent-panel-header {
    padding: 10px 18px;
    border-bottom: 1px solid rgba(0,0,0,.12);
    background: #ffffff;
}
.logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
}
.logo-text {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* Form area → chat layout */
.agent-panel-form {
    display: flex;
    flex-direction: column;
    border-bottom: none;
    padding: 0;
    gap: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
.agent-panel-form > .advanced-section,
.agent-panel-form > #email-access-hint,
.agent-panel-form > #model-warning {
    display: none !important;
}

/* Chat dialog section */
.chat-dialog-section {
    flex: 1;
    min-height: 0;
    height: auto;
    border: none;
    background: transparent;
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
}
.chat-dialog-section .form-label { display: none; }

.chat-dialog-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 24px;
    border-bottom: 1px solid rgba(0,0,0,.10);
    min-height: 30px;
}
.chat-header-pills { gap: 6px; flex: 1; display: flex; flex-wrap: wrap; }
.new-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    border: 1px solid rgba(0,0,0,.12);
    background: transparent;
    color: #6b7280;
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.new-chat-btn:hover {
    background: rgba(99,102,241,.08);
    border-color: rgba(99,102,241,.3);
    color: #6366f1;
}
.new-chat-btn svg { flex-shrink: 0; }
.chat-session-pill {
    font-size: 0.62rem;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 99px;
    padding: 2px 8px;
    color: #6b7280;
    cursor: default;
}
#workflow-state-pill.workflow-active {
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.22);
    color: #059669;
    cursor: pointer;
}
#workflow-state-pill.workflow-active:hover {
    background: rgba(16,185,129,.15);
}
#workflow-state-pill.workflow-idle {
    display: none;
}
.workflow-parallel-hint { display: none; }

/* ── Pill stop dropdown ─────────────────────────────────────────────── */
.pill-stop-wrapper {
    position: relative;
    display: inline-block;
}
.pill-stop-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 120;
    min-width: 260px;
    max-width: 340px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06);
    padding: 8px;
}
.pill-stop-header {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
    font-weight: 700;
    margin-bottom: 6px;
    padding: 0 4px;
}
.pill-stop-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pill-stop-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid rgba(0,0,0,.06);
    transition: background .15s;
}
.pill-stop-row:hover { background: #e0e7ff; }
.pill-stop-row.active { background: #dbeafe; border-color: rgba(59,130,246,.3); }
.pill-stop-goal {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    color: #111827;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pill-stop-status {
    font-size: 0.62rem;
    color: #047857;
    white-space: nowrap;
}
.pill-stop-kill {
    border: 1px solid rgba(220,38,38,.35);
    color: #b91c1c;
    background: rgba(220,38,38,.08);
    border-radius: 6px;
    font-size: 0.64rem;
    font-weight: 700;
    padding: 2px 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.pill-stop-kill:hover:not(:disabled) {
    background: rgba(220,38,38,.16);
    border-color: rgba(220,38,38,.5);
}
.pill-stop-kill:disabled {
    opacity: .5;
    cursor: default;
}
.pill-stop-all {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 5px 0;
    border: 1px solid rgba(220,38,38,.3);
    color: #b91c1c;
    background: rgba(220,38,38,.06);
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background .15s;
}
.pill-stop-all:hover {
    background: rgba(220,38,38,.14);
}

/* ── 4. CHAT THREAD ─────────────────────────────────────────────────── */
.chat-thread {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: none;
    height: auto;
    padding: 12px 24px 16px;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
}

.chat-thread > * {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

.chat-thread > * + * {
    margin-top: 2px !important;
}

.chat-thread > #chat-thread-empty[style*="display: none"] {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.chat-thread.has-messages > #chat-thread-empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
/* Padding-bottom on the container keeps last bubble above the input bar */
.chat-thread::-webkit-scrollbar { width: 6px; }
.chat-thread::-webkit-scrollbar-track { background: transparent; }
.chat-thread::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 99px; }
.chat-thread::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.18); }

/* Empty state */
.chat-thread-empty {
    position: absolute;
    inset: 12px 24px 16px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: #9ca3af;
    padding: 60px 24px;
    font-size: 0.78rem;
    line-height: 1.5;
}

.chat-thread.has-messages > *:not(#chat-thread-empty) {
    position: relative;
    z-index: 2;
}
.chat-empty-icon { color: #9ca3af; margin-bottom: 4px; }
.chat-empty-icon svg { width: 48px; height: 48px; }
.chat-empty-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #374151;
    margin: 0;
    letter-spacing: -0.3px;
}
.chat-empty-sub {
    font-size: 0.88rem;
    color: #6b7280;
    margin: 0;
    max-width: 340px;
    line-height: 1.5;
}

/* Suggestion chips in empty state */
.chat-empty-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 6px;
    max-width: 360px;
}
.chat-empty-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    font-size: 0.80rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 99px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.chat-empty-chip:hover {
    border-color: var(--primary);
    background: var(--primary-dim);
    color: var(--primary);
}

/* ── 5. CHAT BUBBLES ─────────────────────────────────────────────────── */
.chat-bubble {
    max-width: 100%;
    border: none;
    padding: 0;
    display: flex;
    width: auto;
    min-width: 0;
    flex-shrink: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.55;
    animation: bubble-in 0.25s ease;
    word-break: break-word;
    white-space: normal;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
@keyframes bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Avatar */
.chat-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Content wrapper */
.chat-bubble-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    width: auto;
    max-width: 100%;
}
.chat-bubble-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #1f2937;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    display: flow-root;
}
.chat-bubble-text p { margin: 0 0 2px; }
.chat-bubble-text p:last-child { margin-bottom: 0; }
.chat-bubble-text ul,
.chat-bubble-text ol { margin: 2px 0 4px 20px; padding: 0; }
.chat-bubble-text ul:last-child,
.chat-bubble-text ol:last-child { margin-bottom: 0; }
.chat-bubble-text li { margin: 0 0 5px; padding: 0 0 0 2px; font-size: inherit; line-height: 1.5; }
.chat-bubble-text ul li::marker { color: #6366f1; }
.chat-bubble-text ol li::marker { color: #6366f1; font-weight: 600; }
/* Section header: bold-only paragraph used as section title */
.chat-bubble-text .chat-section-header {
    margin: 14px 0 6px;
    font-weight: 700;
    font-size: 0.93em;
    line-height: 1.35;
    color: #111827;
    letter-spacing: -0.01em;
}
.chat-bubble-text .chat-section-header:first-child { margin-top: 0; }
/* Blank-line spacer between sections */
.chat-bubble-text .chat-line-break { height: 10px; }
/* Indented detail / continuation line */
.chat-bubble-text .chat-detail {
    margin: 2px 0 2px 16px;
    font-size: 0.86em;
    color: #6b7280;
    line-height: 1.45;
}
.chat-bubble-text li .chat-detail {
    margin-left: 0;
    display: inline;
    color: #6b7280;
}
.chat-bubble-text strong { font-weight: 700; }
.chat-bubble-text em { font-style: italic; }
.chat-bubble-text a {
    color: #2563eb;
    text-decoration: none;
    border-bottom: 1px solid rgba(37,99,235,.3);
    transition: border-color 0.15s, color 0.15s;
    word-break: break-all;
}
.chat-bubble-text a:hover {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
}
.chat-bubble.user .chat-bubble-text a {
    color: #ffffff;
    border-bottom-color: rgba(255,255,255,.4);
}
.chat-bubble.user .chat-bubble-text a:hover {
    border-bottom-color: #ffffff;
}
.chat-bubble-text code {
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.12);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 0.84em;
    font-family: 'Fira Code', 'Consolas', monospace;
}
/* ── Markdown tables ────────────────────────────────────────── */
.chat-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.chat-table,
.report-answer table,
.report-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 10px 0;
    font-size: 0.88em;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.chat-table th,
.report-answer table th,
.report-body table th {
    background: linear-gradient(180deg, #f8f9fb, #f1f3f5);
    padding: 8px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85em;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #e5e7eb;
}
.chat-table td,
.report-answer table td,
.report-body table td {
    padding: 8px 14px;
    border-bottom: 1px solid #f0f1f3;
    color: #1f2937;
    vertical-align: top;
}
.chat-table tbody tr:last-child td,
.report-answer table tbody tr:last-child td,
.report-body table tbody tr:last-child td { border-bottom: none; }
.chat-table tbody tr:hover,
.report-answer table tbody tr:hover,
.report-body table tbody tr:hover { background: rgba(99,102,241,.04); }
.chat-table a,
.report-answer table a,
.report-body table a { word-break: break-all; }

/* Clickable email table rows */
.email-table tbody tr[data-email-index] {
    cursor: pointer;
    transition: background 0.12s;
}
.email-table tbody tr[data-email-index]:hover {
    background: rgba(37,99,235,.07);
}
.email-table tbody tr[data-email-index]:hover td:first-child {
    color: var(--primary);
    font-weight: 600;
}

/* Email status badges */
.email-status {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.78em;
    font-weight: 600;
    white-space: nowrap;
}
.email-status--unread { background: rgba(37,99,235,.13); color: rgb(37,99,235); }
.email-status--read   { background: rgba(100,116,139,.1); color: #64748b; }
.email-status--replied { background: rgba(22,163,74,.13); color: rgb(22,163,74); }

/* Email reader modal popup */
.email-reader-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,0.48);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn .15s ease;
}
.email-reader-modal-box {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 10px 48px rgba(0,0,0,0.28);
    width: min(760px, 94vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    animation: slideUp .18s ease;
}
@keyframes slideUp {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.email-reader-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--primary-dim);
    flex-shrink: 0;
    gap: 12px;
}
.email-reader-modal-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.email-reader-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-3);
    font-size: 1.05rem;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.email-reader-modal-close:hover { background: var(--surface-3); color: var(--danger); }
.email-reader-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--text-1);
    background: var(--surface);
    flex: 1;
    word-break: break-word;
}
.email-reader-modal-loading {
    color: var(--text-3);
    font-style: italic;
    font-size: 0.84rem;
}

/* Email view — structured header + body layout */
.email-view {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.email-view-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
}
.email-view-meta-row {
    display: flex;
    gap: 10px;
    font-size: 0.84rem;
    line-height: 1.5;
    align-items: baseline;
}
.email-view-meta-label {
    flex-shrink: 0;
    width: 80px;
    font-weight: 600;
    color: var(--text-3);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.email-view-meta-value {
    color: var(--text-1);
    word-break: break-word;
}
.email-view-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 4px 0 16px;
}
.email-view-body {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--text-1);
    white-space: pre-wrap;
    word-break: break-word;
}
.email-view-iframe-wrap {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}
.email-view-iframe-loading {
    font-size: 0.8rem;
    color: var(--text-3);
    padding: 12px 0;
}
.email-view-iframe {
    width: 100%;
    min-height: 300px;
    border: none;
    background: #fff;
    border-radius: 4px;
    flex: 1;
}
.email-row-selected td {
    background: var(--primary-dim) !important;
}
.email-reader-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}
.email-reader-modal-btn {
    padding: 7px 16px;
    border-radius: 6px;
    border: none;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s, opacity .12s;
    white-space: nowrap;
}
.email-reader-modal-btn--secondary {
    background: var(--surface-2);
    color: var(--text-2);
}
.email-reader-modal-btn--secondary:hover { background: var(--surface-3); }
.email-reader-modal-btn--primary {
    background: var(--primary);
    color: #fff;
}
.email-reader-modal-btn--primary:hover { opacity: .85; }
.email-reader-modal-btn--danger {
    background: var(--danger, #e53e3e);
    color: #fff;
}
.email-reader-modal-btn--danger:hover { opacity: .85; }

.learning-review-panel {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #f59e0b 12%), var(--surface));
}
.learning-review-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.learning-review-panel__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.learning-review-panel__count {
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 70%, #f59e0b 30%);
    color: var(--text-1);
    font-size: 0.74rem;
    font-weight: 600;
}
.learning-review-panel__toggle {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-1);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.learning-review-panel__toggle:hover {
    background: var(--surface-3);
}
.learning-review-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.learning-review-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 10px 12px;
}
.learning-review-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.learning-review-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.learning-review-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.72rem;
    font-weight: 600;
}
.learning-review-chip--approved {
    background: color-mix(in srgb, #10b981 18%, var(--surface-2));
    color: #0f766e;
}
.learning-review-chip--rejected {
    background: color-mix(in srgb, #ef4444 16%, var(--surface-2));
    color: #b91c1c;
}
.learning-review-card__rule {
    margin-top: 8px;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-1);
    white-space: pre-wrap;
    word-break: break-word;
}
.learning-review-card__context {
    margin-top: 8px;
    padding: 8px 9px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.76rem;
    line-height: 1.45;
}
.learning-review-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.learning-review-btn {
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .12s, background .12s;
}
.learning-review-btn:disabled {
    cursor: wait;
    opacity: .65;
}
.learning-review-btn--approve {
    background: #0f9f6e;
    color: #fff;
}
.learning-review-btn--approve:hover:not(:disabled) { opacity: .88; }
.learning-review-btn--reject {
    background: var(--surface-2);
    color: var(--text-2);
}
.learning-review-btn--reject:hover:not(:disabled) { background: var(--surface-3); }

.knowledge-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.knowledge-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.knowledge-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.knowledge-filter-select {
    width: 150px;
}

.knowledge-refresh-btn {
    font-size: 0.72rem;
    padding: 3px 10px;
}

.knowledge-entry-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.knowledge-entry-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 84%, var(--surface-2) 16%);
}

.knowledge-entry-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.knowledge-entry-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.knowledge-entry-title {
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-1);
    word-break: break-word;
}

.knowledge-entry-date {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-3);
    white-space: nowrap;
}

.knowledge-entry-summary {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.knowledge-empty-state {
    margin-top: 2px;
}

@media (max-width: 900px) {
    .knowledge-entry-row,
    .knowledge-entry-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .knowledge-entry-row .context-managed-remove {
        width: 100%;
    }
}

/* Calendar table — clickable rows */
.calendar-table tr[data-calendar-index] {
    cursor: pointer;
    transition: background .1s;
}
.calendar-table tr[data-calendar-index]:hover td {
    background: var(--surface-2);
}
.calendar-row-selected td {
    background: var(--primary-dim) !important;
}

/* Calendar event detail view */
.calendar-event-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Calendar edit form */
.calendar-edit-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.calendar-edit-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.calendar-edit-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.calendar-edit-input {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-1);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
    width: 100%;
    box-sizing: border-box;
}
/* datetime-local colour scheme fix for dark themes */
.calendar-edit-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}
.calendar-edit-input:focus { border-color: var(--primary); }

/* Calendar delete confirmation */
.calendar-delete-confirm {
    padding: 20px 0;
    font-size: 0.9rem;
    color: var(--text-1);
    line-height: 1.6;
}

/* Draft reply editor */
.email-draft-canvas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.email-draft-toolbar {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.email-draft-toolbar-header {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.email-draft-toolbar-title {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}
.email-draft-toolbar-hint {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-3);
}
.email-draft-toolbar-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.email-draft-option-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.email-draft-option-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}
.email-draft-option-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.email-draft-option-btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.email-draft-option-btn:hover {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    color: var(--text-1);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
.email-draft-option-btn.is-selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.email-draft-canvas-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.email-draft-textarea {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.65;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-1);
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.email-draft-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.email-draft-state {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.email-draft-state--error {
    border-color: color-mix(in srgb, var(--danger, #e53e3e) 35%, var(--border));
}
.email-draft-state-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-1);
}
.email-draft-state-copy {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-2);
}
.email-draft-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.email-draft-generating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 0;
    color: var(--text-2);
    font-size: 0.9rem;
}
.email-draft-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

/* Email follow-up context bubble */
.email-context-bubble {
    display: flex;
    align-items: center;
    gap: 8px;
}
.email-context-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.email-context-reopen-btn {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    line-height: 1.6;
}
.email-context-reopen-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.email-context-hint {
    margin-top: 4px;
    font-size: 0.82rem;
    opacity: 0.7;
}

@media (max-width: 760px) {
    .email-draft-toolbar-groups {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .email-reader-modal-box {
    background: var(--surface);
    box-shadow: 0 10px 48px rgba(0,0,0,0.55);
}
[data-theme="dark"] .email-reader-modal-body,
[data-theme="dark"] .email-reader-modal-footer {
    background: var(--surface);
}
[data-theme="dark"] .learning-review-panel {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, #f59e0b 10%), var(--surface));
}

/* Citation badges */
.citation-badge {
    display: inline;
    font-size: 0.78em;
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.25);
    cursor: help;
    white-space: nowrap;
    vertical-align: baseline;
}

.chat-bubble-role {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}
.chat-bubble-meta {
    font-size: 0.62rem;
    color: #6b7280;
    margin-top: 2px;
}

/* USER bubble */
.chat-bubble.user {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 85%;
}
.chat-bubble.user .chat-avatar {
    background: #dbeafe;
    color: #2563eb;
}
.chat-bubble.user .chat-bubble-content {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #ffffff;
    border-radius: 18px 18px 4px 18px;
    padding: 8px 12px;
    box-shadow: 0 1px 3px rgba(37,99,235,.2);
}
.chat-bubble.user .chat-bubble-text { color: #ffffff; }
.chat-bubble.user .chat-bubble-role { display: none; }
.chat-bubble.user .chat-bubble-meta {
    color: rgba(255,255,255,.7);
    text-align: right;
}

/* APP / ASSISTANT bubble */
.chat-bubble.app,
.chat-bubble.assistant {
    align-self: flex-start;
    max-width: 92%;
}
.chat-bubble.app .chat-avatar,
.chat-bubble.assistant .chat-avatar {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
}
.chat-bubble.app .chat-bubble-content,
.chat-bubble.assistant .chat-bubble-content {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.chat-bubble.app .chat-bubble-meta { display: none; }

/* SYSTEM bubble */
.chat-bubble.system {
    align-self: center;
    max-width: 92%;
}
.chat-bubble.system .chat-avatar { display: none; }
.chat-bubble.system .chat-bubble-content {
    background: rgba(0,0,0,.04);
    border: 1px dashed rgba(0,0,0,.18);
    border-radius: 12px;
    padding: 6px 14px;
    text-align: center;
}
.chat-bubble.system .chat-bubble-text {
    font-size: 0.76rem;
    color: #6b7280;
}
.chat-bubble.system .chat-bubble-role { display: none; }
.chat-bubble.system.context-snapshot-bubble {
    align-self: flex-start;
    max-width: min(760px, 100%);
}
.chat-bubble.system.context-snapshot-bubble .chat-bubble-content {
    text-align: left;
}
.chat-bubble.system.context-snapshot-bubble .chat-bubble-text {
    text-align: left;
}

.chat-bubble.workflow-status {
    width: auto;
    max-width: 80%;
    align-self: flex-start;
    margin: 2px 0;
}
.chat-bubble.workflow-status .chat-bubble-content {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}
.chat-bubble.workflow-status .chat-avatar {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    font-size: 0.76rem;
}
.workflow-status-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    font-size: 0.76rem;
    line-height: 1.2;
    color: #64748b;
}
.workflow-status-pulse {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #3b82f6;
    box-shadow: 0 0 0 0 rgba(59,130,246,.28);
    flex-shrink: 0;
}
.workflow-status--working .workflow-status-pulse {
    animation: workflow-pulse 1.6s ease-out infinite;
}
.workflow-status--done .workflow-status-pulse {
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16,185,129,.10);
}
.workflow-status-label {
    font-weight: 700;
    color: #334155;
    letter-spacing: -.01em;
}
.workflow-status-detail {
    color: #94a3b8;
}
.workflow-status-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.workflow-status-dots span {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: .22;
    animation: workflow-dot 1.1s ease-in-out infinite;
}
.workflow-status-dots span:nth-child(2) { animation-delay: .14s; }
.workflow-status-dots span:nth-child(3) { animation-delay: .28s; }
.workflow-status-meta {
    margin-top: 4px;
    text-align: left;
    color: #94a3b8;
}
@keyframes workflow-pulse {
    0% { box-shadow: 0 0 0 0 rgba(59,130,246,.28); }
    70% { box-shadow: 0 0 0 9px rgba(59,130,246,0); }
    100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
@keyframes workflow-dot {
    0%, 80%, 100% { opacity: .18; transform: translateY(0); }
    40% { opacity: .7; transform: translateY(-1px); }
}

/* ── Inline report bubble in chat ────────────────────────────────────── */
.report-bubble .chat-avatar {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: #fff !important;
    font-size: 0.8rem;
}
.report-content-inline {
    max-width: 100% !important;
    width: 100%;
}
.report-body-inline {
    white-space: normal !important;
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
}
.report-body-inline .report-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.report-body-inline .report-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    opacity: .85;
}
.report-body-inline .report-kicker--ok {
    color: #047857;
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(16,185,129,.18);
}
.report-body-inline .report-kicker--warn {
    color: #b45309;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.2);
}
/* Answer section inside chat bubble — the main content */
.report-body-inline .report-answer {
    font-size: 0.88rem;
    line-height: 1.65;
}
.report-body-inline .report-answer p { margin: 0 0 8px; }
.report-body-inline .report-answer p:last-child { margin-bottom: 0; }
.report-body-inline .report-answer ul,
.report-body-inline .report-answer ol { margin: 0 0 8px 18px; padding: 0; }
.report-body-inline .report-answer li { margin: 0 0 4px; }
.report-body-inline .report-answer pre {
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 8px;
    padding: 8px 10px;
    overflow-x: auto;
    font-size: 0.82em;
}
/* Notes section inside chat bubble — collapsible, subtle */
.report-body-inline .report-notes {
    margin-top: 10px;
    background: rgba(0,0,0,.02);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #6b7280;
}
.report-body-inline .report-notes summary {
    padding: 6px 10px;
    font-size: 0.72rem;
    color: #6b7280;
}
.report-body-inline .report-notes > .report-body { padding: 0 10px 8px; }
/* Legacy minor sections */
.report-body-inline .report-section.report-minor {
    background: rgba(0,0,0,.02);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
}
.report-body-inline .report-section.report-minor h4 {
    margin: 0 0 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #065f46;
}
.report-body-inline .report-body { white-space: normal; word-break: break-word; }
.report-body-inline .report-body p { margin: 0 0 6px; }
.report-body-inline .report-body p:last-child { margin-bottom: 0; }
.report-body-inline .report-body ul,
.report-body-inline .report-body ol { margin: 0 0 6px 16px; padding: 0; }
.report-body-inline .report-body ul:last-child,
.report-body-inline .report-body ol:last-child { margin-bottom: 0; }
.report-body-inline .report-body li { margin: 0 0 3px; }
.report-body-inline .report-body code {
    background: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 0.82em;
}
.report-bubble .chat-bubble-role {
    font-weight: 700;
    color: #065f46;
    font-size: 0.72rem;
}

/* Dark: inline report */
[data-theme="dark"] .report-body-inline .report-section {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .report-body-inline .report-section h4 { color: #34d399; }
[data-theme="dark"] .report-bubble .chat-bubble-role { color: #34d399; }
[data-theme="dark"] .report-body-inline .report-body code {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.08);
}

/* ── Report output files ─────────────────────────────────────────── */
.report-output-files {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(0,0,0,.08);
}
.report-files-title {
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #374151;
}
.report-file-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin: 3px 0;
    border-radius: 6px;
    background: rgba(59,130,246,.06);
    color: #2563eb;
    text-decoration: none;
    font-size: .82rem;
    transition: background .15s;
}
.report-file-link:hover {
    background: rgba(59,130,246,.14);
}
.report-file-icon { font-size: 1.05rem; flex-shrink: 0; }
.report-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.report-file-size { font-size: .72rem; opacity: .6; flex-shrink: 0; }
[data-theme="dark"] .report-output-files { border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .report-files-title { color: #d1d5db; }
[data-theme="dark"] .report-file-link { background: rgba(96,165,250,.08); color: #60a5fa; }
[data-theme="dark"] .report-file-link:hover { background: rgba(96,165,250,.18); }

/* ── 6. COMPOSER — Rounded input bar ─────────────────────────────────── */
.composer-section {
    margin: 0 !important;
    padding: 12px 24px 6px !important;
    border: none !important;
    border-top: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    gap: 0 !important;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 -4px 12px rgba(0,0,0,.06);
}
.composer-section .form-label { display: none; }

.composer-input-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: #ffffff;
    border: 1.5px solid #c5c8cc;
    border-radius: 24px;
    padding: 6px 6px 6px 6px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    position: relative;
}
.composer-input-row:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,.16), 0 2px 8px rgba(37,99,235,.10);
    background: #ffffff;
}
.composer-input-row--dragover {
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(15,118,110,.14), 0 2px 8px rgba(15,118,110,.10);
    background: color-mix(in srgb, #ecfdf5 65%, #ffffff 35%);
}

.composer-section #goal-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 4px !important;
    resize: none;
    min-height: 24px;
    max-height: 160px;
    font-size: 0.92rem;
    line-height: 1.5;
    overflow-y: auto;
}
.composer-section #goal-input:focus {
    border: none !important;
    box-shadow: none !important;
}
.composer-section #goal-input::placeholder {
    color: #6b7280;
}

.composer-send-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
}
.composer-send-btn:hover {
    background: #1d4ed8;
    transform: scale(1.06);
}
.composer-send-btn:active {
    transform: scale(0.94);
}

/* ── Composer + attach button ─────────────────────────────────────── */
.composer-attach-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    border: 1.5px solid #d1d5db;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.composer-attach-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
    transform: scale(1.06);
}
.composer-attach-btn:active {
    transform: scale(0.94);
}

/* Attach popup */
.composer-attach-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 6px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    padding: 4px;
    z-index: 100;
    min-width: 170px;
    animation: attachPopupIn .12s ease-out;
}
@keyframes attachPopupIn {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.attach-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #374151;
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
}
.attach-option:hover {
    background: #f3f4f6;
}
.attach-option svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.attach-option-cloud {
    border-top: 1px solid #e5e7eb;
}
.attach-option-cloud:first-of-type {
    margin-top: 2px;
}

.attach-option-more {
    border-top: 1px solid #e5e7eb;
    margin-top: 2px;
}

.composer-more-submenu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding: 8px;
    border-top: 1px dashed #e5e7eb;
}

.composer-more-submenu .schedule-picker {
    width: 100%;
}

.composer-more-submenu .schedule-picker-btn {
    width: 100%;
    justify-content: space-between;
}

.composer-more-submenu .copilot-footer-control {
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.composer-more-submenu .copilot-footer-select {
    max-width: 100%;
    width: 100%;
}

.composer-more-submenu .copilot-quickstart-btn {
    width: 100%;
    justify-content: center;
}

.composer-more-submenu .schedule-picker-dropdown {
    bottom: calc(100% + 4px);
}

/* ============================
   MCP PRESET GALLERY & SERVER LIST
   ============================ */
.mcp-preset-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.mcp-preset-chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 4px 12px;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    color: var(--text-2);
    white-space: nowrap;
}
.mcp-preset-chip:hover { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }
.mcp-preset-chip.added { opacity: .45; pointer-events: none; }
.mcp-server-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mcp-server-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.mcp-server-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-3);
}
.mcp-server-status.ok { background: var(--success); }
.mcp-server-status.error { background: var(--danger); }
.mcp-server-status.pending { background: var(--warn); }
.mcp-server-info {
    flex: 1;
    min-width: 0;
}
.mcp-server-name {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-1);
}
.mcp-server-meta {
    font-size: .7rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcp-server-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.mcp-server-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .8rem;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-3);
    transition: all .15s;
}
.mcp-server-actions button:hover { background: var(--surface-3); color: var(--text-1); }
.mcp-server-actions button.remove:hover { color: var(--danger); }
/* MCP Add-server inline form */
.mcp-add-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px dashed var(--border-2);
    border-radius: var(--radius);
    margin-top: 6px;
}
.mcp-add-form .form-control { font-size: .78rem; padding: 5px 8px; }
.mcp-add-form-row { display: flex; gap: 6px; }
.mcp-add-form-row .form-control { flex: 1; }
.mcp-add-form-btns { display: flex; gap: 6px; justify-content: flex-end; }
.mcp-add-form-btns button { font-size: .75rem; padding: 4px 12px; }
.mcp-setup-title { font-size: .82rem; font-weight: 600; color: var(--text-1); }
.mcp-setup-label { font-size: .75rem; color: var(--text-2); margin-bottom: 1px; }
/* Directory browser picker */
.dir-browser-wrap { display:flex; gap:6px; align-items:center; }
.dir-browser-wrap .form-control { flex:1; }
.dir-browser-wrap .btn { flex:none; font-size:.75rem; padding:5px 12px; white-space:nowrap; }
.dir-browser-frame {
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    max-height:320px;
    display:flex; flex-direction:column;
    margin-top:6px;
    overflow:hidden;
    font-size:.82rem;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}
[data-theme="dark"] .dir-browser-frame { box-shadow:0 2px 8px rgba(0,0,0,.3); }
/* --- header bar --- */
.dir-browser-header {
    display:flex; align-items:center; gap:6px;
    padding:8px 12px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.dir-browser-back {
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px;
    border:1px solid var(--border); border-radius:6px;
    background:transparent; color:var(--text-2); cursor:pointer;
    transition:all .12s; flex-shrink:0;
}
.dir-browser-back:hover { background:var(--surface-2); border-color:var(--border-2); }
.dir-browser-back:disabled { opacity:.3; cursor:default; }
.dir-browser-back svg { width:14px; height:14px; }
/* breadcrumb path */
.dir-browser-path {
    flex:1; min-width:0;
    display:flex; align-items:center; gap:2px;
    overflow:hidden;
    font-size:.74rem; color:var(--text-3);
}
.dir-browser-path-seg {
    white-space:nowrap; cursor:pointer; color:var(--text-3);
    padding:2px 3px; border-radius:4px; transition:all .1s;
}
.dir-browser-path-seg:hover { color:var(--primary); background:var(--primary-dim); }
.dir-browser-path-seg:last-child { color:var(--text-1); font-weight:500; cursor:default; }
.dir-browser-path-seg:last-child:hover { color:var(--text-1); background:none; }
.dir-browser-path-sep { color:var(--text-3); opacity:.5; font-size:.7rem; flex-shrink:0; }
/* select button */
.dir-browser-select {
    flex-shrink:0;
    font-size:.75rem; font-weight:600;
    padding:5px 14px;
    border:none; border-radius:6px;
    background:var(--primary); color:#fff;
    cursor:pointer; transition:opacity .12s;
}
.dir-browser-select:hover { opacity:.85; }
/* --- listing --- */
.dir-browser-list {
    flex:1; overflow-y:auto; padding:4px 0;
}
.dir-browser-item {
    display:flex; align-items:center; gap:10px;
    padding:6px 14px;
    cursor:pointer; transition:background .1s;
    color:var(--text-1); user-select:none;
}
.dir-browser-item:hover { background:var(--surface-2); }
.dir-browser-item-icon {
    flex-shrink:0; width:20px; height:20px;
    display:flex; align-items:center; justify-content:center;
    color:var(--warn);
}
.dir-browser-item-icon svg { width:18px; height:18px; }
.dir-browser-item-icon.drive-icon { color:var(--text-3); }
.dir-browser-item-name {
    flex:1; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
}
.dir-browser-item .dir-chevron {
    flex-shrink:0; width:14px; height:14px;
    color:var(--text-3); opacity:0;
    transition:opacity .12s;
}
.dir-browser-item:hover .dir-chevron { opacity:.7; }
/* --- empty / loading --- */
.dir-browser-empty {
    text-align:center; padding:28px 16px;
    color:var(--text-3); font-size:.8rem;
}
.dir-browser-empty svg { width:28px; height:28px; margin-bottom:6px; opacity:.35; }
/* --- spinner --- */
@keyframes dir-spin { to { transform:rotate(360deg); } }
.dir-browser-spinner {
    width:18px; height:18px;
    border:2px solid var(--border);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:dir-spin .6s linear infinite;
    margin:0 auto;
}

/* ============================
   CLOUD FILE BROWSER MODAL
   ============================ */
.cloud-browser-overlay {
    /* keep position:fixed from .approval-overlay — absolute gets clipped by .app overflow:hidden */
}

.cloud-browser-modal {
    width: 520px;
    max-width: 95vw;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cloud-browser-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.cloud-browser-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cloud-browser-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.12s;
}
.cloud-browser-back-btn:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--border-2);
}
.cloud-browser-back-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.cloud-browser-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-1);
}
.cloud-browser-path {
    padding: 6px 16px;
    font-size: 0.74rem;
    color: var(--text-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cloud-browser-list {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
    max-height: 420px;
    padding: 4px 0;
}
.cloud-browser-loading {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-3);
    font-size: 0.82rem;
}
.cloud-browser-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-3);
    font-size: 0.82rem;
}
.cloud-browser-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 0.82rem;
    color: var(--text-1);
    user-select: none;
}
.cloud-browser-item:hover {
    background: var(--surface-2);
}
.cloud-browser-item.selected {
    background: var(--primary-dim);
}
.cloud-browser-item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
}
.cloud-browser-item-icon.folder-icon {
    color: var(--warn);
}
.cloud-browser-item-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border-2);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.cloud-browser-item.selected .cloud-browser-item-check {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.cloud-browser-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cloud-browser-item-size {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-3);
}
.cloud-browser-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
#cloud-browser-selected-count {
    font-size: 0.78rem;
    color: var(--text-3);
}

/* Dark mode overrides for cloud browser */
[data-theme="dark"] .attach-option-cloud {
    border-top-color: #30363d;
}
[data-theme="dark"] .attach-option-more { border-top-color: #30363d; }
[data-theme="dark"] .composer-more-submenu { border-top-color: #30363d; }

/* Attachment chips row */
.attachment-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 4px 6px;
}
.attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 4px 10px;
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    border-radius: 99px;
    font-size: 0.75rem;
    color: #3b5998;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.attach-chip.folder {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}
.attach-chip svg {
    flex-shrink: 0;
    opacity: 0.6;
}
.attach-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: rgba(0,0,0,.08);
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 2px;
    transition: background 0.12s;
}
.attach-chip-remove:hover {
    background: rgba(0,0,0,.18);
}

#goal-mode-hint {
    display: block !important;
    font-size: .66rem;
    color: #b0b5bf;
    margin: 5px 14px 0 !important;
    line-height: 1.3;
}

@keyframes goal-hint-spin {
    to { transform: rotate(360deg); }
}
@keyframes goal-hint-sheen {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes goal-hint-breathe {
    0%, 100% { opacity: .98; box-shadow: 0 0 0 rgba(59,130,246,0); }
    50% { opacity: 1; box-shadow: 0 6px 20px rgba(37,99,235,0.18); }
}

#goal-mode-hint.is-models-loading {
    color: #0f172a;
    font-weight: 800;
    letter-spacing: .01em;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid rgba(59,130,246,.25);
    background: linear-gradient(90deg, rgba(59,130,246,.16), rgba(16,185,129,.14), rgba(59,130,246,.16));
    background-size: 220% 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: goal-hint-sheen 1.8s linear infinite, goal-hint-breathe 1.2s ease-in-out infinite;
}

#goal-mode-hint.is-models-loading::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(15,23,42,.25);
    border-top-color: #2563eb;
    animation: goal-hint-spin .85s linear infinite;
    flex-shrink: 0;
}

/* ── 7. FOOTER — Compact action toolbar ─────────────────────────────── */
.agent-panel-footer {
    padding: 4px 24px 14px;
    border-top: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    background: #ffffff;
}

#start-btn {
    width: auto;
}
#start-btn {
    min-width: auto;
    border-radius: 99px;
    font-size: 0.76rem;
    padding: 7px 16px;
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid rgba(0,0,0,.1);
}
#start-btn:hover:not(:disabled) {
    background: #e5e7eb;
    color: #1f2937;
    transform: none;
}
#start-btn svg { fill: #4b5563; }


/* ── 8. POLISH — Subtle refinements ─────────────────────────────────── */
.ws-health {
    width: 7px;
    height: 7px;
}
.ws-health.connected {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
.ws-health.disconnected {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

/* Cleaner icon buttons */
.icon-btn {
    border-radius: 8px;
    border-color: rgba(0,0,0,.08);
}
.icon-btn:hover {
    background: rgba(0,0,0,.04);
}

/* Cleaner modals */
.approval-modal {
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
}

/* Settings modal polish */
.settings-modal {
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
}
.settings-nav {
    background: #fafafa;
    border-right: 1px solid rgba(0,0,0,.06);
}
.settings-nav-item {
    border-radius: 8px;
}
.settings-nav-item.active {
    background: #2563eb;
    color: #ffffff;
}

/* Scrollbar polish for history panes */
.agent-panel-history-panes::-webkit-scrollbar { width: 4px; }
.agent-panel-history-panes::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 99px; }

/* Lane log stays visible so full agent/chat output remains readable */
.lane-log { display: flex; }

/* ── Theme Toggle Switch ──────────────────────────────────────────────── */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 99px;
    padding: 4px 10px 4px 8px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-3);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.22);
    color: var(--text-2);
}
.theme-toggle svg { transition: transform 0.3s ease; }
.theme-toggle:hover svg { transform: rotate(30deg); }

/* ── DARK MODE OVERRIDES ──────────────────────────────────────────────── */
[data-theme="dark"] .app { background: #0d1117; }
[data-theme="dark"] .exploration-history { background: #0d1117; }

/* Dark: agent panel */
[data-theme="dark"] .agent-panel { background: #0d1117; }
[data-theme="dark"] .agent-panel-header {
    background: #0d1117;
    border-color: #21262d;
}
[data-theme="dark"] .logo-text { color: #e6edf3; }

/* Dark: chat */
[data-theme="dark"] .chat-dialog-header-row { border-color: rgba(255,255,255,.05); }
[data-theme="dark"] .new-chat-btn {
    border-color: rgba(255,255,255,.1);
    color: #6e7681;
}
[data-theme="dark"] .new-chat-btn:hover {
    background: rgba(99,102,241,.12);
    border-color: rgba(99,102,241,.35);
    color: #818cf8;
}
[data-theme="dark"] .chat-session-pill {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
    color: #6e7681;
}
[data-theme="dark"] .pill-stop-dropdown {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
[data-theme="dark"] .pill-stop-header { color: #8b949e; }
[data-theme="dark"] .pill-stop-row {
    background: #0d1117;
    border-color: #21262d;
}
[data-theme="dark"] .pill-stop-row:hover { background: #161b22; }
[data-theme="dark"] .pill-stop-row.active { background: #1c2333; border-color: rgba(56,139,253,.35); }
[data-theme="dark"] .pill-stop-goal { color: #c9d1d9; }
[data-theme="dark"] .pill-stop-status { color: #34d399; }
[data-theme="dark"] .pill-stop-kill {
    color: #fca5a5;
    background: rgba(239,68,68,.16);
    border-color: rgba(239,68,68,.45);
}
[data-theme="dark"] .pill-stop-kill:hover:not(:disabled) {
    color: #fecaca;
    background: rgba(239,68,68,.24);
    border-color: rgba(248,113,113,.6);
}
[data-theme="dark"] .pill-stop-all {
    color: #fca5a5;
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.35);
}
[data-theme="dark"] .pill-stop-all:hover {
    background: rgba(239,68,68,.22);
}
[data-theme="dark"] .chat-empty-title { color: #c9d1d9; }
[data-theme="dark"] .chat-empty-sub { color: #6e7681; }
[data-theme="dark"] .chat-empty-icon { color: #30363d; }
[data-theme="dark"] .chat-empty-chip {
    background: #161b22;
    border-color: #30363d;
    color: #8b949e;
}
[data-theme="dark"] .chat-empty-chip:hover {
    border-color: #58a6ff;
    background: rgba(88,166,255,.1);
    color: #58a6ff;
}
[data-theme="dark"] .footer-more-btn {
    border-color: #30363d;
    color: #6e7681;
}
[data-theme="dark"] .footer-more-btn:hover {
    background: rgba(255,255,255,.05);
    border-color: #484f58;
    color: #8b949e;
}
[data-theme="dark"] .footer-more-btn.active {
    color: #58a6ff;
    border-color: #58a6ff;
    background: rgba(88,166,255,.1);
}

/* Dark: bubbles */
[data-theme="dark"] .chat-bubble.user .chat-bubble-content {
    background: #1f6feb;
    color: #ffffff;
}
[data-theme="dark"] .chat-bubble.user .chat-bubble-text { color: #ffffff; }
[data-theme="dark"] .chat-bubble.user .chat-avatar {
    background: rgba(31,111,235,.25);
    color: #58a6ff;
}
[data-theme="dark"] .chat-bubble.app .chat-bubble-content,
[data-theme="dark"] .chat-bubble.assistant .chat-bubble-content {
    background: #161b22;
    border: 1px solid #21262d;
}
[data-theme="dark"] .chat-bubble-text { color: #c9d1d9; }
[data-theme="dark"] .chat-bubble.app .chat-avatar,
[data-theme="dark"] .chat-bubble.assistant .chat-avatar {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
[data-theme="dark"] .chat-bubble.system .chat-bubble-content {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .chat-bubble.system .chat-bubble-text { color: #6e7681; }
[data-theme="dark"] .workflow-status-row { color: #7d8590; }
[data-theme="dark"] .workflow-status-label { color: #e6edf3; }
[data-theme="dark"] .workflow-status-detail,
[data-theme="dark"] .workflow-status-meta { color: #8b949e; }
[data-theme="dark"] .workflow-status--working .workflow-status-pulse {
    background: #58a6ff;
}
[data-theme="dark"] .workflow-status--done .workflow-status-pulse {
    background: #3fb950;
    box-shadow: 0 0 0 4px rgba(63,185,80,.12);
}
[data-theme="dark"] .report-body-inline .report-kicker--ok {
    color: #34d399;
    background: rgba(16,185,129,.14);
    border-color: rgba(52,211,153,.18);
}
[data-theme="dark"] .report-body-inline .report-kicker--warn {
    color: #fbbf24;
    background: rgba(245,158,11,.16);
    border-color: rgba(251,191,36,.18);
}

[data-theme="dark"] .chat-bubble-text code {
    background: rgba(255,255,255,.08);
}
[data-theme="dark"] .chat-table,
[data-theme="dark"] .report-answer table,
[data-theme="dark"] .chat-bubble.system.context-snapshot-bubble .chat-bubble-text { color: #9aa4b2; }
[data-theme="dark"] .report-body table {
    border-color: #21262d;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
[data-theme="dark"] .chat-table th,
[data-theme="dark"] .report-answer table th,
[data-theme="dark"] .report-body table th {
    background: linear-gradient(180deg, #161b22, #0d1117);
    color: #c9d1d9;
    border-bottom-color: #21262d;
}
[data-theme="dark"] .chat-table td,
[data-theme="dark"] .report-answer table td,
[data-theme="dark"] .report-body table td {
    color: #c9d1d9;
    border-bottom-color: #21262d;
}
[data-theme="dark"] .chat-table tbody tr:hover,
[data-theme="dark"] .report-answer table tbody tr:hover,
[data-theme="dark"] .report-body table tbody tr:hover { background: rgba(99,102,241,.08); }

[data-theme="dark"] .email-table tbody tr[data-email-index]:hover {
    background: rgba(88,166,255,.10);
}
[data-theme="dark"] .email-table tbody tr[data-email-index]:hover td:first-child {
    color: #58a6ff;
}
[data-theme="dark"] .email-status--unread  { background: rgba(88,166,255,.15); color: #58a6ff; }
[data-theme="dark"] .email-status--read    { background: rgba(148,163,184,.1); color: #94a3b8; }
[data-theme="dark"] .email-status--replied { background: rgba(74,222,128,.13); color: #4ade80; }

/* Dark: citation badges */
[data-theme="dark"] .citation-badge {
    background: rgba(129,140,248,.15);
    color: #a5b4fc;
    border-color: rgba(129,140,248,.3);
}

/* Dark: composer */
[data-theme="dark"] .composer-section {
    background: #0d1117 !important;
    border-color: rgba(255,255,255,.05) !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,.3);
}
[data-theme="dark"] .composer-input-row {
    background: #161b22;
    border-color: #30363d;
}
[data-theme="dark"] .composer-input-row:focus-within {
    border-color: rgba(88,166,255,.7);
    box-shadow: 0 0 0 4px rgba(88,166,255,.15), 0 2px 8px rgba(88,166,255,.08);
    background: #1c2129;
}
[data-theme="dark"] .composer-input-row--dragover {
    border-color: #34d399;
    box-shadow: 0 0 0 4px rgba(52,211,153,.18), 0 2px 8px rgba(52,211,153,.12);
    background: color-mix(in srgb, #052e2b 55%, #0d1117 45%);
}
[data-theme="dark"] .composer-section #goal-input { color: #c9d1d9; }
[data-theme="dark"] .composer-section #goal-input::placeholder { color: #484f58; }
[data-theme="dark"] .composer-send-btn { background: #1f6feb; }
[data-theme="dark"] .composer-send-btn:hover { background: #388bfd; }
[data-theme="dark"] .composer-attach-btn { color: #8b949e; border-color: #30363d; }
[data-theme="dark"] .composer-attach-btn:hover { background: #21262d; border-color: #484f58; color: #c9d1d9; }
[data-theme="dark"] .composer-attach-popup { background: #161b22; border-color: #30363d; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
[data-theme="dark"] .attach-option { color: #c9d1d9; }
[data-theme="dark"] .attach-option:hover { background: #21262d; }
[data-theme="dark"] .attach-chip { background: #1c2333; border-color: #2d3a5c; color: #7da0d4; }
[data-theme="dark"] .attach-chip.folder { background: #0d2818; border-color: #1a4d2e; color: #56d364; }
[data-theme="dark"] .attach-chip-remove { background: rgba(255,255,255,.08); }
[data-theme="dark"] .attach-chip-remove:hover { background: rgba(255,255,255,.16); }

/* Dark: footer buttons */
[data-theme="dark"] #start-btn {
    background: #21262d;
    color: #c9d1d9;
    border-color: #30363d;
}
[data-theme="dark"] #start-btn:hover:not(:disabled) {
    background: #30363d;
    color: #e6edf3;
}
[data-theme="dark"] #goal-mode-hint { color: #484f58; }
[data-theme="dark"] #goal-mode-hint.is-models-loading {
    color: #e6edf3;
    font-weight: 800;
    border-color: rgba(56,139,253,.35);
    background: linear-gradient(90deg, rgba(56,139,253,.22), rgba(45,212,191,.18), rgba(56,139,253,.22));
    background-size: 220% 100%;
}
[data-theme="dark"] #goal-mode-hint.is-models-loading::before {
    border-color: rgba(230,237,243,.28);
    border-top-color: #58a6ff;
}

@media (prefers-reduced-motion: reduce) {
    #goal-mode-hint.is-models-loading {
        animation: none !important;
    }
    #goal-mode-hint.is-models-loading::before {
        animation: none !important;
    }
}
[data-theme="dark"] .agent-panel-footer { background: #0d1117; }

/* Dark: runs / lanes */
[data-theme="dark"] .runs-empty-hint {
    border-color: #21262d;
    color: #6e7681;
}
[data-theme="dark"] .run-lane {
    background: #161b22;
    border-color: #21262d;
    box-shadow: none;
}
[data-theme="dark"] .lane-header { background: #1c2129; border-color: #21262d; }
[data-theme="dark"] .lane-agents { background: #1c2129; border-color: #21262d; }
[data-theme="dark"] .lane-agents .agent-card {
    background: #161b22;
    border-color: #30363d;
}
[data-theme="dark"] .lane-agents .agent-connector::before {
    background: #30363d;
}
[data-theme="dark"] .lane-agents .agent-connector::after {
    border-top-color: #30363d;
}
[data-theme="dark"] .lane-agents .agent-connector.flash::before {
    background: var(--primary);
}
[data-theme="dark"] .lane-agents .agent-connector.flash::after {
    border-top-color: var(--primary);
}

/* Dark: session cards */
[data-theme="dark"] .session-card {
    background: #161b22;
    border-color: #21262d;
    box-shadow: none;
}
[data-theme="dark"] .session-card:hover {
    border-color: #30363d;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
[data-theme="dark"] .session-card-goal { color: #c9d1d9; }
[data-theme="dark"] .session-card-meta { color: #6e7681; }
[data-theme="dark"] .sessions-section-title { color: #6e7681; }
[data-theme="dark"] .sessions-schedule-section { border-bottom-color: #21262d; }
[data-theme="dark"] .btn-xs {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}
[data-theme="dark"] .btn-xs:hover {
    background: #30363d;
    color: #e6edf3;
}
[data-theme="dark"] .btn-xs.danger { color: #c9d1d9; border-color: #30363d; }
[data-theme="dark"] .btn-xs.danger:hover { background: #30363d; color: #e6edf3; }
[data-theme="dark"] .btn-xs.active { border-color: #3fb950; color: #3fb950; }
[data-theme="dark"] .btn-xs.active:hover { background: rgba(63,185,80,.1); }

/* Dark: modals */
[data-theme="dark"] .approval-overlay { background: rgba(0,0,0,.6); }
[data-theme="dark"] .approval-modal {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
[data-theme="dark"] .settings-nav { background: #0d1117; border-color: #21262d; }
[data-theme="dark"] .settings-dialog-body { border-color: #21262d; }
[data-theme="dark"] .settings-pane .form-control {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

/* Dark: help modal */
[data-theme="dark"] .help-content code {
    background: #0d1117;
    border-color: #30363d;
    color: #79c0ff;
}
[data-theme="dark"] .help-content kbd {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
    box-shadow: 0 1px 1px rgba(0,0,0,.3);
}
[data-theme="dark"] .help-shortcuts-table td {
    border-color: #21262d;
    color: #c9d1d9;
}

/* Dark: toggle */
[data-theme="dark"] .theme-toggle {
    border-color: rgba(255,255,255,.1);
    color: #6e7681;
}
[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.16);
    color: #8b949e;
}

/* Dark: icon buttons */
[data-theme="dark"] .icon-btn {
    border-color: #30363d;
    color: #6e7681;
}
[data-theme="dark"] .icon-btn:hover {
    background: rgba(255,255,255,.05);
    color: #8b949e;
}

/* Dark: history header */
[data-theme="dark"] .exploration-history .agent-panel-history-header {
    border-color: #21262d;
}
[data-theme="dark"] .exploration-history .agent-panel-history-header::before {
    color: #484f58;
}

/* Dark: scrollbar */
[data-theme="dark"] .chat-thread::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }
[data-theme="dark"] .agent-panel-history-panes::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }
[data-theme="dark"] .agent-panel-form::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

/* ============================
   SCHEDULER — Composer Picker
   ============================ */
.composer-hints-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 5px 14px 0;
    position: relative;
    min-height: 24px;
}
.composer-hints-row #goal-mode-hint {
    margin: 0 !important;
}
.composer-hints-row #goal-mode-hint.is-models-loading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 1;
}

/* Schedule picker button + dropdown */
.schedule-picker {
    position: relative;
    flex-shrink: 0;
}

/* Footer more-options button & panel */
.footer-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 0.76rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.footer-more-btn:hover {
    border-color: var(--border-2);
    color: var(--text-2);
    background: var(--surface-2);
}
.footer-more-btn.active {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-dim);
}
.footer-more-panel {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.agent-panel-footer .copilot-footer-control {
    margin-left: 2px;
}

.agent-panel-footer .copilot-footer-select {
    max-width: 180px;
}

.schedule-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px 7px 10px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}
.schedule-picker-btn:hover {
    border-color: var(--border-2);
    color: var(--text-2);
    background: var(--surface-2);
}
.schedule-picker-btn.active {
    color: var(--primary);
    border-color: rgba(5,150,105,.35);
    background: rgba(5,150,105,.06);
}

.schedule-picker-dropdown {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    padding: 6px 0;
    min-width: 180px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    z-index: 500;
    animation: schedDropIn 0.12s ease-out;
}
@keyframes schedDropIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.schedule-dropdown-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.78rem;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.1s;
}
.schedule-dropdown-option:hover {
    background: var(--surface-2);
}

.schedule-opt-check {
    width: 14px;
    text-align: center;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 600;
}

.schedule-interval-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 6px 32px;
}

.schedule-interval-input {
    width: 50px;
    padding: 3px 6px;
    font-size: 0.76rem;
    border: 1px solid var(--border-2);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-1);
    text-align: center;
    outline: none;
}
.schedule-interval-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(5,150,105,.12);
}

.schedule-unit-select {
    padding: 3px 6px;
    font-size: 0.76rem;
    border: 1px solid var(--border-2);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-1);
    outline: none;
    cursor: pointer;
}
.schedule-unit-select:focus {
    border-color: var(--primary);
}

/* First-run datetime row */
.schedule-first-run-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 12px 6px 32px;
}
.schedule-first-run-label {
    font-size: 0.74rem;
    color: var(--text-2);
    white-space: nowrap;
}
.schedule-first-run-input {
    flex: 1;
    padding: 3px 6px;
    font-size: 0.76rem;
    border: 1px solid var(--border-2);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-1);
    outline: none;
    min-width: 0;
}
.schedule-first-run-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(5,150,105,.12);
}

/* Remove spinner for number input */
.schedule-interval-input::-webkit-inner-spin-button,
.schedule-interval-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================
   SCHEDULER — Schedule Cards
   ============================ */
.schedules-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-3);
    font-size: 0.82rem;
    line-height: 1.5;
}
.schedules-empty svg {
    display: block;
    margin: 0 auto 10px;
    opacity: .3;
}

.schedule-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: border-color 0.15s, opacity 0.2s;
}

.schedule-card:hover { border-color: var(--border-2); }

.schedule-card.disabled {
    opacity: 0.5;
}
.schedule-card.disabled .schedule-card-goal { text-decoration: line-through; }

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

.schedule-card-goal {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-1);
    line-height: 1.35;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.schedule-card-meta {
    font-size: 0.72rem;
    color: var(--text-3);
    margin-bottom: 6px;
    line-height: 1.4;
}

.schedule-source-badge {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 99px;
    background: var(--primary-dim);
    color: var(--primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.schedule-card-actions {
    display: flex;
    gap: 6px;
}

/* Inline edit form */
.schedule-card-editing {
    border-color: var(--primary);
}
.schedule-edit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.schedule-edit-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}
.schedule-edit-input {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.82rem;
    padding: 6px 8px;
    resize: vertical;
    min-height: 36px;
}
.schedule-edit-input:focus {
    outline: none;
    border-color: var(--primary);
}
.schedule-edit-interval-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.schedule-interval-input {
    width: 64px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.82rem;
    padding: 4px 6px;
    text-align: center;
}
.schedule-interval-input:focus {
    outline: none;
    border-color: var(--primary);
}
.schedule-unit-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.82rem;
    padding: 4px 8px;
}
.schedule-unit-select:focus {
    outline: none;
    border-color: var(--primary);
}
.schedule-edit-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* Toggle switch */
.schedule-toggle {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

.schedule-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.schedule-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border-2);
    border-radius: 99px;
    transition: background 0.2s;
}

.schedule-toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.schedule-toggle input:checked + .schedule-toggle-slider {
    background: var(--primary);
}

.schedule-toggle input:checked + .schedule-toggle-slider::before {
    transform: translateX(14px);
}

/* ============================
   SCHEDULER — Popover (history cards)
   ============================ */
.schedule-popover {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    min-width: 220px;
    animation: popIn 0.15s ease-out;
}

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

.schedule-popover-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 10px;
}

.schedule-popover-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 0.78rem;
    color: var(--text-2);
}

.schedule-popover-row .schedule-interval-input,
.schedule-popover-row .schedule-unit-select {
    font-size: 0.78rem;
    padding: 4px 8px;
}

.schedule-popover .schedule-first-run-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 0;
    font-size: 0.78rem;
}
.schedule-popover .schedule-first-run-input {
    font-size: 0.78rem;
    padding: 4px 8px;
}

.schedule-popover-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}



/* ============================
   SCHEDULER — Dark mode
   ============================ */
[data-theme="dark"] .schedule-picker-btn {
    color: #6e7681;
    border-color: #30363d;
}
[data-theme="dark"] .schedule-picker-btn:hover {
    color: #8b949e;
    border-color: #484f58;
    background: rgba(255,255,255,.04);
}
[data-theme="dark"] .schedule-picker-btn.active {
    color: var(--primary);
    border-color: rgba(5,150,105,.35);
    background: rgba(5,150,105,.08);
}

[data-theme="dark"] .schedule-picker-dropdown {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
[data-theme="dark"] .schedule-dropdown-option { color: #c9d1d9; }
[data-theme="dark"] .schedule-dropdown-option:hover { background: rgba(255,255,255,.04); }

[data-theme="dark"] .schedule-interval-input {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}
[data-theme="dark"] .schedule-unit-select {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}
[data-theme="dark"] .schedule-first-run-input {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .schedule-card {
    background: #161b22;
    border-color: #30363d;
}
[data-theme="dark"] .schedule-card:hover { border-color: #484f58; }
[data-theme="dark"] .schedule-card-goal { color: #c9d1d9; }
[data-theme="dark"] .schedule-card-meta { color: #6e7681; }

[data-theme="dark"] .schedule-toggle-slider { background: #484f58; }
[data-theme="dark"] .schedule-toggle-slider::before { background: #c9d1d9; }

[data-theme="dark"] .schedule-popover {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
[data-theme="dark"] .schedule-popover-title { color: #c9d1d9; }
[data-theme="dark"] .schedule-popover-row { color: #8b949e; }


/* ============================
   SETUP WIZARD
   ============================ */
.setup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: setupFadeIn .3s ease;
}
@keyframes setupFadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ── Ollama Library Grid ──────────────────────────────────────────────────── */
.ollama-pull-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.ollama-installed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    min-height: 24px;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.ollama-installed-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px 3px 10px;
    font-size: .73rem;
    color: var(--text);
    line-height: 1;
}
.ollama-installed-chip.cloud-chip {
    background: rgba(99, 102, 241, .12);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
    cursor: default;
}
.ollama-installed-chip .chip-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: 50%;
    font-size: .7rem;
    padding: 0;
    transition: background .15s, color .15s;
}
.ollama-installed-chip .chip-delete:hover {
    background: var(--danger);
    color: #fff;
}

.setup-wizard {
    width: 620px;
    max-width: 96vw;
    max-height: 92vh;
    background: var(--surface);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,.25), 0 0 0 1px var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: setupSlideUp .35s ease;
}
@keyframes setupSlideUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }

/* Progress bar */
.setup-progress {
    height: 4px;
    background: var(--surface-3);
    position: relative;
    flex-shrink: 0;
}
.setup-progress-bar {
    height: 100%;
    width: 20%;
    background: linear-gradient(90deg, var(--primary), #818cf8);
    border-radius: 0 4px 4px 0;
    transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* Step indicators */
.setup-step-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 24px 0;
    flex-shrink: 0;
}
.setup-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text-3);
    font-size: .72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: all .25s ease;
    position: relative;
}
.setup-dot.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px var(--primary-dim);
}
.setup-dot.done {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}
.setup-dot + .setup-dot::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--border);
    transform: translateX(-2px);
}
.setup-dot.active + .setup-dot::before,
.setup-dot.done + .setup-dot::before { background: var(--primary); }

/* Steps container */
.setup-steps {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    min-height: 360px;
}
.setup-step { display: none; animation: setupStepIn .3s ease; }
.setup-step.active { display: block; }
@keyframes setupStepIn { from { opacity: 0; transform: translateX(16px) } to { opacity: 1; transform: translateX(0) } }

.setup-step-icon {
    text-align: center;
    margin-bottom: 12px;
}
.setup-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-1);
    text-align: center;
    margin-bottom: 6px;
}
.setup-subtitle {
    font-size: .88rem;
    color: var(--text-3);
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}
.setup-hint {
    font-size: .78rem;
    color: var(--text-3);
    text-align: center;
    margin-top: 16px;
    line-height: 1.5;
}

/* Checklist on welcome */
.setup-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 300px;
    margin: 20px auto 0;
}
.setup-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    color: var(--text-2);
}
.setup-check {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--success-dim);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Setup cards */
.setup-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--surface);
    transition: border-color .2s, box-shadow .2s;
}
.setup-card:hover {
    border-color: var(--border-2);
}
.setup-card-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.setup-card-icon-wrap {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.setup-card-emoji { font-size: 1.2rem; }
.setup-card-info { flex: 1; min-width: 0; }
.setup-card-info h3 {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.setup-card-info p {
    font-size: .78rem;
    color: var(--text-3);
    line-height: 1.4;
}
.setup-card-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--text-3);
    flex-shrink: 0;
}
.setup-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.setup-status-dot.checking { background: var(--warn); animation: pulse 1.2s infinite; }
.setup-status-dot.ok { background: var(--success); }
.setup-status-dot.err { background: var(--danger); }

.setup-included-check {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--success-dim);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 700;
    flex-shrink: 0;
}

.setup-card-detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--surface-3);
    font-size: .78rem;
    color: var(--text-3);
}

/* Folder picker */
.setup-folder-row { display: flex; flex-direction: column; }
.setup-folder-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.setup-folder-tag {
    background: var(--surface-2);
    color: var(--text-2);
    font-family: var(--font-mono, monospace);
    font-size: .75rem;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
}
.setup-dir-ok { color: var(--success); font-weight: 600; }
.setup-dir-err { color: var(--danger, #e5534b); font-weight: 600; }

/* Expandable area for API key inputs */
.setup-card-expand {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--surface-3);
    animation: setupExpandIn .25s ease;
}
@keyframes setupExpandIn { from { opacity: 0; max-height: 0 } to { opacity: 1; max-height: 200px } }

.setup-field-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.setup-link {
    display: inline-block;
    margin-top: 6px;
    font-size: .78rem;
    color: var(--primary);
    text-decoration: none;
}
.setup-link:hover { text-decoration: underline; }

.setup-field-hint {
    font-size: .76rem;
    color: var(--text-3);
    margin-top: 8px;
    line-height: 1.45;
}
.setup-field-hint a { color: var(--primary); text-decoration: none; }
.setup-field-hint a:hover { text-decoration: underline; }

/* Badge styles */
.setup-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: .64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}
.setup-badge.required { background: var(--primary-dim); color: var(--primary); }
.setup-badge.optional { background: var(--surface-3); color: var(--text-3); }
.setup-badge.included { background: var(--success-dim); color: var(--success); }

/* Summary on final step */
.setup-summary {
    max-width: 440px;
    margin: 16px auto 0;
    text-align: left;
}
.setup-summary-group {
    margin-bottom: 14px;
}
.setup-summary-group h4 {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-3);
    margin-bottom: 6px;
}
.setup-summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: .84rem;
    color: var(--text-2);
}
.setup-summary-icon {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    flex-shrink: 0;
}
.setup-summary-icon.ok { background: var(--success-dim); color: var(--success); }
.setup-summary-icon.skip { background: var(--surface-3); color: var(--text-3); }

/* Footer */
.setup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px 20px;
    flex-shrink: 0;
    border-top: 1px solid var(--surface-3);
}
.setup-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.setup-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 120px;
    justify-content: center;
}
.setup-footer .btn.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-3);
    min-width: auto;
    font-size: .8rem;
    padding: 6px 12px;
    cursor: pointer;
    transition: color .15s;
}
.setup-footer .btn.btn-ghost:hover { color: var(--danger, #ef4444); }
.setup-footer .btn svg { flex-shrink: 0; }

/* Dark mode overrides */
[data-theme="dark"] .setup-wizard {
    background: #161b22;
    box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px #30363d;
}
[data-theme="dark"] .setup-card {
    background: #1c2129;
    border-color: #30363d;
}
[data-theme="dark"] .setup-card:hover { border-color: #484f58; }
[data-theme="dark"] .setup-card-icon-wrap { background: #21262d; }
[data-theme="dark"] .setup-card-detail { border-color: #21262d; }
[data-theme="dark"] .setup-card-expand { border-color: #21262d; }
[data-theme="dark"] .setup-progress { background: #21262d; }
[data-theme="dark"] .setup-dot { border-color: #30363d; background: #1c2129; color: #6e7681; }
[data-theme="dark"] .setup-dot + .setup-dot::before { background: #30363d; }
[data-theme="dark"] .setup-footer { border-color: #21262d; }

/* ── Server Offline Overlay ──────────────────────────────────────────── */
.server-offline-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.server-offline-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 40px 48px;
    text-align: center;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
}
.server-offline-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}
.server-offline-close:hover {
    background: rgba(148, 163, 184, 0.14);
    color: #0f172a;
}
.server-offline-icon {
    color: #ef4444;
    margin-bottom: 16px;
}
.server-offline-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #0f172a;
}
.server-offline-sub {
    font-size: .875rem;
    color: #64748b;
    margin: 0 0 24px;
}
.server-offline-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 16px;
}
.server-offline-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 120px;
    justify-content: center;
}
.server-offline-actions .btn svg { flex-shrink: 0; }
.server-offline-hint {
    font-size: .75rem;
    color: #94a3b8;
    margin: 0;
}
.server-offline-hint.ok   { color: #22c55e; }
.server-offline-hint.err  { color: #ef4444; }
.server-offline-hint.busy { color: #3b82f6; }

[data-theme="dark"] .server-offline-overlay { background: rgba(0,0,0,.6); }
[data-theme="dark"] .server-offline-card {
    background: #1e293b;
    box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="dark"] .server-offline-close { color: #94a3b8; }
[data-theme="dark"] .server-offline-close:hover {
    background: rgba(148, 163, 184, 0.16);
    color: #f1f5f9;
}
[data-theme="dark"] .server-offline-title { color: #f1f5f9; }
[data-theme="dark"] .server-offline-sub   { color: #94a3b8; }
[data-theme="dark"] .server-offline-hint  { color: #64748b; }

/* ── Setup Wizard ─────────────────────────────────────────────────────────── */
.wizard-modal {
    width: min(480px, 92vw);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.wizard-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wizard-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}
.wizard-progress {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.wizard-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width .3s ease;
}
.wizard-step {
    display: none;
    flex-direction: column;
    gap: 10px;
}
.wizard-step.active { display: flex; }
.wizard-step h4 {
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0;
}
.wizard-integration-row {
    padding: 6px 0;
}
.wizard-integration-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}
.wizard-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.btn-primary {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    transition: background .15s;
}
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    transition: background .15s;
}
.btn-secondary:hover { background: var(--surface-2); }

/* ── Toast Notifications ──────────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    box-shadow: 0 6px 24px rgba(15,23,42,.12);
    font-size: 0.83rem;
    color: var(--text-1);
    max-width: 380px;
    animation: toast-in .25s ease;
    transition: opacity .2s, transform .2s;
}
.toast.toast-out {
    opacity: 0;
    transform: translateX(40px);
}
.toast-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; line-height: 1.45; }
.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-3);
    padding: 0 2px;
    line-height: 1;
}
.toast-close:hover { color: var(--text-1); }
.toast.toast-error   { border-left: 3px solid var(--danger); }
.toast.toast-warning { border-left: 3px solid #f59e0b; }
.toast.toast-success { border-left: 3px solid var(--success); }
.toast.toast-info    { border-left: 3px solid var(--primary); }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.chat-thread .chat-bubble {
    margin: 0 !important;
}

.chat-thread .chat-bubble + .chat-bubble {
    margin-top: 2px !important;
}