@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

body.public-sandbox-mode #gridGitBtn,
body.public-sandbox-mode #editorToggleBtn,
body.public-sandbox-mode #editorPanel,
body.public-sandbox-mode #editorOverlay,
body.public-sandbox-mode #gitModalOverlay,
body.public-sandbox-mode .terminal-toggle-btn,
body.public-sandbox-mode .terminal-panel,
body.public-sandbox-mode .agent-project-selector,
body.public-sandbox-mode .safe-mode-indicator,
body.public-sandbox-mode .copy-session-btn {
    display: none !important;
}

body.public-sandbox-mode .clickable-file-path {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
    color: inherit !important;
}

:root {
    /* ===========================================
       CORE COLOR PALETTE - 6 Base Colors Only
       All other colors MUST derive from these
       =========================================== */

    /* Background Colors (dark to light) - VERY DARK BLUE */
    --bg-base: #0a0d12; /* Darkest - main app background */
    --bg-elevated: #0d1117; /* Panels, cards, code blocks */
    --bg-surface: #151b23; /* Inputs, hover states, borders */
    --bg-tertiary: #1c232d; /* Tertiary background - slightly lighter than surface */

    /* Text Colors (light to dark) */
    --text-primary: #d8dee9; /* Main text */
    --text-secondary: #8b949e; /* Subdued text */
    --text-muted: #6b7a94; /* Very subtle text */
    --text-dark-professional: #d8dee9; /* Same as text-primary for dark theme */

    /* Accent Colors */
    --accent-blue: #58a6ff; /* Links, primary actions */
    --accent-green: #3fb950; /* Success states */
    --accent-yellow: #d29922; /* Warnings */
    --accent-red: #f85149; /* Errors, danger */

    /* Border Colors - DARK BLUE */
    --border-default: #21262d; /* Standard borders */
    --border-muted: #161b22; /* Subtle borders */
    --border-color: #21262d; /* Alias for border-default */

    /* Primary/Semantic Colors */
    --primary-color: #58a6ff; /* Alias for accent-blue */
    --bg-primary: #0a0f1a; /* Alias for bg-base */

    /* ===========================================
       SEMANTIC ALIASES - Use these in components
       =========================================== */

    /* Component Background Aliases */
    --bg-primary: var(--bg-base);
    --bg-secondary: var(--bg-elevated);
    --bg-hover: var(--bg-surface);
    --bg-active: var(--bg-tertiary);
    --bg-main: var(--bg-base);
    --modal-bg: var(--bg-elevated);
    --input-bg: var(--bg-elevated);

    /* ===========================================
       MODAL & PANEL BACKGROUND - CHANGE THIS ONE VARIABLE
       TO CUSTOMIZE ALL MODALS, AGENT WINDOWS, EDITOR, ETC.

       Color Options to Try:
       #101829 - Current dark blue (default)
       #0d1117 - GitHub dark (darker)
       #0f1419 - Charcoal black
       #161b22 - GitHub dark dimmed
       #1a1a2e - Purple/violet tint
       #1e1e2e - Catppuccin mocha
       #1a1b26 - Tokyo Night
       #282a36 - Dracula
       #2d2d2d - Neutral dark gray
       #1e2127 - One Dark
       #0c0c14 - Near black
       #12141a - Darker blue-gray
       #050608 - Nearly black
       #030405 - Almost pure black
       #0d1117 - GitHub dark (CURRENT)
       #010409 - Near black blue
       #0a0d12 - Very dark blue
       =========================================== */
    --modal-panel-bg: #0d1117;

    /* Interactive State Aliases */
    --link-hover: #79b8ff;
    --primary-hover: #4f46e5;

    /* Backgrounds */
    --sidebar-bg: var(--bg-base);
    --sidebar-header-bg: var(--bg-elevated);
    --toolbar-bg: var(--bg-elevated);
    --toolbar-button-bg: var(--bg-base);
    --toolbar-button-hover: var(--bg-elevated);
    --content-bg: var(--bg-base);
    --visualization-bg: var(--bg-base);
    --code-bg: var(--bg-elevated);
    --code-panel: var(--bg-elevated);

    /* Text */
    --sidebar-text: var(--text-primary);
    --toolbar-text: var(--text-primary);
    --content-text: var(--text-primary);
    --visualization-text: var(--text-primary);
    --heading1-color: var(--text-primary);
    --heading2-color: var(--text-primary);
    --heading3-color: var(--text-primary);
    --paragraph-color: var(--text-primary);
    --text-on-dark-bg: var(--text-primary);
    --text-on-light-bg: var(--text-primary);
    --code-text: var(--text-primary);
    --code-subtle: var(--text-secondary);
    --inline-code-text: var(--text-primary);

    /* Borders */
    --sidebar-border: var(--border-muted);
    --toolbar-border: var(--border-muted);
    --code-border: var(--border-default);

    /* Interactive */
    --sidebar-hover: var(--bg-elevated);
    --sidebar-active: var(--bg-surface);
    --button-primary-bg: #6366f1;
    --button-primary-hover: #4f46e5;
    --link-color: var(--accent-blue);
    --link-visited-color: #a78bfa;

    /* Code highlighting */
    --code-selection: rgba(255, 255, 255, 0.12);
    --code-line-highlight: rgba(255, 255, 255, 0.06);
    --code-accent: var(--accent-blue);

    /* Code Token Colors */
    --code-comment: var(--text-muted);
    --code-punctuation: var(--text-secondary);
    --code-operator: var(--text-secondary);
    --code-keyword: #c792ea;
    --code-string: #c3e88d;
    --code-number: #ffcb6b;
    --code-boolean: #ffcb6b;
    --code-function: #82aaff;
    --code-class: #f78c6c;
    --code-variable: #f78c6c;
    --code-constant: #ffcb6b;
    --code-attr-name: #addb67;
    --code-attr-value: #c3e88d;
    --code-tag: #e2777a;
    --code-selector: #a1e8ff;

    /* Table Colors */
    --table-bg: var(--bg-base);
    --table-border: var(--border-default);
    --table-text: var(--text-primary);
    --table-header-bg: var(--bg-surface);
    --table-header-text: var(--text-primary);
    --table-cell-bg: var(--bg-elevated);
    --table-cell-text: var(--text-primary);
    --table-stripe-bg: var(--bg-base);
    --table-hover-bg: var(--bg-surface);

    /* Blockquotes */
    --blockquote-bg: rgba(107, 114, 128, 0.15);
    --blockquote-border: var(--text-secondary);
    --blockquote-text: var(--text-dark-professional);

    /* Status Colors */
    --success-color: var(--accent-green);
    --warning-color: var(--accent-yellow);
    --error-color: var(--accent-red);
    --info-color: var(--accent-blue);
    --status-success: var(--accent-green);

    /* Agent Status Colors */
    --status-idle: var(--text-secondary);
    --status-working: var(--accent-blue);
    --status-error: var(--accent-red);
    --status-online: var(--accent-green);

    /* Task Status Colors */
    --task-pending: var(--accent-yellow);
    --task-progress: var(--accent-blue);
    --task-done: var(--accent-green);
    --task-failed: var(--accent-red);

    /* Accent Aliases for Components */
    --accent-primary: var(--accent-blue);
    --accent-primary-hover: #79b8ff;
    --accent-success: var(--accent-green);
    --accent-warning: var(--accent-yellow);
    --accent-error: var(--accent-red);
    --accent-error-hover: #ff6b6b;

    /* Border States */
    --border-focus: var(--accent-blue);

    /* Typography */
    --font-family: "Roboto", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.25rem;
    --space-2xl: 1.5rem;
    --space-3xl: 2rem;

    /* Layout */
    --header-height: 50px;
    --grid-gap: 1rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* Terminal */
    --terminal-bg: var(--bg-base);
    --terminal-min-height: 200px;

    /* Additional Shadows */
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(88, 166, 255, 0.3);
    --shadow-glow-strong: 0 0 30px rgba(88, 166, 255, 0.5);

    /* Text Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-inverse: #ffffff;

    /* Additional Typography */
    --font-sans: "Lato", system-ui, -apple-system, sans-serif;
    --font-normal: 400;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;

    /* Window Sizing */
    --window-min-height: 300px;

    /* Scrollbar Colors */
    --scrollbar-track: var(--bg-base);
    --scrollbar-thumb: var(--bg-surface);
    --scrollbar-thumb-hover: var(--bg-tertiary);

    /* Additional Spacing */
    --space-12: 3rem;

    /* Additional Accents */
    --accent-purple: #a78bfa;
    --accent-cyan: #22d3ee;

    /* Content Markup Colors */
    --code-header-bg: var(--bg-surface);
    --inline-code-bg: rgba(0, 0, 0, 0.3);
    --inline-code-border: var(--border-muted);
    --hr-color: var(--border-default);
    --image-border-radius: 8px;
    --image-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --link-hover-color: #79b8ff;
    --list-marker-color: var(--accent-blue);
    --list-text-color: var(--text-primary);
    --muted-color: var(--text-muted);
    --table-code-bg: rgba(0, 0, 0, 0.2);
    --table-code-border: var(--border-muted);
    --table-code-text: var(--text-primary);
    --table-header-border: var(--border-default);

    /* Transitions */
    --transition-slow: all 0.4s ease;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.25s ease;

    /* Accent */
    --accent-color: var(--accent-blue);
    --accent-color-hover: var(--accent-blue);
}

/* Light Theme */
[data-theme="light"],
.theme-light {
    /* Override base colors for light theme */
    --bg-base: #ffffff;
    --bg-elevated: #f9fafb;
    --bg-surface: #f3f4f6;
    --bg-tertiary: #e5e7eb;

    /* Modal/Panel background for light theme */
    --modal-panel-bg: #ffffff;

    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-dark-professional: #1f2937;

    --border-default: #d1d5db;
    --border-muted: #e5e7eb;
    --border-color: #d1d5db;

    /* Primary Backgrounds */
    --sidebar-bg: #f3f4f6;
    --sidebar-header-bg: #ffffff;
    --sidebar-text: #1f2937;
    --sidebar-border: #e5e7eb;
    --sidebar-hover: #e5e7eb;
    --sidebar-active: #d1d5db;

    /* Toolbar */
    --toolbar-bg: #f9fafb;
    --toolbar-text: #1f2937;
    --toolbar-border: #e5e7eb;
    --toolbar-button-bg: #ffffff;
    --toolbar-button-hover: #f3f4f6;

    /* Content Areas */
    --content-bg: #ffffff;
    --content-text: #1f2937;
    --visualization-bg: #ffffff;
    --visualization-text: #1f2937;

    /* Text Colors */
    --heading1-color: #111827;
    --heading2-color: #1f2937;
    --heading3-color: #374151;
    --paragraph-color: #4b5563;
    --text-on-dark-bg: #f9fafb;
    --text-on-light-bg: #1f2937;

    /* Code Blocks */
    --code-bg: #f3f4f6;
    --code-text: #1f2937;
    --code-border: #e5e7eb;
    --inline-code-text: #dc2626;

    /* Blockquotes */
    --blockquote-bg: rgba(99, 102, 241, 0.1);
    --blockquote-border: #6366f1;
    --blockquote-text: #4b5563;

    /* Links */
    --link-color: #2563eb;
    --link-visited-color: #7c3aed;

    /* Button colors for light theme */
    --button-primary-bg: #6366f1;
    --button-primary-hover: #4f46e5;
}

/* ===================================== */
/* BASE STYLES */
/* ===================================== */

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

body {
    font-family: var(--font-family);
    background: var(--content-bg);
    color: var(--content-text);
    height: 100vh;
    overflow: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===================================== */
/* MAIN LAYOUT */
/* ===================================== */

.app-container {
    display: flex;
    height: calc(100vh - 50px);
    width: 100vw;
    background: var(--content-bg);
    margin-top: 50px;
}

/* ===================================== */
/* SIDEBAR PANEL */
/* ===================================== */

.sidebar-panel {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    background: var(--sidebar-header-bg);
    border-bottom: 1px solid var(--sidebar-border);
    padding: var(--space-sm);
}

.tab-buttons {
    display: flex;
    gap: var(--space-xs);
}

.tab-button {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    color: var(--sidebar-text);
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.tab-button:hover:not(.active) {
    background: var(--sidebar-hover);
}

.tab-button.active {
    background: var(--sidebar-active);
    color: var(--text-primary);
}

.tab-badge {
    background: rgba(99, 102, 241, 0.25);
    color: var(--accent-blue);
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    border: 1px solid rgba(99, 102, 241, 0.3);
    font-weight: 500;
}

.tab-content {
    display: none;
    flex: 1;
    overflow: hidden;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.tab-content:focus,
.tab-content:focus-visible,
.tab-content.active:focus,
.tab-content.active:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ===================================== */
/* AGENTS LIST (Sidebar) */
/* ===================================== */

.agents-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.agents-list:focus,
.agents-list:focus-visible,
.agents-list *:focus,
.agents-list *:focus-visible {
    outline: none !important;
    border-color: inherit !important;
    box-shadow: none !important;
}

.agent-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--sidebar-header-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.agent-list-item:hover {
    background: var(--sidebar-hover);
    border-color: var(--text-secondary);
}

.agent-list-item.active {
    background: var(--sidebar-active);
    border-color: var(--sidebar-border) !important;
}

.agent-list-item:focus,
.agent-list-item:focus-visible,
.agent-list-item:focus-within {
    outline: none !important;
    border-color: var(--sidebar-border) !important;
}

.agent-list-item .delete-btn:focus,
.agent-list-item .delete-btn:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.agent-list-item .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-idle);
}

.agent-list-item .status-dot.working {
    background: var(--status-working);
    animation: pulse 1.5s ease-in-out infinite;
}

.agent-list-item .status-dot.error {
    background: var(--status-error);
}

.agent-list-item .agent-info {
    flex: 1;
    min-width: 0;
}

.agent-list-item .agent-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-dark-professional);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-list-item .agent-model {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.agent-list-item .delete-btn {
    background: transparent;
    border: none;
    color: var(--error-color);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: var(--transition-fast);
}

.agent-list-item:hover .delete-btn {
    opacity: 1;
}

.agent-list-item .delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

.add-agent-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px dashed var(--sidebar-border);
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 0.875rem;
    transition: var(--transition-fast);
}

.add-agent-btn:hover {
    background: var(--sidebar-hover);
    border-color: var(--link-color);
    color: var(--link-color);
}

/* ===================================== */
/* SETTINGS TAB */
/* ===================================== */

.settings-container {
    padding: var(--space-md);
    overflow-y: auto;
    flex: 1;
}

.setting-section {
    margin-bottom: var(--space-xl);
}

.setting-header {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-dark-professional);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--sidebar-border);
}

.compact-session-display {
    background: var(--sidebar-header-bg);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--link-color);
    margin-bottom: var(--space-sm);
    word-break: break-all;
}

.normal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--button-primary-bg);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-fast);
    width: 100%;
    margin-bottom: var(--space-sm);
}

.normal-btn:hover {
    background: var(--button-primary-hover);
}

.normal-btn.success-btn {
    background: var(--success-color);
}

.normal-btn.success-btn:hover {
    background: var(--accent-green);
}

.version-buttons {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.version-buttons .normal-btn {
    flex: 1;
    margin-bottom: 0;
}

.normal-textarea {
    width: 100%;
    min-height: 120px;
    background: var(--sidebar-header-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    color: var(--text-dark-professional);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    resize: vertical;
    margin-bottom: var(--space-sm);
}

.normal-textarea:focus {
    outline: none;
    border-color: var(--link-color);
}

/* ===================================== */
/* LOGS TAB */
/* ===================================== */

.logs-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.logs-filter-section {
    padding: var(--space-sm);
    background: var(--sidebar-header-bg);
    border-bottom: 1px solid var(--sidebar-border);
}

.logs-controls-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.logs-filter-select {
    flex: 1;
    padding: var(--space-sm);
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-md);
    color: var(--text-dark-professional);
    font-family: var(--font-family);
    font-size: 0.8rem;
}

.logs-filter-select:focus {
    outline: none;
    border-color: var(--link-color);
}

.btn-clear-logs {
    padding: var(--space-sm);
    background: var(--error-color);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-clear-logs:hover {
    background: var(--accent-red);
}

.logs-stats {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.logs-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
}

.logs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    text-align: center;
    gap: var(--space-sm);
}

.log-entry {
    padding: var(--space-sm);
    background: var(--sidebar-header-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.log-entry:hover {
    border-color: var(--text-secondary);
}

.log-entry .log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.log-entry .log-timestamp {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.log-entry .log-category {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    background: var(--button-primary-bg);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.log-entry .log-action {
    font-size: 0.8rem;
    color: var(--text-dark-professional);
}

/* ===================================== */
/* MAIN CHAT PANEL */
/* ===================================== */

.chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--content-bg);
    overflow: hidden;
    height: 100%;
    max-height: 100%;
}

/* Agent Header Bar */
.agent-header-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: var(--toolbar-bg);
    border-bottom: 1px solid var(--toolbar-border);
}

.agent-header-bar .agent-name-input {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dark-professional);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    min-width: 150px;
}

.agent-header-bar .agent-name-input:focus {
    outline: none;
    border-color: var(--link-color);
    background: var(--sidebar-bg);
}

.agent-header-bar .status-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.agent-header-bar .status-indicator .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-idle);
}

