:root {
            --font-sled: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --primary: #667eea;
            --primary-dark: #5a67d8;
            --secondary: #64748b;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --surface: rgba(255, 255, 255, 0.7);
            --surface-hover: rgba(255, 255, 255, 0.9);
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
            --radius: 12px;
            --radius-lg: 16px;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html,
        body,
        input,
        select,
        textarea,
        button {
            font-family: var(--font-sled);
        }
        
                         body {
            background: #4fc3f7 !important;
            background: linear-gradient(135deg, #4fc3f7 0%, #2196f3 25%, #1976d2 50%, #1565c0 75%, #0d47a1 100%) !important;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.05) 0%, transparent 40%) !important;
            background-attachment: fixed !important;
            background-size: cover !important;
            background-repeat: no-repeat !important;
            min-height: 100vh;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            padding-top: 140px; /* More space for admin header */
            position: relative;
        }
        
        /* Force background on html element as well */
        html {
            background: linear-gradient(135deg, #90caf9 0%, #64b5f6 25%, #42a5f5 50%, #2196f3 75%, #1976d2 100%) !important;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.2) 0%, transparent 30%),
                radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.1) 0%, transparent 40%) !important;
            background-attachment: fixed !important;
            background-size: cover !important;
            background-repeat: no-repeat !important;
            min-height: 100vh;
        }
        

        

        
                 .container {
             max-width: 800px; /* Narrower for vertical stacking (worker mode default) */
             margin: 0 auto;
             margin-top: 20px;
         }
         /* Edit mode (no worker-mode class) expands layout */
         .container:not(.worker-mode) {
             max-width: 1200px;
         }
        
                 .header {
             background: rgba(255, 255, 255, 0.6);
             border-radius: var(--radius);
             padding: 20px;
             margin-bottom: 20px;
             box-shadow: var(--shadow);
             backdrop-filter: blur(20px);
             text-align: center;
         }
         
         .header h1 {
             font-size: 1.8em;
             font-weight: 700;
             color: var(--primary);
             margin-bottom: 5px;
         }
         
         .header .subtitle {
             color: var(--secondary);
             font-size: 0.9em;
             font-weight: 400;
         }
        
        /* Quick Add Project - Immediate Focus */
        .quick-add-project {
            background: rgba(255, 255, 255, 0.6);
            border-radius: var(--radius);
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .quick-add-project:hover {
            background: var(--surface-hover);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }
        
        .add-prompt {
            color: var(--secondary);
            font-size: 1rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .add-prompt i {
            color: var(--primary);
        }
        
        .project-input-container {
            display: none;
            flex-direction: column;
            gap: 15px;
        }
        
        .project-input-container.active {
            display: flex;
        }
        
        .project-input-row {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        
        .project-name-input {
            flex: 1;
            padding: 12px 16px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
            outline: none;
            background: #f1f5f9;
        }
        
        .project-name-input:focus {
            background: #fff;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.35);
        }
        
        .color-picker {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        
        
         
         /* Task-level team assignment chips */
         .task-assignment {
             display: flex;
             gap: 2px;
             flex-wrap: wrap;
             padding: 3px 0 0 0;
         }
         
         /* Project metadata */
         .project-domains {
             font-size: 1rem;
             color: var(--secondary);
             margin-top: 4px;
         }
         
         .stage-badge {
             padding: 2px 8px;
             border-radius: 12px;
             font-size: 10px;
             font-weight: 600;
             color: white;
             text-transform: uppercase;
         }
        
        /* Filter Chips */
         .filters {
             display: flex;
             gap: 6px;
             margin-bottom: 20px;
             margin-top: 0.5em;
             flex-wrap: wrap;
             align-items: center;
             justify-content: center;
             padding: 0 16px;
         }
        /* Hide Templates chip in worker mode */
        .worker-mode .templates-chip {
            display: none;
        }
         
         .filter-chip {
             padding: 8px 12px;
             border-radius: 0;
             font-size: 1rem;
             font-weight: 500;
             cursor: pointer;
             transition: all 0.3s ease;
             background: #f3f4f6;
             color: #6b7280;
             border: none;
             margin: 0;
             display: flex;
             align-items: center;
             gap: 6px;
         }
         
         .filter-chip:hover {
             background: #e5e7eb;
             color: #374151;
         }
         
         .filter-chip.active {
             background: white;
             color: #374151;
             font-weight: 600;
         }
         
         .filter-chip.active::before {
             content: "\f3a5";
             font-family: "Font Awesome 6 Free";
             font-weight: 900;
             color: #06b6d4;
             margin-right: 4px;
         }
         
         /* Team member filter chips - pill shaped like task chips */
         #team-filters-container {
             display: flex;
             gap: 8px;
             align-items: center;
             margin-right: 12px;
         }
         
         .team-filter-chip {
             min-width: 60px;
             padding: 6px 12px;
             border-radius: 100px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: all 0.2s ease;
             background: #e2e8f0;
             border: none;
             gap: 4px;
             font-size: 0.65rem;
             font-weight: 500;
             color: #64748b;
             opacity: 0.6;
             box-shadow: none;
         }
         
         .team-filter-chip:hover {
             opacity: 1;
         }
         
         .team-filter-chip.active {
             opacity: 1;
             color: white;
             box-shadow: none;
             /* Background color set dynamically based on team member color */
         }
         
         .team-filter-chip .member-name {
             font-size: 0.65rem;
             font-weight: 600;
             color: #64748b;
             white-space: nowrap;
         }
         
         .team-filter-chip.active .member-name {
             color: white;
         }
         
         .team-filter-chip i {
             font-size: 0.65rem;
             color: #64748b;
         }
         
         .team-filter-chip.active i {
             color: white;
         }
         
         /* Visibility Chips in Header */
         .visibility-chips {
             display: flex;
             gap: 12px;
             align-items: center;
             margin-left: auto;
             margin-right: 20px;
         }
         
         .visibility-chip {
             display: flex;
             align-items: center;
             gap: 6px;
             padding: 4px 8px;
             cursor: pointer;
             transition: all 0.2s ease;
             font-size: 0.75rem;
             font-weight: 300;
             color: #6b7280;
             border-radius: 4px;
         }
         
         .visibility-chip:hover {
             background: rgba(0,0,0,0.05);
             color: #374151;
         }
         
         .visibility-chip.active {
             color: #2563eb;
         }
         
         .visibility-chip .visibility-icon {
             font-size: 0.7rem;
             transition: all 0.2s ease;
         }
         
         .visibility-chip.active .visibility-icon {
             color: #2563eb;
         }
         
         /* Unassigned filter chip - pill styled like team chips */
         .filter-chip[data-filter="unassigned"] {
             min-width: 80px;
             padding: 6px 12px;
             border-radius: 100px !important;
             background: #e2e8f0 !important;
             border: none !important;
             font-size: 0.65rem;
             font-weight: 500;
             color: #64748b !important;
             opacity: 0.6;
             box-shadow: none !important;
             gap: 4px;
         }
         
         .filter-chip[data-filter="unassigned"]:hover {
             opacity: 1;
         }
         
         .filter-chip[data-filter="unassigned"].active {
             background: #94a3b8 !important;
             color: white !important;
             opacity: 1;
         }
         
         .filter-chip[data-filter="unassigned"].active::before {
             color: white !important;
         }
        /* Templates dropdown styles */
        .project-actions { 
            position: relative; 
            z-index: 2000; 
        }
        .templates-btn { background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 6px; }
        .templates-btn:hover { background: rgba(0,0,0,0.05); }
        .templates-menu {
            display: none;
            position: fixed;
            background: #fff;
            border: none;
            border-radius: 8px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
            min-width: 220px;
            max-height: 300px;
            z-index: 10020;
            overflow-y: auto;
        }
        .templates-menu.open { display: block; }
        .templates-menu .menu-item { padding: 8px 12px; cursor: pointer; font-size: 0.95rem; }
        .templates-menu .menu-item:hover { background: #f3f4f6; }
        .templates-menu .menu-empty { padding: 10px 12px; color: #6b7280; font-size: 0.9rem; }
        
                 /* Projects Stack */
         .projects-stack {
             display: flex;
             flex-direction: column;
             gap: 0px;
         }
         
         /* Loading placeholders - High contrast */
         .loading-placeholder {
             height: 60px;
             background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%);
             background-size: 200% 100%;
             animation: loading 1.2s infinite;
             border-radius: 6px;
             margin-bottom: 2px;
         }
         
         @keyframes loading {
             0% { background-position: 200% 0; }
             100% { background-position: -200% 0; }
         }
        
                .project-card {
            background: rgba(255, 255, 255, 0.6);
            border-radius: 6px;
            padding: 0 12px 4px 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(20px);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            margin-bottom: 0.5em;
            cursor: move;
            overflow: visible;
        }
         
         .project-card.highlight {
             background: #f0f9ff;
             transform: scale(1.02);
             box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
         }
         
         .project-card.hiding {
             opacity: 0;
             transform: translateX(-20px);
             transition: all 0.3s ease;
         }
         
         .project-card.showing {
             opacity: 1;
             transform: translateX(0px);
             transition: all 0.3s ease;
         }
         
         .project-card.grabbed {
             transform: rotate(1deg) scale(1.02);
             transform-origin: var(--grab-point-x, center) center;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
             z-index: 1000;
             transition: none;
         }
         
         .project-card.settling {
             animation: wiggle 0.6s ease-out;
         }
         
         .project-card.selected {
             border: none !important;
             box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.55), 0 4px 16px rgba(102, 126, 234, 0.25) !important;
             background: rgba(255, 255, 255, 1) !important;
             transform: translateY(-1px) !important;
         }
         
         @keyframes wiggle {
             0% { transform: rotate(0deg); }
             15% { transform: rotate(2deg); }
             30% { transform: rotate(-2deg); }
             45% { transform: rotate(1deg); }
             60% { transform: rotate(-1deg); }
             75% { transform: rotate(0.5deg); }
             100% { transform: rotate(0deg); }
         }
         
         .project-card:hover {
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
         }
         
         .project-card.hidden {
             opacity: 0.5;
         }
        
                 .project-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         

         
         .project-order {
             display: inline-block;
             width: 16px;
             height: 16px;
             border: none;
             border-radius: 50%;
             text-align: center;
             line-height: 16px;
             font-size: 0.8rem;
             font-weight: 300;
             color: #64748b;
             margin-right: 6px;
             vertical-align: middle;
             background: rgba(100, 116, 139, 0.12);
         }
         
         .project-actions {
             display: flex;
             gap: 4px;
             align-items: center;
             margin-left: auto;
         }

        .project-sync-ribbon {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 8px;
            min-height: 24px;
            background: #9ca3af;
            border-radius: 0 0 6px 6px;
            margin: 4px -12px -4px -12px;
        }

        .project-sync-ribbon.unlinked {
            background: #d1d5db;
            justify-content: flex-end;
        }

        .project-sync-ribbon.unlinked .project-sync-btn {
            color: rgba(0, 0, 0, 0.45);
            opacity: 1;
        }

        .project-sync-ribbon.unlinked .project-sync-btn:hover {
            color: rgba(0, 0, 0, 0.75);
        }

        .project-sync-btn {
            border: none;
            background: none;
            color: #fff;
            border-radius: 0;
            width: auto;
            height: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            padding: 0;
            opacity: 0.85;
        }

        .project-sync-btn:hover {
            background: none;
            border: none;
            color: #fff;
            opacity: 1;
        }

        .project-sync-btn.syncing {
            opacity: 0.4;
            pointer-events: none;
        }

        .project-sync-btn.done {
            color: #fff;
            opacity: 0.6;
        }

        .project-sync-btn.unlink {
            font-size: 10px;
            opacity: 0.5;
        }

        .project-sync-btn.unlink:hover {
            opacity: 1;
            color: #fca5a5;
        }

        .project-sync-acct-name {
            font-size: 11px;
            color: rgba(255,255,255,0.8);
            white-space: nowrap;
            margin-left: auto;
        }

        .project-sync-draft-count {
            font-size: 11px;
            color: rgba(255,255,255,0.7);
            white-space: nowrap;
        }

        .project-sync-muted {
            font-size: 11px;
            color: rgba(0,0,0,0.4);
            white-space: nowrap;
        }
         
         .template-label {
             display: inline-flex;
             align-items: center;
             gap: 4px;
             background: #f97316;
             color: white;
             padding: 2px 6px;
             border-radius: 12px;
             font-size: 0.75rem;
             font-weight: 500;
             margin-left: 8px;
         }
         
         .template-label i {
             font-size: 0.7rem;
         }
         
         .sort-btn, .hide-btn, .templates-btn, .delete-project-btn {
             background: #e2e8f0;
             border: none;
             border-radius: 3px;
             padding: 4px 6px;
             font-size: 0.85rem;
             cursor: pointer;
             transition: all 0.3s ease;
             color: #64748b;
             width: 24px;
             height: 24px;
             display: flex;
             align-items: center;
             justify-content: center;
         }
         
         .sort-btn:hover, .hide-btn:hover {
             background: #cbd5e1;
             transform: scale(1.1);
         }
         
         .hide-btn {
             background: #fef2f2;
             color: #dc2626;
         }
         
         .hide-btn:hover {
             background: #fee2e2;
         }
         
         .templates-btn {
             background: #fef3c7;
             color: #d97706;
         }
         
         .templates-btn:hover {
             background: #fde68a;
         }
         
         .delete-project-btn {
             background: #fef2f2;
             color: #dc2626;
         }
         
         .delete-project-btn:hover {
             background: #fee2e2;
         }
         
         /* Tooltip styles */
         [data-tooltip] {
             position: relative;
         }
         
         [data-tooltip]:hover::after {
             content: attr(data-tooltip);
             position: absolute;
             bottom: 125%;
             left: 50%;
             transform: translateX(-50%);
             background: #333;
             color: white;
             padding: 4px 8px;
             border-radius: 4px;
             font-size: 11px;
             white-space: nowrap;
             z-index: 9999;
             opacity: 0;
             animation: tooltipFadeIn 0.2s ease forwards;
             pointer-events: none;
         }
         
         [data-tooltip]:hover::before {
             content: '';
             position: absolute;
             bottom: 115%;
             left: 50%;
             transform: translateX(-50%);
             border: 4px solid transparent;
             border-top-color: #333;
             z-index: 9999;
             opacity: 0;
             animation: tooltipFadeIn 0.2s ease forwards;
             pointer-events: none;
         }

        /* Task title icons: tooltip below so moving toward the label does not break hover; match global tooltip look */
        .task-title-edit-icon[data-tooltip]:hover::after,
        .task-context-icon[data-tooltip]:hover::after {
            bottom: auto;
            top: 100%;
            margin-top: 6px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
        }

        .task-title-edit-icon[data-tooltip]:hover::before,
        .task-context-icon[data-tooltip]:hover::before {
            bottom: auto;
            top: 100%;
            margin-top: 2px;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: transparent;
            border-bottom-color: #333;
        }
         
         @keyframes tooltipFadeIn {
             to { opacity: 1; }
         }
        
                 /* Quick Add Task - Very Compact */
         .quick-add-task {
             background: #f1f5f9;
             border: none;
             border-radius: 4px;
             padding: 4px 8px;
             margin-bottom: 6px;
             cursor: pointer;
             transition: background 0.1s;
             text-align: center;
         }
         
         .quick-add-task:hover {
             background: #e2e8f0;
         }
         
         .task-prompt {
             color: var(--secondary);
             font-size: 1rem;
             font-weight: 500;
         }
         
         .task-prompt.hidden {
             display: none;
         }
         
         .task-input-container {
             display: none;
             flex-direction: column;
             gap: 4px;
         }
         
         .task-input-container.active {
             display: flex;
         }
         
         .task-input {
             width: 100%;
             min-height: 32px;
             padding: 4px 6px;
             border: none;
             border-radius: 4px;
            font-size: 1rem;
            resize: vertical;
             outline: none;
             transition: all 0.3s ease;
             background: #f8fafc;
         }
         
         .task-input:focus {
             background: #fff;
             box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
         }
         
         .task-input-hint {
             font-size: 0.75rem;
             color: var(--secondary);
             text-align: left;
         }
        
                 /* Tasks - Very Compact Design */
         .tasks-container {
             min-height: 20px;
         }
         
         .task {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 3px 8px;
            margin-bottom: 0;
            cursor: move;
            transition: background 0.15s ease;
        }
        
        .task:hover {
            background: rgba(255, 255, 255, 0.35);
            box-shadow: none;
        }
         
         .task.completed {
             opacity: 0.6;
         }

        .task.draft {
            background: rgba(148, 163, 184, 0.06);
        }
         
         .task.completed .task-title {
             text-decoration: line-through;
         }
         
         .task-content {
             display: flex;
             justify-content: space-between;
             align-items: center;
             gap: 6px;
             margin-bottom: 0; /* No spacing between tasks */
             padding: 0; /* Remove padding since task already has padding */
         }
         
         .task-meta {
             display: flex;
             align-items: center;
             gap: 4px;
         }
         
         .task-assignee {
             padding: 2px 4px;
             border-radius: 4px;
             font-size: 0.55rem;
             font-weight: 600;
             color: white;
             display: flex;
             align-items: center;
             gap: 1px;
             box-shadow: none;
             transition: all 0.3s ease;
             overflow: hidden;
             white-space: nowrap;
         }
         
         .task-actions {
             display: flex;
             gap: 4px;
             flex-shrink: 0;
             align-items: center; /* Ensure vertical centering */
             opacity: 0;
             transition: opacity 0.3s ease;
         }
         
         .task:hover .task-actions {
             opacity: 1;
         }
        
                 .task-btn {
             width: 18px;
             height: 18px;
             border: none;
             border-radius: 50%;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 0.75rem;
             transition: all 0.3s ease;
         }
         
         .task-btn.complete {
             background: var(--success);
             color: white;
         }
         
         .task-btn.complete:hover {
             background: #059669;
             transform: scale(1.1);
         }
         
         .task-btn.incomplete {
             background: #e2e8f0;
             color: var(--secondary);
         }
         
         .task-btn.incomplete:hover {
             background: var(--success);
             color: white;
             transform: scale(1.1);
         }
        
        /* Sortable */
        .sortable-placeholder {
            background: rgba(102, 126, 234, 0.14);
            border: none;
            border-radius: 0; /* No rounded corners to match tasks */
            height: 40px; /* Smaller height to match compact tasks */
            margin-bottom: 0; /* No spacing between tasks */
        }
        
                         /* Notification - Fixed positioning */
        .notification {
            position: fixed;
            top: 100px; /* Below admin header */
            right: 20px;
            background: var(--success);
            color: white;
            padding: 12px 20px;
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            z-index: 10000; /* High z-index */
            transform: translateX(400px);
            transition: transform 0.3s ease;
            font-weight: 500;
            font-size: 1rem;
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        .notification.error {
            background: var(--danger);
        }
        
        .notification.celebration {
            background: linear-gradient(135deg, 
                #ff6b6b 0%,     /* Red */
                #ffa726 16.67%, /* Orange */
                #ffeb3b 33.33%, /* Yellow */
                #66bb6a 50%,    /* Green */
                #42a5f5 66.67%, /* Blue */
                #ab47bc 83.33%, /* Purple */
                #e91e63 100%    /* Pink */
            );
            background-size: 200% 200%;
            animation: rainbowShift 3s ease-in-out infinite;
            color: white;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            font-weight: 600;
        }
        
        @keyframes rainbowShift {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--secondary);
        }
        
        .empty-state i {
            font-size: 3em;
            margin-bottom: 15px;
            opacity: 0.5;
        }
        
        /* Load More Trigger */
        .load-more-trigger {
            text-align: center;
            padding: 12px 20px;
            color: var(--secondary);
            cursor: pointer;
            border: none;
            border-radius: 8px;
            margin: 8px 0;
            font-size: 0.85rem;
            transition: background 0.1s, color 0.1s;
            background: transparent;
        }
        
        .load-more-trigger:hover {
            background: #f1f5f9;
            color: var(--primary);
        }
        
        .load-more-trigger i {
            margin-right: 6px;
        }
        
        /* No Match Actions */
        .no-match-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 20px;
            align-items: center;
        }
        
        .no-match-btn {
            background: #f3f4f6;
            border: none;
            border-radius: 8px;
            padding: 12px 20px;
            font-size: 0.95rem;
            color: #374151;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 200px;
            justify-content: center;
        }
        
        .no-match-btn:hover {
            color: var(--primary);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .no-match-btn.create-btn {
            background: #e0f2fe;
            color: #0369a1;
        }
        
        .no-match-btn.create-btn:hover {
            background: #bae6fd;
            color: #0c4a6e;
        }
        
        .no-match-btn.search-all-btn {
            background: #f3f4f6;
            color: #4b5563;
        }
        
        .no-match-btn.search-all-btn:hover {
            background: #e5e7eb;
            color: #1f2937;
        }
        
        .no-match-btn i {
            font-size: 0.9rem;
        }
        
        @media (min-width: 600px) {
            .no-match-actions {
                flex-direction: row;
                justify-content: center;
            }
        }
        
        /* Header Section */
        .header-section {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 0;
            flex-wrap: wrap;
        }
        
        .header-title-container {
            display: flex;
            align-items: center;
            margin-bottom: 0;
        }
        
        .user-chip-large {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.3rem 0.6rem;
            background: #3B82F6; /* Default blue, will be updated by JavaScript */
            border-radius: 16px;
            color: white;
            font-size: 1rem;
            font-weight: 600;
            box-shadow: none;
            transition: all 0.3s ease;
            cursor: default;
        }
        
        .user-chip-large i {
            font-size: 1rem;
        }
        
        .user-chip-large .user-name {
            font-weight: 600;
        }
        
        .search-container {
            position: relative;
            flex: 1;
            max-width: 400px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .search-input-wrapper {
            position: relative;
            flex: 1;
        }
        
        .search-input {
            width: 100%;
            padding: 8px 12px 8px 35px;
            border: none;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.95);
            font-size: 1rem;
            transition: all 0.3s ease;
            outline: none;
        }
        
        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 0.9rem;
            pointer-events: none;
            z-index: 1;
        }
        
        .search-input:focus {
            background: #fff;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
        }
        
        .search-create-btn {
            background: rgba(255, 255, 255, 0.85);
            border: none;
            border-radius: 6px;
            padding: 8px 12px;
            font-size: 0.9rem;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
            opacity: 0.9;
        }
        
        .search-create-btn:hover {
            background: #fff;
            color: var(--primary);
            opacity: 1;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        
        .search-create-btn i {
            font-size: 0.8rem;
        }
        
        .search-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            max-height: 300px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
        }
        
        .search-result {
            padding: 12px 16px;
            border: none;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .search-result:hover {
            background: #f8fafc;
        }
        
        .search-result.create-new {
            background: #f0f9ff;
            color: var(--primary);
            font-weight: 500;
        }
        
        .search-result.create-new:hover {
            background: #e0f2fe;
        }

        /* Responsive */
                 @media (max-width: 768px) {
             body {
                 padding: 10px;
                 padding-top: 85px;
             }
             
             .container {
                 max-width: 100%;
             }
             
             .project-title {
                 font-size: 1rem;
             }
             
             .header-section {
                 flex-direction: column;
                 align-items: stretch;
                 gap: 15px;
             }
             
             .header-title-container {
                 flex-direction: column;
                 align-items: center;
                 text-align: center;
                 gap: 15px;
             }
             
             .user-chip-large {
                 font-size: 1rem;
                 padding: 0.3rem 0.5rem;
             }
             
             .search-container {
                 max-width: none;
             }
         }
         
         /* Task Count Badges */
        /* Task Row Layout */
        .task-row {
            display: flex;
            align-items: center;
             gap: 0;
            width: 100%;
            padding: 0; /* Remove padding since task container has padding */
        }
        
        .task-checkbox {
            flex-shrink: 0;
            display: flex;
            align-items: center; /* Center checkbox with text */
        }
        
        .task-checkbox input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            border-radius: 50%;
            appearance: none;
            -webkit-appearance: none;
            border: 2px solid #cbd5e1;
            background: white;
            position: relative;
            transition: all 0.2s ease;
            margin: 0; /* Remove any default margins */
        }
        
        .task-checkbox input[type="checkbox"]:checked {
            background: var(--primary);
            border-color: var(--primary);
        }
        
        .task-checkbox input[type="checkbox"]:checked::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 10px;
            font-weight: bold;
        }
        
        .task-checkbox input[type="checkbox"]:hover {
            border-color: var(--primary);
            transform: scale(1.1);
        }
        
        /* Task Blocker Icon */
        .task-blocker {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            margin-left: 6px;
        }
        
        .blocker-icon {
            font-size: 0.75rem;
            color: #9ca3af;
            cursor: pointer;
            transition: color 0.2s ease, background-color 0.2s ease;
            padding: 2px;
            border-radius: 3px;
            position: relative;
            display: inline-block;
            /* Prevent layout shifts that cause flickering */
            min-width: 16px;
            min-height: 16px;
            text-align: center;
        }
        
        .blocker-icon:hover {
            color: #6b7280;
            background: rgba(0,0,0,0.05);
        }
        
        .blocker-icon.blocked {
            color: #ea580c;
            background: rgba(234, 88, 12, 0.1);
        }
        
        .blocker-icon.blocked:hover {
            color: #c2410c;
            background: rgba(234, 88, 12, 0.2);
        }
        
        /* Fix flickering by ensuring tooltips don't interfere with clicks and have stable positioning */
        .blocker-icon[data-tooltip]:hover::after,
        .blocker-icon[data-tooltip]:hover::before {
            pointer-events: none;
        }
        
        /* Ensure tooltip positioning doesn't cause layout shifts and correct font */
        .blocker-icon[data-tooltip]:hover::after {
            white-space: nowrap;
            /* Move tooltip further away to prevent hover interference */
            bottom: 150% !important;
            /* Override any inherited font styles */
            font-style: normal !important;
            font-weight: normal !important;
            text-transform: none !important;
            font-size: 0.75rem !important;
        }
        
        .blocker-icon[data-tooltip]:hover::before {
            /* Adjust arrow position to match */
            bottom: 140% !important;
        }
        
        /* Blocker Dialog */
        .blocker-dialog {
            position: absolute;
            background: white;
            border: none;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            z-index: 2000;
            min-width: 280px;
            margin-top: 1.5em;
            display: none;
        }
        
        .blocker-dialog.active {
            display: block;
        }
        
        /* Dialog Arrow */
        .blocker-dialog::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid rgba(0, 0, 0, 0.06);
        }
        
        .blocker-dialog::after {
            content: '';
            position: absolute;
            left: -7px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-right: 7px solid #fff;
        }
        
        .blocker-input {
            flex: 1;
            padding: 6px 8px;
            border: none;
            border-radius: 4px;
            font-size: 0.875rem;
            outline: none;
            margin-right: 8px;
            background: #f3f4f6;
        }
        
        .blocker-input:focus {
            background: #fff;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
        }
        
        .blocker-buttons {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        
        .blocker-dialog-content {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .blocker-btn {
            padding: 4px 8px;
            border: none;
            border-radius: 4px;
            background: #e5e7eb;
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.2s ease;
        }
        
        .blocker-btn:hover {
            background: #f3f4f6;
        }
        
        .blocker-btn.confirm {
            background: #10b981;
            color: white;
        }
        
        .blocker-btn.confirm:hover {
            background: #059669;
        }
        
        .blocker-btn.cancel {
            background: #ef4444;
            color: white;
        }
        
        .blocker-btn.cancel:hover {
            background: #dc2626;
        }
        
        
        
        .blocker-btn.delete {
            background: #f59e0b;
            color: white;
        }
        
        .blocker-btn.delete:hover {
            background: #d97706;
        }
        
        /* Linking Mode Styles */
        .linking-mode {
            cursor: crosshair !important;
        }
        
        .linking-mode .task-row {
            pointer-events: none;
        }
        
        .linking-mode .task-row.selectable {
            pointer-events: auto;
            cursor: pointer !important;
            transition: all 0.2s ease;
        }
        
        .linking-mode .task-row.selectable:hover .task-checkbox input[type="checkbox"] {
            border: 3px dashed #ea580c !important;
            box-shadow: 0 0 4px rgba(234, 88, 12, 0.3) !important;
        }
        
        /* Template mode linking - highlight trash icons instead of checkboxes */
        .templates-mode.linking-mode .task-row.selectable:hover .task-delete-btn {
            border: 3px dashed #ea580c !important;
            box-shadow: 0 0 4px rgba(234, 88, 12, 0.3) !important;
            background-color: rgba(234, 88, 12, 0.1) !important;
        }
        
        .linking-mode .task-row.selectable:hover * {
            pointer-events: none !important;
        }
        
        /* Block all interactions in linking mode except for selectable tasks */
        .linking-mode .project-card *:not(.task-row.selectable):not(.task-row.selectable *) {
            pointer-events: none !important;
        }
        
        /* Task delete button (for templates) */
        .task-delete {
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }
        
        .task-delete-btn {
            width: 16px;
            height: 16px;
            cursor: pointer;
            border-radius: 50%;
            border: none;
            background: rgba(254, 226, 226, 0.95);
            color: #ef4444;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            margin: 0;
            padding: 0;
            font-size: 8px;
        }
        
        .task-delete-btn:hover {
            background: #ef4444;
            color: white;
            transform: scale(1.1);
        }
        
        /* Task deletion animation */
        .task.deleting {
            animation: taskDelete 0.6s ease-out;
        }
        
        @keyframes taskDelete {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(0.95);
                opacity: 0.7;
            }
            100% {
                transform: scale(0.9);
                opacity: 0;
            }
        }
        
        /* Project deletion animation */
        .project-card.deleting {
            animation: projectDelete 0.6s ease-out;
        }
        
        @keyframes projectDelete {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(0.98);
                opacity: 0.8;
            }
            100% {
                transform: scale(0.95);
                opacity: 0;
            }
        }
        
        /* Task completion animation */
        .task-row.completing {
            animation: taskComplete 0.6s ease-out;
        }
        
        .task-row.completed {
            opacity: 0.6;
            background: #f8fafc;
        }
        
        @keyframes taskComplete {
            0% {
                transform: scale(1);
                background: #f0f9ff;
            }
            50% {
                transform: scale(1.02);
                background: #e0f2fe;
            }
            100% {
                transform: scale(1);
                background: #f8fafc;
            }
        }
        
        /* Task blocking animation */
        .task.blocking {
            animation: taskBlock 0.6s ease-out;
        }
        
        .task.blocked {
            opacity: 0.6;
            background: #fef3f2;
        }
        
        @keyframes taskBlock {
            0% {
                transform: scale(1);
                background: #fef5e7;
            }
            25% {
                transform: scale(1.01);
                background: #fed7aa;
            }
            50% {
                transform: scale(1);
                background: #fecaca;
            }
            75% {
                transform: scale(1);
                background: #fef3f2;
            }
            100% {
                transform: scale(1);
                background: #fef3f2;
            }
        }
        
        .task.blocking .task-title {
            position: relative;
            animation: strikethroughBlock 0.6s ease-out;
        }
        
        @keyframes strikethroughBlock {
            0% {
                background: linear-gradient(to right, #ef4444 0%, #ef4444 0%, transparent 0%, transparent 100%);
                background-size: 100% 2px;
                background-position: 0 50%;
                background-repeat: no-repeat;
            }
            100% {
                background: linear-gradient(to right, #ef4444 0%, #ef4444 100%, transparent 100%, transparent 100%);
                background-size: 100% 2px;
                background-position: 0 50%;
                background-repeat: no-repeat;
            }
        }
        
        /* Task appearing animation - now handled by JavaScript */
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        /* Task movement animation */
        .task-row.moving {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Fade out animation for hidden tasks */
        .task-row.fading-out {
            opacity: 0;
            transform: translateX(-20px);
            transition: all 0.3s ease;
        }
        
        .task-assignment-inline {
            display: flex;
            gap: 2px;
            flex-shrink: 0;
            align-items: center; /* Ensure vertical centering */
        }

        .task-draft-chip,
        .task-draft-send {
            border: none;
            background: rgba(241, 245, 249, 0.9);
            color: #64748b;
            border-radius: 999px;
            height: 22px;
            min-width: 22px;
            padding: 0 6px;
            margin-left: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            cursor: pointer;
            font-size: 11px;
        }

        .task-draft-chip {
            cursor: default;
            color: #6b7280;
        }

        .task-draft-send:hover {
            background: #e2e8f0;
            color: #475569;
        }

        .task-draft-send.undo-open {
            background: #16a34a;
            color: #ffffff;
        }

        .task-draft-send.undo-open:hover {
            background: #15803d;
            color: #ffffff;
        }
        
        .task-team-chip {
            min-width: 20px;
            border-radius: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: opacity 0.1s, background-color 0.05s;
            background: #e2e8f0;
            border: none;
            padding: 4px;
            gap: 4px;
            font-size: 0.65rem;
            font-weight: 500;
            color: #64748b;
            opacity: 0.6;
            box-shadow: none;
        }

        .task-team-chip:hover {
            opacity: 1;
        }
        
        .task-team-chip .member-name {
            font-size: 0.65rem;
            font-weight: 600;
            color: #64748b;
            white-space: nowrap;
        }
        
        .task-team-chip.active .member-name {
            color: white;
        }
        
        .task-team-chip.active {
            opacity: 1;
            color: white;
            box-shadow: none;
            /* No black border - just background color */
        }
        
        .task-team-chip i {
            font-size: 0.65rem;
            color: #64748b;
        }
        
        .task-team-chip.active i {
            color: white;
        }
        
        .task-actions {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
            align-items: center; /* Ensure vertical centering */
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .task-btn {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            border: none;
            background: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        
        .task-btn:hover {
            background: #f1f5f9;
        }
        
        .task-btn i {
            font-size: 0.75rem;
            color: #64748b;
        }
        
        /* Project Title with Inline Badges */
        
        .task-count-badges-inline {
            display: flex;
            gap: 4px;
            margin-left: auto;
            margin-right: 1em;
        }
        /* FontAwesome Icon Fixes */
        .fas, .fa, .fa-solid {
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 900 !important;
            font-style: normal !important;
            font-variant: normal !important;
            text-rendering: auto !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
        }

        /* Ensure all icon elements display correctly */
        i[class*="fa-"], 
        i.fas, 
        i.fa {
            display: inline-block !important;
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 900 !important;
            font-style: normal !important;
        }
        
        /* Ensure icons are visible */
        .task-btn i,
        .task-team-chip i,
        .project-actions i,
        .task-assignee i {
            display: inline-block !important;
            width: auto !important;
            height: auto !important;
        }
         .task-count-badges {
             display: flex;
             gap: 4px;
             margin: 4px 0;
             flex-wrap: wrap;
         }
         
         .task-count-badge {
             display: inline-flex;
             align-items: center;
             justify-content: center;
             min-width: 14px;
             height: 14px;
             padding: 0 3px;
             border-radius: 7px;
             font-size: 0.55rem;
             font-weight: 600;
             color: white;
             background: var(--primary);
             box-shadow: none;
         }
         
         .task-count-badge.unassigned {
             background: #94a3b8;
         }
         
         .task-count-badge.no-assignments {
             background: #9ca3af;
             color: white;
         }
         
         .task-count-badge:hover {
             transform: scale(1.1);
             transition: transform 0.2s ease;
         }
        
        /* Templates Chip - styled similar to bury button */
        .templates-chip {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #e5e7eb;
            color: #6b7280;
            border: none;
            display: flex;
            align-items: center;
            gap: 3px;
            margin-right: 8px;
        }
        
        .templates-chip:hover {
            background: #d1d5db;
            color: #4b5563;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .templates-chip.active {
            background: #fef3c7;
            color: #d97706;
            font-weight: 500;
        }
        
        .templates-chip.active:hover {
            background: #fde68a;
            color: #b45309;
        }
        
        .templates-chip i {
            font-size: 8px;
        }

        /* Bury Button */
                 .bury-button {
             padding: 4px 8px;
             border-radius: 12px;
             font-size: 0.8rem;
             font-weight: 400;
             cursor: pointer;
             transition: all 0.3s ease;
             background: #e5e7eb;
             color: #6b7280;
             border: none;
             display: flex;
             align-items: center;
             gap: 3px;
             margin-left: auto;
         }
        
        .bury-button:hover {
            background: #d1d5db;
            color: #4b5563;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .bury-button i {
            font-size: 8px;
        }
        
        /* EzDrag Button */
        .ezdrag-button {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #e5e7eb;
            color: #6b7280;
            border: none;
            display: flex;
            align-items: center;
            gap: 3px;
            margin-left: 8px;
        }
        
        .ezdrag-button:hover {
            background: #d1d5db;
            color: #4b5563;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .ezdrag-button.active {
            background: #3b82f6;
            color: white;
        }
        
        .ezdrag-button i {
            font-size: 8px;
        }
        
        /* Task Title Editing Styles */
        .task-title {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            font-weight: 500;
            line-height: 1.4;
            font-size: 1rem;
             margin: 0 0 0 8px;
        }
        
        .task-title-text {
            flex: 1;
            cursor: pointer;
        }
        
        .task-title-edit-icon,
        .task-context-icon {
            opacity: 0.42;
            transition: opacity 0.12s ease;
            cursor: pointer;
            color: #64748b;
            font-size: 1rem;
            padding: 2px;
            border-radius: 999px;
            background: transparent;
            box-shadow: none;
            flex-shrink: 0;
        }
        .task-context-icon { font-size: 0.85rem; color: #64748b; }
        
        .task-title:hover .task-title-edit-icon,
        .task-title:hover .task-context-icon,
        .task-title-edit-icon:hover,
        .task-context-icon:hover {
            opacity: 1;
            transform: none;
            background: transparent;
            box-shadow: none;
        }
        
        .task-title-text:hover {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            padding: 2px 4px;
            margin: -2px -4px;
            transition: all 0.2s ease;
        }
        
        .task-title-edit-input {
            flex: 1;
            border: none;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 1rem;
            background: #f8fafc;
            outline: none;
        }

        .task-title-edit-input:focus {
            background: #fff;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
        }
        
        .task-title-edit-buttons {
            display: flex;
            gap: 4px;
        }
        
        .task-title-edit-btn {
            padding: 2px 6px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.2s ease;
        }
        
        .task-title-save-btn {
            background: #10b981;
            color: white;
        }
        
        .task-title-save-btn:hover {
            background: #059669;
        }
        
        .task-title-cancel-btn {
            background: #ef4444;
            color: white;
        }
        
        .task-title-cancel-btn:hover {
            background: #dc2626;
        }

        /* Task Age Display Styles */
        .task-age {
            font-size: 0.7rem;
            color: #6b7280;
            font-style: italic;
            margin-left: 8px;
            opacity: 0.8;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .task-age.old {
            color: #ea580c;
            opacity: 1;
        }
        
        .task-age i {
            font-size: 0.65rem;
        }
        
        /* Hide task age in worker mode */
        .worker-mode .task-age {
            display: none;
        }
        
        /* Hide blocked tasks and blocker lines when blocked filter is not active */
        /* Exception: Show blocked tasks during linking mode and templates mode */
        body:not(.blocked-filter-active):not(.linking-mode):not(.templates-mode) .task.blocked {
            display: none !important;
        }
        
        body:not(.blocked-filter-active) svg.blocker-line {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }
        
        /* Project Name Editing Styles */
        .project-title {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            font-size: 0.9rem;
            font-weight: 200;
            margin: 0;
            color: #000000;
        }
        
        .project-name-text {
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .project-name-text:hover {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            padding: 2px 4px;
            margin: -2px -4px;
        }
        
        .project-name-edit-icon {
            opacity: 0;
            transition: all 0.3s ease;
            cursor: pointer;
            color: #64748b;
            font-size: 1rem;
            padding: 4px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .project-title:hover .project-name-edit-icon {
            opacity: 1;
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
        }
        
        .project-blocker-icon {
            transition: all 0.2s ease;
        }
        
        .project-blocker-icon:hover {
            transform: scale(1.15);
            filter: brightness(1.2);
        }
        
                 .project-name-edit-input {
             flex: 1;
             border: none;
             border-radius: 4px;
             padding: 4px 8px;
             font-size: 1rem;
             background: #f8fafc;
             outline: none;
             font-weight: 300;
         }

         .project-name-edit-input:focus {
             background: #fff;
             box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
         }
        
        .project-name-edit-buttons {
            display: flex;
            gap: 4px;
        }
        
                 .project-name-edit-btn {
             padding: 2px 6px;
             border: none;
             border-radius: 3px;
             cursor: pointer;
             font-size: 0.8rem;
             transition: all 0.2s ease;
         }
        
        .project-name-save-btn {
            background: #10b981;
            color: white;
        }
        
        .project-name-save-btn:hover {
            background: #059669;
        }
        
        .project-name-cancel-btn {
            background: #ef4444;
            color: white;
        }
        
        .project-name-cancel-btn:hover {
            background: #dc2626;
        }
        
        /* Mode Toggle Switch Styles */
        .mode-toggle-container {
            display: flex;
            align-items: center;
        }
        
        .mode-toggle-switch {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 0.75rem;
            color: #6b7280;
        }
        
        .toggle-input {
            display: none;
        }
        
        .toggle-slider {
            position: relative;
            width: 36px;
            height: 20px;
            background: #cbd5e1;
            border-radius: 20px;
            transition: all 0.3s ease;
        }
        
        .toggle-slider::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: white;
            top: 2px;
            left: 2px;
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        
        .toggle-input:checked + .toggle-slider {
            background: #2563eb;
        }
        
        .toggle-input:checked + .toggle-slider::before {
            transform: translateX(16px);
        }
        
        .toggle-text {
            font-weight: 300;
            font-size: 0.75rem;
        }
        
        /* Worker Mode Styles - Viewer Mode */
        .worker-mode .project-actions,
        .worker-mode .project-name-edit-icon,
        .worker-mode .task-title-edit-icon,
        .worker-mode .task-input-container,
        .worker-mode .quick-add-task,
        .worker-mode .templates-chip,
        .worker-mode .bury-button,
        .worker-mode .search-container {
            display: none !important;
        }
        
        .worker-mode .project-card {
            cursor: default;
            pointer-events: none;
        }
        
        .worker-mode .project-card .tasks-container {
            pointer-events: auto;
        }
        
        .worker-mode .task {
            cursor: pointer;
            pointer-events: auto;
        }
        
        .worker-mode .task:hover {
            background: transparent;
        }
        
        .worker-mode .task input[type="checkbox"] {
            pointer-events: auto;
        }
        
        .worker-mode .header-title-container h1 {
            color: #6b7280;
        }
        
                 .worker-mode .mode-toggle-container {
             opacity: 0.7;
         }
         
         .worker-mode .task-assignee .member-name {
             display: none;
         }
         
         .worker-mode .task-assignee:hover {
             padding: 1px 6px;
             min-width: 60px;
         }
         
         .worker-mode .task-assignee:hover .member-name {
             display: inline;
             animation: fadeInExpand 0.3s ease;
         }
         
         @keyframes fadeInExpand {
             from {
                 opacity: 0;
                 transform: translateX(-10px);
             }
             to {
                 opacity: 1;
                 transform: translateX(0);
             }
         }
         
         /* EzDrag Mode Styles */
         .ezdrag-mode .filter-chip:not([data-filter="hidden"]) {
             opacity: 0.3;
             pointer-events: none;
         }
         
         .ezdrag-mode .filter-chip[data-filter="hidden"] {
             opacity: 1;
             pointer-events: auto;
         }
         
         .ezdrag-mode .project-card .tasks-container,
         .ezdrag-mode .project-card .quick-add-task {
             display: none !important;
         }
         
         .ezdrag-mode .project-card .project-title .project-name-text {
             color: #000 !important;
             font-weight: 700 !important;
         }
         
         .ezdrag-mode .project-card {
             background: #f8fafc;
             cursor: grab;
             transition: all 0.3s ease;
             position: relative;
         }
         
         .ezdrag-mode .project-card .project-header {
             padding-left: 40px;
             position: relative;
         }
         
         .ezdrag-mode .project-card .project-header::before {
             content: '\f58d';
             font-family: 'Font Awesome 5 Free';
             font-weight: 900;
             position: absolute;
             left: 12px;
             top: 50%;
             transform: translateY(-50%);
             color: #3b82f6;
             font-size: 16px;
             z-index: 10;
             pointer-events: none;
         }
         
         .ezdrag-mode .project-card:active {
             cursor: grabbing;
         }
         
         .ezdrag-mode .project-card:hover {
             transform: translateY(-1px);
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
         
         /* Completed Report Button */
         .completed-report-btn {
             background: #10b981;
             color: white;
             border: none;
             border-radius: 8px;
             padding: 12px 24px;
             font-size: 1rem;
             font-weight: 500;
             cursor: pointer;
             transition: all 0.3s ease;
             display: inline-flex;
             align-items: center;
             gap: 8px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
         
         .completed-report-btn:hover {
             background: #059669;
             transform: translateY(-1px);
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
         }
         
         .completed-report-btn i {
             font-size: 0.9rem;
         }
         
         /* Modal Styles */
         .modal-overlay {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background: rgba(0, 0, 0, 0.5);
             z-index: 10000;
             display: flex;
             align-items: center;
             justify-content: center;
             overflow: hidden;
         }
         
         .modal-content {
             background: white;
             border-radius: 12px;
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
             max-width: 800px;
             width: 90%;
             max-height: 80vh;
             display: flex;
             flex-direction: column;
         }
         
         .completed-report-modal {
             max-width: 900px;
         }
         
         .modal-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 20px 24px;
             border: none;
             background: #f9fafb;
             flex-shrink: 0;
         }
         
         .modal-header h3 {
             margin: 0;
             color: #111827;
             font-size: 1.25rem;
             font-weight: 600;
         }
         
         .modal-close {
             background: none;
             border: none;
             font-size: 1.25rem;
             color: #6b7280;
             cursor: pointer;
             padding: 4px;
             border-radius: 4px;
             transition: all 0.2s ease;
         }
         
         .modal-close:hover {
             background: #f3f4f6;
             color: #374151;
         }
         
         .modal-body {
             padding: 24px;
             flex: 1;
             display: flex;
             flex-direction: column;
             min-height: 0;
         }

         .sync-modal .modal-content { max-width: 520px; }
         .sync-modal .modal-header { padding: 12px 16px; }
         .sync-modal .modal-header h3 { font-size: 14px; }
         .sync-modal .modal-body { padding: 0; }
         .sync-pup-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
         .sync-pup-list li {
             display: flex; align-items: center; justify-content: space-between;
             padding: 8px 16px;
 font-size: 13px; color: #555;
         }
         .sync-pup-info { display: flex; flex-direction: column; gap: 1px; }
         .sync-pup-name { font-weight: 600; color: #333; }
         .sync-pup-meta { font-size: 11px; color: #999; }
         .sync-pup-btn {
             border: none; background: #f3f4f6; color: #666;
             border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer;
 transition: all 0.15s;
             display: flex; align-items: center; gap: 5px; white-space: nowrap;
         }
         .sync-pup-btn:hover { background: #e5e7eb; color: #667eea; }
         .sync-pup-btn.syncing { opacity: 0.5; pointer-events: none; }
         .sync-pup-btn.done { background: #ecfdf5; color: #10b981; }
         .sync-all-row {
             display: flex; justify-content: space-between; align-items: center;
             padding: 8px 16px; background: #fafbfc;
         }
         .sync-all-row span { font-size: 12px; color: #999; }

         .interactions-modal,
         .source-modal {
             max-width: 920px;
         }
         .interactions-modal-body,
         .source-modal-body {
             padding: 12px 14px;
             font-size: 14px;
             color: #4b5563;
             gap: 8px;
         }
         .interactions-actions-row {
             display: flex;
             gap: 6px;
             flex-wrap: wrap;
             margin-bottom: 8px;
         }
         .interactions-header-actions {
             display: flex;
             gap: 6px;
             margin-left: auto;
             margin-right: 8px;
         }
         .pill-icon-btn {
             border: none;
             background: #f1f5f9;
             color: #475569;
             border-radius: 999px;
             height: 28px;
             padding: 0 10px;
             display: inline-flex;
             align-items: center;
             gap: 6px;
             cursor: pointer;
             font-size: 12px;
         }
         .pill-icon-btn:hover { background: #e2e8f0; }
         .pill-icon-btn.syncing { opacity: 0.65; pointer-events: none; }
         .pill-icon-btn.done { background: #ecfdf5; color: #10b981; }
         .pill-icon-btn.disabled { opacity: 0.45; pointer-events: none; }
         .interactions-list {
             list-style: none;
             margin: 0;
             padding: 0;
             max-height: 58vh;
             overflow-y: auto;
         }
         .interaction-row { border: none; }
         .interaction-open-btn {
             width: 100%;
             text-align: left;
             border: none;
             background: transparent;
             padding: 8px 2px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             color: #374151;
             font-size: 14px;
             cursor: pointer;
         }
         .interaction-open-btn:hover { background: #f8fafc; }
         .muted { color: #9ca3af; font-size: 12px; }
         .source-input-wrap,
         .source-context-wrap {
             display: flex;
             flex-direction: column;
             gap: 8px;
         }
         .source-input-title {
             font-size: 14px;
             font-weight: 600;
             color: #374151;
         }
         .source-title-input,
         .source-text-input {
             width: 100%;
             border: none;
             border-radius: 10px;
             padding: 8px 10px;
             font-size: 14px;
             background: #f9fafb;
         }
         .source-text-input { min-height: 90px; resize: vertical; }
         .source-actions-row { display: flex; gap: 6px; justify-content: flex-end; }
        .note-picker-wrap { gap: 10px; }
        .note-picker-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            border: none;
            border-radius: 10px;
            padding: 6px 8px;
            background: #f3f4f6;
        }
        .note-picker-label {
            color: #6b7280;
            font-size: 12px;
            text-transform: lowercase;
            white-space: nowrap;
        }
        .note-picker-actions { display: flex; gap: 6px; }
        .note-picker-footer { display: flex; justify-content: flex-end; }
         .source-snippet {
             border: none;
             border-radius: 10px;
             padding: 8px;
             background: #f3f4f6;
             color: #374151;
             font-size: 13px;
             white-space: pre-wrap;
         }
         .related-list { border: none; padding-top: 6px; }
         .related-item {
             font-size: 13px;
             color: #4b5563;
             padding: 3px 0;
         }

         .duration-selector {
             display: flex;
             align-items: center;
             gap: 12px;
             margin-bottom: 24px;
             padding: 16px;
             background: #f9fafb;
             border-radius: 8px;
             flex-shrink: 0;
         }
         
         .duration-selector label {
             font-weight: 500;
             color: #374151;
         }
         
         .duration-selector select {
             padding: 8px 12px;
             border: none;
             border-radius: 6px;
             background: #f3f4f6;
             font-size: 0.9rem;
             cursor: pointer;
         }
         
         .report-content {
             flex: 1;
             overflow-y: auto;
             overflow-x: hidden;
             padding-right: 8px;
         }
         
         .report-content::-webkit-scrollbar {
             width: 8px;
         }
         
         .report-content::-webkit-scrollbar-track {
             background: #f1f1f1;
             border-radius: 4px;
         }
         
         .report-content::-webkit-scrollbar-thumb {
             background: #c1c1c1;
             border-radius: 4px;
         }
         
         .report-content::-webkit-scrollbar-thumb:hover {
             background: #a8a8a8;
         }
         
                  .project-group {
             margin-bottom: 24px;
         }
         
         .project-group-header {
             margin-bottom: 12px;
         }
         
         .project-group-header h4 {
             margin: 0;
             color: #000;
             font-size: 1.1rem;
             font-weight: 600;
         }
         
         .task-list {
             padding: 0;
             margin: 0;
             list-style: none;
         }
         
         .task-item {
             padding: 8px 0;
             color: #000;
             font-size: 0.9rem;
             line-height: 1.4;
             font-weight: 300;
         }
         
         .task-info {
             display: flex;
             align-items: center;
             gap: 16px;
         }
         
         .task-checkmark {
             color: #10b981;
             font-size: 0.8rem;
             flex-shrink: 0;
         }
         
         .task-title {
             font-weight: 400;
             color: #000;
         }
         
         .task-meta {
             font-size: 0.85rem;
             color: #000;
             display: flex;
             align-items: center;
             gap: 16px;
         }
         
         .task-assignee {
             display: flex;
             align-items: center;
             gap: 6px;
             color: #000;
         }
         
         .task-assignee .member-avatar {
             width: 16px;
             height: 16px;
             border-radius: 50%;
             background: #e5e7eb;
             display: flex;
             align-items: center;
                             justify-content: center;
                             font-size: 0.6rem;
                             color: #000;
         }
         
         .completion-time {
             color: #000;
             font-weight: 400;
         }
         
         .no-completed-tasks {
             text-align: center;
             padding: 40px 20px;
             color: #6b7280;
         }
         
         .no-completed-tasks i {
             font-size: 3rem;
             margin-bottom: 16px;
             opacity: 0.5;
         }
        /* ====== PM Agent Drawer ====== */
        .proj-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid rgba(0,0,0,0.12);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
            transition: transform 0.15s, box-shadow 0.15s;
            overflow: hidden;
            padding: 0;
        }
        .proj-toggle:hover { transform: scale(1.04); box-shadow: 0 6px 20px rgba(0,0,0,0.22); }
        .proj-toggle-avatar,
        .proj-header-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            display: block;
            flex-shrink: 0;
            border: 1px solid rgba(0,0,0,0.08);
        }
        .proj-toggle-avatar {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 999px;
        }
        .proj-toggle.has-badge::after {
            content: '';
            position: absolute;
            top: 4px;
            right: 4px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ef4444;
        }

        .proj-drawer {
            position: fixed;
            top: 0;
            right: -420px;
            width: 400px;
            max-width: 92vw;
            height: 100vh;
            background: #ffffff;
            box-shadow: -4px 0 24px rgba(0,0,0,0.15);
            z-index: 10001;
            display: flex;
            flex-direction: column;
            transition: right 0.25s ease;
            font-size: 14px;
            color: #333;
        }
        .proj-drawer.open { right: 0; }
        .proj-drawer-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.24);
            z-index: 10000;
            display: none;
        }
        .proj-drawer-overlay.open { display: block; }

        .proj-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 10px;
            border-bottom: 1px solid #dddddd;
            flex-shrink: 0;
            background: #fbfbfb;
        }
        .proj-header-title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            color: #666;
            font-size: 14px;
            font-weight: 600;
        }
        .proj-header-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .proj-header-actions {
            margin-left: auto;
            display: flex;
            gap: 4px;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .proj-header-actions::-webkit-scrollbar { display: none; }
        .proj-header-actions button {
            width: 32px;
            height: 32px;
            min-width: 32px;
            padding: 0;
            border: 1px solid #d8d8d8;
            border-radius: 999px;
            background: #fff;
            color: #8a8a8a;
            cursor: pointer;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: color 0.15s, border-color 0.15s, background 0.15s;
        }
        .proj-header-actions button:hover {
            color: #333;
            border-color: #a9a9a9;
            background: #f5f5f5;
        }

        .proj-messages {
            flex: 1;
            overflow-y: auto;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-height: 0;
            background-color: #a8e5ec;
            background-image:
                radial-gradient(ellipse 95% 85% at 10% 18%, rgba(17, 167, 190, 0.34), transparent 52%),
                radial-gradient(ellipse 92% 80% at 90% 82%, rgba(10, 138, 162, 0.36), transparent 50%),
                radial-gradient(ellipse 70% 55% at 45% 48%, rgba(162, 238, 244, 0.28), transparent 58%),
                linear-gradient(152deg, #c7f4f7 0%, #7ad6df 44%, #9de6ec 100%);
            background-size: 340% 340%, 340% 340%, 280% 280%, 100% 100%;
            background-position: 0% 8%, 100% 92%, 38% 45%, 0 0;
            animation: projChatBgFlow 22s linear infinite;
        }
        .proj-messages.proj-thinking {
            background-color: #73d4df;
            background-size: 420% 420%, 420% 420%, 340% 340%, 220% 220%;
            background-image:
                radial-gradient(ellipse 90% 78% at 12% 20%, rgba(0, 147, 171, 0.58), transparent 48%),
                radial-gradient(ellipse 88% 74% at 88% 80%, rgba(0, 118, 143, 0.52), transparent 46%),
                radial-gradient(ellipse 65% 50% at 48% 50%, rgba(120, 231, 240, 0.42), transparent 55%),
                linear-gradient(125deg, #78d9e3 0%, #22b4c8 38%, #8ce7ee 72%, #2ec1d2 100%);
            animation: projChatBgThinking 9s linear infinite;
        }
        @keyframes projChatBgFlow {
            0%, 100% { background-position: 0% 8%, 100% 92%, 38% 45%, 0 0; }
            50% { background-position: 100% 75%, 0% 25%, 62% 55%, 0 0; }
        }
        @keyframes projChatBgThinking {
            0%, 100% { background-position: 0% 0%, 100% 100%, 30% 35%, 0% 50%; }
            33% { background-position: 100% 55%, 0% 45%, 70% 30%, 100% 50%; }
            66% { background-position: 45% 100%, 55% 0%, 50% 75%, 0% 50%; }
        }
        .proj-msg {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            align-self: flex-start;
            max-width: 88%;
            font-size: 14px;
            line-height: 1.5;
            color: #1a1a1a;
            word-wrap: break-word;
        }
        .proj-msg.user {
            align-self: flex-end;
            align-items: flex-end;
        }
        .proj-msg-bubble {
            display: inline-block;
            max-width: 100%;
            box-sizing: border-box;
            padding: 10px 14px;
            border-radius: 16px;
            border: 1px solid #b0b0b0;
            background: #ececec;
            color: #1a1a1a;
            line-height: 1.5;
        }
        .proj-msg.user .proj-msg-bubble {
            background: #d8d8d8;
            border-color: #a0a0a0;
            border-radius: 16px 16px 4px 16px;
        }
        .proj-msg.assistant .proj-msg-bubble {
            border-radius: 16px 16px 16px 4px;
        }
        .proj-msg.system {
            align-self: center;
            max-width: 100%;
            font-size: 12px;
            color: #7b7b7b;
            text-align: center;
        }
        .proj-msg.system .proj-msg-bubble {
            background: transparent;
            border: none;
            padding: 2px 0;
            color: #7b7b7b;
        }
        .proj-msg.assistant.thinking {
            display: flex;
            flex-direction: column;
            gap: 4px;
            color: #666;
            padding: 6px 10px;
            border: 1px solid #d8d8d8;
            border-radius: 12px 12px 12px 4px;
            background: #f0f0f0;
        }
        .proj-thinking-log {
            list-style: none;
            margin: 0;
            padding: 0;
            font-size: 13px;
        }
        .proj-thinking-log li {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .proj-msg.assistant.thinking i {
            color: #9ca3af;
            font-size: 12px;
        }
        .proj-inline-dots {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            min-width: 16px;
        }
        .proj-inline-dots span {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #9ca3af;
            opacity: 0.35;
            animation: projTypingDot 1.2s infinite ease-in-out;
        }
        .proj-inline-dots span:nth-child(2) { animation-delay: 0.15s; }
        .proj-inline-dots span:nth-child(3) { animation-delay: 0.3s; }
        @keyframes projTypingDot {
            0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
            40% { opacity: 1; transform: translateY(-1px); }
        }

        .proj-quick-replies {
            padding: 4px 12px 6px;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .proj-inline-btn,
        .proj-qr-btn {
            padding: 4px 12px;
            border-radius: 999px;
            border: 1px solid #bcbcbc;
            background: #f7f7f7;
            color: #555;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.15s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .proj-inline-btn:hover,
        .proj-qr-btn:hover {
            background: #ebebeb;
            border-color: #888;
            color: #222;
        }
        .proj-qr-btn.approve { border-color: #4c9c69; color: #2c7a4b; background: #eef8f0; }
        .proj-qr-btn.approve:hover { background: #dff0e4; }
        .proj-qr-btn.reject { border-color: #c88787; color: #a25151; background: #faf0f0; }
        .proj-qr-btn.reject:hover { background: #f4dfdf; }
        .proj-inline-link {
            color: #6d5aa6;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 0;
            font-size: 14px;
            border-bottom: 1px dotted rgba(109, 90, 166, 0.35);
        }
        .proj-inline-link:hover { color: #514080; }
        .proj-confirm-label {
            margin-right: 6px;
            color: #555;
        }
        .proj-select-wrap {
            width: 100%;
            display: inline-flex;
            flex-direction: column;
            gap: 6px;
            padding: 6px 0;
        }
        .proj-select-title,
        .proj-select-helper,
        .proj-select-status,
        .proj-copybox-label,
        .proj-copybox-body,
        .proj-pending-actions-head-title {
            font-size: 14px;
            color: #555;
        }
        .proj-select-helper { color: #777; }
        .proj-select-chip-row,
        .proj-select-footer {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }
        .proj-select-chip,
        .proj-select-submit {
            border-radius: 999px;
            border: 1px solid #bcbcbc;
            background: #f7f7f7;
            color: #555;
            padding: 4px 12px;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .proj-select-chip.is-selected,
        .proj-select-submit:not(:disabled):hover {
            background: #ebebeb;
        }
        .proj-select-submit:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
        .proj-copybox {
            width: 100%;
            border: 1px solid #d8d8d8;
            border-radius: 12px;
            padding: 8px 10px;
            background: #f8f8f8;
        }
        .proj-copybox-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
            gap: 8px;
        }
        .proj-copybox-copy,
        .proj-pending-actions-dismiss {
            width: 26px;
            height: 26px;
            border-radius: 999px;
            border: 1px solid #c8c8c8;
            background: #fff;
            color: #777;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
        }
        .proj-copybox-copy:hover,
        .proj-pending-actions-dismiss:hover {
            border-color: #999;
            color: #333;
            background: #f2f2f2;
        }
        .proj-pending-actions-head {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-bottom: 2px;
        }
        .proj-pending-actions-head-title {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .proj-eta-time {
            display: inline-flex;
            align-items: center;
            gap: 1px;
            font-size: 14px;
            color: #666;
        }
        .proj-eta-sep.off { opacity: 0.3; }

        .proj-action-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 0;
            font-size: 12px;
            color: #444;
        }
        .proj-action-btns { display: flex; gap: 4px; }

        .proj-input-area {
            display: flex;
            gap: 8px;
            padding: 8px 12px 10px;
            border-top: 1px solid #dddddd;
            flex-shrink: 0;
            align-items: flex-end;
            background: #fbfbfb;
        }
        .proj-input {
            flex: 1;
            border: 1px solid #d2d2d2;
            border-radius: 999px;
            padding: 6px 14px;
            font-size: 14px;
            outline: none;
            resize: none;
            max-height: 80px;
            line-height: 1.4;
            background: #ffffff;
        }
        .proj-input:focus {
            border-color: #999;
            box-shadow: none;
        }
        .proj-send-btn {
            width: 36px;
            height: 36px;
            border-radius: 999px;
            background: #e74c3c;
            color: #fff;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
            transition: background 0.15s;
        }
        .proj-send-btn:hover { background: #c0392b; }
        .proj-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .proj-stop-btn {
            background: #7a7a7a;
        }
        .proj-stop-btn:hover {
            background: #5f5f5f;
        }

        .proj-history-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .proj-history-panel ul li {
            padding: 8px 16px;
            border-bottom: 1px solid #eeeeee;
            cursor: pointer;
            font-size: 12px;
            color: #555;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .proj-history-panel ul li:hover { background: #f9fafb; }
        .proj-history-panel ul li .conv-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .proj-history-panel ul li .conv-date { color: #aaa; font-size: 11px; flex-shrink: 0; margin-left: 8px; }

        .proj-rules-panel {
            padding: 12px 16px;
            font-size: 12px;
            color: #555;
            overflow-y: auto;
        }
        .proj-rules-panel .rule-item {
            padding: 6px 0;
            border: none;
            display: flex;
            justify-content: space-between;
            gap: 8px;
        }