/* ========================================
               TASK BOARD
               ======================================== */

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

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

            .column {
                background: var(--surface-1);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-lg);
                padding: var(--space-4);
                min-height: 300px;
            }

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

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

            .drop-zone {
                min-height: 200px;
                max-height: 400px;
                overflow-y: auto;

                border-radius: var(--radius-md);
                transition: background var(--transition-fast);
            }
            .drop-zone.drag-over {
                background: var(--surface-2);
            }

            .task-card {
                background: var(--surface-2);
                border: 1px solid var(--border-subtle);
                border-radius: var(--radius-md);
                padding: var(--space-3);
                margin-bottom: var(--space-2);
                cursor: pointer;
                transition: all var(--transition-fast);
                position: relative;
                overflow: hidden;
                word-break: break-word;
            }
            .task-card:hover {
                border-color: var(--border-strong);
            }

            .drag-handle {
                cursor: grab;
                user-select: none;
                opacity: 0.3;
                font-size: 14px;
                line-height: 1;
                padding: 2px 0;
                transition: opacity 0.15s;
                flex-shrink: 0;
            }
            .drag-handle:hover {
                opacity: 0.8;
            }
            .drag-handle:active {
                cursor: grabbing;
            }

            .task-card.selected {
                border-color: var(--brand-red);
                box-shadow: 0 0 0 2px var(--control-focus);
            }

            .priority-p0 {
                border-left: 3px solid var(--brand-red);
            }
            .priority-p1 {
                border-left: 3px solid var(--warning);
            }
            .priority-p2 {
                border-left: 3px solid #3b82f6;
            }

            .task-title {
                font-size: 13px;
                font-weight: 500;
                color: var(--text-primary);
                margin-bottom: var(--space-1);
            }

            .task-meta {
                font-size: 11px;
                color: var(--text-muted);
            }

            /* Quick actions on hover */
            .task-quick-actions {
                position: absolute;
                right: var(--space-2);
                top: 50%;
                transform: translateY(-50%);
                opacity: 0;
                transition: opacity var(--transition-fast);
            }
            .task-card:hover .task-quick-actions {
                opacity: 1;
            }

            /* ========================================
               TERMINAL
               ======================================== */

            .terminal {
                background: #0d1117;
                border: 1px solid var(--border-default);
                border-radius: var(--radius-lg);
                overflow: hidden;
            }

            .terminal-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: var(--space-3) var(--space-4);
                background: var(--surface-2);
                border-bottom: 1px solid var(--border-default);
            }

            .terminal-dots {
                display: flex;
                gap: 6px;
            }
            .terminal-dots span {
                width: 12px;
                height: 12px;
                border-radius: 50%;
            }
            .terminal-dots .red {
                background: #ff5f56;
            }
            .terminal-dots .yellow {
                background: #ffbd2e;
            }
            .terminal-dots .green {
                background: #27c93f;
            }

            .terminal-title {
                font-family: "Fira Code", "Monaco", monospace;
                font-size: 12px;
                color: var(--text-secondary);
            }

            .terminal-output {
                padding: var(--space-4);
                font-family: "Fira Code", "Monaco", "Consolas", monospace;
                font-size: 13px;
                line-height: 1.6;
                height: 250px;
                overflow-y: auto;

                color: var(--text-secondary);
            }
            .terminal-output .cmd {
                color: #7ee787;
            }
            .terminal-output .info {
                color: #58a6ff;
            } /* Brighter blue for timestamps */
            .terminal-output .error {
                color: #f85149;
            }
            .terminal-output .success {
                color: #7ee787;
            }
            .terminal-output .warning {
                color: #d29922;
            }

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

            .chat-container {
                display: flex;
                flex-direction: column;
                height: 100%;
            }

            .chat-header {
                padding: var(--space-4);
                border-bottom: 1px solid var(--border-default);
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .chat-messages {
                flex: 1;
                min-height: 300px;
                max-height: 350px;
                overflow-y: auto;
                padding: var(--space-4);
                background: var(--surface-base);
            }

            .chat-input-area {
                padding: var(--space-3);
                border-top: 1px solid var(--border-default);
                display: flex;
                gap: var(--space-2);
                align-items: center;
            }

            /* Image preview - supports multiple images */
            .image-preview-container {
                padding: var(--space-2) var(--space-3);
                border-top: 1px solid var(--border-default);
                display: none;
            }
            .image-preview-container.visible {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-2);
                align-items: flex-start;
            }
            .image-preview-wrapper {
                position: relative;
                display: inline-block;
            }
            .image-preview-wrapper img {
                max-height: 60px;
                max-width: 80px;
                object-fit: cover;
                border-radius: var(--radius-md);
            }
            .image-preview-close {
                position: absolute;
                top: -6px;
                right: -6px;
                width: 18px;
                height: 18px;
                background: var(--brand-red);
                color: white;
                border: none;
                border-radius: 50%;
                font-size: 10px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* ========================================
               ACTIVITY LOG
               ======================================== */

            .activity-list {
                height: 250px;
                overflow-y: auto;
            }

            .activity-item {
                display: flex;
                align-items: flex-start;
                gap: var(--space-3);
                padding: var(--space-2) 0;
                border-bottom: 1px solid var(--border-subtle);
            }
            .activity-item:last-child {
                border-bottom: none;
            }

            .activity-time {
                font-size: 10px;
                color: var(--text-muted);
                white-space: nowrap;
                min-width: 50px;
            }

            .activity-text {
                font-size: 12px;
                color: var(--text-secondary);
                line-height: 1.4;
            }
            .activity-text.success {
                color: var(--success);
            }
            .activity-text.warning {
                color: var(--warning);
            }

            /* Activity group headers */
            .activity-group-header {
                font-size: 10px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                color: var(--text-muted);
                padding: var(--space-2) 0 var(--space-1);
                border-bottom: 1px solid var(--border-subtle);
                margin-bottom: var(--space-1);
                margin-top: var(--space-2);
            }
            .activity-group-header:first-child {
                margin-top: 0;
            }
            
            .activity-group-header {
                font-size: 10px;
                font-weight: 600;
                color: var(--brand-red);
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin-top: var(--space-3);
                margin-bottom: var(--space-2);
                padding-bottom: var(--space-1);
                border-bottom: 1px solid var(--border-subtle);
            }
            .activity-group-header:first-child {
                margin-top: 0;
            }
            
            .activity-system-toggle:hover {
                background: var(--surface-3) !important;
                color: var(--text-secondary) !important;
            }

            /* ========================================
               NOTES
               ======================================== */

            .notes-input {
                display: flex;
                gap: var(--space-2);
                margin-bottom: var(--space-4);
            }

            .notes-list {
                height: 200px;
                overflow-y: auto;
            }

            .note-item {
                padding: var(--space-3);
                background: var(--surface-2);
                border-radius: var(--radius-md);
                margin-bottom: var(--space-2);
            }

            .note-text {
                font-size: 13px;
                color: var(--text-primary);
                margin-bottom: var(--space-1);
            }

            .note-meta {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 11px;
                color: var(--text-muted);
            }

            /* ========================================
               PRODUCT STATUS
               ======================================== */

            .product-card {
                background: var(--surface-1);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-lg);
                padding: var(--space-4);
            }

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

            .product-name {
                font-size: 14px;
                font-weight: 600;
                color: var(--text-primary);
            }

            .product-desc {
                font-size: 13px;
                color: var(--text-secondary);
                margin-bottom: var(--space-2);
            }

            .product-meta {
                font-size: 11px;
                color: var(--text-muted);
            }

            /* ========================================
               DOCS HUB
               ======================================== */

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

            .docs-search {
                width: 200px;
            }

            .doc-card {
                display: block;
                background: var(--surface-1);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-lg);
                padding: var(--space-4);
                transition: border-color var(--transition-fast);
                text-decoration: none;
                overflow: hidden;
            }
            .doc-card:hover {
                border-color: var(--border-strong);
            }
            .doc-card * {
                max-width: 100%;
            }

            .doc-icon {
                width: 32px;
                height: 32px;
                border-radius: var(--radius-md);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
            .doc-icon.gdoc {
                background: rgba(66, 133, 244, 0.15);
                color: #4285f4;
            }
            .doc-icon.gsheet {
                background: rgba(52, 168, 83, 0.15);
                color: #34a853;
            }
            .doc-icon.pdf {
                background: rgba(234, 67, 53, 0.15);
                color: #ea4335;
            }
            .doc-icon.default {
                background: var(--surface-3);
                color: var(--text-secondary);
            }

            .doc-title {
                font-size: 14px;
                font-weight: 500;
                color: var(--text-primary);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .doc-meta {
                font-size: 12px;
                color: var(--text-muted);
            }

            /* ========================================

/* ========================================
   NEW DASHBOARD WIDGETS
   ======================================== */

/* Agent Status Row */
.agent-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    transition: background 0.15s;
}
.agent-status-row:hover {
    background: var(--surface-2);
}

/* Channel Status Row */
.channel-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
}

/* Memory Tree */
.memory-tree-dir {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
}
.memory-tree-dir:hover {
    background: var(--surface-2);
}
.tree-chevron {
    font-size: 9px;
    width: 12px;
    text-align: center;
    color: var(--text-muted);
}
.memory-tree-children {
    padding-left: 16px;
}
.memory-tree-file {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    cursor: pointer;
    border-radius: 4px;
}
.memory-tree-file:hover {
    background: var(--surface-2);
}

/* Bento grid additions — placement now in pages.css */

/* Done column collapse */
.done-collapsed-summary {
    cursor: pointer;
    padding: var(--space-3);
    text-align: center;
    background: var(--surface-3);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    transition: background 0.15s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.done-collapsed-summary:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}

.drop-zone.done-hidden {
    display: none;
}

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

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6);
    color: var(--text-muted);
    background: rgba(var(--surface-2-rgb, 28, 30, 35), 0.3);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
}

.empty-state svg {
    width: 48px;
    height: 48px;
    opacity: 0.4;
    margin-bottom: var(--space-3);
    color: var(--text-muted);
}

.empty-state-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.empty-state-desc {
    font-size: 12px;
    color: var(--text-muted);
}