.agent-header-bar .status-indicator .status-dot.working {
    background: var(--status-working);
    animation: pulse 1.5s ease-in-out infinite;
}

/* Model Selector Dropdown */
.model-selector {
    position: relative;
    margin-left: auto;
}

.model-selector-dropdown {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-md);
    color: var(--text-dark-professional);
    font-family: var(--font-family);
    font-size: 0.875rem;
    cursor: pointer;
    min-width: 220px;
}

.model-selector-dropdown:focus {
    outline: none;
    border-color: var(--link-color);
}

.model-selector-dropdown option {
    background: var(--sidebar-bg);
    color: var(--text-dark-professional);
    padding: var(--space-sm);
}

/* Role Selector Dropdown */
.role-selector {
    position: relative;
    margin-left: var(--space-sm);
}

.role-selector-dropdown {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-md);
    color: var(--text-dark-professional);
    font-family: var(--font-family);
    font-size: 0.875rem;
    cursor: pointer;
    min-width: 140px;
}

.role-selector-dropdown:focus {
    outline: none;
    border-color: var(--link-color);
}

.role-selector-dropdown option {
    background: var(--sidebar-bg);
    color: var(--text-dark-professional);
    padding: var(--space-sm);
}

/* Safe Mode Toggle Button */
.safe-mode-toggle {
    position: relative;
    margin-left: var(--space-sm);
    margin-right: var(--space-sm);
}

.safe-mode-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-md);
    color: var(--text-dark-professional);
    font-family: var(--font-family);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.safe-mode-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--link-color);
}

.safe-mode-btn.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.safe-mode-btn.active:hover {
    background: rgba(34, 197, 94, 0.25);
}

.safe-mode-icon {
    font-size: 1rem;
}

.safe-mode-label {
    font-weight: 500;
}

.safe-mode-btn.active .safe-mode-icon::before {
    content: "🛡️";
}

/* Grid Mode Safe Mode Button */
.grid-safe-mode-btn {
    margin-left: auto;
}

/* Safe Mode Indicator in Grid Windows */
.safe-mode-indicator {
    padding: 4px 8px;
    font-size: 0.9rem;
    background: transparent;
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.safe-mode-indicator:hover {
    background: var(--bg-tertiary);
}

.safe-mode-indicator.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* ===================================== */
/* SYSTEM MESSAGES */
/* ===================================== */

.message.system {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.message.system .content {
    max-width: 900px;
    width: 100%;
}

.system-message {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: var(--text-secondary);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

/* ===================================== */
/* CHAT CONTAINER */
/* ===================================== */

.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    background: var(--bg-base);
}

.conversation-content {
    max-width: 1400px;
    width: 85%;
    margin: 0 auto;
}

.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-3xl);
    background: transparent;
}

.chat-welcome .welcome-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    opacity: 0.6;
}

.chat-welcome h2 {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    opacity: 0.8;
}

.chat-welcome p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Message Styles */
.message {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    animation: fadeIn 0.3s ease;
    width: 100%;
}

.message.user {
    justify-content: flex-start;
}

.message.user .avatar {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--sidebar-header-bg);
    font-size: 1rem;
    flex-shrink: 0;
}

.message.user .content {
    max-width: 75%;
}

.message.ai {
    justify-content: flex-start;
    padding-left: 44px;
}

/* AI Response Container */
.actual-response {
    /* Container for AI response content — no extra styling to avoid
       margin conflicts with .grid-message-content during streaming */
}

.actual-response p {
    margin: 0 0 0.4rem 0;
}

.actual-response p:last-child {
    margin-bottom: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.message.user {
    flex-direction: row;
    justify-content: flex-end;
}

.message .avatar {
    display: none;
}

.message .content {
    flex: 1;
}

.message.user .content {
    background: linear-gradient(135deg, #5b21b6 0%, #4338ca 50%, #3730a3 100%);
    color: var(--text-primary);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
    max-width: 70%;
    flex: none;
}

.message.ai .content {
    background: transparent;
    color: var(--text-dark-professional);
    padding: var(--space-md) 0;
    border-radius: 0;
    border: none;
    line-height: 1.7;
    width: 100%;
    max-width: 100%;
}

/* Message meta - model and time */
.message-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xs);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.meta-model {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 500;
    color: var(--link-color);
}

.meta-role {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 500;
    color: var(--text-muted);
    padding: 2px 6px;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
    border-radius: 4px;
    font-size: 0.7rem;
}

.meta-time {
    opacity: 0.7;
}

/* Attached files bar */
.attached-files-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--sidebar-header-bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.attached-files-bar .attached-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* AI Message Content - Rendered HTML/Markdown */
.message.ai .content p {
    margin-bottom: 0.75rem;
}

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

.message.ai .content ul,
.message.ai .content ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

.message.ai .content li {
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

.message.ai .content h1,
.message.ai .content h2,
.message.ai .content h3,
.message.ai .content h4 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark-professional);
    font-weight: 600;
}

.message.ai .content h1 {
    font-size: 1.4rem;
}
.message.ai .content h2 {
    font-size: 1.2rem;
}
.message.ai .content h3 {
    font-size: 1.1rem;
}
.message.ai .content h4 {
    font-size: 1rem;
}

.message.ai .content a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75em;
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    transition: all 0.15s ease;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.4;
}

.message.ai .content a:hover {
    text-decoration: none;
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Tooltip for source links */
.message.ai .content a[href^="http"] {
    position: relative;
}

.message.ai .content a[href^="http"]::after {
    content: attr(href);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s,
        visibility 0.2s;
    z-index: 100;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.message.ai .content a[href^="http"]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Don't style anchor links or internal links as badges */
.message.ai .content a[href^="#"],
.message.ai .content a:not([href^="http"]) {
    background: transparent;
    padding: 0;
    border: none;
    font-size: inherit;
    color: var(--link-color);
    margin-left: 0;
}

.message.ai .content a[href^="#"]:hover,
.message.ai .content a:not([href^="http"]):hover {
    text-decoration: underline;
    background: transparent;
    color: var(--link-color);
}

.message.ai .content strong,
.message.ai .content b {
    font-weight: 600;
    color: var(--text-primary);
}

.message.ai .content em,
.message.ai .content i {
    font-style: italic;
}

.message.ai .content blockquote {
    border-left: 3px solid var(--blockquote-border);
    padding-left: 1rem;
    margin: 0.75rem 0;
    color: var(--text-dark-professional);
    opacity: 0.9;
}

.message.ai .content hr {
    border: none;
    border-top: 1px solid var(--sidebar-border);
    margin: 1rem 0;
}

.message .timestamp {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
    text-align: right;
}

.message.user .timestamp {
    text-align: left;
}

/* ===================================== */
/* INPUT SECTION */
/* ===================================== */

.input-section {
    background: var(--toolbar-bg);
    border-top: 1px solid var(--toolbar-border);
    padding: var(--space-md) var(--space-lg);
    flex-shrink: 0;
    min-height: auto;
    max-height: 200px;
}

.attached-file-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--text-dark-professional);
}

.attached-file-item .remove-file {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.attached-file-item .remove-file:hover {
    opacity: 1;
}

.old-attached-file-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--sidebar-header-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--text-dark-professional);
}

.attached-file-item .remove-file {
    background: transparent;
    border: none;
    color: var(--error-color);
    cursor: pointer;
    font-size: 0.8rem;
}

/* Settings styles */
.settings-select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-md);
    color: var(--text-dark-professional);
    font-family: var(--font-family);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.settings-select:hover {
    border-color: var(--link-color);
}

.settings-select:focus {
    outline: none;
    border-color: var(--link-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.setting-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
    line-height: 1.4;
}

.input-area {
    max-width: 900px;
    margin: 0 auto;
}

.new-conversation-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--accent-color);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition:
        background 0.2s,
        transform 0.1s;
    flex-shrink: 0;
}

.new-conversation-btn:hover {
    background: var(--accent-color-hover);
    transform: scale(1.05);
}

.new-conversation-btn:active {
    transform: scale(0.95);
}

.input-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
}

.file-attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.file-attach-btn:hover {
    background: var(--sidebar-hover);
    color: var(--link-color);
}

.message-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-dark-professional);
    font-family: var(--font-family);
    font-size: 0.95rem;
    padding: var(--space-sm);
    resize: none;
    min-height: 40px;
    max-height: 200px;
    line-height: 1.5;
}

.message-input:focus {
    outline: none;
}

.message-input::placeholder {
    color: var(--text-secondary);
}

.send-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--link-color);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.send-button:hover {
    background: var(--accent-blue);
}

.send-button:disabled {
    background: var(--button-primary-bg);
    cursor: not-allowed;
}

/* ===================================== */
/* LOG DETAIL MODAL */
/* ===================================== */

.log-detail-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.log-detail-modal.active {
    display: flex;
}

.log-detail-content {
    background: var(--modal-panel-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.log-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--sidebar-header-bg);
    border-bottom: 1px solid var(--sidebar-border);
}

.log-detail-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark-professional);
}

.log-detail-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--space-xs);
    line-height: 1;
}

.log-detail-close:hover {
    color: var(--error-color);
}

.log-detail-info {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--sidebar-border);
}

.log-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.log-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.log-info-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.log-info-value {
    font-size: 0.875rem;
    color: var(--text-dark-professional);
    font-family: var(--font-mono);
}

.log-detail-body {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.log-content-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.log-content-textarea {
    flex: 1;
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    color: var(--code-text);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    resize: none;
    min-height: 200px;
}

/* ===================================== */
/* CODE BLOCKS */
/* ===================================== */

pre {
    background: var(--code-bg) !important;
    border: 1px solid var(--code-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    overflow-x: auto;
    margin: var(--space-md) 0;
}

pre code {
    background: transparent !important;
    color: var(--code-text);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
}

code {
    background: var(--code-bg);
    color: var(--inline-code-text);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85em;
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--sidebar-header-bg);
    border: 1px solid var(--code-border);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: var(--space-xs) var(--space-md);
}

.code-language {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.copy-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

/* ===================================== */
/* AI MESSAGE CODE STYLING               */
/* Copied from ProjectManager styles     */
/* ===================================== */

/* ===================================== */
/* CODE BLOCK STYLING - PRISM THEME      */
/* ===================================== */

/* Inline code */
.message.ai .content code.inline-code,
.message.ai .content code:not([class*="language-"]):not(pre code) {
    background: rgba(0, 0, 0, 0.4);
    color: var(--code-text);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Code block wrapper - main container */
.message.ai .content .code-block-wrapper {
    position: relative;
    margin: 1rem 0;
    border-radius: 8px;
    overflow: visible;
    background: var(--code-bg);
    border: 1px solid var(--code-border);
}

/* Language badge - absolute positioned top left */
.message.ai .content .code-lang-badge {
    position: absolute;
    top: 8px;
    left: 12px;
    background: var(--code-panel);
    border: 1px solid var(--code-border);
    color: var(--code-subtle);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
    pointer-events: none;
    opacity: 0.8;
}

/* Copy button - absolute positioned top right (ProjectManager style) */
/* Only show inside proper code block wrappers */
.code-block-wrapper .code-copy-btn,
.code-block .code-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--code-subtle, #a0a6b2);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition:
        opacity 0.15s ease,
        background 0.15s ease;
    line-height: 1;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    user-select: none;
    font-family: var(--font-mono);
}

/* Show copy button on hover - only in proper wrappers */
.code-block-wrapper:hover .code-copy-btn,
.code-block:hover .code-copy-btn {
    opacity: 0.8;
}

.code-block-wrapper .code-copy-btn:hover,
.code-block .code-copy-btn:hover {
    opacity: 1;
    background: var(--code-accent, #4da3ff);
    border-color: var(--code-accent, #4da3ff);
    color: var(--text-primary);
}

.code-block-wrapper .code-copy-btn.copied,
.code-block .code-copy-btn.copied {
    background: var(--success-color, var(--accent-green));
    border-color: var(--success-color, var(--accent-green));
    color: var(--text-primary);
    opacity: 1;
}

.code-block-wrapper .code-copy-btn svg,
.code-block .code-copy-btn svg {
    width: 12px;
    height: 12px;
}

/* Hide stray copy buttons outside proper code blocks */
li .code-copy-btn,
ul .code-copy-btn,
ol .code-copy-btn,
p .code-copy-btn,
blockquote .code-copy-btn,
li .code-block-copy,
ul .code-block-copy,
ol .code-block-copy,
p .code-block-copy,
blockquote .code-block-copy,
li button[onclick*="copyCodeBlock"],
ul button[onclick*="copyCodeBlock"],
ol button[onclick*="copyCodeBlock"],
p button[onclick*="copyCodeBlock"],
blockquote button[onclick*="copyCodeBlock"] {
    display: none !important;
}

/* Ensure copy buttons only show in proper code block containers */
button.code-copy-btn,
button.code-block-copy {
    /* Default hidden, shown only in proper containers */
}

.code-block-wrapper button.code-copy-btn,
.code-block button.code-block-copy,
.code-block-wrapper button[onclick*="copyCodeBlock"],
pre[class*="language-"] + button[onclick*="copyCodeBlock"] {
    display: inline-flex !important;
}

/* Pre element inside wrapper */
.message.ai .content .code-block-wrapper pre {
    background: var(--code-bg) !important;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

/* Code inside pre - add top padding for copy button space */
.message.ai .content pre code {
    display: block;
    background: transparent !important;
    color: var(--code-text);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.8;
    padding: 40px 15px 15px 15px;
    overflow-x: auto;
    border: none;
    border-radius: 0;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
}

/* Standalone pre (without wrapper) */
.message.ai .content pre {
    position: relative;
    background: var(--code-bg) !important;
    margin: 1rem 0;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--code-border);
    overflow: hidden;
}

.message.ai .content pre:not(.code-block-wrapper pre) code {
    padding: 15px;
}

/* ===================================== */
/* PRISM TOKEN COLORS                    */
/* From ProjectManager prism-theme.css   */
/* ===================================== */

/* Comments */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--code-comment);
}

/* Punctuation */
.token.punctuation {
    color: var(--code-punctuation);
}

/* Operators */
.token.operator {
    color: var(--code-operator);
}

/* Properties */
.token.property {
    color: var(--code-attr-name);
}

/* Tags */
.token.tag {
    color: var(--code-tag);
}

/* Booleans */
.token.boolean {
    color: var(--code-boolean);
}

/* Numbers */
.token.number {
    color: var(--code-number);
}

/* Constants */
.token.constant {
    color: var(--code-constant);
}

/* Selectors */
.token.selector {
    color: var(--code-selector);
}

/* Attribute names */
.token.attr-name {
    color: var(--code-attr-name);
}

/* Attribute values */
.token.attr-value {
    color: var(--code-attr-value);
}

/* Strings */
.token.string,
.token.char,
.token.inserted {
    color: var(--code-string);
}

/* Built-ins and class names */
.token.builtin,
.token.class-name {
    color: var(--code-class);
}

/* Deleted */
.token.deleted {
    color: var(--accent-red);
}

/* Keywords */
.token.keyword {
    color: var(--code-keyword);
}

/* Regex */
.token.regex {
    color: #ecc48d;
}

/* Variables */
.token.variable {
    color: var(--code-variable);
}

/* Functions */
.token.function {
    color: var(--code-function);
}

/* Remove per-character decoration inside Prism tokens */
.token {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Ensure Prism token containers preserve whitespace */
.message.ai .content pre code .token {
    white-space: pre !important;
}

/* ===================================== */
/* BLOCKQUOTES */
/* ===================================== */

blockquote {
    background: var(--blockquote-bg);
    border-left: 3px solid var(--blockquote-border);
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-md) 0;
    color: var(--blockquote-text);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ===================================== */
/* SCROLLBAR */
/* ===================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--sidebar-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--sidebar-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-active);
}

/* ===================================== */
/* ANIMATIONS */
/* ===================================== */

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

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

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--sidebar-border);
    border-top-color: var(--link-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media (max-width: 768px) {
    .sidebar-panel {
        position: fixed;
        left: -320px;
        top: 0;
        bottom: 0;
        z-index: 100;
        transition: var(--transition-base);
    }

    .sidebar-panel.open {
        left: 0;
    }

    .toggle-controls {
        flex-wrap: wrap;
    }

    /* Agent window responsive adjustments */
    .agent-window-controls {
        gap: 2px;
    }

    .agent-window-role,
    .agent-window-model,
    .agent-window-conversations {
        font-size: 0.6rem;
        padding: 2px 4px;
        min-width: 60px;
        max-width: 90px;
    }

    .agent-token-counter {
        font-size: 0.55rem;
        padding: 2px 4px;
    }

    .agent-project-selector {
        display: none; /* Hide project selector on small screens */
    }

    .agent-window-btn {
        padding: 2px 3px;
        font-size: 0.75rem;
    }

    .agent-window-btn.fullscreen-btn {
        font-size: 1rem;
    }

    .agent-window-btn.copy-md-btn {
        display: none;
    }
}

/* Very small screens - critical buttons only */
@media (max-width: 480px) {
    .agent-window-controls {
        gap: 1px;
    }

    .agent-window-role,
    .agent-window-model {
        max-width: 70px;
        min-width: 50px;
    }

    .agent-window-conversations {
        max-width: 70px;
        min-width: 50px;
    }

    .agent-token-counter {
        display: none;
    }
}

/* ===================================== */
/* UTILITY CLASSES */
/* ===================================== */

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

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

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

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

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

/* ===================================== */
/* MODE SWITCHER BAR */
/* ===================================== */

.mode-switcher-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 50px;
}

.mode-buttons {
    display: flex;
    gap: var(--space-sm);
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.mode-btn.active {
    background: linear-gradient(
        135deg,
        var(--accent-blue) 0%,
        var(--accent-blue) 100%
    );
    border-color: var(--accent-blue);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.mode-info {
    display: none;
}

/* Adjust app container for fixed header */
.app-container {
    margin-top: 50px;
}

/* ===================================== */
/* AGENTS GRID PANEL */
/* ===================================== */

.agents-grid-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--modal-panel-bg);
    height: calc(100vh - 50px);
    transition: width 0.3s ease;
    width: 100%;
}

.agents-grid-header {
    padding: var(--space-md) var(--space-lg);
    background: var(--toolbar-bg);
    border-bottom: 1px solid var(--toolbar-border);
}

.grid-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.grid-control-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-md);
    color: var(--text-dark-professional);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.grid-control-btn:hover {
    background: var(--toolbar-button-hover);
    border-color: var(--link-color);
}

/* Reset Dropdown Menu */
.reset-dropdown {
    position: relative;
    display: inline-block;
}

.reset-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--modal-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}

