/* ============================================================================
           INBOX VIEW
           ============================================================================ */

        /* Inbox Top Bar */
        .inbox-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 32px 16px 32px;
            margin-bottom: 0;
            border-bottom: 1px solid var(--border-light);
        }

        .inbox-title-section {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .header-workspace-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: var(--space-1) var(--space-2);
            background: none;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            color: var(--text-secondary);
            font-size: var(--font-size-14);
            font-weight: 500;
            transition: background var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);
        }

        .header-workspace-btn:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .header-workspace-name {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .header-workspace-chevron {
            width: 14px;
            height: 14px;
            stroke-width: 2;
            opacity: 0.6;
        }

        .header-separator {
            color: var(--text-tertiary);
            font-size: var(--font-size-18);
            font-weight: 300;
        }

        .inbox-top-bar .page-title {
            margin-bottom: 0;
        }

        .inbox-top-bar .inbox-count-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 28px;
            padding: 0 8px;
            background: var(--accent-fill);
            color: white;
            border-radius: var(--radius-lg);
            font-size: var(--font-size-14);
            font-weight: 600;
        }

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

        .toolbar-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .toolbar-btn:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
            transform: scale(1.05);
        }

        .toolbar-btn svg {
            width: 20px;
            height: 20px;
        }

        .toolbar-btn:focus-visible {
            outline: var(--focus-outline);
            outline-offset: var(--focus-outline-offset);
        }

        /* Bulk Actions */
        .bulk-actions {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding-left: 16px;
            border-left: 1px solid var(--border-light);
        }

        .bulk-selection-count {
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-secondary);
            margin-right: 4px;
        }

        /* Inbox Main Canvas */
        .inbox-main-canvas {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            background: var(--bg-secondary);
            padding: 0 32px;
        }

        /* Drag handle intentionally visible-on-hover in all task views (it
           used to be display:none here — rows gave no draggable signal). The
           handle is absolutely positioned in the row's padding gutter, so
           showing it costs no layout space. */

        /* Content View Header - no longer used, toggle moved to main header */

        /* Task List */
        .task-list {
            display: flex;
            flex-direction: column;
        }

        /* New Task Input */
        .new-task-row {
            display: flex;
            align-items: center;
            padding: 12px 16px;  /* Match backlog-drawer-header vertical padding */
            gap: var(--space-2);
            border-bottom: 1px solid var(--border-light);
            opacity: 0.6;
            transition: opacity var(--transition-fast);
            position: relative; /* Required for NLP preview positioning */
        }

        .new-task-row:hover {
            opacity: 1;
        }

        .new-task-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            outline: none;
            min-height: 1.4em;
            line-height: 1.4;
            white-space: pre-wrap;
            word-break: break-word;
        }

        /* Placeholder for contenteditable */
        .new-task-input:empty::before {
            content: attr(data-placeholder);
            color: var(--text-tertiary);
            pointer-events: none;
        }

        /* Prevent placeholder from showing when focused with content */
        .new-task-input:focus:empty::before {
            color: var(--text-quaternary);
        }

        /* NLP Inline Highlight - highlights parsed date/time text */
        /* Click to dismiss - removes highlight and prevents date extraction */
        .nlp-highlight {
            color: var(--accent-blue);
            background: rgba(53, 122, 189, 0.12);
            border-radius: var(--radius-sm);
            padding: 0 2px;
            margin: 0 -2px;
            cursor: pointer;
            transition: background var(--duration-fast) var(--ease-in-out);
        }

        .nlp-highlight:hover {
            background: rgba(53, 122, 189, 0.25);
        }

        /* Task Row */
        .task-row {
            display: flex;
            align-items: flex-start;
            padding: var(--space-3) var(--space-4);
            gap: var(--space-2);
            border-bottom: var(--border-subtle);
            cursor: pointer;
            transition: all var(--transition-fast);
            position: relative;
            opacity: 1;
        }

        /* Staggered animation delays for task rows - only when view is switching */
        .view-container.animating .task-row {
            animation: fadeInUp var(--duration-slow) var(--ease-in-out) forwards;
            opacity: 0;
        }

        .view-container.animating .task-row:nth-child(1) { animation-delay: 0ms; }
        .view-container.animating .task-row:nth-child(2) { animation-delay: 30ms; }
        .view-container.animating .task-row:nth-child(3) { animation-delay: 60ms; }
        .view-container.animating .task-row:nth-child(4) { animation-delay: 90ms; }
        .view-container.animating .task-row:nth-child(5) { animation-delay: 120ms; }
        .view-container.animating .task-row:nth-child(6) { animation-delay: 150ms; }
        .view-container.animating .task-row:nth-child(7) { animation-delay: 180ms; }
        .view-container.animating .task-row:nth-child(8) { animation-delay: 210ms; }
        .view-container.animating .task-row:nth-child(9) { animation-delay: 240ms; }
        .view-container.animating .task-row:nth-child(10) { animation-delay: 270ms; }
        .view-container.animating .task-row:nth-child(11) { animation-delay: 300ms; }
        .view-container.animating .task-row:nth-child(12) { animation-delay: 330ms; }
        .view-container.animating .task-row:nth-child(13) { animation-delay: 360ms; }
        .view-container.animating .task-row:nth-child(14) { animation-delay: 390ms; }
        .view-container.animating .task-row:nth-child(15) { animation-delay: 420ms; }
        .view-container.animating .task-row:nth-child(n+16) { animation-delay: 450ms; }

        .task-row {
            transition: all var(--transition-fast);
        }

        .task-row:hover,
        .task-row.dropdown-active {
            background: var(--bg-hover);
            border-radius: var(--radius-md);
            transform: translateY(-1px) scale(1.002);
            box-shadow: var(--shadow-2);
        }

        /* Disable hover effects while dragging */
        body.is-dragging .task-row:hover {
            background: transparent;
            transform: none;
            box-shadow: none;
        }

        body.is-dragging .task-row:hover .task-quick-actions {
            visibility: hidden;
            opacity: 0;
        }

        .task-row.selected {
            background: var(--accent-blue-hover);
        }

        .timeline-hour.drag-over {
            background: var(--accent-blue-light);
            border: 2px dashed var(--accent-blue);
        }

        /* Checkbox */
        .checkbox-wrapper {
            position: relative;
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            /* Align to top to match first line of task title */
            align-self: flex-start;
        }

        .checkbox {
            width: 20px;
            height: 20px;
            border: 1.5px solid var(--text-tertiary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .checkbox:hover {
            border-color: var(--accent-blue);
        }

        .checkbox.completing {
            border-color: var(--accent-blue);
            background: var(--accent-blue);
            animation: checkPulse var(--duration-slow) var(--ease-in-out);
        }

        .checkbox svg {
            width: 12px;
            height: 12px;
            stroke: white;
            stroke-width: 2.5;
            opacity: 0;
            transform: scale(0.5);
            transition: all var(--duration-normal) var(--ease-in-out);
        }

        .checkbox.completing svg {
            opacity: 1;
            transform: scale(1);
        }

        .checkbox.checked {
            border-color: var(--accent-blue);
            background: var(--accent-blue);
        }

        .checkbox.checked svg {
            opacity: 1;
            transform: scale(1);
        }

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

        /* Task Content */
        .task-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            min-width: 0;
        }

        .task-metadata {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-1-5);
            align-items: center;
        }

        /* Limit visible badges to reduce clutter - max 4 visible */
        .task-metadata .task-meta-badge:nth-child(n+5) {
            display: none;
        }