:root {
            /* Dark theme (default) */
            --bg-primary: #1a1b26;
            --bg-secondary: #24283b;
            --bg-tertiary: #414868;
            --text-primary: #c0caf5;
            --text-secondary: #a9b1d6;
            --text-muted: #565f89;
            --accent: #7aa2f7;
            --accent-hover: #89b4fa;
            --success: #9ece6a;
            --warning: #e0af68;
            --error: #f7768e;
            --border: #414868;
            /* Wait-badge staleness ramp (readable on dark --bg-tertiary #414868) */
            --wait-fresh: #8b949e;
            --wait-mid: #c0caf5;
            --wait-warn: #e0af68;
            --wait-stale: #f7768e;
        }

        /* Light theme */
        :root.light-theme {
            --bg-primary: #f5f5f5;
            --bg-secondary: #ffffff;
            --bg-tertiary: #e8e8e8;
            --text-primary: #1a1b26;
            --text-secondary: #4a4a4a;
            --text-muted: #888888;
            --accent: #2563eb;
            --accent-hover: #1d4ed8;
            --success: #16a34a;
            --warning: #ca8a04;
            --error: #dc2626;
            --border: #d4d4d4;
            /* Wait-badge staleness ramp (darkened for contrast on light --bg-tertiary #e8e8e8) */
            --wait-fresh: #6b7280;
            --wait-mid: #1f2937;
            --wait-warn: #b45309;
            --wait-stale: #b91c1c;
        }

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

        html, body {
            height: 100%;
            overflow: hidden;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            display: flex;
            flex-direction: column;
        }

        /* Header */
        header {
            background: var(--bg-secondary);
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--accent);
        }

        .header-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .header-actions button {
            background: var(--accent);
            color: var(--bg-primary);
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
        }

        .header-actions button:hover {
            background: var(--accent-hover);
        }

        .header-menu {
            position: relative;
        }

        .header-menu-btn {
            min-width: 112px;
        }

        .header-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            display: none;
            flex-direction: column;
            gap: 4px;
            width: 260px;
            padding: 8px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
            z-index: 1200;
        }

        .header-dropdown.show {
            display: flex;
        }

        .header-dropdown button,
        .header-dropdown a {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            width: 100%;
            min-height: 36px;
            padding: 8px 10px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 4px;
            color: var(--text-primary);
            font-size: 0.875rem;
            text-align: left;
            text-decoration: none;
        }

        .header-dropdown button:hover,
        .header-dropdown a:hover {
            background: var(--bg-tertiary);
            border-color: var(--border);
        }

        .header-dropdown .push-btn.active {
            background: rgba(74, 222, 128, 0.16);
            color: var(--success);
            border-color: rgba(74, 222, 128, 0.3);
        }

        .header-dropdown-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 0;
        }

        .push-btn {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }

        .push-btn:hover {
            background: var(--bg-tertiary);
            filter: brightness(1.2);
        }

        .push-btn.active {
            background: var(--success);
            color: var(--bg-primary);
        }

        .push-btn.active:hover {
            filter: brightness(0.9);
        }

        /* Mobile: compact header */
        @media (max-width: 768px) {
            .push-btn {
                font-size: 0.7rem;
                padding: 6px 8px;
            }

            header {
                padding: 8px 12px;
                flex-wrap: wrap;
                gap: 8px;
            }

            .header-actions {
                gap: 4px;
                flex-wrap: wrap;
            }

            .header-actions button {
                padding: 6px 10px;
                font-size: 0.8rem;
            }

            .header-dropdown {
                width: min(280px, calc(100vw - 24px));
            }

            /* Hide notification button text on mobile, show only icon */
            #push-toggle .btn-text {
                display: none;
            }

            /* Hide desktop-only buttons on mobile */
            .desktop-only {
                display: none !important;
            }
        }

        /* Main content */
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0; /* Allow shrinking */
            overflow: hidden;
        }

        /* Sessions list view */
        #sessions-view {
            padding: 16px;
            flex: 1;
            overflow-y: auto;
        }

        .sessions-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .agent-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .agent-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 4px;
            color: var(--text-secondary);
            font-size: 14px;
        }

        .agent-icon {
            font-size: 16px;
        }

        .agent-name {
            font-weight: 600;
            color: var(--text-primary);
        }

        .agent-session-count {
            color: var(--text-secondary);
            font-size: 12px;
        }

        .agent-sessions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-left: 8px;
            border-left: 2px solid var(--border);
        }

        .session-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 16px;
            cursor: pointer;
            transition: border-color 0.2s, transform 0.1s;
        }

        .session-recoverable {
            opacity: 0.65;
            border-left: 3px solid var(--warning, #e6a817);
        }

        .session-recoverable:hover {
            opacity: 1;
            border-color: var(--warning, #e6a817);
        }

        .agent-open-all-btn {
            font-size: 0.7rem;
            padding: 2px 8px;
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
        }

        .agent-header .agent-open-all-btn {
            margin-left: auto;
        }

        .agent-open-all-btn:disabled {
            opacity: 0.4;
            cursor: default;
        }

        .agent-open-all-btn:hover:not(:disabled) {
            filter: brightness(1.2);
        }

        #agent-filter-bar {
            display: flex;
            gap: 8px;
            padding: 8px 0;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .agent-filter-pill {
            padding: 6px 14px;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }

        .agent-filter-pill:hover {
            border-color: var(--accent);
            color: var(--text-primary);
        }

        .agent-filter-pill.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .recover-all-btn {
            font-size: 0.7rem;
            padding: 2px 8px;
            background: var(--warning, #e6a817);
            color: #000;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: auto;
            font-weight: 600;
        }

        .recover-all-btn:hover {
            filter: brightness(1.1);
        }

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

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

        .session-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }

        .session-name {
            font-weight: 600;
            font-size: 1rem;
        }

        .session-provider {
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 500;
            background: var(--bg-tertiary);
            color: var(--text-muted);
            text-transform: capitalize;
        }

        .session-usage {
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 500;
            background: var(--bg-tertiary);
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            cursor: help;
        }
        .session-usage.usage-warm { color: var(--warning); }
        .session-usage.usage-hot  { color: var(--error); }

        .quota-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 6px 0 8px;
            font-size: 0.75rem;
        }
        .quota-strip:empty { display: none; }
        .quota-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 3px 10px;
            border-radius: 12px;
            background: var(--bg-tertiary);
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            cursor: help;
        }
        .quota-chip .quota-kind { font-weight: 500; }
        .quota-chip .quota-pct  { font-weight: 600; color: var(--text-primary); }
        .quota-chip.quota-warm  .quota-pct { color: var(--warning); }
        .quota-chip.quota-hot   .quota-pct { color: var(--error); }
        .quota-chip.quota-error { opacity: 0.6; }

        .usage-totals {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 16px;
        }
        @media (max-width: 600px) {
            .usage-totals { grid-template-columns: repeat(2, 1fr); }
        }
        .usage-total-card {
            background: var(--bg-tertiary);
            padding: 10px 14px;
            border-radius: 8px;
        }
        .usage-total-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .usage-total-value {
            font-size: 1.4rem;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            margin-top: 2px;
        }
        .usage-tabs {
            display: flex;
            gap: 4px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 12px;
        }
        .usage-tab {
            background: transparent;
            border: none;
            padding: 8px 14px;
            color: var(--text-muted);
            font-size: 0.85rem;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }
        .usage-tab.active {
            color: var(--text-primary);
            border-bottom-color: var(--accent);
        }
        .usage-tab:hover { color: var(--text-primary); }
        .usage-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
            font-variant-numeric: tabular-nums;
        }
        .usage-table th, .usage-table td {
            padding: 6px 10px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }
        .usage-table th { color: var(--text-muted); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; }
        .usage-table td.num, .usage-table th.num { text-align: right; }
        .usage-table .session-link {
            color: var(--accent);
            cursor: pointer;
        }
        .usage-table .path-cell {
            color: var(--text-muted);
            font-size: 0.8rem;
            max-width: 240px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .session-status {
            font-size: 0.75rem;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: 500;
        }

        .status-running { background: var(--accent); color: var(--bg-primary); }
        .status-waiting { background: var(--warning); color: var(--bg-primary); }
        .status-stopped { background: var(--text-muted); color: var(--text-primary); }
        .status-error { background: var(--error); color: var(--bg-primary); }
        .status-starting { background: var(--success); color: var(--bg-primary); }

        .session-open-badge {
            font-size: 0.65rem;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 500;
            background: rgba(99, 102, 241, 0.15);
            color: var(--accent);
            border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .session-path {
            font-size: 0.875rem;
            color: var(--text-muted);
            word-break: break-all;
        }

        .session-summary-status {
            font-size: 1rem;
            margin-right: 8px;
        }

        .session-summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            min-height: 1.2em;
        }

        .session-summary-text {
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-style: italic;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .session-last-activity {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-left: 12px;
            white-space: nowrap;
        }

        .empty-state {
            text-align: center;
            padding: 48px 16px;
            color: var(--text-muted);
        }

        .empty-state h2 {
            font-size: 1.25rem;
            margin-bottom: 8px;
            color: var(--text-secondary);
        }

        /* Session detail view */
        #session-view {
            display: none;
            flex-direction: column;
            flex: 1;
            min-height: 0; /* Allow shrinking */
            overflow: hidden;
        }

        .session-toolbar {
            background: var(--bg-secondary);
            padding: 10px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
            gap: 16px;
        }

        /* Live latency indicator */
        .latency-indicator {
            font-size: 0.7rem;
            font-family: monospace;
            padding: 2px 6px;
            border-radius: 3px;
            background: var(--bg-primary);
            color: var(--text-muted);
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .latency-indicator.visible { opacity: 1; }
        .latency-indicator.ok { color: var(--success); }
        .latency-indicator.warn { color: var(--warning); }
        .latency-indicator.slow { color: var(--error); }

        /* Git status panel */
        .git-panel {
            background: var(--bg-secondary);
            padding: 8px 16px;
            border-bottom: 1px solid var(--border);
            display: none;
            align-items: center;
            gap: 12px;
            font-size: 0.85rem;
        }

        .git-panel.visible {
            display: flex;
        }

        .git-branch {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--accent);
            font-weight: 500;
        }

        .git-branch svg {
            width: 14px;
            height: 14px;
        }

        .git-stats {
            display: flex;
            gap: 12px;
            color: var(--text-muted);
        }

        .git-stat {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .git-stat.staged { color: var(--success); }
        .git-stat.modified { color: var(--warning); }
        .git-stat.untracked { color: var(--text-muted); }

        .git-toggle {
            margin-left: auto;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            font-size: 0.75rem;
        }

        .git-toggle:hover {
            color: var(--text-primary);
        }

        .git-files {
            display: none;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border);
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .git-files.visible {
            display: block;
        }

        .git-file {
            padding: 6px 16px;
            font-size: 0.8rem;
            font-family: monospace;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .git-file:hover {
            background: var(--bg-secondary);
        }

        .git-file-status {
            font-family: monospace;
            font-weight: bold;
            width: 16px;
            flex-shrink: 0;
            text-align: center;
        }

        .git-file-status.staged { color: var(--success); }
        .git-file-status.modified { color: var(--warning); }
        .git-file-status.untracked { color: var(--text-muted); }

        .git-file-name {
            font-family: monospace;
            font-size: 0.85rem;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* File explorer panel */
        .file-explorer {
            display: none;
            width: 220px;
            min-width: 150px;
            max-width: 400px;
            background: var(--bg-secondary);
            border-right: 1px solid var(--border);
            overflow: hidden;
            flex-shrink: 0;
        }

        .file-explorer.visible {
            display: flex;
            flex-direction: column;
        }

        .file-explorer-header {
            padding: 8px 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-tertiary);
        }

        .file-explorer-title {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .file-explorer-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px 6px;
            font-size: 1rem;
            line-height: 1;
        }

        .file-explorer-close:hover {
            color: var(--text-primary);
        }

        .file-explorer-tree {
            flex: 1;
            overflow-y: auto;
            padding: 4px 0;
        }

        .file-tree-item {
            display: flex;
            align-items: center;
            padding: 4px 8px;
            cursor: pointer;
            font-size: 0.8rem;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-tree-item:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .file-tree-item.directory {
            color: var(--accent);
        }

        .file-tree-icon {
            width: 16px;
            margin-right: 6px;
            flex-shrink: 0;
            text-align: center;
        }

        .file-tree-name {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-tree-loading {
            padding: 12px;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.8rem;
        }

        .file-tree-empty {
            padding: 12px;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-style: italic;
        }

        .file-tree-error {
            padding: 12px;
            text-align: center;
            color: var(--error);
            font-size: 0.8rem;
        }

        /* Performance metrics panel */
        .perf-panel {
            display: none;
            width: 260px;
            min-width: 200px;
            max-width: 400px;
            background: var(--bg-secondary);
            border-left: 1px solid var(--border);
            overflow: hidden;
            flex-shrink: 0;
        }

        .perf-panel.visible {
            display: flex;
            flex-direction: column;
        }

        .perf-panel-header {
            padding: 8px 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-tertiary);
        }

        .perf-panel-title {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .perf-panel-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px 6px;
            font-size: 1rem;
            line-height: 1;
        }

        .perf-panel-close:hover {
            color: var(--text-primary);
        }

        .perf-panel-body {
            flex: 1;
            overflow-y: auto;
            font-size: 0.75rem;
        }

        .perf-section {
            border-bottom: 1px solid var(--border);
            padding: 8px 12px;
        }

        .perf-section-title {
            text-transform: uppercase;
            font-size: 0.65rem;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .perf-stat-row {
            display: flex;
            justify-content: space-between;
            padding: 1px 0;
        }

        .perf-stat-label {
            color: var(--text-muted);
        }

        .perf-stat-value {
            color: var(--text-primary);
            font-family: monospace;
        }

        .perf-stat-value.slow { color: var(--error); }
        .perf-stat-value.warn { color: #e0af68; }
        .perf-stat-value.ok { color: var(--success); }

        .perf-bar {
            display: flex;
            height: 14px;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 4px;
            gap: 1px;
        }

        .perf-bar-seg {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            color: #fff;
            min-width: 0;
            overflow: hidden;
        }

        .perf-actions {
            padding: 8px 12px;
            display: flex;
            gap: 4px;
        }

        .perf-actions button {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            cursor: pointer;
        }

        .perf-actions button:hover {
            color: var(--text-primary);
            border-color: var(--text-muted);
        }

        .perf-no-data {
            padding: 20px 12px;
            text-align: center;
            color: var(--text-muted);
            font-style: italic;
        }

        /* File preview modal */
        .file-preview-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .file-preview-modal.visible {
            display: flex;
        }

        .file-preview-content {
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 8px;
            width: 100%;
            max-width: 900px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .file-preview-header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-secondary);
        }

        .file-preview-path {
            font-family: monospace;
            font-size: 0.85rem;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .file-preview-info {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-left: 12px;
            flex-shrink: 0;
        }

        .file-preview-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px 8px;
            font-size: 1.2rem;
            line-height: 1;
            margin-left: 12px;
        }

        .file-preview-close:hover {
            color: var(--text-primary);
        }

        .file-preview-body {
            flex: 1;
            overflow: auto;
            padding: 12px 16px;
        }

        .file-preview-code {
            font-family: monospace;
            font-size: 0.8rem;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-all;
            color: var(--text-primary);
            margin: 0;
        }

        .file-preview-error {
            color: var(--error);
            text-align: center;
            padding: 20px;
        }

        .file-preview-truncated {
            padding: 8px 16px;
            background: var(--bg-tertiary);
            color: var(--warning);
            font-size: 0.75rem;
            text-align: center;
        }

        /* Terminal area with optional file explorer */
        .terminal-area {
            display: flex;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        .back-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-secondary);
            font-size: 0.875rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            border-radius: 6px;
            transition: all 0.15s;
        }

        .back-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-color: var(--text-muted);
        }

        .session-title {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-primary);
            flex: 1;
            text-align: center;
        }

        .session-actions {
            display: flex;
            gap: 6px;
            align-items: center;
            position: relative;
        }

        .session-actions button {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }

        .session-actions button:hover {
            background: var(--bg-primary);
            border-color: var(--text-muted);
        }

        .session-actions > button:first-child {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
        }

        .session-actions > button:first-child:hover {
            filter: brightness(1.1);
        }

        .session-actions button.warning {
            background: transparent;
            border-color: var(--warning);
            color: var(--warning);
        }

        .session-actions button.warning:hover {
            background: var(--warning);
            color: white;
        }

        .session-actions .btn-icon {
            margin-right: 4px;
        }

        .session-tools-menu {
            position: relative;
        }

        #session-tools-btn {
            min-width: 86px;
        }

        .session-tools-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            display: none;
            flex-direction: column;
            gap: 4px;
            width: 220px;
            padding: 8px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
            z-index: 1100;
        }

        .session-tools-dropdown.show {
            display: flex;
        }

        .session-tools-dropdown button {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            min-height: 36px;
            padding: 8px 10px;
            background: transparent;
            border-color: transparent;
            text-align: left;
        }

        .session-tools-dropdown button:hover {
            background: var(--bg-tertiary);
            border-color: var(--border);
        }

        /* On mobile: hide text, show icon only, hide non-essential buttons */
        @media (max-width: 768px) {
            .session-actions > button:not(:first-child),
            .session-tools-menu {
                display: none;
            }
        }

        .session-actions button.danger {
            background: transparent;
            border-color: var(--error);
            color: var(--error);
        }

        .session-actions button.danger:hover {
            background: var(--error);
            color: white;
        }

        /* Session tabs */
        .session-tabs-container {
            display: flex;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border);
            position: relative;
        }

        .session-tabs {
            display: flex;
            background: var(--bg-primary);
            overflow-x: auto;
            overflow-y: visible;
            scrollbar-width: thin;
            position: relative;
            flex: 1;
            min-width: 0;
        }

        /* Multi-line tabs on wide screens */
        @media (min-width: 1680px) {
            .session-tabs {
                flex-wrap: wrap;
                overflow-x: visible;
            }
            .session-tab {
                border-bottom: 2px solid transparent;
            }
            .session-tab.active {
                border-bottom: 2px solid var(--accent);
            }
            .tab-overflow-btn {
                display: none !important;
            }
        }

        .tab-overflow-btn {
            display: none;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border: none;
            border-left: 1px solid var(--border);
            color: var(--text-muted);
            cursor: pointer;
            font-size: 0.875rem;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .tab-overflow-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .tab-overflow-btn.visible {
            display: flex;
        }

        .tab-overflow-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 1000;
            width: clamp(320px, 34vw, 520px);
            max-width: calc(100vw - 24px);
            max-height: min(420px, 70vh);
            overflow-y: auto;
            display: none;
        }

        .tab-overflow-dropdown.show {
            display: block;
        }

        .tab-overflow-item {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 9px 14px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text-muted);
        }

        .tab-overflow-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tab-overflow-item:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .tab-overflow-item.active {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-left: 2px solid var(--accent);
        }

        .tab-overflow-item .tab-status {
            flex-shrink: 0;
        }

        .tab-overflow-item .tab-overflow-provider {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            pointer-events: none;
            background: var(--text-muted);
        }
        .tab-overflow-item .tab-overflow-provider[data-provider="claude"] { background: #f2a15a; }
        .tab-overflow-item .tab-overflow-provider[data-provider="codex"] { background: #64c3ff; }
        .tab-overflow-item .tab-overflow-provider[data-provider="openai"] { background: #64c3ff; }
        .tab-overflow-item .tab-overflow-provider[data-provider="cursor"] { background: #d7c36a; }
        .tab-overflow-item .tab-overflow-provider[data-provider="gemini"] { background: #7ad38b; }
        .tab-overflow-item .tab-overflow-provider[data-provider="antigravity"] { background: #ff7aa8; }
        .tab-overflow-item .tab-overflow-provider[data-provider="grok"] { background: #b08cf2; }
        .tab-overflow-item .tab-overflow-provider[data-provider="qwen"] { background: #7b6dff; }

        .tab-overflow-wait {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.7rem;
            color: var(--text-muted);
            opacity: 0.75;
            /* Hit-testable so the title tooltip (auto-yes state) is reachable on hover.
               Clicks still bubble to the .tab-overflow-item onclick that switches tabs. */
            padding-left: 16px;
            background: linear-gradient(to right, transparent, var(--bg-secondary) 40%);
        }

        .tab-overflow-item:hover .tab-overflow-wait,
        .tab-overflow-item.active .tab-overflow-wait {
            background: linear-gradient(to right, transparent, var(--bg-tertiary) 40%);
        }
        /* Auto-yes state is now shown by .wait-ay-dot, not by recoloring the
           whole badge (badge color encodes staleness). */

        .session-tab {
            display: flex;
            flex-direction: column;
            padding: 6px 12px 4px;
            background: var(--bg-secondary);
            border: none;
            border-right: 1px solid var(--border);
            border-bottom: 2px solid transparent;
            color: var(--text-muted);
            cursor: pointer;
            white-space: nowrap;
            font-size: 0.875rem;
            transition: background 0.2s, color 0.2s;
            position: relative;
        }

        .tab-main-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .tab-name {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Dashboard session-card child marker (vertical list — nesting reads fine) */
        .session-child-marker {
            color: var(--text-secondary);
            opacity: 0.7;
            font-size: 0.85em;
        }
        /* Tab-bar parent/child clusters: a per-group colored left edge (color set
           inline from the group hue) + a 🔗 marker on children. No indentation —
           adjacency + color carries grouping in the wrapping multi-row bar. */
        .session-tab-grouped {
            border-left: 3px solid transparent;
        }
        .tab-link-marker {
            font-size: 0.8em;
            opacity: 0.85;
            margin-right: 1px;
        }

        .tab-subtitle {
            font-size: 0.7rem;
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 200px;
            line-height: 1.3;
            padding-top: 2px;
        }

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

        .session-tab.dragging {
            opacity: 0.5;
        }

        .session-tab.drag-over {
            border-left: 2px solid var(--accent);
        }

        .session-tab.active {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-bottom: 2px solid var(--accent);
        }

        .session-tab .tab-menu-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 3px;
            font-size: 12px;
            line-height: 1;
            cursor: pointer;
            opacity: 0.6;
        }

        .session-tab .tab-menu-btn:hover {
            opacity: 1;
            background: var(--bg-secondary);
        }

        .tab-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 1000;
            width: auto;
            min-width: 220px;
            max-width: 320px;
            display: none;
        }

        .tab-dropdown.show {
            display: block;
        }

        .tab-dropdown-item {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 0.8rem;
            white-space: nowrap;
        }

        .tab-dropdown-item:hover {
            background: var(--bg-tertiary);
        }

        .tab-dropdown-item.warning {
            color: var(--warning);
        }

        .tab-dropdown-item.danger {
            color: var(--error);
        }

        .tab-dropdown-item.disabled {
            color: var(--text-muted);
            cursor: default;
        }

        .tab-dropdown-divider {
            height: 1px;
            background: var(--border);
            margin: 2px 0;
        }

        .tab-dropdown-item.has-submenu {
            position: relative;
            padding-right: 22px;
        }

        .tab-dropdown-item.has-submenu .submenu-arrow {
            position: absolute;
            right: 8px;
            top: 6px;
            opacity: 0.7;
        }

        .tab-dropdown-submenu {
            position: absolute;
            top: 0;
            left: calc(100% + 4px);
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            min-width: 140px;
            max-width: 220px;
            display: none;
            z-index: 1001;
        }

        /* Invisible bridge to cover the gap between parent item and submenu */
        .tab-dropdown-submenu::before {
            content: '';
            position: absolute;
            top: 0;
            right: 100%;
            width: 8px;
            height: 100%;
        }

        .tab-dropdown[data-align="right"] .tab-dropdown-submenu {
            left: auto;
            right: calc(100% + 4px);
        }

        .tab-dropdown[data-align="right"] .tab-dropdown-submenu::before {
            right: auto;
            left: 100%;
        }

        .tab-dropdown-submenu.align-left {
            left: auto;
            right: calc(100% + 4px);
        }

        .tab-dropdown-submenu.align-left::before {
            right: auto;
            left: 100%;
        }

        .tab-dropdown-item.has-submenu:hover > .tab-dropdown-submenu,
        .tab-dropdown-item.has-submenu.show-submenu > .tab-dropdown-submenu {
            display: block;
        }

        /* Selection context menu (right-click on selected text) */
        .selection-toolbar {
            position: fixed;
            display: flex;
            gap: 1px;
            z-index: 1099;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            border: 1px solid var(--border);
            opacity: 0.85;
            transition: opacity 0.1s;
        }
        .selection-toolbar:hover { opacity: 1; }
        .selection-toolbar-btn {
            width: 22px;
            height: 22px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            border: none;
            padding: 0;
        }
        .selection-toolbar-btn:hover {
            background: var(--bg-tertiary);
        }
        .selection-toolbar-btn.copied {
            color: var(--accent, #4ade80);
        }
        /* Legacy class kept for mouseup ignore check */
        .selection-gear {
            /* marker class only */
        }

        .line-copy-btn {
            position: fixed;
            z-index: 1098;
            width: 20px;
            height: 18px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
            border-radius: 3px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.12s;
            pointer-events: none;
            box-shadow: 0 1px 4px rgba(0,0,0,0.25);
        }
        .line-copy-btn.visible {
            opacity: 0.7;
            pointer-events: auto;
        }
        .line-copy-btn:hover {
            opacity: 1;
            background: var(--bg-tertiary);
        }
        .line-copy-btn.copied {
            color: var(--accent, #4ade80);
        }

        .pr-review-gear {
            cursor: pointer;
            font-size: 12px;
            color: var(--text-muted);
        }
        .pr-review-gear:hover {
            color: var(--text-primary);
        }

        .selection-context-menu {
            position: fixed;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 1100;
            min-width: 140px;
            max-width: 220px;
        }
        .selection-context-menu .tab-dropdown-item {
            padding: 6px 10px;
            cursor: pointer;
            font-size: 0.8rem;
            white-space: nowrap;
        }
        .selection-context-menu .tab-dropdown-item:hover {
            background: var(--bg-tertiary);
        }
        .selection-context-menu .tab-dropdown-divider {
            height: 1px;
            background: var(--border);
            margin: 2px 0;
        }
        .selection-context-menu .tab-dropdown-item.has-submenu {
            position: relative;
            padding-right: 22px;
        }
        .selection-context-menu .tab-dropdown-item.has-submenu .submenu-arrow {
            position: absolute;
            right: 8px;
            top: 6px;
            opacity: 0.7;
        }
        .selection-context-menu .tab-dropdown-submenu {
            position: absolute;
            top: 0;
            left: calc(100% + 4px);
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            min-width: 140px;
            max-width: 220px;
            display: none;
            z-index: 1101;
        }
        .selection-context-menu .tab-dropdown-submenu::before {
            content: '';
            position: absolute;
            top: 0;
            right: 100%;
            width: 8px;
            height: 100%;
        }
        .selection-context-menu .tab-dropdown-item.has-submenu:hover > .tab-dropdown-submenu,
        .selection-context-menu .tab-dropdown-item.has-submenu.show-submenu > .tab-dropdown-submenu {
            display: block;
        }

        .tab-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            transform-origin: center;
        }

        @keyframes tab-status-pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.7); }
        }

        .tab-status.running {
            background: var(--accent);
            animation: tab-status-pulse 1.3s ease-in-out infinite;
        }
        .tab-status.waiting { background: var(--warning); }
        .tab-status.stopped { background: var(--text-muted); }
        .tab-status.starting,
        .tab-status.unknown { background: var(--text-muted); }

        @media (prefers-reduced-motion: reduce) {
            .tab-status.running { animation: none; }
        }

        .session-tab .tab-provider,
        .tab-provider {
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            color: var(--text-muted);
        }
        .tab-provider svg {
            width: 14px;
            height: 14px;
            display: block;
        }
        .tab-provider[data-provider="claude"] { color: #f2a15a; }
        .tab-provider[data-provider="codex"] { color: #64c3ff; }
        .tab-provider[data-provider="openai"] { color: #64c3ff; }
        .tab-provider[data-provider="cursor"] { color: #d7c36a; }
        .tab-provider[data-provider="gemini"] { color: #7ad38b; }
        .tab-provider[data-provider="antigravity"] { color: #ff7aa8; }
        .tab-provider[data-provider="grok"] { color: #b08cf2; }
        .tab-provider[data-provider="qwen"] { color: #7b6dff; }

        .session-tab .tab-agent {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: 700;
            color: #0f0f0f;
            background: #a0a0b0;
            flex: 0 0 auto;
        }

        /* Attention indicator for tabs needing user attention */
        .session-tab.needs-attention {
            border-color: var(--warning);
            animation: pulse-attention 2s infinite;
        }
        .session-tab .attention-indicator {
            color: var(--warning);
            font-weight: bold;
            font-size: 0.9rem;
            margin-right: 2px;
        }
        @keyframes pulse-attention {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* Auto-yes indicator — always reserves space to prevent tab width changes */
        .session-tab .auto-yes-indicator {
            color: var(--success);
            font-weight: bold;
            font-size: 0.9rem;
            margin-left: 4px;
            visibility: hidden;
        }
        .session-tab .auto-yes-indicator.visible {
            visibility: visible;
        }

        /* Waiting duration badge on tabs — positioned absolute so it never changes tab width */
        .session-tab .wait-badge {
            font-size: 0.65rem;
            padding: 0 4px;
            border-radius: 3px;
            margin-left: 4px;
            background: var(--bg-tertiary);
            color: var(--text-muted);
            white-space: nowrap;
            position: absolute;
            right: 22px;
            top: 3px;
        }
        /* Wait-badge staleness ramp. Color/weight come from theme-aware
           --wait-* tokens so light theme stays legible (dark-theme hexes baked
           into markup were invisible on the light #e8e8e8 badge). Parent-scoped
           so they beat the base `.session-tab .wait-badge` / overflow color. */
        .session-tab .wait-badge.wait-age-fresh,
        .tab-overflow-item .tab-overflow-wait.wait-age-fresh { color: var(--wait-fresh); opacity: 1; }
        .session-tab .wait-badge.wait-age-mid,
        .tab-overflow-item .tab-overflow-wait.wait-age-mid { color: var(--wait-mid); opacity: 1; font-weight: 500; }
        .session-tab .wait-badge.wait-age-warn,
        .tab-overflow-item .tab-overflow-wait.wait-age-warn { color: var(--wait-warn); opacity: 1; font-weight: 600; }
        .session-tab .wait-badge.wait-age-stale,
        .tab-overflow-item .tab-overflow-wait.wait-age-stale { color: var(--wait-stale); opacity: 1; font-weight: 700; }

        /* Auto-yes accepted/blocked dot appended after the duration (badge text
           color itself encodes staleness). Theme-aware via --success/--error. */
        .wait-ay-dot {
            font-size: 0.7em;
            margin-left: 3px;
            vertical-align: middle;
        }
        .wait-ay-accepted { color: var(--success); }
        .wait-ay-blocked { color: var(--error); }

        /* Auto-yes history panel */
        .autoyes-panel {
            display: none;
            width: 280px;
            min-width: 220px;
            max-width: 400px;
            background: var(--bg-secondary);
            border-left: 1px solid var(--border);
            overflow: hidden;
            flex-shrink: 0;
        }
        .autoyes-panel.visible {
            display: flex;
            flex-direction: column;
        }
        .autoyes-panel-header {
            padding: 8px 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-tertiary);
        }
        .autoyes-panel-title {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .autoyes-panel-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px 6px;
            font-size: 1rem;
            line-height: 1;
        }
        .autoyes-panel-close:hover {
            color: var(--text-primary);
        }
        .autoyes-panel-body {
            flex: 1;
            overflow-y: auto;
            font-size: 0.75rem;
            padding: 0;
        }
        .autoyes-entry {
            padding: 6px 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .autoyes-entry:first-child {
            background: var(--bg-tertiary);
        }
        .autoyes-entry-header {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .autoyes-entry-icon {
            font-size: 0.85rem;
            flex-shrink: 0;
        }
        .autoyes-entry-icon.triggered { color: var(--success); }
        .autoyes-entry-icon.blocked { color: #e0af68; }
        .autoyes-entry-label {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--text-primary);
        }
        .autoyes-entry-time {
            color: var(--text-muted);
            font-size: 0.65rem;
            flex-shrink: 0;
        }
        .autoyes-entry-reason {
            color: var(--text-muted);
            font-size: 0.65rem;
            padding-left: 20px;
        }
        .autoyes-live-badge {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-left: 4px;
            vertical-align: middle;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .autoyes-live-badge.triggered { background: var(--success); opacity: 1; }
        .autoyes-live-badge.blocked { background: #e0af68; opacity: 1; }

        /* Terminal container - use absolute positioning to get exact dimensions */
        .terminal-container {
            flex: 1 1 0;
            min-height: 0;
            position: relative;
            overflow: hidden;
        }
        #terminals-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        #terminals-wrapper > div {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 4px; /* Small gap to prevent toolbar overlap */
            padding: 8px;
            box-sizing: border-box;
            visibility: hidden;
            z-index: 0;
        }
        #terminals-wrapper > div.active-terminal {
            visibility: visible;
            z-index: 1;
        }

        /* Mobile-friendly plain text output */
        .mobile-output {
            display: none;
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            margin: 0;
            padding: 8px;
            overflow-y: auto;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-family: Menlo, Monaco, "Courier New", monospace;
            font-size: 12px;
            line-height: 1.4;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .path-link {
            text-decoration: underline;
            text-decoration-style: dotted;
            cursor: pointer;
        }
        .path-link:hover {
            text-decoration-style: solid;
            color: var(--accent);
        }
        .url-link {
            color: var(--accent);
            text-decoration: underline;
            text-decoration-style: dotted;
        }

        @media (max-width: 768px) {
            #terminals-wrapper {
                display: none !important;
            }

            .mobile-output {
                display: block !important;
            }

            /* Hide mobile-output when stream-view is active */
            .mobile-output.stream-active {
                display: none !important;
            }
        }

        /* Stream session view (structured progress) */
        .stream-view {
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            padding: 12px;
            overflow-y: auto;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            font-size: 14px;
            -webkit-overflow-scrolling: touch;
        }

        .stream-header {
            display: flex;
            gap: 8px;
            align-items: center;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border-radius: 8px;
            margin-bottom: 12px;
            font-size: 13px;
            color: var(--text-muted);
        }

        .stream-header .stream-status {
            color: var(--accent);
            font-weight: 500;
        }

        .stream-header .stream-status.running {
            color: #fbbf24;
        }

        .stream-header .stream-status.done {
            color: #34d399;
        }

        .stream-header .stream-status.error {
            color: #f87171;
        }

        .stream-history {
            font-family: Menlo, Monaco, "Courier New", monospace;
            font-size: 12px;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color, #333);
        }

        .stream-history:empty {
            display: none;
        }

        .stream-history-line {
            padding: 1px 0;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .stream-history-spacer {
            height: 8px;
        }

        .stream-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .stream-action {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            padding: 6px 10px;
            background: var(--bg-secondary);
            border-radius: 6px;
            font-family: Menlo, Monaco, "Courier New", monospace;
            font-size: 12px;
        }

        .stream-action .action-icon {
            flex-shrink: 0;
            width: 16px;
            text-align: center;
        }

        .stream-action .action-icon.running { color: #fbbf24; }
        .stream-action .action-icon.done { color: #34d399; }
        .stream-action .action-icon.error { color: #f87171; }

        .stream-action .action-text {
            flex: 1;
            word-break: break-word;
        }

        .stream-user-message {
            margin: 8px 0;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border-radius: 8px;
            border-left: 3px solid var(--text-muted, #6c7086);
            font-size: 13px;
            line-height: 1.5;
            word-break: break-word;
        }

        .permission-prompt {
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid #f59e0b;
            border-radius: 8px;
            padding: 12px 16px;
            margin: 8px 0;
        }
        .permission-header {
            font-weight: bold;
            color: #f59e0b;
            margin-bottom: 8px;
            font-size: 13px;
        }
        .permission-tool {
            font-family: var(--font-mono, monospace);
            font-size: 12px;
            color: var(--text-secondary, #d1d5db);
            margin-bottom: 12px;
            word-break: break-all;
            max-height: 120px;
            overflow-y: auto;
        }
        .permission-buttons {
            display: flex;
            gap: 8px;
        }
        .btn-allow {
            background: #059669;
            color: white;
            border: none;
            padding: 8px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 13px;
        }
        .btn-allow:hover { background: #047857; }
        .btn-deny {
            background: #dc2626;
            color: white;
            border: none;
            padding: 8px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 13px;
        }
        .btn-deny:hover { background: #b91c1c; }

        .stream-answer {
            margin-top: 16px;
            padding: 12px;
            background: var(--bg-secondary);
            border-radius: 8px;
            border-left: 3px solid var(--accent);
            white-space: pre-wrap;
            word-break: break-word;
            font-size: 13px;
            line-height: 1.5;
        }

        .stream-answer h4 {
            margin: 0 0 8px 0;
            font-size: 12px;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        .stream-input-container {
            margin-top: 16px;
            display: flex;
            gap: 8px;
            align-items: flex-end;
        }

        .stream-input-container textarea {
            flex: 1;
            min-height: 44px;
            max-height: 150px;
            padding: 10px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 14px;
            resize: vertical;
            outline: none;
        }

        .stream-input-container textarea:focus {
            border-color: var(--accent);
        }

        .stream-input-container textarea::placeholder {
            color: var(--text-muted);
        }

        .stream-input-container button {
            padding: 10px 20px;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            flex-shrink: 0;
        }

        .stream-input-container button:hover {
            background: var(--accent-hover);
        }

        .stream-input-container button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Floating scroll to bottom button */
        .scroll-to-bottom-btn {
            position: absolute;
            bottom: 80px;
            right: 16px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--accent);
            color: white;
            border: none;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            z-index: 100;
            opacity: 0.9;
        }

        .scroll-to-bottom-btn:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        /* Modal */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 200;
            justify-content: center;
            align-items: center;
            padding: 16px;
        }

        .modal {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 24px;
            width: 100%;
            max-width: 400px;
            max-height: calc(100vh - 32px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Cascade-close (parent + children) chooser */
        .cascade-close-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 300;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16px;
        }
        .cascade-close-modal {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 24px;
            width: 100%;
            max-width: 420px;
        }
        .cascade-close-modal h3 { margin: 0 0 12px; }
        .cascade-close-modal p { margin: 0 0 8px; color: var(--text-secondary); }
        .cascade-close-children {
            background: var(--bg-primary);
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 16px;
            font-size: 0.85rem;
            line-height: 1.5;
            max-height: 180px;
            overflow-y: auto;
        }
        .cascade-close-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
        }
        .cascade-btn {
            padding: 8px 14px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        .cascade-btn-all {
            background: var(--error);
            color: #fff;
        }
        .cascade-btn-self {
            background: var(--accent);
            color: #fff;
        }

        .modal h2 {
            margin-bottom: 16px;
        }

        .modal input {
            width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 12px;
            border-radius: 8px;
            font-size: 1rem;
            margin-bottom: 12px;
        }

        .modal input[type="checkbox"] {
            width: auto;
            margin: 0 8px 0 0;
            padding: 0;
            border: none;
        }

        .modal input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .agent-select {
            width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 12px;
            border-radius: 8px;
            font-size: 1rem;
            margin-bottom: 12px;
            cursor: pointer;
        }

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

        .agent-select option {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .modal-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            margin-top: 16px;
        }

        .modal-actions button {
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 0.875rem;
            cursor: pointer;
            border: none;
        }

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

        .modal-actions .confirm {
            background: var(--accent);
            color: var(--bg-primary);
        }

        .count-badge {
            background: var(--accent);
            color: var(--bg-primary);
            border-radius: 999px;
            padding: 2px 6px;
            font-size: 0.7rem;
            margin-left: 6px;
            line-height: 1;
        }

        .agents-section {
            margin-top: 16px;
        }

        .agents-section-title {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

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

        .agent-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            border: 1px solid var(--border);
        }

        .agent-card.agent-disabled {
            opacity: 0.55;
        }

        .agent-card.agent-disabled .agent-status-dot {
            background: var(--text-muted);
        }

        .agent-providers {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .agent-provider-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.82rem;
        }

        .agent-provider-row.is-disabled {
            opacity: 0.55;
        }

        .agent-provider-name {
            flex: 1;
            color: var(--text-primary);
        }

        .agent-provider-slug {
            color: var(--text-muted);
            font-family: monospace;
            font-size: 0.72rem;
        }

        .agent-provider-toggle {
            padding: 2px 8px;
            font-size: 0.72rem;
        }

        .agent-card-enable-btn {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border);
            padding: 4px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .agent-card-enable-btn:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .agent-card-enable-btn.is-disabled {
            border-color: var(--accent);
            color: var(--accent);
        }

        .agent-card-main {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .agent-card-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .agent-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
        }

        .agent-card-meta {
            font-size: 0.75rem;
            color: var(--text-secondary);
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

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

        .agent-update-badge {
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 999px;
            background: rgba(245, 158, 11, 0.2);
            color: var(--warning);
            border: 1px solid rgba(245, 158, 11, 0.4);
        }

        .agent-step {
            display: flex;
            gap: 12px;
            padding: 12px;
            border-radius: 8px;
            background: var(--bg-secondary);
            border: 1px dashed var(--border);
            margin-bottom: 10px;
        }

        .agent-step-number {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--accent);
            color: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
            flex-shrink: 0;
        }

        .agent-step-title {
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--text-primary);
        }

        .agent-step-body {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .agent-command {
            font-size: 0.85rem;
            background: var(--bg-primary);
            padding: 10px;
            border-radius: 6px;
            color: var(--accent);
            font-weight: 500;
            word-break: break-all;
        }

        .agent-download-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font-size: 0.8rem;
            text-decoration: none;
            cursor: pointer;
        }

        .agent-download-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .info-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            background: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(245, 158, 11, 0.4);
            border-radius: 8px;
            font-size: 0.85rem;
            color: var(--text-primary);
            margin-top: 12px;
        }

        /* Fixed top bar prompting a reload after a new deploy is detected. */
        .update-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            padding: 10px 16px;
            background: var(--accent);
            color: #fff;
            font-size: 0.9rem;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        .update-banner-btn {
            background: #fff;
            color: var(--accent);
            border: none;
            border-radius: 6px;
            padding: 5px 14px;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
        }
        .update-banner-btn:hover { opacity: 0.9; }

        .link-button {
            background: transparent;
            border: none;
            color: var(--accent);
            cursor: pointer;
            font-weight: 600;
            padding: 0;
        }

        .clone-summary {
            cursor: pointer;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .integrations-section {
            margin-top: 16px;
            padding: 16px;
            background: var(--bg-tertiary);
            border-radius: 10px;
            border: 1px solid var(--border);
        }

        .integration-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }

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

        .integration-badge {
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 999px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }

        .integration-badge.active {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
            border-color: rgba(34, 197, 94, 0.4);
        }

        .integration-fields label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .integration-fields input {
            margin-bottom: 10px;
        }

        .integration-actions {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }

        .integration-actions button {
            background: var(--accent);
            color: var(--bg-primary);
            border: none;
            padding: 8px 14px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
        }

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

        /* Token management */
        .tokens-list {
            max-height: 300px;
            overflow-y: auto;
        }

        .token-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: var(--bg-tertiary);
            border-radius: 6px;
            margin-bottom: 8px;
        }

        .token-prefix {
            font-family: monospace;
            color: var(--text-primary);
        }

        .token-revoke {
            background: #dc3545;
            color: white;
            border: none;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.75rem;
        }

        .token-revoke:hover {
            background: #c82333;
        }

        /* Running sessions section */
        .running-section h3 {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin: 0 auto 0 0;
        }

        .section-header {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }

        .section-header button {
            font-size: 0.75rem;
            padding: 4px 10px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            border-radius: 4px;
            cursor: pointer;
        }

        .section-header button:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .section-header .section-primary-btn {
            min-height: 32px;
            padding: 6px 14px;
            background: var(--accent);
            border-color: var(--accent);
            color: white;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .section-header .section-primary-btn:hover {
            background: var(--accent-hover);
            color: white;
        }

        .orchestrator-focus {
            margin-bottom: 12px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-secondary);
        }

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

        .orchestrator-focus-title {
            margin: 0;
            font-size: 0.85rem;
            color: var(--text-secondary);
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .orchestrator-focus-meta {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .orchestrator-focus-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .orchestrator-focus-item {
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            background: var(--bg-tertiary);
            transition: border-color 0.15s ease, transform 0.08s ease;
        }

        .orchestrator-focus-item:hover {
            border-color: var(--accent);
        }

        .orchestrator-focus-item:active {
            transform: scale(0.99);
        }

        .orchestrator-focus-item.tier-now {
            border-left: 3px solid var(--error);
        }

        .orchestrator-focus-item.tier-soon {
            border-left: 3px solid var(--warning);
        }

        .orchestrator-focus-item.tier-later {
            border-left: 3px solid var(--success);
        }

        .orchestrator-focus-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
        }

        .orchestrator-focus-name {
            font-size: 0.9rem;
            color: var(--text-primary);
            font-weight: 600;
        }

        .orchestrator-focus-score {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .orchestrator-focus-action {
            margin-top: 2px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .orchestrator-focus-summary {
            margin-top: 2px;
            font-size: 0.78rem;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Session history */
        .history-section {
            margin-top: 24px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }

        .history-header {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }

        .history-section h3 {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin: 0 auto 0 0;
        }

        .history-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: var(--bg-secondary);
            border-radius: 6px;
            margin-bottom: 8px;
            border: 1px solid var(--border);
        }

        .history-item:hover {
            border-color: var(--accent);
        }

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

        .history-name {
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .history-path {
            font-size: 0.75rem;
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .history-agent {
            font-size: 0.65rem;
            color: var(--accent);
            margin-top: 2px;
        }

        .history-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px;
        }

        .history-provider {
            font-size: 0.65rem;
            padding: 1px 5px;
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            text-transform: capitalize;
        }

        .history-active {
            font-size: 0.65rem;
            padding: 1px 5px;
            border-radius: 6px;
            background: rgba(255, 183, 77, 0.18);
            border: 1px solid rgba(255, 183, 77, 0.4);
            color: var(--warning);
            text-transform: uppercase;
        }

        .history-open-with {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
            padding: 4px 6px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.7rem;
        }

        .history-open-with:hover {
            border-color: var(--accent);
            color: var(--text-primary);
        }

        .history-launch {
            background: var(--accent);
            color: var(--bg-primary);
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
            margin-left: 12px;
        }

        .history-launch:hover {
            filter: brightness(1.1);
        }

        .no-history {
            color: var(--text-secondary);
            font-size: 0.85rem;
            text-align: center;
            padding: 16px;
        }

        .history-remove {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 6px 8px;
            border-radius: 4px;
            font-size: 1rem;
            line-height: 1;
        }

        .history-remove:hover {
            background: var(--error);
            color: white;
        }

        .history-actions {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        /* Autocomplete styles */
        .autocomplete-container {
            position: relative;
        }

        .autocomplete-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-top: none;
            border-radius: 0 0 8px 8px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 10;
            display: none;
        }

        .autocomplete-list.show {
            display: block;
        }

        .autocomplete-item {
            padding: 10px 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.875rem;
        }

        .autocomplete-item:hover,
        .autocomplete-item.selected {
            background: var(--accent);
            color: var(--bg-primary);
        }

        .autocomplete-item .path-icon {
            color: var(--text-muted);
        }

        .autocomplete-item:hover .path-icon,
        .autocomplete-item.selected .path-icon {
            color: var(--bg-primary);
        }

        /* Session card actions */
        .session-card-actions {
            display: flex;
            gap: 4px;
            margin-top: 8px;
        }

        .session-card-actions button {
            background: var(--bg-tertiary);
            border: none;
            color: var(--text-secondary);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            cursor: pointer;
        }

        .session-card-actions button:hover {
            background: var(--accent);
            color: var(--bg-primary);
        }

        /* User menu - inline in header */
        .user-menu {
            display: none;
            align-items: center;
            gap: 8px;
            font-size: 0.8rem;
            margin-left: 12px;
            padding-left: 12px;
            border-left: 1px solid var(--border);
        }

        .user-menu span {
            color: var(--text-secondary);
        }

        .user-menu button {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 4px 8px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.8rem;
        }

        .user-menu button:hover {
            background: var(--bg-tertiary);
        }

        .user-menu a {
            color: var(--text-secondary);
            text-decoration: none;
            padding: 4px 8px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 0.8rem;
        }

        .user-menu a:hover {
            color: var(--error);
            border-color: var(--error);
        }

        /* Mobile: compact user menu */
        @media (max-width: 768px) {
            .user-menu {
                margin-left: 8px;
                padding-left: 8px;
                gap: 4px;
                font-size: 0.7rem;
            }

            .user-menu span {
                max-width: 50px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .user-menu button, .user-menu a {
                padding: 2px 6px;
                font-size: 0.7rem;
            }

            /* On mobile, hide logout text and show icon */
            .user-menu .logout-link .link-text {
                display: none;
            }
        }

        /* Desktop: hide logout icon, show text */
        @media (min-width: 769px) {
            .user-menu .logout-link .link-icon {
                display: none;
            }
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            cursor: help;
        }

        .status-dot.connected { background: var(--success); }
        .status-dot.disconnected { background: var(--error); }
        .status-dot.connecting { background: var(--warning); }

        /* Responsive */
        @media (max-width: 480px) {
            .terminal-container {
                min-height: 150px;
            }
        }

        /* Mobile flickering fixes */
        .terminal-container {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Let xterm handle scrolling natively */
        .xterm-viewport {
            touch-action: pan-y !important;
            -webkit-overflow-scrolling: touch !important;
            overscroll-behavior: contain;
            overflow-y: scroll !important;
        }

        .xterm-screen {
            touch-action: pan-y !important;
        }

        /* Force proper touch scrolling on mobile */
        @media (max-width: 768px) {
            .xterm-viewport {
                scroll-behavior: auto !important;
            }
        }

        /* Mobile layout adjustments */
        @media (max-width: 768px) {
            html {
                height: -webkit-fill-available;
            }

            body {
                min-height: -webkit-fill-available;
            }

            .mobile-toolbar {
                display: flex !important;
            }
        }

        /* Action toolbar (visible on all screen sizes) */
        .mobile-toolbar {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 6px;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            gap: 4px;
            flex-wrap: nowrap;
            position: relative;
            z-index: 100;
        }

        .toolbar-btn {
            flex: 1;
            padding: 10px 4px;
            font-size: 1.1rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-primary);
            cursor: pointer;
            min-width: 40px;
            max-width: 60px;
            -webkit-tap-highlight-color: rgba(0,0,0,0.1);
            touch-action: manipulation;
        }

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

        /* Mobile input bar - fixed at bottom to stay above keyboard */
        .mobile-input-bar {
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 8px;
            padding-bottom: env(safe-area-inset-bottom, 8px);
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            gap: 8px;
            z-index: 200;
        }

        .mobile-text-input {
            flex: 1;
            padding: 12px;
            font-size: 16px; /* Prevents iOS zoom */
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            outline: none;
        }

        .mobile-text-input:focus {
            border-color: var(--primary);
        }

        .mobile-send-btn {
            padding: 12px 20px;
            font-size: 1rem;
            background: var(--primary);
            border: none;
            border-radius: 8px;
            color: white;
            cursor: pointer;
        }

        .mobile-close-btn {
            padding: 12px 16px;
            font-size: 1rem;
            background: var(--bg-tertiary);
            border: none;
            border-radius: 8px;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .mobile-history-btn {
            padding: 12px 14px;
            font-size: 1rem;
            background: var(--bg-tertiary);
            border: none;
            border-radius: 8px;
            color: var(--text-secondary);
            cursor: pointer;
        }

        /* SDK session input bar - always visible at bottom for SDK sessions */
        .sdk-input-bar {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            gap: 12px;
        }

        .sdk-input-label {
            color: var(--primary);
            font-weight: bold;
            font-size: 1.1rem;
        }

        .sdk-input {
            flex: 1;
            padding: 10px 14px;
            font-size: 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-primary);
            outline: none;
        }

        .sdk-input:focus {
            border-color: var(--primary);
        }

        .sdk-send-btn {
            padding: 10px 20px;
            font-size: 14px;
            background: var(--primary);
            border: none;
            border-radius: 6px;
            color: white;
            cursor: pointer;
        }

        .sdk-send-btn:hover {
            opacity: 0.9;
        }

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

        .history-menu {
            position: fixed;
            bottom: 70px;
            left: 10px;
            right: 10px;
            max-height: 200px;
            overflow-y: auto;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            z-index: 1001;
            box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
        }

        .history-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            font-family: var(--font-mono);
            font-size: 0.9rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

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

        .history-item:active {
            background: var(--primary);
            color: white;
        }

        .history-empty {
            padding: 16px;
            text-align: center;
            color: var(--text-secondary);
            font-style: italic;
        }

        /* Number pad */
        .number-pad {
            display: flex;
            justify-content: space-around;
            padding: 8px;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            gap: 8px;
        }

        .numpad-btn {
            flex: 1;
            padding: 8px 4px;
            font-size: 1.25rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            cursor: pointer;
            min-width: 50px;
            text-align: center;
            line-height: 1.2;
        }

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

        .numpad-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* More actions menu */
        .more-actions {
            display: flex;
            flex-direction: column;
            padding: 8px;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            gap: 4px;
        }

        .action-btn {
            padding: 12px;
            font-size: 0.9rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-primary);
            cursor: pointer;
            text-align: left;
        }

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

        /* Modal session list items */
        .modal-session-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            background: var(--bg-tertiary);
            border-radius: 4px;
            margin-bottom: 6px;
            cursor: pointer;
        }

        .modal-history-tab {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.8rem;
            cursor: pointer;
        }

        .modal-history-tab.active {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-color: var(--accent);
        }

        .modal-session-item:hover {
            background: var(--accent);
            color: var(--bg-primary);
        }

        /* Recent sessions - not clickable as a whole row */
        .modal-session-item.recent {
            cursor: default;
            padding: 10px 12px;
        }

        .modal-session-item.recent:hover {
            background: var(--bg-tertiary);
            color: inherit;
        }

        .modal-session-item.recent .session-path {
            color: var(--text-muted);
        }

        .modal-session-item.recent:hover .session-path {
            color: var(--text-muted);
        }

        .modal-session-item.recent .session-actions {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }

        .modal-session-item.recent .action-btn {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .modal-session-item.recent .action-btn.open {
            background: var(--accent);
            color: var(--bg-primary);
        }

        .modal-session-item.recent .action-btn.menu {
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }

        .modal-session-item.recent .menu-wrapper {
            position: relative;
        }

        .modal-session-item.recent .recent-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 44px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            min-width: 180px;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            padding: 4px 0;
        }

        .modal-session-item.recent .menu-divider {
            border-top: 1px solid var(--border);
            margin: 4px 0;
        }

        .modal-session-item.recent .menu-item,
        .modal-session-item.recent .recent-menu button {
            display: block;
            width: 100%;
            text-align: left;
            padding: 10px 16px;
            background: none;
            border: none;
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.85rem;
        }

        .modal-session-item.recent .menu-item:hover,
        .modal-session-item.recent .recent-menu button:hover {
            background: var(--bg-tertiary);
        }

        .modal-session-item.recent .menu-item.danger {
            color: var(--error);
        }

        .modal-session-item .session-info {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        .modal-session-item .session-name {
            font-weight: 500;
            font-size: 0.9rem;
        }

        .modal-session-item .session-path {
            font-size: 0.75rem;
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .modal-session-item:hover .session-path {
            color: var(--bg-secondary);
        }

        .modal-session-item .session-meta {
            display: flex;
            gap: 6px;
            margin: 2px 0;
        }

        .modal-session-item .session-agent {
            font-size: 0.65rem;
            padding: 1px 5px;
            border-radius: 6px;
            background: var(--accent);
            color: var(--bg-primary);
            font-weight: 500;
        }

        .modal-session-item .session-provider {
            font-size: 0.65rem;
            padding: 1px 5px;
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            text-transform: capitalize;
        }

        .modal-session-item .session-active-badge {
            font-size: 0.65rem;
            padding: 1px 5px;
            border-radius: 6px;
            background: rgba(255, 183, 77, 0.18);
            border: 1px solid rgba(255, 183, 77, 0.4);
            color: var(--warning);
            text-transform: uppercase;
        }

        .modal-session-item .session-status {
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 8px;
            margin-left: 8px;
        }

        .modal-session-item .session-actions {
            display: flex;
            gap: 4px;
            margin-left: 8px;
        }

        .modal-session-item .session-action-btn {
            padding: 4px 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.7rem;
            background: var(--bg-secondary);
            color: var(--text-primary);
            opacity: 0.7;
            transition: opacity 0.15s;
        }

        .modal-session-item .session-action-btn:hover {
            opacity: 1;
        }

        .modal-session-item .session-action-btn.duplicate { background: var(--primary); color: white; }
        .modal-session-item .session-action-btn.restart { background: #f59e0b; color: white; }
        .modal-session-item .session-action-btn.stop { background: #ef4444; color: white; }

        .modal-no-items {
            color: var(--text-muted);
            font-size: 0.85rem;
            padding: 8px;
        }

        /* Splash screen */
        .splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-primary);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
        }

        .splash-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .splash-logo {
            font-size: 3rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 2rem;
            letter-spacing: -0.02em;
        }

        .splash-logo span {
            color: var(--text-primary);
        }

        .splash-loader {
            display: flex;
            gap: 8px;
        }

        .splash-loader .dot {
            width: 12px;
            height: 12px;
            background: var(--accent);
            border-radius: 50%;
            animation: splash-bounce 1.4s ease-in-out infinite;
        }

        .splash-loader .dot:nth-child(1) { animation-delay: 0s; }
        .splash-loader .dot:nth-child(2) { animation-delay: 0.2s; }
        .splash-loader .dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes splash-bounce {
            0%, 80%, 100% {
                transform: scale(0.6);
                opacity: 0.4;
            }
            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .splash-status {
            margin-top: 1.5rem;
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        /* Landing page for unauthenticated users */
        .landing-page {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-primary);
            z-index: 9000;
            overflow-y: auto;
        }

        .landing-content {
            max-width: 900px;
            margin: 0 auto;
            padding: 60px 24px;
            min-height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .landing-hero {
            text-align: center;
            margin-bottom: 48px;
        }

        .landing-title {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 12px;
            letter-spacing: -0.02em;
        }

        .landing-title span {
            color: var(--text-primary);
        }

        .landing-tagline {
            font-size: 1.5rem;
            color: var(--text-secondary);
            margin-bottom: 16px;
            font-weight: 500;
        }

        .landing-description {
            font-size: 1.1rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .landing-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            margin-bottom: 48px;
        }

        .landing-feature {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px;
            text-align: center;
        }

        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 12px;
        }

        .landing-feature h3 {
            font-size: 1.1rem;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .landing-feature p {
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.5;
        }

        .landing-cta {
            text-align: center;
        }

        .landing-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #24292e;
            color: white;
            padding: 14px 32px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .landing-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .landing-note {
            margin-top: 12px;
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        @media (max-width: 768px) {
            .landing-content {
                padding: 40px 16px;
            }

            .landing-title {
                font-size: 2.5rem;
            }

            .landing-tagline {
                font-size: 1.2rem;
            }

            .landing-description {
                font-size: 1rem;
            }

            .landing-features {
                grid-template-columns: 1fr;
            }
        }