.reset-menu.hidden {
    display: none;
}

.reset-menu button {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--toolbar-border);
    color: var(--text-dark-professional);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.reset-menu button:last-child {
    border-bottom: none;
}

.reset-menu button:hover {
    background: var(--toolbar-button-hover);
}

.reset-menu button:last-child {
    color: var(--error-color);
}

.reset-menu button:last-child:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Compact Dropdown Menu (in agent window header) */

.grid-layout-select {
    padding: var(--space-sm) var(--space-md);
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-md);
    color: var(--text-dark-professional);
    font-size: 0.85rem;
    cursor: pointer;
}

/* Global Broadcast Input */
.global-broadcast-input {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 400px;
    margin-left: auto;
    background: var(--input-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-md);
    padding: 4px 8px;
    transition: border-color 0.2s ease;
}

.global-broadcast-input:focus-within {
    border-color: var(--link-color);
}

.broadcast-icon {
    font-size: 14px;
    opacity: 0.7;
}

.broadcast-input-field {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-dark-professional);
    font-size: 0.85rem;
    padding: 6px 0;
}

.broadcast-input-field::placeholder {
    color: var(--text-muted);
}

.broadcast-queue-btn,
.broadcast-send-btn {
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}

.broadcast-queue-btn {
    background: var(--text-secondary);
}

.broadcast-queue-btn:hover {
    background: var(--text-muted);
}

.broadcast-send-btn {
    background: var(--link-color);
}

.broadcast-send-btn:hover {
    background: var(--link-hover);
}

.broadcast-queue-btn:disabled,
.broadcast-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Queued message indicator in user messages */
.queued-msg-indicator {
    display: inline-block;
    margin-right: 4px;
    opacity: 0.8;
    font-size: 0.9em;
}

.agents-grid-container {
    flex: 1;
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-sm);
    overflow: hidden;
    min-height: 0;
    /* Always 2 columns */
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    background: var(--modal-panel-bg);
}

/* 2 agents: 1 row, full height */
.agents-grid-container[data-count="2"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    overflow: hidden;
}

/* 4 agents: 2 rows, this sets the standard row height (50% each) */
.agents-grid-container[data-count="4"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    overflow: hidden;
}

/* 6+ agents: use calc to maintain same row height as 2×2 layout (50% of container) */
/* scroll down to see more rows */
.agents-grid-container[data-count="3"],
.agents-grid-container[data-count="5"],
.agents-grid-container[data-count="6"],
.agents-grid-container[data-count="7"],
.agents-grid-container[data-count="8"] {
    grid-template-columns: repeat(2, 1fr);
    /* Each row = 50% of viewport height minus padding/gaps, same as 2×2 */
    grid-auto-rows: calc(50% - var(--space-sm));
    overflow-y: auto;
    overflow-x: hidden;
}

/* ===================================== */
/* AGENT WINDOW */
/* ===================================== */

.agent-window {
    display: flex;
    flex-direction: column;
    background: var(--modal-panel-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--sidebar-border);
    overflow: visible; /* Allow terminal autocomplete dropdown to escape */
    /* Performance: only transition hover properties, not 'all' (avoids watching every CSS prop × 8 panels) */
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    min-height: 0;
    height: 100%;
    /* PERF P6: isolate each agent panel — DOM changes in one panel won't reflow others.
       content = layout + style + paint. Each window is an isolated formatting context. */
    contain: content;
    /* NOTE: content-visibility: auto removed — in grid layouts all windows are
       visible on screen, so it provides no skip-rendering benefit. Worse, it
       breaks granular text selection (browser treats skipped content as a
       monolithic block, so Ctrl+C copies the entire conversation). */
}

.agent-window:hover {
    border-color: var(--link-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.agent-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    background: var(--sidebar-header-bg);
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    flex-wrap: wrap;
    overflow: visible;
    min-height: 42px;
    gap: var(--space-xs);
}

/* Ensure close button is always last and visible */
.agent-window-btn[title="Close Window"] {
    order: 101;
    flex-shrink: 0 !important;
}

.agent-window-header::-webkit-scrollbar {
    height: 3px;
}

.agent-window-header::-webkit-scrollbar-track {
    background: transparent;
}

.agent-window-header::-webkit-scrollbar-thumb {
    background: var(--border-color, var(--bg-surface));
    border-radius: 2px;
}

.agent-window-title {
    display: flex;
    flex-shrink: 0;
    min-width: 80px;
    max-width: 160px;
    align-items: center;
    gap: var(--space-sm);
}

/* Role selector in title area */
.agent-window-title .agent-window-role {
    padding: 4px 8px;
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-sm);
    color: var(--text-dark-professional);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 90px;
    max-width: 140px;
}

.agent-window-controls {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

/* Priority buttons that should always be visible */
.agent-window-btn.fullscreen-btn,
.agent-window-btn[title="Close Window"] {
    flex-shrink: 0;
}

/* agent-window-role moved to title - see .agent-window-title .agent-window-role above */

.agent-window-model {
    padding: 4px 8px;
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-sm);
    color: var(--text-dark-professional);
    font-size: 0.7rem;
    cursor: pointer;
    min-width: 100px;
    max-width: 180px;
    text-overflow: ellipsis;
}

/* Conversation dropdown */
.agent-window-conversations {
    padding: 4px 8px;
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-sm);
    color: var(--text-dark-professional);
    font-size: 0.7rem;
    cursor: pointer;
    min-width: 90px;
    max-width: 180px;
    text-overflow: ellipsis;
}

.agent-window-conversations:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* New conversation button - REMOVED (redundant, dropdown has new conversation option) */

/* Copy Markdown Button in Grid */
.agent-window-btn.copy-md-btn {
    opacity: 0.7;
    font-size: 0.8rem;
}

.agent-window-btn.copy-md-btn:hover {
    opacity: 1;
    background: rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-sm);
}

/* Compact working spinner next to grid agent title (frees content space) */
.grid-working-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    flex-shrink: 0;
}

.grid-working-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--accent-primary, var(--accent-blue));
    animation: aiagentSpin 0.85s linear infinite;
}

/* Grid Live Activities Panel (shown during streaming) - Claude Code Style */
.grid-live-activities {
    background: var(--bg-base);
    border-radius: 8px;
    margin: 8px 0;
    padding: 0;
    border: 1px solid var(--bg-surface);
    font-family: "SF Mono", "Monaco", "Consolas", "JetBrains Mono", monospace;
    overflow: hidden;
}

.grid-activities-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-base);
    border-bottom: 1px solid var(--bg-surface);
    font-size: 11px;
    color: var(--text-secondary);
}

.grid-activities-header .activities-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    animation: aiagentSpin 1s linear infinite;
    font-size: 12px;
    color: var(--accent-yellow);
}

.grid-activities-header .activities-label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 11px;
    letter-spacing: 0.3px;
}

.grid-activities-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px 0;
    scroll-behavior: smooth;
}

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

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

.grid-activities-list::-webkit-scrollbar-thumb {
    background: var(--bg-surface);
    border-radius: 4px;
}

.grid-activities-list::-webkit-scrollbar-thumb:hover {
    background: var(--bg-surface);
}

/* Claude Code Style - Tool Activity Items */
.grid-activity-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    font-size: 13px;
    transition: background 0.1s ease;
    border-left: 3px solid transparent;
    margin: 0 8px;
    border-radius: 0;
}

.grid-activity-item .activity-main-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    min-height: 28px;
}

.grid-activity-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.grid-activity-item.running {
    border-left-color: var(--accent-yellow);
    background: rgba(249, 115, 22, 0.05);
}

.grid-activity-item.complete {
    border-left-color: var(--accent-green);
}

.grid-activity-item.complete:hover {
    background: rgba(34, 197, 94, 0.05);
}

.grid-activity-item.error {
    border-left-color: var(--accent-red);
    background: rgba(239, 68, 68, 0.05);
}

/* Status dot - colored circle */
.grid-activity-item .activity-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.grid-activity-item.running .activity-status-dot {
    background: var(--accent-yellow);
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.5);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.grid-activity-item.complete .activity-status-dot {
    background: var(--accent-green);
}

.grid-activity-item.error .activity-status-dot {
    background: var(--accent-red);
}

@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.85);
    }
}

/* Tool type label - READ, WRITE, GREP, etc. */
.grid-activity-item .activity-tool {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    min-width: 80px;
    flex-shrink: 0;
    color: var(--text-secondary); /* Default tool color */
}

/* Tool colors by type - more specific selectors override default */
.grid-activity-item[data-tool-type="read"] .activity-tool {
    color: var(--accent-green);
}
.grid-activity-item[data-tool-type="write"] .activity-tool,
.grid-activity-item[data-tool-type="edit"] .activity-tool {
    color: var(--accent-yellow);
}
.grid-activity-item[data-tool-type="grep"] .activity-tool,
.grid-activity-item[data-tool-type="search"] .activity-tool {
    color: var(--accent-blue);
}
.grid-activity-item[data-tool-type="list"] .activity-tool {
    color: var(--accent-blue);
}
.grid-activity-item[data-tool-type="bash"] .activity-tool {
    color: var(--accent-red);
}
.grid-activity-item[data-tool-type="web"] .activity-tool {
    color: var(--accent-blue);
}

/* File path / target display */
.grid-activity-item .activity-target {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 12px;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
}

/* Arrow separator */
.grid-activity-item .activity-arrow {
    color: var(--text-muted);
    font-size: 12px;
    margin: 0 4px;
}

/* Result summary - lines read, changes made, etc. */
.grid-activity-item .activity-result {
    color: var(--text-secondary);
    font-size: 11px;
    font-style: italic;
}

.grid-activity-item.complete .activity-result {
    color: var(--text-secondary);
}

/* Stats badges for additions/removals */
.grid-activity-item .activity-stats {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.grid-activity-item .stat-additions {
    color: var(--accent-green);
    font-weight: 600;
    font-size: 11px;
}

.grid-activity-item .stat-removals {
    color: var(--accent-red);
    font-weight: 600;
    font-size: 11px;
}

/* Expandable hint for outputs */
.grid-activity-item .expand-hint {
    color: var(--text-muted);
    font-size: 10px;
    margin-left: 4px;
    cursor: pointer;
}

.grid-activity-item .expand-hint:hover {
    color: var(--text-secondary);
}

/* Legacy support for old structure */
.grid-activity-item .activity-icon {
    display: none;
}

.grid-activity-item .activity-display {
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
}

.grid-activity-item:hover .activity-display {
    color: var(--text-primary);
}

.grid-activity-item .activity-status {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    width: 16px;
    text-align: center;
}

.grid-activity-item .activity-status.running {
    color: var(--accent-yellow);
}

.grid-activity-item .activity-status.complete {
    color: var(--accent-green);
}

.grid-activity-item .activity-status.error {
    color: var(--accent-red);
}

/* Activity main row wrapper - shared */
.live-activity-item .activity-main-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Expandable output section */
.live-activity-item.has-output,
.grid-activity-item.has-output {
    flex-direction: column;
    align-items: stretch;
}

.activity-output-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 0 10px 6px 10px;
    background: var(--bg-base);
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    transition: all 0.15s ease;
    border: 1px solid var(--bg-surface);
}

.activity-output-toggle:hover {
    background: var(--bg-base);
    color: var(--text-secondary);
    border-color: var(--bg-surface);
}

.activity-output-toggle .toggle-icon {
    font-size: 9px;
    transition: transform 0.2s ease;
    color: var(--text-muted);
}

.live-activity-item.expanded .activity-output-toggle .toggle-icon,
.grid-activity-item.expanded .activity-output-toggle .toggle-icon {
    transform: rotate(90deg);
}

.activity-output-content {
    display: none;
    margin: 0 10px 8px 10px;
    padding: 8px;
    background: var(--bg-base);
    border-radius: 4px;
    border: 1px solid var(--bg-surface);
    max-height: 200px;
    overflow: auto;
}

.live-activity-item.expanded .activity-output-content,
.grid-activity-item.expanded .activity-output-content {
    display: block;
}

.activity-output-pre {
    margin: 0;
    padding: 0;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.activity-output-content::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.activity-output-content::-webkit-scrollbar-track {
    background: transparent;
}

/* Grid activity diff display - inline mini diff */
.grid-activity-diff {
    margin: 4px 10px 8px 10px;
    background: var(--bg-base);
    border-radius: 4px;
    border: 1px solid var(--bg-surface);
    overflow: hidden;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 11px;
}

.grid-activity-diff .diff-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-base);
    border-bottom: 1px solid var(--bg-surface);
    font-size: 10px;
    color: var(--text-secondary);
}

.grid-activity-diff .diff-stats {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.grid-activity-diff .diff-additions {
    color: var(--accent-green);
    font-weight: 600;
}

.grid-activity-diff .diff-removals {
    color: var(--accent-red);
    font-weight: 600;
}

.grid-activity-diff .diff-lines {
    max-height: 150px;
    overflow-y: auto;
    padding: 4px 0;
}

.grid-activity-diff .diff-line {
    display: flex;
}

/* ===================================== */
/* GRID TOOL MESSAGE (Claude Code Style) */
/* ===================================== */
/* Tool Group — collapsible batch of tools */
/* ===================================== */

.tool-group {
    margin: 4px 0;
    border-radius: 6px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    overflow: hidden;
}

.tool-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 11px;
    color: var(--muted-color, #888);
    background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
    user-select: none;
    transition: background 0.15s;
}

.tool-group-header:hover {
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.06));
    color: var(--text-secondary, #aaa);
}

.tool-group-toggle {
    font-size: 10px;
    width: 14px;
    text-align: center;
}

.tool-group-count {
    font-weight: 500;
}

.tool-group-body {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.tool-group.collapsed .tool-group-body {
    max-height: 0;
}

/* Flat tool rows in conversation flow  */
/* ===================================== */

.grid-tool-message {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 6px 8px 6px 6px;
    margin: 4px 0;
    background: var(--bg-base);
    border-left: 3px solid var(--accent-blue);
    border-radius: 0 6px 6px 0;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 13px;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.grid-tool-message:hover {
    background: var(--bg-elevated);
}

.grid-tool-message.running {
    border-left-color: var(--accent-yellow);
    background: rgba(245, 158, 11, 0.08);
}

.grid-tool-message.complete {
    border-left-color: var(--accent-green);
}

.grid-tool-message.error {
    border-left-color: var(--accent-red);
    background: rgba(239, 68, 68, 0.08);
}

/* Error tool output - ensure visibility and scrollability */
.grid-tool-message.error.has-output .tool-output {
    display: block;
    max-height: 400px;
    overflow: auto;
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.3);
}

.grid-tool-message.error .tool-output pre {
    color: #fca5a5;
    white-space: pre-wrap;
    word-break: break-word;
}

.grid-tool-message .tool-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.grid-tool-message .tool-name {
    font-weight: 600;
    color: var(--accent-blue);
    flex-shrink: 0;
    white-space: nowrap;
}

.grid-tool-message .tool-target {
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    cursor: help;
    position: relative;
    margin-left: 4px;
}

/* Show full text on hover via tooltip */
.grid-tool-message .tool-target:hover {
    color: #c7d2fe;
}

/* Bash/terminal commands get special treatment - show more */
.grid-tool-message[data-tool="bash_execute"] .tool-target,
.grid-tool-message[data-tool="terminal"] .tool-target {
    color: var(--accent-yellow);
    flex: 2;
}

.grid-tool-message[data-tool="bash_execute"] .tool-name,
.grid-tool-message[data-tool="terminal"] .tool-name {
    color: var(--accent-yellow);
}

/* Tooltip for truncated content */
.grid-tool-message .tool-target::after {
    content: attr(title);
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-all;
    max-width: 500px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-default);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
    pointer-events: none;
}

