/* Hide Vue template before it's mounted - prevents showing raw {{ }} syntax */
        [v-cloak] {
            display: none !important;
        }
        
        /* Static loading screen - visible immediately, hidden when Vue mounts */
        #static-loading-screen {
            transition: opacity 0.3s ease;
        }
        #static-loading-screen.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        /* App Loading Screen - prevents screen flashing */
        .app-loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        .app-loading-content {
            text-align: center;
            max-width: 400px;
            padding: 24px;
        }
        .app-loading-logo {
            width: 64px;
            height: 64px;
            margin: 0 auto 20px;
            animation: pulse 2s ease-in-out infinite;
        }
        .app-loading-spinner {
            width: 48px;
            height: 48px;
            border: 3px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 16px;
        }
        .app-loading-status {
            color: var(--text);
            font-size: 15px;
            font-weight: 500;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            margin-bottom: 8px;
        }
        .app-loading-text {
            color: var(--text-secondary);
            font-size: 14px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        .app-loading-tip {
            margin-top: 32px;
            padding: 16px 20px;
            background: var(--surface);
            border-radius: 12px;
            border: 1px solid var(--border);
        }
        .app-loading-tip-icon {
            font-size: 24px;
            margin-bottom: 8px;
        }
        .app-loading-tip-text {
            color: var(--text-secondary);
            font-size: 14px;
            font-style: italic;
            line-height: 1.5;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        .app-loading-progress {
            margin-top: 16px;
            height: 4px;
            background: var(--border);
            border-radius: 2px;
            overflow: hidden;
        }
        .app-loading-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #1d4ed8, #3b82f6);
            border-radius: 2px;
            transition: width 0.3s ease;
            animation: progress-shimmer 1.5s ease-in-out infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.8; }
        }
        @keyframes progress-shimmer {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }
        
        :root {
            /* Basecamp exact colors */
            --primary: #1d4ed8;
            --primary-hover: #1e40af;
            --accent-green: #16a34a;
            --accent-yellow: #fbbf24;
            --accent-red: #dc2626;
            --accent-blue: #3b82f6;
            --accent-purple: #8b5cf6;
            --accent-orange: #f97316;
            --bg: #f5f5f5;
            --bg-cream: #fffef9;
            --surface: #ffffff;
            --border: #e5e7eb;
            --border-light: #f3f4f6;
            --text: #111827;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --link-color: var(--primary);
            --link-hover: #1e40af;
            --shadow: 0 1px 3px rgba(0,0,0,0.08);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
            --radius: 6px;
            --radius-lg: 8px;
            
            /* Client badge colors (Basecamp exact) */
            --client-badge-bg: #fef3c7;
            --client-badge-text: #92400e;
            --client-banner-bg: #fef3c7;
            --client-banner-border: #fcd34d;

            /* Scrollbar */
            --scrollbar-track: #e5e7eb;
            --scrollbar-thumb: var(--primary);
            --scrollbar-thumb-hover: var(--primary-hover);
        }
        
        /* ========== GLOBAL SCROLLBAR ========== */
        html,
        body,
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        }
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 4px;
            border: 2px solid var(--scrollbar-track);
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--scrollbar-thumb-hover);
        }
        ::-webkit-scrollbar-corner {
            background: var(--scrollbar-track);
        }
        *::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        *::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 4px;
        }
        *::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 4px;
            border: 2px solid var(--scrollbar-track);
        }
        *::-webkit-scrollbar-thumb:hover {
            background: var(--scrollbar-thumb-hover);
        }
        *::-webkit-scrollbar-corner {
            background: var(--scrollbar-track);
        }

        /* Tippy.js custom theme */
        .tippy-box[data-theme~='bcs'] {
            background-color: var(--text);
            color: var(--bg);
            font-size: 13px;
            font-weight: 500;
            padding: 4px 8px;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .tippy-box[data-theme~='bcs'] .tippy-arrow {
            color: var(--text);
        }
        .tippy-box[data-theme~='bcs'][data-placement^='top'] > .tippy-arrow::before {
            border-top-color: var(--text);
        }
        .tippy-box[data-theme~='bcs'][data-placement^='bottom'] > .tippy-arrow::before {
            border-bottom-color: var(--text);
        }
        .tippy-box[data-theme~='bcs'][data-placement^='left'] > .tippy-arrow::before {
            border-left-color: var(--text);
        }
        .tippy-box[data-theme~='bcs'][data-placement^='right'] > .tippy-arrow::before {
            border-right-color: var(--text);
        }
        
        .bc-project-tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 30px;
            padding: 40px 24px;
            max-width: 1100px;
            margin: 0 auto;
        }
        
        .bc-tool-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            min-height: 250px;
            overflow: hidden;
        }
        
        .bc-tool-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
            border-color: var(--primary);
        }
        
        .bc-tool-card-header {
            padding: 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .bc-tool-card-header i {
            font-size: 24px;
            color: var(--primary);
        }
        
        .bc-tool-card-header h3 {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
            color: var(--text);
        }
        
        .bc-tool-card-content {
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .bc-tool-preview-lists {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .bc-tool-preview-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: var(--text);
        }
        
        .bc-tool-preview-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--border);
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
            border: 1px solid var(--border-dark);
        }
        
        .bc-tool-preview-dot::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: var(--progress, 0%);
            background: var(--accent-green);
        }
        
        .bc-tool-preview-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-tool-preview-more {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
            font-style: italic;
        }
        
        .bc-tool-card-footer {
            padding: 12px 20px;
            background: var(--bg);
            border-top: 1px solid var(--border);
            font-size: 13px;
            color: var(--text-secondary);
            text-align: center;
        }
        
        .bc-tool-empty {
            color: var(--text-secondary);
            font-size: 14px;
            font-style: italic;
            text-align: center;
            margin: auto;
        }
        
        /* ===== PROJECT TOOLS BAR ===== */
        .bc-project-tools-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 900px;
            margin: 0 auto;
            padding: 16px 24px;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
        }
        
        .bc-tools-bar-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .bc-tools-bar-title {
            font-size: 14px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .bc-tools-bar-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .bc-tool-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: var(--bg-hover);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-tool-btn:hover {
            background: var(--border);
            border-color: var(--text-disabled);
        }
        
        .bc-tool-btn i {
            color: var(--primary);
        }

        /* ===== DOCUMENT CARD STYLES (from docs.html) ===== */
        .bc-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 20px;
        }
        .bc-item-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 0;
            text-align: left;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            height: 240px;
            display: flex;
            flex-direction: column;
            overflow: visible;
        }
        .bc-item-card:hover {
            border-color: var(--text-muted);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        .bc-item-preview {
            flex-grow: 1;
            background: var(--bg);
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid var(--border);
            overflow: hidden;
            position: relative;
            border-radius: 4px 4px 0 0;
        }
        .bc-item-info {
            padding: 12px;
            background: var(--surface);
            border-radius: 0 0 4px 4px;
        }
        .bc-item-icon {
            font-size: 48px;
            color: var(--text-muted);
        }
        .bc-item-icon.folder { color: var(--accent-yellow); }
        .bc-item-icon.doc { color: var(--accent-blue); }
        .bc-item-icon.file { color: var(--accent-green); }
        
        .bc-item-name {
            font-weight: 600;
            font-size: 14px;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .bc-item-meta {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 2px;
        }
        
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
            background: var(--bg-cream);
            color: var(--text);
            min-height: 100vh;
            font-size: 15px;
            line-height: 1.5;
            padding-top: 56px; /* Compensate for fixed header */
        }
        
        /* ===== LINKS - wrap and Basecamp style ===== */
        a {
            color: var(--link-color);
            text-decoration: underline;
            word-break: break-word;
            overflow-wrap: break-word;
        }
        
        a:hover {
            color: var(--link-hover);
        }
        
        /* ===== HEADER / NAV - Basecamp Exact ===== */
        .bc-header {
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            padding: 0 20px;
            height: 56px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }
        
        /* Mobile-only elements - hidden on desktop */
        .bc-mobile-burger,
        .bc-mobile-menu,
        .bc-sidebar-overlay,
        .bc-mobile-search-toggle,
        .bc-mobile-search-modal,
        .bc-mobile-search-inline {
            display: none;
        }
        
        .bc-header-left {
            display: flex;
            align-items: center;
            gap: 4px;
            flex: 1;
        }

        .bc-header-right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 16px;
        }

        .bc-search-container {
            width: 240px;
            transition: all 0.3s ease;
        }

        .bc-search-input-wrapper {
            position: relative;
            width: 100%;
        }

        .bc-search-input {
            width: 100% !important;
            background: var(--bg-secondary) !important;
            border: 1px solid transparent !important;
            padding: 6px 12px 6px 32px !important;
            border-radius: 8px !important;
            font-size: 13px !important;
            transition: all 0.2s !important;
        }

        .bc-search-input:focus {
            background: var(--surface) !important;
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1) !important;
            outline: none !important;
        }

        .bc-search-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            z-index: 1;
            font-size: 12px;
        }
        
        /* Large modal for results */
        .bc-search-results {
            position: fixed;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            width: 600px;
            max-width: 90vw;
            background: var(--surface);
            border-radius: 12px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.2);
            border: 1px solid var(--border);
            z-index: 2000;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .bc-nav {
            display: flex;
            align-items: center;
            gap: 2px;
        }
        
        .bc-nav-item {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 10px;
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .bc-nav-item:hover {
            background: var(--bg-hover);
            color: var(--text);
        }
        
        .bc-nav-item.active {
            background: var(--bg-hover);
            color: var(--text);
            font-weight: 600;
        }
        
        .bc-nav-item .nav-icon {
            font-size: 14px;
            line-height: 1;
        }
        
        .bc-nav-item.hey-menu {
            position: relative;
        }
        
        .bc-nav-item .hey-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            background: var(--accent-red);
            color: white;
            font-size: 9px;
            font-weight: 700;
            min-width: 16px;
            height: 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }
        
        /* Chat menu badge */
        .bc-nav-item.chat-menu {
            position: relative;
        }
        
        .bc-nav-item .chat-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            background: var(--primary);
            color: var(--text-on-primary);
            font-size: 9px;
            font-weight: 700;
            min-width: 16px;
            height: 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }
        
        /* Responsive top navigation - hide labels on smaller screens */
        @media (max-width: 1200px) {
            .bc-topbar-nav .bc-nav-item .nav-label {
                display: none;
            }
            .bc-topbar-nav .bc-nav-item {
                padding: 8px 10px;
            }
            .bc-topbar-nav .bc-nav-item .nav-icon {
                font-size: 16px;
            }
        }
        
        /* Chat conversation list items */
        .bc-chat-conv-item:hover {
            background: var(--bg);
        }
        
        .bc-chat-conv-item.active {
            background: var(--bg-hover);
        }
        
        /* Back button - hidden on desktop by default */
        .bc-chat-back-btn {
            display: none;
        }

        /* Rádce panel scrollbar */
        .bc-chat-radce-panel::-webkit-scrollbar {
            width: 4px;
        }
        .bc-chat-radce-panel::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 4px;
        }
        
        /* Rádce loading progress bar animation */
        @keyframes radceLoadBar {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(350%); }
        }
        
        /* WhatsApp-style Chat responsive */
        @media (max-width: 768px) {
            /* Hide main header when chat conversation is open */
            body.chat-conversation-open .bc-header {
                display: none !important;
            }
            /* Hide bottom nav when chat conversation is open - like WhatsApp */
            body.chat-conversation-open .bc-bottom-nav {
                display: none !important;
            }
            body.chat-conversation-open .bc-bottom-nav-overlay,
            body.chat-conversation-open .bc-bottom-nav-submenu {
                display: none !important;
            }
            /* Main chat container - full screen when conversation open */
            .bc-chat-whatsapp {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 56px !important; /* Space for mobile bottom nav */
                height: auto !important;
                max-height: none !important;
                flex-direction: column !important;
                z-index: 100 !important;
            }
            /* When conversation is open, use full screen (no bottom nav) */
            body.chat-conversation-open .bc-chat-whatsapp {
                bottom: 0 !important;
            }
            .bc-chat-whatsapp > .bc-chat-sidebar {
                width: 100% !important;
                height: 100% !important;
                display: flex !important;
                flex-direction: column !important;
            }
            .bc-chat-whatsapp > .bc-chat-main-panel {
                display: none !important;
            }
            /* When conversation is selected, hide sidebar and show chat */
            .bc-chat-whatsapp.has-conversation > .bc-chat-sidebar {
                display: none !important;
            }
            .bc-chat-whatsapp.has-conversation > .bc-chat-main-panel {
                display: flex !important;
                flex-direction: column !important;
                width: 100% !important;
                height: 100% !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
            }
            /* Show back button on mobile */
            .bc-chat-back-btn {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 36px !important;
                height: 36px !important;
                border-radius: 50% !important;
                margin-right: 8px !important;
            }
            .bc-chat-back-btn:active {
                background: rgba(0,0,0,0.1) !important;
            }
            /* Mobile chat header - WhatsApp style, always on top */
            .bc-chat-header {
                flex-shrink: 0 !important;
                z-index: 10 !important;
                padding: 6px 10px !important;
            }
            /* Mobile chat messages - smaller padding, scrollable */
            #chatMessagesContainer {
                padding: 8px 6px !important;
                flex: 1 !important;
                min-height: 0 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
            }
            /* Mobile chat input area - WhatsApp style, always at bottom */
            .bc-chat-input-area {
                flex-shrink: 0 !important;
                padding: 6px 8px 8px 8px !important;
                background: var(--bg-secondary) !important;
            }
            /* Hide typing indicator row on mobile to save space */
            .bc-chat-typing-row {
                height: 24px !important;
                min-height: 24px !important;
                padding: 0 12px !important;
            }
            /* Smaller project/description banners on mobile */
            .bc-chat-project-banner {
                padding: 4px 10px !important;
                font-size: 11px !important;
            }
            .bc-chat-project-banner i {
                font-size: 10px !important;
            }
            .bc-chat-description-banner {
                padding: 6px 10px !important;
                font-size: 11px !important;
                max-height: 50px !important;
                overflow: hidden !important;
            }
        }
        
        /* Chat contact hover effects */
        .bc-chat-contact-item:hover {
            background: var(--bg-secondary) !important;
        }
        .bc-chat-contact-item.active {
            background: var(--bg-secondary) !important;
        }
        
        /* Activity count badges */
        .activity-count-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 9px;
            font-size: 11px;
            font-weight: 700;
            margin-left: 6px;
        }
        
        .activity-count-badge.overdue {
            background: var(--bg-red-tint);
            color: var(--accent-red);
            animation: pulse-red 2s infinite;
        }
        
        .activity-count-badge.unassigned {
            background: var(--badge-yellow-bg);
            color: var(--accent-yellow);
            animation: pulse-yellow 2s infinite;
        }
        
        @keyframes pulse-red {
            0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
            50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
        }
        
        @keyframes pulse-yellow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(202, 138, 4, 0.4); }
            50% { box-shadow: 0 0 0 4px rgba(202, 138, 4, 0); }
        }
        
        .bc-pill-nav-item .activity-count-badge {
            font-size: 10px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
        }
        
        .bc-user-dropdown-item .activity-count-badge {
            font-size: 10px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
        }
        
        .bc-logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 800;
            font-size: 16px;
            color: var(--text);
            cursor: pointer;
            text-decoration: none;
            letter-spacing: -0.5px;
        }
        
        .bc-logo-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Basecamp mountain logo SVG style */
        .bc-logo-icon svg {
            width: 28px;
            height: 28px;
        }
        
        .bc-user-menu {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .bc-user-dropdown {
            position: relative;
        }
        
        .bc-user-dropdown-trigger {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: var(--radius);
            transition: background 0.15s;
        }
        
        .bc-user-dropdown-trigger:hover {
            background: var(--bg);
        }
        
        .bc-user-dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 6px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            min-width: 180px;
            z-index: 1000;
            overflow: hidden;
        }
        
        .bc-user-dropdown-header {
            padding: 12px 14px;
            border-bottom: 1px solid var(--border);
        }
        
        .bc-user-dropdown-name {
            font-weight: 600;
            font-size: 14px;
            color: var(--text);
        }
        
        .bc-user-dropdown-email {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
        }
        
        .bc-user-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text);
            transition: background 0.1s;
        }
        
        .bc-user-dropdown-item:hover {
            background: var(--bg);
        }
        
        .bc-user-dropdown-item.danger {
            color: var(--accent-red);
        }
        
        .bc-user-dropdown-item.danger:hover {
            background: var(--bg-red-tint);
        }
        
        .bc-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            color: white;
            text-transform: uppercase;
            cursor: pointer;
            overflow: hidden; /* Ensure image doesn't spill out */
            flex-shrink: 0;
        }

        .bc-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Docs Preview Grid on Homepage — Basecamp style */
        .bc-docs-preview-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 8px;
        }
        .bc-doc-mini-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            min-height: 100px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .bc-doc-mini-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px -1px rgba(0,0,0,0.12);
        }
        .bc-doc-mini-title {
            padding: 10px 10px 4px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.3;
            color: var(--text-primary);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .bc-doc-mini-preview {
            flex: 1;
            padding: 2px 10px 10px;
            font-size: 11px;
            color: var(--text-secondary);
            overflow: hidden;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            word-break: break-word;
        }
        .bc-color-strip {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            z-index: 1;
        }
        @media (max-width: 600px) {
            .bc-docs-preview-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        .bc-avatar-sm {
            width: 24px;
            height: 24px;
            font-size: 10px;
        }
        
        .bc-avatar-xs {
            width: 20px;
            height: 20px;
            font-size: 9px;
        }
        
        .bc-avatar-lg {
            width: 36px;
            height: 36px;
            font-size: 13px;
        }
        
        /* Client avatar - yellow ring like Basecamp */
        .bc-avatar.client-avatar {
            box-shadow: 0 0 0 3px #fbbf24;
        }
        
        /* ===== HOME PAGE HEADER - Basecamp Style ===== */
        .bc-home-header {
            text-align: center;
            padding: 40px 20px 30px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .bc-home-logo {
            margin-bottom: 24px;
        }

        .bc-home-logo img,
        .bc-home-logo-img {
            max-height: 80px;
            height: 60px;
        }

        .bc-home-actions {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 24px;
        }

        .btn-big {
            padding: 12px 24px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 30px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }

        .btn-big-primary {
            background: var(--primary);
            color: white;
        }

        .btn-big-primary:hover {
            background: var(--primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);
        }

        .btn-big-secondary {
            background: var(--accent-blue);
            color: white;
        }

        .btn-big-secondary:hover {
            background: var(--primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
        }

        .bc-home-links {
            font-size: 14px;
            color: var(--text-secondary);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .bc-home-links a, .bc-home-links span {
            color: var(--text-secondary);
            text-decoration: none;
            cursor: pointer;
        }

        .bc-home-links a:hover {
            text-decoration: underline;
            color: var(--text);
        }

        .bc-home-search-wrapper {
            max-width: 400px;
            margin: 20px auto 0;
            position: relative;
        }

        .bc-home-search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: var(--surface);
            font-size: 14px;
            transition: all 0.2s;
        }

        .bc-home-search-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
        }

        .bc-home-search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 14px;
        }

        .bc-home-search-clear {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
        }

        .bc-home-search-clear:hover {
            color: var(--text);
        }
        
        .bc-project-hero {
            background: var(--surface);
            padding: 30px 20px 20px;
            text-align: center;
            position: relative;
            border-bottom: none;
            margin-bottom: 0;
        }

        .bc-project-hero-client {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }
        
        .bc-project-hero-name {
            font-size: 32px;
            font-weight: 800;
            color: var(--text);
            margin: 0 0 8px;
            line-height: 1.1;
        }
        
        .bc-project-hero-desc {
            max-width: 800px;
            margin: 0 auto 16px;
            color: var(--text-secondary);
            font-size: 15px;
            line-height: 1.5;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        
        .bc-project-hero-desc-content {
            text-align: center;
        }
        
        .bc-project-hero-desc-text {
            white-space: pre-wrap;
            word-break: break-word;
        }
        
        .bc-project-hero-desc-text a {
            color: var(--primary);
            text-decoration: underline;
        }
        
        .bc-project-hero-desc-empty {
            color: var(--text-muted);
            font-style: italic;
        }

        .bc-project-actions {
            position: absolute;
            top: 20px;
            right: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .bc-desc-edit-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            font-size: 11px;
            color: var(--text-muted);
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        
        .bc-desc-edit-btn:hover {
            color: var(--primary);
            border-color: var(--primary);
            background: rgba(99, 102, 241, 0.05);
        }
        
        .bc-desc-edit-btn i {
            font-size: 10px;
        }
        
        .bc-desc-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .bc-desc-visibility-wrapper {
            position: relative;
        }
        
        .bc-desc-visibility-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 6px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            min-width: 240px;
            z-index: 100;
        }
        
        .bc-desc-visibility-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            border-bottom: 1px solid var(--border);
            font-size: 13px;
        }
        
        .btn-close-sm {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-muted);
            cursor: pointer;
            line-height: 1;
        }
        
        .btn-close-sm:hover {
            color: var(--text);
        }
        
        .bc-desc-visibility-hint {
            padding: 8px 12px;
            font-size: 11px;
            color: var(--text-muted);
            background: var(--bg);
        }
        
        .bc-desc-visibility-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            cursor: pointer;
            padding: 4px;
            border-radius: var(--radius);
            transition: background 0.15s;
        }
        
        .bc-desc-visibility-badges:hover {
            background: rgba(0,0,0,0.03);
        }
        
        .bc-visibility-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            font-size: 11px;
            border-radius: 10px;
            font-weight: 500;
        }
        
        .bc-visibility-badge-internal {
            background: var(--bg-hover);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }
        
        .bc-visibility-badge-internal i {
            font-size: 9px;
        }
        
        .bc-desc-visibility-list {
            padding: 8px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .bc-desc-visibility-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            cursor: pointer;
            border-radius: var(--radius-sm);
        }
        
        .bc-desc-visibility-item:hover {
            background: var(--bg-hover);
        }
        
        .bc-desc-visibility-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
        }
        
        /* Description Editor Modal */
        .bc-description-editor {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .bc-description-textarea {
            min-height: 180px;
            font-size: 14px;
            line-height: 1.6;
            resize: vertical;
        }
        
        .bc-description-hint {
            padding: 8px 0;
        }
        
        .bc-inline-link {
            border: none;
            background: transparent;
            color: var(--primary);
            cursor: pointer;
            font-size: 13px;
            padding: 0;
            white-space: nowrap;
        }
        
        .bc-inline-link:hover {
            text-decoration: underline;
        }
        
        .bc-project-hero-url {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        
        .bc-project-hero-url a {
            color: var(--text-secondary);
            text-decoration: none;
        }
        
        .bc-project-hero-url a:hover {
            text-decoration: underline;
        }
        
        /* Project Footer - Debug info for superadmins */
        .bc-project-footer-debug {
            margin-top: 40px;
            padding: 12px 20px;
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border-radius: 8px;
            border: 1px solid #475569;
        }
        
        .bc-debug-info {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 12px;
            color: var(--text-muted);
            font-family: 'Monaco', 'Consolas', monospace;
        }
        
        .bc-debug-info i {
            color: var(--accent-blue);
        }
        
        .bc-debug-separator {
            color: var(--text-secondary);
        }
        
        .bc-debug-link-inline {
            color: var(--accent-blue);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 4px;
            transition: all 0.15s;
            margin-left: 4px;
        }
        
        .bc-debug-link-inline:hover {
            background: rgba(96, 165, 250, 0.2);
            color: var(--accent-blue);
        }
        
        .bc-debug-link-inline i {
            font-size: 10px;
        }
        
        /* Progress tracker like Basecamp - hidden for now, will be redesigned */
        .bc-progress-tracker {
            display: none;
        }
        
        .bc-progress-bar {
            width: 320px;
            height: 8px;
            background: var(--border);
            border-radius: 4px;
            overflow: hidden;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        .bc-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #10b981 0%, #059669 100%);
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        
        /* People section like Basecamp */
        .bc-project-people {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 16px;
        }
        
        .bc-project-people-section {
            margin-top: 24px;
            padding: 20px;
            background: var(--bg);
            border-radius: var(--radius-lg);
        }
        
        .bc-people-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .bc-people-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 12px;
        }
        
        .bc-person-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--surface);
            border-radius: var(--radius);
            border: 1px solid var(--border);
            transition: box-shadow 0.15s;
        }
        
        .bc-person-item:hover {
            box-shadow: var(--shadow-sm);
        }
        
        .bc-person-info {
            flex: 1;
            min-width: 0;
        }
        
        .bc-person-name {
            font-weight: 500;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .bc-role-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 500;
            text-transform: uppercase;
        }
        
        .bc-role-badge.role-client {
            background: var(--badge-blue-bg);
            color: var(--badge-blue-text);
        }
        
        .bc-role-badge.role-admin {
            background: var(--badge-green-bg);
            color: var(--badge-green-text);
        }
        
        .bc-role-badge.role-superadmin {
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
        }
        
        .bc-role-badge.client {
            background: var(--badge-blue-bg);
            color: var(--badge-blue-text);
        }
        
        /* Toggle switch for user active status */
        .bc-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 4px 8px;
            border: none;
            background: var(--bg-secondary);
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .bc-toggle-btn:hover {
            background: var(--border);
        }
        
        .bc-toggle-btn .bc-toggle-slider {
            width: 36px;
            height: 20px;
            background: var(--border-dark);
            border-radius: 10px;
            position: relative;
            transition: background 0.2s ease;
        }
        
        .bc-toggle-btn .bc-toggle-slider::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            background: var(--surface);
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        
        .bc-toggle-btn.active .bc-toggle-slider {
            background: var(--accent-green);
        }
        
        .bc-toggle-btn.active .bc-toggle-slider::after {
            transform: translateX(16px);
        }
        
        .bc-toggle-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-secondary);
        }
        
        .bc-toggle-btn.active .bc-toggle-label {
            color: var(--accent-green);
        }
        
        .bc-status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .bc-status-badge.active {
            background: var(--badge-green-bg);
            color: var(--badge-green-text);
        }
        
        /* Inactive user row styling */
        .bc-user-inactive {
            opacity: 0.6;
            background: var(--bg-red-tint) !important;
        }
        
        .bc-user-inactive td {
            color: var(--text-muted);
        }
        
        .bc-person-groups {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
        }
        
        .bc-person-email {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .bc-people-empty {
            text-align: center;
            padding: 32px;
            color: var(--text-muted);
        }
        
        .bc-setup-people-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: var(--surface);
            border: 2px solid var(--border-dark);
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            margin-left: 12px;
            height: 40px;
        }
        
        .bc-setup-people-btn:hover {
            background: var(--bg-hover);
            border-color: var(--text-muted);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
        }

        /* Card body — grows to fill card, pushes footer down */
        .bc-card-body {
            flex: 1 1 auto;
            padding-bottom: 16px;
        }

        /* Billing footer — anchored to bottom of project card, single line */
        .bc-card-billing-footer {
            display: flex;
            align-items: center;
            gap: 5px;
            margin: 12px -20px 0;
            padding: 7px 16px;
            font-size: 11px;
            line-height: 1.2;
            color: var(--text-muted);
            border-top: 1px solid var(--border);
            background: rgba(0, 0, 0, 0.06);
            border-radius: 0 0 var(--radius-lg) var(--radius-lg);
            flex-wrap: nowrap;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            min-height: 30px;
        }
        .bc-card-billing-icon {
            font-size: 10px;
            opacity: 0.45;
            flex-shrink: 0;
        }
        .bc-card-billing-model {
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 10.5px;
            flex-shrink: 0;
        }
        .bc-card-billing-detail {
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            font-size: 10.5px;
            flex-shrink: 0;
        }
        .bc-card-billing-none {
            opacity: 0.35;
        }
        .bc-card-billing-icon-none {
            font-size: 10px;
            opacity: 0.5;
        }
        .bc-card-billing-none-label {
            font-size: 10.5px;
            font-style: italic;
        }
        .bc-list-billing-badge {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            color: var(--text-muted);
            opacity: 0.6;
            white-space: nowrap;
            padding: 2px 8px;
            border-radius: 6px;
            background: var(--bg);
            flex-shrink: 0;
        }
        .bc-list-billing-badge i {
            font-size: 9px;
        }

        /* Billing Mini Info - project hero compact widget (unused, kept for reference) */
        .bc-billing-miniinfo {
            display: flex;
            flex-direction: column;
            gap: 1px;
            width: fit-content;
            margin: 16px 0 0;
            padding: 8px 14px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 12px;
            opacity: 0.45;
            transition: opacity 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            cursor: default;
        }
        .bc-billing-miniinfo:hover {
            opacity: 1;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
            border-color: var(--primary);
        }
        .bc-bmi-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 3px 0;
            line-height: 1.3;
        }
        .bc-bmi-label {
            color: var(--text-muted);
            font-size: 11px;
            min-width: 52px;
        }
        .bc-bmi-val {
            color: var(--text);
            font-weight: 600;
            font-size: 12px;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            margin-left: auto;
        }
        .bc-bmi-icon {
            color: var(--text-muted);
            font-size: 10px;
            width: 14px;
            text-align: center;
            opacity: 0.6;
        }
        .bc-bmi-none {
            gap: 6px;
        }
        .bc-bmi-icon-none {
            color: var(--text-muted);
            font-size: 11px;
            opacity: 0.5;
        }
        .bc-bmi-label-none {
            color: var(--text-muted);
            font-size: 11px;
            font-style: italic;
        }
        @media (max-width: 768px) {
            .bc-billing-miniinfo {
                display: none;
            }
        }
        
        .bc-people-avatars {
            display: flex;
            align-items: center;
            margin-left: 8px;
        }
        
        .bc-people-avatars .bc-avatar {
            margin-left: -8px;
            border: 2px solid white;
        }
        
        /* Project People Page Styles */
        .bc-project-people-page {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .bc-page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .bc-header-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .bc-page-title {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .bc-people-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 16px;
        }
        
        .bc-person-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 16px;
            display: flex;
            gap: 12px;
            transition: box-shadow 0.15s, transform 0.15s;
        }
        
        .bc-person-card:hover {
            box-shadow: var(--shadow);
            transform: translateY(-2px);
        }
        
        .bc-person-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--bc-blue);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 18px;
            flex-shrink: 0;
            overflow: hidden;
        }
        
        .bc-person-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .bc-person-actions {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .btn-danger-outline {
            color: var(--accent-red);
            background: var(--surface);
            border: 1px solid var(--border-red-light);
        }
        
        .btn-danger-outline:hover {
            background: var(--bg-red-tint);
        }

        /* Activity View Redesign */
        .bc-timeline {
            position: relative;
            padding-left: 30px;
        }
        .bc-timeline::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--border);
        }
        .bc-timeline-item {
            position: relative;
            margin-bottom: 20px;
        }
        .bc-timeline-marker {
            position: absolute;
            left: -35px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--surface);
            border: 2px solid var(--primary);
            z-index: 1;
        }
        
        .bc-activity-date-header {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
            color: var(--text-primary);
        }
        
        .bc-activity-row {
            display: flex;
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .bc-activity-avatar {
            flex-shrink: 0;
            width: 40px;
        }
        
        .bc-activity-avatar .bc-avatar {
            width: 40px;
            height: 40px;
            font-size: 16px;
        }
        
        .bc-activity-content {
            flex: 1;
            min-width: 0;
        }
        
        .bc-activity-header {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }
        
        .bc-activity-project-link {
            color: var(--text-muted);
            text-decoration: none;
            font-weight: 500;
        }
        
        .bc-activity-project-link:hover {
            text-decoration: underline;
            color: var(--primary);
        }
        
        .bc-activity-body {
            font-size: 15px;
            color: var(--text-primary);
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .bc-activity-user {
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .bc-activity-item-link {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
        }
        
        .bc-activity-item-link:hover {
            text-decoration: underline;
        }
        
        .bc-activity-detail {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 12px;
            font-size: 14px;
            color: var(--text-secondary);
            margin-top: 8px;
            position: relative;
        }
        
        .bc-activity-detail::before {
            content: '';
            position: absolute;
            top: -6px;
            left: 20px;
            width: 10px;
            height: 10px;
            background: var(--surface);
            border-top: 1px solid var(--border);
            border-left: 1px solid var(--border);
            transform: rotate(45deg);
        }
        
        .bc-activity-detail.comment-preview {
            color: var(--text-primary);
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
        }
        
        .bc-activity-detail.comment-preview p:last-child {
            margin-bottom: 0;
        }
        .bc-activity-detail.comment-preview p {
            margin: 0;
            display: inline;
        }
        
        /* Activity content word wrap and text formatting */
        .bc-activity-detail,
        .bc-activity-detail * {
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
        }
        
        .bc-activity-detail {
            max-width: 100%;
            overflow: hidden;
        }
        
        /* Base64 images in activity */
        .bc-activity-detail img {
            max-width: 100%;
            max-height: 200px;
            height: auto;
            border-radius: 4px;
            margin: 8px 0;
            display: block;
        }
        
        .bc-activity-detail .activity-image-container {
            margin: 8px 0;
        }
        
        .bc-activity-detail .activity-image-container img {
            cursor: pointer;
            transition: opacity 0.2s;
        }
        
        .bc-activity-detail .activity-image-container img:hover {
            opacity: 0.9;
        }
        
        /* Changelog changes display */
        .bc-changelog-change {
            margin-bottom: 8px;
            line-height: 1.5;
        }
        
        .bc-changelog-change:last-child {
            margin-bottom: 0;
        }
        
        .bc-changelog-label {
            font-weight: 600;
            color: var(--text-primary);
            margin-right: 4px;
        }
        
        .bc-changelog-old {
            text-decoration: line-through;
            color: var(--text-muted);
            background: rgba(220, 38, 38, 0.1);
            padding: 2px 4px;
            border-radius: 3px;
        }
        
        .bc-changelog-new {
            color: var(--text-primary);
            background: rgba(34, 197, 94, 0.1);
            padding: 2px 4px;
            border-radius: 3px;
        }
        
        .bc-changelog-arrow {
            color: var(--text-muted);
            margin: 0 6px;
        }

        /* ===== Activity Feed V2 — Modern Grid Layout ===== */
        .bc-activity-feed-v2 {
            padding: 0;
        }
        .bc-activity-date-group {
            margin-bottom: 28px;
        }
        .bc-activity-date-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            background: var(--bg-hover, var(--surface));
            padding: 5px 14px;
            border-radius: 20px;
            margin-bottom: 14px;
        }
        .bc-activity-date-badge i {
            font-size: 11px;
            opacity: 0.7;
        }
        .bc-activity-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 12px;
        }
        .bc-activity-grid--2col {
            grid-template-columns: repeat(2, 1fr);
        }
        .bc-activity-grid--3col {
            grid-template-columns: repeat(3, 1fr);
        }
        .bc-activity-card {
            display: flex;
            gap: 12px;
            padding: 14px 16px;
            border-radius: 10px;
            background: var(--surface);
            border: 1px solid var(--border);
            transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
            position: relative;
            overflow: hidden;
        }
        .bc-activity-card:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
            border-color: var(--primary);
            transform: translateY(-1px);
        }
        /* Colored left accent per event type */
        .bc-activity-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            border-radius: 10px 0 0 10px;
            background: var(--primary);
        }
        .bc-activity-card--comment::before { background: var(--accent-blue, #3b82f6); }
        .bc-activity-card--merge::before { background: var(--accent-purple, #8b5cf6); }
        .bc-activity-card--complete::before { background: var(--accent-green, #22c55e); }
        .bc-activity-card--create::before { background: var(--accent-yellow, #eab308); }

        .bc-activity-card-icon {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: var(--primary);
            background: rgba(59, 130, 246, 0.08);
        }
        .bc-activity-card--comment .bc-activity-card-icon {
            color: var(--accent-blue, #3b82f6);
            background: rgba(59, 130, 246, 0.08);
        }
        .bc-activity-card--merge .bc-activity-card-icon {
            color: var(--accent-purple, #8b5cf6);
            background: rgba(139, 92, 246, 0.08);
        }
        .bc-activity-card--complete .bc-activity-card-icon {
            color: var(--accent-green, #22c55e);
            background: rgba(34, 197, 94, 0.08);
        }
        .bc-activity-card--create .bc-activity-card-icon {
            color: var(--accent-yellow, #d97706);
            background: rgba(234, 179, 8, 0.08);
        }

        .bc-activity-card-body {
            flex: 1;
            min-width: 0;
        }
        .bc-activity-card-header {
            margin-bottom: 4px;
        }
        .bc-activity-card-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-muted);
        }
        .bc-activity-card-user {
            font-weight: 600;
            color: var(--text-primary);
        }
        .bc-activity-card-time {
            margin-left: auto;
            font-size: 11px;
            color: var(--text-muted);
            white-space: nowrap;
        }
        .bc-activity-card-action {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.4;
            margin-top: 2px;
        }
        .bc-activity-card-link {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
        }
        .bc-activity-card-link:hover {
            text-decoration: underline;
        }
        .bc-activity-card-detail {
            margin-top: 8px;
            padding: 8px 10px;
            background: var(--bg-hover, rgba(0,0,0,0.02));
            border-radius: 6px;
            font-size: 12px;
            color: var(--text-secondary);
            max-height: 80px;
            overflow: hidden;
            word-break: break-word;
        }
        .bc-activity-card-detail.comment-preview {
            color: var(--text-primary);
            max-height: none;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
            font-size: 13px;
        }
        .bc-activity-card-detail.comment-preview p:last-child {
            margin-bottom: 0;
        }
        .bc-activity-card-detail.comment-preview p {
            margin: 0;
            display: inline;
        }
        .bc-activity-inline-badge {
            display: inline-block;
            font-size: 11px;
            color: var(--text-muted);
            margin-left: 4px;
            vertical-align: baseline;
        }
        .bc-activity-card-detail img {
            max-width: 100%;
            max-height: 60px;
            border-radius: 4px;
        }
        /* Project badge inside activity cards (global/user activity pages) */
        .bc-activity-card-project {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 4px;
            font-size: 11px;
            color: var(--text-muted);
        }
        .bc-activity-card-project i {
            font-size: 10px;
            opacity: 0.6;
        }
        .bc-activity-card-project a {
            color: var(--text-muted);
            text-decoration: none;
            font-weight: 500;
        }
        .bc-activity-card-project a:hover {
            color: var(--primary);
            text-decoration: underline;
        }
        /* Snooze card accent */
        .bc-activity-card--snooze::before { background: var(--accent-orange, #f59e0b); }
        .bc-activity-card--snooze .bc-activity-card-icon {
            color: var(--accent-orange, #f59e0b);
            background: rgba(245, 158, 11, 0.08);
        }
        
        /* ===== Grouped Activity Cards ===== */
        .bc-activity-card--grouped {
            flex-direction: column;
            gap: 8px;
        }
        .bc-activity-card--grouped .bc-activity-card-icon {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 28px;
            height: 28px;
            font-size: 12px;
        }
        .bc-activity-card--grouped .bc-activity-card-body {
            padding-right: 40px;
        }
        .bc-activity-card--mixed::before { 
            background: linear-gradient(180deg, var(--accent-blue, #3b82f6) 50%, var(--accent-purple, #8b5cf6) 50%); 
        }
        .bc-activity-card-todo-title {
            font-size: 14px;
            font-weight: 600;
            line-height: 1.35;
            margin-bottom: 4px;
        }
        .bc-activity-card-todo-title .bc-activity-card-link {
            color: var(--text-primary);
        }
        .bc-activity-card-todo-title .bc-activity-card-link:hover {
            color: var(--primary);
        }
        .bc-activity-card-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border-light, rgba(128,128,128,0.1));
        }
        .bc-activity-card-users {
            display: flex;
            align-items: center;
        }
        .bc-activity-more-users {
            font-size: 11px;
            color: var(--text-muted);
            margin-left: 4px;
        }
        .bc-activity-card-counts {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 12px;
            color: var(--text-muted);
        }
        .bc-activity-count {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 6px;
            border-radius: 4px;
            background: var(--bg-hover, rgba(0,0,0,0.03));
            font-weight: 500;
        }
        .bc-activity-count i {
            font-size: 10px;
        }
        .bc-activity-count--comment {
            color: var(--accent-blue, #3b82f6);
        }
        .bc-activity-count--deleted {
            color: var(--accent-red, #ef4444);
        }
        .bc-activity-count--change {
            color: var(--accent-purple, #8b5cf6);
        }
        /* ===== /Activity Feed V2 ===== */
        
        .bc-groups-section {
            margin-top: 40px;
        }
        
        .bc-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--border);
        }
        
        .bc-section-header h2 {
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-groups-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }
        
        .bc-group-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-left: 4px solid var(--bc-blue);
            border-radius: var(--radius);
            padding: 16px;
        }
        
        .bc-group-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }
        
        .bc-group-name {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .bc-group-badge-large {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            color: white;
        }
        
        .bc-group-slug {
            font-size: 11px;
            color: var(--text-muted);
            font-family: monospace;
        }
        
        .bc-group-description {
            font-size: 13px;
            color: var(--text-secondary);
            margin: 8px 0;
        }
        
        .bc-group-meta {
            display: flex;
            gap: 12px;
            font-size: 12px;
            color: var(--text-muted);
            margin: 8px 0;
        }
        
        .bc-sees-all {
            color: var(--accent-green);
        }
        
        /* "Sees All" badge for groups that can see entire project */
        .bc-sees-all-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            background: linear-gradient(135deg, #059669, #10b981);
            color: white;
            font-size: 11px;
            font-weight: 600;
            border-radius: 12px;
            white-space: nowrap;
        }
        
        .bc-sees-all-badge i {
            font-size: 10px;
        }
        
        .bc-sees-all-badge-sm {
            padding: 2px 6px;
            font-size: 10px;
        }
        
        .bc-sees-all-badge-sm i {
            font-size: 9px;
        }
        
        /* Default client group badge */
        .bc-default-client-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            color: white;
            font-size: 11px;
            font-weight: 500;
            border-radius: 12px;
            white-space: nowrap;
        }
        
        .bc-default-client-badge i {
            font-size: 10px;
        }
        
        .bc-visibility-usage-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            background: var(--surface-hover);
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 500;
            border-radius: 12px;
            white-space: nowrap;
            border: 1px solid var(--border);
            transition: all 0.15s;
        }
        .bc-visibility-usage-badge:hover {
            background: var(--accent-blue);
            color: white;
            border-color: var(--accent-blue);
        }
        
        /* Split section highlight */
        .bc-ai-split-section {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
            border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
        }
        
        /* Group card highlight when it sees all */
        .bc-group-card.bc-group-sees-all {
            border-left: 3px solid var(--accent-green);
            background: linear-gradient(90deg, rgba(16, 185, 129, 0.05), transparent);
        }
        
        .bc-who-group-section.bc-who-group-sees-all {
            border-left: 3px solid var(--accent-green);
            background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), transparent);
        }
        
        /* Allowed domains display */
        .bc-group-domains {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 8px;
            padding: 6px 10px;
            background: var(--bg-tertiary);
            border-radius: 6px;
            font-family: monospace;
        }
        
        /* Permission indicators */
        .bc-perm-active {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background: var(--badge-green-bg);
            color: var(--badge-green-text);
            border-radius: 4px;
            font-weight: 500;
        }
        
        .bc-perm-inactive {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background: var(--badge-red-bg);
            color: var(--badge-red-text);
            border-radius: 4px;
            font-weight: 500;
            text-decoration: line-through;
            opacity: 0.7;
        }
        
        /* Styled checkbox */
        .bc-checkbox-label {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 14px;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            transition: all 0.15s ease;
        }
        
        .bc-checkbox-label:hover {
            background: var(--bg-secondary);
            border-color: var(--primary);
        }
        
        .bc-checkbox-label:has(.bc-checkbox:checked) {
            background: rgba(37, 99, 235, 0.08);
            border-color: var(--primary);
        }
        
        .bc-checkbox {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
            cursor: pointer;
        }
        
        /* Invite new user section in modal */
        .bc-invite-new-user {
            margin-top: 16px;
            padding: 16px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 8px;
        }
        
        .bc-invite-new-user-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            color: var(--accent-blue);
            margin-bottom: 8px;
        }
        
        .bc-invite-new-user-header i {
            font-size: 16px;
        }
        
        .bc-invite-new-user-desc {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 12px;
            line-height: 1.5;
        }
        
        .bc-group-footer {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
        }
        
        .bc-empty-state {
            grid-column: 1 / -1;
            text-align: center;
            padding: 48px 24px;
            color: var(--text-muted);
        }
        
        .bc-empty-state i {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.5;
        }
        
        .bc-empty-state-sm {
            padding: 24px;
            text-align: center;
            color: var(--text-muted);
        }
        
        .bc-user-list {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .bc-user-list-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-bottom: 1px solid var(--border);
        }
        
        .bc-user-list-item:last-child {
            border-bottom: none;
        }
        
        .bc-user-list-item:hover {
            background: var(--bg);
        }
        
        .bc-user-list-item.bc-user-selected {
            background: var(--bg-green-tint);
        }
        
        .bc-user-avatar-sm {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--bc-blue);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 14px;
            flex-shrink: 0;
            overflow: hidden;
        }
        
        .bc-user-avatar-sm img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .bc-user-info {
            flex: 1;
            min-width: 0;
        }
        
        .bc-user-name {
            font-weight: 500;
        }
        
        .bc-user-email {
            font-size: 12px;
            color: var(--text-muted);
        }
        
        .loading-inline {
            display: flex;
            justify-content: center;
            padding: 24px;
        }
        
        .spinner-sm {
            width: 24px;
            height: 24px;
            border: 2px solid var(--border);
            border-top-color: var(--bc-blue);
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
        
        .modal-lg {
            width: 90%;
            max-width: 600px;
        }
        
        .bc-people-avatars .bc-avatar:first-child {
            margin-left: 0;
        }
        
        /* Client label under avatar */
        .bc-avatar-with-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            margin-left: -4px;
        }
        
        .bc-avatar-with-label:first-child {
            margin-left: 0;
        }
        
        .bc-avatar-label {
            font-size: 10px;
            color: var(--text-secondary);
        }
        
        /* Billing button in corner */
        .bc-project-actions {
            position: absolute;
            top: 16px;
            right: 24px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
        }
        
        .bc-project-actions > div {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        /* ===== BASECAMP-STYLE PEOPLE ROW (Avatar Stack) ===== */
        .bc-people-row {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            margin-top: 8px;
            min-height: 40px;
        }
        
        /* Home page variant - smaller, left aligned */
        .bc-people-row-home {
            justify-content: flex-start;
            margin-top: 12px;
        }
        
        .bc-people-row-home .bc-groups-display {
            justify-content: flex-start;
            gap: 6px;
        }
        
        .bc-people-row-home .bc-group-chip {
            padding: 4px 10px 4px 4px;
            border-radius: 16px;
        }
        
        .bc-people-row-home .bc-group-chip-avatars {
            padding-left: 2px;
        }
        
        .bc-people-row-home .bc-group-chip-avatars .bc-avatar {
            width: 22px !important;
            height: 22px !important;
            font-size: 9px !important;
            margin-left: -4px;
        }
        
        .bc-people-row-home .bc-group-chip-avatars .bc-avatar:first-child {
            margin-left: 0;
        }
        
        .bc-people-row-home .bc-group-chip-name {
            font-size: 11px;
        }
        
        .bc-people-row-home .bc-group-chip-count {
            font-size: 10px;
            color: var(--text-muted);
            margin-left: 2px;
        }
        
        /* Avatar stack container */
        .bc-avatar-stack {
            display: flex;
            align-items: center;
            padding-left: 0;
            margin-top: 8px;
        }
        
        .bc-avatar-stack .bc-avatar {
            margin-left: -8px; /* Overlap effect */
            border: 2px solid white;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
        }
        
        .bc-avatar-stack .bc-avatar:first-child {
            margin-left: 0;
        }

        .bc-avatar-stack .bc-avatar.is-client {
            box-shadow: 0 0 0 2px #fbbf24;
            z-index: 2;
        }
        
        .bc-avatar-more {
            font-size: 11px;
            color: var(--text-muted);
            margin-left: 6px;
            font-weight: 500;
        }
        
        .bc-people-row .bc-avatar {
            width: 36px;
            height: 36px;
            font-size: 13px;
            border: 2px solid white;
            cursor: pointer;
            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, z-index 0s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 1;
        }
        
        .bc-people-row .bc-avatar:hover {
            transform: translateY(-4px) scale(1.05);
            z-index: 20;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        }
        
        /* Client avatar has yellow/orange ring - Basecamp style */
        .bc-people-row .bc-avatar.is-client {
            box-shadow: 0 0 0 3px #f59e0b, 0 2px 6px rgba(0, 0, 0, 0.15);
        }
        
        .bc-people-row .bc-avatar.is-client:hover {
            box-shadow: 0 0 0 3px #f59e0b, 0 6px 16px rgba(0, 0, 0, 0.2);
        }
        
        /* Avatar with Client label below */
        .bc-avatar-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            position: relative;
            z-index: 2; /* Client always on top */
        }
        
        .bc-avatar-wrapper .bc-client-label {
            font-size: 11px;
            color: var(--text);
            font-weight: 600;
            letter-spacing: 0.3px;
            text-transform: capitalize;
        }
        
        /* More members badge in stack */
        .bc-avatar-more {
            background: var(--border) !important;
            color: var(--text) !important;
            font-weight: 600;
            font-size: 14px !important;
        }
        
        /* Groups display - visual chips for each group */
        .bc-groups-display {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            align-items: center;
        }
        
        .bc-group-chip {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px 6px 8px;
            border-radius: 24px;
            background: var(--bg);
            border: 2px solid var(--border);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-group-chip:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .bc-group-chip-avatars {
            display: flex;
            align-items: center;
            padding-left: 6px;
        }
        
        .bc-group-chip-avatars .bc-avatar {
            margin-left: -6px;
            border: 2px solid white;
        }
        
        .bc-group-chip-avatars .bc-avatar:first-child {
            margin-left: 0;
        }
        
        .bc-avatar-xs {
            width: 28px !important;
            height: 28px !important;
            font-size: 10px !important;
        }
        
        .bc-group-chip-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
        }
        
        /* Group chip color variants */
        .bc-group-chip-blue { border-color: var(--accent-blue); background: rgba(59, 130, 246, 0.08); }
        .bc-group-chip-blue .bc-group-chip-name { color: var(--badge-blue-text); }
        
        .bc-group-chip-green { border-color: var(--accent-green); background: rgba(16, 185, 129, 0.08); }
        .bc-group-chip-green .bc-group-chip-name { color: var(--badge-green-text); }
        
        .bc-group-chip-orange { border-color: var(--accent-yellow); background: rgba(245, 158, 11, 0.08); }
        .bc-group-chip-orange .bc-group-chip-name { color: var(--badge-yellow-text); }
        
        .bc-group-chip-purple { border-color: var(--accent-purple); background: rgba(139, 92, 246, 0.08); }
        .bc-group-chip-purple .bc-group-chip-name { color: var(--badge-purple-text); }
        
        .bc-group-chip-red { border-color: var(--accent-red); background: rgba(239, 68, 68, 0.08); }
        .bc-group-chip-red .bc-group-chip-name { color: var(--accent-red); }
        
        .bc-group-chip-gray { border-color: var(--text-secondary); background: rgba(107, 114, 128, 0.08); }
        .bc-group-chip-gray .bc-group-chip-name { color: var(--text); }
        
        /* "Who can see this project?" Modal Styles */
        .bc-who-modal {
            max-width: 700px;
            width: 95%;
        }
        
        .bc-who-modal .modal-header {
            text-align: center;
            padding: 24px 24px 0;
            border-bottom: none;
        }
        
        .bc-who-modal .modal-title {
            font-size: 20px;
            font-weight: 600;
        }
        
        .bc-who-tabs {
            display: flex;
            justify-content: center;
            gap: 0;
            margin: 16px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .bc-who-tab {
            padding: 12px 24px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.15s;
        }
        
        .bc-who-tab:hover {
            color: var(--text);
        }
        
        .bc-who-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .bc-who-description {
            padding: 12px 24px;
            font-size: 13px;
            color: var(--text-secondary);
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }
        
        .bc-who-description strong {
            color: var(--accent-green);
        }
        
        .bc-who-add-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s;
            margin-left: auto;
        }
        
        .bc-who-add-btn:hover {
            background: var(--primary-hover);
        }
        
        .bc-who-company {
            padding: 16px 24px 8px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
        }
        
        .bc-who-list {
            padding: 0 24px 16px;
        }
        
        .bc-who-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .bc-who-item:last-child {
            border-bottom: none;
        }
        
        .bc-who-item .bc-avatar {
            width: 40px;
            height: 40px;
            font-size: 14px;
            flex-shrink: 0;
        }
        
        .bc-who-info {
            flex: 1;
            min-width: 0;
        }
        
        .bc-who-name {
            font-weight: 500;
            color: var(--text);
        }
        
        .bc-who-details {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .bc-who-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* Move members between groups */
        .bc-bulk-move-bar {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 12px 24px;
            background: var(--accent-blue);
            color: white;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .bc-bulk-count {
            font-weight: 600;
        }
        
        .bc-bulk-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .bc-member-checkbox {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .bc-member-checkbox input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border: 2px solid var(--border);
            border-radius: 4px;
            background: var(--bg);
            cursor: pointer;
            transition: all 0.15s ease;
            position: relative;
        }
        
        .bc-member-checkbox input:checked {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
        }
        
        .bc-member-checkbox input:checked::after {
            content: '';
            position: absolute;
            left: 5px;
            top: 2px;
            width: 4px;
            height: 8px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        .bc-member-checkbox input:hover {
            border-color: var(--accent-blue);
        }
        
        .bc-who-item-selected {
            background: var(--accent-blue-light, rgba(59, 130, 246, 0.1));
            border-radius: 8px;
            margin: 0 -8px;
            padding-left: 8px !important;
            padding-right: 8px !important;
        }
        
        .bc-move-dropdown {
            position: relative;
        }
        
        .bc-move-menu {
            position: absolute;
            right: 0;
            top: 100%;
            background: var(--bg-card, var(--bg-elevated, #1f2937));
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
            min-width: 180px;
            z-index: 10000;
            overflow: hidden;
        }
        
        .bc-move-menu-header {
            padding: 10px 14px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            background: var(--bg-hover, rgba(255,255,255,0.05));
            border-bottom: 1px solid var(--border);
        }
        
        .bc-move-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px 14px;
            background: transparent;
            border: none;
            color: var(--text);
            font-size: 13px;
            cursor: pointer;
            text-align: left;
            transition: background 0.15s ease;
        }
        
        .bc-move-menu-item:hover {
            background: var(--bg-hover, rgba(255,255,255,0.1));
        }
        
        .bc-group-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .bc-dot-blue { background: var(--accent-blue); }
        .bc-dot-green { background: var(--accent-green); }
        .bc-dot-yellow { background: var(--accent-yellow); }
        .bc-dot-orange { background: var(--accent-orange); }
        .bc-dot-red { background: var(--accent-red); }
        .bc-dot-purple { background: var(--accent-purple); }
        .bc-dot-pink { background: #ec4899; }
        .bc-dot-teal { background: #14b8a6; }
        .bc-dot-gray { background: var(--text-muted); }
        
        .bc-status-dropdown {
            position: relative;
        }
        
        .bc-status-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: var(--accent-yellow-light);
            border: 1px solid var(--accent-yellow-light);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            color: var(--badge-yellow-text);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .bc-status-btn:hover {
            background: var(--accent-yellow-light);
        }
        
        .bc-status-btn .fa-chevron-down {
            font-size: 10px;
        }
        
        .bc-status-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            min-width: 180px;
            z-index: 1000;
            overflow: hidden;
        }
        
        .bc-status-option {
            display: block;
            width: 100%;
            padding: 10px 14px;
            font-size: 13px;
            text-align: left;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text);
        }
        
        .bc-status-option:hover {
            background: var(--bg);
        }
        
        .bc-status-option.danger {
            color: var(--accent-red);
        }
        
        .bc-status-option.danger:hover {
            background: var(--bg-red-tint);
        }
        
        .bc-who-menu-btn {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            border-radius: var(--radius);
        }
        
        .bc-who-menu-btn:hover {
            background: var(--bg-hover);
            color: var(--text);
        }
        
        .bc-collaborators-section {
            padding: 16px 24px 8px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            border-top: 1px solid var(--border);
            margin-top: 8px;
        }
        
        /* Group sections in Who Can See modal */
        .bc-who-group-section {
            border-bottom: 1px solid var(--border);
            padding-bottom: 8px;
        }
        
        .bc-who-group-section:last-child {
            border-bottom: none;
        }
        
        .bc-who-group-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 24px 8px;
            background: var(--surface);
        }
        
        .bc-group-member-count {
            font-size: 13px;
            color: var(--text-muted);
            flex: 1;
        }
        
        .bc-group-description-sm {
            font-size: 13px;
            color: var(--text-muted);
            padding: 0 24px 8px;
            margin: 0;
        }
        
        /* Invite form styles */
        .bc-invite-section {
            padding: 16px;
            background: var(--bg);
            border-radius: var(--radius);
            margin-top: 12px;
        }
        
        .bc-invite-message {
            text-align: center;
            color: var(--text-secondary);
            margin-bottom: 16px;
        }
        
        .bc-invite-form {
            max-width: 400px;
            margin: 0 auto;
        }
        
        .bc-invite-success {
            margin-top: 16px;
        }
        
        .alert {
            padding: 12px 16px;
            border-radius: var(--radius);
        }
        
        .alert-success {
            background: var(--badge-green-bg);
            border: 1px solid var(--border-green-light);
            color: var(--badge-green-text);
        }
        
        .bc-billing-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 6px 10px;
            border-radius: 4px;
        }
        
        .bc-billing-btn:hover {
            background: var(--bg-hover);
        }

        /* ===== BUTTONS ===== */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border: none;
            border-radius: var(--radius);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            font-family: inherit;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background: var(--primary-hover);
        }
        
        .btn-secondary {
            background: var(--bg);
            color: var(--text);
            border: 1px solid var(--border);
        }
        
        .btn-secondary:hover {
            background: var(--border-light);
        }

        .btn-success {
            background: var(--accent-green);
            color: white;
        }

        .btn-success:hover {
            background: var(--accent-green);
        }
        
        .btn-lg {
            padding: 12px 24px;
            font-size: 15px;
        }

        tr.row-error td {
            background: var(--bg-red-tint) !important;
            border-bottom-color: var(--border-red-light) !important;
        }
        
        .btn-ghost {
            background: transparent;
            color: var(--text-secondary);
        }
        
        .btn-ghost:hover {
            background: var(--bg);
            color: var(--text);
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }
        
        .btn:disabled,
        .btn[disabled] {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .btn-primary:disabled,
        .btn-primary[disabled] {
            background: var(--primary);
            color: white;
        }
        
        .btn-icon {
            width: 32px;
            height: 32px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-icon-danger:hover {
            color: var(--accent-red);
        }
        
        /* ===== FORMS ===== */
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 6px;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
        }
        
        .form-input {
            width: 100%;
            padding: 10px 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 14px;
            font-family: inherit;
            color: var(--text);
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(29, 120, 116, 0.1);
        }
        
        .form-input::placeholder {
            color: var(--text-muted);
        }
        
        /* Number input spinner buttons - color based on theme */
        .form-input[type="number"]::-webkit-inner-spin-button,
        .form-input[type="number"]::-webkit-outer-spin-button {
            opacity: 1;
            cursor: pointer;
        }
        
        /* Dark theme spinner color */
        [data-theme="dark"] .form-input[type="number"]::-webkit-inner-spin-button,
        [data-theme="dark"] .form-input[type="number"]::-webkit-outer-spin-button {
            filter: invert(1);
        }
        
        .form-select {
            width: 100%;
            padding: 10px 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 14px;
            font-family: inherit;
            color: var(--text);
            cursor: pointer;
            transition: border-color 0.15s, box-shadow 0.15s;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 10px center;
            background-repeat: no-repeat;
            background-size: 16px;
            padding-right: 36px;
        }
        
        .form-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(29, 120, 116, 0.1);
        }
        
        /* Password input with toggle */
        .password-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .password-input-wrapper .form-input {
            padding-right: 40px;
        }
        
        .password-toggle {
            position: absolute;
            right: 8px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            font-size: 18px;
            opacity: 0.6;
            transition: opacity 0.15s;
        }
        
        .password-toggle:hover {
            opacity: 1;
        }

        /* File Upload Area */
        .file-upload-area {
            border: 2px dashed var(--border);
            border-radius: var(--radius);
            padding: 32px 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg);
        }
        
        .file-upload-area:hover {
            border-color: var(--primary);
            background: rgba(29, 78, 216, 0.05);
        }
        
        .file-upload-area i {
            font-size: 32px;
            color: var(--primary);
            margin-bottom: 8px;
        }
        
        .file-upload-area p {
            margin: 4px 0;
            font-size: 14px;
        }
        
        .attachment-item {
            display: flex;
            align-items: center;
            padding: 8px;
            background: var(--bg);
            border-radius: var(--radius);
            font-size: 13px;
            gap: 12px;
        }
        
        .attachment-item button {
            margin-left: auto;
        }
        
        /* Textarea */
        textarea.form-input {
            resize: vertical;
            font-family: 'Monaco', 'Menlo', monospace;
            min-height: 150px;
        }
        
        /* Select */
        select.form-input {
            cursor: pointer;
        }
        
        /* Radio Option Style */
        .bc-radio-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg);
        }
        .bc-radio-option:hover {
            border-color: var(--primary);
            background: var(--surface-hover);
        }
        .bc-radio-option.selected {
            border-color: var(--primary);
            background: var(--bg-blue-tint);
        }
        .bc-radio-option input[type="radio"] {
            accent-color: var(--primary);
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        .bc-radio-option .radio-label {
            font-size: 14px;
            color: var(--text);
        }
        
        /* ===== PREMIUM AUTH SCREEN - SPLIT LAYOUT ===== */
        .auth-container {
            display: flex;
            min-height: 100vh;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
            overflow: hidden;
        }
        
        /* Left side - Login Form */
        .auth-left {
            flex: 0 0 480px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 60px;
            background: rgba(255, 255, 255, 0.98);
            position: relative;
            z-index: 10;
            box-shadow: 30px 0 60px rgba(0, 0, 0, 0.3);
            animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        @keyframes slideInLeft {
            from { transform: translateX(-100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .auth-box {
            width: 100%;
            max-width: 360px;
            margin: 0 auto;
        }
        
        .auth-logo {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .auth-logo img {
            height: 50px;
            margin-bottom: 16px;
            animation: fadeInUp 0.6s ease-out 0.3s both;
        }
        
        @keyframes fadeInUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .auth-logo-icon {
            width: 72px;
            height: 72px;
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 800;
            font-size: 28px;
            margin-bottom: 16px;
            box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
            animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
        }
        
        @keyframes bounceIn {
            from { transform: scale(0); }
            50% { transform: scale(1.1); }
            to { transform: scale(1); }
        }
        
        .auth-title {
            font-size: 28px;
            font-weight: 800;
            background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.5px;
            animation: fadeInUp 0.6s ease-out 0.4s both;
        }
        
        .auth-subtitle {
            font-size: 15px;
            color: var(--text-secondary);
            margin-top: 8px;
            animation: fadeInUp 0.6s ease-out 0.5s both;
        }
        
        /* Form animations */
        .auth-box form {
            animation: fadeInUp 0.6s ease-out 0.6s both;
        }
        
        .auth-box .form-group {
            margin-bottom: 20px;
            animation: fadeInUp 0.5s ease-out both;
        }
        
        .auth-box .form-group:nth-child(1) { animation-delay: 0.7s; }
        .auth-box .form-group:nth-child(2) { animation-delay: 0.8s; }
        .auth-box .form-group:nth-child(3) { animation-delay: 0.9s; }
        .auth-box .form-group:nth-child(4) { animation-delay: 1s; }
        
        .auth-box .form-label {
            font-weight: 600;
            color: var(--text);
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        
        .auth-box .form-input {
            padding: 14px 16px;
            border-radius: 12px;
            border: 2px solid var(--border);
            background: var(--bg);
            font-size: 15px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .auth-box .form-input:focus {
            border-color: var(--accent-blue);
            background: var(--surface);
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(59, 130, 246, 0.15);
            transform: translateY(-2px);
        }
        
        .auth-box .btn-primary {
            width: 100%;
            padding: 16px 24px;
            font-size: 16px;
            font-weight: 700;
            border-radius: 12px;
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            border: none;
            color: white;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
            animation: fadeInUp 0.5s ease-out 1.1s both;
        }
        
        .auth-box .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }
        
        .auth-box .btn-primary:hover::before {
            left: 100%;
        }
        
        .auth-box .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
        }
        
        .auth-box .btn-primary:active {
            transform: translateY(-1px);
        }
        
        .auth-toggle {
            text-align: center;
            margin-top: 28px;
            font-size: 14px;
            color: var(--text-secondary);
            animation: fadeInUp 0.5s ease-out 1.2s both;
        }
        
        .auth-toggle a {
            color: var(--accent-blue);
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .auth-toggle a:hover {
            color: var(--primary);
            text-decoration: underline;
        }
        
        /* Auth Language Selector - Premium Style */
        .auth-lang-wrapper {
            position: relative;
            display: flex;
            justify-content: center;
            margin-bottom: 28px;
            animation: fadeInUp 0.5s ease-out 0.55s both;
            z-index: 100;
        }
        
        .auth-lang-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 50px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .auth-lang-btn:hover {
            background: var(--bg-secondary);
            border-color: var(--border-dark);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        
        .auth-lang-flag {
            width: 22px;
            height: 16px;
            border-radius: 3px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }
        
        .auth-lang-flag img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .auth-lang-text {
            letter-spacing: 0.5px;
        }
        
        .auth-lang-arrow {
            font-size: 10px;
            color: var(--text-muted);
            transition: transform 0.25s ease;
        }
        
        .auth-lang-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
            min-width: 160px;
            z-index: 1000;
            overflow: hidden;
            animation: dropdownFadeIn 0.2s ease;
        }
        
        @keyframes dropdownFadeIn {
            from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        
        .auth-lang-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            cursor: pointer;
            font-size: 14px;
            color: var(--text);
            transition: all 0.15s;
        }
        
        .auth-lang-option:hover {
            background: var(--bg);
        }
        
        .auth-lang-option.active {
            background: var(--bg-blue-tint);
            color: var(--primary);
            font-weight: 600;
        }
        
        .auth-lang-name {
            flex: 1;
        }
        
        .auth-lang-check {
            color: var(--accent-blue);
            font-size: 12px;
        }

        /* Right side - Features Showcase */
        .auth-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 60px 80px;
            position: relative;
            overflow: hidden;
        }
        
        /* Animated background elements */
        .auth-right::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -30%;
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
            animation: pulse 8s ease-in-out infinite;
        }
        
        .auth-right::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -20%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
            animation: pulse 10s ease-in-out infinite reverse;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }
        
        .features-content {
            position: relative;
            z-index: 1;
            max-width: 600px;
        }
        
        .features-header {
            margin-bottom: 48px;
            animation: fadeInRight 0.8s ease-out 0.4s both;
        }
        
        @keyframes fadeInRight {
            from { transform: translateX(50px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .features-tagline {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(59, 130, 246, 0.2);
            color: var(--accent-blue);
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        
        .features-tagline i {
            font-size: 14px;
        }
        
        .features-title {
            font-size: 42px;
            font-weight: 800;
            color: var(--text-on-primary);
            line-height: 1.2;
            margin-bottom: 16px;
            letter-spacing: -1px;
        }
        
        .features-title span {
            background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .features-desc {
            font-size: 18px;
            color: var(--text-muted);
            line-height: 1.7;
        }
        
        /* Feature cards grid */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .feature-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 24px;
            cursor: default;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            animation: fadeInUp 0.6s ease-out both;
        }
        
        .feature-card:nth-child(1) { animation-delay: 0.5s; }
        .feature-card:nth-child(2) { animation-delay: 0.6s; }
        .feature-card:nth-child(3) { animation-delay: 0.7s; }
        .feature-card:nth-child(4) { animation-delay: 0.8s; }
        .feature-card:nth-child(5) { animation-delay: 0.9s; }
        .feature-card:nth-child(6) { animation-delay: 1s; }
        
        .feature-card:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(59, 130, 246, 0.5);
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(59, 130, 246, 0.2);
        }
        
        .feature-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 16px;
            transition: all 0.3s;
        }
        
        .feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(5deg);
        }
        
        .feature-icon.blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; }
        .feature-icon.green { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; }
        .feature-icon.purple { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; }
        .feature-icon.orange { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: white; }
        .feature-icon.pink { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); color: white; }
        .feature-icon.cyan { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: white; }
        
        .feature-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-on-primary);
            margin-bottom: 8px;
        }
        
        .feature-desc {
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.5;
        }
        
        /* Bottom stats */
        .features-stats {
            display: flex;
            gap: 40px;
            margin-top: 48px;
            padding-top: 32px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            animation: fadeInUp 0.6s ease-out 1.1s both;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-size: 32px;
            font-weight: 800;
            color: var(--text-on-primary);
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 2px;
        }
        
        .stat-value span {
            font-size: 20px;
            color: var(--accent-blue);
        }
        
        .stat-label {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Floating badges */
        .floating-badge {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--text-on-primary);
            animation: float 6s ease-in-out infinite;
            z-index: 5;
        }
        
        .floating-badge.badge-1 {
            top: 10%;
            right: 15%;
            animation-delay: 0s;
        }
        
        .floating-badge.badge-2 {
            bottom: 20%;
            right: 10%;
            animation-delay: 2s;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
        }
        
        .floating-badge i {
            font-size: 18px;
            color: var(--accent-blue);
        }
        
        /* Mobile responsive */
        @media (max-width: 1024px) {
            .auth-container {
                flex-direction: column;
                min-height: 100vh;
            }
            
            .auth-left {
                flex: 1;
                padding: 24px 30px 30px;
                box-shadow: none;
                justify-content: flex-start;
            }
            
            .auth-right {
                display: none;
            }
            
            .auth-logo {
                margin-bottom: 20px;
            }
            
            .auth-logo-icon {
                width: 56px;
                height: 56px;
                font-size: 22px;
                border-radius: 16px;
                margin-bottom: 10px;
            }
            
            .auth-subtitle {
                font-size: 13px;
                margin-top: 4px;
            }
            
            .auth-box .form-group {
                margin-bottom: 14px;
            }
            
            .auth-box .form-input {
                padding: 12px 14px;
                font-size: 14px;
            }
            
            .auth-box .btn-primary {
                padding: 14px 24px;
                font-size: 15px;
            }
        }
        
        @media (max-width: 480px) {
            .auth-left {
                padding: 20px 20px 24px;
            }
            
            .auth-box {
                max-width: 100%;
            }
            
            .auth-title {
                font-size: 22px;
            }
            
            .auth-logo {
                margin-bottom: 16px;
            }
            
            .auth-logo-icon {
                width: 48px;
                height: 48px;
                font-size: 20px;
                border-radius: 14px;
                margin-bottom: 8px;
            }
        }
        
        /* ===== HOMEPAGE / PROJECT CARDS ===== */
        .bc-page-header {
            text-align: center;
            padding: 32px 24px;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
        }
        
        .bc-page-title {
            font-size: 15px;
            color: var(--text-muted);
            margin-bottom: 20px;
        }
        
        .bc-page-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
        
        .bc-breadcrumb {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }
        
        .bc-project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
            padding: 24px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .bc-project-card {
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: inherit;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 16px 20px 0;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            min-height: 120px;
            z-index: 1;
            overflow: hidden;
        }
        /* When billing footer is present, body doesn't need bottom padding */
        .bc-project-card:has(.bc-card-billing-footer) .bc-card-body {
            padding-bottom: 0;
        }
        
        .bc-project-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }
        
        .bc-project-card.color-picker-open {
            z-index: 100;
        }
        
        .bc-project-card.pinned {
            border-left: 4px solid var(--accent-orange);
        }
        
        /* Basecamp-style colored cards */
        .bc-project-card.card-yellow {
            background: var(--accent-yellow-light);
            border-color: var(--accent-yellow);
        }
        
        .bc-project-card.card-green {
            background: var(--accent-green-light);
            border-color: var(--accent-green);
        }
        
        .bc-project-card.card-blue {
            background: var(--accent-blue-light);
            border-color: var(--accent-blue);
        }
        
        .bc-project-card.card-pink {
            background: var(--accent-pink-light);
            border-color: var(--accent-pink);
        }
        
        .bc-project-card.card-orange {
            background: var(--accent-orange-light);
            border-color: var(--accent-orange);
        }
        
        .bc-project-card.card-purple {
            background: var(--accent-purple-light);
            border-color: var(--accent-purple);
        }
        
        .bc-project-card.card-teal {
            background: var(--accent-teal-light);
            border-color: var(--accent-teal);
        }
        
        .bc-project-card.card-red {
            background: var(--accent-red-light);
            border-color: var(--accent-red);
        }
        
        .bc-project-card.card-gray {
            background: var(--bg-secondary);
            border-color: var(--border-dark);
        }
        
        /* Inactive project styling */
        .bc-project-card.inactive {
            opacity: 0.5;
            filter: grayscale(0.3);
        }
        .bc-project-card.inactive:hover {
            opacity: 0.7;
        }
        .bc-project-list-item.inactive {
            opacity: 0.5;
        }
        .bc-project-list-item.inactive:hover {
            opacity: 0.7;
        }
        
        /* ===== LIGHT THEME: Homepage card contrast fixes ===== */
        :root:not([data-theme^="dark"]) .bc-project-label {
            color: var(--text-secondary);
        }
        :root:not([data-theme^="dark"]) .bc-card-billing-footer {
            color: var(--text-secondary);
            background: rgba(0, 0, 0, 0.04);
            border-top: 1px solid rgba(0, 0, 0, 0.08);
        }
        :root:not([data-theme^="dark"]) .bc-card-billing-model {
            color: var(--text);
        }
        :root:not([data-theme^="dark"]) .bc-card-billing-detail {
            color: var(--text-secondary);
        }
        :root:not([data-theme^="dark"]) .bc-card-billing-none {
            opacity: 0.55;
        }
        :root:not([data-theme^="dark"]) .bc-card-billing-none-label {
            color: var(--text-secondary);
        }
        :root:not([data-theme^="dark"]) .bc-project-no-access {
            color: var(--text-secondary);
        }

        /* ===== SKELETON LOADING ===== */
        .bc-skeleton-card {
            pointer-events: none;
        }
        .skeleton {
            background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
            border-radius: 4px;
        }
        .skeleton-badge {
            width: 60px;
            height: 16px;
            margin-bottom: 12px;
        }
        .skeleton-title {
            width: 80%;
            height: 20px;
            margin-bottom: 8px;
        }
        .skeleton-text {
            width: 100%;
            height: 14px;
            margin-bottom: 6px;
        }
        .skeleton-text-short {
            width: 60%;
        }
        .bc-skeleton-avatars {
            display: flex;
            gap: 4px;
            margin-top: 16px;
        }
        .skeleton-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
        }
        @keyframes skeleton-shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        /* Skeleton for dashboard todo items */
        .skeleton-todo-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 0;
        }
        .skeleton-checkbox {
            width: 16px;
            height: 16px;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
            flex-shrink: 0;
        }
        .skeleton-line {
            height: 14px;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
        }
        .skeleton-short {
            width: 60%;
        }
        
        /* ===== LAZY LOADING SKELETON FOR TODO LISTS ===== */
        .bc-lazy-loading-skeleton {
            padding: 12px 16px;
        }
        .bc-lazy-loading-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 16px 0;
            color: var(--text-muted, #9ca3af);
            font-size: 13px;
        }
        .bc-lazy-loading-indicator i {
            color: var(--primary, #4f46e5);
        }
        .bc-lazy-placeholder {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .bc-skeleton-todo {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 0;
        }
        .bc-skeleton-checkbox {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--border-light, #f0f0f0) 25%, var(--border, #e0e0e0) 50%, var(--border-light, #f0f0f0) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
            flex-shrink: 0;
        }
        .bc-skeleton-title {
            height: 14px;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--border-light, #f0f0f0) 25%, var(--border, #e0e0e0) 50%, var(--border-light, #f0f0f0) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
        }

        /* Skeleton for dashboard doc cards */
        .skeleton-doc-card {
            background: var(--bg);
            border-radius: 8px;
            overflow: hidden;
        }
        .skeleton-doc-preview {
            height: 60px;
            background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
        }
        .skeleton-doc-title {
            padding: 8px;
        }
        
        /* ===== LIST VIEW ===== */
        .bc-project-list {
            max-width: 900px;
            margin: 0 auto;
            padding: 24px;
        }
        
        .bc-project-list-item {
            display: flex;
            text-decoration: none;
            color: inherit;
            align-items: center;
            gap: 16px;
            padding: 12px 16px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        /* ===== EMPTY STATES ===== */
        .bc-empty-state {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            text-align: center;
            background: var(--surface);
            border: 2px dashed var(--border);
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all 0.2s;
        }
        .bc-empty-state:hover {
            border-color: var(--primary);
            background: var(--surface);
        }
        .bc-empty-state.bc-empty-search {
            cursor: default;
            border: none;
            background: transparent;
            padding: 80px 20px 60px;
        }
        .bc-empty-state.bc-empty-search:hover {
            border-color: transparent;
            background: transparent;
        }
        .bc-empty-search-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: var(--bg-secondary, #f1f5f9);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 28px;
        }
        .bc-empty-search-icon i {
            font-size: 24px;
            color: var(--text-muted);
            opacity: 0.45;
        }
        .bc-empty-illustration {
            margin-bottom: 24px;
        }
        .bc-empty-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
            margin: 0 0 10px 0;
        }
        .bc-empty-desc {
            font-size: 13px;
            color: var(--text-muted);
            margin: 0 0 28px 0;
            max-width: 300px;
            line-height: 1.5;
        }
        .bc-empty-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-project-list-item:hover {
            box-shadow: var(--shadow);
            transform: translateX(2px);
        }
        
        .bc-project-list-item.pinned {
            border-left: 4px solid var(--accent-orange);
        }
        
        .bc-project-list-item .project-pin-icon {
            color: var(--text-muted);
            font-size: 14px;
            width: 20px;
            flex-shrink: 0;
            opacity: 0.3;
            transition: all 0.2s;
        }

        .bc-project-list-item:hover .project-pin-icon {
            opacity: 1;
        }

        .bc-project-list-item .project-pin-icon.active {
            color: var(--accent-red);
            opacity: 1;
            transform: rotate(45deg);
        }
        
        .bc-project-list-item .project-color-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .bc-project-list-item .project-info {
            flex: 1;
            min-width: 0;
        }
        
        .bc-project-list-item .project-name {
            font-weight: 600;
            color: var(--text);
            margin-bottom: 2px;
        }
        
        .bc-project-list-item .project-desc {
            font-size: 13px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-project-list-item .project-actions {
            display: flex;
            gap: 8px;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .bc-project-list-item:hover .project-actions {
            opacity: 1;
        }

        /* ===== COLOR PICKER ===== */
        .color-picker-popup {
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 12px;
            box-shadow: var(--shadow-md);
            z-index: 1000;
            min-width: 200px;
        }
        
        .color-picker-title {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        
        .color-picker-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
        }
        
        .color-picker-option {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .color-picker-option:hover {
            transform: scale(1.1);
        }
        
        .color-picker-option.selected {
            border-color: var(--text);
        }
        
        .color-picker-option.color-none {
            background: linear-gradient(135deg, #fff 45%, #ccc 45%, #ccc 55%, #fff 55%);
            border: 1px solid var(--border);
        }
        
        .color-picker-option.color-yellow { background: var(--accent-yellow-light); }
        .color-picker-option.color-green { background: var(--accent-green-light); }
        .color-picker-option.color-blue { background: var(--accent-blue-light); }
        .color-picker-option.color-pink { background: var(--accent-pink-light); }
        .color-picker-option.color-orange { background: var(--accent-orange-light); }
        .color-picker-option.color-purple { background: var(--accent-purple-light); }
        .color-picker-option.color-teal { background: var(--accent-teal-light); }
        .color-picker-option.color-red { background: var(--accent-red-light); }
        .color-picker-option.color-gray { background: var(--bg-secondary); }
        
        /* ===== PROJECT SEARCH ===== */
        .project-search-container {
            max-width: 500px;
            margin: 0 auto 16px;
            position: relative;
        }
        
        .project-search-input {
            width: 100%;
            padding: 12px 16px 12px 40px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 24px;
            font-size: 14px;
            font-family: inherit;
            color: var(--text);
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        
        .project-search-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
        }
        
        .project-search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            pointer-events: none;
        }
        
        .project-search-clear {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            font-size: 16px;
        }
        
        .project-search-clear:hover {
            color: var(--text);
        }
        
        /* ===== VIEW TOGGLE ===== */
        .view-toggle-container {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .view-toggle-btn {
            padding: 6px 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            cursor: pointer;
            font-size: 13px;
            color: var(--text-secondary);
            transition: all 0.15s;
        }
        
        .view-toggle-btn:hover {
            background: var(--bg);
        }
        
        .view-toggle-btn.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .view-toggle-link {
            color: var(--primary);
            cursor: pointer;
            font-size: 13px;
            text-decoration: underline;
        }
        
        .view-toggle-link:hover {
            color: var(--primary-hover);
        }
        
        .bc-project-label {
            font-size: 11px;
            font-weight: 500;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        
        .bc-project-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 4px;
        }
        
        .bc-project-desc {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .bc-project-avatars {
            display: flex;
            gap: -6px;
        }
        
        .bc-project-avatars .bc-avatar {
            margin-right: -6px;
            border: 2px solid var(--surface);
        }
        
        /* Project groups row on cards */
        .bc-project-groups-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 12px;
        }
        
        .bc-project-group-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
            background: var(--border);
            color: var(--text);
        }
        
        .bc-project-group-chip.bc-group-chip-blue { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
        .bc-project-group-chip.bc-group-chip-orange { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
        .bc-project-group-chip.bc-group-chip-green { background: var(--badge-green-bg); color: var(--badge-green-text); }
        .bc-project-group-chip.bc-group-chip-purple { background: var(--badge-purple-bg); color: var(--accent-purple); }
        .bc-project-group-chip.bc-group-chip-red { background: var(--badge-red-bg); color: var(--accent-red); }
        .bc-project-group-chip.bc-group-chip-yellow { background: var(--badge-yellow-bg); color: var(--badge-yellow-text); }
        .bc-project-group-chip.bc-group-chip-pink { background: var(--badge-pink-bg); color: var(--badge-pink-text); }
        .bc-project-group-chip.bc-group-chip-teal { background: var(--badge-teal-bg); color: var(--badge-teal-text); }
        .bc-project-group-chip.bc-group-chip-gray { background: var(--bg-hover); color: var(--text-secondary); }
        
        .bc-group-count {
            opacity: 0.7;
            font-weight: 400;
        }
        
        .bc-project-no-access {
            font-size: 11px;
            color: var(--text-muted);
            font-style: italic;
        }
        
        .bc-project-pin {
            position: absolute;
            top: 12px;
            right: 12px;
            background: none;
            border: none;
            padding: 4px;
            color: var(--text-muted);
            font-size: 14px;
            cursor: pointer;
            opacity: 0.3;
            transition: all 0.2s;
        }
        
        .bc-project-card:hover .bc-project-pin {
            opacity: 1;
        }

        .bc-project-pin.active {
            color: var(--accent-red);
            opacity: 1;
            transform: rotate(45deg);
        }
        
        .bc-project-pin:hover {
            transform: scale(1.2) rotate(45deg);
        }

        .bc-project-members-row {
            margin-top: 16px;
            display: flex;
            align-items: center;
        }

        .bc-project-members-row .bc-avatar-stack {
            display: flex;
            align-items: center;
        }

        .bc-project-members-row .bc-avatar {
            margin-left: -8px;
            border: 2px solid white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .bc-project-members-row .bc-avatar:first-child {
            margin-left: 0;
        }

        .bc-avatar-more {
            font-size: 11px;
            color: var(--text-muted);
            margin-left: 8px;
            font-weight: 600;
        }
        
        /* Color toggle button */
        .bc-project-card .project-color-toggle {
            position: absolute;
            top: 12px;
            right: 36px;
            cursor: pointer;
            font-size: 18px;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .bc-project-card:hover .project-color-toggle {
            opacity: 0.5;
        }
        
        .bc-project-card .project-color-toggle:hover {
            opacity: 1;
            transform: scale(1.1);
        }
        
        /* ===== PROJECT VIEW ===== */
        .bc-project-header {
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .bc-project-header-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .bc-project-header-info h1 {
            font-size: 18px;
            font-weight: 600;
        }
        
        .bc-project-header-meta {
            display: flex;
            gap: 16px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .bc-project-header-meta span {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-back-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 13px;
            padding: 8px 12px;
            border-radius: var(--radius);
            cursor: pointer;
        }
        
        .bc-back-btn:hover {
            background: var(--bg);
            color: var(--text);
        }
        
        /* ===== TODO LIST CONTAINER ===== */
        .bc-todolist-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .bc-todolist-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 32px;
            position: relative;
        }

        .bc-todolist-header-actions {
            position: absolute;
            right: 0;
            top: 4px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        /* Multi-select toolbar */
        .bc-selection-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-blue-tint);
            border: 1px solid var(--border-blue-light);
            border-radius: 8px;
            padding: 10px 16px;
            margin-bottom: 16px;
        }
        
        .bc-selection-count {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--accent-blue);
            font-weight: 500;
        }
        
        .bc-selection-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-select-sm {
            padding: 6px 12px;
            border: 1px solid var(--border-blue-light);
            border-radius: 6px;
            font-size: 13px;
            background: var(--surface);
            cursor: pointer;
        }
        
        .bc-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border: none;
            border-radius: var(--radius);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            font-family: inherit;
            background: var(--bg-secondary);
            color: var(--text);
        }
        .bc-btn.bc-btn-secondary {
            background: var(--bg);
            color: var(--text);
            border: 1px solid var(--border);
        }
        .bc-btn.bc-btn-secondary:hover {
            background: var(--bg-secondary);
        }

        .bc-btn-sm {
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-btn-sm.bc-btn-ghost {
            background: transparent;
            color: var(--text-secondary);
        }
        .bc-btn-sm.bc-btn-ghost:hover {
            background: var(--bg-hover);
            color: var(--text);
        }

        .bc-btn-sm.bc-btn-secondary {
            background: var(--border);
            color: var(--text);
        }
        
        .bc-btn-sm.bc-btn-secondary:hover {
            background: var(--border);
        }
        
        .bc-btn-sm.bc-btn-success {
            background: var(--accent-green);
            color: white;
        }
        
        .bc-btn-sm.bc-btn-success:hover {
            background: var(--accent-green);
        }
        
        .bc-btn-sm.bc-btn-danger {
            background: var(--accent-red);
            color: white;
        }
        
        .bc-btn-sm.bc-btn-danger:hover {
            background: var(--accent-red);
        }
        
        .bc-btn-sm:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .bc-todolist-title {
            font-size: 36px;
            font-weight: 800;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0;
        }
        
        .bc-todolist-badge {
            background: var(--border);
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
            padding: 2px 10px;
            border-radius: 12px;
        }
        
        .bc-todolist-progress {
            font-size: 14px;
            color: var(--text-muted);
            margin-top: 4px;
        }
        
        /* New list button - green pill like Basecamp */
        .bc-new-list-btn-header {
            background: var(--accent-green);
            color: white;
            border: none;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-new-list-btn-header:hover {
            background: var(--accent-green);
        }
        
        /* New list button - inline small version next to title */
        .bc-new-list-btn-inline {
            display: none; /* Hidden on desktop, shown on mobile */
            width: 28px;
            height: 28px;
            min-width: 28px;
            min-height: 28px;
            border-radius: 50%;
            background: var(--accent-green);
            color: white;
            border: none;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-left: 8px;
            vertical-align: middle;
            line-height: 1;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        
        .bc-new-list-btn-inline:hover {
            background: var(--accent-green);
        }
        
        /* ===== PROJECT DASHBOARD ===== */
        .bc-project-dashboard {
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px;
        }

        .bc-dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 0;
            border-top: 1px solid var(--border);
            border-left: 1px solid var(--border);
            background: var(--surface);
        }

        .bc-dashboard-grid.bc-dashboard-single {
            grid-template-columns: 1fr;
        }

        .bc-dashboard-card.bc-card-full {
            min-height: 400px;
        }

        .bc-dashboard-card {
            background: var(--surface);
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            border-radius: 0;
            padding: 8px 12px;
            box-shadow: none;
            cursor: pointer;
            transition: background 0.2s;
            display: flex;
            flex-direction: column;
            min-height: 240px;
        }

        .bc-dashboard-card:hover {
            background: var(--bg);
            transform: none;
            box-shadow: none;
        }

        .bc-dashboard-card.bc-card-disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .bc-dashboard-card.bc-card-disabled:hover {
            background: var(--surface);
            transform: none;
            box-shadow: none;
        }

        /* Docs Widget Drag & Drop Styles */
        .bc-dashboard-card-dropzone {
            position: relative;
            transition: all 0.2s ease;
        }
        
        .bc-dashboard-card-dropzone.bc-dropzone-active {
            border: 2px dashed var(--accent-green) !important;
            background: var(--bg-green-tint) !important;
        }
        
        .bc-drop-overlay {
            position: absolute;
            inset: 0;
            background: rgba(16, 185, 129, 0.15);
            border-radius: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            pointer-events: none;
        }
        
        .bc-drop-overlay-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            color: var(--accent-green);
            font-weight: 600;
        }
        
        .bc-drop-overlay-content i {
            font-size: 32px;
            animation: bounce 0.5s ease infinite alternate;
        }
        
        @keyframes bounce {
            from { transform: translateY(0); }
            to { transform: translateY(-6px); }
        }
        
        .bc-upload-spinner {
            color: var(--accent-green);
        }

        /* Semtix Offer Widget Styles */
        .bc-dashboard-card-semtix {
            background: var(--surface) !important;
        }

        .bc-dashboard-card-semtix .bc-card-header {
            border-bottom: 1px solid var(--border) !important;
            padding-bottom: 8px !important;
            margin-bottom: 10px !important;
        }

        .bc-dashboard-card-semtix .bc-card-header i {
            display: inline-block !important;
            color: var(--primary) !important;
            font-size: 14px !important;
        }

        .bc-dashboard-card-semtix .bc-card-header h3 {
            color: var(--text) !important;
            font-size: 13px !important;
        }

        .semtix-offer-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 2px;
            line-height: 1.3;
        }

        .semtix-offer-client {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            color: var(--text-secondary);
            margin-bottom: 12px;
        }

        .semtix-offer-client i {
            font-size: 10px;
            color: var(--text-muted);
        }

        .semtix-stats-grid {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 10px;
        }

        .semtix-stat {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 10px;
            background: var(--bg);
            border-radius: 6px;
            border-left: 3px solid var(--border-dark);
        }

        .semtix-stat:nth-child(1) {
            border-left-color: var(--accent-green);
            background: var(--bg-green-tint);
        }

        .semtix-stat:nth-child(2) {
            border-left-color: var(--accent-blue);
            background: var(--bg-blue-tint);
        }

        .semtix-stat:nth-child(3) {
            border-left-color: var(--text-secondary);
            background: var(--bg-secondary);
        }

        .semtix-stat-value {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
        }

        .semtix-stat:nth-child(1) .semtix-stat-value {
            color: var(--accent-green);
            font-size: 15px;
        }

        .semtix-stat:nth-child(2) .semtix-stat-value {
            color: var(--accent-blue);
        }

        .semtix-stat:nth-child(3) .semtix-stat-value {
            color: var(--text-secondary);
        }

        .semtix-stat-label {
            font-size: 11px;
            color: var(--text-secondary);
        }

        .semtix-view-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 6px 10px;
            background: var(--bg-secondary);
            border-radius: 6px;
            font-size: 11px;
            color: var(--accent-blue);
            transition: background 0.2s;
        }

        .bc-dashboard-card-semtix:hover .semtix-view-link {
            background: var(--bg-blue-tint);
        }

        .semtix-view-link i {
            font-size: 9px;
        }
        
        /* Warning Widget */
        .bc-dashboard-card-warning {
            border: 2px solid var(--accent-yellow);
            background: var(--bg-amber-tint);
        }
        
        .bc-dashboard-card-warning .bc-card-header {
            color: var(--accent-yellow);
        }
        
        .bc-dashboard-card-warning .bc-card-header i {
            display: inline;
            color: var(--accent-yellow);
        }
        
        .bc-warning-message {
            text-align: center;
            color: var(--badge-yellow-text);
            font-size: 13px;
            line-height: 1.5;
        }
        
        /* Billing Widget */
        .bc-dashboard-card-billing {
            border: 1px solid var(--accent-green);
            background: var(--bg-green-tint);
        }
        
        .bc-dashboard-card-billing .bc-card-header {
            color: var(--accent-green);
        }
        
        .bc-dashboard-card-billing .bc-card-header i {
            display: inline;
            color: var(--accent-green);
        }
        
        .billing-widget-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .billing-widget-model {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: var(--surface);
            border-radius: 6px;
            border: 1px solid var(--border-green-light);
        }
        
        .billing-widget-detail {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            padding: 4px 0;
        }
        
        .billing-widget-label {
            color: var(--text-muted);
        }
        
        .billing-widget-value {
            font-weight: 600;
            color: var(--text);
        }
        
        .billing-widget-amount {
            color: var(--accent-green);
        }
        
        .billing-widget-hours {
            color: var(--link-color);
            font-weight: 700;
        }
        
        /* Muted Widget */
        .bc-dashboard-card-muted {
            border: 1px dashed var(--border);
            background: var(--bg-secondary);
        }
        
        .bc-dashboard-card-muted .bc-card-header {
            color: var(--text-muted);
        }
        
        /* Chat Widget */
        .bc-dashboard-card-chat {
            border: 1px solid var(--accent-purple);
            background: var(--badge-purple-bg);
        }
        
        .bc-dashboard-card-chat .bc-card-header {
            color: var(--accent-purple);
        }
        
        .bc-dashboard-card-chat .bc-card-header i {
            display: inline;
            color: var(--accent-purple);
        }
        
        .bc-chat-widget-badge {
            background: var(--accent-red);
            color: var(--text-on-primary);
            font-size: 11px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 6px;
        }
        
        .bc-chat-preview {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-chat-preview-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 6px 8px;
            background: var(--surface);
            border-radius: 6px;
            border: 1px solid var(--badge-purple-bg);
        }
        
        .bc-chat-preview-content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }
        
        .bc-chat-preview-sender {
            font-size: 11px;
            font-weight: 600;
            color: var(--accent-purple);
        }
        
        .bc-chat-preview-text {
            font-size: 12px;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-chat-preview-time {
            font-size: 10px;
            color: var(--text-muted);
            flex-shrink: 0;
        }
        
        .skeleton-chat-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            background: var(--surface);
            border-radius: 6px;
            margin-bottom: 6px;
        }
        
        .skeleton-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }

        .bc-card-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 6px;
            border-bottom: none;
            padding-bottom: 0;
        }

        .bc-card-header i {
            display: none;
        }

        .bc-card-header h3 {
            margin: 0;
            font-size: 13px;
            font-weight: 700;
            color: var(--text);
            text-align: center;
            letter-spacing: 0.2px;
        }

        .bc-card-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1px;
            overflow: hidden;
        }

        .bc-card-summary-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
            padding: 2px 0;
        }

        .bc-summary-name {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .bc-summary-badges {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-left: auto;
            flex-shrink: 0;
        }

        .bc-summary-badge {
            font-size: 10px;
            padding: 1px 4px;
            border-radius: 4px;
            background: var(--bg-hover);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 2px;
        }

        .bc-summary-badge.has-deadline {
            background: var(--bg-red-tint);
            color: var(--accent-red);
        }

        .bc-summary-badge.is-overdue {
            background: var(--badge-red-bg);
            color: var(--accent-red);
            font-weight: 600;
        }

        /* Summary item assignee avatars */
        .bc-summary-assignees {
            display: flex;
            align-items: center;
            margin-left: 4px;
        }
        
        .bc-summary-assignees .bc-avatar {
            margin-left: -4px;
            border: 1px solid white;
        }
        
        .bc-summary-assignees .bc-avatar:first-child {
            margin-left: 0;
        }
        
        .bc-summary-assignees .bc-avatar-more {
            background: var(--border);
            color: var(--text-secondary);
            font-size: 8px;
            font-weight: 600;
        }

        .bc-card-more {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
            padding-left: 16px;
        }

        .bc-card-empty {
            font-size: 12px;
            color: var(--text-muted);
            text-align: center;
            padding: 10px 0;
        }

        /* Mini Kanban preview for dashboard */
        .bc-mini-kanban {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            padding: 2px 0;
            flex: 1;
        }

        .bc-mini-kanban-column {
            flex: 1;
            min-width: 90px;
            max-width: 140px;
            background: var(--bg);
            border-radius: 6px;
            padding: 6px;
            display: flex;
            flex-direction: column;
        }

        .bc-mini-kanban-header {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 6px;
            padding-bottom: 4px;
            border-bottom: 2px solid var(--column-color, #9ca3af);
        }

        .bc-mini-kanban-header .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--column-color, #9ca3af);
            flex-shrink: 0;
        }

        .bc-mini-kanban-header .status-name {
            font-size: 10px;
            font-weight: 600;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .bc-mini-kanban-header .status-count {
            font-size: 9px;
            color: var(--text-secondary);
            margin-left: auto;
            background: var(--surface);
            padding: 0 4px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .bc-mini-kanban-items {
            display: flex;
            flex-direction: column;
            gap: 3px;
            overflow: hidden;
        }

        .bc-mini-kanban-item {
            background: var(--surface);
            padding: 4px 6px;
            border-radius: 4px;
            font-size: 10px;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            border-left: 2px solid var(--column-color, #9ca3af);
        }

        .bc-mini-kanban-more {
            font-size: 9px;
            color: var(--text-muted);
            text-align: center;
            padding: 2px;
        }

        .bc-summary-dot {
            width: 6px;
            height: 6px;
            background: var(--primary);
            border-radius: 50%;
            flex-shrink: 0;
        }

        .bc-tool-back {
            margin-bottom: 20px;
        }

        .bc-tool-back a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .bc-tool-back a:hover {
            color: var(--primary);
        }
        
        /* Hide back button on todolist container - not needed */
        .bc-todolist-container > .bc-tool-back {
            display: none;
        }

        .bc-list {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 20px;
            overflow: visible;
            padding: 16px 20px;
            box-shadow: var(--shadow);
            transition: all 0.2s;
            display: flex;
            flex-direction: column;
        }

        .bc-list:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        
        .bc-list-header {
            padding: 0 0 12px 0;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 12px;
            background: transparent;
            margin-bottom: 12px;
        }

        .bc-list-drag-handle {
            cursor: grab;
            color: var(--text-disabled);
            padding: 4px;
            font-size: 14px;
            transition: color 0.2s;
        }

        .bc-list-drag-handle:hover {
            color: var(--text-muted);
        }

        .bc-list-drag-handle:active {
            cursor: grabbing;
        }

        .bc-list-options {
            cursor: pointer;
            color: var(--text-muted);
            padding: 4px 8px;
            font-size: 14px;
            transition: color 0.2s;
            border-radius: 4px;
        }

        .bc-list-options:hover {
            color: var(--text);
            background: var(--bg-hover);
        }

        .bc-list-archive-btn {
            cursor: pointer;
            color: var(--text-disabled);
            background: none;
            border: none;
            padding: 4px 6px;
            font-size: 12px;
            transition: color 0.2s, opacity 0.2s;
            border-radius: 4px;
            opacity: 0;
        }

        .bc-list-header:hover .bc-list-archive-btn {
            opacity: 1;
        }

        .bc-list-archive-btn:hover {
            color: var(--accent-orange);
            background: var(--bg-hover);
        }

        .bc-list-ghost {
            opacity: 0.4;
            background: var(--bg-hover);
            border: 2px dashed var(--border-dark);
        }
        
        .bc-list-header-left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }

        .bc-list-header-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1;
        }

        .bc-list-header-main {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* Pie chart progress indicator */
        .bc-list-progress-pie {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: conic-gradient(var(--primary, #3b82f6) var(--progress, 0%), var(--border) var(--progress, 0%));
            flex-shrink: 0;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
        }

        .bc-list-progress-text {
            font-size: 11px;
            color: var(--text-secondary);
        }

        .bc-list-name-edit-input {
            font-size: 18px;
            font-weight: 700;
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 2px 8px;
            width: 100%;
            max-width: 400px;
            outline: none;
        }

        .bc-list-edit-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            margin-left: 8px;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.2s, color 0.2s;
        }

        .bc-list-header-main:hover .bc-list-edit-btn {
            opacity: 1;
        }

        .bc-list-edit-btn:hover {
            color: var(--text);
        }
        
        .bc-list-name {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary);
            text-decoration: underline;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-list-name:hover {
            color: var(--badge-blue-text);
        }

        .bc-list-comments-count {
            font-size: 14px;
            color: var(--text-secondary);
            margin-left: 8px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-weight: normal;
        }
        
        .bc-extra-work-badge {
            background: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%);
            color: white;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-left: 8px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            box-shadow: 0 1px 3px rgba(255, 107, 0, 0.3);
        }
        
        .bc-extra-work-badge i {
            font-size: 10px;
        }
        
        /* Extra work list container styling */
        .bc-list-extra-work {
            border: 1px dashed rgba(255, 140, 0, 0.35) !important;
            background: linear-gradient(135deg, rgba(255, 140, 0, 0.02) 0%, rgba(255, 107, 0, 0.01) 100%) !important;
            border-radius: 12px !important;
            position: relative;
        }
        
        /* Dark mode extra work list */
        [data-theme="dark"] .bc-list-extra-work,
        .dark .bc-list-extra-work {
            border: 1px dashed rgba(255, 140, 0, 0.3) !important;
            background: linear-gradient(135deg, rgba(255, 140, 0, 0.04) 0%, rgba(255, 107, 0, 0.02) 100%) !important;
        }
        
        @media (prefers-color-scheme: dark) {
            .bc-list-extra-work {
                border: 1px dashed rgba(255, 140, 0, 0.3) !important;
                background: linear-gradient(135deg, rgba(255, 140, 0, 0.04) 0%, rgba(255, 107, 0, 0.02) 100%) !important;
            }
        }
        
        /* Fixed price package list container styling */
        .bc-list-fixed-package {
            border: 2px dashed rgba(38, 166, 154, 0.5) !important;
            background: linear-gradient(135deg, rgba(38, 166, 154, 0.06) 0%, rgba(0, 137, 123, 0.03) 100%) !important;
            border-radius: 12px !important;
            position: relative;
        }
        
        /* Dark mode fixed package list */
        [data-theme="dark"] .bc-list-fixed-package,
        .dark .bc-list-fixed-package {
            border: 2px dashed rgba(38, 166, 154, 0.45) !important;
            background: linear-gradient(135deg, rgba(38, 166, 154, 0.08) 0%, rgba(0, 137, 123, 0.04) 100%) !important;
        }
        
        @media (prefers-color-scheme: dark) {
            .bc-list-fixed-package {
                border: 2px dashed rgba(38, 166, 154, 0.45) !important;
                background: linear-gradient(135deg, rgba(38, 166, 154, 0.08) 0%, rgba(0, 137, 123, 0.04) 100%) !important;
            }
        }
        
        /* Fixed package badge */
        .bc-fixed-package-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(135deg, #26a69a 0%, #00897b 100%);
            padding: 2px 8px;
            border-radius: 10px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            box-shadow: 0 1px 3px rgba(0, 137, 123, 0.3);
            margin-left: 2px;
        }
        
        .bc-fixed-package-badge i {
            font-size: 10px;
        }
        
        /* Fixed package budget tag - same style as Rozpočet but teal */
        .bc-fixed-package-budget-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(38, 166, 154, 0.12);
            border: 1px solid rgba(38, 166, 154, 0.4);
            border-radius: 10px;
            padding: 2px 10px;
            font-size: 11px;
            font-weight: 500;
            color: var(--text-muted);
            margin-left: 8px;
        }
        
        .bc-fixed-package-budget-tag strong {
            color: #26a69a;
            font-weight: 700;
        }
        
        /* Group budget tags on todolist header */
        .bc-list-group-budgets {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: 10px;
        }
        
        .bc-group-budget-tag {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 11px;
            font-weight: 500;
            cursor: help;
        }
        
        .bc-group-budget-tag .bc-group-budget-name {
            color: var(--text-muted);
            font-weight: 400;
        }
        
        .bc-group-budget-tag .bc-group-budget-value {
            color: var(--accent-primary);
            font-weight: 600;
        }
        
        .bc-group-budget-tag.bc-budget-ok {
            background: rgba(34, 197, 94, 0.1);
            border-color: rgba(34, 197, 94, 0.3);
        }
        
        .bc-group-budget-tag.bc-budget-ok .bc-group-budget-value {
            color: #22c55e;
        }
        
        .bc-group-budget-tag.bc-budget-warning {
            background: rgba(245, 158, 11, 0.1);
            border-color: rgba(245, 158, 11, 0.3);
        }
        
        .bc-group-budget-tag.bc-budget-warning .bc-group-budget-value {
            color: #f59e0b;
        }
        
        .bc-group-budget-tag.bc-budget-over {
            background: rgba(239, 68, 68, 0.1);
            border-color: rgba(239, 68, 68, 0.3);
        }
        
        .bc-group-budget-tag.bc-budget-over .bc-group-budget-value {
            color: #ef4444;
        }
        
        /* Overall list budget tag in todolist view header */
        .bc-list-overall-budget {
            margin-left: 8px;
        }
        
        .bc-budget-settings-btn {
            background: transparent;
            border: 1px solid var(--accent-orange);
            color: var(--accent-orange);
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.15s ease;
            margin-left: 8px;
        }
        
        .bc-budget-settings-btn:hover {
            background: var(--accent-orange);
            color: white;
        }
        
        .bc-list-icon {
            font-size: 16px;
        }
        
        /* Client visible badge - Basecamp exact style */
        .bc-list-client-badge {
            background: var(--accent-green);
            color: white;
            font-size: 12px;
            padding: 4px 12px;
            border-radius: 14px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        
        .bc-list-client-badge::before {
            content: '👁';
            font-size: 11px;
        }
        
        .bc-list-time {
            color: var(--text-secondary);
            font-size: 13px;
            margin-left: 8px;
        }
        
        .bc-list-progress {
            font-size: 11px;
            color: var(--text-muted);
            font-style: italic;
        }
        
        /* ===== TODO ITEMS - Basecamp Exact ===== */
        .bc-todo-list {
            list-style: none;
            padding-left: 0;
        }
        
        /* Basecamp-style todo row */
        .bc-todo-item {
            display: grid;
            grid-template-columns: 24px 24px 24px 1fr auto auto auto auto auto auto 80px;
            align-items: center;
            gap: 8px;
            padding: 4px 12px;
            border-radius: 6px;
            transition: background 0.15s;
            cursor: pointer;
            position: relative;
            min-height: 36px;
            background: var(--surface);
        }

        /* Allow title column to shrink but not truncate */
        .bc-todo-item > div:nth-child(4) {
            min-width: 0;
        }
        
        .bc-todo-item:hover {
            background: var(--bg);
        }
        
        .bc-todo-item:hover .bc-todo-drag,
        .bc-todo-item:hover .bc-todo-archive-btn {
            opacity: 1;
        }
        
        .bc-todo-item:hover .bc-todo-options {
            color: var(--text-muted);
        }
        
        .bc-todo-item.completed {
            grid-template-columns: 24px 24px 24px 1fr auto auto auto auto auto auto 80px;
            padding: 4px 12px;
        }

        .bc-todo-item.completed .bc-todo-title {
            font-size: 13px;
            line-height: 1.2;
            color: var(--text-muted);
            text-decoration: line-through;
        }

        .bc-todo-item.completed .bc-todo-checkbox {
            width: 16px;
            height: 16px;
            font-size: 9px;
            background: var(--accent-blue);
            border-color: var(--accent-blue);
            color: white;
        }

        .bc-todo-item.completed .bc-todo-meta-item {
            font-size: 11px;
        }

        .bc-todo-item.completed .bc-avatar {
            width: 20px;
            height: 20px;
            font-size: 9px;
        }
        
        .bc-todo-item.dragging {
            opacity: 0.6;
            background: var(--bg-blue-tint);
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        }
        
        .bc-todo-item.selected {
            background: var(--bg-blue-tint);
            border-left: 3px solid var(--primary);
        }
        
        /* Extra work (billing_type: extra) styling */
        .bc-todo-item.extra-work {
            background: linear-gradient(90deg, var(--accent-yellow-light) 0%, var(--surface) 20%);
        }
        .bc-todo-item.extra-work:hover {
            background: linear-gradient(90deg, var(--badge-yellow-bg) 0%, var(--bg-secondary) 20%);
        }
        
        .bc-billing-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 4px;
            white-space: nowrap;
        }
        .bc-billing-badge.extra {
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
            border: 1px solid #fcd34d;
        }
        .bc-billing-badge.included {
            background: var(--accent-green-light);
            color: var(--badge-green-text);
            border: 1px solid var(--border-green-light);
        }
        
        .bc-completed-more-link {
            margin-top: 8px;
            margin-left: 32px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }
        .bc-completed-more-link:hover {
            color: var(--text);
            text-decoration: underline;
        }
        .bc-completed-section {
            margin-top: 12px;
        }
        .bc-completed-list {
            margin-bottom: 0;
        }
        
        /* Drag handle - 3 horizontal lines like Basecamp */
        .bc-todo-drag {
            width: 24px;
            height: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            cursor: grab;
            opacity: 0;
            transition: opacity 0.15s;
            user-select: none;
            flex-shrink: 0;
            padding: 4px;
            border-radius: 4px;
            position: relative;
        }
        
        .bc-todo-drag:hover {
            background: var(--border);
            opacity: 1;
        }
        
        .bc-todo-drag:active {
            cursor: grabbing;
        }
        
        .bc-todo-drag::before,
        .bc-todo-drag::after {
            content: '';
            display: block;
            width: 12px;
            height: 2px;
            background: var(--text-muted);
            border-radius: 1px;
        }
        
        .bc-todo-drag span {
            display: block;
            width: 12px;
            height: 2px;
            background: var(--text-muted);
            border-radius: 1px;
        }
        
        .bc-todo-drag:hover::before,
        .bc-todo-drag:hover::after,
        .bc-todo-drag:hover span {
            background: var(--text-secondary);
        }
        
        .bc-todo-options {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: transparent;
            border-radius: 4px;
            transition: color 0.15s, background 0.15s;
            margin-left: 2px;
            /* Reset button styles */
            background: none;
            border: none;
            padding: 0;
            font: inherit;
        }
        
        .bc-todo-options:hover {
            background: var(--border);
            color: var(--text-secondary);
        }
        
        /* Todo Context Menu - Basecamp style */
        .bc-todo-context-menu {
            position: fixed;
            background: var(--surface);
            border-radius: 8px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
            padding: 8px 0;
            min-width: 180px;
            z-index: 1000;
        }
        
        .bc-todo-context-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            cursor: pointer;
            font-size: 14px;
            color: var(--text);
            transition: background 0.1s;
        }
        
        .bc-todo-context-menu-item:hover {
            background: var(--bg-hover);
        }
        
        .bc-todo-context-menu-item i {
            width: 16px;
            color: var(--text-secondary);
        }
        
        .bc-todo-context-menu-item.danger {
            color: var(--accent-red);
        }
        
        .bc-todo-context-menu-item.danger i {
            color: var(--accent-red);
        }
        
        .bc-todo-context-menu-divider {
            height: 1px;
            background: var(--border);
            margin: 6px 0;
        }
        
        .bc-todo-title {
            font-size: 15px;
            font-weight: 400;
            color: var(--text);
            text-decoration: none;
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.4;
        }
        
        .bc-todo-meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: var(--text-secondary);
            white-space: nowrap;
            margin-left: 8px;
        }

        .bc-todo-meta-item.comments {
            background: var(--badge-purple-bg) !important;
            color: var(--accent-purple) !important;
            padding: 2px 6px !important;
            border-radius: 10px !important;
            font-weight: 600 !important;
            min-width: 24px !important;
            justify-content: center !important;
        }
        
        /* Status badge for list view */
        .bc-status-badge-mini {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
            color: white;
            white-space: nowrap;
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-status-badge-none {
            background: var(--border);
            color: var(--text-secondary);
        }

        .bc-todo-meta-item.time-badge {
            background: var(--bg-hover);
            padding: 2px 6px;
            border-radius: 4px;
        }

        .bc-todo-priority-cell {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .bc-todo-priority-cell .bc-priority-badge {
            width: 24px;
            height: 24px;
            font-size: 11px;
            transform: none;
            box-shadow: none;
        }

        .bc-todo-date-wrapper {
            display: flex;
            align-items: center;
            gap: 4px;
            position: relative;
            margin-left: 8px;
        }

        .bc-todo-date-text {
            font-size: 11px;
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 4px;
            min-width: 20px;
            display: inline-block;
            white-space: nowrap;
            transition: all 0.15s;
        }

        .bc-todo-date-text:hover {
            background: var(--bg-hover);
            color: var(--text);
        }

        .bc-todo-date-text.empty {
            color: var(--text-disabled);
            opacity: 0;
        }

        .bc-todo-item:hover .bc-todo-date-text.empty {
            opacity: 1;
        }

        .bc-todo-date-text.empty::before {
            content: '\f133';
            font-family: 'Font Awesome 5 Free';
            font-weight: 400;
        }

        .bc-todo-date-input-hidden {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .bc-todo-assignees {
            display: flex;
            justify-content: flex-end;
            gap: -4px;
            width: 80px;
        }

        .bc-todo-assignees .bc-avatar {
            border: 2px solid white;
            margin-left: -8px;
        }

        .bc-todo-assignees .bc-avatar:first-child {
            margin-left: 0;
        }

        .bc-todo-play {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
        }

        .bc-todo-play:hover {
            color: var(--primary);
            background: var(--bg-blue-tint);
        }

        .bc-todo-play.is-running {
            color: var(--accent-red);
            animation: pulse 2s infinite;
        }

        .bc-todo-play.is-blocked {
            color: var(--text-muted);
            opacity: 0.4;
            cursor: not-allowed;
        }

        .bc-todo-play.is-blocked:hover {
            color: var(--text-muted);
            opacity: 0.5;
        }

        .bc-todo-archive-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            opacity: 0;
            transition: all 0.15s;
            margin-left: 8px;
        }

        .bc-todo-archive-btn:hover {
            color: var(--accent-red);
            background: var(--bg-red-tint);
        }

        /* Recurring todo icon */
        .bc-todo-recurrence-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            opacity: 0;
            transition: all 0.15s;
            font-size: 11px;
            position: relative;
        }

        .bc-todo-item:hover .bc-todo-recurrence-btn {
            opacity: 1;
        }

        .bc-todo-recurrence-btn.active {
            opacity: 1;
            color: var(--accent-green);
        }

        .bc-todo-recurrence-btn:hover {
            color: var(--accent-green);
            background: var(--accent-green-light);
        }

        /* Snooze todo icon */
        .bc-todo-snooze-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            opacity: 0;
            transition: all 0.15s;
            font-size: 11px;
        }

        .bc-todo-item:hover .bc-todo-snooze-btn {
            opacity: 1;
        }

        .bc-todo-snooze-btn.active {
            opacity: 1;
            color: var(--accent-yellow);
        }

        .bc-todo-snooze-btn:hover {
            color: var(--accent-yellow);
            background: var(--badge-yellow-bg);
        }

        /* Snoozed todo indicator */
        .bc-todo-item.snoozed {
            opacity: 0.6;
            background: var(--bg-amber-tint);
        }

        .bc-todo-item.snoozed .bc-todo-title {
            color: var(--badge-yellow-text);
        }

        /* Recurring/Snooze dropdown menu */
        .bc-action-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            min-width: 180px;
            padding: 8px 0;
        }

        .bc-action-dropdown-item {
            padding: 8px 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text);
            transition: background 0.15s;
        }

        .bc-action-dropdown-item:hover {
            background: var(--bg-hover);
        }

        .bc-action-dropdown-item.active {
            color: var(--accent-green);
            font-weight: 500;
        }

        .bc-action-dropdown-item i {
            width: 16px;
            text-align: center;
        }

        .bc-action-dropdown-divider {
            height: 1px;
            background: var(--border);
            margin: 6px 0;
        }

        .bc-action-dropdown-header {
            padding: 8px 16px 10px;
            font-weight: 600;
            font-size: 12px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 6px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 6px;
        }

        .bc-action-dropdown-item.danger {
            color: var(--accent-red);
        }

        .bc-action-dropdown-item.danger:hover {
            background: var(--bg-red-tint);
        }

        .bc-dropdown-input {
            width: 60px;
            padding: 4px 8px;
            border: 1px solid var(--border-dark);
            border-radius: 4px;
            font-size: 12px;
            margin-left: auto;
        }

        .bc-dropdown-input:focus {
            outline: none;
            border-color: var(--accent-green);
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
        }

        .bc-dropdown-btn {
            padding: 4px 8px;
            background: var(--accent-green);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
        }

        .bc-dropdown-btn:hover:not(:disabled) {
            background: var(--accent-green);
        }

        .bc-dropdown-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Project info panels for recurring/snoozed */
        .bc-project-info-panel {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 13px;
        }

        .bc-project-info-panel i {
            font-size: 16px;
        }

        .bc-project-info-panel.recurring {
            background: var(--bg-green-tint);
            border-color: var(--border-green-light);
            color: var(--badge-green-text);
        }

        .bc-project-info-panel.snoozed {
            background: var(--bg-amber-tint);
            border-color: var(--border-yellow-light);
            color: var(--badge-yellow-text);
        }

        .bc-project-info-panel a {
            color: inherit;
            text-decoration: underline;
            cursor: pointer;
        }

        .bc-project-info-panel a:hover {
            text-decoration: none;
        }

        /* Snoozed todos panel */
        .bc-snoozed-panel {
            background: var(--bg-amber-tint);
            border: 1px solid var(--border-yellow-light);
            border-radius: 8px;
            margin-bottom: 16px;
            overflow: hidden;
        }

        .bc-snoozed-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: var(--badge-yellow-bg);
            border-bottom: 1px solid var(--border-yellow-light);
        }

        .bc-snoozed-panel-header h3 {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: var(--badge-yellow-text);
        }

        .bc-snoozed-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .bc-snoozed-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-yellow-light);
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .bc-snoozed-item:last-child {
            border-bottom: none;
        }

        .bc-snoozed-title {
            color: var(--badge-yellow-text);
            font-weight: 500;
            text-decoration: none;
        }

        .bc-snoozed-title:hover {
            text-decoration: underline;
        }

        .bc-snoozed-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            color: var(--badge-yellow-text);
        }

        .btn-xs {
            padding: 2px 6px;
            font-size: 11px;
        }

        /* Real-time presence styles */
        .bc-active-user-card {
            background: var(--surface);
            border-radius: 8px;
            padding: 12px;
            border-left: 4px solid var(--accent-green);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
        }

        .bc-active-user-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .bc-todo-viewers {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 0;
        }

        .bc-todo-viewers-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid white;
            margin-left: -8px;
            object-fit: cover;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .bc-todo-viewers-avatar:first-child {
            margin-left: 0;
        }

        .bc-todo-viewers-initial {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid white;
            margin-left: -8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 600;
            color: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .bc-todo-viewers-initial:first-child {
            margin-left: 0;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Chat typing indicator animation */
        @keyframes typingBounce {
            0%, 80%, 100% {
                transform: scale(0.8);
                opacity: 0.4;
            }
            40% {
                transform: scale(1.2);
                opacity: 1;
            }
        }
        
        /* Chat message animations */
        @keyframes chatMessageSlideIn {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        @keyframes chatMessagePop {
            0% { transform: scale(0.8); opacity: 0; }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes chatReactionPop {
            0% { transform: scale(0); }
            50% { transform: scale(1.4); }
            100% { transform: scale(1); }
        }
        
        @keyframes chatFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes chatSlideUp {
            from { 
                opacity: 0; 
                transform: translateY(10px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        @keyframes chatPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        @keyframes chatShake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-3px); }
            75% { transform: translateX(3px); }
        }
        
        /* Apply animations to chat elements */
        .chat-message-enter {
            animation: chatMessageSlideIn 0.3s ease-out forwards;
        }
        
        .chat-message-bubble {
            animation: chatMessagePop 0.25s ease-out;
        }
        
        .chat-reaction-badge {
            animation: chatReactionPop 0.3s ease-out;
        }
        
        .chat-contact-item-enter {
            animation: chatSlideUp 0.2s ease-out;
        }
        
        .chat-typing-indicator {
            animation: chatPulse 1.5s ease-in-out infinite;
        }
        
        /* Chat contact hover effects */
        .bc-chat-contact-item {
            transition: all 0.15s ease;
        }
        
        .bc-chat-contact-item:hover {
            background: var(--bg-secondary) !important;
        }
        
        .bc-chat-contact-item.active {
            background: var(--bg-secondary) !important;
        }
        
        /* Chat scrollbar - slim, professional */
        #chatMessagesContainer::-webkit-scrollbar {
            width: 6px;
        }
        #chatMessagesContainer::-webkit-scrollbar-track {
            background: transparent;
        }
        #chatMessagesContainer::-webkit-scrollbar-thumb {
            background: var(--border-dark);
            border-radius: 3px;
        }
        #chatMessagesContainer::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }
        .bc-chat-sidebar::-webkit-scrollbar,
        .bc-chat-sidebar > div::-webkit-scrollbar {
            width: 5px;
        }
        .bc-chat-sidebar::-webkit-scrollbar-track,
        .bc-chat-sidebar > div::-webkit-scrollbar-track {
            background: transparent;
        }
        .bc-chat-sidebar::-webkit-scrollbar-thumb,
        .bc-chat-sidebar > div::-webkit-scrollbar-thumb {
            background: var(--border-dark);
            border-radius: 3px;
        }
        .bc-chat-sidebar::-webkit-scrollbar-thumb:hover,
        .bc-chat-sidebar > div::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }

        /* Chat extended features: mentions, pins, bookmarks */
        .chat-mention {
            background: rgba(37, 211, 102, 0.15);
            color: var(--accent-green);
            padding: 1px 4px;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
        }
        .chat-mention:hover {
            background: rgba(37, 211, 102, 0.25);
        }
        .chat-pinned-bar {
            transition: background 0.15s ease;
        }
        .chat-pinned-bar:hover {
            filter: brightness(1.05);
        }
        .chat-bookmark-icon {
            transition: color 0.15s ease, transform 0.15s ease;
        }
        .chat-bookmark-icon:hover {
            transform: scale(1.15);
        }
        .chat-poll-option {
            transition: border-color 0.15s ease, background 0.15s ease;
        }
        .chat-poll-option:hover {
            border-color: var(--accent-green) !important;
        }

        /* Chat sidebar responsive */
        @media (max-width: 768px) {
            .bc-chat-sidebar {
                width: 100% !important;
                max-width: 100% !important;
            }
            .bc-chat-resize-handle {
                display: none !important;
            }
        }

        /* Chat images - prevent overflow */
        #chatMessagesContainer img,
        #chatMessagesContainer video {
            max-width: 100% !important;
            height: auto !important;
        }
        
        @media (max-width: 768px) {
            #chatMessagesContainer img,
            #chatMessagesContainer video {
                max-width: calc(100vw - 100px) !important;
                max-height: 250px !important;
            }
        }

        .bc-todo-viewers-bar {
            display: flex;
            align-items: center;
            padding: 8px 16px;
            background: var(--bg-blue-tint);
            border: 1px solid var(--border-blue-light);
            border-radius: 8px;
            margin-bottom: 12px;
            animation: fadeIn 0.3s ease;
        }
        
        /* Checkbox - Basecamp style square */
        .bc-todo-checkbox {
            width: 18px;
            height: 18px;
            border: 2px solid var(--border-dark);
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.15s;
            background: var(--surface);
        }
        
        .bc-todo-checkbox:hover {
            border-color: var(--border-green-light);
        }
        
        .bc-todo-item.completed .bc-todo-checkbox {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
            color: var(--text-on-primary);
            font-size: 11px;
        }
        
        /* Status badge (used when kanban mode is ON) */
        .bc-todo-status-badge {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.15s;
            color: white;
            font-size: 10px;
            text-decoration: none;
        }
        
        .bc-todo-status-badge:hover {
            opacity: 0.85;
            transform: scale(1.05);
        }
        
        /* Custom fields in todo list */
        .bc-todo-custom-fields {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            font-size: 11px;
            grid-column: 1 / -1;
            margin-top: 4px;
            padding-top: 4px;
            border-top: 1px dashed var(--border);
        }
        
        .bc-todo-custom-field {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: var(--bg-hover);
            padding: 2px 6px;
            border-radius: 4px;
            color: var(--text-secondary);
            transition: background 0.2s, color 0.2s;
        }
        
        /* When colored, inherit text */
        .bc-todo-custom-field[style*="background"] {
            color: inherit;
        }
        
        .bc-todo-custom-field[style*="background"] .bc-cf-label,
        .bc-todo-custom-field[style*="background"] .bc-cf-value {
            color: inherit;
        }
        
        .bc-todo-custom-field[style*="background"] .bc-cf-label {
            opacity: 0.85;
        }
        
        .bc-cf-label {
            font-weight: 500;
            color: var(--text);
        }
        
        .bc-cf-value {
            color: var(--text);
        }
        
        /* View Toggle Buttons */
        .bc-view-toggle {
            display: flex;
            gap: 0;
            border: 1px solid var(--border-dark);
            border-radius: 6px;
            overflow: hidden;
            margin-right: 12px;
        }
        
        .bc-view-toggle-btn {
            padding: 6px 10px;
            border: none;
            background: var(--surface);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s;
            font-size: 14px;
        }
        
        .bc-view-toggle-btn:not(:last-child) {
            border-right: 1px solid var(--border-dark);
        }
        
        .bc-view-toggle-btn:hover {
            background: var(--bg-hover);
        }
        
        .bc-view-toggle-btn.active {
            background: var(--accent-blue);
            color: white;
        }
        
        /* Kanban Board Styles */
        .bc-kanban-board {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding: 16px 0;
            min-height: 400px;
        }
        
        .bc-kanban-column {
            flex: 1 1 280px;
            min-width: 280px;
            max-width: 400px;
            background: var(--bg);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            max-height: calc(100vh - 300px);
        }
        
        /* When 3 or fewer columns, let them fill the width */
        .bc-kanban-board.bc-kanban-few-columns .bc-kanban-column {
            flex: 1 1 280px;
            max-width: none;
        }
        
        .bc-kanban-column-unassigned {
            background: var(--badge-yellow-bg);
            border: 1px dashed var(--accent-yellow);
        }
        
        .bc-kanban-column-unassigned .bc-kanban-column-header {
            background: var(--badge-yellow-bg);
        }
        
        .bc-kanban-column-header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 8px;
            position: sticky;
            top: 0;
            background: var(--bg);
            border-radius: 8px 8px 0 0;
        }
        
        .bc-kanban-status-dot {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            flex-shrink: 0;
        }
        
        .bc-kanban-column-title {
            font-weight: 600;
            font-size: 14px;
            color: var(--text);
            flex: 1;
        }
        
        .bc-kanban-column-count {
            background: var(--border);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .bc-kanban-column-body {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-kanban-card {
            background: var(--surface);
            border-radius: 6px;
            padding: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            cursor: grab;
            transition: all 0.15s;
            border-left: 3px solid transparent;
            user-select: none;
            -webkit-user-select: none;
        }
        
        .bc-kanban-card:active {
            cursor: grabbing;
        }
        
        .bc-kanban-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transform: translateY(-2px);
        }
        
        .bc-kanban-card.dragging {
            opacity: 0.5;
            transform: rotate(3deg);
        }
        
        .bc-kanban-card.completed {
            background: var(--bg);
        }
        
        .bc-kanban-card.completed .bc-kanban-card-title {
            text-decoration: line-through;
            color: var(--text-muted);
        }
        
        .bc-kanban-card-header {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            margin-bottom: 8px;
        }
        
        .bc-kanban-drag-handle {
            cursor: grab;
            opacity: 0.3;
            padding: 2px;
            color: var(--text-muted);
            flex-shrink: 0;
            margin-top: 2px;
        }
        
        .bc-kanban-card:hover .bc-kanban-drag-handle {
            opacity: 1;
        }
        
        .bc-kanban-drag-handle:active {
            cursor: grabbing;
        }
        
        .bc-kanban-card-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text);
            text-decoration: none;
            display: block;
            flex: 1;
        }
        
        .bc-kanban-card-title:hover {
            color: var(--accent-blue);
        }
        
        .bc-kanban-card-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .bc-kanban-card-assignee {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-kanban-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            font-size: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }
        
        .bc-kanban-card-list {
            color: var(--text-muted);
            font-size: 11px;
        }
        
        .bc-kanban-card-custom-fields {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed var(--border);
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        
        .bc-kanban-cf-tag {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: var(--bg-hover);
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 10px;
            color: var(--text-secondary);
            transition: background 0.2s, color 0.2s;
        }
        
        /* When colored, inherit text */
        .bc-kanban-cf-tag[style*="background"] {
            color: inherit;
        }
        
        .bc-kanban-cf-tag[style*="background"] .bc-kanban-cf-label {
            color: inherit;
            opacity: 0.85;
        }
        
        .bc-kanban-cf-label {
            font-weight: 500;
        }
        
        .bc-kanban-empty {
            text-align: center;
            padding: 24px 16px;
            color: var(--text-muted);
            font-size: 13px;
        }
        
        /* Status Manager Sortable Ghost */
        .bc-status-ghost {
            opacity: 0.4;
            background: var(--badge-blue-bg);
        }
        
        /* Drag handle hover effect */
        .bc-custom-field-drag:hover {
            color: var(--primary) !important;
        }
        
        .bc-custom-field-item {
            display: flex !important;
            align-items: center !important;
            flex-direction: row !important;
            transition: box-shadow 0.15s ease;
        }
        
        .bc-custom-field-item:hover {
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .bc-custom-field-required-empty {
            border: 1px solid var(--accent-yellow) !important;
            background: var(--bg-amber-tint) !important;
        }
        
        .bc-custom-field-required-empty input {
            border-color: var(--border-yellow-light) !important;
        }
        
        /* Kanban Add Todo */
        .bc-kanban-add-todo {
            padding: 12px 16px;
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            border-top: 1px dashed var(--border);
            margin-top: 8px;
            transition: all 0.15s ease;
        }
        
        .bc-kanban-add-todo:hover {
            color: var(--accent-blue);
            background: var(--bg);
        }
        
        .bc-kanban-add-todo i {
            margin-right: 6px;
        }
        
        .bc-kanban-add-form {
            padding: 12px;
            background: var(--bg);
            border-radius: 6px;
            margin-top: 8px;
            border: 1px solid var(--border);
        }
        
        .bc-kanban-add-input {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--border-dark);
            border-radius: 4px;
            font-size: 13px;
            margin-bottom: 8px;
        }
        
        .bc-kanban-add-input:focus {
            outline: none;
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
        }
        
        .bc-kanban-add-field {
            margin-bottom: 8px;
            position: relative;
        }
        
        .bc-kanban-add-label {
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            display: block;
            margin-bottom: 4px;
        }
        
        .bc-kanban-add-value {
            font-size: 13px;
            color: var(--text);
            cursor: pointer;
            padding: 4px 0;
            display: block;
        }
        
        .bc-kanban-add-value:hover {
            color: var(--accent-blue);
        }
        
        .bc-kanban-add-value .bc-placeholder {
            color: var(--text-muted);
            font-style: italic;
        }
        
        .bc-kanban-add-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 4px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 100;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .bc-kanban-add-dropdown-item {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 13px;
        }
        
        .bc-kanban-add-dropdown-item:hover {
            background: var(--bg-hover);
        }
        
        .bc-kanban-add-actions {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        
        .bc-kanban-drag-handle {
            cursor: grab;
            opacity: 0.4;
            padding: 2px 4px;
            color: var(--text-muted);
        }
        
        .bc-kanban-card:hover .bc-kanban-drag-handle {
            opacity: 1;
        }
        
        /* Kanban priority badge */
        .bc-kanban-priority {
            width: 18px;
            height: 18px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: white;
        }
        
        .bc-kanban-priority.bc-priority-low { background: var(--text-muted); color: white; }
        .bc-kanban-priority.bc-priority-normal { background: var(--accent-blue); color: white; }
        .bc-kanban-priority.bc-priority-high { background: var(--accent-yellow); color: white; }
        .bc-kanban-priority.bc-priority-critical { background: var(--accent-red); color: white; }
        
        /* Kanban tags */
        .bc-kanban-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 6px;
        }
        
        .bc-kanban-tag {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
            font-weight: 500;
        }
        
        /* Kanban checklist progress - Trello style */
        .bc-kanban-checklist {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: var(--border);
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 11px;
            color: var(--text-secondary);
        }
        
        .bc-kanban-checklist.bc-checklist-done {
            background: var(--accent-green-light);
            color: var(--accent-green);
        }
        
        .bc-kanban-checklist i {
            font-size: 10px;
        }
        
        /* Sortable ghost for kanban reorder */
        .bc-kanban-card.sortable-ghost {
            opacity: 0.4;
            background: var(--bg-hover);
        }
        
        .bc-kanban-card.sortable-chosen {
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        /* Todo title - Basecamp style */
        .bc-todo-title {
            font-size: 15px;
            font-weight: 400;
            color: var(--text);
            flex: 1;
            min-width: 0;
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.4;
        }
        
        .bc-todo-link {
            text-decoration: none;
            color: inherit;
        }
        
        .bc-todo-link:hover {
            color: var(--primary);
        }
        
        /* Inline meta container */
        .bc-todo-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            margin-left: auto;
            flex-shrink: 0;
        }
        
        .bc-todo-meta-item {
            display: flex;
            align-items: center;
            gap: 3px;
            white-space: nowrap;
        }
        
        /* Comments badge - purple like Basecamp */
        .bc-todo-meta-item.comments {
            background: var(--accent-purple);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
            min-width: 20px;
            text-align: center;
        }
        
        /* Time tracked - plain text like Basecamp */
        .bc-todo-meta-item.time-badge {
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 400;
            padding: 0;
            background: none;
        }
        
        /* Due date badge - red/orange icon like Basecamp */
        .bc-todo-meta-item.due-badge {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            font-weight: 400;
            color: var(--text);
            background: none;
            padding: 0;
        }

        .bc-todo-meta-item.due-badge.no-date {
            opacity: 0.15;
            transition: opacity 0.2s;
        }

        .bc-todo-meta-item.due-badge.no-date:hover {
            opacity: 1;
        }

        .bc-todo-date-input {
            background: transparent;
            border: none;
            color: inherit;
            font-size: inherit;
            font-family: inherit;
            padding: 0;
            cursor: pointer;
            outline: none;
            width: 110px;
            min-height: 1.2em;
        }

        .bc-todo-date-input:empty::before {
            content: 'Set date';
            opacity: 0.5;
        }

        .bc-todo-date-input::-webkit-calendar-picker-indicator {
            display: none;
        }

        .bc-todo-date-input:hover {
            text-decoration: underline;
        }
        
        .bc-todo-meta-item.due-badge .due-icon {
            width: 18px;
            height: 18px;
            background: var(--accent-orange);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            line-height: 1;
        }
        
        .bc-todo-meta-item.due-badge.overdue .due-icon {
            background: var(--accent-red);
        }
        
        /* Play button for timer - Basecamp style */
        .bc-todo-play {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--border);
            color: var(--text-secondary);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            transition: all 0.15s;
            flex-shrink: 0;
        }
        
        .bc-todo-play:hover {
            background: var(--accent-green);
            color: white;
            transform: scale(1.05);
        }

        .bc-todo-play.is-running {
            background: var(--badge-red-bg);
            color: var(--accent-red);
            animation: pulse-red 2s infinite;
        }

        .bc-todo-play.is-blocked {
            color: var(--text-muted);
            opacity: 0.4;
            cursor: not-allowed;
        }

        .bc-todo-play.is-blocked:hover {
            color: var(--text-muted);
            opacity: 0.5;
            background: none;
            transform: none;
        }

        @keyframes pulse-red {
            0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
            70% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
            100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
        }
        
        .bc-todo-play.active {
            background: var(--accent-green);
            color: white;
        }
        
        /* Assignee avatars at the end - like Basecamp */
        .bc-todo-assignees {
            display: flex;
            flex-shrink: 0;
            margin-left: 4px;
        }
        
        .bc-todo-assignees .bc-avatar {
            width: 24px;
            height: 24px;
            font-size: 10px;
            margin-left: -6px;
            border: 2px solid white;
        }
        
        .bc-todo-assignees .bc-avatar:first-child {
            margin-left: 0;
        }
        
        .bc-todo-meta-item.due {
            color: var(--accent-orange);
        }
        
        .bc-todo-meta-item.overdue {
            color: var(--accent-red);
        }
        
        .bc-todo-assignees {
            display: flex;
            gap: -4px;
            margin-left: auto;
        }
        
        .bc-todo-assignees .bc-avatar {
            margin-left: -4px;
            border: 2px solid var(--surface);
        }
        
        /* Avatar wrapper with group dot */
        .bc-avatar-wrapper {
            position: relative;
            display: inline-block;
        }
        
        .bc-avatar-group-dot {
            position: absolute;
            bottom: -2px;
            right: -2px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid white;
        }
        
        .bc-dot-yellow { background: var(--accent-yellow); }
        .bc-dot-green { background: var(--accent-green); }
        .bc-dot-blue { background: var(--accent-blue); }
        .bc-dot-pink { background: var(--accent-pink); }
        .bc-dot-orange { background: var(--accent-orange); }
        .bc-dot-purple { background: var(--accent-purple); }
        .bc-dot-teal { background: var(--accent-teal); }
        .bc-dot-red { background: var(--accent-red); }
        .bc-dot-gray { background: var(--text-secondary); }
        
        /* ===== ADD TODO ===== */
        .bc-add-todo {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 12px;
            padding-left: 76px; /* Align with checkbox: 12px padding + 24px + 8px + 24px + 8px = 76px */
            cursor: pointer;
            margin-top: 2px;
        }
        
        .bc-add-todo:hover .bc-add-todo-icon {
            background: var(--accent-green);
        }
        
        .bc-add-todo:hover .bc-add-todo-text {
            color: var(--accent-green);
        }

        .bc-add-todo-icon {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--accent-green);
            color: var(--text-on-primary) !important;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s;
        }
        
        .bc-add-todo-text {
            font-size: 14px;
            font-weight: 500;
            color: var(--accent-green);
            transition: color 0.15s;
        }

        .bc-add-todo-pill {
            background: var(--accent-blue);
            color: white;
            padding: 2px 10px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 11px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .bc-add-todo-pill::before {
            content: '+';
            font-size: 16px;
            font-weight: 400;
        }

        .bc-add-todo:hover .bc-add-todo-pill {
            background: var(--primary);
        }

        /* ===== ARCHIVING ===== */
        .bc-list-archive-btn, .bc-todo-archive-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            font-size: 12px;
            opacity: 0;
            transition: all 0.15s;
        }

        .bc-list:hover .bc-list-archive-btn,
        .bc-todo-item:hover .bc-todo-archive-btn {
            opacity: 1;
        }

        .bc-list-archive-btn:hover, .bc-todo-archive-btn:hover {
            color: var(--accent-red);
        }

        .bc-archived-items-link {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
            text-align: center;
        }

        .bc-archived-items-link a {
            color: var(--text-secondary);
            font-size: 13px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .bc-archived-items-link a:hover {
            color: var(--accent-blue);
        }

        .bc-archived-section {
            margin-top: 20px;
            background: var(--bg);
            border-radius: 8px;
            padding: 16px;
            border: 1px dashed var(--border-dark);
        }

        .bc-archived-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 12px;
        }

        .bc-archived-empty {
            font-size: 13px;
            color: var(--text-muted);
            text-align: center;
            padding: 12px;
        }

        .bc-archived-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 6px;
            margin-bottom: 8px;
        }

        .bc-archived-item-name {
            font-size: 13px;
            color: var(--text);
        }

        .bc-archived-item-name:hover {
            color: var(--accent-blue);
        }

        .bc-archived-restore-btn {
            background: transparent;
            border: none;
            color: var(--accent-blue);
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .bc-archived-restore-btn:hover {
            text-decoration: underline;
        }

        .bc-archived-list-block {
            margin-bottom: 4px;
        }

        .bc-archived-list-todos {
            margin: 2px 0 8px 12px;
            padding: 4px 0 4px 10px;
            border-left: 2px solid var(--border);
            max-height: 180px;
            overflow-y: auto;
            scrollbar-width: thin;
        }

        .bc-archived-list-todos::-webkit-scrollbar {
            width: 5px;
        }

        .bc-archived-list-todo-item {
            display: flex;
            align-items: center;
            padding: 1px 6px;
            font-size: 11px;
            color: var(--text-muted);
            line-height: 1.5;
            border-radius: 4px;
            transition: background 0.15s;
        }

        .bc-archived-list-todo-item:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .bc-archived-list-todo-item.is-completed span {
            text-decoration: line-through;
            opacity: 0.5;
        }
        
        .bc-add-todo-icon {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-muted);
        }
        
        .bc-add-todo-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 14px;
            font-family: inherit;
            color: var(--text);
            outline: none;
            padding: 4px 0;
        }
        
        .bc-add-todo-input::placeholder {
            color: var(--text-muted);
        }
        
        /* Inline todo form - Basecamp style */
        .bc-inline-todo-form {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 16px;
            border-left: 3px solid var(--primary);
            position: relative;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        
        .bc-inline-todo-form.bc-form-drag-over {
            border-color: var(--accent-green, #10b981);
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25), inset 0 0 40px rgba(16, 185, 129, 0.03);
        }
        
        .bc-form-drop-overlay {
            position: absolute;
            inset: 0;
            background: rgba(16, 185, 129, 0.08);
            border: 2px dashed var(--accent-green, #10b981);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            z-index: 10;
            pointer-events: none;
            color: var(--accent-green, #10b981);
            font-size: 15px;
            font-weight: 600;
        }
        
        .bc-form-drop-overlay i {
            font-size: 28px;
            opacity: 0.9;
        }
        
        /* Upload progress bar */
        .bc-upload-progress {
            margin-top: 10px;
            padding: 10px 12px;
            background: var(--bg-secondary, #f8f9fa);
            border-radius: 6px;
            border: 1px solid var(--border);
        }
        
        .bc-upload-progress-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--primary);
            font-weight: 500;
            margin-bottom: 6px;
        }
        
        .bc-upload-progress-header i {
            font-size: 12px;
        }
        
        .bc-upload-progress-bar {
            height: 4px;
            background: var(--border, #e2e8f0);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .bc-upload-progress-fill {
            height: 100%;
            background: var(--primary, #4f7942);
            border-radius: 4px;
            transition: width 0.3s ease;
            min-width: 2%;
        }
        
        .bc-inline-todo-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .bc-todo-checkbox-inline {
            display: none; /* Hide checkbox to give more space */
        }
        
        .bc-inline-todo-title {
            flex: 1;
            width: 100%;
            border: none;
            font-size: 16px;
            font-weight: 500;
            outline: none;
            padding: 8px 0;
            border-bottom: 2px solid var(--border);
        }
        
        .bc-inline-todo-title:focus {
            border-bottom-color: var(--primary);
        }
        
        .bc-inline-todo-title::placeholder {
            color: var(--text-muted);
            font-weight: 400;
        }
        
        /* Validation error state for inline todo */
        .bc-inline-todo-title.bc-validation-error {
            border-bottom-color: var(--accent-red, #dc3545) !important;
            background: rgba(220, 53, 69, 0.15) !important;
            box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.3), 0 0 8px rgba(220, 53, 69, 0.2);
            animation: bcInputShake 0.5s ease-in-out, bcInputPulse 1s ease-in-out;
        }
        
        .bc-inline-assignee-trigger.bc-validation-error {
            border: 2px solid var(--accent-red, #dc3545) !important;
            background: rgba(220, 53, 69, 0.15) !important;
            border-radius: 6px;
            box-shadow: 0 0 8px rgba(220, 53, 69, 0.3);
            animation: bcInputShake 0.5s ease-in-out, bcInputPulse 1s ease-in-out;
        }
        
        @keyframes bcInputShake {
            0%, 100% { transform: translateX(0); }
            10% { transform: translateX(-8px); }
            20% { transform: translateX(8px); }
            30% { transform: translateX(-6px); }
            40% { transform: translateX(6px); }
            50% { transform: translateX(-4px); }
            60% { transform: translateX(4px); }
            70% { transform: translateX(-2px); }
            80% { transform: translateX(2px); }
            90% { transform: translateX(-1px); }
        }
        
        @keyframes bcInputPulse {
            0% { background: rgba(220, 53, 69, 0.25); }
            50% { background: rgba(220, 53, 69, 0.1); }
            100% { background: rgba(220, 53, 69, 0.15); }
        }
        
        /* Dark theme adjustments */
        [data-theme="dark"] .bc-inline-todo-title.bc-validation-error,
        [data-theme="dark"] .bc-inline-assignee-trigger.bc-validation-error {
            background: rgba(220, 53, 69, 0.25) !important;
            box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.4), 0 0 12px rgba(220, 53, 69, 0.3);
        }
        
        /* Todo Autosuggest Dropdown */
        .bc-todo-title-wrapper {
            position: relative;
        }
        
        .bc-todo-suggestions-dropdown {
            position: absolute;
            bottom: 100%;  /* Show ABOVE the input */
            left: 0;
            right: 0;
            margin-bottom: 4px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.12);
            z-index: 1000;
            max-height: 180px;
            overflow-y: auto;
        }
        
        /* Compact dropdown styles */
        .bc-todo-suggestions-dropdown.bc-compact {
            max-height: 150px;
            border-radius: 6px;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .bc-suggestion-warning-compact {
            padding: 6px 10px;
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
            font-size: 12px;
            border-bottom: 1px solid #fcd34d;
        }
        .bc-suggestion-warning-compact i { color: var(--accent-yellow); margin-right: 6px; }
        
        .bc-suggestion-loading-compact {
            padding: 8px 10px;
            text-align: center;
            color: var(--text-muted);
            font-size: 12px;
        }
        
        .bc-suggestion-compact {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 13px;
            border-bottom: 1px solid var(--border-light);
            transition: background 0.15s;
        }
        .bc-suggestion-compact:last-child { border-bottom: none; }
        .bc-suggestion-compact:hover { background: var(--bg-blue-tint); }
        .bc-suggestion-compact.bc-completed { color: var(--text-muted); text-decoration: line-through; }
        .bc-suggestion-compact.bc-suggestion-default { 
            background: var(--bg-amber-tint); 
            font-weight: 500;
        }
        .bc-suggestion-compact.bc-suggestion-default:hover { background: var(--badge-yellow-bg); }
        .bc-suggestion-compact.bc-suggestion-default i { color: var(--accent-yellow); margin-right: 6px; font-size: 11px; }
        
        .bc-suggestion-warning {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: var(--bg-amber-tint);
            border-bottom: 1px solid var(--accent-yellow);
            color: var(--badge-yellow-text);
            font-size: 13px;
        }
        
        .bc-suggestion-warning i {
            color: var(--accent-yellow);
        }
        
        .bc-suggestion-loading {
            padding: 12px;
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
        }
        
        .bc-suggestion-header {
            padding: 8px 12px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--text-muted);
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-suggestion-header i {
            font-size: 10px;
        }
        
        .bc-suggestion-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            cursor: pointer;
            transition: background 0.15s;
            border-bottom: 1px solid var(--border-light);
        }
        
        .bc-suggestion-item:last-child {
            border-bottom: none;
        }
        
        .bc-suggestion-item:hover {
            background: var(--bg-hover);
        }
        
        .bc-suggestion-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            flex-shrink: 0;
        }
        
        .bc-suggestion-default-task .bc-suggestion-icon {
            background: var(--bg-amber-tint);
            color: var(--accent-yellow);
        }
        
        .bc-suggestion-existing .bc-suggestion-icon {
            background: var(--badge-indigo-bg);
            color: var(--accent-indigo);
        }
        
        .bc-suggestion-completed .bc-suggestion-icon {
            background: var(--accent-green-light);
            color: var(--accent-green);
        }
        
        .bc-suggestion-content {
            flex: 1;
            min-width: 0;
        }
        
        .bc-suggestion-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-suggestion-completed .bc-suggestion-title {
            text-decoration: line-through;
            color: var(--text-muted);
        }
        
        .bc-suggestion-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 2px;
            font-size: 12px;
            color: var(--text-muted);
        }
        
        .bc-suggestion-category {
            background: var(--border);
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 11px;
        }
        
        .bc-suggestion-time {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-suggestion-time i {
            font-size: 10px;
        }
        
        .bc-suggestion-list {
            background: var(--badge-blue-bg);
            color: var(--badge-blue-text);
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 11px;
        }
        
        .bc-suggestion-status.bc-done {
            background: var(--accent-green-light);
            color: var(--accent-green);
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 11px;
        }
        
        .bc-suggestion-action {
            flex-shrink: 0;
        }
        
        .bc-suggestion-use,
        .bc-suggestion-goto {
            font-size: 12px;
            font-weight: 500;
            color: var(--primary);
            opacity: 0;
            transition: opacity 0.15s;
        }
        
        .bc-suggestion-item:hover .bc-suggestion-use,
        .bc-suggestion-item:hover .bc-suggestion-goto {
            opacity: 1;
        }
        
        .bc-suggestion-empty {
            padding: 16px;
            text-align: center;
            color: var(--accent-green);
            font-size: 13px;
        }
        
        .bc-suggestion-empty i {
            margin-right: 6px;
        }
        
        .bc-inline-todo-fields {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-left: 32px;
            padding-left: 12px;
            border-left: 1px solid var(--border);
        }
        
        .bc-inline-field {
            display: grid;
            grid-template-columns: 120px 1fr;
            align-items: start;
            gap: 8px;
            position: relative;
        }
        
        .bc-inline-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
            text-align: right;
            padding-top: 4px;
        }
        
        .bc-inline-value {
            font-size: 14px;
            color: var(--text-secondary);
            cursor: pointer;
        }
        
        .bc-inline-value .bc-placeholder {
            color: var(--text-muted);
            font-style: italic;
        }
        
        .bc-inline-date {
            border: none;
            font-size: 14px;
            color: var(--text);
            background: transparent;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
        }
        
        .bc-inline-date:hover {
            background: var(--bg-hover);
        }
        
        .bc-inline-date-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-date-shortcuts {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        
        .bc-date-shortcuts .btn-xs {
            padding: 2px 6px;
            font-size: 11px;
        }
        
        .bc-inline-assignee-trigger {
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            outline: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-inline-assignee-trigger:hover,
        .bc-inline-assignee-trigger:focus {
            background: var(--bg-hover);
        }
        
        .bc-inline-notes {
            width: 100%;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 14px;
            padding: 10px;
            resize: vertical;
            font-family: inherit;
            min-height: 80px;
        }
        
        .bc-inline-notes:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .bc-inline-dropdown {
            position: absolute;
            left: 120px;
            top: 100%;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 100;
            min-width: 200px;
            max-height: 350px;
            overflow-y: auto;
        }
        
        .bc-inline-dropdown-item {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-inline-dropdown-item:hover {
            background: var(--bg-hover);
        }
        
        .bc-inline-dropdown-item .bc-avatar {
            flex-shrink: 0;
        }
        
        /* Multi-select assignee dropdown */
        .bc-multi-select-dropdown .bc-inline-dropdown-item {
            justify-content: flex-start;
            gap: 10px;
        }
        
        .bc-multi-select-dropdown .bc-inline-dropdown-item .bc-checkbox-indicator {
            order: -1;
        }
        
        .bc-checkbox-indicator {
            width: 16px;
            height: 16px;
            border: 2px solid var(--border);
            border-radius: 3px;
            background: var(--surface);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .bc-checkbox-indicator.checked {
            background: var(--accent-green);
            border-color: var(--accent-green);
            color: white;
        }
        
        .bc-checkbox-indicator i {
            font-size: 10px;
        }
        
        .bc-assignee-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        
        .bc-assignee-chip-name {
            font-size: 12px;
            line-height: 1;
        }
        
        .bc-assignee-chip-remove {
            background: none;
            border: none;
            padding: 0;
            margin-left: 2px;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            transition: all 0.15s;
        }
        
        .bc-assignee-chip-remove:hover {
            background: rgba(0,0,0,0.1);
            color: var(--text-primary);
        }
        
        .bc-dropdown-actions {
            border-top: 1px solid var(--border);
            padding: 8px;
            display: flex;
            justify-content: flex-end;
        }
        
        .bc-dropdown-search {
            padding: 8px;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            background: var(--surface);
            z-index: 1;
        }
        
        .bc-dropdown-search input {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 13px;
            background: var(--input-bg);
        }
        
        .bc-dropdown-search input:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .bc-dropdown-list {
            overflow-y: auto;
            max-height: 280px;
        }
        
        .bc-inline-dropdown-footer {
            border-top: 1px solid var(--border);
            padding: 8px;
            display: flex;
            justify-content: flex-end;
            position: sticky;
            bottom: 0;
            background: var(--surface);
        }
        
        .bc-add-more-assignees {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--border);
            color: var(--text-secondary);
            font-size: 10px;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .bc-add-more-assignees:hover {
            background: var(--primary);
            color: white;
        }
        
        .bc-inline-todo-actions {
            display: flex;
            gap: 8px;
            margin-top: 16px;
            margin-left: 32px;
        }

        /* ===== COMPLETED SECTION ===== */
        .bc-completed-toggle {
            padding: 8px 12px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: 38px;
        }
        
        .bc-completed-toggle:hover {
            color: var(--accent-blue);
        }
        
        /* Completed todos section at bottom */
        .bc-completed-list {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed var(--border);
            opacity: 0.7;
        }
        
        .bc-completed-list .bc-todo-item {
            background: var(--surface);
        }
        
        /* ===== SHARE URL BOX ===== */
        .bc-share-url {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--bg-secondary);
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--border);
        }
        
        .bc-share-label {
            font-size: 12px;
            color: var(--text-secondary);
            white-space: nowrap;
        }
        
        .bc-share-input {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 6px 10px;
            font-size: 12px;
            color: var(--text);
            min-width: 300px;
            cursor: pointer;
        }
        
        .bc-share-input:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        /* ===== TODO LINK STYLE ===== */
        .bc-todo-link {
            color: inherit;
            text-decoration: none;
        }
        
        .bc-todo-link:hover {
            color: var(--primary);
            text-decoration: underline;
        }
        
        /* ===== TODO DETAIL VIEW ===== */
        .bc-todo-detail {
            padding: 24px;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .bc-todo-detail-card {
            background: var(--surface);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border);
            padding: 24px;
        }
        
        /* ===== BREADCRUMB BAR ===== */
        .bc-breadcrumb-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 24px;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
        }
        
        .bc-breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .bc-breadcrumb a {
            color: var(--primary);
            text-decoration: underline;
            cursor: pointer;
        }
        
        .bc-breadcrumb-sep {
            color: var(--text-muted);
        }
        
        .bc-header-actions {
            display: flex;
            gap: 8px;
        }
        
        /* ===== CLIENT BANNER ===== */
        .bc-client-banner {
            background: var(--client-banner-bg);
            color: var(--badge-yellow-text);
            padding: 10px 24px;
            font-size: 14px;
            border: 1px solid var(--client-banner-border);
            border-radius: 8px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-client-banner::before {
            content: '👁';
        }
        
        .bc-client-banner a {
            color: var(--badge-yellow-text);
            text-decoration: underline;
            font-weight: 500;
        }
        
        /* ===== CLIENT BADGE (Basecamp yellow) ===== */
        .bc-list-client-badge {
            background: var(--client-badge-bg);
            color: var(--client-badge-text);
            font-size: 12px;
            padding: 4px 12px;
            border-radius: 12px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }
        
        .bc-list-client-badge::before {
            content: '👁';
            font-size: 11px;
        }
        
        /* ===== TODO DETAIL (Basecamp style) ===== */
        .bc-todo-detail {
            max-width: 700px;
            margin: 40px auto;
            padding: 0 24px;
        }
        
        .bc-todo-detail-card {
            background: var(--surface);
            border-radius: var(--radius-lg);
            padding: 32px;
            box-shadow: var(--shadow);
        }
        
        .bc-todo-detail-header {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 20px;
        }
        
        .bc-todo-detail-header h1 {
            font-size: 28px;
            font-weight: 600;
            margin: 0;
            line-height: 1.3;
        }
        
        .bc-todo-detail-header h1.completed {
            text-decoration: line-through;
            color: var(--text-secondary);
        }
        
        .bc-todo-checkbox-lg {
            width: 28px;
            height: 28px;
            min-width: 28px;
            border: 2px solid var(--border-dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-on-primary);
            margin-top: 4px;
        }
        
        .bc-todo-checkbox-lg:hover {
            border-color: var(--primary);
        }
        
        .bc-todo-checkbox-lg.checked {
            background: var(--accent-green);
            border-color: var(--accent-green);
        }
        
        .bc-todo-timer-btn {
            margin-bottom: 24px;
        }
        
        .btn-timer {
            background: var(--accent-green);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
        }
        
        .btn-timer:hover {
            background: var(--accent-green);
        }
        
        .bc-todo-detail-grid {
            display: flex;
            flex-direction: column;
            gap: 16px;
            border-top: 1px solid var(--border);
            padding-top: 20px;
        }
        
        .bc-todo-detail-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        
        .bc-todo-detail-label {
            font-weight: 600;
            color: var(--text);
            min-width: 120px;
            text-align: right;
            font-size: 13px;
        }
        
        .bc-todo-detail-value {
            color: var(--text);
            font-size: 14px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .bc-assignee-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-green-tint);
            padding: 4px 10px 4px 4px;
            border-radius: 16px;
            font-size: 13px;
        }
        
        .bc-text-muted {
            color: var(--text-muted);
            font-style: italic;
        }
        
        .bc-overdue {
            color: var(--accent-red) !important;
        }
        
	        .bc-todo-added-by {
	            margin-top: 24px;
	            padding-top: 16px;
	            border-top: 1px solid var(--border);
	            font-size: 12px;
	            color: var(--text-secondary);
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            gap: 12px;
	            position: relative;
	        }
        
        /* ===== INLINE EDITING ===== */
        .bc-inline-editable {
            cursor: pointer;
            padding: 4px 8px;
            margin: -4px -8px;
            border-radius: 4px;
            transition: background 0.15s;
            min-height: 28px;
            display: flex;
            align-items: center;
        }
        
        .bc-inline-editable:hover {
            background: var(--bg);
        }
        
        .bc-inline-editable .edit-icon {
            opacity: 0;
            margin-left: 8px;
            color: var(--text-secondary);
            font-size: 12px;
            transition: opacity 0.15s;
        }
        
        .bc-inline-editable:hover .edit-icon {
            opacity: 1;
        }
        
        .bc-inline-edit-form {
            flex: 1;
        }
        
        .bc-inline-edit-form input,
        .bc-inline-edit-form select {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 14px;
            font-family: inherit;
            background: var(--surface);
            color: var(--text);
        }
        
        .bc-inline-edit-form input:focus,
        .bc-inline-edit-form select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.1);
        }
        
        .bc-inline-edit-actions {
            display: flex;
            gap: 4px;
            margin-top: 6px;
        }
        
        .bc-inline-edit-actions .btn {
            padding: 4px 8px;
            font-size: 11px;
        }
        
        .bc-inline-edit-actions .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .bc-inline-edit-actions .btn-secondary {
            background: var(--bg);
            border: 1px solid var(--border);
        }
        
        .bc-title-editable {
            cursor: pointer;
            padding: 4px 8px;
            margin: -4px -8px;
            border-radius: 4px;
            transition: background 0.15s;
        }
        
        .bc-title-editable:hover {
            background: var(--bg);
        }
        
        .bc-title-edit-input {
            width: 100%;
            font-size: 24px;
            font-weight: 700;
            border: 1px solid var(--primary);
            border-radius: 4px;
            padding: 8px 12px;
            font-family: inherit;
        }
        
        .bc-title-edit-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.2);
        }
        
        .bc-notes-editor-container {
            border: 1px solid var(--border);
            border-radius: 4px;
            min-height: 150px;
        }
        
        /* ===== @MENTIONS AUTOCOMPLETE ===== */
        .mention-autocomplete {
            position: absolute;
            z-index: 99999;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            max-height: 280px;
            overflow-y: auto;
            min-width: 280px;
            width: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .mention-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            cursor: pointer;
            transition: background 0.15s;
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        }
        
        .mention-item:hover,
        .mention-item.active {
            background: var(--bg);
        }
        
        .mention-item .bc-avatar {
            flex-shrink: 0;
        }
        
        .mention-item-name {
            font-weight: 500;
            font-size: 14px;
        }
        
        .mention-item-email {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        /* ===== TODO LABELS / TAGS ===== */
        .bc-labels {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        
        .bc-label {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .bc-label-gray { background: var(--border); color: var(--text); }
        .bc-label-red { background: var(--badge-red-bg); color: var(--accent-red); }
        .bc-label-orange { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
        .bc-label-yellow { background: var(--badge-yellow-bg); color: var(--accent-yellow); }
        .bc-label-green { background: var(--badge-green-bg); color: var(--accent-green); }
        .bc-label-blue { background: var(--badge-blue-bg); color: var(--link-color); }
        .bc-label-purple { background: var(--badge-purple-bg); color: var(--accent-purple); }
        .bc-label-pink { background: var(--badge-pink-bg); color: var(--badge-pink-text); }
        
        .bc-label-remove {
            cursor: pointer;
            opacity: 0.6;
            font-size: 10px;
        }
        
        .bc-label-remove:hover {
            opacity: 1;
        }
        
        .bc-add-label-btn {
            padding: 2px 8px;
            border: 1px dashed var(--border);
            border-radius: 12px;
            font-size: 11px;
            color: var(--text-secondary);
            cursor: pointer;
            background: transparent;
        }
        
        .bc-add-label-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .bc-label-dropdown {
            position: absolute;
            z-index: 1000;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            padding: 8px;
            min-width: 180px;
        }
        
        .bc-label-dropdown input {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 8px;
            font-size: 13px;
        }
        
        .bc-label-list {
            max-height: 200px;
            overflow-y: auto;
        }
        
        .bc-label-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border-radius: 4px;
            cursor: pointer;
        }

        /* ===== SEARCH BAR ===== */
        .bc-search-container {
            position: relative;
            margin: 0 20px;
            flex: 1;
            max-width: 400px;
        }

        .bc-search-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .bc-search-input {
            width: 100%;
            height: 32px;
            padding: 0 12px 0 32px;
            background: var(--bg-hover);
            border: 1px solid transparent;
            border-radius: 16px;
            font-size: 13px;
            transition: all 0.2s;
        }

        .bc-search-input:focus {
            outline: none;
            background: var(--surface);
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
        }

        .bc-search-icon {
            position: absolute;
            left: 10px;
            color: var(--text-muted);
            font-size: 12px;
        }

        .bc-search-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-top: 8px;
            box-shadow: var(--shadow-md);
            max-height: 400px;
            overflow-y: auto;
            z-index: 1000;
        }

        .bc-search-result-item {
            padding: 12px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .bc-search-result-item:last-child {
            border-bottom: none;
        }

        .bc-search-result-item:hover {
            background: var(--bg);
        }

        .bc-search-result-title {
            font-weight: 600;
            font-size: 14px;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .bc-search-result-title i {
            font-size: 12px;
            color: var(--primary);
            opacity: 0.7;
        }

        .bc-search-result-meta {
            font-size: 11px;
            color: var(--text-muted);
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .bc-search-result-meta .project-name {
            font-weight: 600;
            color: var(--text-secondary);
        }

        .bc-search-result-snippet {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 2px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }

        .bc-search-result-snippet mark {
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
            padding: 0 2px;
            border-radius: 2px;
            font-weight: 500;
        }

        /* Search result items as links */
        a.bc-search-result-item {
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        a.bc-search-result-item:hover {
            background: var(--bg-blue-tint);
        }

        a.bc-search-full-item {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        /* Completed todo visual indicator */
        .bc-search-result-completed .bc-search-result-title,
        .bc-search-result-completed .bc-search-full-title {
            text-decoration: line-through;
            opacity: 0.6;
        }

        .bc-search-result-completed .bc-search-result-title i,
        .bc-search-result-completed .bc-search-full-title i {
            color: var(--accent-green) !important;
        }

        .bc-search-result-completed-badge {
            display: inline-block;
            font-size: 10px;
            background: var(--badge-green-bg);
            color: var(--badge-green-text);
            padding: 1px 6px;
            border-radius: 4px;
            font-weight: 600;
            margin-left: 8px;
            text-decoration: none;
        }

        .bc-search-view-all {
            padding: 10px;
            text-align: center;
            background: var(--bg);
            border-top: 1px solid var(--border);
            font-size: 13px;
            font-weight: 600;
            color: var(--primary);
            cursor: pointer;
        }

        .bc-search-view-all:hover {
            background: var(--bg-secondary);
            text-decoration: underline;
        }

        /* Full Search Results Page */
        .bc-search-full-results {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px 0;
        }

        .bc-search-full-item {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 16px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .bc-search-full-item:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            transform: translateY(-1px);
        }

        .bc-search-full-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }

        .bc-search-full-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .bc-search-full-title i {
            font-size: 16px;
            color: var(--text-muted);
        }

        .bc-search-full-type {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background: var(--bg-hover);
            padding: 2px 8px;
            border-radius: 4px;
            color: var(--text-muted);
            font-weight: 600;
        }

        .bc-search-full-meta {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        .bc-search-full-project {
            font-weight: 500;
            color: var(--primary);
        }

        .bc-search-full-snippet {
            font-size: 15px;
            line-height: 1.5;
            color: var(--text-secondary);
        }

        .bc-search-full-snippet mark {
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
            padding: 0 2px;
            border-radius: 2px;
            font-weight: 500;
        }

        .highlight-comment {
            animation: highlight-fade 2s ease-out;
        }

        @keyframes highlight-fade {
            0% { background-color: var(--badge-yellow-bg); }
            100% { background-color: transparent; }
        }

        .bc-search-result-snippet mark {
            font-style: normal;
            font-weight: 700;
            color: var(--text);
            background: var(--badge-yellow-bg);
            padding: 0 2px;
            border-radius: 2px;
        }

        .highlight-comment {
            animation: highlight-fade 2s ease-in-out;
        }

        @keyframes highlight-fade {
            0% { background-color: var(--badge-yellow-bg); }
            100% { background-color: transparent; }
        }

        .bc-search-view-all {
            padding: 10px;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: var(--primary);
            background: var(--bg);
            border-top: 1px solid var(--border);
            cursor: pointer;
        }

        .bc-search-view-all:hover {
            background: var(--bg-secondary);
            text-decoration: underline;
        }

        .bc-search-no-results {
            padding: 20px;
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
        }

        /* ===== FULL SEARCH PAGE ===== */
        .bc-search-full-results {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px 0;
        }

        .bc-search-full-item {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: transform 0.1s, box-shadow 0.1s;
        }

        .bc-search-full-item:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow);
            border-color: var(--primary);
        }

        .bc-search-full-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 4px;
        }

        .bc-search-full-title {
            font-weight: 700;
            font-size: 16px;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .bc-search-full-title i {
            font-size: 14px;
            color: var(--primary);
        }

        .bc-search-full-type {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            background: var(--bg-hover);
            padding: 2px 8px;
            border-radius: 10px;
        }

        .bc-search-full-meta {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .bc-search-full-project {
            font-weight: 600;
        }

        .bc-search-full-snippet {
            font-size: 14px;
            line-height: 1.5;
            color: var(--text);
        }

        .bc-search-full-snippet mark {
            background: var(--badge-yellow-bg);
            color: inherit;
            padding: 0 2px;
            border-radius: 2px;
        }
        
        .bc-label-option:hover {
            background: var(--bg);
        }
        
        /* ===== UPLOAD PROGRESS ===== */
        .upload-progress {
            margin-top: 12px;
        }
        
        .upload-progress-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            background: var(--bg);
            border-radius: var(--radius);
            margin-bottom: 4px;
        }
        
        .upload-progress-bar {
            flex: 1;
            height: 4px;
            background: var(--border);
            border-radius: 2px;
            overflow: hidden;
        }
        
        .upload-progress-bar-fill {
            height: 100%;
            background: var(--primary);
            transition: width 0.2s;
        }
        
        .upload-progress-name {
            font-size: 12px;
            color: var(--text);
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .upload-progress-percent {
            font-size: 11px;
            color: var(--text-secondary);
            min-width: 35px;
            text-align: right;
        }
        
        /* ===== QUICK ASSIGNEE SELECTOR ===== */
        .bc-quick-assignee {
            position: relative;
            display: inline-block;
        }
        
        .bc-quick-assignee-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            min-width: 220px;
            max-height: 300px;
            overflow-y: auto;
            margin-top: 4px;
        }
        
        .bc-quick-assignee-search {
            padding: 8px;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            background: var(--surface);
        }
        
        .bc-quick-assignee-search input {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 13px;
        }
        
        .bc-quick-assignee-list {
            padding: 4px 0;
        }
        
        .bc-quick-assignee-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            cursor: pointer;
            transition: background 0.15s;
        }
        
        .bc-quick-assignee-item:hover {
            background: var(--bg);
        }
        
        .bc-quick-assignee-item.selected {
            background: var(--bg);
        }
        
        .bc-quick-assignee-item .bc-avatar {
            flex-shrink: 0;
        }
        
        .bc-quick-assignee-item-info {
            flex: 1;
            min-width: 0;
        }
        
        .bc-quick-assignee-item-name {
            font-weight: 500;
            font-size: 14px;
        }
        
        .bc-quick-assignee-item-role {
            font-size: 11px;
            color: var(--text-secondary);
        }
        
        /* ===== COMMENT ATTACHMENTS ===== */
        .bc-comment-upload-area {
            border: 2px dashed var(--border);
            border-radius: var(--radius);
            padding: 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg);
            margin-top: 8px;
        }
        
        .bc-comment-upload-area:hover,
        .bc-comment-upload-area.dragover {
            border-color: var(--primary);
            background: rgba(29, 78, 216, 0.05);
        }
        
        .bc-comment-upload-area i {
            font-size: 20px;
            color: var(--primary);
            margin-right: 8px;
        }
        
        .bc-comment-upload-area span {
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .bc-comment-attachments {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }
        
        .bc-comment-attachment {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            background: var(--bg);
            border-radius: var(--radius);
            font-size: 12px;
        }
        
        .bc-attachment-remove {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-secondary);
            padding: 0 2px;
            font-size: 10px;
        }
        
        .bc-attachment-remove:hover {
            color: var(--accent-red);
        }
        
        /* Quick assignee footer */
        .bc-quick-assignee-footer {
            display: flex;
            justify-content: flex-start;
        }
        
        /* Mention badge in content */
        .mention {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: var(--bg-secondary);
            color: var(--text);
            padding: 1px 6px 1px 2px;
            border-radius: 10px;
            font-weight: 500;
            font-size: 12px;
            border: none;
            cursor: default;
            white-space: nowrap;
            vertical-align: baseline;
            line-height: 1.3;
        }
        
        .mention-avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            color: white;
            border-radius: 50%;
            font-size: 8px;
            font-weight: 700;
            flex-shrink: 0;
        }
        
        .mention-avatar-img {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .bc-comment-attachment img {
            width: 32px;
            height: 32px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        .bc-comment-attachment-remove {
            cursor: pointer;
            color: var(--accent-red);
            opacity: 0.6;
        }
        
        .bc-comment-attachment-remove:hover {
            opacity: 1;
        }
        
        /* User avatar with image - must inherit size from .bc-avatar variants */
        img.bc-avatar-img {
            object-fit: cover;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        /* Ensure image avatars have correct sizes */
        img.bc-avatar.bc-avatar-sm {
            width: 24px;
            height: 24px;
        }
        
        img.bc-avatar.bc-avatar-xs {
            width: 20px;
            height: 20px;
        }
        
        img.bc-avatar.bc-avatar-lg {
            width: 36px;
            height: 36px;
        }
        
        img.bc-avatar {
            width: 32px;
            height: 32px;
        }
        
        /* ===== COMMENTS SECTION ===== */
        .bc-comments-section {
            background: var(--card-bg);
            border-radius: 8px;
            padding: 24px;
            margin-top: 24px;
        }
        
        .bc-comments-title {
            font-size: 16px;
            font-weight: 600;
            margin: 0 0 16px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-comment-count {
            font-weight: normal;
            color: var(--text-secondary);
        }
        
        .bc-comments-loading {
            color: var(--text-secondary);
            font-style: italic;
            padding: 16px 0;
        }
        
        .bc-no-comments {
            color: var(--text-secondary);
            font-style: italic;
            padding: 16px 0;
            text-align: center;
        }
        
        .bc-comments-list {
            margin-bottom: 24px;
        }
        
        .bc-comment {
            display: flex;
            gap: 12px;
            padding: 16px 0;
            border-bottom: 1px solid var(--border);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }
        
        .bc-comment.highlight-comment {
            background: var(--badge-yellow-bg);
            box-shadow: 0 0 0 4px #fef3c7;
            border-radius: var(--radius);
            animation: comment-highlight-pulse 2s ease-out;
        }
        
        @keyframes comment-highlight-pulse {
            0% { background: var(--accent-yellow-light); box-shadow: 0 0 0 6px var(--accent-yellow-light); }
            100% { background: var(--badge-yellow-bg); box-shadow: 0 0 0 4px #fef3c7; }
        }
        
        .bc-comment:last-child {
            border-bottom: none;
        }
        
        .bc-comment-avatar {
            flex-shrink: 0;
        }
        
        .bc-comment-body {
            flex: 1;
            min-width: 0;
        }
        
        .bc-comment-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }
        
        .bc-comment-author {
            font-weight: 600;
            color: var(--text);
        }
        
        .bc-comment-time {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .bc-synced-badge {
            font-size: 11px;
            color: var(--accent-green);
            cursor: help;
        }
        
        .bc-comment-content {
            color: var(--text);
            line-height: 1.6;
            word-break: break-word;
            overflow-wrap: break-word;
        }
        
        .bc-comment-content a {
            color: var(--link-color);
            word-break: break-all;
        }
        
        .bc-comment-content p {
            margin: 0 0 8px 0;
        }
        
        .bc-comment-content p:last-child {
            margin-bottom: 0;
        }
        
        .bc-comment-content .bc-image-placeholder {
            display: inline-block !important;
            padding: 12px 16px !important;
            background: var(--bg-secondary) !important;
            border: 1px dashed #dee2e6 !important;
            border-radius: 8px !important;
            margin: 8px 0 !important;
            text-align: center;
        }
        
        .bc-comment-content .bc-image-placeholder a {
            color: var(--text) !important;
            text-decoration: none !important;
        }
        
        .bc-comment-content .bc-image-placeholder a:hover {
            color: var(--primary) !important;
        }
        
        .bc-comment-content .avatar {
            border-radius: 50%;
            vertical-align: middle;
        }
        
        .bc-comment-content bc-attachment {
            display: inline;
        }
        
        .bc-comment-content bc-attachment[content-type="application/vnd.basecamp.mention"] {
            display: inline-flex;
            align-items: center;
            vertical-align: middle;
        }
        
        .bc-comment-content bc-attachment[content-type="application/vnd.basecamp.mention"] figure {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            margin: 0;
            vertical-align: baseline;
            white-space: nowrap;
            background: var(--bg-secondary);
            padding: 1px 6px 1px 2px;
            border-radius: 10px;
            font-size: 12px;
            line-height: 1.3;
        }
        
        .bc-comment-content bc-attachment[content-type="application/vnd.basecamp.mention"] figure img.avatar {
            display: inline !important;
            width: 14px !important;
            height: 14px !important;
            border-radius: 50%;
            vertical-align: middle;
            flex-shrink: 0;
        }
        
        .bc-comment-content bc-attachment[content-type="application/vnd.basecamp.mention"] figcaption {
            display: inline !important;
            font-weight: 500;
            color: var(--primary);
            white-space: nowrap;
            font-size: 12px;
        }
        
        .bc-comment-content figure {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin: 0;
            vertical-align: middle;
        }
        
        .bc-comment-content figure img {
            display: inline;
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }
        
        .bc-comment-content figcaption {
            display: none;
        }
        
        .bc-add-comment {
            display: flex;
            gap: 12px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }
        
        .bc-comment-form {
            flex: 1;
        }
        
        .bc-comment-input {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            resize: vertical;
            min-height: 60px;
            background: var(--bg);
            color: var(--text);
        }
        
        .bc-comment-input:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .bc-comment-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
        }
        
        .bc-comment-actions .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .bc-comment-actions .btn-secondary {
            background: var(--bg);
            border: 1px solid var(--border);
        }
        
        .bc-comment-hint {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        /* ===== SYNC INDICATOR ===== */
        .bc-sync-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .bc-sync-indicator.syncing {
            color: var(--primary);
        }
        
        .bc-sync-spinner {
            width: 12px;
            height: 12px;
            border: 2px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* ===== CLIENT VISIBILITY TOGGLE ===== */
        .bc-list-header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-client-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
        }
        
        .bc-client-toggle:hover {
            background: var(--bg);
        }
        
        .bc-client-toggle input {
            cursor: pointer;
        }
        
        /* Visibility dropdown for todo lists */
        .bc-visibility-dropdown {
            position: relative;
        }
        
        .bc-visibility-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .bc-visibility-btn:hover {
            background: var(--bg);
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .bc-visibility-btn .fa-chevron-down {
            font-size: 10px;
        }
        
        .bc-visibility-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            min-width: 200px;
            z-index: 1000;
            overflow: hidden;
        }
        
        .bc-visibility-menu-header {
            padding: 10px 14px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }
        
        .bc-visibility-option {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 10px 14px;
            font-size: 13px;
            cursor: pointer;
        }
        
        .bc-visibility-option:hover {
            background: var(--bg-hover);
        }
        
        .bc-visibility-option input {
            cursor: pointer;
        }
        
        .bc-visibility-empty {
            padding: 16px;
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
        }
        
        .bc-list-groups-badges {
            display: inline-flex;
            gap: 4px;
            margin-left: 8px;
        }
        
        .bc-group-badge-sm {
            padding: 2px 8px;
            font-size: 11px;
            border-radius: 10px;
            font-weight: 500;
        }
        
        /* ===== MODAL ===== */
        
        .bc-todo-checkbox-lg {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border: 2px solid var(--border);
            border-radius: 4px;
            margin-right: 12px;
            cursor: pointer;
            vertical-align: middle;
        }
        
        .bc-todo-checkbox-lg:hover {
            border-color: var(--primary);
        }
        
        .todo-completed {
            text-decoration: line-through;
            color: var(--text-secondary);
        }
        
        .todo-completed .bc-todo-checkbox-lg {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }
        
        /* ===== NEW LIST BUTTON ===== */
        .bc-new-list-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background: var(--surface);
            border: 1px dashed var(--border);
            border-radius: var(--radius-lg);
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.15s;
            width: 100%;
            justify-content: center;
        }
        
        .bc-new-list-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: rgba(29, 120, 116, 0.05);
        }
        
        /* Category Suggestions */
        .category-suggestion:hover {
            background: var(--surface-hover);
        }
        
        /* ===== MODAL ===== */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 80px;
            z-index: 99999;
        }
        
        /* Share link items */
        .share-link-item {
            transition: opacity 0.2s;
        }
        .share-link-expired {
            opacity: 0.6;
        }
        .share-link-expired input {
            text-decoration: line-through;
            color: var(--text-muted);
        }
        
        /* TinyMCE dialogs z-index fix - must be above modal-overlay */
        .tox-tinymce-aux {
            z-index: 100001 !important;
        }

        /* Prevent TinyMCE toolbar/editor from causing horizontal overflow */
        .tox-tinymce {
            max-width: 100% !important;
            overflow: hidden;
        }
        .tox .tox-editor-header {
            overflow: hidden;
        }
        .tox .tox-toolbar__primary {
            flex-wrap: wrap;
        }
        .tox-dialog-wrap {
            z-index: 100001 !important;
        }
        .tox-dialog-wrap__backdrop {
            z-index: 100000 !important;
            background: transparent !important;
            opacity: 0 !important;
        }
        .tox-dialog {
            z-index: 100002 !important;
        }
        
        /* Hide TinyMCE placeholder on focus (for Win+H voice typing) */
        .mce-content-body.mce-focused[data-mce-placeholder]::before {
            display: none !important;
        }
        .mce-content-body.mce-focused::before {
            display: none !important;
        }
        /* Hide placeholder when TinyMCE has focus (parent wrapper gets focus class) */
        .tox-tinymce:focus-within .mce-content-body[data-mce-placeholder]::before {
            display: none !important;
            content: none !important;
        }
        /* Alternative: hide when editor iframe has focus */
        .tox-edit-area:focus-within + .mce-content-body::before,
        .tox-edit-area__iframe:focus ~ .mce-content-body::before {
            display: none !important;
        }
        /* Force hide placeholder on any focused TinyMCE */
        .tox-tinymce--toolbar-sticky-on .mce-content-body::before,
        .tox-tinymce.tox-tinymce--toolbar-bottom .mce-content-body::before {
            display: none !important;
        }
        
        .bc-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 99998;
            animation: fadeIn 0.15s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .bc-modal {
            background: var(--surface);
            border-radius: 12px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            max-width: 90vw;
            max-height: 90vh;
            overflow: hidden;
            animation: modalSlideIn 0.2s ease;
            display: flex;
            flex-direction: column;
        }
        
        .bc-modal-sm { width: 400px; }
        .bc-modal-md { width: 600px; }
        .bc-modal-lg { width: 800px; }
        
        @keyframes modalSlideIn {
            from { opacity: 0; transform: scale(0.95) translateY(-10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        
        .bc-modal-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }
        
        .bc-modal-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
        }
        
        .bc-modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 24px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
        }
        
        .bc-modal-close:hover {
            background: var(--bg-hover);
            color: var(--text);
        }
        
        .bc-modal-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
            min-height: 0;
        }
        
        .bc-modal-body .bc-input {
            width: 100%;
            padding: 12px 16px;
            font-size: 15px;
            border: 2px solid var(--border);
            border-radius: 10px;
            outline: none;
            transition: all 0.2s ease;
            background: var(--bg);
        }
        
        .bc-modal-body .bc-input:hover {
            border-color: var(--text-disabled);
            background: var(--surface);
        }
        
        .bc-modal-body .bc-input:focus {
            border-color: var(--accent-blue);
            background: var(--surface);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }
        
        .bc-modal-body .bc-input::placeholder {
            color: var(--text-muted);
        }
        
        .boost-emoji-grid {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 16px;
        }
        
        .boost-emoji-btn {
            width: 44px;
            height: 44px;
            border: 2px solid var(--border);
            border-radius: 10px;
            background: var(--bg);
            cursor: pointer;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
        }
        
        .boost-emoji-btn:hover {
            border-color: var(--accent-blue);
            background: var(--bg-blue-tint);
            transform: scale(1.1);
        }
        
        .boost-emoji-btn:active {
            transform: scale(0.95);
        }
        
        .bc-modal-footer {
            padding: 16px 20px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            flex-shrink: 0;
        }

        .modal {
            background: var(--surface);
            border-radius: var(--radius-lg);
            width: 100%;
            max-width: 500px;
            box-shadow: var(--shadow-md);
            animation: modalSlide 0.2s ease;
        }

        .modal.modal-lg {
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal.modal-xl {
            max-width: 920px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        /* Email template modal - responsive 2-column layout */
        .email-template-modal-body {
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 24px;
        }
        
        /* AI Advisor - wider on large viewports */
        @media (min-width: 1400px) {
            .bc-ai-advisor-panel.open {
                flex: 0 0 400px;
                width: 400px;
                min-width: 360px;
                max-width: 450px;
            }
        }
        
        @media (min-width: 1700px) {
            .bc-ai-advisor-panel.open {
                flex: 0 0 450px;
                width: 450px;
                min-width: 400px;
                max-width: 500px;
            }
        }
        
        @media (max-width: 1100px) {
            .email-template-modal-body {
                grid-template-columns: 1fr;
            }
        }
        
        @keyframes modalSlide {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 20px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius);
        }
        
        .modal-close:hover {
            background: var(--bg);
            color: var(--text);
        }
        
        .modal-body {
            padding: 24px;
        }
        
        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }
        
        /* ===== KEYBOARD SHORTCUTS MODAL ===== */
        .bc-shortcuts-grid {
            display: grid;
            gap: 8px;
        }
        
        .bc-shortcut-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 6px 0;
        }
        
        .bc-shortcut-key {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 80px;
            padding: 4px 10px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 6px;
            font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
            font-size: 12px;
            font-weight: 500;
            color: var(--text);
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        
        .bc-shortcut-desc {
            font-size: 13px;
            color: var(--text);
        }
        
        /* Keyboard hint - inline in footer */
        .bc-keyboard-hint-inline {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-keyboard-hint-inline kbd {
            background: var(--bg);
            padding: 1px 5px;
            border-radius: 3px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 9px;
            border: 1px solid var(--border);
            line-height: 1.2;
        }
        
        @media (max-width: 768px) {
            .bc-keyboard-hint-inline {
                display: none;
            }
        }
        
        /* ===== GLOBAL FOOTER ===== */
        .bc-global-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 16px 20px;
            margin-top: 40px;
            text-align: center;
            font-size: 12px;
            color: var(--text-muted);
            border-top: 1px solid var(--border);
            flex-wrap: wrap;
        }
        
        .bc-footer-separator {
            opacity: 0.4;
        }
        
        .bc-footer-link {
            color: var(--primary);
            text-decoration: none;
        }
        
        .bc-footer-link:hover {
            text-decoration: underline;
        }
        
        .bc-footer-action {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--text-muted);
            text-decoration: none;
            cursor: pointer;
            transition: color 0.2s;
            font-size: 11px;
        }
        
        .bc-footer-action:hover {
            color: var(--primary);
        }
        
        .bc-footer-action i {
            font-size: 12px;
        }
        
        .bc-footer-action.bc-footer-action--success {
            color: var(--success);
        }
        
        .bc-footer-action.bc-footer-action--warning {
            color: var(--warning);
        }

        /* Tutorial Mode - blur sensitive text with visible prefix */
        .bc-blur-suffix {
            filter: blur(6px);
            transition: filter 0.2s ease;
            user-select: none;
        }
        
        .bc-blur-suffix:hover {
            filter: blur(5px);
        }

        @media (max-width: 768px) {
            .bc-global-footer {
                padding: 12px;
                font-size: 11px;
            }
        }
        
        /* ===== STICKY BOTTOM TIMER BAR ===== */
        .bc-timer-bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
            color: white;
            padding: 8px 24px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 1000;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
            animation: slideUpBar 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            max-height: 30vh;
            overflow-y: auto;
        }

        .bc-timer-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 4px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .bc-timer-item:last-child {
            border-bottom: none;
        }
        
        @keyframes slideUpBar {
            from {
                transform: translateY(100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .bc-timer-item .timer-pulse {
            width: 10px;
            height: 10px;
            background: var(--accent-green);
            border-radius: 50%;
            animation: pulse 1.5s ease-in-out infinite;
            box-shadow: 0 0 8px #22c55e;
            flex-shrink: 0;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }
        
        .bc-timer-item .timer-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1;
            min-width: 0;
        }
        
        .bc-timer-item .timer-project-name {
            font-size: 11px;
            opacity: 0.8;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-timer-item .timer-todo-name {
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-timer-item .timer-todo-link {
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text-on-primary);
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .bc-timer-item .timer-todo-link:hover {
            color: var(--accent-yellow);
            text-decoration: underline;
        }
        
        .bc-timer-item .timer-time {
            font-size: 20px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
            letter-spacing: 1px;
            min-width: 90px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
            text-align: right;
        }
        
        .bc-timer-item .timer-actions {
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }
        
        .bc-timer-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-timer-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-1px);
        }
        
        .bc-timer-btn.stop {
            background: var(--accent-red);
            box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
        }
        
        .bc-timer-btn.stop:hover {
            background: var(--accent-red);
        }
        
        /* Timer conflict & warning styles */
        .bc-timer-bottom-bar.has-warning {
            background: linear-gradient(135deg, #7c3a10 0%, #b45309 100%);
        }
        
        .bc-timer-multi-badge {
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: var(--accent-yellow-light);
            padding: 4px 0;
            border-bottom: 1px solid rgba(255,255,255,0.15);
        }
        
        .bc-timer-multi-badge i {
            margin-right: 6px;
            color: var(--accent-yellow);
        }
        
        .bc-timer-item.timer-warning .timer-pulse {
            background: var(--accent-yellow);
            box-shadow: 0 0 8px #f59e0b;
            animation: pulseWarning 0.8s ease-in-out infinite;
        }
        
        .bc-timer-item.timer-warning .timer-time {
            color: var(--accent-yellow);
        }
        
        @keyframes pulseWarning {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.4); opacity: 0.6; }
        }
        
        /* Small Timer Widget in Grid */
        .bc-timer-widget {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: var(--surface);
            border: 2px solid var(--primary);
            border-radius: var(--radius-lg);
            padding: 16px;
            box-shadow: var(--shadow-md);
            min-width: 300px;
            z-index: 500;
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .bc-timer-widget-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }

        .bc-timer-widget-title {
            font-weight: 600;
            font-size: 14px;
            color: var(--text);
        }

        .bc-timer-widget-close {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-muted);
            font-size: 18px;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bc-timer-widget-close:hover {
            color: var(--text);
        }

        .bc-timer-widget-display {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 12px;
        }

        .bc-timer-widget-time {
            font-size: 32px;
            font-weight: 700;
            color: var(--primary);
            font-variant-numeric: tabular-nums;
            font-family: 'Monaco', 'Menlo', monospace;
            min-width: 120px;
        }

        .bc-timer-widget-info {
            flex: 1;
        }

        .bc-timer-widget-todo {
            font-size: 13px;
            font-weight: 500;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px;
        }

        .bc-timer-widget-project {
            font-size: 12px;
            color: var(--text-muted);
        }

        .bc-timer-widget-controls {
            display: flex;
            gap: 8px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
        }

        .bc-timer-widget-btn {
            flex: 1;
            padding: 8px 12px;
            border: none;
            border-radius: var(--radius);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .bc-timer-widget-btn.stop {
            background: var(--accent-red);
            color: white;
        }

        .bc-timer-widget-btn.stop:hover {
            background: var(--accent-red);
        }

        .bc-timer-widget-btn.pause {
            background: var(--bg);
            color: var(--text);
            border: 1px solid var(--border);
        }

        .bc-timer-widget-btn.pause:hover {
            background: var(--border);
        }
        
        /* ===== NEW COMMENTS TOAST ===== */
        .new-comments-toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary-hover);
            color: white;
            padding: 12px 20px;
            border-radius: 24px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 4px 20px rgba(30, 64, 175, 0.4);
            z-index: 1001;
            cursor: pointer;
            animation: toastSlideUp 0.3s ease;
            transition: transform 0.2s;
        }
        
        .new-comments-toast:hover {
            transform: translateX(-50%) scale(1.02);
        }
        
        @keyframes toastSlideUp {
            from {
                transform: translateX(-50%) translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateX(-50%) translateY(0);
                opacity: 1;
            }
        }
        
        .new-comments-toast i {
            font-size: 16px;
        }
        
        /* ===== ALERTS ===== */
        .alert {
            padding: 12px 16px;
            border-radius: var(--radius);
            margin-bottom: 16px;
            font-size: 13px;
        }
        
        .alert-error {
            background: var(--bg-red-tint);
            border: 1px solid var(--border-red-light);
            color: var(--accent-red);
        }
        
        .alert-success {
            background: var(--bg-green-tint);
            border: 1px solid var(--border-green-light);
            color: var(--accent-green);
        }
        
        /* ===== LOADING ===== */
        .loading {
            text-align: center;
            padding: 40px;
            color: var(--text-muted);
        }
        
        .spinner {
            border: 3px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            width: 32px;
            height: 32px;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 12px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* ===== VIEW OPTIONS ===== */
        .bc-view-options {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            color: var(--text-muted);
        }
        
        .bc-dropdown {
            position: relative;
            display: inline-block;
        }
        
        .bc-dropdown-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 10px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 12px;
            cursor: pointer;
        }
        
        /* ===== UTILITY ===== */
        .text-muted { color: var(--text-muted); }
        .text-secondary { color: var(--text-secondary); }
        .font-medium { font-weight: 500; }
        .font-semibold { font-weight: 600; }
        .hidden { display: none !important; }

        /* ===== KNOWLEDGE BASE STYLES ===== */
        
        /* Page wrapper - matching dashboard width */
        .bc-knowledge-wrapper {
            max-width: 900px;
            margin: 0 auto;
            padding: 24px 16px;
            font-size: 15px;
            line-height: 1.6;
        }
        
        /* Header bar - simple */
        .bc-knowledge-header-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .bc-knowledge-header-bar .bc-breadcrumb-center {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }
        
        .bc-knowledge-header-bar .bc-breadcrumb-center a {
            color: var(--text-muted);
            text-decoration: none;
        }
        
        .bc-knowledge-header-bar .bc-breadcrumb-center a:hover {
            color: var(--text);
        }
        
        .bc-knowledge-header-bar .bc-breadcrumb-sep {
            color: var(--text-muted);
        }
        
        /* Main content - no card wrapper */
        .bc-knowledge-main-card {
            /* No background or border - simple layout */
        }

        .bc-knowledge-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 24px;
        }
        
        .bc-knowledge-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 16px;
        }
        
        .bc-knowledge-title {
            font-size: 24px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .bc-knowledge-title i {
            color: var(--accent-teal);
        }
        
        .bc-knowledge-project-name {
            font-size: 14px;
            color: var(--text-muted);
            font-weight: 400;
        }
        
        .bc-knowledge-tabs {
            display: flex;
            gap: 8px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 24px;
            overflow-x: auto;
            padding-bottom: 0;
        }
        
        .bc-knowledge-tab {
            padding: 12px 16px;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            transition: all 0.2s;
        }
        
        .bc-knowledge-tab:hover {
            color: var(--text);
        }
        
        .bc-knowledge-tab.active {
            color: var(--accent-teal);
            border-bottom-color: var(--accent-teal);
            font-weight: 600;
        }
        
        .bc-knowledge-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-secondary);
        }
        
        .bc-knowledge-empty-icon {
            font-size: 48px;
            margin-bottom: 16px;
            color: var(--border);
        }
        
        .bc-knowledge-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .bc-knowledge-post {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 20px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-knowledge-post:hover {
            border-color: var(--accent-teal);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .bc-knowledge-post-header {
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            flex-wrap: wrap;
        }
        
        .bc-knowledge-post-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .bc-knowledge-post-icon.message {
            background: var(--bg-green-tint);
            color: var(--accent-green);
        }
        
        .bc-knowledge-post-icon.link {
            background: var(--bg-blue-tint);
            color: var(--accent-blue);
        }
        
        .bc-knowledge-post-content {
            flex: 1;
            min-width: 0;
        }
        
        .bc-knowledge-post-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
            margin: 0 0 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-knowledge-post-title .pinned {
            color: var(--accent-orange);
            font-size: 14px;
        }
        
        .bc-knowledge-post-url {
            font-size: 13px;
            color: var(--accent-blue);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-knowledge-post-excerpt {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
            margin: 0 0 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .bc-knowledge-post-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 13px;
            color: var(--text-muted);
        }
        
        .bc-knowledge-post-meta span {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-knowledge-post-actions {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
        }
        
        /* Header tags - inline with meta */
        .bc-knowledge-header-tags {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
            margin-left: auto;
            margin-right: 8px;
        }
        
        .bc-knowledge-tag-sm {
            padding: 2px 8px;
            font-size: 11px;
        }
        
        .bc-knowledge-tag-sm .bc-knowledge-tag-remove {
            width: 14px;
            height: 14px;
            font-size: 8px;
        }
        
        .bc-knowledge-add-tag-btn-sm {
            width: 20px;
            height: 20px;
            font-size: 10px;
        }
        
        .bc-knowledge-tag-input-header {
            position: absolute;
            right: 60px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }
        
        /* Content with links and line breaks */
        .bc-knowledge-post-content {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-secondary);
            word-break: break-word;
        }
        
        .bc-knowledge-post-content a.bc-content-link {
            color: var(--accent-blue);
            text-decoration: none;
            word-break: break-all;
        }
        
        .bc-knowledge-post-content a.bc-content-link:hover {
            text-decoration: underline;
        }
        
        /* Knowledge Modal */
        .bc-knowledge-modal {
            background: var(--surface);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
            width: 600px;
            max-width: 90vw;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
        }
        
        .bc-knowledge-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .bc-knowledge-modal-header h3 {
            margin: 0;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-knowledge-modal-content {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
        }
        
        .bc-knowledge-modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        
        .bc-knowledge-form-group {
            margin-bottom: 20px;
        }
        
        .bc-knowledge-form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text);
        }
        
        .bc-knowledge-type-selector {
            display: flex;
            gap: 12px;
        }
        
        .bc-knowledge-type-option {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            border: 2px solid var(--border);
            border-radius: var(--radius);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-knowledge-type-option:hover {
            border-color: var(--text-muted);
        }
        
        .bc-knowledge-type-option.selected {
            border-color: var(--accent-teal);
            background: var(--bg-teal-tint, rgba(20, 184, 166, 0.1));
        }
        
        .bc-knowledge-type-option input[type="radio"] {
            margin: 0;
        }
        
        /* Knowledge Detail Modal */
        .bc-knowledge-detail {
            width: 700px;
        }
        
        .bc-knowledge-detail-url {
            margin-bottom: 16px;
            padding: 12px;
            background: var(--bg-blue-tint);
            border-radius: var(--radius);
            border-left: 4px solid var(--accent-blue);
        }
        
        .bc-knowledge-detail-url label {
            font-size: 12px;
            color: var(--text-muted);
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 4px;
            display: block;
        }
        
        .bc-knowledge-detail-url a {
            color: var(--accent-blue);
            text-decoration: none;
            word-break: break-all;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-knowledge-detail-url a:hover {
            text-decoration: underline;
        }
        
        .bc-knowledge-detail-content {
            margin-bottom: 24px;
            white-space: pre-wrap;
            line-height: 1.6;
        }
        
        .bc-knowledge-comments {
            border-top: 1px solid var(--border);
            padding-top: 16px;
        }
        
        .bc-knowledge-comments-title {
            margin: 0 0 16px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-knowledge-comment {
            background: var(--bg-secondary);
            padding: 12px;
            border-radius: var(--radius);
            margin-bottom: 8px;
        }
        
        .bc-knowledge-comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }
        
        .bc-knowledge-comment-author {
            font-weight: 600;
            font-size: 13px;
            color: var(--text);
        }
        
        .bc-knowledge-comment-time {
            font-size: 12px;
            color: var(--text-muted);
        }
        
        .bc-knowledge-comment-content {
            font-size: 14px;
            line-height: 1.5;
        }
        
        .bc-knowledge-add-comment {
            margin-top: 16px;
            display: flex;
            gap: 8px;
        }
        
        .bc-knowledge-add-comment textarea {
            flex: 1;
            min-height: 60px;
            resize: vertical;
        }

        /* Knowledge Edit Modal */
        .bc-knowledge-edit-modal {
            width: 560px;
            max-width: 90vw;
        }
        
        .bc-knowledge-edit-modal .modal-header {
            padding: 20px 24px;
            background: var(--surface);
        }
        
        .bc-knowledge-edit-modal .modal-header .modal-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
            margin: 0;
        }
        
        .bc-knowledge-edit-modal .modal-header .modal-title i {
            color: var(--accent-teal);
            font-size: 16px;
        }
        
        .bc-knowledge-edit-modal .modal-body {
            padding: 24px;
        }
        
        .bc-knowledge-edit-modal .form-group {
            margin-bottom: 20px;
        }
        
        .bc-knowledge-edit-modal .form-label {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        
        .bc-knowledge-edit-modal .form-label .required {
            color: var(--accent-red);
            margin-left: 2px;
        }
        
        .bc-knowledge-edit-modal .form-input {
            padding: 12px 14px;
            font-size: 14px;
            border-radius: var(--radius);
        }
        
        .bc-knowledge-edit-modal .modal-footer {
            padding: 16px 24px;
            background: var(--surface);
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        
        .bc-knowledge-edit-modal .modal-footer .btn {
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 500;
            border-radius: var(--radius);
            min-width: 100px;
        }
        
        .bc-knowledge-edit-modal .modal-footer .btn i {
            margin-right: 6px;
        }

        /* Knowledge Chat-like Quick Input with Rich Editor */
        .bc-knowledge-quick-input {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 16px;
            margin-bottom: 20px;
        }

        .bc-knowledge-editor-wrap {
            margin-bottom: 12px;
        }
        
        .bc-knowledge-editor-wrap .tox-tinymce {
            border-radius: var(--radius) !important;
            border-color: var(--border) !important;
        }
        
        /* Modal editor - taller */
        .bc-knowledge-edit-modal .bc-knowledge-editor-wrap {
            margin-bottom: 0;
        }
        
        .bc-knowledge-edit-modal .bc-knowledge-editor-wrap .tox-tinymce {
            min-height: 250px !important;
        }
        
        .bc-knowledge-editor-wrap .tox-toolbar__primary {
            background: var(--bg-secondary) !important;
        }
        
        /* TinyMCE dark mode support */
        .bc-knowledge-editor-wrap .tox .tox-edit-area__iframe {
            background: var(--bg-secondary) !important;
        }
        
        .bc-knowledge-editor-wrap .tox .tox-toolbar__group {
            border-color: var(--border) !important;
        }
        
        .bc-knowledge-editor-wrap .tox .tox-tbtn {
            color: var(--text) !important;
        }
        
        .bc-knowledge-editor-wrap .tox .tox-tbtn:hover {
            background: var(--border) !important;
        }
        
        .bc-knowledge-editor-wrap .tox .tox-tbtn--enabled,
        .bc-knowledge-editor-wrap .tox .tox-tbtn--enabled:hover {
            background: var(--accent-teal) !important;
            color: #fff !important;
        }
        
        .bc-knowledge-editor-textarea {
            display: none;
        }

        .bc-knowledge-upload-zone {
            padding: 12px 16px;
            border: 1px dashed var(--border);
            border-radius: var(--radius);
            background: var(--bg-secondary);
            color: var(--text-muted);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .bc-knowledge-upload-zone:hover {
            border-color: var(--accent-teal);
            color: var(--text);
        }
        
        .bc-knowledge-upload-zone.dragover {
            border-color: var(--accent-teal);
            background: rgba(20, 184, 166, 0.1);
            color: var(--accent-teal);
        }
        
        .bc-knowledge-upload-progress {
            margin-bottom: 12px;
        }
        
        .bc-knowledge-upload-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            font-size: 12px;
        }
        
        .bc-knowledge-upload-name {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .bc-knowledge-upload-bar {
            width: 100px;
            height: 4px;
            background: var(--border);
            border-radius: 2px;
            overflow: hidden;
        }
        
        .bc-knowledge-upload-bar-fill {
            height: 100%;
            background: var(--accent-teal);
            transition: width 0.3s;
        }
        
        .bc-knowledge-upload-percent {
            width: 35px;
            text-align: right;
            color: var(--text-muted);
        }
        
        .bc-knowledge-attachments-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .bc-knowledge-attachment-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 12px;
        }
        
        .bc-knowledge-attachment-thumb {
            width: 32px;
            height: 32px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        .bc-knowledge-attachment-icon {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--border);
            border-radius: 4px;
            color: var(--text-muted);
        }
        
        .bc-knowledge-attachment-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-knowledge-attachment-info span {
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .bc-knowledge-attachment-remove {
            background: none;
            border: none;
            padding: 2px 4px;
            color: var(--text-muted);
            cursor: pointer;
            opacity: 0.6;
            transition: all 0.2s;
        }
        
        .bc-knowledge-attachment-remove:hover {
            opacity: 1;
            color: var(--accent-red);
        }

        .bc-knowledge-quick-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .bc-knowledge-quick-send {
            height: 36px;
            padding: 0 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }

        .bc-knowledge-quick-send i {
            font-size: 14px;
            flex-shrink: 0;
            margin-right: 8px;
        }

        /* Links View */
        .bc-knowledge-links-view {
            padding: 16px 0;
        }

        .bc-knowledge-links-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .bc-knowledge-link-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: var(--bg-secondary);
            border-radius: 8px;
            text-decoration: none;
            color: var(--text);
            transition: background-color 0.15s;
        }

        .bc-knowledge-link-item:hover {
            background: var(--bg-hover);
        }

        .bc-knowledge-link-item i {
            color: var(--accent-blue);
            flex-shrink: 0;
        }

        .bc-knowledge-link-url {
            flex: 1;
            color: var(--accent-teal);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .bc-knowledge-link-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .bc-knowledge-link-author {
            color: var(--text-secondary);
        }

        .bc-knowledge-quick-hint {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 12px;
            color: var(--text-muted);
        }

        .bc-knowledge-quick-hint i {
            color: var(--accent-yellow);
        }

        .bc-knowledge-advanced-link {
            background: none;
            border: none;
            color: var(--accent-teal);
            font-size: 12px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            transition: background 0.2s;
        }

        .bc-knowledge-advanced-link:hover {
            background: var(--bg-teal-tint, rgba(20, 184, 166, 0.1));
        }

        /* Knowledge Filters */
        .bc-knowledge-filters {
            display: flex;
            gap: 6px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .bc-filter-btn {
            padding: 8px 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .bc-filter-btn:hover {
            background: var(--surface);
            border-color: var(--text-muted);
        }

        .bc-filter-btn.active {
            background: var(--accent-teal);
            border-color: var(--accent-teal);
            color: white;
        }

        /* Knowledge Feed */
        .bc-knowledge-feed {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .bc-knowledge-loading {
            text-align: center;
            padding: 40px;
            color: var(--text-muted);
        }

        .bc-knowledge-post.is-pinned {
            border-left: 3px solid var(--accent-orange);
            background: linear-gradient(90deg, rgba(251, 146, 60, 0.05) 0%, transparent 100%);
        }

        .bc-knowledge-post-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .bc-knowledge-post-avatar {
            width: 36px;
            height: 36px;
            border-radius: var(--radius);
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .bc-knowledge-post-avatar i {
            font-size: 14px;
        }

        .bc-knowledge-post-meta {
            flex: 1;
            min-width: 0;
        }

        .bc-knowledge-post-author {
            font-weight: 600;
            font-size: 14px;
            color: var(--text);
            display: block;
        }

        .bc-knowledge-post-time {
            font-size: 12px;
            color: var(--text-muted);
        }

        .bc-knowledge-post-actions {
            display: flex;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .bc-knowledge-post:hover .bc-knowledge-post-actions {
            opacity: 1;
        }

        .bc-action-btn {
            padding: 6px 10px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            min-height: 28px;
        }
        
        .bc-action-btn i {
            font-size: 12px;
        }

        .bc-action-btn:hover {
            background: var(--surface);
            border-color: var(--text-muted);
            color: var(--text);
        }

        /* Pinned state - solid orange icon */
        .bc-action-btn.is-pinned {
            color: var(--accent-orange);
            background: rgba(251, 146, 60, 0.15);
            border-color: var(--accent-orange);
        }
        
        .bc-action-btn.is-pinned:hover {
            background: rgba(251, 146, 60, 0.25);
        }

        .bc-action-btn.pinned {
            color: var(--accent-orange);
            background: rgba(251, 146, 60, 0.1);
            border-color: var(--accent-orange);
        }

        .bc-action-btn-danger:hover,
        .bc-action-btn.danger:hover {
            background: rgba(239, 68, 68, 0.1);
            border-color: var(--accent-red);
            color: var(--accent-red);
        }

        .bc-knowledge-post-body {
            padding-left: 48px;
        }

        .bc-knowledge-post-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            margin: 0 0 6px;
        }

        .bc-knowledge-post-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--accent-blue);
            text-decoration: none;
            word-break: break-all;
            margin-bottom: 6px;
        }

        .bc-knowledge-post-link:hover {
            text-decoration: underline;
        }

        .bc-knowledge-post-excerpt {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
            margin: 0;
            white-space: pre-line;
        }

        .bc-knowledge-post-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 48px;
            margin-top: 12px;
            font-size: 13px;
            color: var(--text-muted);
        }

        .bc-knowledge-comments-toggle {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 13px;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            transition: all 0.2s;
        }

        .bc-knowledge-comments-toggle:hover {
            background: var(--bg-secondary);
            color: var(--text);
        }

        .bc-knowledge-post-comments {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: color 0.2s;
        }

        .bc-knowledge-post-comments:hover {
            color: var(--text);
        }
        
        /* Toolbar with filters and expand/collapse */
        .bc-knowledge-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .bc-knowledge-expand-btns {
            display: flex;
            gap: 6px;
        }
        
        .bc-expand-btn {
            padding: 6px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            color: var(--text-secondary);
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.2s;
        }
        
        .bc-expand-btn:hover {
            background: var(--surface);
            border-color: var(--text-muted);
            color: var(--text);
        }
        
        /* Filter badge on button */
        .bc-filter-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            background: var(--accent-teal);
            color: white;
            font-size: 11px;
            font-weight: 600;
            border-radius: 9px;
            margin-left: 4px;
        }
        
        /* Advanced filter panel */
        .bc-knowledge-filter-panel {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 20px;
        }
        
        .bc-knowledge-filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 12px;
        }
        
        .bc-knowledge-filter-row:last-child {
            margin-bottom: 0;
        }
        
        .bc-knowledge-filter-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 150px;
            flex: 1;
        }
        
        .bc-knowledge-filter-group label {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-knowledge-filter-group label i {
            font-size: 11px;
            opacity: 0.7;
        }
        
        .bc-knowledge-filter-input,
        .bc-knowledge-filter-select {
            padding: 8px 10px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text);
            font-size: 13px;
            transition: border-color 0.2s;
        }
        
        .bc-knowledge-filter-input:focus,
        .bc-knowledge-filter-select:focus {
            outline: none;
            border-color: var(--accent-teal);
        }
        
        .bc-knowledge-filter-tags {
            flex: 100%;
        }
        
        .bc-knowledge-tag-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .bc-knowledge-tag-chip {
            padding: 4px 10px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-knowledge-tag-chip:hover {
            border-color: var(--tag-color, var(--text-muted));
            color: var(--text);
        }
        
        .bc-knowledge-tag-chip.selected {
            background: var(--tag-color, var(--accent-teal));
            border-color: var(--tag-color, var(--accent-teal));
            color: white;
        }
        
        .bc-tag-count {
            font-size: 10px;
            opacity: 0.7;
        }
        
        .bc-knowledge-filter-actions {
            display: flex;
            justify-content: flex-end;
            padding-top: 12px;
            border-top: 1px solid var(--border);
            margin-top: 12px;
        }
        
        /* Search input with clear button */
        .bc-knowledge-filter-search {
            flex: 1.5;
        }
        
        .bc-knowledge-search-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .bc-knowledge-search-wrap .bc-knowledge-filter-input {
            width: 100%;
            padding-right: 30px;
        }
        
        .bc-knowledge-search-clear {
            position: absolute;
            right: 10px;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 12px;
            opacity: 0.6;
            transition: opacity 0.2s, color 0.2s;
        }
        
        .bc-knowledge-search-clear:hover {
            opacity: 1;
            color: var(--accent-red);
        }
        
        /* Clear filters button */
        .bc-knowledge-clear-filters-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: transparent;
            border: 1px dashed var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-knowledge-clear-filters-btn:hover:not(:disabled) {
            border-color: var(--accent-red);
            color: var(--accent-red);
            background: rgba(239, 68, 68, 0.1);
        }
        
        .bc-knowledge-clear-filters-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        
        .bc-knowledge-clear-filters-btn i {
            font-size: 11px;
        }
        
        /* Post tags display */
        .bc-knowledge-post-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
            align-items: center;
        }
        
        .bc-knowledge-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            background: var(--tag-color, #6b7280);
            color: white;
            font-size: 11px;
            font-weight: 500;
            border-radius: 10px;
            transition: opacity 0.2s;
        }
        
        .bc-knowledge-tag-remove {
            display: none;
            background: none;
            border: none;
            padding: 0;
            margin-left: 2px;
            color: white;
            cursor: pointer;
            font-size: 10px;
            opacity: 0.7;
        }
        
        .bc-knowledge-tag:hover .bc-knowledge-tag-remove {
            display: inline;
        }
        
        .bc-knowledge-tag-remove:hover {
            opacity: 1;
        }
        
        .bc-knowledge-add-tag-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            background: var(--bg-secondary);
            border: 1px dashed var(--border);
            border-radius: 11px;
            color: var(--text-muted);
            font-size: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-knowledge-add-tag-btn:hover {
            background: var(--surface);
            border-color: var(--accent-teal);
            border-style: solid;
            color: var(--accent-teal);
        }
        
        .bc-knowledge-tag-input-wrap {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-knowledge-tag-input {
            width: 120px;
            padding: 4px 8px;
            border: 1px solid var(--accent-teal);
            border-radius: 10px;
            background: var(--surface);
            color: var(--text);
            font-size: 11px;
            outline: none;
        }
        
        .bc-knowledge-tag-input::placeholder {
            color: var(--text-muted);
        }
        
        .bc-knowledge-tag-input-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            background: var(--accent-teal);
            border: none;
            border-radius: 10px;
            color: white;
            font-size: 10px;
            cursor: pointer;
        }
        
        .bc-knowledge-tag-input-btn:disabled {
            background: var(--text-muted);
            cursor: not-allowed;
        }
        
        /* Inline comments section */
        .bc-knowledge-inline-comments {
            margin-top: 16px;
            padding: 16px;
            padding-left: 64px;
            background: var(--bg-tertiary, var(--bg-secondary));
            border-radius: var(--radius);
            border-top: 1px solid var(--border);
        }
        
        .bc-knowledge-no-comments {
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
            padding: 12px;
        }
        
        .bc-knowledge-comments-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .bc-knowledge-comment {
            background: var(--surface);
            padding: 10px 12px;
            border-radius: var(--radius);
            border: 1px solid var(--border);
        }
        
        .bc-knowledge-comment-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
            font-size: 12px;
        }
        
        .bc-knowledge-comment-author {
            font-weight: 600;
            color: var(--text);
        }
        
        .bc-knowledge-comment-time {
            color: var(--text-muted);
        }
        
        .bc-knowledge-comment-delete {
            margin-left: auto;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px 6px;
            font-size: 11px;
            border-radius: var(--radius-sm);
            transition: all 0.15s;
        }
        
        .bc-knowledge-comment-delete:hover {
            color: var(--accent-red);
            background: var(--bg-red-tint, rgba(239, 68, 68, 0.1));
        }
        
        .bc-knowledge-comment-content {
            font-size: 13px;
            line-height: 1.5;
            color: var(--text);
            margin: 0;
            white-space: pre-line;
        }
        
        .bc-knowledge-add-comment-inline {
            display: flex;
            gap: 8px;
            align-items: flex-end;
            margin-top: 12px;
        }
        
        .bc-knowledge-comment-input {
            flex: 1;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius, 6px);
            background: var(--surface);
            color: var(--text);
            font-size: 13px;
            line-height: 1.4;
            resize: none;
            transition: border-color 0.2s;
            font-family: inherit;
        }
        
        .bc-knowledge-comment-input:focus {
            outline: none;
            border-color: var(--accent-teal);
        }
        
        .bc-knowledge-comment-input::placeholder {
            color: var(--text-muted);
        }
        
        .bc-knowledge-add-comment-inline .btn {
            padding: 8px 12px;
            height: auto;
            min-height: 38px;
        }
        
        .bc-knowledge-add-comment-inline .btn i {
            font-size: 14px;
        }

        /* Type Toggle */
        .bc-type-toggle {
            display: flex;
            gap: 8px;
        }

        .bc-type-btn {
            flex: 1;
            padding: 12px;
            background: var(--bg-secondary);
            border: 2px solid var(--border);
            border-radius: var(--radius);
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s;
        }

        .bc-type-btn:hover {
            border-color: var(--text-muted);
        }

        .bc-type-btn.active {
            background: var(--bg-teal-tint, rgba(20, 184, 166, 0.1));
            border-color: var(--accent-teal);
            color: var(--accent-teal);
        }

        /* ===== KB DASHBOARD PREVIEW ===== */
        .bc-kb-preview-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-kb-preview-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px;
            background: var(--bg);
            border-radius: var(--radius);
            transition: background 0.15s;
        }
        
        .bc-kb-preview-item:hover {
            background: var(--bg-hover);
        }
        
        .bc-kb-preview-item.skeleton {
            padding: 12px;
        }
        
        .bc-kb-preview-icon {
            width: 24px;
            height: 24px;
            border-radius: var(--radius-sm);
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 11px;
        }
        
        .bc-kb-preview-content {
            flex: 1;
            min-width: 0;
        }
        
        .bc-kb-preview-title {
            font-size: 13px;
            font-weight: 500;
            color: var(--text);
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .bc-kb-preview-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 4px;
            font-size: 11px;
            color: var(--text-muted);
        }
        
        .bc-kb-preview-meta i {
            font-size: 10px;
            margin-right: 2px;
        }

        /* ===== HEY! NOTIFICATIONS STYLES ===== */
        .bc-hey-container {
            max-width: 700px;
            margin: 0 auto;
            padding: 24px;
        }
        
        .bc-hey-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }
        
        .bc-hey-title {
            font-size: 24px;
            font-weight: 600;
        }
        
        .bc-hey-actions {
            display: flex;
            gap: 8px;
        }
        
        .bc-hey-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-secondary);
        }
        
        .bc-hey-empty-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }
        
        .bc-hey-sections {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }
        
        .bc-hey-section {
        }
        
        .bc-hey-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding: 0 4px;
        }
        
        .bc-hey-section-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .bc-hey-section-title.bc-hey-new {
            color: var(--badge-orange-text);
        }
        
        .bc-hey-mark-read-link {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 13px;
            cursor: pointer;
            padding: 0;
        }
        
        .bc-hey-mark-read-link:hover {
            color: var(--primary);
            text-decoration: underline;
        }
        
        .bc-hey-list {
            background: var(--surface);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border);
            overflow: hidden;
        }
        
        .bc-hey-item {
            display: flex;
            gap: 12px;
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            transition: background 0.15s;
            text-decoration: none;
            color: inherit;
        }
        
        .bc-hey-item:last-child {
            border-bottom: none;
        }
        
        .bc-hey-item:hover {
            background: var(--bg);
            text-decoration: none;
            color: inherit;
        }
        
        .bc-hey-item.unread {
            background: var(--bg-amber-tint);
        }
        
        .bc-hey-item.unread:hover {
            background: var(--bg-amber-tint);
        }
        
        /* Read/previous notifications - dimmed */
        .bc-hey-item.read {
            opacity: 0.6;
        }
        
        .bc-hey-item.read:hover {
            opacity: 0.85;
        }
        
        .bc-hey-item.read .bc-hey-item-title {
            font-weight: 400;
        }
        
        .bc-hey-item.read .bc-hey-item-icon {
            opacity: 0.7;
        }
        
        /* Last checked indicator */
        .bc-hey-status-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            background: var(--bg);
            border-radius: var(--radius);
            margin-bottom: 16px;
            font-size: 12px;
            color: var(--text-muted);
        }
        
        .bc-hey-status-bar .bc-hey-checking {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--primary);
        }
        
        .bc-hey-status-bar .bc-hey-checking i {
            animation: spin 1s linear infinite;
        }
        
        .bc-hey-item-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
            background: var(--bg);
        }
        
        .bc-hey-item-icon.todo_assigned { background: var(--badge-blue-bg); }
        .bc-hey-item-icon.mention { background: var(--badge-yellow-bg); }
        .bc-hey-item-icon.todo_comment { background: var(--badge-green-bg); }
        .bc-hey-item-icon.comment_reply { background: var(--badge-purple-bg); }
        .bc-hey-item-icon.basecamp_sync { background: var(--badge-indigo-bg); }
        
        .bc-hey-item-content {
            flex: 1;
            min-width: 0;
        }
        
        .bc-hey-item-title {
            font-weight: 500;
            color: var(--text);
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-hey-item.unread .bc-hey-item-title {
            font-weight: 600;
        }
        
        .bc-hey-item-meta {
            display: flex;
            gap: 8px;
            font-size: 12px;
            color: var(--text-secondary);
            flex-wrap: wrap;
        }
        
        .bc-hey-actor {
            font-weight: 500;
        }
        
        .bc-hey-project {
            color: var(--primary);
        }
        
        .bc-hey-item-excerpt {
            margin-top: 6px;
            font-size: 13px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-hey-item-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .bc-hey-delete-btn {
            display: none;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 14px;
            flex-shrink: 0;
            transition: all 0.15s ease;
            z-index: 2;
        }

        .bc-hey-item:hover .bc-hey-delete-btn {
            display: flex;
        }

        .bc-hey-delete-btn:hover {
            background: var(--badge-red-bg);
            color: var(--accent-red);
        }

        /* Pin button */
        .bc-hey-pin-btn {
            display: none;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 13px;
            flex-shrink: 0;
            transition: all 0.15s ease;
            z-index: 2;
        }

        .bc-hey-item:hover .bc-hey-pin-btn {
            display: flex;
        }

        /* Always show pin icon on pinned items */
        .bc-hey-item.pinned .bc-hey-pin-btn {
            display: flex;
        }

        .bc-hey-pin-btn:hover {
            background: var(--badge-red-bg, rgba(231, 76, 60, 0.15));
            color: var(--badge-red-bg, #e74c3c);
        }

        /* Don't Forget / Pinned section styling */
        .bc-hey-section-title.bc-hey-pinned {
            color: var(--badge-red-bg, #e74c3c);
            font-weight: 700;
        }

        .bc-hey-item.pinned {
            border-left: 3px solid var(--badge-red-bg, #e74c3c);
        }
        
        .bc-hey-unread-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent-orange);
            flex-shrink: 0;
        }
        
        /* Completed/Archived project indicator */
        .bc-hey-item.project-completed {
            background: var(--bg-hover);
            border-left: 3px solid #9ca3af;
        }
        
        .bc-hey-item.project-completed:hover {
            background: var(--border);
        }
        
        .bc-hey-item.project-completed .bc-hey-item-icon {
            opacity: 0.6;
        }
        
        .bc-hey-item.project-completed .bc-hey-item-title {
            color: var(--text-secondary);
        }
        
        .bc-hey-completed-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 6px;
            background: var(--text-muted);
            color: white;
            font-size: 10px;
            font-weight: 600;
            border-radius: 4px;
            margin-left: 8px;
            text-transform: uppercase;
        }
        
        .bc-hey-completed-badge i {
            font-size: 9px;
        }
        
        /* Todo completed badge - green */
        .bc-hey-completed-badge.bc-hey-todo-done {
            background: var(--accent-green);
        }
        
        /* Todo completed item styling */
        .bc-hey-item.todo-completed {
            background: var(--bg-green-tint);
            border-left: 3px solid var(--accent-green);
        }
        
        .bc-hey-item.todo-completed:hover {
            background: var(--badge-green-bg);
        }
        
        .bc-hey-item.todo-completed .bc-hey-item-title {
            text-decoration: line-through;
            color: var(--text-secondary);
        }

        /* ===== ADMIN PANEL STYLES ===== */
        .bc-admin-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 24px;
        }
        
        .bc-admin-tabs {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 4px;
            margin-bottom: 24px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 4px;
        }
        
        .bc-admin-tab-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 12px 8px;
            border: none;
            background: transparent;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.15s ease;
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 500;
        }
        
        .bc-admin-tab-btn i {
            font-size: 16px;
        }
        
        .bc-admin-tab-btn span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }
        
        .bc-admin-tab-btn .bc-tab-desc {
            display: none;
        }
        
        .bc-admin-tab-btn:hover {
            background: var(--bg);
            color: var(--text);
        }
        
        .bc-admin-tab-btn.active {
            background: var(--primary);
            color: white;
        }
        
        @media (max-width: 900px) {
            .bc-admin-tabs {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        @media (max-width: 500px) {
            .bc-admin-tabs {
                grid-template-columns: 1fr;
                gap: 2px;
            }
            .bc-admin-tab-btn {
                flex-direction: row !important;
                align-items: center !important;
                justify-content: flex-start !important;
                gap: 12px !important;
                padding: 14px 16px !important;
                text-align: left !important;
            }
            .bc-admin-tab-btn i {
                font-size: 18px;
                width: 24px;
                flex-shrink: 0;
            }
            .bc-admin-tab-btn span {
                display: inline !important;
                font-size: 13px !important;
                font-weight: 500 !important;
            }
            .bc-admin-tab-btn .bc-tab-desc {
                display: block !important;
                font-size: 11px !important;
                color: var(--text-muted) !important;
                font-weight: 400 !important;
                margin-top: 2px !important;
            }
            .bc-admin-tab-btn.active .bc-tab-desc {
                color: rgba(255,255,255,0.8) !important;
            }
        }
        
        .bc-admin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }
        
        .bc-admin-title {
            font-size: 24px;
            font-weight: 600;
        }
        
        .bc-admin-table {
            width: 100%;
            background: var(--surface);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border);
            overflow: hidden;
        }
        
        .bc-admin-table table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .bc-admin-table th {
            text-align: left;
            padding: 12px 16px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }
        
        .bc-admin-table td {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-light);
            vertical-align: middle;
        }
        
        .bc-admin-table tr:last-child td {
            border-bottom: none;
        }
        
        .bc-admin-table tr:hover td {
            background: var(--bg);
        }
        
        /* Responsive admin table */
        .bc-admin-table-responsive {
            overflow-x: auto;
        }
        
        .bc-admin-table-responsive table {
            min-width: 900px;
        }
        
        .bc-admin-table th,
        .bc-admin-table td {
            padding: 10px 12px;
            font-size: 13px;
        }
        
        /* Compact toggle for admin table */
        .bc-toggle-compact {
            width: 36px;
            padding-right: 0;
        }
        
        .bc-toggle-compact .bc-toggle-label {
            display: none;
        }
        
        /* Compact admin actions */
        .bc-admin-actions-compact {
            display: flex;
            gap: 1px;
            flex-wrap: wrap;
            max-width: 220px;
        }
        
        .bc-admin-actions-compact .btn {
            padding: 3px 5px;
            font-size: 12px;
        }

        /* Transfer modal stat cards */
        .bc-transfer-stat {
            background: var(--surface-hover);
            padding: 12px 18px;
            border-radius: var(--radius);
            text-align: center;
            min-width: 100px;
            flex: 1;
        }
        .bc-transfer-stat-value {
            font-size: 22px;
            font-weight: 700;
            line-height: 1.2;
        }
        .bc-transfer-stat-label {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
        }
        
        /* Login event badges */
        .bc-event-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .bc-event-login { background: var(--badge-green-bg); color: var(--badge-green-text); }
        .bc-event-logout { background: var(--bg-hover); color: var(--text-secondary); }
        .bc-event-magic_link { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
        .bc-event-auto_login { background: var(--badge-yellow-bg); color: var(--badge-yellow-text); }
        .bc-event-failed_login { background: var(--badge-red-bg); color: var(--accent-red); }
        
        .bc-role-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .bc-role-badge.superadmin {
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
        }
        
        .bc-role-badge.user,
        .bc-role-badge.employee {
            background: var(--badge-blue-bg);
            color: var(--badge-blue-text);
        }
        
        .bc-role-badge.client {
            background: var(--badge-green-bg);
            color: var(--badge-green-text);
        }
        
        /* Group badge styles */
        .bc-group-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .bc-group-badge.yellow { background: var(--badge-yellow-bg); color: var(--badge-yellow-text); }
        .bc-group-badge.green { background: var(--badge-green-bg); color: var(--badge-green-text); }
        .bc-group-badge.blue { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
        .bc-group-badge.pink { background: var(--badge-pink-bg); color: var(--badge-pink-text); }
        .bc-group-badge.orange { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
        .bc-group-badge.purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
        .bc-group-badge.teal { background: var(--badge-teal-bg); color: var(--badge-teal-text); }
        .bc-group-badge.red { background: var(--badge-red-bg); color: var(--accent-red); }
        .bc-group-badge.gray { background: var(--bg-hover); color: var(--text-secondary); }
        
        /* ===== HEALTH CHECK STYLES ===== */
        .bc-health-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 13px;
        }
        .bc-health-ok { background: var(--badge-green-bg); color: var(--badge-green-text); }
        .bc-health-warning { background: var(--badge-yellow-bg); color: var(--badge-yellow-text); }
        .bc-health-error { background: var(--badge-red-bg); color: var(--badge-red-text); }
        
        .bc-health-env-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            padding: 12px 16px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            margin-bottom: 20px;
        }
        .bc-health-env-bar .bc-health-env-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        .bc-health-env-bar .bc-health-env-item i {
            color: var(--text-muted);
        }
        
        .bc-health-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 16px;
        }
        
        .bc-health-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: box-shadow 0.2s;
        }
        .bc-health-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        .bc-health-card-ok { border-left: 4px solid var(--accent-green); }
        .bc-health-card-warning { border-left: 4px solid var(--accent-yellow); }
        .bc-health-card-error { border-left: 4px solid var(--accent-red); }
        
        .bc-health-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            background: var(--bg);
            border-bottom: 1px solid var(--border-light);
        }
        .bc-health-card-icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: var(--surface);
            color: var(--primary);
            font-size: 16px;
        }
        .bc-health-card-title {
            flex: 1;
        }
        .bc-health-card-title h3 {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
        }
        .bc-health-time {
            font-size: 11px;
            color: var(--text-muted);
        }
        .bc-health-card-status {
            font-size: 18px;
        }
        .bc-health-card-status .fa-check-circle { color: var(--accent-green); }
        .bc-health-card-status .fa-exclamation-triangle { color: var(--accent-yellow); }
        .bc-health-card-status .fa-times-circle { color: var(--accent-red); }
        
        .bc-health-card-body {
            padding: 14px 16px;
        }
        .bc-health-card-body > p {
            margin: 0 0 12px 0;
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .bc-health-details {
            font-size: 12px;
        }
        .bc-health-detail-row {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            border-bottom: 1px dashed var(--border-light);
        }
        .bc-health-detail-row:last-child {
            border-bottom: none;
        }
        .bc-health-detail-row span:first-child {
            color: var(--text-muted);
        }
        
        .bc-health-tables {
            margin-top: 10px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px 12px;
        }
        .bc-health-table-item {
            display: flex;
            justify-content: space-between;
            padding: 3px 8px;
            background: var(--bg);
            border-radius: 4px;
            font-size: 11px;
        }
        .bc-health-count {
            font-weight: 600;
            color: var(--primary);
        }
        
        .bc-health-error-msg {
            margin-top: 8px;
            padding: 8px 10px;
            background: var(--badge-red-bg);
            color: var(--badge-red-text);
            border-radius: 6px;
            font-size: 12px;
        }
        
        .bc-health-disk-bar {
            margin-top: 8px;
        }
        .bc-health-disk-info {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }
        .bc-health-disk-progress {
            height: 6px;
            background: var(--bg);
            border-radius: 3px;
            overflow: hidden;
        }
        .bc-health-disk-fill {
            height: 100%;
            background: linear-gradient(90deg, #22c55e 0%, #f59e0b 70%, #ef4444 100%);
            border-radius: 3px;
            transition: width 0.3s;
        }
        
        .bc-health-dirs {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .bc-health-dir-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            background: var(--bg);
            border-radius: 4px;
            font-size: 11px;
        }
        
        .bc-health-ext-grid, .bc-health-env-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .bc-health-ext-item, .bc-health-env-item-row {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            background: var(--bg);
            border-radius: 4px;
            font-size: 11px;
        }
        
        .bc-health-error {
            padding: 16px 20px;
            background: var(--badge-red-bg);
            border: 1px solid var(--border-red-light);
            border-radius: var(--radius-lg);
            color: var(--badge-red-text);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .bc-health-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-muted);
        }
        .bc-health-empty i {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.3;
        }
        .bc-health-empty h3 {
            margin: 0 0 8px 0;
            font-size: 18px;
            color: var(--text-secondary);
        }
        .bc-health-empty p {
            margin: 0 0 20px 0;
        }
        
        .text-success { color: var(--accent-green) !important; }
        .text-danger { color: var(--accent-red) !important; }
        .text-muted { color: var(--text-muted) !important; }
        
        /* Notification Engine styles */
        .bc-stat-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 20px;
            text-align: center;
        }
        
        .bc-stat-value {
            font-size: 32px;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1;
            margin-bottom: 6px;
        }
        
        .bc-stat-label {
            font-size: 13px;
            color: var(--text-muted);
        }
        
        .bc-stat-warning .bc-stat-value {
            color: var(--accent-yellow);
        }
        
        .bc-stat-success .bc-stat-value {
            color: var(--accent-green);
        }
        
        .bc-stat-info .bc-stat-value {
            color: var(--accent-blue);
        }
        
        .bc-vacation-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
            border-radius: 16px;
            font-size: 13px;
            font-weight: 500;
        }
        
        .bc-vacation-badge.bc-vacation-scheduled {
            background: var(--badge-blue-bg);
            color: var(--badge-blue-text);
        }
        
        .bc-vacation-dates {
            font-size: 11px;
            opacity: 0.8;
        }
        
        .bc-cron-status {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .bc-cron-status.completed {
            background: var(--badge-green-bg);
            color: var(--badge-green-text);
        }
        
        .bc-cron-status.running {
            background: var(--badge-blue-bg);
            color: var(--badge-blue-text);
        }
        
        .bc-cron-status.failed {
            background: var(--badge-red-bg);
            color: var(--accent-red);
        }
        
        /* Queue status badges */
        .bc-queue-status {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }
        .bc-queue-status.pending {
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
        }
        .bc-queue-status.batched {
            background: var(--badge-blue-bg);
            color: var(--badge-blue-text);
        }
        .bc-queue-status.vacation_hold {
            background: var(--badge-pink-bg);
            color: var(--badge-pink-text);
        }
        .bc-queue-status.sent {
            background: var(--badge-green-bg);
            color: var(--badge-green-text);
        }
        
        /* Delivery mode badges */
        .bc-delivery-mode {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 500;
            background: var(--card-bg);
            border: 1px solid var(--border-light);
        }
        .bc-delivery-mode.instant {
            border-color: var(--accent-yellow);
            color: var(--badge-yellow-text);
        }
        .bc-delivery-mode.smart_batch {
            border-color: var(--accent-blue);
            color: var(--badge-blue-text);
        }
        .bc-delivery-mode.daily_digest {
            border-color: var(--accent-purple);
            color: var(--badge-purple-text);
        }
        
        /* Event type badges */
        .bc-event-type {
            font-family: monospace;
            font-size: 11px;
            padding: 2px 6px;
            background: var(--bg-subtle);
            border-radius: 4px;
        }

        /* User notification settings styles */
        .bc-toggle {
            position: relative;
            display: inline-flex;
            width: 48px;
            height: 26px;
            flex-shrink: 0;
        }
        
        .bc-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }
        
        .bc-toggle .bc-toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--text-disabled);
            transition: 0.3s;
            border-radius: 26px;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .bc-toggle .bc-toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        
        .bc-toggle input:checked + .bc-toggle-slider {
            background-color: var(--accent-green);
        }
        
        .bc-toggle input:checked + .bc-toggle-slider:before {
            transform: translateX(22px);
        }
        
        .bc-toggle:hover .bc-toggle-slider {
            background-color: var(--text-muted);
        }
        
        .bc-toggle input:checked + .bc-toggle-slider:hover,
        .bc-toggle:hover input:checked + .bc-toggle-slider {
            background-color: var(--accent-green);
        }
        
        .bc-day-badge {
            display: inline-block;
            width: 28px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            border-radius: 50%;
            font-size: 11px;
            font-weight: 500;
            background: var(--bg-secondary);
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .bc-day-badge:hover {
            background: var(--border);
        }
        
        .bc-day-badge.active {
            background: var(--accent-blue);
            color: white;
        }
        
        .bc-day-badge-lg {
            width: 36px;
            height: 36px;
            line-height: 36px;
            font-size: 13px;
        }
        
        .bc-checkbox-label {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 13px;
            user-select: none;
        }
        
        .bc-checkbox-label input[type="checkbox"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            cursor: pointer;
            border: 2px solid var(--border-dark);
            border-radius: 4px;
            background: var(--surface);
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .bc-checkbox-label input[type="checkbox"]:hover {
            border-color: var(--accent-blue);
        }
        
        .bc-checkbox-label input[type="checkbox"]:checked {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
        }
        
        .bc-checkbox-label input[type="checkbox"]:checked::after {
            content: '✓';
            color: white;
            font-size: 12px;
            font-weight: bold;
        }
        
        .bc-checkbox-label span {
            user-select: none;
            line-height: 1.4;
        }
        
        .bc-settings-list {
            display: flex;
            flex-direction: column;
        }
        
        .bc-settings-list .bc-checkbox-label {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        
        .bc-card-link {
            transition: all 0.15s;
        }
        
        .bc-card-link:hover {
            border-color: var(--accent-blue);
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
        }
        
        /* API Keys styles */
        .bc-api-keys-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-api-key-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            background: var(--bg);
            border-radius: var(--radius);
            transition: background 0.15s;
        }
        
        .bc-api-key-item:hover {
            background: var(--bg-hover);
        }
        
        .bc-debug-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            text-decoration: none;
            color: var(--text);
            font-size: 12px;
            transition: all 0.15s;
        }
        
        .bc-debug-link:hover {
            background: var(--badge-yellow-bg);
            border-color: var(--accent-yellow);
        }
        
        .bc-debug-link i {
            color: var(--accent-yellow);
            font-size: 11px;
        }
        
        .bc-preset-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 16px;
            border: 2px solid var(--border);
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all 0.15s;
            text-align: center;
            color: var(--text-muted);
        }
        
        .bc-preset-card:hover {
            border-color: var(--accent-blue);
            color: var(--text-primary);
        }
        
        .bc-preset-card.active {
            border-color: var(--accent-blue);
            background: var(--badge-blue-bg);
            color: var(--badge-blue-text);
        }
        
        .bc-preset-card.loading {
            opacity: 0.7;
            cursor: wait;
        }
        
        .bc-notif-events-list {
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
        }
        
        .bc-notif-event-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .bc-notif-event-row:last-child {
            border-bottom: none;
        }
        
        .bc-notif-event-row:hover {
            background: var(--bg);
        }
        
        .bc-notif-event-info {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 13px;
            flex: 1;
        }
        
        /* Email logs list for user */
        .bc-email-logs-list {
            display: flex;
            flex-direction: column;
            gap: 1px;
            background: var(--border-light);
            border-radius: var(--radius);
            overflow: hidden;
        }
        
        .bc-email-log-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: var(--surface);
            cursor: pointer;
            transition: background 0.15s;
        }
        
        .bc-email-log-item:hover {
            background: var(--bg);
        }
        
        .bc-email-log-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--bg);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .bc-email-log-content {
            flex: 1;
            min-width: 0;
        }
        
        .bc-email-log-subject {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-email-log-meta {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
        }
        
        .form-input-sm, .form-select-sm {
            padding: 6px 10px;
            font-size: 13px;
        }
        
        .bc-member-groups {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        
        /* Groups section */
        .bc-groups-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-group-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: var(--bg);
            border-radius: var(--radius);
            border-left: 3px solid #9ca3af;
        }
        
        .bc-group-item.yellow { border-left-color: var(--accent-yellow); }
        .bc-group-item.green { border-left-color: var(--accent-green); }
        .bc-group-item.blue { border-left-color: var(--accent-blue); }
        .bc-group-item.pink { border-left-color: var(--accent-pink); }
        .bc-group-item.orange { border-left-color: var(--accent-orange); }
        .bc-group-item.purple { border-left-color: var(--accent-purple); }
        .bc-group-item.teal { border-left-color: #14b8a6; }
        .bc-group-item.red { border-left-color: var(--accent-red); }
        .bc-group-item.gray { border-left-color: var(--text-secondary); }
        
        .bc-group-info {
            flex: 1;
        }
        
        .bc-group-name {
            font-weight: 500;
        }
        
        .bc-group-slug {
            font-size: 11px;
            color: var(--text-muted);
            font-family: monospace;
        }
        
        .bc-group-members-count {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .bc-color-picker-inline {
            display: flex;
            gap: 4px;
            margin-top: 8px;
        }
        
        .bc-color-dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: transform 0.1s, border-color 0.1s;
        }
        
        .bc-color-dot:hover {
            transform: scale(1.1);
        }
        
        .bc-color-dot.selected {
            border-color: var(--text);
        }
        
        .bc-color-dot.yellow { background: var(--accent-yellow); }
        .bc-color-dot.green { background: var(--accent-green); }
        .bc-color-dot.blue { background: var(--accent-blue); }
        .bc-color-dot.pink { background: var(--accent-pink); }
        .bc-color-dot.orange { background: var(--accent-orange); }
        .bc-color-dot.purple { background: var(--accent-purple); }
        .bc-color-dot.teal { background: var(--accent-teal); }
        .bc-color-dot.red { background: var(--accent-red); }
        .bc-color-dot.gray { background: var(--text-secondary); }
        
        /* Groups grid for admin */
        .bc-groups-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
        }
        
        .bc-group-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            padding: 20px;
            transition: box-shadow 0.2s;
        }
        
        .bc-group-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .bc-group-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }
        
        .bc-group-actions {
            display: flex;
            gap: 4px;
        }
        
        .bc-group-description {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 16px;
            line-height: 1.4;
        }
        
        .bc-group-members {
            border-top: 1px solid var(--border-color);
            padding-top: 12px;
        }
        
        .bc-group-members-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .bc-member-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .bc-member-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border-radius: var(--radius-sm);
            transition: background 0.15s;
        }
        
        .bc-member-item:hover {
            background: var(--bg-secondary);
        }
        
        .bc-member-item:hover .btn-ghost {
            opacity: 1;
        }
        
        .bc-member-name {
            flex: 1;
            font-size: 13px;
        }
        
        .btn-ghost {
            opacity: 1;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: var(--radius-sm);
            transition: opacity 0.15s, color 0.15s;
        }
        
        .btn-ghost:hover {
            color: var(--danger);
        }
        
        .bc-variable-item .btn-ghost,
        .bc-member-item .btn-ghost {
            opacity: 0;
        }
        
        .bc-variable-item:hover .btn-ghost,
        .bc-member-item:hover .btn-ghost {
            opacity: 1;
        }
        
        .bc-color-btn {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 11px;
            border: 2px solid transparent;
            cursor: pointer;
            transition: border-color 0.2s, transform 0.1s;
        }
        
        .bc-color-btn:hover {
            transform: scale(1.05);
        }
        
        .bc-color-btn.selected {
            border-color: var(--text);
        }
        
        .bc-badge-yellow { background: var(--badge-yellow-bg); color: var(--badge-yellow-text); }
        .bc-badge-green { background: var(--badge-green-bg); color: var(--badge-green-text); }
        .bc-badge-blue { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
        .bc-badge-pink { background: var(--badge-pink-bg); color: var(--badge-pink-text); }
        .bc-badge-orange { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
        .bc-badge-purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
        .bc-badge-teal { background: var(--badge-teal-bg); color: var(--badge-teal-text); }
        .bc-badge-red { background: var(--badge-red-bg); color: var(--accent-red); }
        .bc-badge-gray { background: var(--bg-hover); color: var(--text-secondary); }
        
        .bc-user-list {
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
        }
        
        .bc-user-list-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            cursor: pointer;
            transition: background 0.15s;
            border-bottom: 1px solid var(--border-color);
        }
        
        .bc-user-list-item:last-child {
            border-bottom: none;
        }
        
        .bc-user-list-item:hover {
            background: var(--bg-secondary);
        }
        
        .bc-empty-state {
            text-align: center;
            padding: 60px 20px;
        }
        
        .bc-empty-state h3 {
            margin: 0 0 8px 0;
            color: var(--text-primary);
        }
        
        .bc-empty-state p {
            color: var(--text-muted);
            margin: 0;
        }

        /* Toast notifications */
        .bc-toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 999999;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-toast {
            padding: 12px 20px;
            border-radius: var(--radius);
            font-size: 13px;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            animation: bc-toast-in 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            max-width: 350px;
        }
        
        .bc-toast.success {
            background: var(--badge-green-bg);
            border: 1px solid var(--border-green-light);
            color: var(--badge-green-text);
        }
        
        .bc-toast.error {
            background: var(--bg-red-tint);
            border: 1px solid var(--border-red-light);
            color: var(--accent-red);
        }
        
        .bc-toast.info {
            background: var(--badge-blue-bg);
            border: 1px solid var(--border-blue-light);
            color: var(--badge-blue-text);
        }
        
        .bc-toast.warning {
            background: var(--bg-amber-tint);
            border: 1px solid var(--border-yellow-light);
            color: var(--badge-yellow-text);
            max-width: 480px;
        }
        
        .bc-toast-clickable {
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        
        .bc-toast-clickable:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }
        
        .bc-toast.fade-out {
            animation: bc-toast-out 0.3s ease forwards;
        }
        
        @keyframes bc-toast-in {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes bc-toast-out {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(50px);
            }
        }

        /* Scroll to Top Button */
        .bc-scroll-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 44px;
            height: 44px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(29, 78, 216, 0.4);
            transition: all 0.2s ease;
            opacity: 0.9;
        }
        
        .bc-scroll-to-top:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(29, 78, 216, 0.5);
            opacity: 1;
        }
        
        .bc-scroll-to-top:active {
            transform: translateY(0);
        }
        
        /* Hide scroll-to-top button on mobile - overlaps with mobile menu */
        @media (max-width: 768px) {
            .bc-scroll-to-top {
                display: none !important;
            }
        }

        .bc-admin-actions {
            display: flex;
            gap: 4px;
        }
        
        .bc-admin-actions .btn-ghost {
            color: var(--primary) !important;
            opacity: 1 !important;
        }
        
        .bc-admin-actions .btn-ghost i {
            color: var(--primary) !important;
        }
        
        .bc-admin-actions .btn-ghost:hover {
            background: var(--primary-light);
            color: var(--primary);
        }
        
        .btn-danger {
            background: var(--bg-red-tint);
            color: var(--accent-red);
            border: 1px solid var(--border-red-light);
        }
        
        .btn-danger:hover {
            background: var(--badge-red-bg);
        }
        
        .btn-ghost.btn-danger {
            background: transparent;
            color: var(--accent-red);
            border: none;
        }
        
        .btn-ghost.btn-danger:hover {
            background: var(--bg-red-tint);
            color: var(--accent-red);
        }
        
        /* Password display box */
        .bc-password-box {
            background: var(--bg-green-tint);
            border: 1px solid var(--border-green-light);
            border-radius: var(--radius);
            padding: 16px;
            margin: 16px 0;
        }
        
        .bc-password-box strong {
            display: block;
            font-size: 18px;
            font-family: monospace;
            color: var(--badge-green-text);
            margin-top: 8px;
        }
        
        /* Email log styles */
        .email-status {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .email-status.sent {
            background: var(--badge-green-bg);
            color: var(--badge-green-text);
        }
        
        .email-status.failed {
            background: var(--bg-red-tint);
            color: var(--accent-red);
        }
        
        .email-status.pending {
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
        }
        
        /* Email Inbox specific status badges */
        .email-status.new {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            color: white;
            font-weight: 600;
            animation: pulse-new 2s ease-in-out infinite;
        }
        
        @keyframes pulse-new {
            0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
            50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0); }
        }
        
        .email-status.routed {
            background: linear-gradient(135deg, #16a34a, #22c55e);
            color: white;
            font-weight: 500;
        }
        
        .email-status.routed::before {
            content: '✓';
            margin-right: 4px;
            font-weight: bold;
        }
        
        .email-status.error {
            background: linear-gradient(135deg, #dc2626, #ef4444);
            color: white;
            font-weight: 500;
        }
        
        .email-status.error::before {
            content: '⚠';
            margin-right: 4px;
        }
        
        /* Email inbox row states */
        .email-inbox-row-new {
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), transparent) !important;
        }
        
        .email-inbox-row-new:hover {
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)) !important;
        }
        
        .email-inbox-row-routed {
            background: linear-gradient(90deg, rgba(22, 163, 74, 0.05), transparent) !important;
        }
        
        .email-inbox-row-error {
            background: linear-gradient(90deg, rgba(220, 38, 38, 0.08), transparent) !important;
        }
        
        .email-badge-redirected {
            margin-left: 6px;
            font-size: 14px;
        }
        
        .email-redirected {
            background: var(--bg-amber-tint);
        }
        
        .bc-template-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 11px;
            color: var(--accent-blue);
            text-decoration: none;
            padding: 2px 6px;
            border-radius: 4px;
            background: var(--bg-blue-tint, rgba(78, 140, 239, 0.08));
            transition: background 0.15s ease, color 0.15s ease;
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .bc-template-link:hover {
            background: var(--accent-blue);
            color: #fff;
        }
        .bc-template-link i {
            font-size: 10px;
            flex-shrink: 0;
        }
        
        /* Project Budget Progress Bar - full width under menu */
        .bc-project-progress-bar {
            width: 100%;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            transition: all 0.2s ease;
        }
        
        .bc-progress-content {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 24px;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
            transition: background 0.15s ease;
        }
        
        .bc-progress-content:hover {
            background: var(--bg);
        }
        
        .bc-progress-track {
            flex: 0 0 200px;
            height: 6px;
            background: var(--border);
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }
        
        .bc-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #10b981, #34d399);
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        
        .bc-progress-ok .bc-progress-fill {
            background: linear-gradient(90deg, #10b981, #34d399);
        }
        
        .bc-progress-warning .bc-progress-fill {
            background: linear-gradient(90deg, #f59e0b, #fbbf24);
        }
        
        .bc-progress-over .bc-progress-fill {
            background: linear-gradient(90deg, #ef4444, #f87171);
        }
        
        .bc-progress-retainer .bc-progress-expected {
            position: absolute;
            top: -3px;
            bottom: -3px;
            width: 2px;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }
        
        .bc-progress-info {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 13px;
            flex: 1;
        }
        
        .bc-progress-info > i:first-child {
            color: var(--primary);
            font-size: 14px;
            width: 16px;
            text-align: center;
        }
        
        .bc-progress-label {
            font-weight: 600;
            color: var(--text);
        }
        
        .bc-progress-month {
            color: var(--text-muted);
            font-size: 12px;
        }
        
        .bc-progress-stats {
            color: var(--text-secondary);
        }
        
        .bc-progress-stats strong {
            color: var(--text);
        }
        
        .bc-progress-percent {
            color: var(--text-muted);
            font-size: 12px;
        }
        
        .bc-progress-warning {
            color: var(--accent-red);
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-progress-remaining {
            color: var(--accent-green);
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-progress-pace {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-pace-ahead {
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
        }
        
        .bc-pace-behind {
            background: var(--badge-blue-bg);
            color: var(--badge-blue-text);
        }
        
        .bc-pace-on-track {
            background: var(--accent-green-light);
            color: var(--badge-green-text);
        }
        
        .bc-progress-link-icon {
            color: var(--text-muted);
            font-size: 11px;
            margin-left: auto;
            opacity: 0;
            transition: opacity 0.15s ease;
        }
        
        .bc-progress-content:hover .bc-progress-link-icon {
            opacity: 1;
        }

        .bc-progress-invoice-icon {
            color: var(--text-muted);
            font-size: 11px;
            opacity: 0;
            transition: opacity 0.15s ease, color 0.15s ease;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 3px;
        }

        .bc-progress-invoice-icon:hover {
            color: var(--accent-blue);
            background: var(--bg);
        }

        .bc-progress-content:hover .bc-progress-invoice-icon {
            opacity: 1;
        }

        .bc-progress-billing-icon {
            color: var(--text-muted);
            font-size: 11px;
            opacity: 0;
            transition: opacity 0.15s ease, color 0.15s ease;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 3px;
        }

        .bc-progress-billing-icon:hover {
            color: var(--primary);
            background: var(--bg);
        }

        .bc-progress-content:hover .bc-progress-billing-icon {
            opacity: 1;
        }
        
        /* Project Settings Panel - Tabbed */
        .bc-project-settings {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 20px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .bc-settings-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
            border-radius: var(--radius) var(--radius) 0 0;
        }
        
        .bc-settings-tab {
            padding: 10px 14px;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-muted);
            background: transparent;
            border: none;
            cursor: pointer;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }
        
        .bc-settings-tab:hover {
            color: var(--text);
            background: rgba(0,0,0,0.03);
        }
        
        .bc-settings-tab.active {
            color: var(--primary);
            background: var(--surface);
            border-bottom-color: var(--primary);
        }
        
        .bc-settings-tab.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }
        
        .bc-settings-tab i {
            font-size: 14px;
        }
        
        .bc-settings-content {
            padding: 20px;
        }
        
        .bc-settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
        }
        
        .bc-settings-section {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
        }
        
        .bc-settings-section h3 {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
        }
        
        /* Danger Zone */
        .bc-danger-zone {
            border-color: var(--border-red-light);
            background: var(--bg-red-tint);
        }
        
        .bc-danger-zone h3 {
            color: var(--accent-red);
            border-bottom-color: var(--border-red-light);
        }
        
        .bc-management-actions {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .bc-management-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding: 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
        }
        
        .bc-management-danger {
            border-color: var(--border-red-light);
            background: var(--bg-red-tint);
        }
        
        .bc-management-info h4 {
            font-size: 13px;
            font-weight: 600;
            margin: 0 0 4px 0;
        }
        
        .bc-management-info p {
            font-size: 12px;
            color: var(--text-muted);
            margin: 0;
        }
        
        .bc-management-danger .bc-management-info h4 {
            color: var(--accent-red);
        }

        /* Feature Toggle Styles */
        .bc-feature-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: var(--surface-hover);
            border-radius: 8px;
            gap: 16px;
        }
        
        .bc-feature-info {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }
        
        .bc-feature-info i {
            font-size: 18px;
            width: 24px;
            text-align: center;
        }
        
        .bc-feature-info div {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        
        .bc-feature-info strong {
            font-size: 13px;
            font-weight: 600;
        }
        
        .bc-feature-info span {
            font-size: 12px;
            color: var(--text-muted);
        }
        
        /* Toggle Switch */
        .bc-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
            flex-shrink: 0;
        }
        
        .bc-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .bc-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--text-disabled);
            transition: 0.3s;
            border-radius: 24px;
        }
        
        .bc-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        
        .bc-switch input:checked + .bc-slider {
            background-color: var(--accent-green);
        }
        
        .bc-switch input:checked + .bc-slider:before {
            transform: translateX(20px);
        }

        /* Billing Settings Styles */
        .bc-billing-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 8px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }
        
        .bc-billing-coming-soon {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 16px;
            padding-left: 4px;
        }
        
        .bc-coming-soon-link {
            font-size: 11px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: default;
        }
        
        .bc-coming-soon-link i {
            font-size: 10px;
        }
        
        .bc-billing-tab {
            padding: 8px 14px;
            border: 1px solid var(--border);
            background: var(--surface, var(--bg));
            color: var(--text, inherit);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-billing-tab:hover {
            background: var(--bg-hover);
            border-color: var(--text-disabled, var(--text-muted));
            color: var(--text, inherit);
        }
        
        .bc-billing-tab.active {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
            border-color: var(--accent-blue);
        }
        
        .bc-billing-tab i {
            font-size: 11px;
        }
        
        .bc-billing-model-settings {
            animation: fadeIn 0.2s ease;
        }
        
        .bc-billing-model-desc {
            background: var(--bg-blue-tint);
            border: 1px solid var(--border-blue-light);
            border-radius: 6px;
            padding: 10px 14px;
            font-size: 12px;
            color: var(--badge-blue-text);
            margin-bottom: 16px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        
        .bc-billing-model-desc i {
            margin-top: 2px;
        }
        
        .bc-billing-form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
        }
        
        .bc-billing-form-grid .form-group.full-width {
            grid-column: 1 / -1;
        }
        
        .input-with-suffix {
            display: flex;
            align-items: center;
        }
        
        .input-with-suffix .form-input {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            flex: 1;
        }
        
        .input-suffix {
            background: var(--bg-hover);
            border: 1px solid var(--border);
            border-left: none;
            padding: 8px 10px;
            font-size: 12px;
            color: var(--text-secondary);
            border-radius: 0 var(--radius) var(--radius) 0;
            white-space: nowrap;
            display: flex;
            align-items: center;
            height: auto;
            min-height: 100%;
        }
        
        .input-with-suffix .form-input-sm + .input-suffix {
            padding: 4px 8px;
            font-size: 11px;
        }
        
        .form-label-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            cursor: pointer;
        }
        
        .form-label-checkbox input[type="checkbox"] {
            width: 16px;
            height: 16px;
        }
        
        .form-hint {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 4px;
            display: block;
        }
        
        /* Storage config modal styles */
        .storage-defaults-box {
            background: var(--surface-alt, #f9fafb);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 16px;
        }
        
        .storage-defaults-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 12px;
            color: var(--text);
        }
        
        .storage-defaults-options {
            display: flex;
            gap: 24px;
        }
        
        .storage-checkbox-label {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 14px;
            user-select: none;
        }
        
        .storage-checkbox {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }
        
        .storage-checkbox-mark {
            position: relative;
            height: 20px;
            width: 20px;
            background: var(--surface);
            border: 2px solid var(--border);
            border-radius: 4px;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        
        .storage-checkbox-label:hover .storage-checkbox-mark {
            border-color: var(--primary);
        }
        
        .storage-checkbox:checked ~ .storage-checkbox-mark {
            background: var(--primary);
            border-color: var(--primary);
        }
        
        .storage-checkbox-mark:after {
            content: "";
            position: absolute;
            display: none;
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        .storage-checkbox:checked ~ .storage-checkbox-mark:after {
            display: block;
        }
        
        .storage-checkbox-text {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text);
        }
        
        .bc-rate-tiers-section,
        .bc-milestones-section {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }
        
        .bc-rate-tiers-section h4,
        .bc-milestones-section h4,
        .bc-billing-common-settings h4,
        .bc-offer-items-section h4 {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-rate-tiers-list,
        .bc-milestones-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-rate-tier-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            background: var(--bg);
            border-radius: 6px;
        }
        
        .bc-milestone-item {
            background: var(--bg);
            border-radius: 8px;
            padding: 12px;
        }
        
        .bc-milestone-header {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .bc-milestone-number {
            width: 24px;
            height: 24px;
            background: var(--accent-blue);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
        }
        
        .bc-milestones-summary {
            margin-top: 12px;
            padding: 10px;
            background: var(--bg-green-tint);
            border: 1px solid var(--border-green-light);
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            color: var(--badge-green-text);
        }
        
        .bc-billing-common-settings {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }
        
        .bc-offer-items-section {
            border-top: 1px solid var(--border);
            padding-top: 16px;
        }
        
        .bc-offer-items-table {
            font-size: 12px;
        }
        
        .bc-offer-item-header {
            display: grid;
            grid-template-columns: 1fr 80px 100px;
            gap: 8px;
            padding: 8px 12px;
            background: var(--bg-hover);
            border-radius: 6px 6px 0 0;
            font-weight: 600;
            color: var(--text-secondary);
        }
        
        .bc-offer-item-row {
            display: grid;
            grid-template-columns: 1fr 80px 100px;
            gap: 8px;
            padding: 8px 12px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .bc-offer-item-row:hover {
            background: var(--bg);
        }
        
        .bc-offer-item-row .item-section {
            display: block;
            font-size: 10px;
            color: var(--text-muted);
            margin-bottom: 2px;
        }
        
        .bc-offer-item-row .col-hours,
        .bc-offer-item-row .col-price {
            text-align: right;
        }
        
        /* User budgets table */
        .bc-user-budgets-table {
            font-size: 13px;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .bc-user-budgets-header {
            display: grid;
            grid-template-columns: 1fr 120px 120px 120px;
            gap: 12px;
            padding: 10px 14px;
            background: var(--bg-hover);
            font-weight: 600;
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        
        .bc-user-budgets-row {
            display: grid;
            grid-template-columns: 1fr 120px 120px 120px;
            gap: 12px;
            padding: 10px 14px;
            border-bottom: 1px solid var(--border-light);
            align-items: center;
        }
        
        .bc-user-budgets-row:last-child {
            border-bottom: none;
        }
        
        .bc-user-budgets-row:hover {
            background: var(--bg);
        }
        
        .bc-user-budgets-row.over-budget {
            background: var(--bg-red-tint);
        }
        
        .bc-user-budgets-row .col-user {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .bc-user-budgets-row .user-name {
            font-weight: 500;
        }
        
        .bc-user-budgets-row .col-tracked {
            font-weight: 500;
        }
        
        .bc-user-budgets-row .tracked-percent {
            font-size: 11px;
            color: var(--text-secondary);
            margin-left: 4px;
        }
        
        .bc-user-budgets-row .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .bc-user-budgets-row .status-none {
            background: var(--bg-hover);
            color: var(--text-secondary);
        }
        
        .bc-user-budgets-row .status-ok {
            background: var(--badge-green-bg);
            color: var(--accent-green);
        }
        
        .bc-user-budgets-row .status-warning {
            background: var(--badge-yellow-bg);
            color: var(--accent-yellow);
        }
        
        .bc-user-budgets-row .status-over {
            background: var(--badge-red-bg);
            color: var(--accent-red);
        }
        
        .bc-user-budgets-row .form-input-sm {
            padding: 4px 8px;
            font-size: 12px;
        }
        
        /* Billing Schedules table */
        .bc-billing-schedules-table {
            font-size: 13px;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .bc-schedules-header {
            display: grid;
            grid-template-columns: minmax(80px, 1fr) 75px 110px 100px 80px 190px;
            gap: 6px;
            padding: 8px 10px;
            background: var(--bg-hover);
            font-weight: 600;
            font-size: 10px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        
        .bc-schedules-row {
            display: grid;
            grid-template-columns: minmax(80px, 1fr) 75px 110px 100px 80px 190px;
            gap: 6px;
            padding: 8px 10px;
            border-bottom: 1px solid var(--border-light);
            align-items: center;
            font-size: 12px;
        }
        
        .bc-schedules-row:last-child {
            border-bottom: none;
        }
        
        .bc-schedules-row:hover {
            background: var(--bg);
        }
        
        .bc-schedules-row.is-active {
            background: var(--bg-green-tint);
            border-left: 3px solid var(--accent-green);
        }
        
        .bc-schedules-row.is-archived {
            background: var(--bg-hover);
            opacity: 0.65;
            border-left: 3px solid #9ca3af;
        }
        
        .bc-schedules-row.is-archived .col-name strong {
            color: var(--text-secondary);
            font-style: italic;
        }
        
        .bc-schedules-row.is-archived .col-model .model-badge {
            background: var(--border) !important;
            color: var(--text-secondary) !important;
        }
        
        .bc-schedules-row.is-archived .status-badge {
            background: var(--border);
            color: var(--text-secondary);
        }
        
        /* Collision warning styling */
        .bc-schedules-row.has-collision {
            border-left: 3px solid var(--accent-yellow) !important;
        }
        
        .bc-schedules-row.has-collision:not(.is-active) {
            background: var(--bg-amber-tint);
        }
        
        .collision-warning {
            animation: pulse-warning 2s infinite;
        }
        
        @keyframes pulse-warning {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        /* Changelog action badges */
        .changelog-action {
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .changelog-action.action-created { background: var(--badge-green-bg); color: var(--accent-green); }
        .changelog-action.action-updated { background: var(--badge-blue-bg); color: var(--link-color); }
        .changelog-action.action-activated { background: var(--badge-yellow-bg); color: var(--accent-yellow); }
        .changelog-action.action-archived { background: var(--border); color: var(--text-secondary); }
        .changelog-action.action-unarchived { background: var(--badge-indigo-bg); color: var(--accent-indigo); }
        .changelog-action.action-copied { background: var(--badge-purple-bg); color: var(--accent-purple); }
        .changelog-action.action-deleted { background: var(--border-red-light); color: var(--accent-red); }
        
        /* Form field validation error */
        .form-input.has-error {
            border-color: var(--accent-red) !important;
            background: var(--bg-red-tint);
        }
        .form-input.has-error:focus {
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
        }
        .form-error {
            color: var(--accent-red);
            font-size: 11px;
            margin-top: 4px;
        }
        
        .bc-schedules-row .model-badge {
            display: inline-flex;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .bc-schedules-row .model-time_material { background: var(--badge-blue-bg); color: var(--primary); }
        .bc-schedules-row .model-fixed_price { background: var(--badge-yellow-bg); color: var(--badge-yellow-text); }
        .bc-schedules-row .model-retainer { background: var(--badge-indigo-bg); color: var(--accent-indigo); }
        .bc-schedules-row .model-internal { background: var(--bg-hover); color: var(--text-secondary); }
        
        .bc-schedules-row .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .bc-schedules-row .status-active { background: var(--badge-green-bg); color: var(--accent-green); }
        .bc-schedules-row .status-pending { background: var(--badge-yellow-bg); color: var(--accent-yellow); }
        .bc-schedules-row .status-inactive { background: var(--bg-hover); color: var(--text-secondary); }
        .bc-schedules-row .status-archived { background: var(--border); color: var(--text-muted); }
        
        .bc-schedules-row .col-actions {
            display: flex;
            gap: 2px;
            flex-wrap: nowrap;
        }
        
        .bc-schedules-row .col-actions .btn {
            padding: 3px 5px;
            font-size: 11px;
            min-width: 24px;
        }
        
        .bc-schedules-row .col-actions .btn-danger {
            color: var(--accent-red);
        }
        
        .bc-schedules-row .col-actions .btn-danger:hover {
            background: var(--bg-red-tint);
        }
        
        /* Billing History */
        .bc-billing-history {
            background: var(--bg);
            border-radius: 8px;
            padding: 16px;
        }
        
        .bc-history-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-history-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 12px;
            background: var(--surface);
            border-radius: 6px;
            font-size: 13px;
        }
        
        .bc-history-item .history-date {
            color: var(--text-secondary);
            font-size: 12px;
            min-width: 140px;
        }
        
        .bc-history-item .history-change {
            flex: 1;
        }
        
        .bc-history-item .history-type .badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 500;
        }
        
        .bc-history-item .badge-info { background: var(--badge-blue-bg); color: var(--primary); }
        .bc-history-item .badge-warning { background: var(--badge-yellow-bg); color: var(--badge-yellow-text); }
        
        .bc-history-item .history-user {
            color: var(--text-secondary);
            font-size: 12px;
        }
        
        /* Billing Schedule Modal Styles */
        .bc-schedule-modal .modal-body {
            padding: 0 !important;
        }
        
        .bc-schedule-section {
            padding: 20px;
            border-bottom: 1px solid var(--border);
        }
        
        .bc-schedule-section:last-child {
            border-bottom: none;
        }
        
        .bc-schedule-header-section {
            background: var(--bg);
        }
        
        .bc-schedule-grid-3 {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 16px;
        }
        
        @media (max-width: 640px) {
            .bc-schedule-grid-3 {
                grid-template-columns: 1fr;
            }
        }
        
        .bc-billing-tabs-modal {
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
            border-bottom: none !important;
        }
        
        .bc-schedule-model-settings {
            background: var(--bg-amber-tint);
            border-bottom-color: var(--border-yellow-light);
        }
        
        .bc-schedule-user-budgets-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 10px;
        }
        
        .bc-schedule-user-budget-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--bg);
            padding: 8px 12px;
            border-radius: 8px;
        }
        
        .bc-schedule-user-budget-item .user-name {
            flex: 1;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* Delete Schedule Modal */
        .bc-delete-schedule-modal .modal-header {
            border-radius: var(--radius) var(--radius) 0 0;
        }
        
        .bc-delete-schedule-modal .modal-body {
            background: var(--surface);
        }
        
        /* Required field marker */
        .form-label.required::after {
            content: ' *';
            color: var(--accent-red);
        }
        
        .bc-description-view {
            min-height: 60px;
        }
        
        .bc-description-view p {
            color: var(--text);
            line-height: 1.5;
        }
        
        .bc-description-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }
        
        .bc-members-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-members-list.is-compact {
            max-height: 260px;
            overflow-y: auto;
            padding-right: 6px;
        }
        
        .bc-member-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            background: var(--bg);
            border-radius: var(--radius);
        }
        
        .bc-members-list.is-compact .bc-member-item {
            padding: 6px 8px;
        }
        
        .bc-suggested-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 10px;
        }
        
        .bc-suggested-meta {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
        }
        
        .bc-member-item-clickable {
            cursor: pointer;
            transition: background 0.15s, transform 0.1s;
        }
        
        .bc-member-item-clickable:hover {
            background: var(--border);
            transform: translateX(2px);
        }
        
        /* Project Variables */
        .bc-settings-grid-2col {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 24px;
        }
        
        .bc-settings-section-wide {
            grid-column: span 1;
        }
        
        .bc-settings-hint {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 16px;
            margin-top: 4px;
        }
        
        .bc-dropdown-item:hover {
            background: var(--bg-hover) !important;
        }
        
        .bc-variables-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 16px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .bc-variable-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--bg);
            border-radius: var(--radius);
            border: 1px solid var(--border);
        }
        
        .bc-variable-key {
            font-weight: 600;
            font-size: 13px;
            color: var(--accent-indigo);
            min-width: 120px;
            flex-shrink: 0;
        }
        
        .bc-variable-value {
            flex: 1;
            font-size: 14px;
            color: var(--text);
            word-break: break-all;
        }
        
        .bc-variable-link {
            color: var(--link-color);
            text-decoration: none;
        }
        
        .bc-variable-link:hover {
            text-decoration: underline;
        }
        
        .bc-variable-link i {
            margin-right: 4px;
            font-size: 11px;
        }
        
        .bc-add-variable-form {
            border-top: 1px solid var(--border);
            padding-top: 16px;
        }
        
        .bc-variable-input-group {
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }
        
        .bc-variable-key-input {
            position: relative;
            flex: 1;
            max-width: 200px;
        }
        
        .bc-variable-value-input {
            flex: 2;
        }
        
        .bc-key-suggestions {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
            z-index: 1000;
            max-height: 240px;
            overflow-y: auto;
            padding: 6px 0;
        }
        
        .bc-key-suggestion {
            padding: 10px 14px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.15s ease;
        }
        
        .bc-key-suggestion::before {
            content: '\f121';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            font-size: 11px;
            color: var(--text-muted);
            width: 18px;
            text-align: center;
        }
        
        .bc-key-suggestion:hover,
        .bc-key-suggestion.active {
            background: linear-gradient(90deg, #f0f4ff 0%, #f8f9ff 100%);
            color: var(--accent-indigo);
        }
        
        .bc-key-suggestion:hover::before,
        .bc-key-suggestion.active::before {
            color: var(--accent-indigo);
        }
        
        .bc-key-suggestion:first-child {
            border-radius: 6px 6px 0 0;
        }
        
        .bc-key-suggestion:last-child {
            border-radius: 0 0 6px 6px;
        }
        
        .bc-key-suggestion:only-child {
            border-radius: 6px;
        }

        .bc-member-info {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
        }
        
        .bc-member-name {
            font-weight: 500;
        }
        
        .bc-member-email {
            font-size: 12px;
            color: var(--text-muted);
        }
        
        /* Modal large variant */
        .modal-lg {
            max-width: 560px;
            width: 100%;
        }
        
        /* Large form input */
        .form-input-lg {
            padding: 14px 16px;
            font-size: 16px;
        }
        
        /* Invite section styles */
        .bc-invite-section {
            padding: 20px;
            background: var(--bg);
            border-radius: var(--radius-lg);
            text-align: center;
        }
        
        .bc-invite-message {
            color: var(--text-secondary);
            margin-bottom: 16px;
            font-size: 14px;
        }
        
        .bc-invite-form {
            text-align: left;
            max-width: 400px;
            margin: 0 auto;
        }
        
        .bc-invite-success {
            margin-top: 16px;
        }
        
        .bc-invite-success code {
            background: var(--badge-yellow-bg);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 13px;
        }
        
        .alert {
            padding: 12px 16px;
            border-radius: var(--radius);
        }
        
        .alert-success {
            background: var(--accent-green-light);
            color: var(--badge-green-text);
            border: 1px solid #a7f3d0;
        }
        
        .bc-search-hint {
            padding: 40px 20px;
        }
        
        .bc-billing-form .form-group {
            margin-bottom: 12px;
        }
        
        .bc-billing-form .form-label {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }
        
        /* Select input styling */
        select.form-input {
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 10px center;
            background-repeat: no-repeat;
            background-size: 16px 16px;
            padding-right: 40px;
        }
        
        /* ===== GLOBAL RUNNING TIMER INDICATOR ===== */
        .bc-global-timer-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
            height: 30px;
            padding: 0 10px;
            background: var(--bg-red-tint, rgba(239, 68, 68, 0.08));
            border: 1px solid var(--accent-red, #ef4444);
            border-radius: 15px;
            color: var(--accent-red, #ef4444);
            font-size: 13px;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
            animation: bc-timer-pulse 2s infinite;
        }
        
        .bc-global-timer-indicator:hover {
            background: var(--accent-red, #ef4444);
            color: #fff;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
        }
        
        .bc-global-timer-indicator i {
            font-size: 10px;
        }
        
        .bc-global-timer-time {
            font-size: 12px;
            letter-spacing: 0.5px;
        }
        
        .bc-global-timer-badge {
            background: var(--accent-red, #ef4444);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 8px;
            line-height: 1.2;
        }
        
        @keyframes bc-timer-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.75; }
        }
        
        /* ===== ONLINE USERS INDICATOR ===== */
        .bc-online-indicator {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .bc-online-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            height: 28px;
            padding: 0 8px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 14px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.15s;
            text-decoration: none;
        }
        
        .bc-online-btn:hover {
            background: var(--bg);
            border-color: var(--text-muted);
        }
        
        .bc-online-btn .bc-online-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        
        .bc-online-btn.online-green {
            color: var(--accent-green);
            border-color: var(--border-green-light);
        }
        .bc-online-btn.online-green:hover {
            background: var(--bg-green-tint);
            border-color: var(--border-green-light);
        }
        .bc-online-btn.online-green .bc-online-dot {
            background: var(--accent-green);
        }
        
        .bc-online-btn.online-orange {
            color: var(--accent-yellow);
            border-color: var(--border-yellow-light);
        }
        .bc-online-btn.online-orange:hover {
            background: var(--bg-amber-tint);
            border-color: var(--border-yellow-light);
        }
        .bc-online-btn.online-orange .bc-online-dot {
            background: var(--accent-yellow);
        }
        
        .bc-online-btn.online-red {
            color: var(--accent-red);
            border-color: var(--border-red-light);
        }
        .bc-online-btn.online-red:hover {
            background: var(--bg-red-tint);
            border-color: var(--border-red-light);
        }
        .bc-online-btn.online-red .bc-online-dot {
            background: var(--accent-red);
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        /* ===== LANGUAGE SELECTOR ===== */
        .bc-lang-selector {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .bc-lang-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            padding: 0;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            color: var(--text-secondary);
            transition: all 0.15s;
        }
        
        .bc-lang-btn:hover {
            background: var(--bg);
            border-color: var(--text-muted);
        }
        
        .bc-lang-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            min-width: 140px;
            z-index: 1000;
            overflow: hidden;
        }
        
        .bc-lang-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text);
            transition: background 0.1s;
        }
        
        .bc-lang-option:hover {
            background: var(--bg);
        }
        
        .bc-lang-option.active {
            background: var(--bg-blue-tint);
            color: var(--primary);
            font-weight: 500;
        }
        
        .bc-lang-flag {
            font-size: 16px;
            line-height: 1;
            width: 20px;
            text-align: center;
        }
        
        .bc-lang-flag img {
            width: 20px;
            height: 14px;
            border-radius: 2px;
            vertical-align: middle;
        }
        
        .nav-icon {
            width: 18px;
            text-align: center;
            font-size: 14px;
        }
        
        /* Icon utility classes */
        .text-success { color: var(--accent-green); }
        .text-danger { color: var(--accent-red); }
        .text-warning { color: var(--accent-yellow); }
        .text-muted { color: var(--text-muted); }
        
        .bc-lang-name {
            flex: 1;
        }
        
        .bc-lang-check {
            color: var(--primary);
            font-size: 14px;
        }
        
        /* ===== BASECAMP STYLE TODO DETAIL ===== */
        
        /* Page wrapper - centered with max width like Basecamp */
        .bc-todo-page-wrapper {
            max-width: 1024px;
            margin: 0 auto;
            padding: 24px 16px;
            min-height: calc(100vh - 60px);
            font-size: 15px;
            line-height: 1.6;
        }
        
        /* Breadcrumb bar - attached to main content from top */
        .bc-todo-header-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 12px 24px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
            width: 80%;
            margin: 0 auto;
            gap: 12px;
        }
        
        /* Todo Quick Actions Bar - sticky below breadcrumb */
        .bc-todo-quick-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            padding: 10px 24px;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 96px; /* Below main header (56px) + breadcrumb (~40px) */
            z-index: 98;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            margin-left: -16px;
            margin-right: -16px;
        }
        
        .bc-quick-checkbox {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid #d4d4d4;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s ease;
            background: var(--surface);
            flex-shrink: 0;
        }
        
        .bc-quick-checkbox:hover {
            border-color: var(--accent-green);
            background: rgba(34, 197, 94, 0.1);
        }
        
        .bc-quick-checkbox.checked {
            background: var(--accent-green);
            border-color: var(--accent-green);
        }
        
        .bc-quick-checkbox.checked i {
            color: var(--text-on-primary);
            font-size: 11px;
        }
        
        .bc-quick-status {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .bc-quick-title {
            font-weight: 600;
            font-size: 15px;
            color: var(--text);
            max-width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-quick-label {
            font-size: 12px;
            color: var(--text-secondary);
            margin-left: 8px;
        }
        
        .bc-quick-assignee {
            display: flex;
            align-items: center;
        }
        
        .bc-quick-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-on-primary);
            font-size: 11px;
            font-weight: 600;
        }
        
        .bc-quick-unassigned {
            color: var(--text-muted);
            font-size: 13px;
        }
        
        .bc-quick-date {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text);
            background: var(--badge-yellow-bg);
            padding: 4px 10px;
            border-radius: 4px;
        }
        
        .bc-quick-date.overdue {
            background: var(--bg-red-tint);
            color: var(--accent-red);
        }
        
        .bc-quick-date i {
            font-size: 12px;
        }
        
        .bc-quick-priority {
            display: flex;
            gap: 4px;
        }
        
        .bc-priority-dot {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 600;
            background: var(--bg-hover);
            color: var(--text-muted);
            cursor: default;
        }
        
        .bc-priority-dot.priority-1 { background: var(--badge-green-bg); color: var(--accent-green); }
        .bc-priority-dot.priority-2 { background: var(--badge-yellow-bg); color: var(--accent-yellow); }
        .bc-priority-dot.priority-3 { background: var(--accent-orange-light); color: var(--badge-orange-text); }
        .bc-priority-dot.priority-4 { background: var(--border-red-light); color: var(--accent-red); }
        .bc-priority-dot.priority-5 { background: var(--accent-red); color: var(--text-on-primary); border: 2px solid #b91c1c; }
        
        /* Header checkbox wrapper for todo completion */
        /* Hidden on desktop as it duplicates the checkbox near todo title */
        .bc-header-checkbox-wrapper {
            display: none;
            align-items: center;
            flex-shrink: 0;
        }
        
        .bc-header-checkbox {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid #d4d4d4;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s ease;
            background: var(--surface);
        }
        
        .bc-header-checkbox:hover {
            border-color: var(--accent-green);
            background: rgba(34, 197, 94, 0.1);
        }
        
        .bc-header-checkbox.checked {
            background: var(--accent-green);
            border-color: var(--accent-green);
        }
        
        .bc-header-checkbox.checked i {
            color: var(--text-on-primary);
            font-size: 11px;
        }
        
        .bc-header-status {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        /* Header timer button */
        .bc-header-timer-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: var(--bg-hover);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s ease;
            flex-shrink: 0;
            margin-left: 8px;
        }
        
        .bc-header-timer-btn:hover {
            background: var(--border);
            color: var(--text);
        }
        
        .bc-header-timer-btn.is-running {
            background: var(--bg-red-tint);
            color: var(--accent-red);
            animation: timer-pulse 2s infinite;
        }
        
        .bc-header-timer-btn.is-running:hover {
            background: var(--badge-red-bg);
        }
        
        .bc-header-timer-btn.is-blocked {
            background: var(--bg-hover);
            color: var(--text-muted);
            cursor: not-allowed;
            opacity: 0.6;
        }
        
        .bc-header-timer-btn.is-blocked:hover {
            background: var(--badge-red-bg);
            color: var(--accent-red);
            opacity: 1;
        }
        
        @keyframes timer-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        /* MyTasks card container styling */
        .bc-mytasks-content-desktop .bc-todo-list {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }
        
        .bc-mytasks-content-desktop .bc-todo-list .bc-todo-item {
            border-radius: 0;
        }
        
        .bc-mytasks-content-desktop .bc-todo-list .bc-todo-item:first-child {
            border-top-left-radius: calc(var(--radius-lg) - 1px);
            border-top-right-radius: calc(var(--radius-lg) - 1px);
        }
        
        .bc-mytasks-content-desktop .bc-todo-list .bc-todo-item:last-child {
            border-bottom-left-radius: calc(var(--radius-lg) - 1px);
            border-bottom-right-radius: calc(var(--radius-lg) - 1px);
        }

        /* Floating bar timer button - no left margin needed */
        .bc-floating-timer-btn {
            margin-left: 0;
            margin-right: 8px;
        }
        
        /* MyTasks timer button - inline in todo list */
        .bc-mytasks-timer-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: none;
            background: var(--bg-hover);
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s ease;
            flex-shrink: 0;
            font-size: 10px;
        }
        
        .bc-mytasks-timer-btn:hover {
            background: var(--border);
            color: var(--text);
        }
        
        .bc-mytasks-timer-btn.is-running {
            background: var(--bg-red-tint);
            color: var(--accent-red);
            animation: timer-pulse 2s infinite;
        }
        
        .bc-mytasks-timer-btn.is-running:hover {
            background: var(--badge-red-bg);
        }

        /* Activity filter buttons */
        .bc-activity-filter-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            font-size: 11px;
            font-weight: 500;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface);
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
        .bc-activity-filter-btn:hover {
            border-color: var(--text-secondary);
            color: var(--text);
        }
        .bc-activity-filter-btn.active {
            background: var(--text);
            color: var(--surface);
            border-color: var(--text);
        }
        .bc-activity-filter-btn.bc-filter-active.active {
            background: var(--accent-green);
            border-color: var(--accent-green);
            color: white;
        }
        .bc-activity-filter-btn.bc-filter-inactive.active {
            background: var(--accent-orange);
            border-color: var(--accent-orange);
            color: white;
        }
        .bc-activity-filter-btn.bc-filter-dead.active {
            background: var(--accent-red);
            border-color: var(--accent-red);
            color: white;
        }
        .bc-activity-filter-btn i {
            font-size: 10px;
        }

        /* Personal task note button in mytasks */
        .bc-mytasks-todolist .bc-todo-item {
            grid-template-columns: 24px 24px 24px 1fr auto auto auto auto auto auto 80px 24px;
        }
        .bc-todo-item .bc-task-note-btn {
            background: none; border: none; cursor: pointer; padding: 2px 4px;
            font-size: 12px; opacity: 0.2; transition: opacity 0.15s;
            color: var(--text-muted);
        }
        .bc-todo-item:hover .bc-task-note-btn { opacity: 0.5; }
        .bc-todo-item .bc-task-note-btn.has-note { opacity: 1 !important; }

        /* Snooze quick button in mytasks */
        .bc-mytasks-snooze-btn {
            background: none; border: none; cursor: pointer; padding: 2px 4px;
            font-size: 12px; color: var(--text-muted); opacity: 0;
            transition: opacity 0.15s;
        }
        .bc-todo-item:hover .bc-mytasks-snooze-btn { opacity: 0.5; }
        .bc-mytasks-snooze-btn:hover { opacity: 1 !important; color: var(--accent-orange); }
        
        .bc-header-actions-right {
            position: absolute;
            right: 20px;
        }
        
        /* Groups visibility - compact inline badge style */
        .bc-groups-inline {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-left: 12px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .bc-groups-inline .bc-group-badge-sm {
            font-size: 11px;
            padding: 2px 6px;
        }
        
        .bc-breadcrumb-center {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-secondary);
        }
        
        .bc-breadcrumb-center a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
        }
        
        .bc-breadcrumb-center a:hover {
            text-decoration: underline;
        }
        
        .bc-breadcrumb-sep {
            color: var(--text-secondary);
        }
        
        .bc-header-actions-right {
            display: flex;
            gap: 8px;
            position: relative;
        }
        
        /* Dropdown menu */
        .bc-dropdown {
            position: relative;
        }
        
        .bc-dropdown-menu {
            position: absolute;
            top: 100%;
            background: var(--surface);
            border: none;
            border-radius: 4px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            min-width: 200px;
            z-index: 1000;
            padding: 8px 0;
        }
        
        .bc-dropdown-right {
            right: 0;
        }
        
        /* Todo actions button (three dots) - round */
        .btn-todo-actions {
            width: 36px;
            height: 36px;
            background: var(--bg-cream);
            border: 1px solid var(--border);
            border-radius: 50%;
            padding: 0;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-todo-actions:hover {
            background: var(--border);
            color: var(--text);
        }
        
        .bc-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            color: var(--text);
            text-decoration: none;
            font-size: 14px;
            transition: background 0.15s;
        }
        
        .bc-dropdown-item:hover {
            background: var(--bg-hover);
            cursor: pointer;
        }
        
        .bc-dropdown-item i {
            width: 16px;
            color: var(--text-secondary);
        }
        
        .bc-dropdown-optgroup {
            border-top: 1px solid var(--border);
            margin-top: 4px;
            padding-top: 4px;
        }
        
        .bc-dropdown-optgroup:first-child {
            border-top: none;
            margin-top: 0;
            padding-top: 0;
        }
        
        .bc-dropdown-optgroup-label {
            padding: 8px 16px 4px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--text-secondary);
            letter-spacing: 0.5px;
        }
        
        .bc-search-dropdown {
            position: relative;
        }
        
        .bc-search-dropdown .bc-dropdown-menu {
            left: 0;
            right: 0;
            width: 100%;
            max-height: 400px;
            overflow-y: auto;
        }
        
        .bc-dropdown-danger {
            color: var(--accent-red);
        }
        
        .bc-dropdown-danger i {
            color: var(--accent-red);
        }
        
        .bc-dropdown-divider {
            height: 1px;
            background: var(--border);
            margin: 8px 0;
        }
        
        /* Main todo card */
        .bc-todo-main-card {
            background: var(--surface);
            border-radius: 12px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 32px -8px rgba(0,0,0,0.12);
            padding: 32px 40px;
            margin-bottom: 32px;
            width: 100%;
            position: relative;
        }
        
        /* Todo Floating Quick Actions Bar */
        .bc-todo-floating-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: none;
            border-bottom: 1px solid var(--border);
            border-radius: 0;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            padding: 12px 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }
        
        .bc-floating-bar-back {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            font-size: 13px;
            font-weight: 500;
            color: var(--primary);
            background: transparent;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        
        .bc-floating-bar-back:hover {
            background: rgba(18, 100, 163, 0.1);
        }
        
        .bc-floating-bar-back i {
            font-size: 12px;
        }
        
        .bc-todo-floating-bar.visible {
            opacity: 1;
            visibility: visible;
        }
        
        /* Adjust for AI panel */
        .bc-todo-floating-bar.ai-panel-shift {
            padding-right: 420px;
        }
        
        /* Floating bar checkbox */
        .bc-floating-bar-checkbox {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            padding-right: 12px;
        }
        
        .bc-floating-checkbox {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #d4d4d4;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s ease;
            background: var(--surface);
        }
        
        .bc-floating-checkbox:hover {
            border-color: var(--accent-green);
            background: rgba(34, 197, 94, 0.1);
        }
        
        .bc-floating-checkbox.checked {
            background: var(--accent-green);
            border-color: var(--accent-green);
        }
        
        .bc-floating-checkbox.checked i {
            color: var(--text-on-primary);
            font-size: 10px;
        }
        
        .bc-floating-status {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .bc-todo-floating-bar-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 16px;
            border-right: 1px solid #e8e1d8;
        }
        
        .bc-floating-bar-section {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-floating-bar-label {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .bc-floating-bar-value {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 6px;
            background: var(--bg);
            cursor: pointer;
            transition: background 0.15s;
            font-size: 13px;
        }
        
        .bc-floating-bar-value:hover {
            background: var(--border);
        }
        
        .bc-floating-bar-value.bc-overdue {
            background: var(--badge-red-bg);
            color: var(--accent-red);
        }
        
        .bc-floating-bar-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 600;
            color: white;
        }
        
        .bc-floating-bar-avatar-img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .bc-floating-bar-priority {
            display: flex;
            gap: 4px;
        }
        
        .bc-floating-bar-priority-badge {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.15s;
        }
        
        .bc-floating-bar-priority-badge:hover {
            transform: scale(1.1);
        }
        
        .bc-floating-bar-priority-badge.active {
            border-color: currentColor;
        }
        
        .bc-floating-bar-priority-badge.p1,
        .bc-floating-bar-priority-badge.p2 {
            background: var(--badge-blue-bg);
            color: var(--accent-blue);
        }
        
        .bc-floating-bar-priority-badge.p3 {
            background: var(--badge-yellow-bg);
            color: var(--accent-yellow);
        }
        
        .bc-floating-bar-priority-badge.p4 {
            background: var(--accent-orange-light);
            color: var(--badge-orange-text);
        }
        
        .bc-floating-bar-priority-badge.p5 {
            background: var(--badge-red-bg);
            color: var(--accent-red);
        }
        
        /* Hide floating bar on mobile */
        @media (max-width: 768px) {
            .bc-todo-floating-bar {
                display: none;
            }
        }
        
        .bc-todo-actions-menu {
            position: absolute;
            right: 24px;
            top: 24px;
        }
        
        .bc-meta-row-title {
            align-items: flex-start;
            padding-bottom: 4px;
        }
        
        .bc-meta-row-title .bc-meta-label {
            display: flex;
            justify-content: flex-end;
            padding-right: 12px;
        }
        
        .bc-meta-row-timer {
            padding-top: 0;
            margin-bottom: 24px;
        }
        
        .bc-todo-checkbox-large {
            width: 36px;
            height: 36px;
            border: 3px solid #9ca3af;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            font-size: 18px;
            color: transparent;
            transition: all 0.2s;
            margin-top: 2px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .bc-todo-checkbox-large:hover {
            border-color: #1e7f4e;
        }
        
        .bc-todo-checkbox-large.checked {
            background: var(--accent-green);
            border-color: #1e7f4e;
            color: white;
        }
        
        /* Status indicator for kanban mode */
        .bc-todo-status-indicator {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            flex-shrink: 0;
            margin-top: 2px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        /* Status selector buttons */
        .bc-status-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .bc-status-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border: 2px solid transparent;
            border-radius: 6px;
            background: var(--surface-hover);
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .bc-status-btn:hover:not(:disabled) {
            background: var(--surface-hover);
            border-color: var(--status-color);
        }
        
        .bc-status-btn.active {
            font-weight: 600;
        }
        
        .bc-status-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .bc-status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .bc-meta-row-status {
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        /* Custom Fields in Todo Detail - Trello style */
        .bc-meta-row-custom-fields {
            padding: 12px 0;
        }
        
        .bc-custom-fields-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        @media (max-width: 600px) {
            .bc-custom-fields-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .bc-custom-field-item {
            background: var(--bg);
            border-radius: 8px;
            padding: 8px 12px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-height: 48px;
            transition: background 0.2s, color 0.2s;
        }
        
        /* When colored, inherit text color */
        .bc-custom-field-item[style*="background"] .bc-custom-field-item-icon,
        .bc-custom-field-item[style*="background"] .bc-custom-field-item-label,
        .bc-custom-field-item[style*="background"] .bc-custom-field-item-value,
        .bc-custom-field-item[style*="background"] .bc-custom-field-item-value input,
        .bc-custom-field-item[style*="background"] .bc-custom-field-item-value select {
            color: inherit !important;
        }
        
        .bc-custom-field-item-header {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-custom-field-delete {
            margin-left: auto;
            background: none;
            border: none;
            padding: 2px 4px;
            cursor: pointer;
            color: #b0bac9;
            font-size: 10px;
            border-radius: 3px;
            opacity: 0;
            transition: all 0.15s ease;
        }
        
        .bc-custom-field-item:hover .bc-custom-field-delete {
            opacity: 1;
        }
        
        .bc-custom-field-delete:hover {
            color: #eb5a46;
            background: rgba(235, 90, 70, 0.1);
        }
        
        .bc-custom-field-item-icon {
            font-size: 11px;
            color: var(--text-secondary);
        }
        
        .bc-custom-field-item-label {
            font-size: 11px;
            color: var(--text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        
        .bc-custom-field-item-value {
            font-size: 14px;
            color: #172b4d;
            font-weight: 500;
        }
        
        /* Custom field color indicator */
        .bc-custom-field-color-value {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 600;
        }
        
        .bc-custom-field-color-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .bc-custom-field-item-value input,
        .bc-custom-field-item-value select {
            width: 100%;
            padding: 2px 0;
            border: none;
            background: transparent;
            font-size: 14px;
            color: #172b4d;
            font-weight: 500;
        }
        
        .bc-custom-field-item-value input:focus,
        .bc-custom-field-item-value select:focus {
            outline: none;
        }
        
        .bc-custom-field-item-value input::placeholder {
            color: #8993a4;
            font-weight: 400;
        }
        
        .bc-custom-field-item.bc-custom-field-checkbox {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
        
        .bc-custom-field-item.bc-custom-field-checkbox .bc-custom-field-item-header {
            flex: 1;
        }
        
        /* Add custom field button */
        .bc-add-custom-field-btn {
            background: var(--bg);
            border: 2px dashed #d5d9e0;
            border-radius: 8px;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
            min-height: 48px;
        }
        
        .bc-add-custom-field-btn:hover {
            background: var(--bg-hover);
            border-color: var(--primary);
            color: var(--primary);
        }
        
        /* Custom field picker modal */
        .bc-cf-picker-list {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .bc-cf-picker-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-bottom: 1px solid #e4e6ea;
            cursor: pointer;
            transition: background 0.15s;
        }
        
        .bc-cf-picker-item:hover {
            background: var(--bg);
        }
        
        .bc-cf-picker-item:last-child {
            border-bottom: none;
        }
        
        .bc-cf-picker-icon {
            width: 32px;
            height: 32px;
            background: var(--bg-hover);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            font-size: 14px;
        }
        
        .bc-cf-picker-info {
            flex: 1;
        }
        
        .bc-cf-picker-name {
            font-weight: 600;
            color: #172b4d;
            font-size: 14px;
        }
        
        .bc-cf-picker-type {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .bc-cf-picker-check {
            color: #61bd4f;
            font-size: 16px;
        }
        
        .bc-custom-field-row {
            display: grid;
            grid-template-columns: 140px 1fr;
            gap: 12px;
            align-items: center;
        }
        
        .bc-custom-field-label {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .bc-custom-field-value {
            font-size: 14px;
        }
        
        .bc-custom-field-input {
            width: 100%;
            max-width: 300px;
            padding: 6px 10px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 14px;
            background: var(--surface);
            color: var(--text);
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        
        .bc-custom-field-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(30, 127, 78, 0.1);
        }
        
        .bc-custom-field-input:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            background: var(--surface-hover);
        }
        
        .bc-custom-field-select {
            width: 100%;
            max-width: 300px;
            padding: 6px 10px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 14px;
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
        }
        
        .bc-custom-field-select:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .bc-custom-field-select:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .bc-custom-checkbox {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
        }
        
        .bc-custom-checkbox input {
            display: none;
        }
        
        .bc-custom-checkbox-mark {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-color);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .bc-custom-checkbox input:checked + .bc-custom-checkbox-mark {
            background: var(--primary);
            border-color: var(--primary);
        }
        
        .bc-custom-checkbox input:checked + .bc-custom-checkbox-mark::after {
            content: '✓';
            color: white;
            font-size: 12px;
            font-weight: 600;
        }
        
        .bc-custom-checkbox input:disabled + .bc-custom-checkbox-mark {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .bc-currency-input-wrapper,
        .bc-url-field-wrapper,
        .bc-email-field-wrapper,
        .bc-phone-field-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
            max-width: 300px;
        }
        
        .bc-currency-symbol {
            font-size: 14px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .bc-currency-input {
            flex: 1;
            text-align: right;
        }
        
        .bc-url-link,
        .bc-email-link,
        .bc-phone-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: var(--surface-hover);
            border-radius: 6px;
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        
        .bc-url-link:hover,
        .bc-email-link:hover,
        .bc-phone-link:hover {
            background: var(--primary);
            color: white;
        }
        
        .bc-todo-main-title {
            font-size: 28px;
            font-weight: 400;
            margin: 0;
            line-height: 1.25;
            cursor: pointer;
            flex: 1;
            color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        .bc-todo-main-title.completed {
            text-decoration: line-through;
            color: var(--text-secondary);
        }
        
        .bc-todo-main-title .bc-edit-icon {
            font-size: 14px;
            opacity: 0;
            margin-left: 8px;
            color: var(--text-muted);
        }
        
        .bc-todo-main-title:hover .bc-edit-icon {
            opacity: 0.5;
        }
        
        .bc-title-edit-input {
            font-size: 24px;
            font-weight: 600;
            padding: 8px 12px;
            border: 2px solid var(--primary);
            border-radius: 6px;
            width: 100%;
        }
        
        /* AI Toggle Button - Per-todo in top right corner */
        .bc-todo-ai-toggle {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 36px;
            height: 36px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-purple);
            transition: all 0.2s ease;
            z-index: 10;
        }

        .bc-todo-ai-toggle:hover {
            background: var(--surface-hover);
            color: var(--primary);
            border-color: var(--primary);
        }

        .bc-todo-ai-toggle.ai-disabled {
            color: var(--text-muted);
            opacity: 0.5;
        }

        .bc-todo-ai-toggle.ai-disabled:hover {
            opacity: 1;
            color: var(--accent-purple);
        }

        .bc-todo-ai-toggle i {
            font-size: 16px;
        }
        
        /* Timer row - now in grid */
        
        .btn-timer-sm {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 12px;
            background: var(--accent-green);
            border: none;
            border-radius: 100px;
            font-size: 12px;
            font-weight: 500;
            color: white;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .btn-timer-sm:hover {
            background: #176b41;
        }
        
        .btn-timer-sm.is-running {
            background: var(--accent-red);
        }
        
        .btn-timer-sm.is-running:hover {
            background: var(--accent-red);
        }
        
        .btn-timer-sm.is-blocked {
            background: var(--bg-hover);
            color: var(--text-muted);
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        .btn-timer-sm.is-blocked:hover {
            background: var(--badge-red-bg);
            color: var(--accent-red);
            opacity: 1;
        }
        
        .btn-timer-sm.is-blocked i {
            color: var(--text-muted);
        }
        
        .btn-timer-sm.is-blocked:hover i {
            color: var(--accent-red);
        }
        
        .btn-timer-sm i {
            color: white;
        }
        
        .btn-add-time-sm {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 11px;
            color: #6c757d;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .btn-add-time-sm:hover {
            background: var(--bg-secondary);
            color: var(--text);
            border-color: var(--border-dark);
        }
        
        .btn-add-time-sm i {
            font-size: 10px;
        }
        
        .btn-admin-time-sm {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            background: var(--badge-yellow-bg);
            border: 1px solid var(--accent-yellow);
            border-radius: 4px;
            font-size: 11px;
            color: var(--badge-yellow-text);
            cursor: pointer;
            transition: all 0.15s;
        }

        .btn-admin-time-sm:hover {
            background: var(--accent-yellow-light);
            color: var(--badge-yellow-text);
            border-color: var(--accent-yellow);
        }
        
        .btn-admin-time-sm i {
            font-size: 10px;
        }
        
        /* Quick date/minute buttons in modal */
        .quick-date-buttons .btn,
        .minute-presets .btn {
            font-size: 11px;
            padding: 4px 10px;
        }
        
        /* Meta info table */
        .bc-todo-meta-table {
            margin-bottom: 24px;
        }
        
        .bc-meta-row {
            display: grid;
            grid-template-columns: 100px 1fr;
            padding: 8px 0;
            align-items: center;
            line-height: 1.5;
            gap: 8px;
        }
        
        .bc-meta-row-notes {
            display: grid;
            grid-template-columns: 100px 1fr;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
            align-items: flex-start;
            gap: 8px;
        }
        
        .bc-meta-row-notes .bc-meta-label {
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
        }
        
        .bc-meta-row-notes .bc-meta-value .bc-rendered-content {
            /* inherits from .bc-rendered-content */
        }
        
        /* Subtasks / Checklist Styles */
        .bc-meta-row-subtasks {
            display: grid;
            grid-template-columns: 100px 1fr;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
            align-items: flex-start;
            gap: 8px;
        }
        
        .bc-meta-row-subtasks .bc-meta-label {
            text-align: right;
            padding-top: 8px;
        }
        
        /* Trello-style progress bar */
        .bc-checklist-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        
        .bc-checklist-progress-percent {
            font-size: 12px;
            color: var(--text-secondary);
            min-width: 32px;
        }
        
        .bc-checklist-progress-bar {
            flex: 1;
            height: 8px;
            background: var(--bg-hover);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .bc-checklist-progress-fill {
            height: 100%;
            background: var(--accent-blue);
            border-radius: 4px;
            transition: width 0.3s ease, background 0.3s ease;
        }
        
        .bc-checklist-progress-fill.bc-checklist-complete {
            background: var(--accent-green);
        }
        
        .bc-checklist-hide-toggle {
            font-size: 12px;
            color: var(--text-secondary);
            background: var(--bg-hover);
            border: none;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.2s;
        }
        
        .bc-checklist-hide-toggle:hover {
            background: var(--border);
        }
        
        .bc-checklist-hide-toggle.bc-active {
            background: var(--primary);
            color: white;
        }
        
        .bc-subtasks-list:empty {
            display: none;
        }
        
        .bc-subtasks-list {
            margin-bottom: 8px;
        }
        
        .bc-subtask-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 0;
            transition: background 0.15s;
        }
        
        .bc-subtask-item:hover {
            background: var(--bg-secondary);
        }

        .bc-subtask-drag {
            cursor: grab;
            color: var(--text-muted);
            padding: 4px 2px;
            opacity: 0;
            transition: opacity 0.15s, color 0.15s;
        }
        
        .bc-subtask-item:hover .bc-subtask-drag {
            opacity: 1;
        }
        
        .bc-subtask-drag:hover {
            color: var(--text-secondary);
        }
        
        .bc-subtask-drag:active {
            cursor: grabbing;
        }
        
        .bc-subtask-ghost {
            opacity: 0.4;
            background: var(--bg-blue-tint);
        }
        
        .bc-subtask-checkbox {
            position: relative;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .bc-subtask-checkbox input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border: 2px solid #b8b7b5;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-subtask-checkbox input[type="checkbox"]:checked {
            background: #3cb371;
            border-color: #3cb371;
        }
        
        .bc-subtask-checkbox input[type="checkbox"]:checked::after {
            content: '✓';
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            font-weight: bold;
        }
        
        .bc-subtask-checkbox input[type="checkbox"]:disabled {
            opacity: 0.5;
            cursor: wait;
        }
        
        .bc-subtask-title {
            flex: 1;
            font-size: 13px;
            line-height: 1.3;
            color: var(--text);
        }
        
        .bc-subtask-title.bc-subtask-done {
            text-decoration: line-through;
            color: #8a8987;
        }
        
        .bc-subtask-completed-by {
            font-size: 12px;
            color: var(--text-muted);
            margin-left: auto;
        }
        
        .bc-subtask-delete {
            opacity: 0;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            transition: opacity 0.2s, color 0.2s;
        }
        
        .bc-subtask-item:hover .bc-subtask-delete {
            opacity: 1;
        }
        
        .bc-subtask-delete:hover {
            color: var(--accent-red);
        }
        
        .bc-subtask-add {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .bc-subtask-input {
            flex: 1;
            padding: 4px 0;
            border: none;
            border-bottom: 1px solid transparent;
            font-size: 15px;
            color: var(--text-muted);
            background: transparent;
            transition: border-color 0.2s, color 0.2s;
        }
        
        .bc-subtask-input:hover {
            border-bottom-color: var(--border);
        }
        
        .bc-subtask-input:focus {
            outline: none;
            border-bottom-color: var(--accent-green);
            color: var(--text);
        }
        
        .bc-subtask-input::placeholder {
            color: var(--text-muted);
        }
        
        .bc-meta-label {
            font-size: 14px;
            color: var(--text-secondary);
            font-weight: 700;
            text-align: right;
            padding-right: 24px;
        }
        
        .bc-meta-value {
            font-size: 16px;
            color: var(--text);
            line-height: 1.5;
        }
        
        .bc-meta-clickable {
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: background-color 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-meta-clickable:hover {
            background: var(--bg);
        }
        
        .bc-meta-clickable .bc-edit-hint {
            font-size: 10px;
            color: var(--text-muted);
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .bc-meta-clickable:hover .bc-edit-hint {
            opacity: 1;
        }
        
        .bc-admin-time-link {
            font-size: 12px;
            color: var(--text-muted);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-admin-time-link:hover {
            color: var(--primary);
        }
        
        .bc-meta-value-full {
            width: 100%;
        }
        
        .bc-meta-editable-group {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-meta-editable-group .bc-meta-editable {
            min-width: 100px;
            text-align: center;
        }
        
        .btn-date-adjust {
            width: 24px;
            height: 24px;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--surface);
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            transition: all 0.15s;
        }
        
        .btn-date-adjust:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }
        
        .bc-meta-editable {
            cursor: pointer;
            padding: 4px 8px;
            margin: -4px -8px;
            border-radius: 4px;
            transition: background 0.15s;
        }
        
        .bc-meta-editable:hover {
            background: var(--bg-hover);
        }
        
        .bc-meta-editable.bc-no-row-hover {
            cursor: default;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }
        
        .bc-meta-editable.bc-no-row-hover:hover {
            background: transparent;
        }
        
        .bc-meta-editable.bc-meta-readonly,
        .bc-meta-readonly {
            cursor: default;
            color: var(--text-muted);
        }
        
        .bc-meta-editable.bc-meta-readonly:hover,
        .bc-meta-readonly:hover {
            background: transparent;
        }
        
        .bc-text-placeholder {
            color: var(--text-muted);
            font-style: italic;
        }
        
        .bc-icon-muted {
            color: var(--text-muted);
            margin-right: 6px;
        }
        
        .bc-assignee-inline {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
            white-space: nowrap;
            background: var(--bg);
            padding: 4px 10px 4px 6px;
            border-radius: 16px;
            font-size: 13px;
        }
        
        .bc-assignee-inline.bc-clickable:hover,
        .bc-text-placeholder.bc-clickable:hover {
            cursor: pointer;
            background: var(--border);
        }
        
        /* Assignee picker */
        .bc-assignee-picker {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            max-width: 280px;
            overflow: hidden;
        }
        
        .bc-assignee-list {
            max-height: 480px;
            overflow-y: auto;
        }
        
        .bc-assignee-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            transition: background 0.15s;
            font-size: 14px;
        }
        
        .bc-assignee-option:hover {
            background: var(--bg-cream);
        }
        
        .bc-assignee-option.selected {
            background: var(--badge-green-bg);
        }
        
        .bc-assignee-option .bc-check-icon {
            margin-left: auto;
            color: var(--badge-green-text);
            font-size: 12px;
        }
        
        .bc-assignee-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-top: 1px solid var(--border);
            background: var(--bg-secondary);
        }
        
        /* Notes upload zone */
        .bc-notes-upload-zone {
            padding: 10px;
            border: 1px dashed var(--border-dark);
            border-radius: 6px;
            text-align: center;
            color: var(--text-secondary);
            cursor: pointer;
            margin: 8px 0;
            font-size: 13px;
            transition: all 0.15s;
        }
        
        .bc-notes-upload-zone:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: var(--bg);
        }
        
        .bc-progress-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-progress-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-progress-name {
            flex: 1;
            font-size: 14px;
        }
        
        .bc-progress-time {
            font-weight: 600;
            color: var(--primary);
            font-size: 14px;
        }
        
        .bc-progress-total {
            margin-top: 4px;
            padding-top: 8px;
            border-top: 1px solid var(--border);
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .bc-progress-avatars {
            display: flex;
            gap: 4px;
        }
        
        .bc-notes-content {
            min-height: 50px;
        }
        
        .bc-notes-textarea {
            min-height: 150px;
            width: 100%;
        }
        
        .bc-rendered-content {
            color: var(--text);
            font-size: 15px;
            line-height: 1.6;
            word-break: break-word;
            overflow-wrap: break-word;
        }
        
        .bc-rendered-content h1 { font-size: 24px; font-weight: 600; margin: 0 0 12px 0; }
        .bc-rendered-content h2 { font-size: 20px; font-weight: 600; margin: 16px 0 10px 0; }
        .bc-rendered-content h3 { font-size: 17px; font-weight: 600; margin: 14px 0 8px 0; }
        .bc-rendered-content h4 { font-size: 15px; font-weight: 600; margin: 12px 0 6px 0; }
        .bc-rendered-content p { margin: 0 0 8px 0; }
        .bc-rendered-content p:last-child { margin-bottom: 0; }
        .bc-rendered-content ul, .bc-rendered-content ol { margin: 4px 0 8px 0; padding-left: 24px; }
        .bc-rendered-content li { margin-bottom: 2px; }
        .bc-rendered-content img {
            max-width: 100%;
            border-radius: 6px;
            margin: 12px 0;
            display: block;
            cursor: pointer;
            transition: opacity 0.15s ease;
        }
        .bc-rendered-content img:hover {
            opacity: 0.85;
        }
        .bc-rendered-content a { color: var(--link-color); text-decoration: none; }
        .bc-rendered-content a:hover { text-decoration: underline; }
        .bc-rendered-content strong, .bc-rendered-content b { font-weight: 600; }
        .bc-rendered-content pre { background: var(--bg); padding: 12px; border-radius: 6px; overflow-x: auto; }
        .bc-rendered-content code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 13px; }
        
        /* Tags/Štítky section */
        .bc-todo-tags-section {
            margin-bottom: 16px;
        }
        
        .bc-tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        
        .bc-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            cursor: default;
        }
        
        .bc-tag-delete {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: none;
            background: rgba(0,0,0,0.15);
            color: inherit;
            font-size: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.15s;
        }
        
        .bc-tag:hover .bc-tag-delete {
            opacity: 1;
        }
        
        .bc-tag-delete:hover {
            background: rgba(0,0,0,0.25);
        }
        
        .bc-tag-blue { background: var(--bg-blue-tint); color: var(--accent-blue); }
        .bc-tag-green { background: var(--bg-green-tint); color: var(--accent-green); }
        .bc-tag-yellow { background: var(--badge-yellow-bg); color: var(--badge-yellow-text); }
        .bc-tag-red { background: var(--badge-red-bg); color: var(--badge-red-text); }
        .bc-tag-purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
        .bc-tag-pink { background: var(--badge-pink-bg); color: var(--badge-pink-text); }
        .bc-tag-indigo { background: var(--badge-indigo-bg); color: var(--badge-indigo-text); }
        .bc-tag-teal { background: var(--badge-teal-bg); color: var(--badge-teal-text); }
        .bc-tag-orange { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
        .bc-tag-gray { background: var(--badge-gray-bg); color: var(--badge-gray-text); }
        
        .bc-tag-selected {
            box-shadow: 0 0 0 2px currentColor;
            transform: scale(1.02);
        }
        
        /* Priority badges */
        .bc-priority-badges {
            display: flex;
            gap: 8px;
        }
        
        /* Generic badges for admin table */
        .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .badge-primary {
            background: #1264a3;
            color: white;
        }
        
        .badge-secondary {
            background: var(--border);
            color: var(--text-secondary);
        }
        
        .badge-info {
            background: #17a2b8;
            color: white;
        }
        
        .badge-warning {
            background: var(--accent-yellow);
            color: var(--text);
        }
        
        .badge-success {
            background: #28a745;
            color: white;
        }
        
        .badge-danger {
            background: #dc3545;
            color: white;
        }
        
        /* Trash items */
        .trash-item {
            transition: background 0.15s ease;
        }
        
        .trash-item:hover {
            background: var(--bg-secondary);
        }
        
        .trash-item.selected {
            background: var(--badge-blue-bg);
        }
        
        .trash-item:last-child {
            border-bottom: none !important;
        }
        
        /* Simple table style for admin modals */
        .bc-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        
        .bc-table th,
        .bc-table td {
            padding: 8px 10px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }
        
        .bc-table th {
            background: var(--bg);
            font-weight: 600;
            font-size: 11px;
            text-transform: uppercase;
            color: var(--text-secondary);
        }
        
        .bc-table tr:hover {
            background: var(--bg);
        }
        
        /* Reporting stat cards */
        .bc-stat-card {
            background: var(--surface);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            border: 1px solid var(--border);
            text-align: center;
            transition: all 0.2s ease;
        }
        .bc-stat-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        .bc-stat-card .bc-stat-value {
            font-size: 32px;
            font-weight: 800;
            color: #1d7874;
            margin-bottom: 8px;
        }
        .bc-stat-card .bc-stat-label {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .bc-stat-card.secondary {
            background: var(--bg);
        }
        .bc-stat-card.secondary .bc-stat-value {
            font-size: 24px;
            color: var(--text);
        }
        .bc-stat-card.warning .bc-stat-value {
            color: var(--accent-yellow);
        }
        .bc-stat-card.danger .bc-stat-value {
            color: var(--accent-red);
        }
        .bc-stat-card.success .bc-stat-value {
            color: var(--accent-green);
        }
        
        .bc-user-card-hover:hover {
            border-color: var(--primary) !important;
            background: var(--bg-hover) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .bc-card {
            background: var(--surface);
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            border: 1px solid var(--border);
        }
        
        .form-input-sm {
            padding: 4px 8px !important;
            font-size: 12px !important;
        }
        
        .bc-priority-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
            opacity: 0.6;
            border: 2px solid;
        }
        
        .bc-priority-badge:hover {
            opacity: 0.9;
            transform: scale(1.1);
        }
        
        .bc-priority-badge.bc-priority-active {
            opacity: 1;
            transform: scale(1.15);
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        }
        
        .bc-priority-low {
            background: var(--accent-green-light);
            color: var(--accent-green);
            border-color: var(--border-green-light);
        }
        .bc-priority-low.bc-priority-active {
            background: var(--accent-green-light);
            border-color: var(--accent-green);
        }
        
        .bc-priority-normal {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
            border-color: var(--border-blue-light);
        }
        .bc-priority-normal.bc-priority-active {
            background: var(--accent-blue-light);
            border-color: var(--accent-blue);
        }
        
        .bc-priority-high {
            background: var(--accent-orange-light);
            color: var(--accent-orange);
            border-color: var(--border-yellow-light);
        }
        .bc-priority-high.bc-priority-active {
            background: var(--accent-orange-light);
            border-color: var(--accent-orange);
        }
        
        .bc-priority-critical {
            background: var(--accent-red-light);
            color: var(--accent-red);
            border-color: var(--border-red-light);
        }
        .bc-priority-critical.bc-priority-active {
            background: var(--accent-red-light);
            border-color: var(--accent-red);
            animation: pulse-critical 1.5s ease-in-out infinite;
        }
        
        @keyframes pulse-critical {
            0%, 100% { box-shadow: 0 2px 6px rgba(211, 47, 47, 0.3); }
            50% { box-shadow: 0 2px 12px rgba(211, 47, 47, 0.5); }
        }
        
        /* Billing Type Mini Badge */
        .bc-billing-mini {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
        
        .bc-billing-mini:hover {
            transform: scale(1.05);
        }
        
        .bc-billing-mini-included {
            background: var(--badge-green-bg);
            color: var(--badge-green-text);
        }
        
        .bc-billing-mini-extra {
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
        }
        
        /* Dependency Badge */
        .bc-dependency-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 500;
            cursor: help;
            margin-left: 4px;
        }
        
        .bc-dependency-badge-parent {
            background: var(--badge-blue-bg);
            color: var(--primary);
        }
        
        .bc-dependency-badge-child {
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
        }
        
        .bc-dependency-badge-blocked {
            background: var(--badge-red-bg);
            color: var(--accent-red);
        }
        
        /* Subtodo styling - depth 1 (sub) */
        .bc-subtodo {
            position: relative;
            background: var(--bg-amber-tint) !important;
        }
        
        /* Depth-based padding - set via inline style */
        .bc-subtodo.bc-depth-1 {
            margin-left: 30px !important;
        }
        .bc-subtodo.bc-depth-2 {
            margin-left: 60px !important;
            background: var(--badge-yellow-bg) !important;
        }
        .bc-subtodo.bc-depth-3 {
            margin-left: 90px !important;
            background: #fde68a !important;
        }
        
        .bc-subtodo-bar {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--accent-yellow);
            border-radius: 2px 0 0 2px;
        }
        
        .bc-parent-todo {
            border-left: 3px solid var(--accent-blue);
        }
        
        /* Completed parent with incomplete children - stays in active section */
        .bc-parent-waiting {
            background: linear-gradient(to right, var(--bg-green-tint), var(--bg-amber-tint)) !important;
            border-left: 3px solid var(--accent-green);
        }
        
        .bc-parent-waiting .bc-todo-title {
            text-decoration: line-through;
            opacity: 0.7;
        }
        
        /* Link icon for creating dependencies */
        .bc-link-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border: none;
            background: transparent;
            color: var(--text-disabled);
            cursor: pointer;
            border-radius: 4px;
            opacity: 0;
            transition: all 0.15s ease;
            flex-shrink: 0;
            font-size: 11px;
            margin-right: 2px;
        }
        
        .bc-todo-item:hover .bc-link-icon {
            opacity: 1;
        }
        
        .bc-link-icon:hover {
            background: var(--border);
            color: var(--accent-blue);
        }
        
        .bc-link-icon.active {
            opacity: 1;
            background: var(--accent-blue);
            color: white;
        }
        
        /* Linking mode visual feedback */
        .bc-linking-source {
            box-shadow: 0 0 0 2px var(--accent-blue) !important;
            background: var(--bg-blue-tint) !important;
        }
        
        .bc-linking-target {
            cursor: pointer !important;
        }
        
        .bc-linking-target:hover {
            background: var(--badge-yellow-bg) !important;
            box-shadow: 0 0 0 2px #f59e0b !important;
        }
        
        /* Unlink button for subtodos */
        .bc-unlink-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            border-radius: 4px;
            opacity: 0;
            transition: all 0.15s ease;
            margin-left: 4px;
        }
        
        .bc-todo-item:hover .bc-unlink-icon {
            opacity: 1;
        }
        
        .bc-unlink-icon:hover {
            background: var(--badge-red-bg);
            color: var(--accent-red);
        }
        
        /* Dependency tree visualization in todo detail */
        .bc-dependency-tree {
            padding: 12px 16px;
            background: var(--bg);
            border-radius: 8px;
            margin: 8px 0 16px 44px;
        }
        
        .bc-dep-tree-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-dep-tree-items {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .bc-dep-tree-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            background: var(--surface);
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .bc-dep-tree-item:hover {
            background: var(--bg-blue-tint);
        }
        
        .bc-dep-tree-item.current {
            background: var(--badge-yellow-bg);
            font-weight: 600;
            cursor: default;
        }
        
        .bc-dep-tree-item.parent {
            border-left: 3px solid var(--accent-blue);
        }
        
        .bc-dep-tree-item.child {
            border-left: 3px solid var(--accent-yellow);
            margin-left: 20px;
        }
        
        .bc-dep-tree-item.completed {
            opacity: 0.6;
        }
        
        .bc-dep-tree-item.completed .bc-dep-tree-title {
            text-decoration: line-through;
        }
        
        .bc-dep-tree-icon {
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            font-size: 10px;
        }
        
        .bc-dep-tree-icon.parent {
            background: var(--badge-blue-bg);
            color: var(--accent-blue);
        }
        
        .bc-dep-tree-icon.current {
            background: var(--badge-yellow-bg);
            color: var(--accent-yellow);
        }
        
        .bc-dep-tree-icon.child {
            background: var(--badge-orange-bg);
            color: var(--badge-orange-text);
        }
        
        .bc-dep-tree-connector {
            width: 16px;
            height: 1px;
            background: var(--border);
            margin: 0 4px;
        }
        
        /* Collapse toggle for parent todos */
        .bc-collapse-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border: none;
            background: var(--border);
            color: var(--text-secondary);
            cursor: pointer;
            border-radius: 4px;
            font-size: 9px;
            margin-right: 4px;
            flex-shrink: 0;
            transition: all 0.15s ease;
        }
        
        .bc-collapse-toggle:hover {
            background: var(--border);
            color: var(--text);
        }
        
        .bc-collapse-toggle.collapsed {
            background: var(--badge-blue-bg);
            color: var(--accent-blue);
        }
        
        .bc-children-count {
            font-size: 10px;
            color: var(--text-muted);
            margin-left: 4px;
        }
        
        .bc-add-tag-form {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-add-tag-input {
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 4px 10px;
            font-size: 12px;
            width: 100px;
            outline: none;
        }
        
        .bc-add-tag-input:focus {
            border-color: var(--primary);
        }
        
        .bc-add-tag-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px dashed #c5c3c0;
            background: none;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .bc-add-tag-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        /* Added by section */
	        .bc-todo-added-by {
	            margin-top: 24px;
	            padding-top: 16px;
	            border-top: 1px solid var(--border);
	            font-size: 13px;
	            color: var(--text-secondary);
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            gap: 12px;
	            position: relative;
	        }

	        .bc-todo-added-by .bc-added-left {
	            display: flex;
	            align-items: center;
	            gap: 4px;
	            min-width: 0;
	        }

	        .bc-todo-added-by .bc-added-right {
	            position: relative;
	            flex: 0 0 auto;
	        }

	        .bc-todo-views-trigger {
	            color: #8a8f98;
	            font-size: 12px;
	            text-decoration: none;
	            white-space: nowrap;
	        }

	        .bc-todo-views-trigger:hover {
	            color: #6a737d;
	            text-decoration: underline;
	        }
        
        .bc-added-label {
            color: var(--text-secondary);
            margin-right: 2px;
        }
        
        .bc-added-user {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            margin: 0 2px;
        }
        
        .bc-added-user:hover {
            text-decoration: underline;
        }
        
	        .bc-added-on {
	            color: var(--text-muted);
	        }

	        .bc-todo-views-popover {
	            position: absolute;
	            right: 0;
	            bottom: calc(100% + 10px);
	            width: min(360px, calc(100vw - 32px));
	            background: var(--surface);
	            border: 1px solid rgba(27,31,36,0.15);
	            border-radius: 12px;
	            box-shadow: 0 12px 28px rgba(0,0,0,0.18);
	            z-index: 60;
	            overflow: hidden;
	        }

	        .bc-todo-views-popover-header {
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            padding: 10px 12px;
	            border-bottom: 1px solid #e1e4e8;
	        }

	        .bc-todo-views-popover-title {
	            font-weight: 600;
	            color: var(--text);
	            font-size: 13px;
	        }

	        .bc-todo-views-popover-close {
	            border: 0;
	            background: transparent;
	            color: #6a737d;
	            font-size: 18px;
	            line-height: 1;
	            cursor: pointer;
	            padding: 0 4px;
	        }

	        .bc-todo-views-popover-stats {
	            padding: 8px 12px;
	            font-size: 12px;
	            color: #6a737d;
	            border-bottom: 1px solid #e1e4e8;
	        }

	        .bc-todo-views-popover-body {
	            max-height: 320px;
	            overflow-y: auto;
	        }

	        .bc-todo-views-item {
	            display: flex;
	            align-items: center;
	            padding: 10px 12px;
	            border-bottom: 1px solid #f0f2f4;
	            gap: 10px;
	        }

	        .bc-todo-views-item:last-child {
	            border-bottom: 0;
	        }

	        .bc-todo-views-item-name {
	            font-weight: 600;
	            color: var(--text);
	            font-size: 13px;
	        }

	        .bc-todo-views-item-meta {
	            font-size: 12px;
	            color: #6a737d;
	        }
        
        /* RAG AI Assistant Block */
        .bc-rag-assistant-block {
            border-radius: 12px;
            margin-bottom: 24px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        /* Default/Found state - green theme */
        .bc-rag-assistant-block.rag-found {
            background: var(--bg-green-tint);
            border: 1px solid var(--border-green-light);
            box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
        }

        .bc-rag-assistant-block.rag-found .bc-rag-header {
            background: rgba(34, 197, 94, 0.15);
            border-bottom: 1px solid rgba(34, 197, 94, 0.2);
            color: var(--badge-green-text);
        }
        
        .bc-rag-assistant-block.rag-found .bc-rag-header i {
            color: var(--accent-green);
        }
        
        /* Loading/Analyzing state - yellow theme */
        .bc-rag-assistant-block.rag-loading {
            background: var(--bg-amber-tint);
            border: 1px solid var(--border-yellow-light);
            box-shadow: 0 2px 8px rgba(251, 191, 36, 0.15);
        }
        
        .bc-rag-assistant-block.rag-loading .bc-rag-header {
            background: rgba(251, 191, 36, 0.2);
            border-bottom: 1px solid rgba(251, 191, 36, 0.3);
            color: var(--badge-yellow-text);
        }
        
        .bc-rag-assistant-block.rag-loading .bc-rag-header i {
            color: var(--accent-yellow);
        }
        
        /* Low confidence/Not found state - soft red/gray theme */
        .bc-rag-assistant-block.rag-low {
            background: var(--bg-red-tint);
            border: 1px solid var(--border-red-light);
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
        }
        
        .bc-rag-assistant-block.rag-low .bc-rag-header {
            background: rgba(239, 68, 68, 0.1);
            border-bottom: 1px solid rgba(239, 68, 68, 0.15);
            color: var(--badge-red-text);
        }
        
        .bc-rag-assistant-block.rag-low .bc-rag-header i {
            color: var(--accent-red);
        }
        
        /* Empty/Idle state - neutral gray */
        .bc-rag-assistant-block.rag-empty {
            background: var(--bg-secondary);
            border: 1px solid var(--border-dark);
            box-shadow: 0 2px 8px rgba(107, 114, 128, 0.1);
        }
        
        .bc-rag-assistant-block.rag-empty .bc-rag-header {
            background: rgba(107, 114, 128, 0.1);
            border-bottom: 1px solid rgba(107, 114, 128, 0.15);
            color: var(--text-secondary);
        }
        
        .bc-rag-assistant-block.rag-empty .bc-rag-header i {
            color: var(--text-muted);
        }
        
        /* AI Disabled state - gray/muted */
        .bc-rag-assistant-block.ai-disabled {
            background: var(--border-light) !important;
            border: 1px solid var(--border-dark) !important;
            box-shadow: none !important;
            opacity: 0.7;
        }
        
        .bc-rag-assistant-block.ai-disabled .bc-rag-header {
            background: rgba(107, 114, 128, 0.15) !important;
            border-bottom: 1px solid rgba(107, 114, 128, 0.2) !important;
            color: var(--text-secondary) !important;
        }
        
        .bc-rag-assistant-block.ai-disabled .bc-rag-header i {
            color: var(--text-muted) !important;
        }
        
        .bc-rag-assistant-block.ai-disabled .bc-rag-content {
            display: none;
        }
        
        .bc-rag-assistant-block.ai-disabled .bc-rag-disabled-notice {
            display: block;
            padding: 12px 16px;
            color: var(--text-secondary);
            font-size: 13px;
            font-style: italic;
        }
        
        .bc-rag-disabled-notice {
            display: none;
        }
        
        /* AI Toggle button in RAG header */
        .bc-rag-ai-toggle {
            margin-left: auto;
            padding: 4px 10px;
            background: rgba(255,255,255,0.3);
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            color: inherit;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-rag-ai-toggle:hover {
            background: var(--bg-hover);
            border-color: var(--border-dark);
        }
        
        .bc-rag-ai-toggle.is-disabled {
            color: var(--text-muted);
        }
        
        .bc-rag-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            font-weight: 600;
            font-size: 13px;
        }
        
        .bc-rag-content {
            padding: 16px;
        }
        
        .bc-rag-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 12px;
        }
        
        .bc-rag-status i {
            font-size: 14px;
        }
        
        .bc-rag-found .bc-rag-status i { color: var(--accent-green); }
        .bc-rag-low .bc-rag-status i { color: var(--accent-red); }
        .bc-rag-empty .bc-rag-status i { color: var(--text-secondary); }
        .bc-rag-loading .bc-rag-status i { color: var(--accent-yellow); }
        
        .bc-rag-loading-content {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--badge-yellow-text);
            font-size: 13px;
        }
        
        .bc-rag-confidence {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 600;
            margin-left: auto;
        }
        
        .bc-rag-confidence.high {
            background: var(--badge-green-bg);
            color: var(--badge-green-text);
        }
        
        .bc-rag-confidence.medium {
            background: var(--badge-yellow-bg);
            color: var(--badge-yellow-text);
        }
        
        .bc-rag-confidence.low {
            background: var(--badge-red-bg);
            color: var(--badge-red-text);
        }
        
        .bc-rag-match {
            font-size: 12px;
            color: var(--accent-purple);
            margin-bottom: 8px;
        }
        
        .bc-rag-match i {
            margin-right: 4px;
        }
        
        .bc-rag-reasoning {
            font-size: 12px;
            color: var(--text-secondary);
            font-style: italic;
            margin-bottom: 12px;
            line-height: 1.5;
        }
        
        /* RAG Interactive Checklist - Enhanced Design */
        .bc-rag-checklist {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-left: 4px solid var(--accent-purple);
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
        }
        
        .bc-rag-checklist-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-rag-checklist-title i {
            color: var(--accent-purple);
            font-size: 16px;
        }
        
        .bc-rag-checklist-counter {
            margin-left: auto;
            background: var(--border);
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
        }
        
        .bc-rag-checklist-counter .satisfied-count {
            color: var(--accent-green);
        }
        
        .bc-rag-checklist-content {
            flex: 1;
        }
        
        .bc-rag-checklist-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            font-size: 13px;
            background: var(--surface);
            border-radius: 6px;
            margin-bottom: 6px;
            border: 1px solid var(--border);
            transition: transform 0.15s, box-shadow 0.15s;
        }
        
        .bc-rag-checklist-item:last-child {
            margin-bottom: 0;
        }
        
        .bc-rag-checklist-item:hover {
            transform: translateX(2px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .bc-rag-checklist-item i {
            margin-top: 2px;
            flex-shrink: 0;
            font-size: 14px;
        }
        
        .bc-rag-checklist-item.satisfied {
            border-color: var(--border-green-light);
            background: var(--bg-green-tint);
        }
        
        .bc-rag-checklist-item.satisfied i {
            color: var(--accent-green);
        }
        
        .bc-rag-checklist-item:not(.satisfied) {
            border-color: var(--border-red-light);
            background: var(--bg-red-tint);
        }
        
        .bc-rag-checklist-item:not(.satisfied) i {
            color: var(--accent-red);
        }
        
        .bc-rag-checklist-item.satisfied span {
            color: var(--badge-green-text);
        }
        
        .bc-rag-checklist-item:not(.satisfied) span {
            color: var(--badge-red-text);
            font-weight: 500;
        }
        
        .bc-rag-checklist-note {
            display: block;
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 4px;
            padding-left: 24px;
        }
        
        /* Autobot comment checklist styling */
        .comment-content ul.rag-checklist {
            list-style: none;
            padding: 0;
            margin: 8px 0;
        }
        
        .comment-content ul.rag-checklist li {
            padding: 4px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .comment-content ul.rag-checklist li:last-child {
            border-bottom: none;
        }
        
        .comment-content ul.rag-checklist li.rag-check.checked {
            color: var(--badge-green-text);
        }
        
        .comment-content ul.rag-checklist li.rag-check.unchecked {
            color: var(--badge-red-text);
        }
        
        .comment-content a[href^="mailto:"] {
            color: var(--link-color);
            text-decoration: none;
        }
        
        .comment-content a[href^="mailto:"]:hover {
            text-decoration: underline;
        }
        
        .comment-content a[href^="http"] {
            color: var(--link-color);
            text-decoration: none;
        }
        
        .comment-content a[href^="http"]:hover {
            text-decoration: underline;
        }
        
        /* RAG Missing Data Warning - Enhanced Design */
        .bc-rag-missing-data {
            background: var(--bg-red-tint);
            border: 1px solid var(--border-red-light);
            border-left: 4px solid var(--accent-red);
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
        }
        
        .bc-rag-missing-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--accent-red);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-rag-missing-title i {
            font-size: 16px;
            color: var(--accent-red);
        }
        
        .bc-rag-missing-count {
            margin-left: auto;
            background: var(--accent-red);
            color: white;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .bc-rag-missing-data ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .bc-rag-missing-data li {
            padding: 8px 12px;
            margin: 4px 0;
            background: var(--surface);
            border-radius: 6px;
            font-size: 13px;
            color: var(--badge-red-text);
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--border-red-light);
        }
        
        .bc-rag-missing-data li::before {
            content: "✗";
            font-weight: bold;
            color: var(--accent-red);
            font-size: 14px;
        }
        
        /* RAG Suggested Actions */
        .bc-rag-suggested-actions {
            background: var(--bg-blue-tint);
            border: 1px solid var(--border-blue-light);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
        }
        
        .bc-rag-actions-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--badge-blue-text);
            margin-bottom: 10px;
        }
        
        .bc-rag-suggested-actions .btn {
            margin-right: 8px;
            margin-bottom: 4px;
        }
        
        .bc-rag-suggested-actions .btn-success {
            background: var(--accent-green);
            border-color: var(--accent-green);
            color: white;
        }
        
        .bc-rag-suggested-actions .btn-success:hover {
            background: var(--accent-green);
        }
        
        .bc-rag-suggested-actions .btn-warning {
            background: var(--accent-yellow);
            border-color: var(--accent-yellow);
            color: white;
        }
        
        .bc-rag-suggested-actions .btn-warning:hover {
            background: var(--accent-yellow);
        }
        
        .bc-rag-suggestion-text {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px;
            font-size: 13px;
            color: var(--text);
            margin-bottom: 12px;
            line-height: 1.5;
        }
        
        .bc-rag-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        
        .bc-rag-actions .btn-link {
            color: var(--text-secondary);
            font-size: 12px;
        }
        
        /* Pulse animation for new suggestion */
        @keyframes rag-pulse {
            0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
            100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
        }
        
        .bc-rag-assistant-block.rag-pulse {
            animation: rag-pulse 1s ease-out 2;
        }
        
        /* Comment highlight animation (when scrolling to autobot comment) */
        @keyframes comment-highlight {
            0% { background-color: rgba(34, 197, 94, 0.3); }
            100% { background-color: transparent; }
        }
        
        .bc-comment-row.bc-highlight-pulse {
            animation: comment-highlight 2s ease-out;
        }
        
        /* Highlight pulse for comment form */
        #comment-form.bc-highlight-pulse {
            animation: form-highlight 2s ease-out;
            border-radius: 8px;
        }
        
        @keyframes form-highlight {
            0% { 
                box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.5);
                background-color: rgba(34, 197, 94, 0.1);
            }
            100% { 
                box-shadow: none;
                background-color: transparent;
            }
        }
        
        /* Auto-accepted RAG block - minimized single line */
        .bc-rag-auto-accepted-minimized {
            padding: 6px 12px !important;
            background: var(--bg-green-tint) !important;
            border-top: 1px solid var(--border-green-light);
        }
        
        .bc-rag-auto-accepted-minimized .btn-xs {
            font-size: 11px;
            padding: 2px 6px;
        }
        
        /* Prefill ready RAG block - minimized with link to form */
        .bc-rag-prefill-ready {
            padding: 6px 12px !important;
            background: var(--bg-green-tint) !important;
            border-top: 1px solid var(--border-green-light);
        }
        
        .bc-rag-prefill-ready .btn-xs {
            font-size: 11px;
            padding: 2px 6px;
        }

        .bc-rag-actions .btn-link:hover {
            color: var(--text);
        }
        
        /* Subscribers section */
        .bc-subscribers-section {
            background: var(--surface);
            border-radius: 12px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 32px -8px rgba(0,0,0,0.12);
            padding: 32px 40px;
            margin-bottom: 32px;
            width: 100%;
        }
        
        .bc-subscribers-title {
            font-size: 15px;
            font-weight: 600;
            margin: 0 0 8px 0;
            color: var(--text);
        }
        
        .bc-subscribers-desc {
            font-size: 14px;
            color: var(--text-secondary);
            margin: 0 0 16px 0;
        }
        
        .bc-subscribers-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .bc-add-subscriber-btn {
            background: none;
            border: 1px dashed #c5c3c0;
            padding: 6px 12px;
            border-radius: 100px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
        }
        
        /* Sent Emails Section */
        .bc-emails-section {
            margin-top: 0;
        }
        
        .bc-show-more-bar,
        .bc-show-more-row td {
            background: var(--bg);
            border-radius: 6px;
        }
        .bc-show-more-link {
            color: #2563eb !important;
            font-size: 13px;
            font-weight: 500;
            padding: 6px 12px;
            border-radius: 6px;
            transition: background 0.15s;
        }
        .bc-show-more-link:hover {
            background: var(--bg-blue-tint);
            text-decoration: none !important;
        }
        
        .bc-emails-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        
        .bc-email-row {
            border-bottom: 1px solid var(--border-light);
        }
        
        .bc-email-row:last-child {
            border-bottom: none;
        }
        
        .bc-email-row td {
            padding: 8px 6px;
            vertical-align: middle;
        }
        
        .bc-email-date {
            color: var(--text-muted);
            white-space: nowrap;
            width: 90px;
            font-size: 12px;
        }
        
        .bc-email-to {
            color: var(--text);
            font-weight: 500;
            width: 140px;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .bc-email-subject {
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 300px;
        }
        
        .bc-email-action {
            width: 40px;
            text-align: right;
        }
        
        .bc-email-action .btn-link {
            color: var(--text-muted);
            padding: 4px 8px;
        }
        
        .bc-email-action .btn-link:hover {
            color: var(--accent-blue);
        }
        
        /* Pending email styles */
        .bc-email-pending {
            background: var(--bg-amber-tint);
        }
        
        .bc-email-pending td {
            color: var(--badge-yellow-text);
        }
        
        /* Batch/summary email styles */
        .bc-email-batch {
            background: var(--badge-purple-bg);
        }
        
        .bc-email-batch td {
            color: var(--badge-purple-text);
        }
        
        .bc-batch-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 500;
            color: var(--accent-purple);
            background: var(--badge-purple-bg);
            padding: 1px 5px;
            border-radius: 8px;
            margin-left: 6px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        
        .bc-email-status-icon {
            width: 24px;
            text-align: center;
        }
        
        .bc-pending-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 500;
            color: var(--accent-yellow);
            background: var(--badge-yellow-bg);
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 8px;
        }
        
        .bc-pending-label {
            font-size: 11px;
            color: var(--accent-yellow);
            font-style: italic;
        }
        
        .bc-email-preview {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 250px;
        }
        
        .bc-email-pending .bc-email-preview {
            color: var(--badge-yellow-text);
            opacity: 0.8;
        }
        
        /* Export todo as markdown button */
        .bc-export-todo-section {
            padding: 16px 0;
            text-align: center;
            border-top: 1px solid var(--border-light, #e5e7eb);
            margin-top: 16px;
        }
        .bc-export-todo-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            font-size: 12px;
            color: var(--text-secondary);
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .bc-export-todo-btn:hover {
            background: var(--bg-hover);
            color: var(--text);
            border-color: var(--text-disabled);
        }
        .bc-export-todo-btn i {
            font-size: 11px;
        }
        
        .bc-add-subscriber-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .bc-your-subscription {
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }
        
        .bc-your-subscription h5 {
            font-size: 13px;
            font-weight: 600;
            margin: 0 0 4px 0;
        }
        
        .bc-your-subscription p {
            font-size: 13px;
            color: var(--text-secondary);
            margin: 0 0 12px 0;
        }
        
        /* Dependencies section */
        .bc-dependencies-section {
            background: var(--surface);
            border-radius: 12px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 32px -8px rgba(0,0,0,0.12);
            padding: 24px 32px;
            margin-bottom: 24px;
        }
        
        .bc-dependencies-section .bc-section-title {
            margin-bottom: 16px;
            font-size: 15px;
            color: var(--text);
        }
        
        .bc-dep-group {
            margin-bottom: 16px;
        }
        
        .bc-dep-group:last-child {
            margin-bottom: 0;
        }
        
        .bc-dep-label {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bc-dep-label i {
            font-size: 11px;
        }
        
        .bc-dep-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .bc-dep-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .bc-dep-item:hover {
            background: var(--surface-hover);
            border-color: var(--primary);
        }
        
        .bc-dep-checkbox {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            border: 2px solid #d4d4d4;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: var(--surface);
        }
        
        .bc-dep-checkbox.completed {
            background: var(--accent-green);
            border-color: var(--accent-green);
            color: white;
        }
        
        .bc-dep-checkbox i {
            font-size: 10px;
        }
        
        .bc-dep-title {
            flex: 1;
            font-size: 14px;
            color: var(--text);
        }
        
        .bc-dep-title.completed {
            text-decoration: line-through;
            color: var(--text-muted);
        }
        
        .bc-dep-link-icon {
            font-size: 11px;
            color: var(--text-muted);
            opacity: 0;
            transition: opacity 0.15s;
        }
        
        .bc-dep-item:hover .bc-dep-link-icon {
            opacity: 1;
        }
        
        /* Attachments section */
        .bc-attachments-section {
            background: var(--surface);
            border-radius: 12px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 32px -8px rgba(0,0,0,0.12);
            padding: 32px 40px;
            margin-bottom: 32px;
        }
        
        .bc-attachments-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 16px;
        }
        
        .bc-attachment-card {
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-attachment-card:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .bc-attachment-preview {
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg);
            overflow: hidden;
            position: relative;
        }
        
        .bc-attachment-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .bc-attachment-video video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .bc-play-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.3);
        }
        
        .bc-play-overlay i {
            font-size: 32px;
            color: white;
            text-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        
        .bc-attachment-audio {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .bc-attachment-audio i {
            font-size: 40px;
            color: white;
        }
        
        .bc-attachment-file {
            background: var(--bg-hover);
        }
        
        .bc-attachment-file i {
            font-size: 40px;
            color: var(--text-secondary);
        }
        
        .bc-attachment-info {
            padding: 10px;
            background: var(--surface);
        }
        
        .bc-attachment-name {
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-attachment-meta {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
        }
        
        .bc-attachment-actions {
            display: flex;
            gap: 12px;
            margin-top: 6px;
        }
        
        .bc-attachment-action {
            font-size: 12px;
            color: var(--primary);
            text-decoration: none;
            cursor: pointer;
        }
        
        .bc-attachment-action:hover {
            text-decoration: underline;
        }
        
        /* Comments section - Basecamp style */
        .bc-comments-section-new {
            background: var(--surface);
            border-radius: 12px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 32px -8px rgba(0,0,0,0.12);
            padding: 32px 40px;
            margin-bottom: 32px;
        }
        
        .bc-section-title {
            font-size: 17px;
            font-weight: 600;
            margin: 0 0 24px 0;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text);
        }
        
        .bc-add-comment-link {
            font-size: 12px;
            font-weight: 500;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 4px;
            margin-left: auto;
        }
        
        .bc-add-comment-link:hover {
            text-decoration: underline;
            color: var(--primary-hover);
        }
        
        .bc-count {
            font-weight: normal;
            color: var(--text-secondary);
        }
        
        .bc-loading {
            color: var(--text-secondary);
            font-style: italic;
            padding: 16px 0;
        }
        
        /* Global Navigation Loading Overlay - simple spinner */
        .bc-navigating-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg, #f8f5f1);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        
        .bc-navigating-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--border-color, #e5e7eb);
            border-top-color: var(--primary, #3b82f6);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Fade transition */
        .fade-enter-active, .fade-leave-active {
            transition: opacity 0.1s ease;
        }
        .fade-enter-from, .fade-leave-to {
            opacity: 0;
        }
        
        .bc-no-items {
            color: var(--text-secondary);
            font-style: italic;
            padding: 24px;
            text-align: center;
        }
        
        .bc-comments-timeline {
            margin-bottom: 24px;
        }
        
        /* Comment row with date column */
        .bc-comment-row {
            display: grid;
            grid-template-columns: 70px 1fr;
            gap: 16px;
            padding: 20px 0;
            border-bottom: 1px solid var(--border);
            transition: background-color 0.3s ease;
        }
        
        .bc-comment-row.highlight-comment,
        .bc-comment-row.bc-comment-highlight {
            background: linear-gradient(90deg, var(--accent-yellow-light) 0%, var(--accent-yellow-light) 50%, transparent 100%);
            animation: highlightFade 2s ease-out;
        }
        
        @keyframes highlightFade {
            0% { background: var(--badge-yellow-bg); }
            100% { background: transparent; }
        }
        
        /* Typing indicator - prominent and animated */
        .bc-typing-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            background: var(--bg-blue-tint);
            border: 1px solid var(--border-blue-light);
            border-radius: 20px;
            color: var(--badge-blue-text);
            font-size: 13px;
            font-weight: 500;
            animation: typingPulse 2s ease-in-out infinite;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
        }
        
        .bc-typing-indicator strong {
            color: var(--primary);
        }
        
        .bc-typing-dots {
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }
        
        .bc-typing-dots span {
            width: 6px;
            height: 6px;
            background: var(--accent-blue);
            border-radius: 50%;
            animation: typingBounce 1.4s ease-in-out infinite;
        }
        
        .bc-typing-dots span:nth-child(1) { animation-delay: 0s; }
        .bc-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
        .bc-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes typingBounce {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-4px); opacity: 1; }
        }
        
        @keyframes typingPulse {
            0%, 100% { box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); }
            50% { box-shadow: 0 2px 12px rgba(59, 130, 246, 0.4); }
        }
        
        .bc-comment-row:last-child {
            border-bottom: none;
        }
        
        .bc-comment-row.bc-comment-completed {
            opacity: 0.6;
        }
        
        .bc-comment-row.bc-comment-completed .bc-comment-body-content {
            text-decoration: line-through;
            color: var(--text-muted);
        }

        .bc-comment-date-col {
            text-align: right;
            padding-top: 4px;
        }
        
        .bc-comment-date {
            font-size: 12px;
            color: var(--text-muted);
            white-space: nowrap;
        }
        
        /* Mobile inline date - hidden on desktop, shown on mobile when date column is hidden */
        .bc-comment-date-inline {
            display: none;
            font-size: 12px;
            color: var(--text-muted);
            white-space: nowrap;
            margin-right: 8px;
        }
        
        @media (max-width: 768px) {
            .bc-comment-date-col {
                display: none;
            }
            .bc-comment-date-inline {
                display: inline;
            }
        }
        
        .bc-comment-main {
            flex: 1;
        }
        
        .bc-comment-header-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .bc-comment-meta {
            flex: 1;
        }
        
        .bc-comment-author {
            font-weight: 600;
            color: var(--text);
            font-size: 14px;
        }
        
        .bc-comment-position {
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 400;
        }
        
        .bc-comment-group-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 10px;
            border-radius: 100px;
            margin-left: 8px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            border: 1.5px solid;
        }
        
        /* Comment badge color variants - matching project chip styles */
        .bc-comment-group-badge-blue { border-color: var(--accent-blue); background: rgba(59, 130, 246, 0.08); color: var(--badge-blue-text); }
        .bc-comment-group-badge-green { border-color: var(--accent-green); background: rgba(16, 185, 129, 0.08); color: var(--badge-green-text); }
        .bc-comment-group-badge-orange { border-color: var(--accent-yellow); background: rgba(245, 158, 11, 0.08); color: var(--badge-yellow-text); }
        .bc-comment-group-badge-purple { border-color: var(--accent-purple); background: rgba(139, 92, 246, 0.08); color: var(--badge-purple-text); }
        .bc-comment-group-badge-red { border-color: var(--accent-red); background: rgba(239, 68, 68, 0.08); color: var(--accent-red); }
        .bc-comment-group-badge-gray { border-color: var(--text-secondary); background: rgba(107, 114, 128, 0.08); color: var(--text); }
        
        .bc-comment-role {
            color: var(--text-secondary);
            font-size: 13px;
        }
        
        .bc-comment-actions-menu {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-comment-actions-menu .btn-icon {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .bc-comment-actions-menu .btn-icon:hover {
            background: var(--bg-hover);
            color: var(--primary);
        }
        
        .bc-comment-actions-menu .btn-icon.boosted {
            color: var(--accent-yellow);
        }
        
        .bc-comment-actions-menu .btn-icon.completed {
            color: var(--accent-green);
        }

        .bc-comment-actions-menu .btn-icon .boost-count {
            font-size: 11px;
            margin-left: 2px;
        }
        
        .bc-boost-avatar {
            font-size: 8px;
        }
        
        .bc-boost-text {
            font-size: 12px;
            margin-left: 4px;
        }
        
        .bc-boost-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-right: 4px;
        }
        
        .bc-boost-content {
            font-size: 13px;
            color: var(--text);
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .bc-comment-body-content {
            color: var(--text);
            font-size: 18px;
            line-height: 27px;
            word-break: break-word;
            overflow-wrap: break-word;
        }
        
        .bc-comment-body-content h1 {
            font-size: 28px;
            font-weight: 600;
            line-height: 1.3;
            margin: 0 0 12px 0;
        }
        
        .bc-comment-body-content h2 {
            font-size: 24px;
            font-weight: 600;
            line-height: 1.3;
            margin: 16px 0 10px 0;
        }
        
        .bc-comment-body-content h3 {
            font-size: 18px;
            font-weight: 600;
            line-height: 1.3;
            margin: 14px 0 8px 0;
        }
        
        .bc-comment-body-content h4 {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.3;
            margin: 12px 0 6px 0;
        }
        
        .bc-comment-body-content p {
            margin: 0 0 8px 0;
        }
        
        .bc-comment-body-content p:last-child {
            margin-bottom: 0;
        }
        
        .bc-comment-body-content ul,
        .bc-comment-body-content ol {
            margin: 4px 0 8px 0;
            padding-left: 24px;
        }
        
        .bc-comment-body-content li {
            margin-bottom: 2px;
        }
        
        .bc-comment-body-content img {
            max-width: 100%;
            border-radius: 6px;
            margin: 12px 0;
            display: block;
            cursor: pointer;
            transition: opacity 0.15s ease;
        }
        
        .bc-comment-body-content img:hover {
            opacity: 0.85;
        }
        
        /* Avatar in mentions should be inline */
        .bc-comment-body-content img.avatar {
            display: inline !important;
            width: 18px !important;
            height: 18px !important;
            border-radius: 4px;
            margin: 0;
            vertical-align: middle;
        }
        
        .bc-comment-body-content figure {
            display: block;
            margin: 12px 0;
        }
        
        .bc-comment-body-content figure img {
            margin: 0 0 4px 0;
        }
        
        .bc-comment-body-content figcaption {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: var(--text-secondary);
        }
        
        /* Mentions inline — override the block figure/figcaption above */
        .bc-comment-body-content bc-attachment[content-type="application/vnd.basecamp.mention"] {
            display: inline;
        }
        .bc-comment-body-content bc-attachment[content-type="application/vnd.basecamp.mention"] figure {
            display: inline-flex !important;
            align-items: center;
            gap: 3px;
            margin: 0;
            vertical-align: baseline;
            white-space: nowrap;
            background: var(--bg-secondary);
            padding: 1px 6px 1px 2px;
            border-radius: 10px;
            font-size: 12px;
            line-height: 1.3;
        }
        .bc-comment-body-content bc-attachment[content-type="application/vnd.basecamp.mention"] figure img.avatar {
            display: inline !important;
            width: 18px !important;
            height: 18px !important;
            border-radius: 4px;
            vertical-align: middle;
            flex-shrink: 0;
            margin: 0 !important;
        }
        .bc-comment-body-content bc-attachment[content-type="application/vnd.basecamp.mention"] figcaption {
            display: inline !important;
            font-weight: 500;
            color: var(--primary);
            white-space: nowrap;
            font-size: 13px;
        }
        
        .bc-comment-body-content a {
            color: var(--primary);
            text-decoration: none;
        }
        
        .bc-comment-body-content a:hover {
            text-decoration: underline;
        }
        
        /* Attachment grid for multiple images — shared between comments and notes */
        .bc-attachment-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 12px;
            margin: 12px 0;
        }
        
        .bc-attachment-grid-item {
            margin: 0;
            position: relative;
            background: var(--bg);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border);
            transition: all 0.15s;
        }

        .bc-attachment-grid-item:hover {
            border-color: var(--text-disabled);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transform: translateY(-1px);
        }
        
        .bc-attachment-grid-item a {
            display: block;
        }

        .bc-attachment-grid-item img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            margin: 0;
            border-radius: 0;
            display: block;
            cursor: pointer;
        }
        
        .bc-attachment-grid-item figcaption {
            padding: 8px 12px;
            font-size: 11px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: var(--bg);
        }

        /* Download overlay button on each grid item */
        .bc-attachment-dl-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(0,0,0,0.55);
            color: #fff;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.15s;
            z-index: 2;
            font-size: 13px;
        }
        .bc-attachment-grid-item:hover .bc-attachment-dl-btn {
            opacity: 1;
        }
        .bc-attachment-dl-btn:hover {
            background: rgba(0,0,0,0.8);
        }

        /* Download-all-as-ZIP bar above grid */
        .bc-attachment-zip-bar {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 4px;
            margin-top: 8px;
        }
        .bc-attachment-zip-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            font-size: 12px;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .bc-attachment-zip-btn:hover {
            color: var(--text);
            border-color: var(--text-disabled);
            background: var(--bg);
        }
        .bc-attachment-zip-btn.downloading {
            opacity: 0.6;
            pointer-events: none;
        }

        /* Single image (not in grid) - larger preview */
        .bc-attachment-grid:has(.bc-attachment-grid-item:only-child) {
            grid-template-columns: minmax(200px, 400px);
        }

        .bc-attachment-grid-item:only-child img {
            height: 240px;
        }
        
        /* Comment editing */
        .bc-comment-edited {
            font-size: 11px;
            color: var(--text-muted);
            font-style: italic;
            margin-left: 8px;
        }
        
        .bc-comment-edit-form {
            margin-top: 8px;
        }
        
        .bc-comment-edit-textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            font-family: inherit;
            resize: vertical;
            min-height: 80px;
        }
        
        .bc-comment-edit-textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
        }
        
        .bc-comment-edit-actions {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        
        /* Deleted comment placeholder */
        .bc-comment-deleted {
            opacity: 0.7;
        }
        
        .bc-comment-deleted-placeholder {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            background: var(--bg-hover);
            border-radius: 6px;
            color: var(--text-muted);
            font-style: italic;
            font-size: 13px;
        }
        
        .bc-comment-deleted-placeholder i {
            color: var(--text-disabled);
        }
        
        /* Boosts */
        .bc-comment-boosts {
            margin-top: 8px;
            display: flex;
            gap: 4px;
        }
        
        .bc-boost {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: var(--badge-yellow-bg);
            border-radius: 50%;
            font-size: 11px;
            color: var(--accent-yellow);
        }
        
        /* Comments separator */
        .bc-comments-separator {
            border: none;
            border-top: 1px solid var(--border);
            margin: 24px 0;
        }
        
        /* Comments locked notice */
        .bc-comments-locked-notice {
            text-align: center;
            padding: 16px;
            color: var(--text-secondary);
            font-size: 14px;
            background: var(--bg-cream);
            border-radius: 6px;
            margin-top: 16px;
        }
        
        .bc-comments-locked-notice i {
            margin-right: 6px;
        }
        
        /* Add comment form - same grid as comments */
        .bc-add-comment-form {
            display: grid;
            grid-template-columns: 54px 1fr;
            gap: 16px;
            padding-top: 24px;
            border-top: 1px solid var(--border);
            margin-top: 24px;
        }
        
        .bc-add-comment-form .bc-comment-avatar-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }
        
        /* AI buttons container under avatar */
        .bc-comment-ai-buttons {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: center;
        }
        
        .bc-comment-ai-btn {
            background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
            transition: all 0.2s ease;
        }
        
        .bc-comment-ai-btn:hover {
            background: linear-gradient(135deg, #15803d 0%, #166534 100%);
            box-shadow: 0 3px 10px rgba(22, 163, 74, 0.35);
            transform: translateY(-1px);
        }
        
        .bc-comment-ai-btn:active {
            transform: translateY(0);
        }
        
        .bc-comment-grammar-btn {
            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
            transition: all 0.2s ease;
        }
        
        .bc-comment-grammar-btn:hover:not(:disabled) {
            background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
            box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35);
            transform: translateY(-1px);
        }
        
        .bc-comment-grammar-btn:active:not(:disabled) {
            transform: translateY(0);
        }
        
        .bc-comment-grammar-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
            box-shadow: none;
        }
        
        /* Notes grammar button - positioned under label, centered */
        .bc-meta-row-notes .bc-meta-label {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .bc-notes-grammar-btn {
            margin-top: 8px;
            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
            transition: all 0.2s ease;
        }
        
        .bc-notes-grammar-btn:hover:not(:disabled) {
            background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
            box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35);
            transform: translateY(-1px);
        }
        
        .bc-notes-grammar-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
            box-shadow: none;
        }
        
        /* Notes AI enhancement button - styled like comment AI button */
        .bc-notes-ai-btn {
            background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
            transition: all 0.2s ease;
            margin-top: 8px;
        }
        
        .bc-notes-ai-btn:hover {
            background: linear-gradient(135deg, #15803d 0%, #166534 100%);
            box-shadow: 0 3px 10px rgba(22, 163, 74, 0.35);
            transform: translateY(-1px);
        }
        
        /* Notes AI buttons row wrapper - desktop: column layout */
        .bc-notes-ai-buttons-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        
        /* Grammar undo buttons */
        .bc-comment-grammar-undo-btn,
        .bc-notes-grammar-undo-btn {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
            border: none;
            width: 28px;
            height: 28px;
            border-radius: 6px;
            font-size: 11px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25);
            transition: all 0.2s ease;
            margin-left: 4px;
        }
        
        .bc-notes-grammar-undo-btn {
            margin-top: 4px;
            margin-left: 0;
        }
        
        .bc-comment-grammar-undo-btn:hover,
        .bc-notes-grammar-undo-btn:hover {
            background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
            box-shadow: 0 3px 8px rgba(245, 158, 11, 0.35);
            transform: translateY(-1px);
        }
        
        /* Grammar fix animation */
        @keyframes grammarFixFlash {
            0% { background-color: #d1fae5; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
            100% { background-color: inherit; box-shadow: none; }
        }
        
        /* Translation buttons - smaller than grammar, simple colored badges */
        .bc-translate-buttons {
            display: flex;
            gap: 3px;
            margin-top: 4px;
        }
        
        .bc-translate-btn {
            border: none;
            width: 22px;
            height: 16px;
            border-radius: 3px;
            font-size: 9px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            padding: 0;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        
        .bc-translate-btn.btn-cz {
            background: #d7141a;
            color: var(--text-on-primary);
        }
        
        .bc-translate-btn.btn-en {
            background: #3b5998;
            color: var(--text-on-primary);
        }
        
        .bc-translate-btn:hover:not(:disabled) {
            transform: scale(1.15);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            filter: brightness(1.1);
        }
        
        .bc-translate-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        
        /* Notes translate buttons - under grammar button */
        .bc-notes-translate-buttons {
            display: flex;
            gap: 3px;
            margin-top: 4px;
        }
        
        .bc-notes-translate-btn {
            border: none;
            width: 22px;
            height: 16px;
            border-radius: 3px;
            font-size: 9px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            padding: 0;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        
        .bc-notes-translate-btn.btn-cz {
            background: #d7141a;
            color: var(--text-on-primary);
        }
        
        .bc-notes-translate-btn.btn-en {
            background: #3b5998;
            color: var(--text-on-primary);
        }
        
        .bc-notes-translate-btn:hover:not(:disabled) {
            transform: scale(1.15);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            filter: brightness(1.1);
        }
        
        .bc-notes-translate-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        
        /* Translation flash animation */
        @keyframes translateFlash {
            0% { background-color: var(--badge-blue-bg); box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
            100% { background-color: inherit; box-shadow: none; }
        }
        
        .grammar-fixed-flash {
            animation: grammarFixFlash 0.8s ease-out;
        }
        
        /* Mobile AI buttons - show above editor */
        @media (max-width: 768px) {
            /* Comment form: change to column layout, AI buttons above editor */
            .bc-add-comment-form {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            
            .bc-add-comment-form .bc-comment-avatar-col {
                display: none; /* Hide avatar column on mobile */
            }
            
            /* Mobile AI buttons bar - shown above editor */
            .bc-mobile-ai-buttons {
                display: flex;
                flex-direction: row;
                gap: 4px;
                padding: 4px;
                background: var(--bg);
                border-radius: 6px;
                align-items: stretch;
                flex-wrap: nowrap;
                width: 100%;
                margin-bottom: 8px;
            }
            
            /* Comment editor wrapper - add spacing and min height */
            .bc-comment-editor-wrapper {
                margin-top: 0;
            }
            
            .bc-comment-editor-wrapper .tox-tinymce,
            .bc-comment-form-body .tox-tinymce,
            .bc-comment-input-row .tox-tinymce,
            #comment-editor + .tox-tinymce,
            .tox-tinymce {
                min-height: 200px !important;
                border-radius: 8px !important;
            }
            
            .bc-comment-form-body {
                min-height: 200px;
            }
            
            /* Comments: all 4 buttons equal width */
            .bc-mobile-ai-buttons .bc-comment-ai-btn,
            .bc-mobile-ai-buttons .bc-comment-grammar-btn {
                flex: 1 1 0;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 0;
                padding: 8px 4px !important;
                border-radius: 6px !important;
            }
            
            .bc-mobile-ai-buttons .bc-comment-grammar-undo-btn {
                display: none;
            }
            
            .bc-mobile-ai-buttons .bc-translate-buttons {
                flex: 2 1 0;
                margin: 0;
                display: flex;
                flex-direction: row;
                gap: 4px;
            }
            
            .bc-mobile-ai-buttons .bc-translate-buttons .bc-translate-btn {
                flex: 1 1 0;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 0;
                padding: 8px 4px !important;
                border-radius: 6px !important;
                background: var(--border) !important;
                width: auto !important;
                height: auto !important;
            }
            
            /* Make all icons/flags same size in comments */
            .bc-mobile-ai-buttons .bc-comment-ai-btn i,
            .bc-mobile-ai-buttons .bc-comment-grammar-btn i {
                font-size: 18px !important;
            }
            
            .bc-mobile-ai-buttons .bc-translate-btn img {
                width: 32px !important;
                height: 24px !important;
            }
            
            /* Notes: 1) label, 2) icons in row, 3) editor full width - NO 2 columns */
            .bc-meta-row-notes {
                display: flex !important;
                flex-direction: column !important;
            }
            
            .bc-meta-row-notes .bc-meta-label {
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                width: 100% !important;
                margin-bottom: 8px;
            }
            
            .bc-meta-row-notes .bc-notes-label-text {
                display: block;
                margin-bottom: 4px;
                font-weight: 600;
            }
            
            /* Notes icons wrapper - all 4 buttons equal width */
            .bc-meta-row-notes .bc-notes-ai-buttons-row {
                display: flex !important;
                flex-direction: row !important;
                align-items: stretch;
                gap: 4px;
                width: 100%;
                padding: 4px;
                background: var(--bg);
                border-radius: 6px;
                margin-bottom: 8px;
            }
            
            .bc-meta-row-notes .bc-notes-ai-buttons-row .bc-notes-ai-btn,
            .bc-meta-row-notes .bc-notes-ai-buttons-row .bc-notes-grammar-btn {
                flex: 1 1 0;
                margin: 0 !important;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 0;
                padding: 8px 4px !important;
                border-radius: 6px !important;
            }
            
            .bc-meta-row-notes .bc-notes-ai-buttons-row .bc-notes-grammar-undo-btn {
                display: none;
            }
            
            .bc-meta-row-notes .bc-notes-ai-buttons-row .bc-notes-translate-buttons {
                flex: 2 1 0;
                margin: 0 !important;
                display: flex;
                flex-direction: row;
                gap: 4px;
            }
            
            .bc-meta-row-notes .bc-notes-ai-buttons-row .bc-notes-translate-buttons .bc-translate-btn,
            .bc-meta-row-notes .bc-notes-ai-buttons-row .bc-notes-translate-buttons .bc-notes-translate-btn {
                flex: 1 1 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-width: 0 !important;
                padding: 8px 4px !important;
                border-radius: 6px !important;
                width: auto !important;
                height: auto !important;
                font-size: 12px !important;
            }
            
            /* Make all icons/flags same size in notes */
            .bc-meta-row-notes .bc-notes-ai-btn i,
            .bc-meta-row-notes .bc-notes-grammar-btn i {
                font-size: 18px !important;
            }
            
            .bc-meta-row-notes .bc-notes-translate-buttons .bc-translate-btn img {
                width: 32px !important;
                height: 24px !important;
            }
            
            .bc-meta-row-notes .bc-notes-translate-buttons .bc-notes-translate-btn {
                width: auto !important;
                height: auto !important;
                font-size: 12px !important;
                padding: 8px 4px !important;
            }
            
            /* Direct override for notes translate buttons */
            .bc-notes-translate-btn {
                width: auto !important;
                height: auto !important;
                flex: 1 1 0 !important;
                font-size: 12px !important;
                padding: 8px 4px !important;
            }
            
            /* Editor takes full width below */
            .bc-meta-row-notes .bc-meta-value,
            .bc-meta-row-notes .bc-meta-value-full {
                width: 100% !important;
                flex: none !important;
            }
        }
        
        /* Desktop: hide mobile AI buttons bar */
        @media (min-width: 769px) {
            .bc-mobile-ai-buttons {
                display: none !important;
            }
        }
        
        .tox-edit-area__iframe {
            transition: background-color 0.3s ease;
        }
        
        .bc-comment-input-row {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .bc-comment-form-body {
            width: 100%;
            position: relative;
        }
        
        .bc-comment-input {
            width: 100%;
            min-height: 100px;
        }
        
        .bc-upload-zone {
            padding: 12px;
            border: 1px dashed var(--border);
            border-radius: 6px;
            text-align: center;
            color: var(--text-muted);
            cursor: pointer;
            margin-top: 8px;
            font-size: 13px;
            transition: all 0.15s;
        }
        
        .bc-upload-zone:hover,
        .bc-upload-zone.dragover {
            border-color: var(--primary);
            background: rgba(29, 120, 116, 0.05);
            color: var(--primary);
        }
        
        .bc-attachments-preview {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }
        
        .bc-attachment-item {
            display: flex;
            flex-direction: column;
            background: var(--bg);
            border-radius: 10px;
            border: 1px solid var(--border);
            overflow: hidden;
            transition: all 0.15s;
            font-size: 13px;
        }

        .bc-attachment-item:hover {
            border-color: var(--text-disabled);
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }

        .bc-attachment-item .bc-attachment-thumb {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 0;
            display: block;
        }

        .bc-attachment-item .bc-attachment-item-info {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
        }

        .bc-attachment-item .bc-attachment-item-info span {
            flex: 1;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .bc-attachment-item .bc-attachment-item-icon {
            padding: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-size: 28px;
        }
        
        .bc-attachment-thumb {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        .bc-attachment-remove {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px;
        }
        
        .bc-attachment-remove:hover {
            color: var(--accent-red);
        }
        
        /* File attachment link style (used in notes content) */
        .bc-file-attachment {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            margin-top: 16px;
            background: var(--bg-hover);
            border: 1px solid var(--border);
            border-radius: 8px;
            text-decoration: none;
            color: var(--text);
            font-size: 14px;
            transition: all 0.15s;
        }
        
        .bc-file-attachment:hover {
            background: var(--border);
            color: var(--text);
            border-color: var(--text-disabled);
        }
        
        .bc-file-attachment i {
            color: var(--text-secondary);
        }
        
        .bc-comment-form-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
        }

        /* Character counter */
        .bc-comment-char-counter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 4px;
            padding: 0 2px;
        }
        .bc-comment-char-counter.bc-char-warning {
            color: var(--accent-yellow);
        }
        .bc-comment-char-counter.bc-char-over {
            color: var(--accent-red);
            font-weight: 600;
        }
        .bc-comment-char-counter .bc-char-hint {
            font-size: 11px;
            color: var(--accent-red);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .bc-comment-char-counter .bc-char-hint i {
            font-size: 10px;
        }

        /* Collapsible long comments */
        .bc-comment-body-content.bc-comment-collapsed {
            max-height: 400px;
            overflow: hidden;
            position: relative;
        }
        .bc-comment-body-content.bc-comment-collapsed::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(to bottom, transparent, var(--surface));
            pointer-events: none;
        }
        .bc-comment-toggle {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: var(--link-color);
            cursor: pointer;
            margin-top: 6px;
            padding: 2px 0;
            background: none;
            border: none;
            font-family: inherit;
        }
        .bc-comment-toggle:hover {
            color: var(--primary);
            text-decoration: underline;
        }
        .bc-comment-toggle i {
            font-size: 10px;
            transition: transform 0.2s;
        }
        .bc-comment-toggle.bc-expanded i {
            transform: rotate(180deg);
        }
        
        /* Notification recipients info below comment form */
        .bc-notification-recipients-info {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 10px;
            padding: 8px 0;
            font-size: 12px;
            color: var(--text-secondary);
            border-top: 1px solid var(--border-light);
        }
        
        .bc-notif-group {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .bc-notif-group i {
            font-size: 10px;
        }
        
        .bc-notif-instant {
            color: var(--accent-green);
        }
        
        .bc-notif-instant i {
            color: var(--accent-green);
        }
        
        .bc-notif-delayed {
            color: var(--text-secondary);
        }
        
        .bc-notif-delayed i {
            color: var(--text-muted);
        }
        
        .bc-notif-label {
            color: var(--text-muted);
            font-style: italic;
        }
        
        .bc-hint {
            font-size: 12px;
            color: var(--text-muted);
        }
        
        .bc-comment-buttons {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        /* Unified comment button style */
        .bc-comment-btn {
            font-size: 13px !important;
            padding: 8px 14px !important;
            white-space: nowrap;
        }
        
        /* Secondary button - lighter, not bold */
        .bc-comment-btn-secondary {
            font-size: 13px !important;
            padding: 8px 14px !important;
            white-space: nowrap;
            font-weight: 400 !important;
            color: var(--text-secondary) !important;
            background: var(--bg-secondary) !important;
            border-color: var(--border) !important;
        }
        
        .bc-comment-btn-secondary:hover:not(:disabled) {
            background: var(--border) !important;
            color: #4b5563 !important;
        }
        
        /* Comment Reassign Dropdown */
        .bc-comment-reassign-wrapper {
            position: relative;
        }
        
        .bc-comment-reassign-btn-group {
            display: flex;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .bc-comment-reassign-main {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            border-right: 1px solid rgba(0,0,0,0.1) !important;
        }
        
        .bc-comment-reassign-toggle {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            padding: 6px 8px !important;
            min-width: auto !important;
        }
        
        .bc-comment-reassign-dropdown {
            position: absolute;
            bottom: 100%;
            right: 0;
            margin-bottom: 8px;
            width: 280px;
            background: var(--surface, #fff);
            border: 1px solid var(--border, #e5e7eb);
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            z-index: 1000;
            max-height: 320px;
            display: flex;
            flex-direction: column;
        }
        
        .bc-comment-reassign-search {
            padding: 8px;
            border-bottom: 1px solid var(--border, #e5e7eb);
        }
        
        .bc-comment-reassign-search input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border, #e5e7eb);
            border-radius: 6px;
            font-size: 13px;
            background: var(--bg, #f9fafb);
        }
        
        .bc-comment-reassign-search input:focus {
            outline: none;
            border-color: var(--primary, #3b82f6);
        }
        
        .bc-comment-reassign-list {
            overflow-y: auto;
            max-height: 240px;
            padding: 4px 0;
        }
        
        .bc-comment-reassign-category {
            padding: 6px 12px 4px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--text-muted, #9ca3af);
            letter-spacing: 0.5px;
        }
        
        .bc-comment-reassign-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            cursor: pointer;
            transition: background 0.15s;
        }
        
        .bc-comment-reassign-item:hover {
            background: var(--bg, #f3f4f6);
        }
        
        .bc-comment-reassign-item-info {
            flex: 1;
            min-width: 0;
        }
        
        .bc-comment-reassign-item-name {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--text, #1f2937);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .bc-comment-reassign-item-hint {
            display: block;
            font-size: 11px;
            color: var(--text-muted, #9ca3af);
        }
        
        .bc-comment-reassign-empty {
            padding: 16px;
            text-align: center;
            color: var(--text-muted, #9ca3af);
            font-size: 13px;
        }
        
        .bc-comment-reassign-clear {
            padding: 8px 12px;
            border-top: 1px solid var(--border, #e5e7eb);
            font-size: 12px;
            color: var(--text-secondary, #6b7280);
            cursor: pointer;
            text-align: center;
        }
        
        .bc-comment-reassign-clear:hover {
            background: var(--bg, #f3f4f6);
            color: var(--accent-red, #ef4444);
        }
        
        /* Avatar md size */
        .bc-avatar-md {
            width: 36px;
            height: 36px;
            font-size: 14px;
        }
        
        img.bc-avatar.bc-avatar-md {
            width: 36px;
            height: 36px;
        }
        
        /* Ghost button */
        .btn-ghost {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 6px 10px;
            border-radius: 4px;
        }
        
        .btn-ghost:hover {
            background: var(--bg-hover);
            color: var(--text);
        }
        
        /* ===== CHANGELOG STYLES ===== */
        .bc-changelog-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
        }
        
        .bc-changelog-empty i {
            font-size: 40px;
            margin-bottom: 16px;
            display: block;
        }
        
        .bc-changelog-timeline {
            position: relative;
        }
        
        .bc-changelog-item {
            display: flex;
            gap: 16px;
            padding: 16px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .bc-changelog-item:last-child {
            border-bottom: none;
        }
        
        .bc-changelog-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 14px;
        }
        
        .bc-changelog-icon.created {
            background: var(--badge-green-bg);
            color: var(--accent-green);
        }
        
        .bc-changelog-icon.updated {
            background: var(--badge-blue-bg);
            color: var(--link-color);
        }
        
        .bc-changelog-icon.completed {
            background: var(--badge-purple-bg);
            color: var(--accent-purple);
        }
        
        .bc-changelog-icon.uncompleted {
            background: var(--badge-yellow-bg);
            color: var(--accent-yellow);
        }
        
        .bc-changelog-icon.comment {
            background: var(--bg-blue-tint);
            color: var(--accent-blue);
        }
        
        .bc-changelog-icon.time {
            background: var(--badge-pink-bg);
            color: var(--badge-pink-text);
        }
        
        .bc-changelog-icon.default {
            background: var(--bg-hover);
            color: var(--text-secondary);
        }
        
        .bc-changelog-content {
            flex: 1;
            min-width: 0;
        }
        
        .bc-changelog-header {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 6px;
            margin-bottom: 4px;
        }
        
        .bc-changelog-actor {
            font-weight: 600;
            color: var(--text);
        }
        
        .bc-changelog-action {
            color: var(--text-secondary);
        }
        
        .bc-changelog-time {
            color: var(--text-muted);
            font-size: 12px;
            margin-left: auto;
        }
        
        .bc-changelog-details {
            background: var(--bg);
            border-radius: 6px;
            padding: 10px 12px;
            margin-top: 8px;
            font-size: 13px;
        }
        
        .bc-changelog-change {
            margin-bottom: 4px;
        }
        
        .bc-changelog-change:last-child {
            margin-bottom: 0;
        }
        
        .bc-changelog-field {
            color: var(--text-secondary);
            margin-right: 4px;
        }
        
        .bc-changelog-old {
            text-decoration: line-through;
            color: var(--accent-red);
            background: var(--bg-red-tint);
            padding: 1px 4px;
            border-radius: 3px;
        }
        
        .bc-changelog-arrow {
            color: var(--text-muted);
            margin: 0 4px;
        }
        
        .bc-changelog-new {
            color: var(--accent-green);
            background: var(--bg-green-tint);
            padding: 1px 4px;
            border-radius: 3px;
        }
        
        .bc-changelog-meta {
            margin-top: 8px;
            font-size: 12px;
            color: var(--text-muted);
        }
        
        .bc-changelog-meta i {
            margin-right: 4px;
        }
        
        .bc-changelog-time-entry {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bc-changelog-time-entry i {
            color: var(--badge-pink-text);
        }
        
        .bc-changelog-time-entry strong {
            color: var(--text);
            font-size: 15px;
        }
        
        /* ===== AI ADVISOR SIDEBAR ===== */
        .bc-todo-layout-container {
            display: flex;
            transition: all 0.3s ease;
            position: relative;
            max-width: 100%;
            margin: 0 auto;
            gap: 0;
            overflow: hidden;
        }
        
        .bc-todo-layout-container.ai-panel-open {
            gap: 16px;
        }
        
        .bc-todo-layout-container .bc-todo-page-wrapper {
            flex: 1;
            min-width: 0;
            transition: all 0.3s ease;
        }
        
        .bc-todo-layout-container.ai-panel-open .bc-todo-page-wrapper {
            flex: 1;
            min-width: 0;
            max-width: calc(100% - 320px);
        }
        
        /* AI Toggle Button - Fixed on right side */
        .bc-ai-toggle-btn {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 120px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            border: none;
            border-radius: 12px 0 0 12px;
            cursor: pointer;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: white;
            box-shadow: -4px 0 20px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
        }
        
        .bc-ai-toggle-btn:hover {
            width: 56px;
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        }
        
        .bc-ai-toggle-btn.panel-open {
            display: none;
        }
        
        .bc-ai-toggle-btn i {
            font-size: 20px;
        }
        
        .bc-ai-toggle-btn span {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        
        /* AI Advisor Panel - Inline version */
        .bc-ai-advisor-panel {
            flex: 0 0 0;
            width: 0;
            overflow: hidden;
            background: var(--bg-cream);
            border-left: none;
            border-radius: 12px;
            box-shadow: none;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            opacity: 0;
            align-self: flex-start;
            position: sticky;
            top: 80px;
            height: auto;
        }
        
        .bc-ai-advisor-panel.open {
            flex: 0 0 340px;
            width: 340px;
            min-width: 300px;
            max-width: 400px;
            opacity: 1;
            border: 1px solid var(--border);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            overflow: visible;
        }
        
        .bc-ai-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            background: var(--surface);
        }
        
        .bc-ai-panel-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-weight: 700;
            color: var(--text);
        }
        
        .bc-ai-panel-title i {
            color: var(--accent-yellow);
            font-size: 18px;
        }
        
        .bc-ai-panel-close {
            background: none;
            border: none;
            font-size: 24px;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 4px 8px;
            line-height: 1;
        }
        
        .bc-ai-panel-close:hover {
            color: var(--text);
        }
        
        .bc-ai-panel-body {
            flex: 1;
            overflow: visible;
            padding: 20px;
        }
        
        /* Profitability Status Card */
        .bc-ai-status-card {
            background: var(--surface);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 20px;
            border: 1px solid var(--border);
        }
        
        .bc-ai-status-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        
        .bc-ai-status-value {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .bc-ai-profit-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
        }
        
        .bc-ai-profit-badge.profit {
            background: var(--badge-green-bg);
            color: var(--accent-green);
        }
        
        .bc-ai-profit-badge.loss {
            background: var(--bg-red-tint);
            color: var(--accent-red);
        }
        
        .bc-ai-profit-badge.neutral {
            background: var(--badge-yellow-bg);
            color: var(--accent-yellow);
        }
        
        .bc-ai-status-link {
            font-size: 13px;
            color: var(--accent-blue);
            text-decoration: none;
        }
        
        .bc-ai-status-link:hover {
            text-decoration: underline;
        }
        
        .bc-ai-status-desc {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 8px;
            line-height: 1.5;
        }
        
        .bc-ai-invoice-link {
            color: var(--accent-blue);
            font-weight: 600;
        }
        
        /* AI Suggestions Section */
        .bc-ai-section {
            margin-bottom: 24px;
        }
        
        .bc-ai-section-title {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-secondary);
            margin-bottom: 12px;
        }
        
        .bc-ai-suggestion-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .bc-ai-suggestion-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-ai-suggestion-item:hover {
            border-color: var(--accent-yellow);
            background: var(--bg-amber-tint);
        }
        
        .bc-ai-suggestion-checkbox {
            width: 18px;
            height: 18px;
            border: 2px solid var(--border-dark);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }
        
        .bc-ai-suggestion-checkbox.checked {
            background: var(--accent-yellow);
            border-color: var(--accent-yellow);
            color: var(--text-on-primary);
        }
        
        .bc-ai-suggestion-content {
            flex: 1;
            min-width: 0;
        }
        
        .bc-ai-suggestion-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text);
            margin-bottom: 2px;
        }
        
        .bc-ai-suggestion-meta {
            font-size: 12px;
            color: var(--text-muted);
        }
        
        .bc-ai-suggestion-add {
            color: var(--text-muted);
            font-size: 18px;
        }
        
        /* Create All Button */
        .bc-ai-create-all-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-ai-create-all-btn:hover {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            transform: translateY(-1px);
        }
        
        .bc-ai-select-all-btn {
            padding: 4px 10px;
            background: var(--border);
            color: var(--text);
            border: none;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            text-transform: none;
            letter-spacing: 0;
        }
        
        .bc-ai-select-all-btn:hover {
            background: var(--border);
        }
        
        /* Daily Tip Card */
        .bc-ai-tip-card {
            background: var(--badge-yellow-bg);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }
        
        .bc-ai-tip-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: var(--badge-yellow-text);
            margin-bottom: 8px;
        }
        
        .bc-ai-tip-header i {
            color: var(--accent-yellow);
        }
        
        .bc-ai-tip-content {
            font-size: 13px;
            color: var(--badge-yellow-text);
            line-height: 1.5;
        }
        
        /* Comment Chaos Alert */
        .bc-chaos-alert {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            background: var(--badge-yellow-bg);
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .bc-chaos-alert i {
            color: var(--accent-yellow);
            font-size: 18px;
        }
        
        .bc-chaos-alert-text {
            flex: 1;
            font-size: 14px;
            color: var(--badge-yellow-text);
        }
        
        .bc-chaos-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        
        .bc-chaos-btn {
            padding: 8px 16px;
            background: var(--accent-green);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }
        
        .bc-chaos-btn:hover {
            background: var(--accent-green);
        }
        
        .bc-chaos-hide-btn {
            padding: 6px 10px;
            background: transparent;
            color: var(--badge-yellow-text);
            border: 1px solid var(--border-yellow-light);
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            white-space: nowrap;
            opacity: 0.7;
        }
        
        .bc-chaos-hide-btn:hover {
            opacity: 1;
            background: var(--badge-yellow-bg);
        }
        
        /* AI Warnings Section */
        .bc-ai-warnings-section {
            margin-bottom: 20px;
        }
        
        .bc-ai-warning-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 8px;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .bc-ai-warning-item i {
            font-size: 16px;
        }
        
        .bc-ai-warning-critical {
            background: var(--bg-red-tint);
            border: 1px solid var(--border-red-light);
            color: var(--accent-red);
        }
        
        .bc-ai-warning-high {
            background: var(--bg-amber-tint);
            border: 1px solid var(--border-yellow-light);
            color: var(--badge-yellow-text);
        }
        
        .bc-ai-warning-medium {
            background: var(--bg-blue-tint);
            border: 1px solid var(--border-blue-light);
            color: var(--badge-blue-text);
        }
        
        .bc-ai-warning-low {
            background: var(--bg-green-tint);
            border: 1px solid var(--border-green-light);
            color: var(--badge-green-text);
        }
        
        .bc-ai-warning-btn {
            margin-left: auto;
            padding: 6px 12px;
            background: var(--surface);
            border: 1px solid currentColor;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }
        
        .bc-ai-warning-btn:hover {
            background: var(--bg-hover);
        }
        
        /* AI Analyze Button Section */
        .bc-ai-analyze-section {
            background: var(--bg-secondary);
            border: 2px dashed var(--border-dark);
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .bc-ai-analyze-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 28px;
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bc-ai-analyze-btn:hover:not(:disabled) {
            background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
        }
        
        .bc-ai-analyze-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .bc-ai-analyze-btn i {
            font-size: 18px;
        }
        
        .bc-ai-analyze-hint {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 12px;
            line-height: 1.5;
        }
        
        /* AI Health Score */
        .bc-ai-health-score {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 20px;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
        }
        
        .bc-ai-health-circle {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
            background: conic-gradient(var(--score-color, var(--border)) calc(var(--score-percent, 0) * 3.6deg), var(--border-light) 0deg);
        }
        
        .bc-ai-health-circle-inner {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--surface);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .bc-ai-health-value {
            font-size: 20px;
            font-weight: 700;
            line-height: 1;
        }
        
        .bc-ai-health-max {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 2px;
        }
        
        .bc-ai-health-info {
            flex: 1;
            min-width: 0;
        }
        
        .bc-ai-health-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }
        
        .bc-ai-health-status {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.3;
        }
        
        .bc-ai-health-detail {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        
        /* Score color classes */
        .bc-ai-score-critical { --score-color: var(--accent-red); color: var(--accent-red); }
        .bc-ai-score-bad { --score-color: var(--accent-orange); color: var(--accent-orange); }
        .bc-ai-score-warning { --score-color: var(--accent-yellow); color: var(--accent-yellow); }
        .bc-ai-score-ok { --score-color: #84cc16; color: #84cc16; }
        .bc-ai-score-good { --score-color: var(--accent-green); color: var(--accent-green); }
        .bc-ai-score-excellent { --score-color: var(--accent-green); color: var(--accent-green); }
        
        /* AI Pain Points */
        .bc-ai-pain-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .bc-ai-pain-list li {
            padding: 10px 14px;
            background: var(--bg-red-tint);
            border-left: 3px solid var(--accent-red);
            margin-bottom: 8px;
            border-radius: 0 6px 6px 0;
            font-size: 14px;
            color: var(--badge-red-text);
        }
        
        /* AI Title Suggestion */
        .bc-ai-title-suggestion {
            background: var(--bg);
            border-radius: 8px;
            padding: 14px;
        }
        
        .bc-ai-title-score {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 10px;
        }
        
        .bc-ai-title-reason {
            display: block;
            font-style: italic;
            margin-top: 4px;
        }
        
        .bc-ai-title-new {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            font-size: 14px;
        }
        
        .bc-ai-title-new span {
            color: var(--text-secondary);
        }
        
        .bc-ai-apply-btn {
            margin-left: auto;
            padding: 6px 14px;
            background: var(--accent-green);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .bc-ai-apply-btn:hover {
            background: var(--accent-green);
        }
        
        /* AI Recommendations */
        .bc-ai-recommendation {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 14px;
            background: var(--bg);
            border-radius: 8px;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .bc-ai-rec-priority {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            flex-shrink: 0;
        }
        
        .bc-ai-rec-critical .bc-ai-rec-priority {
            background: var(--accent-red);
            color: white;
        }
        
        .bc-ai-rec-high .bc-ai-rec-priority {
            background: var(--accent-yellow);
            color: white;
        }
        
        .bc-ai-rec-medium .bc-ai-rec-priority {
            background: var(--accent-blue);
            color: white;
        }
        
        .bc-ai-rec-low .bc-ai-rec-priority {
            background: var(--accent-green);
            color: white;
        }
        
        /* AI Nudge Card */
        .bc-ai-nudge-card {
            background: var(--bg-amber-tint);
            border-radius: 8px;
            padding: 14px;
        }
        
        .bc-ai-nudge-card p {
            font-size: 14px;
            color: var(--badge-yellow-text);
            margin: 0 0 12px 0;
        }
        
        .bc-ai-nudge-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            background: var(--accent-yellow);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .bc-ai-nudge-btn:hover {
            background: var(--accent-yellow);
        }
        
        /* Re-analyze Button */
        .bc-ai-reanalyze-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 12px;
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
            margin-top: 20px;
        }
        
        .bc-ai-reanalyze-btn:hover {
            background: var(--bg);
            color: var(--text);
        }
        
        /* AI Stats Section */
        .bc-ai-stats-section {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }
        
        .bc-ai-stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 12px;
        }
        
        .bc-ai-stat-item {
            background: var(--bg);
            border-radius: 6px;
            padding: 10px;
            text-align: center;
        }
        
        .bc-ai-stat-label {
            display: block;
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        
        .bc-ai-stat-value {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
        }

        /* AI Loading State */
        .bc-ai-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            text-align: center;
        }
        
        .bc-ai-loading i {
            font-size: 32px;
            color: var(--accent-yellow);
            margin-bottom: 16px;
            animation: pulse 1.5s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .bc-ai-loading-text {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        /* Responsive */
        @media (max-width: 1200px) {
            .bc-ai-toggle-btn {
                width: 40px;
                height: 100px;
            }
            
            .bc-ai-toggle-btn span {
                font-size: 10px;
            }
            
            .bc-ai-advisor-panel.open {
                flex: 0 0 280px;
                width: 280px;
                min-width: 260px;
                max-width: 280px;
            }
            
            .bc-todo-layout-container.ai-panel-open .bc-todo-page-wrapper {
                flex: 1;
                min-width: 0;
                max-width: calc(100% - 296px);
            }
        }
        
        /* Tags layout - base styles */
        .bc-tags-layout {
            display: flex;
            gap: 24px;
        }
        
        .bc-tags-sidebar {
            width: 280px;
            flex-shrink: 0;
        }
        
        /* User option in dropdown */
        .bc-user-option:hover {
            background: var(--bg-subtle);
        }
        .bc-user-option.selected {
            background: var(--bg-green-tint);
        }
        .bc-user-selector-trigger:hover {
            border-color: var(--primary);
        }
        
        /* Dashboard stats grid - base styles */
        .bc-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 32px;
        }
        
        /* Dashboard charts grid - base styles */
        .bc-charts-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 24px;
        }

        /* ===== DESKTOP NOTIFICATION SETTINGS GRID ===== */
        .bc-notif-settings-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            align-items: start;
        }
        .bc-notif-settings-grid > * {
            margin: 0 !important;
        }
        .bc-notif-full-width {
            grid-column: 1 / -1;
        }
        /* Sound notification card - proper inner card styling */
        .bc-notif-sound-card .bc-sound-expand {
            margin-top: 10px;
            padding: 10px;
            background: var(--surface-hover);
            border-radius: 8px;
        }
        /* Preferences card items */
        .bc-notif-pref-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px;
            background: var(--surface-hover);
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .bc-notif-pref-item:hover {
            background: var(--bg-secondary);
        }
        .bc-notif-pref-item input[type="checkbox"] {
            margin-top: 2px;
            flex-shrink: 0;
        }
        .bc-notif-pref-item .bc-pref-text {
            flex: 1;
        }
        .bc-notif-pref-item .bc-pref-text span {
            font-weight: 500;
            display: block;
        }
        .bc-notif-pref-item .bc-pref-text small {
            font-size: 11px;
            color: var(--text-muted);
        }
        .bc-notif-pref-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        @media (max-width: 900px) {
            /* Hide AI toggle button on mobile/tablet - MOBILE FIX */
            .bc-ai-toggle-btn {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
            }
            
            /* Pill navigation - max 2 items per row on mobile - MOBILE FIX */
            .bc-pill-nav {
                display: flex !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                gap: 6px !important;
                padding: 6px !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            
            .bc-pill-nav-item {
                flex: 0 0 calc(50% - 6px) !important;
                min-width: calc(50% - 6px) !important;
                max-width: calc(50% - 6px) !important;
                text-align: center !important;
                padding: 10px 8px !important;
                font-size: 13px !important;
                box-sizing: border-box !important;
            }
            
            .bc-todo-layout-container {
                flex-direction: column;
            }
            
            .bc-todo-layout-container.ai-panel-open .bc-todo-page-wrapper {
                flex: 1;
                max-width: 100%;
            }
            
            .bc-ai-advisor-panel.open {
                flex: 1;
                width: 100%;
                max-width: 100%;
                min-width: 100%;
                order: -1;
                margin-bottom: 20px;
                max-height: 400px;
            }
            
            /* Tags layout - stack vertically on mobile - MOBILE FIX */
            .bc-tags-layout {
                flex-direction: column !important;
                gap: 16px !important;
            }
            
            .bc-tags-sidebar {
                width: 100% !important;
                max-width: 100% !important;
            }
            
            /* Stats grid - 2x2 on mobile - MOBILE FIX */
            .bc-stats-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 12px !important;
            }

            .bc-charts-grid {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
            }

            .bc-charts-grid .bc-card {
                height: 280px !important;
            }

            .bc-charts-grid #chart-time-by-day,
            .bc-charts-grid #chart-top-projects {
                height: 250px !important;
            }
            
            /* ===== MOBILE ADMIN HEADER FIX ===== */
            .bc-admin-header {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 16px !important;
            }
            
            .bc-admin-header h1,
            .bc-admin-header .bc-admin-title {
                text-align: center !important;
                font-size: 20px !important;
                margin-bottom: 0 !important;
            }
            
            .bc-admin-header > div {
                display: flex !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                gap: 8px !important;
            }
            
            .bc-admin-header .btn {
                flex: 1 1 calc(50% - 4px) !important;
                min-width: 120px !important;
                justify-content: center !important;
                font-size: 12px !important;
                padding: 8px 12px !important;
            }
            
            .bc-admin-header .btn-sm {
                flex: 0 1 auto !important;
                min-width: auto !important;
            }
            
            /* ===== MOBILE PROFILE PAGE SPACING ===== */
            .bc-card + .bc-card,
            [style*="margin-bottom: 14px"] + [style*="margin-bottom: 14px"],
            .bc-settings-section + .bc-settings-section {
                margin-top: 16px !important;
            }
            
            /* ===== MOBILE REPORTING DASHBOARD - Who is Online spacing ===== */
            .bc-active-user-card {
                margin-bottom: 8px !important;
            }
            
            /* Add margin between "Who is Online" section and stats grid */
            [style*="linear-gradient(135deg, #ecfdf5"] {
                margin-bottom: 20px !important;
            }
            
            .bc-stats-grid {
                margin-top: 20px !important;
            }
            
            /* ===== MOBILE MY TASKS PRIORITY BADGE - INLINE WITH TITLE ===== */
            /* ===== MOBILE TODO ITEM - 2 ROW LAYOUT ===== */
            /* Row 1: Todo title only */
            /* Row 2: Checkbox, Priority, Project, Assignee, Date */
            
            .bc-todo-list .bc-todo-item {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 8px !important;
                padding: 12px !important;
                border-bottom: 1px solid var(--border) !important;
                align-items: center !important;
            }
            
            /* Row 1: Title spans full width - MUST come first */
            .bc-todo-list .bc-todo-item > div[style*="flex-direction: column"] {
                order: 1 !important;
                flex-basis: 100% !important;
                width: 100% !important;
                margin-bottom: 4px !important;
            }
            
            .bc-todo-list .bc-todo-item .bc-todo-title {
                font-size: 15px !important;
                font-weight: 500 !important;
                white-space: normal !important;
                word-break: break-word !important;
                line-height: 1.4 !important;
            }
            
            /* Row 2: Checkbox - make sure it's visible! */
            .bc-todo-list .bc-todo-item .bc-todo-checkbox {
                order: 2 !important;
                display: flex !important;
                width: 24px !important;
                height: 24px !important;
                min-width: 24px !important;
                flex-shrink: 0 !important;
                border: 2px solid var(--border) !important;
                border-radius: 4px !important;
                align-items: center !important;
                justify-content: center !important;
            }
            
            .bc-todo-list .bc-todo-item .bc-todo-checkbox.checked {
                background: var(--primary) !important;
                border-color: var(--primary) !important;
            }
            
            /* Row 2: Priority badge */
            .bc-todo-list .bc-todo-priority-cell {
                order: 3 !important;
                flex-shrink: 0 !important;
            }
            
            .bc-todo-list .bc-todo-priority-cell .bc-priority-badge {
                width: 24px !important;
                height: 24px !important;
                min-width: 24px !important;
                font-size: 12px !important;
                font-weight: 700 !important;
                line-height: 24px !important;
            }
            
            /* Row 2: Comments count */
            .bc-todo-list .bc-todo-item .bc-todo-meta-item {
                order: 4 !important;
                font-size: 12px !important;
            }
            
            /* Row 2: Due date */
            .bc-todo-list .bc-todo-item .bc-todo-date-wrapper {
                order: 5 !important;
            }
            
            .bc-todo-list .bc-todo-item .bc-todo-date-text {
                font-size: 12px !important;
            }
            
            /* Row 2: Assignees - push to end */
            .bc-todo-list .bc-todo-item .bc-todo-assignees {
                order: 6 !important;
                margin-left: auto !important;
            }
            
            .bc-todo-list .bc-todo-item .bc-todo-assignees .bc-avatar {
                width: 24px !important;
                height: 24px !important;
                font-size: 10px !important;
            }
            
            /* Hide empty placeholder divs - but NOT checkbox! */
            .bc-todo-list .bc-todo-item > div:empty:not(.bc-todo-checkbox),
            .bc-todo-list .bc-todo-item > span:empty {
                display: none !important;
            }

            /* ===== MOBILE TRASH PAGE SPACING ===== */
            /* Add margin between info card and filter tabs */
            [style*="linear-gradient(135deg, #fef3c7"] {
                margin-bottom: 20px !important;
            }
            
            /* Filter tabs wrap nicely */
            [style*="display: flex"][style*="gap: 8px"][style*="margin-bottom: 16px"][style*="flex-wrap: wrap"] {
                gap: 6px !important;
            }
            
            /* Select all header row on trash page */
            [style*="background: var(--bg-secondary)"][style*="border-bottom: 1px solid var(--border)"] {
                flex-wrap: wrap !important;
                gap: 8px !important;
            }
            
            /* ===== MOBILE GLOBAL SETTINGS PAGE ===== */
            .bc-global-settings-form {
                padding: 0 !important;
                gap: 16px !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }
            
            .bc-global-settings-form .bc-settings-section,
            .bc-global-settings-form > div[style*="background: var(--surface)"] {
                padding: 16px !important;
                border-radius: 8px !important;
                margin: 0 !important;
                max-width: 100% !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
            }
            
            /* Section headers */
            .bc-global-settings-form h3 {
                font-size: 15px !important;
                margin-bottom: 12px !important;
            }
            
            /* Form grid - single column on mobile - FORCE override for inline styles */
            .bc-global-settings-form [style*="grid-template-columns"],
            .bc-global-settings-form .bc-settings-grid,
            .bc-global-settings-form div[style*="minmax(300px"],
            .bc-global-settings-form div[style*="minmax(250px"] {
                display: block !important;
            }
            
            .bc-global-settings-form .form-group {
                margin-bottom: 16px !important;
                max-width: 100% !important;
            }
            
            /* Form labels */
            .bc-global-settings-form .form-label {
                font-size: 13px !important;
                margin-bottom: 4px !important;
                word-break: break-word !important;
            }
            
            /* Form inputs - CRITICAL: prevent overflow */
            .bc-global-settings-form .form-input,
            .bc-global-settings-form input[type="text"],
            .bc-global-settings-form input[type="number"],
            .bc-global-settings-form input[type="password"],
            .bc-global-settings-form select,
            .bc-global-settings-form textarea {
                font-size: 16px !important; /* Prevents iOS zoom */
                padding: 10px 12px !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }
            
            /* Toggle rows */
            .bc-global-settings-form [style*="display: flex"][style*="align-items: center"][style*="justify-content: space-between"] {
                flex-wrap: wrap !important;
                gap: 8px !important;
            }
            
            /* Zobrazit secrets button */
            .bc-global-settings-form button[style*="background: var(--surface-hover)"] {
                width: 100% !important;
                justify-content: center !important;
            }
            
            /* Logo upload section - stack vertically */
            .bc-global-settings-form [style*="display: flex"][style*="gap: 16px"] {
                flex-direction: column !important;
                align-items: stretch !important;
            }
            
            /* Color picker row - keep horizontal */
            .bc-global-settings-form [style*="display: flex"][style*="gap: 8px"]:has(input[type="color"]) {
                flex-direction: row !important;
                flex-wrap: nowrap !important;
            }
            
            /* Test buttons - full width */
            .bc-global-settings-form .btn {
                width: 100% !important;
                justify-content: center !important;
            }
            
            /* Small text hints */
            .bc-global-settings-form small,
            .bc-global-settings-form [style*="font-size: 12px"],
            .bc-global-settings-form [style*="font-size: 13px"] {
                font-size: 12px !important;
                line-height: 1.4 !important;
                word-break: break-word !important;
            }
            
            /* Admin main container - prevent overflow */
            .bc-admin-main {
                padding: 12px !important;
                max-width: 100vw !important;
                overflow-x: hidden !important;
                box-sizing: border-box !important;
            }
            
            /* Prevent ANY child from causing overflow */
            .bc-admin-content {
                max-width: 100% !important;
                overflow-x: hidden !important;
            }
            
            /* Push test card - mobile friendly */
            .bc-global-settings-form .bc-push-test-card {
                padding: 16px !important;
            }
            
            /* ===== MOBILE PROFILE NOTIFICATIONS PAGE ===== */
            .bc-notif-settings-grid {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 12px !important;
            }
            .bc-notif-settings-grid > * {
                margin: 0 !important;
            }
            /* Main container */
            .bc-notification-settings-page {
                padding: 0 !important;
            }
            
            /* Cards */
            .bc-notification-settings-page .bc-card {
                margin: 0 0 12px 0 !important;
                padding: 14px !important;
                border-radius: 12px !important;
            }
            
            /* Card headers — keep horizontal (icon+text left, toggle right) */
            .bc-notification-settings-page .bc-card > div[style*="display: flex"][style*="justify-content: space-between"] {
                flex-wrap: nowrap !important;
                gap: 10px !important;
            }
            
            /* Push devices header - stack on very small screens */
            .bc-push-devices-header {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                gap: 10px;
                margin-bottom: 12px;
            }
            
            .bc-push-devices-actions {
                display: flex;
                gap: 8px;
            }
            
            /* Device items */
            .bc-notification-settings-page [style*="padding: 8px 12px"][style*="background: var(--bg-secondary)"] {
                padding: 10px !important;
                flex-wrap: wrap !important;
            }
            
            /* Sound theme grid */
            .bc-notification-settings-page [style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 8px"] {
                gap: 6px !important;
            }
            
            .bc-notification-settings-page [style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 8px"] > button {
                padding: 8px 10px !important;
                font-size: 12px !important;
            }
            
            /* Checkbox/toggle rows */
            .bc-notification-settings-page .bc-card > div[style*="padding: 10px 0"] {
                padding: 8px 0 !important;
            }
            
            /* Section titles */
            .bc-notification-settings-page h3 {
                font-size: 14px !important;
            }
            
            /* Volume slider container */
            .bc-notification-settings-page [style*="display: flex"][style*="gap: 6px"]:has(input[type="range"]) {
                width: 100% !important;
            }
            
            .bc-notification-settings-page input[type="range"] {
                flex: 1 !important;
            }
            
            /* Save button - full width */
            .bc-notification-settings-page div[style*="justify-content: flex-end"] {
                justify-content: stretch !important;
            }
            
            .bc-notification-settings-page div[style*="justify-content: flex-end"] .btn {
                width: 100% !important;
                justify-content: center !important;
            }
            
            /* Save + Push enable/disable buttons - full width */
            .bc-notification-settings-page .bc-save-button-card .btn,
            .bc-notification-settings-page .bc-push-action-btn .btn {
                width: 100% !important;
                justify-content: center !important;
                padding: 12px 16px !important;
            }
            
            .bc-notification-settings-page .btn-sm {
                padding: 10px 14px !important;
            }
            
            /* ===== TOGGLE SWITCHES - stay inline on mobile ===== */
            .bc-notification-settings-page .bc-toggle {
                flex-shrink: 0 !important;
            }
            
            /* ===== EVENT TYPE ROWS - STACK VERTICALLY ===== */
            .bc-notif-event-row {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 10px !important;
                padding: 12px !important;
            }
            
            .bc-notif-event-info {
                width: 100% !important;
            }
            
            /* Event type dropdown - full width */
            .bc-notif-event-row select,
            .bc-notif-event-row .form-input {
                width: 100% !important;
                padding: 12px 14px !important;
                font-size: 15px !important;
            }
            
            /* Weekly summary row */
            .bc-notification-settings-page [style*="display: flex"][style*="gap: 20px"]:has(select):has(input[type="time"]) {
                flex-direction: column !important;
                gap: 12px !important;
            }
            
            .bc-notification-settings-page [style*="display: flex"][style*="gap: 20px"]:has(select):has(input[type="time"]) > div {
                width: 100% !important;
            }
            
            .bc-notification-settings-page [style*="display: flex"][style*="gap: 20px"]:has(select):has(input[type="time"]) select,
            .bc-notification-settings-page [style*="display: flex"][style*="gap: 20px"]:has(select):has(input[type="time"]) input[type="time"] {
                width: 100% !important;
                padding: 12px 14px !important;
                font-size: 15px !important;
            }
            
            /* ===== DELIVERY WINDOW - TIME INPUTS FULL WIDTH ===== */
            .bc-notification-settings-page .bc-card [style*="display: flex"][style*="gap: 12px"][style*="align-items: center"] {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 8px !important;
            }
            
            .bc-notification-settings-page .bc-card [style*="display: flex"][style*="gap: 8px"]:has(input[type="time"]) {
                width: 100% !important;
                justify-content: space-between !important;
            }
            
            .bc-notification-settings-page .bc-card input[type="time"] {
                flex: 1 !important;
                width: auto !important;
                min-width: 0 !important;
                padding: 12px 14px !important;
                font-size: 15px !important;
            }
            
            /* Day badges - centered */
            .bc-notification-settings-page .bc-card [style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"]:has(.bc-day-badge) {
                justify-content: center !important;
            }
            
            /* ===== SAVE BUTTON WRAPPER - SAME AS AKTIVOVAT ===== */
            .bc-notification-settings-page > div[style*="margin-top: 20px"][style*="display: flex"] {
                margin: 16px 0 !important;
                padding: 0 !important;
            }
            
            .bc-notification-settings-page > div[style*="margin-top: 20px"][style*="display: flex"] .btn {
                width: 100% !important;
                padding: 12px 16px !important;
                font-size: 14px !important;
                border-radius: 8px !important;
            }
            
            /* ===== EMAIL HISTORY LINK - PROPER SPACING ===== */
            .bc-notification-settings-page .bc-card-link {
                margin-top: 16px !important;
                margin-bottom: 20px !important;
            }
        }

        /* ===== TODO DEBUG PANEL - FOOTER SLIDEUP (DOCS.HTML STYLE) ===== */
        .bc-todo-debug-panel-overlay {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            background: #1e293b;
            border-top: 3px solid var(--accent-yellow);
            max-height: 60vh;
            overflow: hidden;
            box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
        }

        .bc-todo-debug-panel {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .bc-todo-debug-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 24px;
            background: #0f172a;
            border-bottom: 1px solid #334155;
        }

        .bc-todo-debug-title {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 600;
            font-size: 14px;
            color: var(--accent-yellow);
        }

        .bc-todo-debug-title i {
            font-size: 16px;
        }

        .bc-todo-debug-close {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: #334155;
            border: none;
            border-radius: 4px;
            color: var(--text-muted);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .bc-todo-debug-close:hover {
            background: #475569;
            color: white;
        }

        .bc-todo-debug-content {
            padding: 20px 24px;
            overflow-y: auto;
            overflow-x: hidden;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            max-height: calc(60vh - 60px);
            padding-right: 12px;
        }

        .bc-debug-section {
            background: #0f172a;
            border-radius: 8px;
            padding: 16px;
            border: 1px solid #334155;
        }

        .bc-debug-section-wide {
            grid-column: 1 / -1;
        }

        .bc-debug-section-title {
            margin: 0 0 12px 0;
            font-size: 13px;
            font-weight: 600;
            color: var(--accent-yellow);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .bc-debug-section-title i {
            font-size: 14px;
            opacity: 0.8;
        }

        .bc-debug-info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }

        .bc-debug-info-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .bc-debug-label {
            font-size: 10px;
            text-transform: uppercase;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .bc-debug-value {
            font-size: 13px;
            color: var(--text-disabled);
            font-family: 'Monaco', 'Menlo', monospace;
        }

        .bc-debug-groups-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .bc-debug-group-badge {
            padding: 4px 10px;
            background: #334155;
            border-radius: 4px;
            font-size: 12px;
            color: var(--text-disabled);
        }

        .bc-debug-group-badge small {
            color: var(--text-secondary);
            font-size: 10px;
        }

        .bc-group-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
            vertical-align: middle;
        }

        .bc-debug-empty {
            color: var(--text-muted);
            font-style: italic;
            padding: 12px;
            text-align: center;
            font-size: 12px;
        }

        /* Todos Table */
        .bc-debug-todos-table {
            overflow-x: auto;
        }

        .bc-debug-todos-table table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }

        .bc-debug-todos-table thead {
            background: #1e293b;
        }

        .bc-debug-todos-table th {
            padding: 10px;
            text-align: left;
            font-weight: 600;
            color: var(--accent-yellow);
            border-bottom: 1px solid #334155;
        }

        .bc-debug-todos-table td {
            padding: 10px;
            border-bottom: 1px solid #334155;
            color: var(--text-disabled);
        }

        .bc-debug-todos-table tr.row-visible td {
            background: rgba(5, 150, 105, 0.1);
        }

        .bc-debug-todos-table tr.row-hidden td {
            background: rgba(220, 38, 38, 0.1);
        }

        .bc-debug-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
        }

        .bc-debug-badge.visible {
            background: rgba(5, 150, 105, 0.2);
            color: #34d399;
        }

        .bc-debug-badge.hidden {
            background: rgba(220, 38, 38, 0.2);
            color: #f87171;
        }

        .bc-debug-reason {
            font-size: 11px;
            color: var(--text-muted);
            max-width: 300px;
        }

        /* Scrollbar styling - enhanced visibility */
        .bc-todo-debug-content::-webkit-scrollbar {
            width: 10px;
        }

        .bc-todo-debug-content::-webkit-scrollbar-track {
            background: #1e293b;
            border-radius: 10px;
        }

        .bc-todo-debug-content::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 10px;
            border: 2px solid #1e293b;
        }

        .bc-todo-debug-content::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }

        /* Firefox scrollbar */
        .bc-todo-debug-content {
            scrollbar-color: #475569 #1e293b;
            scrollbar-width: thin;
        }
        
        /* ===== DRAG-DROP ZONE HIGHLIGHTING ===== */
        /* TinyMCE drop zone indicator */
        .tox-tinymce.bc-drop-target {
            outline: 4px dashed var(--accent-green) !important;
            outline-offset: -4px;
            background: rgba(16, 185, 129, 0.08) !important;
            box-shadow: 0 0 30px rgba(16, 185, 129, 0.4) !important;
            position: relative;
        }
        
        .tox-tinymce.bc-drop-target::after {
            content: 'Pusťte soubor zde';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--accent-green);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            z-index: 10000;
            pointer-events: none;
            white-space: nowrap;
        }
        
        /* Upload zone highlight during global drag */
        .bc-upload-zone.bc-drop-highlight {
            border-color: var(--accent-green) !important;
            background: rgba(16, 185, 129, 0.15) !important;
            color: #059669 !important;
            transform: scale(1.02);
            box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
        }
        
        .bc-notes-upload-zone.bc-drop-highlight {
            border-color: var(--accent-green) !important;
            background: rgba(16, 185, 129, 0.15) !important;
            color: #059669 !important;
            transform: scale(1.02);
            box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
        }

        /* ===== Image Lightbox Overlay ===== */
        .bc-lightbox-overlay {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(0, 0, 0, 0.88);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 24px;
            cursor: zoom-out;
            animation: bc-lightbox-fade-in 0.2s ease;
        }

        @keyframes bc-lightbox-fade-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .bc-lightbox-close {
            position: absolute;
            top: 16px;
            right: 20px;
            background: none;
            border: none;
            color: #fff;
            font-size: 36px;
            line-height: 1;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.15s ease;
            z-index: 100000;
            padding: 4px 10px;
        }

        .bc-lightbox-close:hover {
            opacity: 1;
        }

        .bc-lightbox-image {
            max-width: 92vw;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 6px;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
            cursor: default;
            animation: bc-lightbox-scale-in 0.2s ease;
        }

        @keyframes bc-lightbox-scale-in {
            from { transform: scale(0.92); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .bc-lightbox-caption {
            color: rgba(255, 255, 255, 0.8);
            font-size: 13px;
            margin-top: 12px;
            text-align: center;
            max-width: 600px;
        }

        /* Lightbox download button */
        .bc-lightbox-download {
            position: absolute;
            top: 16px;
            right: 64px;
            background: none;
            border: none;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.15s ease;
            z-index: 100000;
            padding: 8px 10px;
        }
        .bc-lightbox-download:hover {
            opacity: 1;
        }

        /* Lightbox gallery navigation */
        .bc-lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.4);
            border: none;
            color: #fff;
            font-size: 28px;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.15s, background 0.15s;
            z-index: 100000;
            padding: 12px 16px;
            border-radius: 8px;
        }
        .bc-lightbox-nav:hover {
            opacity: 1;
            background: rgba(0,0,0,0.6);
        }
        .bc-lightbox-nav.prev {
            left: 16px;
        }
        .bc-lightbox-nav.next {
            right: 16px;
        }
        .bc-lightbox-counter {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255,255,255,0.6);
            font-size: 13px;
            z-index: 100000;
        }

        /* Prevent avatar images from acting as lightbox triggers */
        .bc-comment-body-content img.avatar,
        .bc-rendered-content img.avatar {
            cursor: default !important;
        }
        .bc-comment-body-content img.avatar:hover,
        .bc-rendered-content img.avatar:hover {
            opacity: 1 !important;
        }

        /* ===== PROJECT DASHBOARD TAB PILLS ===== */
        .bc-tab-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
        .bc-tab-pill:hover {
            color: var(--text);
            background: var(--bg);
        }
        .bc-tab-pill--active {
            background: var(--bg) !important;
            color: var(--text) !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }
        .bc-tab-pill i {
            font-size: 12px;
        }
        .bc-tab-pill-badge {
            background: var(--accent-blue);
            color: white;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 10px;
            font-weight: 600;
            min-width: 18px;
            text-align: center;
        }

        /* ===== FILE FILTER CHIPS ===== */
        .bc-filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 500;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .bc-filter-chip:hover {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
        }
        .bc-filter-chip--active {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
            color: white;
        }
        .bc-filter-chip i {
            font-size: 10px;
        }

        /* ===== FILES FEED ===== */
        .bc-files-feed {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .bc-files-date-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .bc-files-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 12px;
        }
        .bc-file-card {
            display: flex;
            align-items: stretch;
            gap: 12px;
            padding: 12px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            transition: all 0.15s;
            position: relative;
            overflow: hidden;
        }
        .bc-file-card:hover {
            border-color: var(--accent-blue);
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            transform: translateY(-1px);
        }
        .bc-file-card-thumb {
            width: 64px;
            height: 64px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
            background: var(--bg-hover);
        }
        .bc-file-card-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .bc-file-card-icon {
            width: 64px;
            height: 64px;
            border-radius: 8px;
            flex-shrink: 0;
            background: var(--bg-hover);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
        }
        .bc-file-card-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
        }
        .bc-file-card-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .bc-file-card-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: var(--text-secondary);
        }
        .bc-file-card-context {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            color: var(--text-muted);
        }
        .bc-file-card-context i {
            font-size: 10px;
        }
        .bc-file-card-context a {
            color: var(--accent-blue);
            text-decoration: none;
        }
        .bc-file-card-context a:hover {
            text-decoration: underline;
        }
        .bc-file-card-source {
            position: absolute;
            top: 8px;
            right: 8px;
        }
        .bc-source-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            font-size: 10px;
        }
        .bc-source-docs {
            background: var(--accent-blue-bg, rgba(59,130,246,0.1));
            color: var(--accent-blue);
        }
        .bc-source-comment {
            background: var(--accent-green-bg, rgba(34,197,94,0.1));
            color: var(--accent-green);
        }
        .bc-source-todo {
            background: var(--accent-purple-bg, rgba(139,92,246,0.1));
            color: var(--accent-purple);
        }
        .bc-source-inline {
            background: var(--accent-amber-bg, rgba(245,158,11,0.1));
            color: var(--accent-amber, #f59e0b);
        }

        /* ===== Comment Templates Popover ===== */
        .bc-template-trigger {
            position: relative;
            margin-top: 6px;
        }

        .bc-template-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #fff;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 2px 6px rgba(245,158,11,0.25);
            transition: all 0.2s ease;
        }
        .bc-template-btn:hover {
            background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
            box-shadow: 0 3px 10px rgba(245,158,11,0.35);
            transform: translateY(-1px);
        }

        .bc-template-popover {
            position: absolute;
            left: 36px;
            top: -8px;
            width: 300px;
            max-height: 400px;
            background: var(--surface, var(--card-bg, #fff));
            border: 1px solid var(--border, var(--border-light, rgba(0,0,0,0.08)));
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.04);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            backdrop-filter: blur(12px);
        }

        .bc-template-popover-header {
            padding: 12px 14px 10px;
            background: var(--bg-secondary, var(--bg-hover, rgba(0,0,0,0.02)));
        }

        .bc-template-popover-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted, #6b7685);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .bc-template-popover-title i {
            color: var(--accent-amber, #f59e0b);
            font-size: 10px;
        }

        .bc-template-search {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--input-border, var(--border, rgba(0,0,0,0.1)));
            border-radius: 8px;
            font-size: 13px;
            background: var(--input-bg, #f9fafb);
            color: var(--text, var(--text-primary, #1a1a1a));
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .bc-template-search:focus {
            border-color: var(--primary, var(--accent-primary, #4f46e5));
            box-shadow: 0 0 0 3px rgba(78,140,239,0.12);
        }
        .bc-template-search::placeholder {
            color: var(--input-placeholder, var(--text-muted, #9ca3af));
        }

        .bc-template-popover-body {
            flex: 1;
            overflow-y: auto;
            max-height: 240px;
            padding: 4px 0;
        }
        .bc-template-popover-body::-webkit-scrollbar { width: 4px; }
        .bc-template-popover-body::-webkit-scrollbar-thumb { background: var(--border, #d1d5db); border-radius: 4px; }

        .bc-template-loading {
            padding: 28px 16px;
            text-align: center;
            color: var(--text-muted, #6b7685);
            font-size: 14px;
        }
        .bc-template-empty {
            padding: 28px 16px 20px;
            text-align: center;
            color: var(--text-muted, #6b7685);
            font-size: 13px;
            line-height: 1.5;
        }

        .bc-template-list {
            display: flex;
            flex-direction: column;
        }

        .bc-template-item {
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            transition: background 0.12s;
        }
        .bc-template-item + .bc-template-item {
            border-top: 1px solid var(--border-light, rgba(255,255,255,0.04));
        }
        .bc-template-item:hover {
            background: var(--bg-hover, rgba(78,140,239,0.06));
        }

        .bc-template-item-icon {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            border-radius: 7px;
            background: var(--primary-light, rgba(78,140,239,0.12));
            color: var(--primary, var(--accent-primary, #4e8cef));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            margin-top: 1px;
        }

        .bc-template-item-content {
            flex: 1;
            min-width: 0;
        }

        .bc-template-item-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text, var(--text-primary, #1a1a1a));
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            gap: 6px;
            line-height: 1.3;
        }

        .bc-template-shared-badge {
            color: var(--text-muted, #6b7685);
            font-size: 9px;
            opacity: 0.5;
        }

        .bc-template-item-preview {
            font-size: 12px;
            color: var(--text-secondary, var(--text-muted, #6b7685));
            max-height: 32px;
            overflow: hidden;
            line-height: 1.3;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -webkit-box;
        }
        .bc-template-item-preview * {
            font-size: 12px !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .bc-template-item-delete {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--text-muted, #6b7685);
            cursor: pointer;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.15s;
        }
        .bc-template-item:hover .bc-template-item-delete {
            opacity: 0.7;
        }
        .bc-template-item-delete:hover {
            opacity: 1 !important;
            background: rgba(239,68,68,0.1);
            color: #ef4444;
        }

        .bc-template-popover-footer {
            padding: 10px 14px;
            border-top: 1px solid var(--border-light, var(--border, rgba(0,0,0,0.06)));
            background: var(--bg-secondary, var(--bg-hover, rgba(0,0,0,0.02)));
        }

        .bc-template-save-trigger {
            width: 100%;
            padding: 7px 10px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--text-secondary, var(--text-muted, #6b7685));
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .bc-template-save-trigger:hover {
            color: var(--primary, var(--accent-primary, #4e8cef));
            background: var(--primary-light, rgba(78,140,239,0.08));
        }
        .bc-template-save-trigger i {
            font-size: 13px;
        }

        .bc-template-save-form {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .bc-template-name-input {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--input-border, var(--border, rgba(0,0,0,0.1)));
            border-radius: 8px;
            font-size: 13px;
            background: var(--input-bg, #f9fafb);
            color: var(--text, var(--text-primary, #1a1a1a));
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .bc-template-name-input:focus {
            border-color: var(--primary, var(--accent-primary, #4f46e5));
            box-shadow: 0 0 0 3px rgba(78,140,239,0.12);
        }

        .bc-template-save-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .bc-template-shared-check {
            font-size: 12px;
            color: var(--text-muted, #6b7685);
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            user-select: none;
        }
        .bc-template-shared-check input {
            margin: 0;
            accent-color: var(--primary, #4e8cef);
        }

        .bc-template-save-actions {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .bc-template-cancel-btn {
            padding: 5px 10px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--text-muted, #6b7685);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.12s;
        }
        .bc-template-cancel-btn:hover {
            background: var(--bg-hover, rgba(0,0,0,0.05));
            color: var(--text, var(--text-primary, #1a1a1a));
        }

        .bc-template-confirm-btn {
            padding: 5px 12px;
            border: none;
            border-radius: 6px;
            background: var(--primary, var(--accent-primary, #4e8cef));
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .bc-template-confirm-btn:hover {
            filter: brightness(1.1);
            box-shadow: 0 2px 8px rgba(78,140,239,0.3);
        }
        .bc-template-confirm-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            box-shadow: none;
        }

        /* Mobile: position popover below button instead of to the side */
        @media (max-width: 768px) {
            .bc-template-popover {
                left: auto;
                right: 0;
                top: 36px;
                width: 280px;
            }
        }

        /* ===== Comment Extras (Poll/Approval/Checklist) ===== */
        .bc-extras-trigger {
            position: relative;
            margin-top: 6px;
        }

        .bc-extras-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
            color: #fff;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 2px 6px rgba(34,197,94,0.25);
            transition: all 0.2s ease;
        }
        .bc-extras-btn:hover {
            background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
            box-shadow: 0 3px 10px rgba(34,197,94,0.35);
            transform: translateY(-1px);
        }

        .bc-extras-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 9px 14px;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text, #1a1a1a);
            font-size: 13.5px;
            text-align: left;
            transition: background 0.12s;
        }
        .bc-extras-item:hover {
            background: var(--bg-hover, rgba(78,140,239,0.06));
        }

        /* ===== Comment Widgets (Poll/Approval/Checklist) ===== */
        
        /* Poll Widget */
        .bc-comment-poll {
            margin-top: 12px;
            padding: 14px;
            background: var(--bg-secondary, rgba(0,0,0,0.03));
            border-radius: 10px;
            border: 1px solid var(--border-light, rgba(0,0,0,0.06));
        }
        .bc-poll-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-size: 14px;
        }
        .bc-poll-header strong {
            flex: 1;
        }
        .bc-poll-closed-badge {
            font-size: 11px;
            background: var(--warning-bg, rgba(245,158,11,0.12));
            color: var(--warning, #f59e0b);
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 8px;
        }
        .bc-poll-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .bc-poll-option {
            position: relative;
            display: flex;
            align-items: center;
            padding: 10px 14px;
            background: var(--surface, #fff);
            border: 1px solid var(--border, rgba(0,0,0,0.08));
            border-radius: 8px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.15s;
        }
        .bc-poll-option:hover:not(.bc-poll-option-closed) {
            border-color: var(--accent-green, #22c55e);
            background: rgba(34,197,94,0.04);
        }
        .bc-poll-option-voted {
            border-color: var(--accent-green, #22c55e);
            background: rgba(34,197,94,0.08);
        }
        .bc-poll-option-closed {
            cursor: default;
        }
        .bc-poll-option-text {
            flex: 1;
            position: relative;
            z-index: 1;
            font-size: 13px;
        }
        .bc-poll-option-count {
            font-weight: 600;
            font-size: 13px;
            color: var(--text-secondary, #6b7685);
            position: relative;
            z-index: 1;
        }
        .bc-poll-option-bar {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background: rgba(34,197,94,0.12);
            border-radius: 8px;
            transition: width 0.3s ease;
        }
        .bc-poll-footer {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 12px;
            font-size: 12px;
            color: var(--text-muted, #8b8f96);
        }
        .bc-poll-total {
            font-weight: 500;
        }
        .bc-poll-badge {
            display: flex;
            align-items: center;
            gap: 4px;
            opacity: 0.7;
        }
        .bc-poll-close-btn {
            margin-left: auto;
            padding: 4px 10px;
            border: none;
            background: var(--bg-hover, rgba(0,0,0,0.05));
            border-radius: 6px;
            cursor: pointer;
            font-size: 11px;
            color: var(--text-secondary, #6b7685);
            transition: all 0.15s;
        }
        .bc-poll-close-btn:hover {
            background: var(--warning-bg, rgba(245,158,11,0.15));
            color: var(--warning, #f59e0b);
        }
        
        /* Approval Widget */
        .bc-comment-approval {
            margin-top: 12px;
            padding: 14px;
            background: var(--bg-secondary, rgba(0,0,0,0.03));
            border-radius: 10px;
            border: 1px solid var(--border-light, rgba(0,0,0,0.06));
        }
        .bc-approval-header {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 14px;
        }
        .bc-approval-desc {
            font-size: 13px;
            color: var(--text-secondary, #6b7685);
            margin-bottom: 12px;
            line-height: 1.5;
        }
        .bc-approval-votes {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        .bc-approval-vote {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
        }
        .bc-approval-approve {
            background: rgba(34,197,94,0.12);
            color: var(--accent-green, #22c55e);
        }
        .bc-approval-reject {
            background: rgba(239,68,68,0.12);
            color: var(--danger, #ef4444);
        }
        .bc-approval-actions {
            display: flex;
            gap: 8px;
        }
        .bc-approval-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
        }
        .bc-approval-btn-approve {
            background: var(--accent-green, #22c55e);
            color: #fff;
        }
        .bc-approval-btn-approve:hover {
            filter: brightness(1.1);
        }
        .bc-approval-btn-reject {
            background: var(--bg-hover, rgba(0,0,0,0.05));
            color: var(--text-secondary, #6b7685);
        }
        .bc-approval-btn-reject:hover {
            background: rgba(239,68,68,0.12);
            color: var(--danger, #ef4444);
        }
        .bc-approval-my-vote {
            font-size: 12px;
            color: var(--text-muted, #8b8f96);
        }
        
        /* Checklist Widget */
        .bc-comment-checklist {
            margin-top: 12px;
            padding: 14px;
            background: var(--bg-secondary, rgba(0,0,0,0.03));
            border-radius: 10px;
            border: 1px solid var(--border-light, rgba(0,0,0,0.06));
        }
        .bc-checklist-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-size: 14px;
        }
        .bc-checklist-header strong {
            flex: 1;
        }
        .bc-checklist-progress {
            font-size: 12px;
            color: var(--text-muted, #8b8f96);
            background: var(--bg-hover, rgba(0,0,0,0.05));
            padding: 2px 8px;
            border-radius: 10px;
        }
        .bc-checklist-items {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .bc-checklist-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            background: var(--surface, #fff);
            border: 1px solid var(--border, rgba(0,0,0,0.08));
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.15s;
        }
        .bc-checklist-item:hover {
            border-color: var(--accent-purple, #8e44ad);
            background: rgba(142,68,173,0.04);
        }
        .bc-checklist-item-checked {
            background: rgba(142,68,173,0.08);
            border-color: var(--accent-purple, #8e44ad);
        }
        .bc-checklist-item-checked span:first-of-type {
            text-decoration: line-through;
            opacity: 0.7;
        }
        .bc-checklist-checkers {
            font-size: 11px;
            color: var(--text-muted, #8b8f96);
            margin-left: auto;
        }

/* ===== INVOICING DARK-THEME HELPERS ===== */
.inv-row-overdue {
    background: var(--danger-bg, #fef2f2);
}
.inv-row-overdue:hover {
    background: var(--bg-red-tint, #fee2e2) !important;
}
.inv-unconfigured-chip:hover {
    background: var(--warning-border, #fef08a) !important;
    filter: brightness(1.05);
}