/* =================== SYSTEM PAGE STYLES =================== */
            .system-message {
                display: flex;
                margin-bottom: var(--space-3);
                max-width: 900px;
                margin-left: auto;
                margin-right: auto;
                justify-content: flex-start;
            }

            .system-bubble {
                max-width: 90%;
                padding: var(--space-3) var(--space-4);
                border-radius: var(--radius-lg);
                background: rgba(
                    27,
                    34,
                    50,
                    0.3
                ); /* Dark Navy Blue #1B2232 with opacity */
                border: 1px solid
                    rgba(
                        188,
                        32,
                        38,
                        0.3
                    ); /* Deep Red #BC2026 with opacity */
            }

            .system-bubble-header {
                display: flex;
                align-items: center;
                gap: var(--space-2);
                margin-bottom: var(--space-2);
                font-size: 12px;
            }

            .system-sender {
                color: #bc2026; /* Deep Red brand color */
                font-weight: 500;
            }

            .system-bubble-time {
                color: #a9b2bc; /* Cool Light Grey brand color */
                font-size: 11px;
            }

            .system-bubble-content {
                font-size: 13px;
                line-height: 1.5;
                white-space: pre-wrap;
                word-wrap: break-word;
                color: #a9b2bc; /* Cool Light Grey brand color */
                font-family: "SF Mono", "Monaco", "Consolas", monospace;
            }

            /* =================== FOCUS TIMER STYLES =================== */
            .focus-timer {
                display: flex;
                align-items: center;
                gap: var(--space-2);
                padding: var(--space-1) var(--space-3);
                background: var(--surface-2);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-full);
                font-size: 13px;
                font-weight: 500;
                margin-right: var(--space-4);
            }
            .focus-timer.active {
                background: var(--success-muted);
                border-color: var(--success);
                color: var(--success);
            }
            .focus-timer.break {
                background: var(--warning-muted);
                border-color: var(--warning);
                color: var(--warning);
            }
            .focus-timer-display {
                font-family: "SF Mono", "Monaco", monospace;
                font-size: 14px;
                min-width: 50px;
                text-align: center;
            }
            .focus-timer-btn {
                background: none;
                border: none;
                cursor: pointer;
                padding: 2px;
                color: inherit;
                display: flex;
                align-items: center;
                opacity: 0.8;
            }
            .focus-timer-btn:hover {
                opacity: 1;
            }
            .focus-timer-sessions {
                font-size: 11px;
                color: var(--text-muted);
                margin-left: var(--space-1);
            }

            /* =================== NOTIFICATION BELL =================== */
            .notification-bell {
                position: relative;
                cursor: pointer;
                font-size: 18px;
                padding: 4px 8px;
                border-radius: 6px;
                transition: background 0.2s;
                user-select: none;
            }
            .notification-bell:hover {
                background: var(--bg-card-hover, rgba(255,255,255,0.08));
            }
            .notification-bell-badge {
                position: absolute;
                top: -2px;
                right: 0px;
                background: var(--brand-red, #BC2026);
                color: white;
                border-radius: 50%;
                min-width: 16px;
                height: 16px;
                font-size: 10px;
                font-weight: 700;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 3px;
                pointer-events: none;
                animation: bellPulse 1s ease-in-out;
            }
            @keyframes bellPulse {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.3); }
            }

            /* =================== BENTO GRID DASHBOARD STYLES =================== */
            /* Dashboard page uses a fixed viewport bento grid layout */
            #page-dashboard {
                position: fixed;
                top: 60px; /* header height */
                left: 64px; /* sidebar collapsed width */
                right: 0;
                bottom: 0;
                overflow-y: auto;
                overflow-x: hidden;
                z-index: 50;
                padding: var(--space-4);
                background: var(--surface-base);
            }

            /* Adjust for pinned/hovered sidebar */
            .sidebar.pinned ~ .app-content #page-dashboard,
            .sidebar:hover ~ .app-content #page-dashboard {
                left: 240px;
            }

            /* Bento grid — 4-column dense layout, all widgets explicitly placed */
            .bento-grid {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                grid-auto-rows: min-content;
                gap: var(--space-3);
                width: 100%;
            }

            /* Row 1: Stats Bar (full width, compact) */
            .bento-quick-stats {
                grid-column: 1 / -1;
                grid-row: 1;
            }

            /* Row 2: Task Board (cols 1-3) + Activity Timeline (col 4) */
            .bento-task-board {
                grid-column: 1 / 4;
                grid-row: 2;
                min-height: 0;
                max-height: 740px;
                overflow: hidden;
            }

            .bento-activity {
                grid-column: 4;
                grid-row: 2;
                max-height: 740px;
            }

            /* Row 3: Agents (col 1) | Costs (col 2) | Analytics (col 3) | Notes (col 4) */
            .bento-agents {
                grid-column: 1;
                grid-row: 3;
                max-height: 300px;
            }

            .bento-costs {
                grid-column: 2;
                grid-row: 3;
                max-height: 300px;
            }

            .bento-analytics {
                grid-column: 3;
                grid-row: 3;
                max-height: 300px;
            }

            .bento-notes {
                grid-column: 4;
                grid-row: 3;
                max-height: 300px;
            }

            /* Row 4: Terminal (cols 1-2) | Heatmap (cols 3-4) */
            .bento-terminal,
            .bento-widget.bento-terminal.expanded {
                grid-column: 1 / 3 !important;
                grid-row: 4 !important;
                max-height: 280px;
            }

            .bento-heatmap {
                grid-column: 3 / 5;
                grid-row: 4;
                max-height: 280px;
            }

            /* Second heatmap instance (30-day) — must override .bento-heatmap */
            .bento-heatmap.bento-heatmap-30d {
                grid-column: 1 / -1;
                grid-row: 7;
                max-height: 200px;
            }

            /* Row 5: Pomodoro (col 1) | Agent Presence (col 2) | AI Insights (cols 3-4) */
            .bento-pomodoro {
                grid-column: 1;
                grid-row: 5;
                max-height: 300px;
            }

            .bento-agent-presence {
                grid-column: 2;
                grid-row: 5;
                max-height: 300px;
            }

            .bento-ai-insights {
                grid-column: 3 / 5;
                grid-row: 5;
                max-height: 300px;
            }

            /* Row 6: Subagents (col 1-2) | Channels (col 3-4) */
            .bento-subagents {
                grid-column: 1 / 3;
                grid-row: 6;
                max-height: 250px;
            }

            .bento-channels {
                grid-column: 3 / 5;
                grid-row: 6;
                max-height: 250px;
            }

            .bento-chat {
                grid-column: 1 / -1;
                grid-row: 8;
            }

            /* Hide 0-height empty widgets from causing grid gaps */
            .bento-widget:empty {
                display: none;
            }

            /* Tablet layout (2 columns) */
            @media (max-width: 1200px) {
                .bento-grid {
                    grid-template-columns: 1fr 1fr;
                    grid-template-rows: auto;
                }
                .bento-quick-stats,
                .bento-task-board,
                .bento-terminal,
                .bento-channels,
                .bento-chat    { grid-column: 1 / -1; grid-row: auto; }
                .bento-activity,
                .bento-agents,
                .bento-costs,
                .bento-analytics,
                .bento-heatmap,
                .bento-notes,
                .bento-pomodoro,
                .bento-agent-presence,
                .bento-ai-insights,
                .bento-subagents { grid-column: auto; grid-row: auto; }
            }

            /* Mobile layout (1 column) */
            @media (max-width: 768px) {
                .bento-grid {
                    grid-template-columns: 1fr;
                }
                .bento-task-board,
                .bento-quick-stats,
                .bento-terminal,
                .bento-activity,
                .bento-notes,
                .bento-chat,
                .bento-agents,
                .bento-costs,
                .bento-analytics,
                .bento-channels,
                .bento-heatmap,
                .bento-pomodoro,
                .bento-agent-presence,
                .bento-ai-insights,
                .bento-subagents {
                    grid-column: 1;
                    grid-row: auto;
                    max-height: none;
                }
            }

            /* Bento widget card */
            .bento-widget {
                background: var(--surface-1);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-lg);
                display: flex;
                flex-direction: column;
                overflow: hidden;
                min-height: 0; /* Important for flex child scrolling */
            }

            /* Widget header */
            .bento-widget-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: var(--space-3) var(--space-4);
                border-bottom: 1px solid var(--border-default);
                background: var(--surface-1);
                flex-shrink: 0;
            }

            .bento-widget-title {
                display: flex;
                align-items: center;
                gap: var(--space-2);
                font-size: 14px;
                font-weight: 600;
                color: var(--text-primary);
            }

            .bento-widget-title svg {
                width: 18px;
                height: 18px;
                color: var(--brand-red);
            }

            .bento-widget-actions {
                display: flex;
                align-items: center;
                gap: var(--space-2);
            }

            /* Widget content - scrollable */
            .bento-widget-content {
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
                padding: var(--space-4);
                min-height: 0; /* Important for flex child scrolling */
            }

            .bento-widget-content::-webkit-scrollbar {
                width: 6px;
            }

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

            .bento-widget-content::-webkit-scrollbar-thumb {
                background: var(--border-default);
                border-radius: 3px;
            }

            .bento-widget-content::-webkit-scrollbar-thumb:hover {
                background: var(--text-muted);
            }

            /* =================== QUICK STATS STYLES (Bento Version) =================== */
            .quick-stats-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: var(--space-3);
            }

            .quick-stats-grid {
                display: flex;
                gap: var(--space-3);
            }

            .quick-stats-grid .stat-item {
                flex: 1;
                min-width: 0;
            }

            .stat-item {
                text-align: center;
                padding: var(--space-3);
                background: var(--surface-2);
                border-radius: var(--radius-md);
            }

            .stat-value {
                font-size: 20px;
                font-weight: 700;
                color: var(--text-primary);
                line-height: 1.2;
            }

            .stat-value.brand {
                color: var(--brand-red);
            }

            .stat-label {
                font-size: 11px;
                color: var(--text-muted);
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin-top: var(--space-1);
            }

            /* Task board: toolbar stays fixed, columns scroll internally */
            .bento-task-board > .bento-widget-content {
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }

            #task-toolbar {
                flex-shrink: 0;
            }

            .bento-widget.bento-task-board .grid-3 {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: var(--space-3);
                height: 100%;
            }

            .bento-widget.bento-task-board .column {
                background: var(--surface-2);
                border: 1px solid var(--border-subtle);
                border-radius: var(--radius-md);
                padding: var(--space-3);
                display: flex;
                flex-direction: column;
                min-height: 0;
                min-width: 0;
                overflow: hidden;
            }

            .bento-widget.bento-task-board .drop-zone {
                flex: 1;
                overflow-y: auto;
                min-height: 0;
            }

            /* Done column collapse */
            .done-toggle {
                transition: background 0.2s;
            }
            .done-toggle:hover {
                background: var(--surface-2) !important;
                color: var(--text-primary) !important;
            }
            #done-tasks.done-collapsed {
                display: none;
            }

            /* =================== KEYBOARD SHORTCUTS MODAL =================== */
            .shortcuts-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-4);
            }
            @media (max-width: 600px) {
                .shortcuts-grid {
                    grid-template-columns: 1fr;
                }
            }
            .shortcut-group {
                margin-bottom: var(--space-4);
            }
            .shortcut-group-title {
                font-size: 12px;
                font-weight: 600;
                color: var(--brand-red);
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin-bottom: var(--space-2);
            }
            .shortcut-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: var(--space-2) 0;
                border-bottom: 1px solid var(--border-subtle);
            }
            .shortcut-item:last-child {
                border-bottom: none;
            }
            .shortcut-keys {
                display: flex;
                gap: 4px;
            }
            .shortcut-key {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 24px;
                height: 24px;
                padding: 0 6px;
                background: var(--surface-3);
                border: 1px solid var(--border-default);
                border-radius: 4px;
                font-family: "SF Mono", "Monaco", monospace;
                font-size: 11px;
                font-weight: 500;
                color: var(--text-secondary);
            }
            .shortcut-desc {
                font-size: 13px;
                color: var(--text-secondary);
            }
            .shortcuts-hint {
                position: fixed;
                bottom: var(--space-4);
                right: var(--space-4);
                background: var(--surface-2);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-md);
                padding: var(--space-2) var(--space-3);
                font-size: 12px;
                color: var(--text-muted);
                display: flex;
                align-items: center;
                gap: var(--space-2);
                z-index: 100;
                opacity: 0.7;
                transition: opacity var(--transition-fast);
            }
            .shortcuts-hint:hover {
                opacity: 1;
                cursor: pointer;
            }

            /* ========== Sub-Agent Monitor ========== */

            .subagent-row {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 6px 8px;
                border-radius: var(--radius-md);
                transition: background var(--transition-fast);
                font-size: 13px;
            }
            .subagent-row:hover {
                background: var(--surface-2);
            }
            .subagent-agent-badge {
                background: var(--brand-red);
                color: white;
                font-size: 10px;
                font-weight: 700;
                padding: 1px 6px;
                border-radius: var(--radius-sm);
                flex-shrink: 0;
            }
            .subagent-label {
                flex: 1;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: var(--text-primary);
            }
            .subagent-meta {
                color: var(--text-muted);
                font-size: 11px;
                flex-shrink: 0;
            }

            .subagent-summary {
                display: flex;
                justify-content: space-between;
                font-size: 11px;
                padding: 4px 8px 8px;
                border-bottom: 1px solid var(--border-default);
                margin-bottom: 4px;
            }
            .subagent-list {
                max-height: 240px;
                overflow-y: auto;
            }

            /* ========== Activity Heatmap ========== */
            /* Grid placement is in the bento grid section above */

            .heatmap-grid {
                display: flex;
                flex-direction: column;
                gap: 2px;
                overflow-x: auto;
            }
            .heatmap-row {
                display: flex;
                align-items: center;
                gap: 2px;
            }
            .heatmap-labels {
                margin-bottom: 2px;
            }
            .heatmap-day-label {
                width: 42px;
                flex-shrink: 0;
                font-size: 10px;
                color: var(--text-muted);
                text-align: right;
                padding-right: 4px;
            }
            .heatmap-hour-label {
                font-size: 9px;
                color: var(--text-muted);
                text-align: center;
            }
            .heatmap-cell {
                width: 14px;
                height: 14px;
                border-radius: 2px;
                flex-shrink: 0;
            }
            .heatmap-level-0 { background: var(--surface-2); }
            .heatmap-level-1 { background: color-mix(in srgb, var(--brand-red) 25%, var(--surface-2)); }
            .heatmap-level-2 { background: color-mix(in srgb, var(--brand-red) 50%, var(--surface-2)); }
            .heatmap-level-3 { background: color-mix(in srgb, var(--brand-red) 75%, var(--surface-2)); }
            .heatmap-level-4 { background: var(--brand-red); }

            .heatmap-legend {
                display: flex;
                align-items: center;
                gap: 4px;
                margin-top: 8px;
                justify-content: flex-end;
            }

            @media (max-width: 768px) {
                .bento-subagents,
                .bento-heatmap {
                    grid-column: 1;
                }
                .heatmap-cell {
                    width: 10px;
                    height: 10px;
                }
            }