.grid-tool-message .tool-target:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Don't show tooltip if content fits (no ellipsis) or if title is empty */
.grid-tool-message .tool-target:not([title])::after,
.grid-tool-message .tool-target[title=""]::after {
    display: none;
}

/* Clickable file paths in tool messages */
.grid-tool-message .tool-target.clickable-file-path {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(165, 180, 252, 0.5);
    text-underline-offset: 2px;
    transition: all 0.15s ease;
}

.grid-tool-message .tool-target.clickable-file-path:hover {
    color: var(--accent-blue);
    text-decoration-style: solid;
    text-decoration-color: var(--accent-blue);
    background: rgba(129, 140, 248, 0.1);
    border-radius: 3px;
    padding: 0 4px;
    margin: 0 -4px;
}

.grid-tool-message .tool-target.clickable-file-path:active {
    color: var(--accent-blue);
    background: rgba(99, 102, 241, 0.2);
}

/* Clickable file paths in tool result outputs (read_file, list_files, etc.) */
.clickable-file-path.result-file-link {
    cursor: pointer;
    color: var(--accent-blue);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(165, 180, 252, 0.5);
    text-underline-offset: 2px;
    transition: all 0.15s ease;
    padding: 0 2px;
    border-radius: 2px;
}

.clickable-file-path.result-file-link:hover {
    color: var(--accent-blue);
    text-decoration-style: solid;
    text-decoration-color: var(--accent-blue);
    background: rgba(129, 140, 248, 0.15);
}

.clickable-file-path.result-file-link:active {
    color: var(--accent-blue);
    background: rgba(99, 102, 241, 0.25);
}

/* File header paths in read-file-result */
.read-file-result .file-header .file-path .clickable-file-path {
    font-weight: 500;
}

.grid-tool-message .tool-result {
    color: var(--text-secondary);
    font-size: 12px;
    margin-left: 8px;
    flex-shrink: 0;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.grid-tool-message.complete .tool-result {
    color: var(--accent-green);
}

.grid-tool-message.error .tool-result {
    color: var(--accent-red);
}

/* Diff stats in result (+N -M style) */
.grid-tool-message .tool-result .diff-add {
    color: var(--accent-green);
}

.grid-tool-message .tool-result .diff-remove {
    color: var(--accent-red);
}

/* Bash/Terminal stop button */
.grid-tool-message .bash-stop-btn {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: var(--accent-red);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 8px;
    margin-right: 4px;
    flex-shrink: 0;
    transition: all 0.15s ease;
    line-height: 1;
}

.grid-tool-message .bash-stop-btn:hover {
    background: rgba(239, 68, 68, 0.35);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fca5a5;
}

.grid-tool-message .bash-stop-btn:active {
    background: rgba(239, 68, 68, 0.5);
    transform: scale(0.95);
}

.grid-tool-message .bash-stop-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.grid-tool-message .bash-stop-btn.cancelled {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.4);
    color: var(--accent-green);
}

