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;
            }
            .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: 11px;
                color: var(--text-muted);
                white-space: nowrap;
                min-width: 60px;
            }

            .activity-text {
                font-size: 13px;
                color: var(--text-secondary);
            }
            .activity-text.success {
                color: var(--success);
            }
            .activity-text.warning {
                color: var(--warning);
            }

            /* ========================================
               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);
            }

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