.grid-tool-message .tool-status {
    font-size: 14px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.grid-tool-message .grid-message-timestamp {
    color: var(--text-secondary);
    font-size: 11px;
    flex-shrink: 0;
    margin-left: auto;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
}

.grid-tool-message.running .tool-status {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Grid tool header - for tool messages rendered on page reload */
.grid-tool-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.grid-tool-header .grid-tool-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.grid-tool-header .grid-tool-name {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
    max-width: 100px;
    flex-shrink: 0;
    text-transform: capitalize;
}

.grid-tool-header .grid-tool-display {
    color: var(--accent-blue);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
}

.grid-tool-header .grid-message-timestamp {
    color: var(--text-secondary);
    font-size: 11px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Tool output section (visible by default when has-output) */
.grid-tool-message .tool-output {
    display: none;
    flex-basis: 100%;
    width: 100%;
    margin-top: 6px;
    padding: 4px 6px;
    background: var(--bg-base);
    border-radius: 4px;
    border: 1px solid var(--bg-surface);
    max-height: 400px;
    overflow: auto;
}

/* When tool output contains a diff card, remove height constraint so
   the full diff is visible without double-scrollbar clipping */
.grid-tool-message .tool-output:has(.edc-card) {
    max-height: none;
    overflow: visible;
    padding: 0;
    border: none;
    background: transparent;
}

/* Show output by default when tool has output - needs wrap for output to go to new line */
.grid-tool-message.has-output {
    flex-wrap: wrap;
}

.grid-tool-message.has-output .tool-output {
    display: block;
}

/* Allow collapsing via .collapsed class */
.grid-tool-message.has-output.collapsed .tool-output {
    display: none;
}

.grid-tool-message.expanded {
    flex-wrap: wrap;
}

.grid-tool-message.expanded .tool-output {
    display: block;
}

/* ===================================== */
/* SYMBOL / INDEXER RESULT STYLES */
/* ===================================== */
.symbol-result {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.symbol-result .symbol-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--sidebar-hover-bg);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.symbol-result .symbol-kind {
    background: var(--link-color);
    color: white;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 600;
}

.symbol-result .symbol-path {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.symbol-result .symbol-lines {
    color: var(--text-muted);
    font-size: 0.65rem;
    opacity: 0.7;
}

.symbol-result .symbol-summary {
    padding: 3px 8px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    margin-bottom: 4px;
}

.symbol-result .symbol-entry {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-left: 2px solid var(--sidebar-border);
    margin-left: 4px;
    flex-wrap: wrap;
}

.symbol-result .symbol-entry:hover {
    background: var(--sidebar-hover-bg);
}

.symbol-result .symbol-signature,
.symbol-result .symbol-desc {
    width: 100%;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.symbol-result .usage-file {
    margin: 4px 0;
}

.symbol-result .usage-file-path {
    padding: 2px 8px;
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--link-color);
}

.symbol-result .usage-ref {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 8px 1px 20px;
    font-size: 0.7rem;
}

.symbol-result .usage-ref:hover {
    background: var(--sidebar-hover-bg);
}

.symbol-result .usage-line {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    min-width: 35px;
}

.symbol-result .usage-name {
    font-weight: 500;
}

.symbol-result .usage-context {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.symbol-result .usage-path {
    color: var(--text-muted);
    font-size: 0.65rem;
}

/* Collapsible tool result wrapper (for page refresh state) */
.grid-tool-result-wrapper {
    width: 100%;
    margin-top: 8px;
}

.grid-tool-result-toggle {
    background: var(--bg-surface);
    border: 1px solid var(--bg-surface);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 11px;
    padding: 4px 10px;
    transition: all 0.15s ease;
}

.grid-tool-result-toggle:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--accent-blue);
}

.grid-tool-result-content {
    display: none;
    margin: 6px 0 0 0;
    padding: 6px 8px;
    background: var(--bg-base);
    border: 1px solid var(--bg-surface);
    border-radius: 4px;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow: auto;
}

.grid-tool-result-wrapper[data-collapsed="false"] .grid-tool-result-content {
    display: block;
}

.grid-tool-result-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.grid-tool-result-content::-webkit-scrollbar-track {
    background: transparent;
}

.grid-tool-result-content::-webkit-scrollbar-thumb {
    background: var(--bg-surface);
    border-radius: 3px;
}

.grid-tool-result-content::-webkit-scrollbar-thumb:hover {
    background: var(--bg-surface);
}

.grid-tool-message .tool-output pre {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.grid-tool-message .tool-output::-webkit-scrollbar {
    width: 4px;
}

.grid-tool-message .tool-output::-webkit-scrollbar-track {
    background: transparent;
}

.grid-tool-message .tool-output::-webkit-scrollbar-thumb {
    background: var(--bg-surface);
    border-radius: 2px;
}

/* Diff output styling */
.grid-tool-message .tool-output .diff-line-add {
    color: #54f527;
    font-weight: 600;
}

.grid-tool-message .tool-output .diff-line-remove {
    color: #e80e0e;
    font-weight: 600;
}

.grid-tool-message .tool-output .diff-line-context {
    color: #d1d5db;
}

.grid-tool-message .tool-output .diff-line-hunk {
    color: #e9d5ff;
    font-weight: 600;
}

/* Claude Code style diff inside tool output */
.grid-tool-message .tool-output .diff-block.claude-style {
    margin: 0;
    border: none;
    border-radius: 0;
    max-height: none;
    background: var(--bg-elevated);
    overflow-x: auto;
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-header {
    padding: 6px 8px;
    font-size: 12px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    gap: 10px;
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-file-icon {
    font-size: 14px;
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-file-path {
    color: var(--accent-blue);
    font-weight: 600;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-stats {
    margin-left: auto;
    display: flex;
    gap: 10px;
    font-weight: 600;
    font-size: 11px;
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-stat-add {
    color: var(--accent-green);
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-stat-remove {
    color: var(--accent-red);
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-content {
    max-height: 300px;
    overflow-y: auto;
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-addition {
    background: rgba(84, 245, 39, 0.13);
    display: flex;
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-removal {
    background: rgba(232, 14, 14, 0.13);
    display: flex;
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-hunk {
    background: rgba(168, 85, 247, 0.18);
    color: #e9d5ff;
    padding: 4px 8px;
    font-size: 11px;
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-line-num {
    min-width: 36px;
    width: 36px;
    padding: 0 6px 0 4px;
    text-align: right;
    color: #6b7280;
    font-size: 11px;
    user-select: none;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* Hide old line-num column — single column only */
.grid-tool-message .tool-output .diff-block.claude-style .diff-line-num.old {
    display: none;
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-marker {
    width: 16px;
    text-align: center;
    font-weight: 700;
}

.grid-tool-message
    .tool-output
    .diff-block.claude-style
    .diff-addition
    .diff-marker {
    color: #54f527;
}

.grid-tool-message
    .tool-output
    .diff-block.claude-style
    .diff-removal
    .diff-marker {
    color: #e80e0e;
}

.grid-tool-message .tool-output .diff-block.claude-style .diff-line-content {
    flex: 1;
    padding-right: 6px;
    white-space: pre-wrap;
    word-break: break-all;
    color: #d1d5db;
}

.grid-tool-message
    .tool-output
    .diff-block.claude-style
    .diff-addition
    .diff-line-content {
    color: #a9fa93;
}

.grid-tool-message
    .tool-output
    .diff-block.claude-style
    .diff-removal
    .diff-line-content {
    color: #f38686;
}

.grid-tool-message
    .tool-output
    .diff-block.claude-style
    .diff-addition
    .diff-line-num {
    color: #7cf74d;
}

.grid-tool-message
    .tool-output
    .diff-block.claude-style
    .diff-removal
    .diff-line-num {
    color: #f04d4d;
}

/* Tool output content with diff */
.tool-output-content .diff-block.claude-style {
    margin: 0;
    border-radius: 8px;
}

/* Toggle output button */
.grid-tool-message .toggle-output {
    display: none;
    padding: 2px 6px;
    margin-left: 12px;
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
}

.grid-tool-message.has-output .toggle-output {
    display: inline-block;
}

.grid-tool-message .toggle-output:hover {
    background: var(--bg-surface);
    color: var(--text-secondary);
}

/* ===================================== */
/* CHAT MODE TOOL MESSAGES               */
/* ===================================== */

.message.tool-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin: 8px 0;
    background: var(--bg-base);
    border-left: 3px solid var(--accent-blue);
    border-radius: 0 8px 8px 0;
}

.message.tool-message .message-avatar {
    font-size: 20px;
    flex-shrink: 0;
}

.message.tool-message .message-body {
    flex: 1;
    min-width: 0;
}

.message.tool-message .message-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.message.tool-message .sender-name.tool-name {
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

.message.tool-message .tool-target {
    color: var(--text-secondary);
    font-size: 13px;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
}

.message.tool-message .tool-status-icon {
    font-size: 14px;
}

.message.tool-message .message-time {
    color: var(--text-secondary);
    font-size: 11px;
    margin-left: auto;
}

.message.tool-message .message-content {
    margin-top: 8px;
}

.message.tool-message .tool-output-content {
    background: var(--bg-base);
    border: 1px solid var(--bg-surface);
    border-radius: 6px;
    padding: 10px 12px;
    max-height: 400px;
    overflow: auto;
}

.message.tool-message .tool-output-content pre {
    margin: 0;
    padding: 0;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Tool message status colors */
.message.tool-message.tool-running {
    border-left-color: var(--accent-yellow);
    background: rgba(245, 158, 11, 0.08);
}

.message.tool-message.tool-complete {
    border-left-color: var(--accent-green);
}

.message.tool-message.tool-error {
    border-left-color: var(--accent-red);
    background: rgba(239, 68, 68, 0.08);
}

/* ===================================== */
/* ASSISTANT TURN CONTAINER              */
/* Groups tool messages + AI response    */
/* ===================================== */

.assistant-turn {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 8px;
}

.assistant-turn.active {
    /* Active turn - still streaming */
}

/* Reduce gap between tool messages within same turn */
.assistant-turn .message.tool-message {
    margin: 4px 0;
}

/* First tool message in turn */
.assistant-turn .message.tool-message:first-child {
    margin-top: 8px;
}

/* AI message following tool messages */
.assistant-turn .message.ai:not(.tool-message) {
    margin-top: 12px;
}

/* ===================================== */
/* TABLE STYLING - BLACK HEADER + DARK   */
/* ===================================== */

/* Override table header to be black with white text */
.grid-message-content table th,
.message.ai .content table th,
.ai-content table th,
.markdown-content table th {
    background-color: var(--bg-base) !important;
    color: var(--text-primary) !important;
    border: 1px solid #333333 !important;
    font-weight: 600;
}

/* Override table cells to be dark with white text */
.grid-message-content table td,
.message.ai .content table td,
.ai-content table td,
.markdown-content table td {
    background-color: var(--bg-base) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--bg-surface) !important;
}

/* Zebra striping for dark tables */
.grid-message-content table tbody tr:nth-child(even) td,
.message.ai .content table tbody tr:nth-child(even) td,
.ai-content table tbody tr:nth-child(even) td,
.markdown-content table tbody tr:nth-child(even) td {
    background-color: var(--table-stripe-bg) !important;
}

/* Hover effect for dark tables */
.grid-message-content table tbody tr:hover td,
.message.ai .content table tbody tr:hover td,
.ai-content table tbody tr:hover td,
.markdown-content table tbody tr:hover td {
    background-color: var(--table-hover-bg) !important;
}

/* Table inline code - readable on dark background */
.grid-message-content table code,
.message.ai .content table code,
.ai-content table code,
.markdown-content table code {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
    border: none !important;
    padding: 1px 0;
    line-height: 1.4;
}

.grid-activity-diff .diff-line-num {
    width: 35px;
    text-align: right;
    padding-right: 8px;
    color: var(--text-muted);
    user-select: none;
    flex-shrink: 0;
}

.grid-activity-diff .diff-line-content {
    flex: 1;
    padding-left: 8px;
    white-space: pre;
}

.grid-activity-diff .diff-line.addition {
    background: rgba(84, 245, 39, 0.13);
}

.grid-activity-diff .diff-line.addition .diff-line-num {
    color: #7cf74d;
    background: rgba(84, 245, 39, 0.2);
}

.grid-activity-diff .diff-line.addition .diff-line-content {
    color: #a9fa93;
}

.grid-activity-diff .diff-line.addition .diff-line-content::before {
    content: "+ ";
    color: #54f527;
    font-weight: bold;
}

.grid-activity-diff .diff-line.removal {
    background: rgba(232, 14, 14, 0.13);
}

.grid-activity-diff .diff-line.removal .diff-line-num {
    color: #f04d4d;
    background: rgba(232, 14, 14, 0.2);
}

.grid-activity-diff .diff-line.removal .diff-line-content {
    color: #f38686;
}

.grid-activity-diff .diff-line.removal .diff-line-content::before {
    content: "- ";
    color: #e80e0e;
    font-weight: bold;
}

.grid-activity-diff .diff-line.context .diff-line-content {
    color: #d1d5db;
}

/* Ensure context line content is visible */
.grid-activity-diff .diff-line.context .diff-line-content-legacy {
    color: var(--text-secondary);
}

.grid-activity-diff .diff-lines::-webkit-scrollbar {
    width: 4px;
}

.grid-activity-diff .diff-lines::-webkit-scrollbar-track {
    background: transparent;
}

.grid-activity-diff .diff-lines::-webkit-scrollbar-thumb {
    background: var(--bg-surface);
    border-radius: 2px;
}

.activity-output-content::-webkit-scrollbar-thumb {
    background: var(--bg-surface);
    border-radius: 4px;
}

/* Activity output section wrapper for streaming activities */
.activity-output-section {
    width: 100%;
    margin-top: 8px;
}

.activity-output-section.expanded .toggle-icon {
    transform: rotate(90deg);
}

.activity-output-section.expanded .activity-output-content {
    display: block;
}

/* Streaming activity with output */
.streaming-activity.has-output {
    flex-wrap: wrap;
}

/* Grid tool activities section in completed messages */
.grid-tool-activities-section {
    margin: 10px 0;
    font-size: 13px;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
}

.grid-tool-activities-section summary {
    cursor: pointer;
    color: var(--accent-blue);
    padding: 8px 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.grid-tool-activities-section summary:hover {
    color: var(--accent-blue);
}

.grid-tool-activities-section[open] summary {
    margin-bottom: 8px;
}

.grid-tool-activities-list {
    padding: 10px;
    background: var(--bg-elevated);
    border-radius: 6px;
    border: 1px solid #2d2d44;
}

.grid-tool-activity-item {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--text-primary);
    font-family: inherit;
    border-left: 2px solid var(--accent-green);
    padding-left: 10px;
    margin-left: 4px;
}

.grid-tool-activity-item.complete {
    opacity: 0.9;
}

.grid-tool-activity-item.error {
    color: #fca5a5;
    border-left-color: var(--accent-red);
}

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

.agent-window-btn {
    background: transparent;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    opacity: 0.6;
    transition:
        opacity 0.2s,
        transform 0.15s;
    font-size: 0.75rem;
}

.agent-window-btn:hover {
    opacity: 1;
}

.agent-window-btn:active {
    transform: scale(0.95);
}

/* Fullscreen Button - distinctive purple/violet color, always visible */
.agent-window-btn.fullscreen-btn,
.agent-window-btn[title="Fullscreen"] {
    font-size: 1.2rem;
    color: #a78bfa;
    opacity: 1;
    min-width: 28px;
    min-height: 28px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    order: 100; /* Push to end but before close */
}

.agent-window-btn.fullscreen-btn:hover,
.agent-window-btn[title="Fullscreen"]:hover {
    opacity: 1;
    color: #c4b5fd;
    background: rgba(167, 139, 250, 0.25);
    border-radius: var(--radius-sm);
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.4);
}

/* Exit Fullscreen state */
.agent-window-btn[title="Exit Fullscreen"] {
    color: #f472b6;
    opacity: 1;
    background: rgba(244, 114, 182, 0.15);
    border-radius: var(--radius-sm);
}

.agent-window-btn[title="Exit Fullscreen"]:hover {
    color: #f9a8d4;
    background: rgba(244, 114, 182, 0.25);
}

/* Safe Mode Indicator in Grid Windows */
.agent-window-btn.safe-mode-indicator {
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    opacity: 0.7;
    transition: all 0.2s ease;
}

.agent-window-btn.safe-mode-indicator:hover {
    opacity: 1;
    background: rgba(100, 100, 100, 0.2);
}

.agent-window-btn.safe-mode-indicator.active {
    opacity: 1;
    background: rgba(34, 197, 94, 0.2);
    color: var(--accent-green);
}

.agent-window-btn.safe-mode-indicator.active:hover {
    background: rgba(34, 197, 94, 0.3);
}

.agent-window-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-height: 0;
    /* Performance: use auto scroll (smooth causes extra compositor work × 8 agents) */
    scroll-behavior: auto;
    /* PERF P6: layout + style + paint containment (NOT size).
       size containment breaks text selection — browser can't compute inline
       bounding boxes inside a size-contained element, so Ctrl+C copies everything.
       `content` = layout + style + paint without size — still isolates reflows. */
    contain: content;
    /* Promote to own compositing layer for GPU-accelerated scroll */
    will-change: scroll-position;
}

.agent-window-messages::-webkit-scrollbar {
    width: 6px;
}

.agent-window-messages::-webkit-scrollbar-track {
    background: transparent;
}

.agent-window-messages::-webkit-scrollbar-thumb {
    background: var(--border-color, var(--bg-surface));
    border-radius: 3px;
}

.agent-window-messages::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, var(--bg-surface));
}

/* Scroll indicator for auto-scroll state */
.scroll-indicator {
    position: sticky;
    bottom: 8px;
    right: 8px;
    align-self: flex-end;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.scroll-indicator:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.scroll-indicator.auto-scroll-on {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: var(--accent-green);
    opacity: 0.7;
}

.scroll-indicator.auto-scroll-off {
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid rgba(239, 68, 68, 0.6);
    color: var(--accent-red);
    opacity: 1;
    animation: pulse-scroll 2s infinite;
}

@keyframes pulse-scroll {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.agent-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-sm);
}

.agent-welcome .welcome-emoji {
    font-size: 1.5rem;
    margin-bottom: var(--space-xs);
}

.agent-welcome .welcome-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark-professional);
    margin-bottom: var(--space-xs);
}

.agent-welcome .welcome-role {
    font-size: 0.65rem;
    opacity: 0.7;
    max-width: 100%;
    line-height: 1.4;
}

.agent-window-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: var(--toolbar-bg);
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.agent-input-field {
    flex: 1;
    padding: var(--space-xs);
    background: var(--sidebar-header-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    color: var(--text-dark-professional);
    font-size: 0.75rem;
    resize: none;
    min-height: 28px;
    max-height: 60px;
}

.agent-input-field:focus {
    outline: none;
    border-color: var(--link-color);
}

/* Grid File Attachment Styles */
.grid-file-attach-btn {
    padding: var(--space-xs);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.grid-file-attach-btn:hover {
    opacity: 1;
}

.grid-attached-files {
    display: none;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
    padding: 2px 0;
}

.grid-attached-file {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--sidebar-header-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: 0.65rem;
    color: var(--text-dark-professional);
}

.grid-attached-file .file-name {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-attached-file .file-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.6rem;
}

.grid-attached-file .file-remove:hover {
    opacity: 1;
    color: var(--danger-color, var(--accent-red));
}

.agent-send-btn {
    padding: var(--space-xs) var(--space-sm);
    background: var(--link-color);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.agent-send-btn:hover {
    background: var(--accent-blue);
}

.agent-send-btn.stop-mode {
    background: var(--accent-red);
    animation: pulse-stop 1.5s ease-in-out infinite;
}

.agent-send-btn.stop-mode:hover {
    background: var(--accent-red);
}

@keyframes pulse-stop {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

/* ===================================== */
/* GRID MESSAGES */
/* ===================================== */

.grid-message {
    width: 100%;
    animation: gridMsgAppear 0.2s ease;
    /* NOTE: content-visibility: auto removed — causes WKWebView rendering bugs
       where messages appear as raw JSON or disappear entirely on reload */
}

@keyframes gridMsgAppear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Streaming AI message: skip fade-in to avoid repeated animation triggers
   when DOM morphing updates content. Animation plays only for non-streaming. */
.grid-message.ai.streaming-ai-message {
    animation: none;
}

.grid-message.user {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.grid-message.ai {
    /* AI messages full width */
}

.grid-message-content {
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* contain: style only — layout containment removed because it fights
       with height changes during streaming, causing scroll position jumps.
       Style containment still isolates CSS counters/animations. */
    contain: style;
}

.grid-message.user .grid-message-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 70%;
}

.grid-message.user .grid-message-content {
    background: linear-gradient(135deg, #5b21b6 0%, #4338ca 50%, #3730a3 100%);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: 12px;
    border-bottom-right-radius: 4px;
    border-left: none;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.grid-message-timestamp {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 4px;
    opacity: 0.7;
}

/* Attached files label under user message */
.grid-message-attached-files {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 100%;
    overflow: hidden;
}

.grid-message-attached-files .attached-files-icon {
    flex-shrink: 0;
    font-size: 11px;
}

.grid-message-attached-files .attached-files-list {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
}

/* System notification banner (synthetic messages: auto-continue, compact, truncation) */
.grid-message.system-notification {
    display: flex;
    justify-content: center;
    margin: 4px 0;
    animation: none;
}

.grid-system-notification-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    max-width: 80%;
}

.grid-system-notification-content {
    font-size: 0.72rem;
    color: var(--text-secondary, #9ca3af);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-system-notification-timestamp {
    font-size: 0.65rem;
    color: var(--text-secondary, #9ca3af);
    opacity: 0.5;
    white-space: nowrap;
}

.grid-message.ai .grid-message-header,
.grid-message.assistant .grid-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.grid-message.ai .grid-message-model,
.grid-message.assistant .grid-message-model {
    color: var(--accent-color);
    font-weight: 500;
}

.grid-message.ai,
.grid-message.assistant {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 12px;
}

.grid-message.ai .grid-message-content,
.grid-message.assistant .grid-message-content {
    background: transparent;
    color: var(--text-dark-professional);
    border-left: none;
    max-width: 100%;
}

/* =========================================
   Thinking Section — live reasoning display
   Shown while model is thinking, collapsed
   when content phase begins. User can click
   header to expand/collapse.
   ========================================= */
.thinking-section {
    margin: 0 var(--space-sm) 6px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(150, 150, 150, 0.3);
    background: rgba(150, 150, 150, 0.06);
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

/* Collapsed state — body hidden, compact header */
.thinking-section.thinking-collapsed .thinking-body {
    display: none;
}
.thinking-section.thinking-collapsed {
    border-color: rgba(150, 150, 150, 0.18);
    background: rgba(150, 150, 150, 0.03);
}
.thinking-section.thinking-collapsed .thinking-header {
    padding: 4px 10px;
}
.thinking-section.thinking-collapsed .thinking-label {
    color: var(--text-muted, rgba(160, 160, 160, 0.7));
}

/* Header row */
.thinking-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.thinking-header:hover {
    background: rgba(150, 150, 150, 0.08);
}

.thinking-icon {
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Chevron indicator */
.thinking-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

/* Pulsing brain while actively thinking */
.thinking-spinner {
    display: inline-block;
    animation: thinkingPulse 1.8s ease-in-out infinite;
}

@keyframes thinkingPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

.thinking-label {
    flex: 1;
    font-weight: 500;
    color: rgba(180, 180, 180, 0.9);
}

/* Body — contains the reasoning text */
.thinking-body {
    max-height: 400px;
    overflow: hidden;
    padding: 0 10px 8px;
}

.thinking-content {
    font-size: 0.73rem;
    line-height: 1.55;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-height: 380px;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(150, 150, 150, 0.25) transparent;
}

.thinking-content::-webkit-scrollbar {
    width: 4px;
}

.thinking-content::-webkit-scrollbar-track {
    background: transparent;
}

.thinking-content::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, 0.25);
    border-radius: 2px;
}

.thinking-content::-webkit-scrollbar-thumb:hover {
    background: rgba(150, 150, 150, 0.4);
}

/* Compact summary styling */
.grid-message.compact-summary .grid-message-content {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--accent-yellow);
    text-align: center;
    padding: var(--space-xs) var(--space-sm);
}

.compact-indicator {
    font-weight: 500;
    color: var(--accent-yellow);
    font-size: 0.75rem;
}

.grid-message-content.error {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--error-color);
    color: #fca5a5;
}

/* Grid message error and warning inline elements */
.grid-message-error {
    display: block;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-sm);
    color: #fca5a5;
    font-size: 0.8rem;
    margin: 4px 0;
}

.grid-message-warning {
    display: block;
    padding: 8px 12px;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--radius-sm);
    color: var(--accent-yellow);
    font-size: 0.8rem;
    margin: 4px 0;
}

.grid-message-error::before {
    content: "";
    margin-right: 6px;
}

.grid-message-warning::before {
    content: "";
    margin-right: 6px;
}

.grid-tool-summary {
    display: block;
    padding: 10px 14px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 4px 0;
    line-height: 1.5;
}

.grid-tool-summary strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 6px;
}

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

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

.grid-message-content pre {
    background: var(--bg-surface);
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 0.7rem;
    margin: 0.3rem 0;
}

.grid-message-content code {
    font-size: 0.75em;
}

.grid-message-content ul,
.grid-message-content ol {
    margin: 0.3rem 0;
    padding-left: 1rem;
}

.grid-message-content li {
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
}

.grid-message-content h1,
.grid-message-content h2,
.grid-message-content h3,
.grid-message-content h4 {
    margin: 0.4rem 0 0.2rem 0;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Source link badges - for bare URLs converted to domain labels */
.source-link,
a.source-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75em;
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 3px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    transition: all 0.15s ease;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.3;
}

.source-link:hover,
a.source-link:hover {
    text-decoration: none;
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Message content source links */
.message-content .source-link,
.actual-response .source-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75em;
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 3px;
    font-weight: 500;
    border: 1px solid var(--border-color);
}

.message-content .source-link:hover,
.actual-response .source-link:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Grid message tables - same style as main chat (ProjectManager) */
/* Inline source citation badges for grid messages */
.grid-message-content a[href^="http"] {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75em;
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 3px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    transition: all 0.15s ease;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.3;
    position: relative;
}

.grid-message-content a[href^="http"]:hover {
    text-decoration: none;
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Tooltip for source links in grid */
.grid-message-content a[href^="http"]::after {
    content: attr(href);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    color: var(--text-secondary);
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 9px;
    white-space: nowrap;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s,
        visibility 0.2s;
    z-index: 100;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.grid-message-content a[href^="http"]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Don't style anchor links as badges in grid */
.grid-message-content a[href^="#"],
.grid-message-content a:not([href^="http"]) {
    background: transparent;
    padding: 0;
    border: none;
    font-size: inherit;
    color: var(--link-color);
    margin-left: 0;
}

.grid-message-content table {
    width: auto;
    max-width: 100%;
    margin: 0.5rem auto;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--table-bg);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--table-border);
    table-layout: auto;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.grid-message-content table th,
.grid-message-content table td {
    border: 1px solid var(--table-border);
    padding: 8px 12px;
    text-align: center !important;
    color: var(--text-primary) !important;
    vertical-align: middle;
    white-space: nowrap;
}

.grid-message-content table th {
    background: var(--table-header-bg);
    font-weight: 600;
    color: var(--text-primary) !important;
    border-color: var(--bg-surface);
}

.grid-message-content table tbody td {
    background: var(--table-cell-bg);
    color: var(--text-primary) !important;
}

.grid-message-content table tbody tr:nth-child(even) td {
    background: var(--table-stripe-bg);
}

.grid-message-content table tbody tr:hover td {
    background: var(--table-hover-bg);
}

.grid-message-content table code {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary) !important;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 11px;
}

/* Grid message code blocks with copy button support */
.grid-message-content .code-block-wrapper {
    position: relative;
    margin: 0.5rem 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-base);
    border: 1px solid #1a212e;
}

.grid-message-content .code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-elevated);
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid var(--bg-surface);
}

.grid-message-content .code-lang-badge {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 9px;
    color: var(--code-subtle);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--code-panel);
    border: 1px solid var(--code-border);
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 5;
    opacity: 0.8;
}

/* ===================================== */
/* CONVERSATION MANAGEMENT MODAL */
/* ===================================== */

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

.modal-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.2s ease;
}

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

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

.modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    max-height: 400px;
}

.modal-footer {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

/* =====================================
   SETTINGS MODAL TABS
   ===================================== */
.settings-tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    gap: 0;
}

.settings-tab {
    background: none;
    border: none;
    padding: 10px 18px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition:
        color 0.15s,
        border-color 0.15s;
}

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

.settings-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
    font-weight: 600;
}

.settings-tab-content {
    display: none;
}

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

/* Shortcut reference styles */
.shortcut-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s;
}

.shortcut-row:hover {
    background: var(--bg-elevated);
}

.shortcut-row kbd {
    display: inline-block;
    min-width: 36px;
    padding: 3px 8px;
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 1px 0 var(--border-color);
}

.shortcut-row span {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Conversation list in modal */
.conversation-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.conversation-item:hover {
    border-color: var(--border-color);
    background: var(--bg-primary);
}

.conversation-item.active {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
}

.conversation-info {
    flex: 1;
    cursor: pointer;
    min-width: 0;
}

.conversation-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.conversation-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.conversation-delete-btn {
    background: none;
    border: none;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.15s ease;
    font-size: 0.9rem;
}

.conversation-delete-btn:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.2);
}

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

.empty-conversations p {
    margin: 0 0 8px 0;
}

/* Buttons in modal */
.btn {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

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

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

.btn-secondary:hover {
    background: var(--bg-primary);
}

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

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Agent window close button */
.agent-window-btn[title="Close Window"] {
    color: var(--accent-red);
}

.agent-window-btn[title="Close Window"]:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Agent window delete conversation button */
.agent-window-btn[title="Delete Current Conversation"] {
    color: var(--accent-red);
    opacity: 0.5;
}

.agent-window-btn[title="Delete Current Conversation"]:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.2);
}

.grid-message-content .code-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--code-panel);
    border: 1px solid var(--code-border);
    color: var(--code-text);
    cursor: pointer;
    font-size: 10px;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0.7;
    transition:
        opacity 0.2s ease,
        background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.grid-message-content .code-copy-btn:hover {
    opacity: 1;
    background: var(--code-accent);
    border-color: var(--code-accent);
}

.grid-message-content .code-copy-btn.copied {
    background: var(--success-color);
    border-color: var(--success-color);
    color: var(--text-primary);
    opacity: 1;
}

.grid-message-content pre {
    background: var(--code-bg) !important;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
}

.grid-message-content pre code {
    display: block;
    background: transparent !important;
    color: var(--code-text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    padding: 32px 10px 10px 10px;
    overflow-x: auto;
    white-space: pre;
}

.grid-message-content code.inline-code {
    background: rgba(0, 0, 0, 0.4);
    color: var(--code-text);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===================================== */
/* MODAL STYLES */
/* ===================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.hidden {
    display: none;
}

.modal-content {
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-xl);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-content.modal-large {
    width: 90%;
    max-width: 900px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--sidebar-header-bg);
    border-bottom: 1px solid var(--sidebar-border);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-dark-professional);
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--space-xs);
    line-height: 1;
}

.modal-close-btn:hover {
    color: var(--error-color);
}

.modal-body {
    flex: 1;
    padding: var(--space-lg);
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--sidebar-header-bg);
    border-top: 1px solid var(--sidebar-border);
}

/* ===================================== */
/* AGENT PRESETS FORM */
/* ===================================== */

.agent-presets-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.preset-form {
    background: var(--sidebar-header-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.preset-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--sidebar-border);
    color: var(--text-dark-professional);
}

.preset-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

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

.preset-field label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.preset-field.full-width {
    grid-column: 1 / -1;
}

.preset-input,
.preset-select {
    padding: var(--space-sm);
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-sm);
    color: var(--text-dark-professional);
    font-size: 0.85rem;
}

.preset-input:focus,
.preset-select:focus {
    outline: none;
    border-color: var(--link-color);
}

.preset-textarea {
    padding: var(--space-sm);
    background: var(--toolbar-button-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--radius-sm);
    color: var(--text-dark-professional);
    font-size: 0.8rem;
    resize: vertical;
    min-height: 60px;
}

.preset-textarea:focus {
    outline: none;
    border-color: var(--link-color);
}

/* ===================================== */
/* SEARCH PROVIDER INFO */
/* ===================================== */

.search-provider-info {
    padding: var(--space-xs) 0;
}

/* 14-inch MacBook and similar medium screens (1440-1600px) */
@media (max-width: 1600px) {
    .agent-window-title .agent-window-role {
        min-width: 80px;
        max-width: 120px;
        font-size: 0.7rem;
        padding: 3px 6px;
    }

    .agent-window-model {
        min-width: 90px;
        max-width: 150px;
        font-size: 0.65rem;
        padding: 3px 6px;
    }

    .agent-window-conversations {
        min-width: 80px;
        max-width: 130px;
        font-size: 0.65rem;
        padding: 3px 6px;
    }

    .agent-token-counter {
        font-size: 0.6rem;
        padding: 2px 4px;
    }

    .agent-window-btn.copy-md-btn {
        display: none;
    }

    .agent-project-selector {
        max-width: 120px;
        font-size: 0.65rem;
    }

    .agent-window-btn {
        padding: 2px 3px;
        font-size: 0.7rem;
    }

    .agent-window-btn.fullscreen-btn,
    .agent-window-btn[title="Fullscreen"] {
        font-size: 1rem;
    }
}

@media (max-width: 1200px) {
    /* On smaller screens, still maintain 2 columns with scroll */
    .agents-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
    }

    .agents-grid-container[data-count="2"] {
        grid-template-rows: 1fr;
        overflow: hidden;
    }

    .agents-grid-container[data-count="4"] {
        grid-template-rows: repeat(2, 1fr);
        overflow: hidden;
    }

    .agents-grid-container[data-count="3"],
    .agents-grid-container[data-count="5"],
    .agents-grid-container[data-count="6"],
    .agents-grid-container[data-count="7"],
    .agents-grid-container[data-count="8"] {
        grid-auto-rows: calc(50% - var(--space-xs));
        overflow-y: auto;
    }

    .agent-presets-list {
        grid-template-columns: 1fr;
    }

    .agent-window-title .agent-window-role {
        min-width: 70px;
        max-width: 100px;
        font-size: 0.65rem;
    }

    .agent-window-model {
        min-width: 80px;
        max-width: 120px;
        font-size: 0.6rem;
    }

    .agent-window-conversations {
        min-width: 70px;
        max-width: 110px;
        font-size: 0.6rem;
    }

    .agent-token-counter {
        font-size: 0.55rem;
        padding: 2px 3px;
    }

    .agent-project-selector {
        max-width: 100px;
        font-size: 0.6rem;
    }
}

/* ===================================== */
/* MESSAGE BODY WRAPPER */
/* ===================================== */

.message .message-body {
    /* Container for the actual message content */
}

.message.ai .message-body {
    /* AI message body styling */
    line-height: 1.6;
}

.message.ai .message-body > *:first-child {
    margin-top: 0;
}

.message.ai .message-body > *:last-child {
    margin-bottom: 0;
}

/* ===================================== */
/* ENHANCED AI MESSAGE CONTENT STYLING */
/* ===================================== */

/* AI Message - Rendered HTML Content */
.message.ai .content div,
.message.ai .content section,
.message.ai .content article {
    color: var(--text-dark-professional);
}

.message.ai .content h1:first-child,
.message.ai .content h2:first-child,
.message.ai .content h3:first-child {
    margin-top: 0;
}

/* Pre-formatted code blocks inside AI messages */
.message.ai .content pre {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    overflow-x: auto;
    margin: 0.75rem 0;
    border: 1px solid var(--bg-surface);
}

.message.ai .content pre code {
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--code-text);
}

/* Inline code */
.message.ai .content code {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-blue);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    font-family: var(--font-mono);
}

/* ===================================== */
/* TABLE STYLING                         */
/* From ProjectManager table.css         */
/* White background, dark header         */
/* ===================================== */

.message.ai .content table {
    width: auto;
    max-width: 100%;
    margin: 1rem auto;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--table-bg);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--table-border);
    table-layout: auto;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.message.ai .content table th,
.message.ai .content table td {
    border: 1px solid var(--table-border);
    padding: 12px 16px;
    text-align: center !important;
    color: var(--table-cell-text);
    vertical-align: middle;
    white-space: nowrap;
    word-break: normal;
}

.message.ai .content table th {
    background: var(--table-header-bg);
    font-weight: 600;
    color: var(--table-header-text);
    text-transform: none;
    letter-spacing: 0.5px;
    border-color: var(--bg-surface);
}

.message.ai .content table tbody td {
    background: var(--table-cell-bg);
    color: var(--table-cell-text);
}

.message.ai .content table tbody tr:nth-child(even) td {
    background: var(--table-stripe-bg);
}

.message.ai .content table tbody tr:hover td {
    background: var(--table-hover-bg);
}

/* Table inline code - black text for readability */
.message.ai .content table code {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary) !important;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
    border: none;
}

/* Ensure table cells always have black text */
.message.ai .content table td,
.message.ai .content table th {
    color: var(--text-primary) !important;
}

.message.ai .content table th {
    color: var(--text-primary) !important;
}

/* ===================================== */
/* AGENT IDENTIFICATION STYLES */
/* ===================================== */

/* Agent list item with model indicator */
.agent-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-xs) 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: var(--sidebar-header-bg);
}

.agent-list-item:hover {
    background: var(--toolbar-button-hover);
    border-color: var(--sidebar-border);
}

.agent-list-item.active {
    background: var(--sidebar-active);
    border-color: var(--sidebar-border);
    box-shadow: none;
}

.agent-list-item .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--sidebar-active);
    transition: background 0.2s ease;
}

.agent-list-item .status-dot.idle {
    background: var(--sidebar-active);
}

.agent-list-item .status-dot.processing {
    background: var(--warning-color);
    animation: pulse 1.5s ease-in-out infinite;
}

.agent-list-item .status-dot.success {
    background: var(--success-color);
}

.agent-list-item .status-dot.error {
    background: var(--error-color);
}

.agent-list-item .agent-info {
    flex: 1;
    min-width: 0;
}

.agent-list-item .agent-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark-professional);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-list-item .agent-model {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.agent-list-item .delete-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: all 0.2s ease;
}

.agent-list-item:hover .delete-btn {
    opacity: 1;
}

.agent-list-item .delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error-color);
}

/* Add Agent Button */
.add-agent-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px dashed var(--sidebar-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-agent-btn:hover {
    border-color: var(--link-color);
    color: var(--link-color);
    background: rgba(99, 102, 241, 0.1);
}

/* ===================================== */
/* AGENT HEADER BAR */
/* ===================================== */

.agent-header-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--toolbar-bg);
    border-bottom: 1px solid var(--toolbar-border);
}

.agent-name-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark-professional);
    font-family: var(--font-family);
    min-width: 150px;
    transition: all 0.2s ease;
}

.agent-name-input:hover {
    border-color: var(--sidebar-border);
    background: var(--sidebar-header-bg);
}

.agent-name-input:focus {
    outline: none;
    border-color: var(--link-color);
    background: var(--sidebar-header-bg);
}

/* Status Indicator */
.status-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background: var(--sidebar-header-bg);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.status-indicator #statusDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sidebar-active);
}

.status-indicator #statusDot.processing {
    background: var(--warning-color);
    animation: pulse 1.5s ease-in-out infinite;
}

.status-indicator #statusDot.success {
    background: var(--success-color);
}

.status-indicator #statusDot.error {
    background: var(--error-color);
}

/* ===================================== */
/* MESSAGE AGENT BADGE (for multi-window) */
/* ===================================== */

.message-agent-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 8px;
    background: rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    color: var(--accent-blue);
    margin-bottom: var(--space-xs);
}

.message-agent-badge .agent-color-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Agent color variations */
.agent-color-1 {
    background: var(--accent-blue);
}
.agent-color-2 {
    background: var(--accent-blue);
}
.agent-color-3 {
    background: var(--accent-blue);
}
.agent-color-4 {
    background: var(--accent-green);
}
.agent-color-5 {
    background: var(--accent-yellow);
}
.agent-color-6 {
    background: var(--accent-red);
}
.agent-color-7 {
    background: var(--accent-red);
}
.agent-color-8 {
    background: var(--accent-green);
}

/* ===================================== */
/* TOGGLE SWITCH COMPONENT */
/* ===================================== */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--surface-secondary, #374151);
    transition: 0.3s;
    border-radius: 24px;
    border: 1px solid var(--border-color, var(--text-muted));
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-primary);
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-color, var(--accent-blue));
    border-color: var(--accent-color, var(--accent-blue));
}

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

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

/* Toggle row container */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.task-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 0 var(--space-sm) var(--space-sm);
}

.task-empty {
    padding: var(--space-md);
    text-align: center;
    color: var(--sidebar-text);
    opacity: 0.5;
    font-size: 12px;
    font-style: italic;
}

.task-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: 4px 8px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    line-height: 1.4;
}

.task-item:hover {
    background: var(--sidebar-hover);
}

.task-item.done {
    color: var(--success-color);
    text-decoration: line-through;
    opacity: 0.7;
}

.task-item.in_progress {
    color: var(--info-color);
}

.task-item.in_progress .task-item-icon {
    animation: pulse 1.5s infinite;
}

.task-item.failed {
    color: var(--error-color);
}

.task-item.pending {
    color: var(--sidebar-text);
    opacity: 0.8;
}

.task-connector {
    color: var(--sidebar-text);
    opacity: 0.4;
    font-family: var(--font-mono);
    font-size: 11px;
}

.task-item-icon {
    font-size: 10px;
    min-width: 14px;
}

.task-item-text {
    flex: 1;
}

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

/* ===================================== */
/* AGENT ACTIVITY PANEL */
/* ===================================== */

.activity-sidebar-panel {
    border-top: 1px solid var(--sidebar-border);
    margin-top: var(--space-sm);
    background: rgba(0, 0, 0, 0.15);
}

.activity-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: var(--sidebar-text);
    transition: var(--transition-fast);
}

.activity-panel-header:hover {
    background: var(--sidebar-hover);
}

.activity-icon {
    font-size: 12px;
}

.activity-title {
    flex: 1;
    font-weight: 500;
}

.activity-count {
    font-size: 10px;
    color: var(--info-color);
    background: rgba(59, 130, 246, 0.15);
    padding: 2px 6px;
    border-radius: 10px;
}

.activity-toggle {
    font-size: 10px;
    transition: transform var(--transition-fast);
    color: var(--sidebar-text);
    opacity: 0.6;
}

.activity-list {
    max-height: 250px;
    overflow-y: auto;
    padding: 0 var(--space-xs) var(--space-sm);
}

.activity-empty {
    padding: var(--space-md);
    text-align: center;
    color: var(--sidebar-text);
    opacity: 0.5;
    font-size: 12px;
    font-style: italic;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: 6px 8px;
    font-size: 11px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid transparent;
    transition: var(--transition-fast);
}

.activity-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.activity-item .activity-icon {
    font-size: 12px;
    min-width: 18px;
    text-align: center;
}

.activity-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.activity-name {
    font-weight: 500;
    color: var(--sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-details {
    font-size: 10px;
    color: var(--sidebar-text);
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.activity-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 9px;
    color: var(--sidebar-text);
    opacity: 0.5;
}

.activity-status-icon {
    font-size: 10px;
}

.activity-time {
    font-family: var(--font-mono);
}

/* Activity Status Styles */
.activity-running {
    border-left-color: var(--info-color);
    background: rgba(59, 130, 246, 0.08);
}

.activity-running .activity-status-icon {
    animation: pulse 1s infinite;
    color: var(--info-color);
}

.activity-success {
    border-left-color: var(--success-color);
}

.activity-success .activity-status-icon {
    color: var(--success-color);
}

.activity-error {
    border-left-color: var(--error-color);
    background: rgba(239, 68, 68, 0.08);
}

.activity-error .activity-status-icon {
    color: var(--error-color);
}

.activity-error .activity-name {
    color: var(--error-color);
}

/* ===================================== */
/* PROJECT ROOT SECTION */
/* ===================================== */

.project-root-section {
    border-top: 1px solid var(--sidebar-border);
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.1);
}

.project-root-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 11px;
    color: var(--sidebar-text);
    opacity: 0.7;
    margin-bottom: var(--space-xs);
}

.project-icon {
    font-size: 12px;
}

.project-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.project-root-path {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 6px 10px;
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--sidebar-text);
    cursor: pointer;
    transition: var(--transition-fast);
    overflow: hidden;
}

.project-root-path:hover {
    border-color: var(--accent-color);
    background: var(--sidebar-hover);
}

.project-root-path.has-path {
    color: var(--success-color);
}

#projectRootText {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-edit-icon {
    font-size: 10px;
    opacity: 0.6;
}

/* ===================================== */
/* TOOL STATUS BAR */
/* ===================================== */

.tool-status-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(
        90deg,
        rgba(99, 102, 241, 0.15),
        rgba(99, 102, 241, 0.05)
    );
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
    font-size: 13px;
    animation: slideDown 0.2s ease;
}

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

.tool-status-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.tool-spinner {
    animation: spin 1s linear infinite;
    font-size: 16px;
}

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

.tool-action {
    color: var(--accent-color);
    font-weight: 500;
}

.tool-details {
    flex: 1;
    color: var(--content-text);
    opacity: 0.7;
    font-size: 12px;
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-cancel-btn {
    background: transparent;
    border: none;
    color: var(--content-text);
    opacity: 0.5;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    transition: var(--transition-fast);
}

.tool-cancel-btn:hover {
    opacity: 1;
    color: var(--error-color);
}

/* ===================================== */
/* TERMINAL PANEL */
/* ===================================== */

.terminal-panel {
    border-top: 1px solid var(--sidebar-border);
    background: var(--bg-base);
    transition: height 0.3s ease;
    display: flex;
    flex-direction: column;
}

.terminal-panel.collapsed {
    height: 0;
    overflow: hidden;
    border-top: none;
}

.terminal-panel:not(.collapsed) {
    height: 250px;
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-base);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #222;
}

.terminal-header:hover {
    background: var(--bg-elevated);
}

.terminal-icon {
    font-size: 14px;
}

.terminal-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.terminal-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

.terminal-status.connected {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-color);
}

.terminal-status.disconnected {
    background: rgba(107, 114, 128, 0.2);
    color: var(--text-secondary);
}

.terminal-status.error {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error-color);
}

.terminal-toggle-icon {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.terminal-panel.collapsed .terminal-toggle-icon {
    transform: rotate(-90deg);
}

.terminal-container {
    flex: 1;
    overflow: hidden;
    padding: var(--space-sm);
    background: var(--bg-base);
}

.terminal-placeholder {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    padding: var(--space-md);
    text-align: center;
}

.terminal-input-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-base);
    border-top: 1px solid #222;
}

.terminal-prompt {
    color: var(--success-color);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
}

.terminal-input {
    flex: 1;
    background: var(--bg-base);
    border: 1px solid #333;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
}

.terminal-input:focus {
    border-color: var(--accent-color);
}

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

.terminal-run-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.terminal-run-btn:hover {
    background: var(--accent-color-hover);
}

.terminal-toggle-btn {
    background: transparent;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
    color: var(--content-text);
    transition: var(--transition-fast);
}

.terminal-toggle-btn:hover {
    background: var(--sidebar-hover);
    border-color: var(--accent-color);
}

.terminal-toggle-btn.active {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--accent-color);
}

/* ===================================== */
/* THINKING MESSAGE */
/* ===================================== */

.thinking-message {
    opacity: 0.9;
}

.thinking-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-md);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.thinking-dots {
    display: flex;
    gap: 2px;
}

.thinking-dots span {
    font-size: 20px;
    color: var(--accent-color);
    animation: blink 1.4s infinite both;
}

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

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

@keyframes blink {
    0%,
    80%,
    100% {
        opacity: 0.2;
    }
    40% {
        opacity: 1;
    }
}

.thinking-text {
    color: var(--content-text);
    opacity: 0.8;
    font-style: italic;
    font-size: 13px;
}

/* ===================================== */
/* TOOL RESULT STYLES IN MESSAGES */
/* ===================================== */

.tool-result-container {
    margin: var(--space-sm) 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tool-result-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.2);
    font-size: 12px;
    font-weight: 500;
}

.tool-result-content {
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.1);
    font-size: 12px;
}

.tool-result-content pre {
    margin: 0;
    padding: var(--space-sm);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 11px;
}

/* Search results in tool output */
.search-result-item {
    padding: var(--space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.search-result-item a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500;
}

.search-result-item a:hover {
    text-decoration: underline;
}

.search-result-item p {
    margin-top: 4px;
    color: var(--content-text);
    opacity: 0.7;
    font-size: 12px;
}

/* Bash output in tool result */
.bash-output {
    font-family: var(--font-mono);
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-all;
}

.bash-output.error {
    color: var(--error-color);
}

.bash-output.success {
    color: var(--success-color);
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

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

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

/* ============================================
   TODO DROPDOWN IN HEADER
   ============================================ */

.todo-dropdown-container {
    position: relative;
    display: inline-block;
}

.todo-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.todo-dropdown-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.todo-count {
    background: var(--primary-color);
    color: white;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}

.todo-count.empty {
    background: var(--text-muted);
    opacity: 0.5;
}

.todo-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 280px;
    max-width: 350px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
    animation: dropdownFadeIn 0.15s ease-out;
}

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

.todo-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.todo-dropdown-title {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
}

.todo-dropdown-progress {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 10px;
}

.todo-dropdown-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
}

.todo-dropdown-list::-webkit-scrollbar {
    width: 6px;
}

.todo-dropdown-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.todo-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 12px;
}

.todo-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin: 4px 0;
    background: var(--bg-secondary);
    border-radius: 6px;
    border-left: 3px solid var(--border-color);
    transition: all 0.15s ease;
}

.todo-item:hover {
    background: var(--bg-tertiary);
}

.todo-item.done {
    border-left-color: var(--success-color);
    opacity: 0.7;
}

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

.todo-item.pending {
    border-left-color: var(--warning-color);
}

.todo-item.in-progress {
    border-left-color: var(--primary-color);
}

.todo-checkbox {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.todo-text {
    flex: 1;
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.4;
}

.todo-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.todo-status.done {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success-color);
}

.todo-status.pending {
    background: rgba(234, 179, 8, 0.2);
    color: var(--warning-color);
}

.todo-status.in-progress {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-color);
}

/* Scrollbar for streaming content */
.streaming-content::-webkit-scrollbar {
    width: 6px;
}

.streaming-content::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.streaming-content::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

.streaming-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

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

/* Progress indicator */
.streaming-progress {
    height: 3px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}

.streaming-progress-bar {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--primary-color),
        var(--accent-color)
    );
    border-radius: 2px;
    transition: width 0.3s ease;
    animation: shimmer 1.5s infinite;
}

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

/* Tool badge styles */
.tool-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-secondary);
}

.tool-badge-icon {
    font-size: 12px;
}

/* Live Streaming Activities (shown during tool execution) */
.streaming-activities {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
}

.live-activities-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 8px;
    font-size: 12px;
    color: #a0aec0;
}

.activities-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
    font-size: 14px;
    color: var(--accent-yellow);
}

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

.activities-label {
    font-weight: 600;
    color: var(--text-primary);
}

.live-activities-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.live-activity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-size: 12px;
    transition: background 0.2s ease;
}

.live-activity-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.live-activity-item.running {
    border-left: 3px solid var(--accent-yellow);
    background: rgba(251, 191, 36, 0.1);
}

.live-activity-item.complete {
    border-left: 3px solid #34d399;
    opacity: 0.85;
}

.live-activity-item.error {
    border-left: 3px solid var(--accent-red);
    background: rgba(248, 113, 113, 0.1);
}

.live-activity-item .activity-icon {
    font-size: 14px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.live-activity-item .activity-tool {
    font-weight: 700;
    color: var(--accent-blue);
    min-width: 80px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-activity-item .activity-display {
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.live-activity-item .activity-status {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
}

.live-activity-item .activity-status.running {
    color: var(--accent-yellow);
    animation: pulse 1s ease-in-out infinite;
}

.live-activity-item .activity-status.complete {
    color: #34d399;
}

.live-activity-item .activity-status.error {
    color: var(--accent-red);
}

/* Compact mode for many activities */
.streaming-activities.compact .streaming-activity {
    padding: 6px 10px;
    gap: 8px;
}

.streaming-activities.compact .streaming-activity .activity-icon {
    font-size: 14px;
}

.streaming-activities.compact .streaming-activity .activity-name {
    font-size: 12px;
    min-width: 80px;
}

.streaming-activities.compact .streaming-activity .activity-details {
    font-size: 11px;
}

/* ===================================== */
/* DIFF/PATCH DISPLAY (Claude Code Style) */
/* ===================================== */

.diff-block {
    font-family: var(--font-mono, "JetBrains Mono", "Fira Code", monospace);
    font-size: 13px;
    line-height: 1.6;
    background: var(--code-bg, var(--bg-elevated));
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 12px 0;
    border: 1px solid var(--sidebar-border);
    /* Full width - break out of parent container */
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
}

.diff-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--sidebar-header-bg);
    border-bottom: 1px solid var(--sidebar-border);
    color: var(--text-secondary);
    font-size: 11px;
}

.diff-header .diff-icon {
    color: var(--accent-yellow);
}

.diff-header .diff-file {
    font-weight: 600;
    color: var(--text-primary);
}

.diff-header .diff-stats {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.diff-header .diff-additions {
    color: var(--accent-green);
    font-weight: 600;
}

.diff-header .diff-removals {
    color: var(--accent-red);
    font-weight: 600;
}

.diff-content {
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    min-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

.diff-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.diff-content::-webkit-scrollbar-track {
    background: transparent;
}

.diff-content::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.diff-line {
    display: flex;
    padding: 0;
    min-height: 22px;
    white-space: pre;
    line-height: 22px;
    margin: 0;
}

.diff-line-number {
    user-select: none;
    width: 50px;
    min-width: 50px;
    text-align: right;
    padding: 0 12px 0 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.diff-line-content {
    flex: 1;
    white-space: pre;
    padding: 0 12px 0 8px;
}

/* Addition line (green) */
/* Addition lines group - continuous background */
.diff-additions-group {
    background: rgba(84, 245, 39, 0.13);
    border-left: 3px solid #54f527;
    margin: 4px 0;
}

.diff-line.addition {
    background: transparent;
}

.diff-line.addition .diff-line-number {
    background: rgba(84, 245, 39, 0.2);
    color: #7cf74d;
}

.diff-line.addition .diff-line-content {
    color: #a9fa93;
}

.diff-line.addition::before {
    content: "+";
    color: #54f527;
    font-weight: bold;
    margin-right: 4px;
    padding-left: 8px;
}

/* Fallback for ungrouped additions (legacy) */
.diff-line.addition:not(.grouped) {
    background: rgba(84, 245, 39, 0.13);
    border-left: 3px solid #54f527;
}

/* Removal line (red) */
/* Removal lines group - continuous background */
.diff-removals-group {
    background: rgba(232, 14, 14, 0.13);
    border-left: 3px solid #e80e0e;
    margin: 4px 0;
}

/* ============================================
   Claude Code Style Diff (with dual line numbers)
   ============================================ */
.diff-block.claude-style {
    font-family: var(--font-mono, "JetBrains Mono", "Fira Code", monospace);
    font-size: 13px;
    line-height: 1.5;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 12px 0;
    border: 1px solid var(--border-default);
    width: 100%;
}

.diff-block.claude-style .diff-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    color: var(--text-primary);
    font-size: 13px;
}

.diff-block.claude-style .diff-file-icon {
    font-size: 14px;
}

.diff-block.claude-style .diff-file-path {
    font-weight: 600;
    color: var(--accent-blue);
}

.diff-block.claude-style .diff-stats {
    margin-left: auto;
    display: flex;
    gap: 12px;
    font-weight: 600;
}

.diff-block.claude-style .diff-stat-add {
    color: var(--accent-green);
}

.diff-block.claude-style .diff-stat-remove {
    color: var(--accent-red);
}

.diff-block.claude-style .diff-content {
    padding: 0;
    overflow-x: auto;
    max-height: 400px;
}

.diff-block.claude-style .diff-hunk {
    display: flex;
    padding: 8px 16px;
    background: rgba(168, 85, 247, 0.18);
    color: #e9d5ff;
    font-size: 12px;
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
}

.diff-block.claude-style .diff-hunk .diff-line-content {
    color: #e9d5ff;
}

.diff-block.claude-style .diff-addition {
    display: flex;
    background: rgba(84, 245, 39, 0.13);
    border-left: 4px solid #54f527;
}

.diff-block.claude-style .diff-addition .diff-line-num {
    background: rgba(84, 245, 39, 0.2);
    color: #7cf74d;
}

.diff-block.claude-style .diff-addition .diff-marker {
    color: #54f527;
    font-weight: bold;
}

.diff-block.claude-style .diff-addition .diff-line-content {
    color: #a9fa93;
}

.diff-block.claude-style .diff-removal {
    display: flex;
    background: rgba(232, 14, 14, 0.13);
    border-left: 4px solid #e80e0e;
}

.diff-block.claude-style .diff-removal .diff-line-num {
    background: rgba(232, 14, 14, 0.2);
    color: #f04d4d;
}

.diff-block.claude-style .diff-removal .diff-marker {
    color: #e80e0e;
    font-weight: bold;
}

.diff-block.claude-style .diff-removal .diff-line-content {
    color: #f38686;
}

.diff-block.claude-style .diff-context {
    display: flex;
    background: transparent;
    border-left: 4px solid transparent;
}

.diff-block.claude-style .diff-context .diff-line-num {
    color: var(--text-muted);
}

.diff-block.claude-style .diff-context .diff-line-content {
    color: #d1d5db;
}

.diff-block.claude-style .diff-line-num {
    min-width: 40px;
    padding: 0 8px;
    text-align: right;
    user-select: none;
    font-size: 12px;
    color: var(--text-muted);
}

.diff-block.claude-style .diff-line-num.old {
    border-right: 1px solid var(--border-muted);
}

.diff-block.claude-style .diff-line-num.new {
    border-right: 1px solid var(--border-muted);
}

.diff-block.claude-style .diff-marker {
    width: 20px;
    text-align: center;
    user-select: none;
    color: var(--text-secondary);
}

.diff-block.claude-style .diff-line-content {
    flex: 1;
    padding: 0 12px;
    white-space: pre;
}

.diff-line.removal {
    background: transparent;
}

.diff-line.removal .diff-line-number {
    background: rgba(232, 14, 14, 0.2);
    color: #f04d4d;
}

.diff-line.removal .diff-line-content {
    color: #f38686;
}

.diff-line.removal::before {
    content: "-";
    color: #e80e0e;
    font-weight: bold;
    margin-right: 4px;
    padding-left: 8px;
}

/* Fallback for ungrouped removals (legacy) */
.diff-line.removal:not(.grouped) {
    background: rgba(232, 14, 14, 0.13);
    border-left: 3px solid #e80e0e;
}

/* Context line (unchanged) */
.diff-line.context {
    background: transparent;
}

.diff-line.context .diff-line-number {
    background: transparent;
    color: var(--text-muted);
}

.diff-line.context .diff-line-content {
    color: var(--text-primary);
}

.diff-line.context::before {
    content: " ";
    margin-right: 4px;
}

/* Hunk header */
.diff-line.hunk-header {
    background: rgba(56, 139, 253, 0.15);
    color: var(--accent-blue);
    font-style: normal;
    padding: 4px 12px;
    font-size: 12px;
}

/* Tool result with diff */
.tool-result-diff {
    margin-top: 8px;
}

.tool-result-diff .diff-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.tool-result-diff .diff-summary .file-path {
    color: var(--text-primary);
    font-weight: 500;
}

/* Inline diff in activity panel - full height, outside container */
.diff-inline {
    font-size: 13px;
    margin-top: 12px;
    margin-bottom: 8px;
    padding: 0;
    background: var(--code-bg);
    border-radius: 8px;
    border: 1px solid var(--sidebar-border);
    max-height: calc(100vh - 180px);
    min-height: 200px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
    /* Break out of parent container for full width */
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
}

.diff-inline::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.diff-inline::-webkit-scrollbar-track {
    background: transparent;
}

.diff-inline::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.grid-activity .diff-inline {
    font-size: 12px;
    margin-top: 8px;
    padding: 0;
    max-height: calc(100vh - 220px);
    min-height: 150px;
    /* Full width in grid */
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
}

.diff-inline .diff-line {
    padding: 2px 16px;
    min-height: 24px;
}

.diff-inline .diff-line-number {
    width: 48px;
    min-width: 48px;
    padding-right: 12px;
    margin-right: 12px;
    font-size: 12px;
}

.diff-inline .diff-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--sidebar-header-bg);
}

.grid-activity .diff-inline .diff-line {
    padding: 2px 12px;
    min-height: 22px;
}

.grid-activity .diff-inline .diff-line-number {
    width: 40px;
    min-width: 40px;
    padding-right: 10px;
    margin-right: 10px;
    font-size: 11px;
}

.grid-activity .diff-inline .diff-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--sidebar-header-bg);
}

/* Tool activity diff container */
.tool-activity-diff {
    margin-top: 8px;
    width: 100%;
}

.tool-activity-diff .diff-inline {
    margin: 0;
    font-size: 12px;
}

/* Inline diff toggle header */
.diff-inline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--sidebar-header-bg, rgba(0, 0, 0, 0.2));
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    user-select: none;
}

.diff-inline-header:hover {
    background: var(--sidebar-hover, rgba(255, 255, 255, 0.05));
}

.diff-toggle-icon {
    font-size: 10px;
    color: var(--text-muted, var(--text-secondary));
    transition: transform 0.2s ease;
}

.diff-inline:not(.collapsed) .diff-toggle-icon {
    transform: rotate(0deg);
}

.diff-inline.collapsed .diff-toggle-icon {
    transform: rotate(-90deg);
}

.diff-inline-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.diff-file-name {
    color: var(--text-primary, var(--text-primary));
    font-weight: 500;
    font-size: 12px;
}

.diff-inline-stats {
    font-size: 11px;
    color: var(--text-muted, var(--text-secondary));
}

.diff-inline-stats .diff-stat-additions,
.diff-stat-additions {
    color: var(--accent-green);
    margin-right: 6px;
}

.diff-inline-stats .diff-stat-removals,
.diff-stat-removals {
    color: var(--accent-red);
}

.diff-inline-content {
    background: var(--code-bg, var(--bg-elevated));
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

/* Diff container */
.diff-container {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--sidebar-border, var(--border-default));
}

.diff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--sidebar-header-bg, rgba(0, 0, 0, 0.3));
    border-bottom: 1px solid var(--sidebar-border, var(--border-default));
}

.diff-file-path {
    color: var(--text-primary, var(--text-primary));
    font-weight: 500;
    font-size: 12px;
    font-family: var(--font-mono);
}

/* Clickable diff file paths - open in editor on click */
.diff-file-path.clickable-file-path {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(165, 180, 252, 0.4);
    text-underline-offset: 2px;
    transition: all 0.15s ease;
    border-radius: 3px;
    padding: 1px 4px;
    margin: 0 -4px;
}

.diff-file-path.clickable-file-path:hover {
    color: var(--accent-blue);
    text-decoration-style: solid;
    text-decoration-color: var(--accent-blue);
    background: rgba(129, 140, 248, 0.15);
}

.diff-file-path.clickable-file-path:active {
    background: rgba(99, 102, 241, 0.25);
}

.diff-stats {
    display: flex;
    gap: 8px;
    font-size: 11px;
}

.diff-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted, var(--text-secondary));
    font-size: 12px;
}

/* Context group (no special background) */
.diff-context-group {
    background: transparent;
}

/* ===================================== */
/* TOOL OUTPUT WINDOW (30 lines max, auto-scroll) */
/* ===================================== */

.tool-output-window {
    display: none;
    max-height: 600px; /* ~30 lines at 20px line-height */
    min-height: 100px;
    overflow-y: auto;
    overflow-x: auto;
    background: var(--bg-surface); /* Softer dark - matches code blocks */
    border: 1px solid #2a3040;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 4px;
    font-family: var(--font-mono, "JetBrains Mono", "Fira Code", monospace);
    font-size: 14px;
    line-height: 1.6;
    /* Break out of container for full width */
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}

.tool-output-window::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.tool-output-window::-webkit-scrollbar-track {
    background: transparent;
}

.tool-output-window::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
}

.tool-output-window::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.tool-output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: var(--bg-surface); /* Softer header background */
    border-bottom: 1px solid #2a3040;
    position: sticky;
    top: 0;
    z-index: 5;
}

.tool-output-header .output-title {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tool-output-header .output-lines {
    color: var(--text-muted);
    font-size: 12px;
    background: var(--bg-surface); /* Softer badge background */
    padding: 3px 10px;
    border-radius: 10px;
}

.tool-output-content {
    margin: 0;
    padding: 14px 16px;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 60px;
    font-size: 14px;
    line-height: 1.6;
}

/* Output window with line numbers */
.tool-output-line {
    display: flex;
    min-height: 20px;
    padding: 0 14px;
}

.tool-output-line:hover {
    background: rgba(110, 118, 129, 0.1);
}

.tool-output-line-number {
    user-select: none;
    width: 44px;
    min-width: 44px;
    text-align: right;
    padding-right: 12px;
    color: var(--text-muted);
    border-right: 1px solid var(--border-muted);
    margin-right: 12px;
    font-size: 13px;
}

.tool-output-line-content {
    flex: 1;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Success output styling */
.tool-output-window.success .tool-output-header {
    border-bottom-color: rgba(16, 185, 129, 0.3);
}

.tool-output-window.success .output-title {
    color: var(--accent-green);
}

/* Error output styling */
.tool-output-window.error .tool-output-header {
    border-bottom-color: rgba(248, 81, 73, 0.3);
}

.tool-output-window.error .output-title {
    color: var(--accent-red);
}

.tool-output-window.error .tool-output-content {
    color: #ffa198;
}

/* Grid activity specific adjustments */
.grid-activity .tool-output-window {
    max-height: 550px;
    margin-top: 8px;
    font-size: 14px;
}

/* Compact mode for smaller outputs */
.tool-output-window.compact {
    max-height: 200px;
}

.tool-output-window.compact .tool-output-content {
    padding: 8px 12px;
    font-size: 11px;
}

/* =========================================
   Editor Modal for edit_file/write_file
   ========================================= */

.diff-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(4px);
}

.diff-viewer-overlay.visible {
    opacity: 1;
}

.diff-viewer-modal {
    width: 90vw;
    max-width: 1200px;
    height: 85vh;
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 100px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.diff-viewer-overlay.visible .diff-viewer-modal {
    transform: scale(1);
}

.diff-viewer-modal-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    gap: 16px;
}

.editor-file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.editor-file-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.editor-file-path {
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-stats {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.editor-stat {
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

.editor-stat.additions {
    color: var(--accent-green);
    background: rgba(35, 134, 54, 0.2);
}

.editor-stat.removals {
    color: var(--accent-red);
    background: rgba(218, 54, 51, 0.2);
}

.editor-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.editor-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.diff-viewer-modal-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
    font-size: 14px;
    line-height: 1.6;
}

.editor-gutter {
    width: 60px;
    min-width: 60px;
    background: var(--bg-elevated);
    border-right: 1px solid var(--bg-surface);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.editor-gutter::-webkit-scrollbar {
    display: none;
}

.editor-code {
    flex: 1;
    overflow: auto;
    background: var(--bg-elevated);
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}

.editor-code::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.editor-code::-webkit-scrollbar-track {
    background: transparent;
}

.editor-code::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
}

/* Gutter lines */
.gutter-line {
    height: 24px;
    line-height: 24px;
    text-align: right;
    padding-right: 12px;
    color: var(--text-muted);
    font-size: 12px;
    user-select: none;
}

.gutter-line.addition {
    background: rgba(35, 134, 54, 0.25);
    color: var(--accent-green);
}

.gutter-line.removal {
    background: rgba(218, 54, 51, 0.25);
    color: var(--accent-red);
}

.gutter-line.hunk {
    background: rgba(56, 139, 253, 0.15);
    color: var(--accent-blue);
    font-size: 10px;
}

.gutter-line.header {
    color: var(--text-secondary);
}

/* Code lines */
.code-line {
    height: 24px;
    line-height: 24px;
    white-space: pre;
    padding-left: 12px;
    display: flex;
}

.code-line.addition {
    background: rgba(35, 134, 54, 0.15);
    border-left: 3px solid var(--accent-green);
}

.code-line.addition .line-content {
    color: #a9fa93;
}

.code-line.addition .line-prefix {
    color: var(--accent-green);
    font-weight: bold;
    width: 20px;
    flex-shrink: 0;
}

.code-line.removal {
    background: rgba(218, 54, 51, 0.15);
    border-left: 3px solid var(--accent-red);
}

.code-line.removal .line-content {
    color: #f38686;
}

.code-line.removal .line-prefix {
    color: var(--accent-red);
    font-weight: bold;
    width: 20px;
    flex-shrink: 0;
}

.code-line.context {
    border-left: 3px solid transparent;
}

.code-line.context .line-content {
    color: var(--text-primary);
}

.code-line.context .line-prefix {
    color: var(--text-muted);
    width: 20px;
    flex-shrink: 0;
}

.code-line.hunk {
    background: rgba(56, 139, 253, 0.1);
    color: var(--accent-blue);
    font-size: 12px;
    font-style: italic;
}

.code-line.header {
    color: var(--text-secondary);
    font-weight: 600;
}

.diff-viewer-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    font-size: 12px;
    color: var(--text-secondary);
}

.editor-tool-name {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--accent-blue);
}

/* Diff preview in live activities */
.activity-diff-preview {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.diff-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.diff-stats-inline {
    display: flex;
    gap: 8px;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 11px;
}

.diff-stats-inline .stat-add {
    color: var(--accent-green);
    font-weight: 600;
}

.diff-stats-inline .stat-rem {
    color: var(--accent-red);
    font-weight: 600;
}

.expand-editor-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(88, 166, 255, 0.15);
    border: 1px solid rgba(88, 166, 255, 0.3);
    border-radius: 4px;
    color: var(--accent-blue);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.expand-editor-btn:hover {
    background: rgba(88, 166, 255, 0.25);
    border-color: rgba(88, 166, 255, 0.5);
}

.expand-editor-btn .expand-icon {
    font-size: 12px;
}

.expand-editor-btn .expand-label {
    font-weight: 500;
}

/* Live activity item with diff */
.live-activity-item.has-diff {
    flex-direction: column;
    align-items: stretch;
}

.live-activity-item.has-diff .activity-main-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Auto-scroll smooth behavior for activities list */
.live-activities-list {
    scroll-behavior: smooth;
}

/* Scrollbar for activities list */
.live-activities-list::-webkit-scrollbar {
    width: 4px;
}

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

.live-activities-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.live-activities-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   Tool Activities Section (R16, R19)
   Collapsible section for displaying tool activities on message refresh
   ============================================ */

.tool-activities-section {
    margin-top: 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.2));
    overflow: hidden;
}

.tool-activities-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    user-select: none;
}

.tool-activities-header:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}

.tool-activities-section[open] .tool-activities-header {
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.tool-activities-icon {
    font-size: 14px;
}

.tool-activities-count {
    font-weight: 500;
    color: var(--text-primary, var(--text-primary));
}

.tool-activities-list {
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.tool-activities-list::-webkit-scrollbar {
    width: 6px;
}

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

.tool-activities-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.tool-activity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.1));
    margin-bottom: 4px;
}

.tool-activity-item:last-child {
    margin-bottom: 0;
}

.tool-activity-item:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}

.tool-activity-item.complete {
    border-left: 2px solid var(--success-color, var(--accent-green));
}

.tool-activity-item.error {
    border-left: 2px solid var(--error-color, var(--accent-red));
}

.tool-activity-item.running {
    border-left: 2px solid var(--warning-color, var(--accent-yellow));
}

.tool-activity-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.tool-activity-name {
    font-weight: 500;
    color: var(--text-primary, var(--text-primary));
    min-width: 80px;
}

.tool-activity-display {
    flex: 1;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-activity-status {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
}

.tool-activity-status.complete {
    color: var(--success-color, var(--accent-green));
}

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

.tool-activity-status.running {
    color: var(--warning-color, var(--accent-yellow));
}

/* ===================================== */
/* TOOL RESULT FORMATTING                */
/* ===================================== */

/* Write file result - green additions */
.write-file-preview {
    margin-top: 8px;
}

.write-file-preview .diff-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--border-default);
}

.write-file-preview .diff-file-icon {
    font-size: 14px;
}

.write-file-preview .diff-file-path {
    color: var(--accent-blue);
    font-weight: 600;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 12px;
}

.write-file-preview .diff-stats {
    margin-left: auto;
}

.write-file-preview .diff-stat-add {
    color: var(--accent-green);
    font-weight: 600;
    font-size: 11px;
}

.write-file-preview .diff-content {
    background: var(--bg-elevated);
    border-radius: 0 0 6px 6px;
    max-height: 300px;
    overflow-y: auto;
}

.write-file-preview .diff-addition {
    display: flex;
    background: rgba(35, 134, 54, 0.15);
    border-left: 3px solid var(--accent-green);
}

.write-file-preview .diff-line-num {
    min-width: 28px;
    width: 28px;
    padding: 2px 4px 2px 2px;
    text-align: right;
    color: var(--text-muted);
    font-size: 11px;
    user-select: none;
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.write-file-preview .diff-marker {
    width: 16px;
    text-align: center;
    color: var(--accent-green);
    font-weight: 600;
}

.write-file-preview .diff-line-content {
    flex: 1;
    padding: 2px 6px 2px 0;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 11px;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.write-file-preview .diff-truncated {
    padding: 4px 8px;
    color: var(--text-muted);
    font-style: italic;
    font-size: 11px;
    text-align: center;
    background: var(--bg-elevated);
}

/* Tool result summary */
.tool-result-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.tool-result-summary.success {
    background: rgba(35, 134, 54, 0.1);
    color: var(--accent-green);
}

.tool-result-summary.error {
    background: rgba(248, 81, 73, 0.1);
    color: var(--accent-red);
}

.tool-result-summary .result-icon {
    font-size: 14px;
}

/* Bash result styling */
.bash-result {
    background: var(--bg-elevated);
    border-radius: 6px;
    overflow: hidden;
}

.bash-result .bash-command {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 12px;
}

.bash-result .bash-prompt {
    color: var(--accent-green);
    font-weight: 600;
}

.bash-result .bash-cmd {
    color: var(--text-primary);
}

.bash-result .bash-output {
    padding: 0;
    max-height: 250px;
    overflow-y: auto;
}

.bash-result .bash-output pre {
    margin: 0;
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.bash-result .bash-output .bash-error {
    color: var(--accent-red);
}

.bash-result .bash-output .bash-warning {
    color: var(--accent-yellow);
}

.bash-result .bash-output .bash-success {
    color: var(--accent-green);
}

.bash-result .bash-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    font-size: 11px;
}

.bash-result.success .bash-status {
    color: var(--accent-green);
}

.bash-result.error .bash-status {
    color: var(--accent-red);
}

/* Read file result */
.read-file-result {
    background: var(--bg-elevated);
    border-radius: 6px;
    overflow: hidden;
}

.read-file-result .file-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
}

.read-file-result .file-icon {
    font-size: 14px;
}

.read-file-result .file-path {
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 12px;
}

.read-file-result .file-lines {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
}

.read-file-result .file-content {
    max-height: 400px;
    overflow-y: auto;
}

.read-file-result .file-content pre {
    margin: 0;
    padding: 6px 8px;
    background: var(--bg-elevated) !important;
}

.read-file-result .file-content pre.line-numbers {
    padding-left: 3.2em;
}

.read-file-result .file-content pre.line-numbers > code {
    position: relative;
}

.read-file-result .file-content code {
    font-size: 12px;
    line-height: 1.5;
    font-family: "Menlo", "Monaco", "Consolas", monospace;
}

/* Prism line numbers styling for read-file-result */
.read-file-result .line-numbers .line-numbers-rows {
    border-right: 1px solid var(--border-muted);
    padding-right: 4px;
}

.read-file-result .line-numbers .line-numbers-rows > span::before {
    color: var(--text-muted);
}

/* Legacy line-num class (fallback if Prism not loaded) */
.read-file-result .line-num {
    display: inline-block;
    min-width: 28px;
    padding-right: 6px;
    text-align: right;
    color: var(--text-muted);
    user-select: none;
}

/* List files result */
.list-files-result {
    background: var(--bg-elevated);
    border-radius: 6px;
    overflow: hidden;
}

.list-files-result .list-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
}

.list-files-result .list-icon {
    font-size: 14px;
}

.list-files-result .list-path {
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 12px;
}

.list-files-result .list-count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
}

.list-files-result .list-content {
    padding: 8px 12px;
    max-height: 250px;
    overflow-y: auto;
}

.list-files-result .list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 12px;
}

.list-files-result .list-item.dir .item-name {
    color: var(--accent-blue);
}

.list-files-result .list-item.file .item-name {
    color: var(--text-primary);
}

.list-files-result .list-truncated {
    padding: 8px 0;
    color: var(--text-muted);
    font-style: italic;
    font-size: 11px;
}

/* Truncated result notice */
.tool-truncated-notice {
    padding: 8px 12px;
    background: var(--bg-surface);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 8px;
    border-left: 3px solid var(--text-muted);
}

/* Truncated result fallback display */
.tool-truncated-result {
    background: var(--bg-surface);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-default);
}

.tool-truncated-result .truncated-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-default);
}

.tool-truncated-result .truncated-icon {
    font-size: 16px;
}

.tool-truncated-result .truncated-tool {
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 12px;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
}

.tool-truncated-result .truncated-badge {
    margin-left: auto;
    padding: 2px 8px;
    background: var(--border-default);
    color: var(--text-secondary);
    border-radius: 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tool-truncated-result .fallback-info {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--bg-surface);
}

.tool-truncated-result .fallback-info:last-child {
    border-bottom: none;
}

/* Grep truncated notice */
.grep-result .grep-truncated {
    padding: 10px 12px;
    color: var(--text-secondary);
    font-size: 12px;
    background: var(--bg-surface);
    border-radius: 4px;
    margin: 4px 0;
}

/* Grep result */
.grep-result {
    background: var(--bg-elevated);
    border-radius: 6px;
    overflow: hidden;
}

.grep-result.empty {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.grep-result .grep-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
}

.grep-result .grep-icon {
    font-size: 14px;
}

.grep-result .grep-pattern {
    color: var(--accent-yellow);
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 12px;
    font-weight: 600;
}

.grep-result .grep-count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
}

.grep-result .grep-matches {
    padding: 4px 8px;
    max-height: 250px;
    overflow-y: auto;
}

.grep-result .grep-match {
    display: flex;
    gap: 4px;
    padding: 4px 0;
    font-size: 11px;
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    border-bottom: 1px solid var(--bg-surface);
}

.grep-result .grep-match:last-child {
    border-bottom: none;
}

.grep-result .match-file {
    color: var(--accent-blue);
    font-weight: 500;
}

.grep-result .match-line {
    color: var(--accent-green);
}

.grep-result .match-content {
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grep-result .grep-more {
    padding: 8px 0;
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
}

/* Find path result */
.find-result {
    background: var(--bg-elevated);
    border-radius: 6px;
    overflow: hidden;
}

.find-result.empty {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.find-result .find-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
}

.find-result .find-icon {
    font-size: 14px;
}

.find-result .find-pattern {
    color: var(--accent-yellow);
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 12px;
}

.find-result .find-count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
}

.find-result .find-paths {
    padding: 4px 8px;
    max-height: 250px;
    overflow-y: auto;
}

.find-result .find-path-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 11px;
}

.find-result .path-name {
    color: var(--text-primary);
}

.find-result .find-more {
    padding: 8px 0;
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
}

.find-result .find-truncated {
    padding: 10px 12px;
    color: var(--text-secondary);
    font-size: 12px;
    background: var(--bg-surface);
    border-radius: 4px;
    margin: 4px 0;
}

/* Web search result */
.search-result {
    background: var(--bg-elevated);
    border-radius: 6px;
    overflow: hidden;
}

.search-result.empty {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.search-result .search-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
}

.search-result .search-icon {
    font-size: 14px;
}

.search-result .search-query {
    color: var(--accent-yellow);
    font-size: 12px;
}

.search-result .search-count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
}

.search-result .search-results {
    padding: 8px 12px;
}

.search-result .search-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--bg-surface);
}

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

.search-result .search-title {
    display: block;
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 4px;
}

.search-result .search-title:hover {
    text-decoration: underline;
}

.search-result .search-snippet {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
}

/* Webpage result */
.webpage-result {
    background: var(--bg-elevated);
    border-radius: 6px;
    overflow: hidden;
}

.webpage-result .webpage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
}

.webpage-result .webpage-icon {
    font-size: 14px;
}

.webpage-result .webpage-title {
    color: var(--accent-blue);
    font-size: 12px;
    text-decoration: none;
}

.webpage-result .webpage-title:hover {
    text-decoration: underline;
}

.webpage-result .webpage-chars {
    color: var(--text-muted);
    font-size: 0.85em;
    margin-left: auto;
}

.webpage-result .tool-truncated-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    padding: 8px 12px;
    background: var(--bg-elevated);
    font-size: 0.9em;
}

/* JSON pretty formatting */
.json-pretty {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.json-pretty .json-key {
    color: #79c0ff;
}

.json-pretty .json-string {
    color: #a5d6ff;
}

.json-pretty .json-number {
    color: #79c0ff;
}

.json-pretty .json-boolean {
    color: #ff7b72;
}

.json-pretty .json-null {
    color: #ff7b72;
}