/* ============================================
           CLAUDIA MAIL - ESTILOS PRINCIPALES
           ============================================ */
        :root {
            --mail-sidebar-w: 220px;
            --mail-list-w: 340px;
            --mail-accent: #00D4AA;
            --mail-accent-hover: #00b896;
            --mail-unread-bg: rgba(0, 212, 170, 0.05);
            --mail-selected-bg: rgba(0, 212, 170, 0.12);
            --mail-hover-bg: rgba(255, 255, 255, 0.04);
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--bg-primary, #0f172a);
            color: var(--text-primary, #e2e8f0);
            overflow: hidden;
            height: 100dvh;
        }


        /* === LOHMIA SIDEBAR === */
        .app-container { height: 0; overflow: visible; position: relative; }
        
        .sidebar {
            height: 100vh;
            width: 220px;
            background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
            display: flex;
            flex-direction: column;
            border-right: 1px solid rgba(255,255,255,0.15);
            backdrop-filter: blur(20px);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            position: fixed;
            top: 0; left: 0;
            z-index: 1000;
            overflow: hidden;
        }
        .sidebar.active { transform: translateX(0); }
        
        .sidebar-header {
            padding: 20px;
            border-bottom: none !important;
            position: relative;
            flex-shrink: 0;
        }
        .close-sidebar-btn {
            position: absolute; top: 16px; right: 12px;
            width: 36px; height: 36px;
            background: rgba(255,255,255,0.08); border: none; border-radius: 50%;
            color: #fff; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s;
        }
        .close-sidebar-btn:hover { background: rgba(255,255,255,0.18); }
        
        .app-title {
            font-size: 22px; font-weight: 700;
            color: rgba(255,255,255,0.95); margin: 0;
            display: flex; align-items: center; gap: 8px;
        }
        .app-version {
            font-size: 18px !important; color: #F5A623 !important;
            font-weight: 500; display: block;
            text-transform: none !important; margin-top: 2px;
        }
        .brand { color: rgba(255,255,255,0.9); }
        
        /* NOTIFICATION BAR */
        .sidebar-notifications {
            display: flex; flex-direction: row;
            align-items: center; justify-content: space-between;
            padding: 10px 8px;
            background: rgba(255,255,255,0.02);
            border-top: 1px solid rgba(255,255,255,0.06);
            border-bottom: 1px solid rgba(255,255,255,0.06);
            gap: 2px; overflow: hidden; max-width: 100%;
            flex-shrink: 0;
        }
        .notification-item {
            display: flex; flex-direction: column;
            align-items: center; gap: 4px;
            flex: 1 1 0; min-width: 0; max-width: 50px;
            cursor: pointer; padding: 6px 2px;
            border-radius: 8px;
            transition: all 0.2s ease;
        }
        .notification-item:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
        .notification-item:hover svg { stroke: #00D4AA; }
        .notification-item:hover .notification-label { color: rgba(255,255,255,0.9); }
        .notification-icon {
            position: relative; display: flex;
            align-items: center; justify-content: center;
            width: 22px; height: 22px;
        }
        .notification-icon svg { width: 18px; height: 18px; stroke: #90A4AE; transition: stroke 0.2s; }
        .notification-label {
            font-size: 9px; color: rgba(255,255,255,0.55);
            font-weight: 500; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; max-width: 100%;
            letter-spacing: 0.1px;
        }
        .notification-badge {
            position: absolute; top: -4px; right: -6px;
            min-width: 16px; height: 16px; padding: 0 4px;
            background: #1E88A8; color: #fff;
            font-size: 10px; font-weight: 600; border-radius: 8px;
            display: none; align-items: center; justify-content: center;
        }
        .notification-badge.visible { display: flex; }
        .notification-separator { width: 1px; height: 30px; background: rgba(255,255,255,0.15); margin: 0 2px; flex-shrink: 0; }
        .credit-amount { font-size: 13px; font-weight: 600; color: #00D4AA; line-height: 1; }
        

        /* Low credit warning */
        .credit-item.low-credit svg { stroke: #FFA726; }
        .credit-item.low-credit .credit-amount { color: #FFA726; }
        /* Critical credit */
        .credit-item.critical-credit svg { stroke: #E53935; }
        .credit-item.critical-credit .credit-amount { color: #E53935; animation: pulse-credit 2s infinite; }
        @keyframes pulse-credit { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
        @keyframes bounce-badge { 0%,100%{transform:scale(1)}25%{transform:scale(1.25)}50%{transform:scale(0.9)}75%{transform:scale(1.1)} }
        .notification-badge.new { animation: bounce-badge 0.5s ease-in-out; }
        .credit-item:hover svg path, .credit-item:hover svg circle { stroke: #00D4AA; }
        .credit-item.low-credit svg path, .credit-item.low-credit svg circle { stroke: #FFA726; }
        .credit-item.critical-credit svg path, .credit-item.critical-credit svg circle { stroke: #E53935; }
        /* ACTIVE EMAIL ITEM */
        #notifEmails { background: rgba(0,212,170,0.12) !important; border-radius: 8px; }
        #notifEmails .notification-icon svg { stroke: #00D4AA !important; }
        #notifEmails .notification-label { color: #00D4AA !important; font-weight: 600 !important; }

        /* SIDEBAR ACTIONS */
        .sidebar-actions {
            display: flex; gap: 8px; padding: 10px 12px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            flex-shrink: 0;
        }
        .sidebar-action-btn {
            flex: 1; height: 36px;
            background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px; color: #fff; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s;
        }
        .sidebar-action-btn:hover { background: rgba(255,255,255,0.14); }
        .sidebar-action-btn svg { width: 16px; height: 16px; stroke: currentColor; }
        
        /* SIDEBAR CONTENT */
        .sidebar-content { flex: 1; overflow-y: auto; padding: 12px 8px; }
        
        /* FOOTER */
        .sidebar-footer { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }
        .section-title {
            display: flex; align-items: center; gap: 6px;
            font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.4);
            text-transform: uppercase; letter-spacing: 0.5px;
            padding: 8px 12px 4px;
        }
        .sidebar-item {
            display: flex; align-items: center; gap: 10px;
            padding: 9px 12px; margin: 2px 0; border-radius: 8px;
            cursor: pointer; color: rgba(255,255,255,0.7);
            font-size: 13px; transition: all 0.15s;
        }
        .sidebar-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
        .sidebar-icon { display: flex; align-items: center; }
        
        /* OVERLAY */
        .sidebar-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5); z-index: 999;
            opacity: 0; visibility: hidden; transition: all 0.3s;
        }
        .sidebar-overlay.active { opacity: 1; visibility: visible; }
        
        /* HAMBURGER */
        .hamburger-menu {
            position: fixed; top: 14px; left: 14px; z-index: 998;
            background: rgba(13,31,60,0.9); border: 1px solid rgba(255,255,255,0.15);
            border-radius: 10px; padding: 10px; cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3); backdrop-filter: blur(10px);
            transition: all 0.2s;
        }
        .hamburger-menu:hover { background: rgba(13,31,60,1); }
        .hamburger-icon { width: 20px; height: 16px; display: flex; flex-direction: column; justify-content: space-between; }
        .hamburger-line { width: 100%; height: 2px; background: rgba(255,255,255,0.8); border-radius: 2px; transition: all 0.3s; }
        
        /* LOHMIA ROBOT ICON */
        .lohmia-robot-icon { flex-shrink: 0; }
        
        @media (min-width: 769px) {
            .hamburger-menu { display: none; }
        }
        @media (max-width: 768px) {
            .hamburger-menu { display: flex !important; align-items: center !important; justify-content: center !important; }
        }
        /* DESKTOP: sidebar siempre visible (no overlay) */
        @media (min-width: 769px) {
            #sidebar {
                transform: translateX(0) !important;
                z-index: 100;
                box-shadow: 2px 0 20px rgba(0,0,0,0.3);
            }
            .sidebar-overlay { display: none !important; }
            #mail-app {
                margin-left: 220px;
                width: calc(100vw - 220px);
            }
        }
        /* MOBILE: sidebar como overlay */
        @media (max-width: 768px) {
            #sidebar { transform: translateX(-100%); }
            #sidebar.active { transform: translateX(0) !important; z-index: 1000 !important; }
            .sidebar-overlay.active { display: block !important; }
            /* Override mobile-audit-fixes.css que oculta el overlay con !important */
            #sidebarOverlay.active { display: block !important; z-index: 999 !important; }
            #mail-app { margin-left: 0; width: 100%; }
        }
        /* === END LOHMIA SIDEBAR === */

        /* [unified-header.css] */

        /* ---- MAIL LAYOUT ---- */
        #mail-app {
            display: flex;
            height: 100dvh;
            padding-top: 0;
            /* margin-left + width set in @media blocks (sidebar layout) */
        }

        /* ---- SIDEBAR ---- */
        #mail-sidebar {
            width: var(--mail-sidebar-w);
            background: var(--bg-secondary, #1e293b);
            border-right: 1px solid rgba(255,255,255,0.08);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            flex-shrink: 0;
        }

        .mail-sidebar-header {
            padding: 16px 12px 8px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .btn-compose {
            background: var(--mail-accent);
            color: #0f172a;
            border: none;
            border-radius: 24px;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.2s;
            width: 100%;
            justify-content: center;
        }
        .btn-compose:hover { background: var(--mail-accent-hover); }

        .account-selector {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            padding: 6px 10px;
            color: var(--text-primary, #e2e8f0);
            font-size: 12px;
            width: 100%;
            cursor: pointer;
        }
        .account-selector:focus { outline: 1px solid var(--mail-accent); }

        .mail-folder-list { padding: 4px 0; flex: 1; }
        .mail-folder-section { margin-bottom: 8px; }
        .mail-folder-section-title {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-secondary, #64748b);
            padding: 8px 14px 4px;
        }
        .mail-folder-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 8px;
            margin: 1px 6px;
            font-size: 13px;
            color: var(--text-secondary, #94a3b8);
            gap: 8px;
            transition: background 0.15s, color 0.15s;
            position: relative;
        }
        .mail-folder-item:hover { background: var(--mail-hover-bg); color: var(--text-primary, #e2e8f0); }
        .mail-folder-item.active { background: var(--mail-selected-bg); color: var(--mail-accent); }
        .mail-folder-icon { width: 16px; flex-shrink: 0; text-align: center; }
        .mail-folder-name { flex: 1; }
        .mail-folder-badge {
            background: var(--mail-accent);
            color: #0f172a;
            border-radius: 10px;
            padding: 2px 7px;
            font-size: 10px;
            font-weight: 700;
            min-width: 18px;
            text-align: center;
        }
        .mail-sidebar-footer {
            padding: 10px;
            border-top: 1px solid rgba(255,255,255,0.06);
        }
        .btn-manage-accounts {
            width: 100%;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.12);
            color: var(--text-secondary, #94a3b8);
            border-radius: 8px;
            padding: 7px 10px;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }
        .btn-manage-accounts:hover { border-color: var(--mail-accent); color: var(--mail-accent); }

        /* ---- EMAIL LIST PANEL ---- */
        #mail-list-panel {
            width: var(--mail-list-w);
            border-right: 1px solid rgba(255,255,255,0.08);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            background: var(--bg-primary, #0f172a);
        }

        .mail-list-header {
            padding: 14px 16px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .mail-list-title { font-size: 15px; font-weight: 700; flex: 1; color: var(--text-primary, #e2e8f0); }
        .mail-count-badge { background: rgba(255,255,255,0.08); border-radius: 10px; padding: 2px 8px; font-size: 11px; color: var(--text-secondary, #94a3b8); }

        .mail-list-search { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .mail-list-search input {
            width: 100%;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            padding: 7px 12px;
            color: var(--text-primary, #e2e8f0);
            font-size: 13px;
        }
        .mail-list-search input::placeholder { color: var(--text-secondary, #64748b); }
        .mail-list-search input:focus { outline: 1px solid var(--mail-accent); }

        .mail-list-filters {
            display: flex; gap: 4px; padding: 6px 12px;
            border-bottom: 1px solid rgba(255,255,255,0.04); overflow-x: auto;
        }
        .mail-filter-btn {
            background: transparent; border: 1px solid rgba(255,255,255,0.1);
            color: var(--text-secondary, #94a3b8); border-radius: 14px;
            padding: 3px 10px; font-size: 11px; cursor: pointer; white-space: nowrap; transition: all 0.15s;
        }
        .mail-filter-btn.active, .mail-filter-btn:hover {
            background: var(--mail-accent); color: #0f172a; border-color: var(--mail-accent); font-weight: 600;
        }
        .mail-list-body { flex: 1; overflow-y: auto; }

        .mail-item {
            padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.04);
            cursor: pointer; transition: background 0.15s; display: flex; gap: 10px; align-items: flex-start; position: relative;
        }
        .mail-item:hover { background: var(--mail-hover-bg); }
        .mail-item.selected { background: var(--mail-selected-bg); }
        .mail-item.unread { background: var(--mail-unread-bg); }
        .mail-item.unread .mail-item-from { font-weight: 700; color: var(--text-primary, #e2e8f0); }
        .mail-item.unread .mail-item-subject { font-weight: 600; color: var(--text-primary, #e2e8f0); }

        .mail-item-left { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 2px; }
        .mail-item-avatar {
            width: 32px; height: 32px; border-radius: 50%; background: rgba(0,212,170,0.2); color: var(--mail-accent);
            display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0;
        }
        .mail-item-star { color: rgba(255,255,255,0.2); font-size: 14px; cursor: pointer; transition: color 0.15s; line-height: 1; user-select: none; }
        .mail-item-star.starred { color: #f59e0b; }
        .mail-item-star:hover { color: #f59e0b; }

        .mail-item-content { flex: 1; min-width: 0; }
        .mail-item-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
        .mail-item-from { font-size: 13px; font-weight: 500; color: var(--text-secondary, #94a3b8); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .mail-item-date { font-size: 11px; color: var(--text-secondary, #64748b); flex-shrink: 0; }
        .mail-item-subject { font-size: 13px; font-weight: 500; color: var(--text-secondary, #94a3b8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 3px; }
        .mail-item-icons { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
        .mail-attach-icon { color: #94a3b8; font-size: 11px; }
        .mail-unread-dot { width: 7px; height: 7px; background: var(--mail-accent); border-radius: 50%; flex-shrink: 0; margin-top: 5px; }

        .mail-list-loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--text-secondary, #64748b); font-size: 13px; gap: 10px; }
        .mail-list-body { display: flex; flex-direction: column; }
        .mail-list-empty { padding: 40px 20px; text-align: center; color: var(--text-secondary, #64748b); font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 200px; }
        .mail-list-empty svg { opacity: 0.3; margin-bottom: 0; display: block; }

        /* ---- READING PANE ---- */
        #mail-reading-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-primary, #0f172a); }
        #readingContent { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
        .mail-reading-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; color: var(--text-secondary, #64748b); gap: 12px; }
        .mail-reading-empty svg { opacity: 0.2; }
        .mail-reading-empty p { font-size: 14px; margin: 0; }

        .mail-reading-header { padding: 18px 24px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .mail-reading-subject { font-size: 18px; font-weight: 700; color: var(--text-primary, #e2e8f0); margin: 0 0 12px; line-height: 1.3; }
        .mail-reading-meta { display: flex; align-items: flex-start; gap: 12px; }
        .mail-reading-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,212,170,0.2); color: var(--mail-accent); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
        .mail-reading-from-section { flex: 1; }
        .mail-reading-from-name { font-size: 14px; font-weight: 600; color: var(--text-primary, #e2e8f0); }
        .mail-reading-from-addr { font-size: 12px; color: var(--text-secondary, #64748b); }
        .mail-reading-date { font-size: 12px; color: var(--text-secondary, #64748b); }
        .mail-reading-recipients { font-size: 12px; color: var(--text-secondary, #64748b); margin-top: 6px; }

        .mail-reading-actions { padding: 10px 24px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; gap: 8px; flex-wrap: wrap; }
        .btn-mail-action { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--text-primary, #e2e8f0); border-radius: 8px; padding: 7px 14px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; }
        .btn-mail-action:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
        .btn-mail-action.danger:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #ef4444; }
        .btn-mail-action.primary { background: var(--mail-accent); border-color: var(--mail-accent); color: #0f172a; font-weight: 600; }
        .btn-mail-action.primary:hover { background: var(--mail-accent-hover); }

        .mail-reading-body { flex: 1; overflow-y: auto; padding: 24px; }
        .mail-html-content { background: #fff; color: #1a1a2e; padding: 20px; border-radius: 8px; font-size: 14px; line-height: 1.6; max-width: 100%; overflow: auto; }
        .mail-text-content { font-size: 14px; line-height: 1.7; color: var(--text-primary, #e2e8f0); white-space: pre-wrap; font-family: monospace; }
        .mail-attachments { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
        .mail-attachments-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary, #64748b); margin-bottom: 10px; }
        .mail-attachment-list { display: flex; flex-wrap: wrap; gap: 8px; }
        .mail-attachment-item { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; transition: background 0.15s; }
        .mail-attachment-item:hover { background: rgba(255,255,255,0.1); }
        .mail-attachment-name { color: var(--text-primary, #e2e8f0); }
        .mail-attachment-size { color: var(--text-secondary, #64748b); }

        /* ---- COMPOSER ---- */
        #mail-composer {
            position: absolute !important; bottom: 0; right: 0; width: 640px; max-width: 100vw; /* absolute=fixed cuando body tiene height fijo */
            background: var(--bg-secondary, #1e293b); border: 1px solid rgba(255,255,255,0.12);
            border-bottom: none; border-radius: 12px 12px 0 0; z-index: 2000;
            display: none; flex-direction: column; box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
        }
        #mail-composer.open { display: flex; }
        .composer-header { padding: 12px 16px; background: rgba(0,212,170,0.15); border-radius: 12px 12px 0 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
        .composer-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-primary, #e2e8f0); }
        .composer-controls { display: flex; gap: 6px; }
        .composer-ctrl-btn { background: transparent; border: none; color: var(--text-secondary, #94a3b8); cursor: pointer; padding: 4px; border-radius: 4px; font-size: 16px; transition: color 0.15s; }
        .composer-ctrl-btn:hover { color: var(--text-primary, #e2e8f0); }
        .composer-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
        .composer-field { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 8px; }
        .composer-field-label { font-size: 12px; color: var(--text-secondary, #64748b); width: 30px; flex-shrink: 0; }
        .composer-field input { flex: 1; background: transparent; border: none; color: var(--text-primary, #e2e8f0); font-size: 13px; outline: none; }
        .composer-content { min-height: 200px; max-height: 350px; overflow-y: auto; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px; background: rgba(255,255,255,0.03); }
        .composer-content[contenteditable] { outline: none; font-size: 14px; line-height: 1.6; color: var(--text-primary, #e2e8f0); }
        .composer-content:focus { border-color: rgba(0,212,170,0.3); }
        .composer-toolbar { display: flex; gap: 2px; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; }
        .composer-tool-btn { background: transparent; border: 1px solid transparent; color: var(--text-secondary, #94a3b8); border-radius: 6px; padding: 5px 8px; font-size: 12px; cursor: pointer; font-weight: 700; transition: all 0.15s; }
        .composer-tool-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary, #e2e8f0); }
        .composer-footer { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.06); }
        .btn-send { background: var(--mail-accent); color: #0f172a; border: none; border-radius: 8px; padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.2s; }
        .btn-send:hover { background: var(--mail-accent-hover); }
        .btn-send:disabled { opacity: 0.5; cursor: not-allowed; }
        .composer-account-select { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--text-primary, #e2e8f0); border-radius: 6px; padding: 5px 8px; font-size: 12px; }
        .btn-discard { background: transparent; border: 1px solid rgba(255,255,255,0.12); color: var(--text-secondary, #94a3b8); border-radius: 8px; padding: 9px 14px; font-size: 12px; cursor: pointer; }
        .btn-discard:hover { border-color: rgba(239,68,68,0.4); color: #ef4444; }

        /* ---- MODALS ---- */
        .mail-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 3000; display: none; align-items: center; justify-content: center; }
        .mail-modal-overlay.open { display: flex; }
        .mail-modal { background: var(--bg-secondary, #1e293b); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 24px; width: 520px; max-width: calc(100vw - 32px); max-height: 90dvh; overflow-y: auto; }
        .mail-modal-title { font-size: 18px; font-weight: 700; margin: 0 0 20px; color: var(--text-primary, #e2e8f0); }
        .form-group { margin-bottom: 14px; }
        .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary, #94a3b8); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em; }
        .form-control { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--text-primary, #e2e8f0); border-radius: 8px; padding: 9px 12px; font-size: 13px; transition: border-color 0.2s; }
        .form-control:focus { outline: none; border-color: var(--mail-accent); }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .form-check { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
        .form-check input[type=checkbox] { accent-color: var(--mail-accent); }
        .form-check label { font-size: 12px; color: var(--text-secondary, #94a3b8); }
        .modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
        .btn-primary { background: var(--mail-accent); color: #0f172a; border: none; border-radius: 8px; padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer; }
        .btn-secondary { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--text-primary, #e2e8f0); border-radius: 8px; padding: 9px 20px; font-size: 13px; cursor: pointer; }
        .preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
        .preset-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary, #94a3b8); border-radius: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer; transition: all 0.15s; text-align: left; }
        .preset-btn:hover { border-color: var(--mail-accent); color: var(--mail-accent); }

        .account-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
        .account-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
        .account-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
        .account-info { flex: 1; }
        .account-name { font-size: 14px; font-weight: 600; color: var(--text-primary, #e2e8f0); }
        .account-email { font-size: 12px; color: var(--text-secondary, #64748b); }
        .account-actions { display: flex; gap: 6px; }
        .btn-icon { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary, #94a3b8); border-radius: 6px; padding: 5px 8px; font-size: 12px; cursor: pointer; transition: all 0.15s; }
        .btn-icon:hover { border-color: var(--mail-accent); color: var(--mail-accent); }
        .btn-icon.danger:hover { border-color: #ef4444; color: #ef4444; }

        .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; }
        .status-badge.success { background: rgba(34,197,94,0.15); color: #22c55e; }
        .status-badge.error { background: rgba(239,68,68,0.15); color: #ef4444; }
        .status-badge.testing { background: rgba(251,191,36,0.15); color: #fbbf24; }

        .spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--mail-accent); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
        @keyframes spin { to { transform: rotate(360deg); } }

        .toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
        .toast { background: var(--bg-secondary, #1e293b); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 12px 18px; font-size: 13px; color: var(--text-primary, #e2e8f0); box-shadow: 0 4px 20px rgba(0,0,0,0.4); animation: slideUp 0.3s ease; }
        .toast.success { border-color: #22c55e; }
        .toast.error { border-color: #ef4444; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        @media (max-width: 768px) {
            #mail-app { height: 100dvh; } /* full height — sidebar es overlay */
            #mail-sidebar { display: none; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 900; transform: translateX(-100%); transition: transform 0.3s; }
            #mail-sidebar.mobile-open { display: flex; transform: translateX(0); }
            #mail-list-panel { width: 100%; }
            #mail-reading-pane { position: fixed; inset: 0; top: 56px; z-index: 800; transform: translateX(100%); transition: transform 0.3s; background: var(--bg-primary, #0f172a); }
            #mail-reading-pane.mobile-open { transform: translateX(0); }
            #mail-composer { width: 100%; }
            .mail-reading-body { padding: 16px; }
            .mail-reading-actions { padding: 8px 16px; }
            .mail-reading-header { padding: 14px 16px 10px; }
            .mail-reading-subject { font-size: 16px; }
            .btn-back-list { display: flex !important; align-items: center; gap: 6px; background: transparent; border: none; color: var(--mail-accent); font-size: 13px; cursor: pointer; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); width: 100%; }
        }
        @media (min-width: 769px) { .btn-back-list { display: none; } }
    
        /* ============================================
           CLAUDIA MAIL - UI/UX ENHANCEMENTS v2
           ============================================ */

        /* SCROLLBARS */
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

        /* SKELETON LOADING */
        .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 4px; }
        @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
        .mail-skeleton-item { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; gap: 10px; align-items: flex-start; }
        .skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
        .skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
        .skeleton-line { height: 10px; }
        .skeleton-line.short { width: 40%; }
        .skeleton-line.medium { width: 70%; }
        .skeleton-line.long { width: 90%; }

        /* IMPROVED SIDEBAR */
        #mail-sidebar { width: 240px; }
        .mail-folder-item { padding: 8px 10px; margin: 1px 8px; border-radius: 8px; font-size: 13px; transition: background 0.15s, color 0.15s, transform 0.1s; }
        .mail-folder-item:hover { background: rgba(255,255,255,0.07); transform: translateX(2px); }
        .mail-folder-item.active { background: rgba(0,212,170,0.12); color: #00D4AA; border-left: 2px solid #00D4AA; }
        .mail-folder-badge { background: #00D4AA; color: #0f172a; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex-shrink: 0; }
        .btn-compose { letter-spacing: 0.02em; font-size: 13px; border-radius: 8px; height: 40px; }

        /* IMPROVED EMAIL LIST */
        #mail-list-panel { width: 380px; }
        .mail-item { padding: 10px 14px 10px 12px; border-left: 3px solid transparent; transition: background 0.12s, border-color 0.12s; }
        .mail-item.unread { border-left-color: #00D4AA; background: rgba(0,212,170,0.04); }
        .mail-item.unread .mail-item-from { color: #e2e8f0; font-weight: 700; }
        .mail-item.unread .mail-item-subject { color: #e2e8f0; font-weight: 600; }
        .mail-item:hover { background: rgba(255,255,255,0.05); }
        .mail-item.selected { background: rgba(0,212,170,0.1); border-left-color: #00D4AA; }
        .mail-item-avatar { width: 34px; height: 34px; font-size: 14px; font-weight: 700; border-radius: 10px; }
        .mail-item-from { font-size: 13px; }
        .mail-item-subject { font-size: 12.5px; margin-bottom: 2px; }
        .mail-item-date { font-size: 11px; white-space: nowrap; }
        .mail-item-preview { font-size: 11.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
        .mail-unread-dot { display: none; } /* replaced by left border */

        /* FADE IN ANIMATION */
        .mail-item { animation: fadeIn 0.2s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

        /* IMPROVED READING PANE */
        .mail-reading-subject { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
        .mail-reading-avatar { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; }
        .mail-reading-from-name { font-size: 15px; }
        .btn-mail-action { font-size: 12.5px; border-radius: 8px; padding: 7px 14px; transition: all 0.15s; }
        .mail-html-content img { max-width: 100%; height: auto; }
        .mail-attachment-item { transition: all 0.15s; }
        .mail-attachment-item:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }

        /* IMPROVED COMPOSER */
        #mail-composer { border-radius: 16px 16px 0 0; max-height: 85vh; }
        .composer-header { border-radius: 16px 16px 0 0; background: linear-gradient(135deg, rgba(0,212,170,0.15) 0%, rgba(0,212,170,0.08) 100%); }
        .composer-content[contenteditable]:empty:before { content: attr(placeholder); color: var(--text-secondary, #64748b); pointer-events: none; }
        .composer-field input:focus { background: rgba(0,212,170,0.04); }

        /* IMPROVED MODALS */
        .mail-modal { box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
        .form-control:focus { background: rgba(0,212,170,0.04); }
        .preset-btn:hover { background: rgba(0,212,170,0.08); }

        /* FOCUS STATES */
        button:focus-visible { outline: 2px solid #00D4AA; outline-offset: 2px; }
        input:focus-visible { outline: 2px solid #00D4AA; outline-offset: 1px; }
        .mail-folder-item:focus-visible { outline: 2px solid #00D4AA; }

        /* RESIZABLE PANELS (cursor hint) */
        #mail-list-panel { cursor: default; position: relative; }
        .panel-resize-handle { position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 10; background: transparent; transition: background 0.2s; }
        .panel-resize-handle:hover { background: rgba(0,212,170,0.3); }

        /* FAB - Mobile compose */
        .mail-fab { display: none; position: fixed; bottom: 80px; right: 20px; width: 56px; height: 56px; background: #00D4AA; border: none; border-radius: 50%; box-shadow: 0 4px 20px rgba(0,212,170,0.4), 0 2px 8px rgba(0,0,0,0.3); cursor: pointer; z-index: 850; color: #0f172a; font-size: 24px; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; }
        .mail-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,212,170,0.5); }
        .mail-fab:active { transform: scale(0.95); }

        /* MOBILE MAIL NAV */
        .mail-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: var(--bg-secondary, #1e293b); border-top: 1px solid rgba(255,255,255,0.08); z-index: 900; padding-bottom: env(safe-area-inset-bottom); }
        .mail-bottom-nav-inner { display: flex; height: 100%; }
        .mail-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: var(--text-secondary, #64748b); font-size: 10px; transition: color 0.15s; border: none; background: transparent; padding: 0; }
        .mail-nav-item:active { background: rgba(255,255,255,0.05); }
        .mail-nav-item.active { color: #00D4AA; }
        .mail-nav-item svg { width: 22px; height: 22px; }

        /* IMPROVED TOAST */
        .toast-container { bottom: 80px; } /* above mobile nav */
        .toast { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 12px; font-size: 13px; backdrop-filter: blur(12px); }
        .toast::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: #94a3b8; }
        .toast.success::before { background: #22c55e; }
        .toast.error::before { background: #ef4444; }

        /* IMPROVED EMPTY STATES */
        .mail-list-empty, .mail-reading-empty { gap: 16px; }
        .mail-list-empty p, .mail-reading-empty p { color: var(--text-secondary, #64748b); font-size: 14px; margin: 0; }
        .mail-reading-empty svg { opacity: 0.15; }

        /* SECTION DIVIDERS in sidebar */
        .mail-folder-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 6px 12px; }

        /* AVATAR COLORS */
        .avatar-a, .avatar-b { background: rgba(59,130,246,0.25); color: #60a5fa; }
        .avatar-c, .avatar-d { background: rgba(168,85,247,0.25); color: #c084fc; }
        .avatar-e, .avatar-f { background: rgba(239,68,68,0.25); color: #f87171; }
        .avatar-g, .avatar-h { background: rgba(245,158,11,0.25); color: #fbbf24; }
        .avatar-i, .avatar-j { background: rgba(20,184,166,0.25); color: #2dd4bf; }
        .avatar-k, .avatar-l { background: rgba(34,197,94,0.25); color: #4ade80; }
        .avatar-m, .avatar-n { background: rgba(249,115,22,0.25); color: #fb923c; }
        .avatar-o, .avatar-p { background: rgba(236,72,153,0.25); color: #f472b6; }
        .avatar-q, .avatar-r { background: rgba(99,102,241,0.25); color: #818cf8; }
        .avatar-s, .avatar-t { background: rgba(20,184,166,0.2); color: #00D4AA; }
        .avatar-u, .avatar-v { background: rgba(234,179,8,0.25); color: #facc15; }
        .avatar-w, .avatar-x, .avatar-y, .avatar-z { background: rgba(107,114,128,0.25); color: #9ca3af; }
        .avatar-default { background: rgba(0,212,170,0.2); color: #00D4AA; }

        /* IMPROVED SEARCH */
        .mail-list-search input { padding: 8px 14px 8px 36px; }
        .mail-search-wrapper { position: relative; }
        .mail-search-wrapper::before { content: ''; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat center; background-size: 14px; }

        /* ACCOUNT BADGE in sidebar */
        .account-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; font-size: 11px; color: var(--text-secondary, #94a3b8); margin: 2px 6px; width: calc(100% - 12px); cursor: pointer; transition: all 0.15s; }
        .account-badge:hover { border-color: rgba(0,212,170,0.3); color: var(--text-primary,#e2e8f0); }
        .account-badge .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

        @media (max-width: 768px) {
            #mail-sidebar { width: 280px; display: none; position: fixed; left: 0; top: 60px; bottom: 64px; z-index: 900; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); border-right: 1px solid rgba(255,255,255,0.08); }
            #mail-sidebar.mobile-open { display: flex; transform: translateX(0); }
            #mail-list-panel { width: 100%; padding-bottom: 64px; }
            #mail-reading-pane { position: fixed; inset: 0; top: 60px; z-index: 800; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); background: var(--bg-primary, #0f172a); padding-bottom: 64px; }
            #mail-reading-pane.mobile-open { transform: translateX(0); }
            #mail-composer { width: 100%; max-height: 95vh; border-radius: 16px 16px 0 0; }
            .mail-fab { display: flex; }
            .mail-bottom-nav { display: block; }
            .mail-list-header { padding: 10px 12px; }
            .mail-reading-body { padding: 16px; }
            #btnSidebarToggle { display: inline-flex !important; }
            .toast-container { bottom: 76px; }
            .mail-reading-actions { gap: 6px; padding: 8px 12px; overflow-x: auto; flex-wrap: nowrap; }
            .btn-mail-action { flex-shrink: 0; padding: 6px 10px; font-size: 11px; }
        }

        @media (min-width: 769px) {
            #mail-app { padding-bottom: 0; }
            .mail-fab, .mail-bottom-nav { display: none; }
            .btn-back-list { display: none; }
            #btnSidebarToggle { display: none !important; }
        }

        /* Phase 4: SVG icon fixes */
        .mail-item-star.starred svg { fill: #f59e0b; stroke: #f59e0b; }
        .mail-item-star svg, .mail-folder-icon svg { display: block; }
        .mail-attach-icon svg, .mail-attachments-title svg, .mail-attachment-item > span:first-child svg { vertical-align: middle; }
        .status-badge.testing svg { animation: spin-icon 1s linear infinite; display: inline-block; vertical-align: middle; }
        @keyframes spin-icon { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .btn-mail-action svg, .btn-icon svg, .composer-tool-btn svg { vertical-align: middle; }

        /* =====================================================
           PHASE 5: PREMIUM UI + FUNCIONALIDADES
           ===================================================== */

        /* --- A2: Sidebar Premium --- */
        #mail-sidebar { background: linear-gradient(180deg, #0f1729 0%, #0a1020 100%); }
        .mail-sidebar-header { padding: 16px 12px 12px; }
        .btn-compose { width: 100%; justify-content: center; gap: 10px; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; background: linear-gradient(135deg, #00D4AA, #00b896); color: #0f172a; border: none; box-shadow: 0 2px 8px rgba(0,212,170,0.25); transition: all 0.2s; }
        .btn-compose:hover { box-shadow: 0 4px 16px rgba(0,212,170,0.4); transform: translateY(-1px); }
        .account-selector { width: 100%; margin-top: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #e2e8f0; border-radius: 8px; padding: 7px 10px; font-size: 12px; cursor: pointer; }
        .account-selector:focus { outline: none; border-color: rgba(0,212,170,0.4); }
        .mail-folder-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.3); padding: 16px 16px 6px; }
        .mail-folder-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: background 0.15s; margin: 1px 8px; position: relative; color: rgba(255,255,255,0.7); font-size: 13px; }
        .mail-folder-item:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
        .mail-folder-item.active { background: rgba(0,212,170,0.12) !important; color: #00D4AA !important; font-weight: 600; }
        .mail-folder-item.active::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px; background:#00D4AA; border-radius:0 2px 2px 0; }
        .mail-folder-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; }
        .mail-folder-icon svg { opacity: 0.8; }
        .mail-folder-item.active .mail-folder-icon svg { opacity: 1; }
        .mail-folder-name { flex: 1; }
        .mail-unread-badge { background: #00D4AA; color: #0f172a; border-radius: 10px; padding: 1px 6px; font-size: 10px; font-weight: 700; min-width: 18px; text-align: center; flex-shrink: 0; }
        .mail-sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: auto; }
        .btn-manage-accounts { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: transparent; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); border-radius: 8px; cursor: pointer; font-size: 12px; transition: all 0.15s; }
        .btn-manage-accounts:hover { border-color: rgba(0,212,170,0.3); color: #00D4AA; background: rgba(0,212,170,0.05); }

        /* --- A3: Email List Premium --- */
        .mail-item { padding: 10px 14px; display: flex; gap: 10px; align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background 0.12s; position: relative; }
        .mail-item:hover { background: rgba(255,255,255,0.03); }
        .mail-item.selected { background: rgba(0,212,170,0.07) !important; }
        .mail-item.unread { border-left: 3px solid #00D4AA; }
        .mail-item.unread .mail-item-subject { font-weight: 600; color: #e2e8f0; }
        .mail-item.unread .mail-item-from { font-weight: 600; }
        .mail-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; color: #0f172a; margin-top: 2px; }
        .mail-item-content { flex: 1; min-width: 0; }
        .mail-item-row1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
        .mail-item-from { font-size: 13px; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
        .mail-item-date { font-size: 11px; color: rgba(255,255,255,0.4); white-space: nowrap; flex-shrink: 0; }
        .mail-item-subject { font-size: 13px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; line-height: 1.4; }
        .mail-item-preview { font-size: 11px; color: rgba(255,255,255,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mail-item-indicators { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; padding-top: 2px; }
        .mail-item-star { color: rgba(255,255,255,0.15); cursor: pointer; transition: color 0.15s; }
        .mail-item-star:hover { color: #f59e0b; }
        .mail-item-star.starred { color: #f59e0b; }
        .mail-item-star.starred svg { fill: #f59e0b; stroke: #f59e0b; }
        .mail-attach-icon { color: rgba(255,255,255,0.3); }
        /* Stagger fade-in */
        .mail-item { animation: p5mailFadeIn 0.2s ease both; }
        @keyframes p5mailFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
        .mail-item:nth-child(1) { animation-delay: 0ms; }
        .mail-item:nth-child(2) { animation-delay: 30ms; }
        .mail-item:nth-child(3) { animation-delay: 60ms; }
        .mail-item:nth-child(4) { animation-delay: 90ms; }
        .mail-item:nth-child(5) { animation-delay: 120ms; }

        /* --- A4: Reading Pane Premium --- */
        .mail-reading-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; height: 100%; gap: 16px; color: rgba(255,255,255,0.25); }
        .mail-reading-empty-icon { opacity: 0.15; }
        .mail-reading-empty h3 { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.3); margin: 0; }
        .mail-reading-empty p { font-size: 13px; color: rgba(255,255,255,0.2); margin: 0; }
        .reading-header-area { padding: 20px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .reading-sender-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
        .reading-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; color: #0f172a; }
        .reading-sender-info { flex: 1; min-width: 0; }
        .reading-sender-name { font-size: 15px; font-weight: 600; color: #e2e8f0; margin-bottom: 2px; }
        .reading-sender-email { font-size: 12px; color: rgba(255,255,255,0.45); }
        .reading-date-badge { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 4px; white-space: nowrap; }
        .reading-subject { font-size: 18px; font-weight: 700; color: #f1f5f9; line-height: 1.3; margin-bottom: 8px; }
        .reading-recipients { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
        .reading-recipients strong { color: rgba(255,255,255,0.6); }
        .reading-actions-bar { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 24px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.01); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); } .reading-actions-bar::-webkit-scrollbar { display: none; }
        .btn-mail-action { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; white-space: nowrap; }
        .btn-mail-action:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: #e2e8f0; }
        .btn-mail-action.primary { background: rgba(0,212,170,0.12); border-color: rgba(0,212,170,0.3); color: #00D4AA; }
        .btn-mail-action.primary:hover { background: rgba(0,212,170,0.2); }
        .btn-mail-action.danger:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #ef4444; }
        .reading-body-area { padding: 24px; max-width: 760px; margin: 0 auto; }
        .reading-body-area .mail-body { line-height: 1.7; font-size: 14px; color: rgba(255,255,255,0.85); }
        .reading-body-area .mail-body img { max-width: 100%; border-radius: 6px; }
        .mail-attachments-card { margin: 20px 24px; padding: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; }
        .mail-attachment-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s; background: rgba(255,255,255,0.03); margin-bottom: 6px; border: 1px solid rgba(255,255,255,0.06); }
        .mail-attachment-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); }
        .mail-attachment-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 700; }
        .mail-attachment-icon.pdf { background: rgba(239,68,68,0.15); color: #ef4444; }
        .mail-attachment-icon.doc { background: rgba(59,130,246,0.15); color: #3b82f6; }
        .mail-attachment-icon.xls { background: rgba(34,197,94,0.15); color: #22c55e; }
        .mail-attachment-icon.img { background: rgba(168,85,247,0.15); color: #a855f7; }
        .mail-attachment-icon.generic { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }

        /* --- A5: Composer Premium --- */
        .mail-composer { box-shadow: 0 -4px 32px rgba(0,0,0,0.5); border-radius: 12px 12px 0 0; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s; }
        .mail-composer:not(.open) { transform: translateY(100%); opacity: 0; pointer-events: none; }
        .mail-composer.open { transform: translateY(0); opacity: 1; }
        .composer-header { border-radius: 12px 12px 0 0; background: rgba(255,255,255,0.05); padding: 12px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
        .composer-title { flex: 1; font-size: 13px; font-weight: 600; color: #e2e8f0; }
        .composer-controls { display: flex; gap: 6px; }
        .composer-controls button { background: transparent; border: none; color: rgba(255,255,255,0.5); cursor: pointer; padding: 4px; border-radius: 4px; transition: color 0.15s; }
        .composer-controls button:hover { color: #e2e8f0; }
        .chips-input-wrapper { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 12px; min-height: 36px; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .recipient-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,212,170,0.12); border: 1px solid rgba(0,212,170,0.25); color: #00D4AA; border-radius: 20px; padding: 2px 8px 2px 6px; font-size: 12px; }
        .recipient-chip button { background: none; border: none; color: rgba(0,212,170,0.7); cursor: pointer; padding: 0; font-size: 14px; line-height: 1; }
        .chips-input { flex: 1; min-width: 120px; background: transparent; border: none; color: #e2e8f0; font-size: 13px; outline: none; padding: 2px 0; }
        .composer-toolbar { gap: 0; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .composer-tool-group { display: flex; gap: 1px; padding: 0 4px; border-right: 1px solid rgba(255,255,255,0.08); }
        .composer-tool-group:last-child { border-right: none; }
        .composer-tool-btn { border-radius: 5px; transition: all 0.12s; }
        .btn-send-composer { background: linear-gradient(135deg, #00D4AA, #00b896); color: #0f172a; border: none; padding: 9px 20px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.15s; }
        .btn-send-composer:hover { box-shadow: 0 2px 12px rgba(0,212,170,0.4); transform: translateY(-1px); }
        .composer-signature-preview { padding: 8px 12px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; color: rgba(255,255,255,0.3); font-style: italic; white-space: pre-line; }

        /* Autocomplete dropdown */
        .autocomplete-dropdown { position: absolute; background: #1e293b; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 9999; min-width: 280px; overflow: hidden; margin-top: 4px; }
        .autocomplete-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; transition: background 0.1s; }
        .autocomplete-item:hover, .autocomplete-item.active { background: rgba(0,212,170,0.1); }
        .autocomplete-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; color: #0f172a; }
        .autocomplete-name { font-size: 13px; color: #e2e8f0; }
        .autocomplete-email { font-size: 11px; color: rgba(255,255,255,0.45); }

        /* Search highlight */
        mark.search-hl { background: rgba(251,191,36,0.25); color: inherit; border-radius: 2px; padding: 0 1px; }

        /* Advanced search panel */
        .search-advanced-panel { background: #1a2540; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 16px; margin: 8px; }
        .search-advanced-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .search-field { display: flex; flex-direction: column; gap: 4px; }
        .search-field label { font-size: 11px; color: rgba(255,255,255,0.4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
        .search-field input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #e2e8f0; border-radius: 6px; padding: 6px 10px; font-size: 12px; }
        .search-field input:focus { outline: none; border-color: rgba(0,212,170,0.4); }

        /* Thread styles */
        .mail-thread-item { border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
        .mail-thread-header { display: flex; gap: 12px; padding: 12px 16px; cursor: pointer; align-items: flex-start; }
        .mail-thread-header:hover { background: rgba(255,255,255,0.03); }
        .mail-thread-body { padding: 0 16px 16px; }
        .mail-thread-collapsed { display: none; }

        /* Mobile premium */
        @media (max-width: 768px) {
            .mail-item { padding: 10px 12px; }
            .mail-avatar { width: 32px; height: 32px; font-size: 11px; }
            .mail-item-row1 .mail-item-from { font-size: 12px; }
            .mail-item-subject { font-size: 12px; }
            .mail-item-preview { display: none; }
            .reading-header-area { padding: 14px 16px 10px; }
            .reading-subject { font-size: 16px; }
            .reading-actions-bar { padding: 8px 12px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
            .btn-mail-action { padding: 5px 8px; font-size: 11px; }
            .reading-body-area { padding: 16px; }
            .search-advanced-grid { grid-template-columns: 1fr; }
            .autocomplete-dropdown { left: 8px !important; right: 8px !important; width: auto !important; }
        }

        
/* === PHASE 4 ADV: Labels, Rules, Notifications === */
.label-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;flex-shrink:0;vertical-align:middle}
.label-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;cursor:default;transition:opacity .15s;margin:2px}
.label-pill .label-x{margin-left:2px;opacity:.6;font-size:10px;cursor:pointer;padding:0 2px}
.label-pill .label-x:hover{opacity:1}
.labels-dropdown{position:absolute;right:0;top:calc(100% + 4px);background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px;z-index:300;min-width:230px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.labels-dropdown .lbl-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:13px;color:#e2e8f0}
.labels-dropdown .lbl-item:hover{background:rgba(255,255,255,.06)}
.labels-dropdown .lbl-create{border-top:1px solid rgba(255,255,255,.08);padding-top:8px;margin-top:4px}
.lbl-color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:6px}
.lbl-color-sw{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .1s}
.lbl-color-sw.sel,.lbl-color-sw:hover{border-color:#fff}
.sidebar-labels-section{padding:4px 0 8px}
.sidebar-labels-hdr{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.35)}
.sidebar-label-row{display:flex;align-items:center;gap:8px;padding:6px 16px 6px 20px;cursor:pointer;border-radius:6px;margin:1px 8px;transition:background .1s;font-size:13px;color:rgba(255,255,255,.75)}
.sidebar-label-row:hover{background:rgba(255,255,255,.05)}
.sidebar-label-row.active{background:rgba(0,212,170,.1);color:#e2e8f0}
.mail-item-labels{display:flex;gap:3px;margin-top:3px;flex-wrap:wrap}
.msg-labels-area{display:flex;flex-wrap:wrap;gap:4px;padding:0 24px 8px;min-height:28px;align-items:center}
.notif-toast{position:fixed;bottom:80px;right:16px;background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 16px 12px 12px;max-width:300px;z-index:9999;cursor:pointer;animation:toastIn .3s ease;box-shadow:0 8px 24px rgba(0,0,0,.5)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.notif-toast-from{font-size:13px;font-weight:600;color:#e2e8f0;padding-right:16px}
.notif-toast-subj{font-size:12px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.notif-close{position:absolute;top:8px;right:10px;opacity:.5;cursor:pointer;font-size:16px;line-height:1}
.notif-close:hover{opacity:1}
.toggle-sw{width:36px;height:20px;background:rgba(255,255,255,.15);border-radius:10px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.toggle-sw.on{background:#00d4aa}
.toggle-sw::after{content:'';position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:2px;left:2px;transition:left .2s}
.toggle-sw.on::after{left:18px}
.rules-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;align-items:center;justify-content:center}
.rules-modal.open{display:flex}
.rules-box{background:#0f1729;border:1px solid rgba(255,255,255,.1);border-radius:16px;width:min(700px,96vw);max-height:85vh;overflow-y:auto;padding:24px}
.rules-box h2{font-size:18px;font-weight:700;color:#e2e8f0;margin:0 0 16px}
.rule-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.rule-item-name{flex:1;font-size:13px;font-weight:600;color:#e2e8f0}
.rule-item-desc{font-size:11px;color:#64748b;margin-top:2px}
.rule-form{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:16px;margin-top:12px}
.rule-cond-row,.rule-action-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.rule-cond-row select,.rule-cond-row input,.rule-action-row select,.rule-action-row input{background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 10px;color:#e2e8f0;font-size:12px}
.rule-cond-row select:focus,.rule-action-row select:focus{outline:1px solid #00d4aa}
.btn-rule-add{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:5px 12px;color:#94a3b8;font-size:12px;cursor:pointer}
.btn-rule-add:hover{background:rgba(255,255,255,.12);color:#e2e8f0}
.p4-sidebar-btns{padding:4px 12px 8px;display:flex;gap:6px}
.p4-sidebar-btn{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:7px;color:#94a3b8;font-size:11px;cursor:pointer;transition:all .15s;text-align:center}
.p4-sidebar-btn:hover{background:rgba(255,255,255,.1);color:#e2e8f0}
@media(max-width:600px){.rules-box{padding:16px}.rule-cond-row,.rule-action-row{flex-direction:column}.notif-toast{bottom:70px;right:8px;left:8px;max-width:none}}

        
/* === PHASE 5 FINAL: DENSITY + SHORTCUTS + DRAG === */

/* Density */
.mail-list-wrap { --eh: 72px; --eas: 36px; --ep: 10px 16px 10px 12px; --efs: 13px; --epl: 1; }
.mail-list-wrap.density-compact { --eh: 48px; --eas: 28px; --ep: 6px 12px; --efs: 12px; --epl: 0; }
.mail-list-wrap.density-comfortable { --eh: 96px; --eas: 44px; --ep: 14px 20px 14px 16px; --efs: 14px; --epl: 2; }
.density-selector { display:flex; gap:4px; align-items:center; }
.density-btn { background:none; border:none; padding:4px; border-radius:4px; cursor:pointer; color:rgba(255,255,255,.4); transition:color .15s; }
.density-btn:hover { color:rgba(255,255,255,.7); }
.density-btn.active { color:#00d4aa; }
.density-btn svg { display:block; }
/* Email row density override */
.mail-list-wrap .mail-item { min-height:var(--eh); padding:var(--ep); }
.mail-list-wrap .mail-item-avatar { width:var(--eas) !important; height:var(--eas) !important; font-size:calc(var(--eas) * 0.4) !important; }
.mail-list-wrap .mail-item-preview { -webkit-line-clamp:var(--epl); }
.density-compact .mail-item-preview { display:none !important; }
.density-compact .mail-item-icons { display:none; }

/* Keyboard shortcuts help modal */
.kbd-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:700; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.kbd-modal.open { display:flex; }
.kbd-box { background:#0f1729; border:1px solid rgba(255,255,255,.12); border-radius:16px; width:min(680px,96vw); max-height:85vh; overflow-y:auto; padding:28px; }
.kbd-box h2 { font-size:18px; font-weight:700; color:#e2e8f0; margin:0 0 20px; display:flex; align-items:center; gap:10px; }
.kbd-section { margin-bottom:20px; }
.kbd-section h3 { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#00d4aa; margin:0 0 10px; }
.kbd-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.kbd-row { display:flex; align-items:center; gap:12px; padding:5px 8px; border-radius:6px; transition:background .1s; }
.kbd-row:hover { background:rgba(255,255,255,.04); }
.kbd-key { display:inline-flex; align-items:center; gap:3px; flex-shrink:0; }
.kbd-key kbd { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:5px; padding:2px 7px; font-size:11px; font-family:monospace; color:#e2e8f0; min-width:22px; text-align:center; line-height:1.5; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.kbd-desc { font-size:12px; color:#94a3b8; flex:1; }
@media(max-width:600px){ .kbd-grid{grid-template-columns:1fr} .kbd-box{padding:16px} }

/* Drag & Drop */
.mail-item.dragging { opacity:.4; cursor:grabbing !important; }
.mail-item[draggable="true"] { cursor:grab; }
.mail-folder-item.drag-over { background:rgba(0,212,170,.15) !important; border:1px dashed #00d4aa !important; border-radius:6px; }
.drag-ghost { position:fixed; top:-200px; left:-200px; background:#1e293b; border:1px solid rgba(0,212,170,.5); border-radius:8px; padding:8px 14px; font-size:13px; color:#e2e8f0; pointer-events:none; z-index:9999; white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; box-shadow:0 4px 16px rgba(0,0,0,.4); }
.composer-drop-overlay { display:none; position:absolute; inset:0; background:rgba(0,212,170,.08); border:2px dashed #00d4aa; border-radius:12px; z-index:50; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:#00d4aa; font-size:14px; font-weight:600; pointer-events:none; }
.composer-drop-overlay.visible { display:flex; }
.composer-drop-overlay svg { opacity:.8; }

/* Print styles */
@media print {
  body > *:not(#mail-print-frame) { display:none !important; }
  #mail-print-frame { display:block !important; }
}

/* Export/Print buttons */
.btn-export-eml, .btn-print { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:7px; padding:5px 10px; color:#94a3b8; font-size:12px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .15s; }
.btn-export-eml:hover, .btn-print:hover { background:rgba(255,255,255,.1); color:#e2e8f0; }

/* Shortcut flash feedback */
@keyframes kbdFlash { 0%{background:rgba(0,212,170,.2)} 100%{background:transparent} }
.kbd-flash { animation:kbdFlash .4s ease; }

/* === END PHASE 5 FINAL CSS === */


/* ========== Phase 6: Pro Features ========== */

/* Undo Send Toast */
.undo-send-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:#1e293b; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 20px; z-index:10000; display:flex; align-items:center; gap:12px; min-width:280px; box-shadow:0 4px 24px rgba(0,0,0,.4); animation: p6SlideUp .3s ease; }
@keyframes p6SlideUp { from { transform: translateX(-50%) translateY(20px); opacity:0; } to { transform: translateX(-50%) translateY(0); opacity:1; } }
.undo-send-bar { height:4px; background:rgba(255,255,255,.1); border-radius:2px; flex:1; overflow:hidden; }
.undo-send-bar-fill { height:100%; background:#00d4aa; border-radius:2px; }
.undo-send-btn { background:#00d4aa; color:#000; border:none; padding:6px 14px; border-radius:6px; cursor:pointer; font-weight:600; font-size:13px; white-space:nowrap; transition: background .15s; }
.undo-send-btn:hover { background:#00eabb; }

/* Pin */
.pin-btn { background:none; border:none; cursor:pointer; color:rgba(255,255,255,.25); padding:2px; opacity:0; transition:opacity .15s,color .15s,transform .15s; font-size:12px; line-height:1; }
.pin-btn.pinned { color:#00d4aa; opacity:1; transform:rotate(45deg); }
.mail-item:hover .pin-btn { opacity:1; }
.pin-divider { padding:6px 16px; font-size:11px; color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid rgba(255,255,255,.06); }

/* Active Filters Bar */
.p6-active-filters-bar { display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.15); align-items:center; }
.p6-filter-tag { display:inline-flex; align-items:center; gap:4px; background:rgba(0,212,170,.12); border:1px solid rgba(0,212,170,.25); color:#00d4aa; padding:3px 10px; border-radius:12px; font-size:12px; }
.p6-filter-tag button { background:none; border:none; color:#00d4aa; cursor:pointer; padding:0; font-size:14px; line-height:1; }

/* Search Dropdown */
.p6-search-dropdown { position:absolute; top:100%; left:0; right:0; background:#1e293b; border:1px solid rgba(255,255,255,.12); border-radius:8px; z-index:100; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.4); max-height:340px; overflow-y:auto; margin-top:4px; }
.p6-search-section-title { padding:8px 12px 4px; font-size:11px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.5px; }
.p6-search-suggest-item { padding:8px 12px; cursor:pointer; font-size:13px; color:#e2e8f0; display:flex; align-items:center; gap:6px; }
.p6-search-suggest-item:hover { background:rgba(255,255,255,.06); }

/* Templates */
.p6-templates-dropdown { position:absolute; background:#1e293b; border:1px solid rgba(255,255,255,.12); border-radius:8px; z-index:200; box-shadow:0 4px 24px rgba(0,0,0,.4); min-width:220px; max-height:300px; overflow-y:auto; }
.p6-template-item { padding:10px 14px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06); transition: background .12s; }
.p6-template-item:hover { background:rgba(255,255,255,.06); }
.p6-template-name { font-size:13px; color:#e2e8f0; font-weight:500; }
.p6-template-subject { font-size:11px; color:rgba(255,255,255,.4); margin-top:2px; }

/* Date Filter Popover */
.p6-date-popover { position:absolute; background:#1e293b; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:16px; z-index:200; box-shadow:0 4px 24px rgba(0,0,0,.4); min-width:220px; }
.p6-date-quick-btn { display:block; width:100%; text-align:left; background:none; border:none; color:#e2e8f0; padding:8px 12px; border-radius:6px; cursor:pointer; font-size:13px; transition: background .12s; }
.p6-date-quick-btn:hover { background:rgba(255,255,255,.08); }

/* Settings section for Undo delay */
.p6-settings-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.p6-settings-label { font-size:13px; color:#e2e8f0; }
.p6-settings-sublabel { font-size:11px; color:rgba(255,255,255,.4); margin-top:2px; }
.p6-settings-control select, .p6-settings-control input[type="number"] { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:#e2e8f0; padding:4px 8px; border-radius:6px; font-size:13px; }

/* === Phase 6 EXTRA: Scheduled, Saved Searches, AutoReply, Filter by sender === */
.p6-scheduled-badge { font-size:10px; background:rgba(59,130,246,.2); color:#60a5fa; padding:1px 6px; border-radius:8px; margin-left:4px; }
.p6-saved-search-item { display:flex; align-items:center; gap:8px; padding:6px 16px 6px 20px; cursor:pointer; border-radius:6px; margin:1px 8px; transition:background .1s; font-size:12px; color:rgba(255,255,255,.6); }
.p6-saved-search-item:hover { background:rgba(255,255,255,.05); color:#e2e8f0; }
.p6-saved-search-item .p6-ss-del { opacity:0; background:none; border:none; color:rgba(255,255,255,.3); cursor:pointer; font-size:14px; padding:0 2px; transition:opacity .15s; }
.p6-saved-search-item:hover .p6-ss-del { opacity:1; }
.p6-ss-del:hover { color:#ef4444 !important; }
.p6-autoreply-ind { display:inline-flex; align-items:center; gap:4px; background:rgba(251,191,36,.15); color:#fbbf24; font-size:11px; padding:2px 8px; border-radius:10px; margin-left:4px; }
.p6-autoreply-modal { background:#0f1729; border:1px solid rgba(255,255,255,.12); border-radius:16px; width:min(560px,96vw); max-height:80vh; overflow-y:auto; padding:24px; }
.p6-schedule-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid rgba(255,255,255,.06); margin-top:4px; }
.p6-schedule-row input[type="datetime-local"] { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:#e2e8f0; padding:4px 8px; border-radius:6px; font-size:12px; }
.p6-sender-menu { position:absolute; background:#1e293b; border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:4px; z-index:300; box-shadow:0 8px 24px rgba(0,0,0,.4); min-width:180px; }
.p6-sender-menu-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:12px; color:#e2e8f0; transition:background .1s; }
.p6-sender-menu-item:hover { background:rgba(255,255,255,.06); }


        /* === MEJORA 1: Composer draggable + minimize + maximize === */
        #mail-composer {
            position: absolute !important;
            bottom: 20px;
            right: 20px;
            width: 640px;
            max-width: calc(100vw - 40px);
            max-height: calc(100vh - 100px);
            resize: both;
            overflow: hidden;
        }
        #mail-composer.minimized {
            height: 52px !important;
            min-height: 52px !important;
            resize: none;
            overflow: hidden;
        }
        #mail-composer.minimized .composer-body,
        #mail-composer.minimized .composer-footer,
        #mail-composer.minimized .composer-toolbar {
            display: none !important;
        }
        #mail-composer.maximized {
            top: 74px !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            height: calc(100vh - 74px) !important;
            max-height: calc(100vh - 74px) !important;
            border-radius: 0 !important;
            resize: none;
        }
        .composer-header {
            cursor: move;
            user-select: none;
        }
        .composer-ctrl-btn-maximize {
            background: transparent;
            border: none;
            color: var(--text-secondary, #94a3b8);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            font-size: 14px;
            transition: color 0.15s;
            line-height: 1;
        }
        .composer-ctrl-btn-maximize:hover { color: var(--text-primary, #e2e8f0); }

        /* === MEJORA 3: Elegant empty state === */
        .mail-reading-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            height: 100%;
            gap: 16px;
            color: var(--text-secondary, #94a3b8);
            text-align: center;
            padding: 40px;
        }
        .mail-reading-empty-icon {
            font-size: 72px;
            opacity: 0.25;
            line-height: 1;
        }
        .mail-reading-empty-title {
            font-size: 18px;
            font-weight: 500;
            color: var(--text-primary, #e2e8f0);
            opacity: 0.6;
        }
        .mail-reading-empty-subtitle {
            font-size: 14px;
            color: var(--text-secondary, #64748b);
            opacity: 0.5;
        }

        /* === MEJORA 4: Enhanced visual hierarchy for email list === */
        .mail-item.unread {
            border-left: 3px solid var(--mail-accent, #00D4AA);
            background: rgba(0, 212, 170, 0.04);
        }
        .mail-item.unread .mail-item-from {
            font-weight: 700;
            color: var(--text-primary, #e2e8f0);
        }
        .mail-item.unread .mail-item-subject {
            font-weight: 600;
            color: var(--text-primary, #e2e8f0);
        }
        .mail-item:not(.unread) .mail-item-from {
            font-weight: 400;
            color: rgba(255,255,255,0.55);
        }
        .mail-item:not(.unread) .mail-item-subject {
            font-weight: 400;
            color: rgba(255,255,255,0.45);
        }
        .mail-item.selected {
            background: var(--mail-selected-bg, rgba(0, 212, 170, 0.12)) !important;
        }

        /* === MEJORA 6: Composer toolbar groups === */
        .composer-toolbar {
            display: flex;
            gap: 4px;
            padding: 6px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            flex-wrap: wrap;
            align-items: center;
        }
        .composer-tool-group {
            display: inline-flex;
            gap: 2px;
            padding-right: 8px;
            border-right: 1px solid rgba(255,255,255,0.08);
        }
        .composer-tool-group:last-child {
            border-right: none;
            padding-right: 0;
        }
        .composer-content {
            min-height: 200px;
        }

        @media (max-width: 768px) {
            #mail-composer.maximized {
                top: 56px !important;
                height: calc(100vh - 56px) !important;
                max-height: calc(100vh - 56px) !important;
            }
        }

/* === IA SEMANTIC SEARCH === */
.mail-search-wrapper { display: flex; gap: 6px; align-items: center; }
#searchInput { flex: 1; min-width: 0; }
.mail-ia-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 6px; border: 1px solid #334155;
    background: transparent; color: #64748b; font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all .2s; white-space: nowrap; line-height: 1;
    height: 32px;
}
.mail-ia-btn:hover { border-color: #00D4AA; color: #00D4AA; }
.mail-ia-btn.active { background: rgba(0,212,170,.15); border-color: #00D4AA; color: #00D4AA; }
.mail-ia-badge {
    display: inline-block; padding: 1px 5px; border-radius: 10px; font-size: 10px;
    font-weight: 700; background: rgba(0,212,170,.2); color: #00D4AA;
    margin-left: auto; flex-shrink: 0;
}
.mail-ia-header {
    padding: 8px 12px 6px; font-size: 11px; color: #94a3b8; font-style: italic;
    border-bottom: 1px solid #1e293b; background: rgba(0,212,170,.04);
}
.mail-item-ia .mail-ia-badge { font-size: 10px; color: #00D4AA; }


/* ── AI Summary Block ─────────────────────────────────────────── */
.ai-summary-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin: 0 0 2px 0;
  background: rgba(0,212,170,.07);
  border-left: 3px solid #00D4AA;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.6;
  color: #cbd5e1;
  animation: aiSummaryFadeIn .35s ease;
  position: relative;
}
.ai-summary-block.loading {
  color: #64748b;
  font-style: italic;
}
.ai-summary-block-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: #00D4AA;
  opacity: .85;
}
.ai-summary-text { flex: 1; min-width: 0; }
.ai-summary-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #00D4AA;
  margin-bottom: 4px;
}
.ai-summary-cached-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 9px;
  color: rgba(0,212,170,.5);
  font-weight: 600;
  letter-spacing: .04em;
}
.btn-mail-action.ai-btn {
  color: #00D4AA;
  background: rgba(0,212,170,.10);
  border-color: rgba(0,212,170,.40);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-mail-action.ai-btn:hover {
  background: rgba(0,212,170,.20);
  border-color: #00D4AA;
  color: #00D4AA;
}
.btn-mail-action.ai-btn.loading {
  opacity: .65;
  cursor: wait;
}
.btn-mail-action.ai-btn.done {
  color: #00D4AA;
  border-color: rgba(0,212,170,.50);
  background: rgba(0,212,170,.08);
}
@keyframes aiSummaryFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Cursor blink for streaming */
.ai-summary-streaming::after {
  content: '▊';
  color: #00D4AA;
  animation: aiCursorBlink .8s steps(2) infinite;
  font-size: 11px;
  margin-left: 1px;
}
@keyframes aiCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ============================================
   MOBILE IMPROVEMENTS v1.0 — 2026-03-22
   Fixes: overlap hamburger/toggle, header spacing,
   bottom nav visibility, reading pane mobile UX
   ============================================ */

@media (max-width: 768px) {
    /* Botones de acción — mejorar scroll y tamaño en móvil */
    .reading-actions-bar {
        gap: 4px !important;
        padding: 8px 12px !important;
        -webkit-overflow-scrolling: touch;
    }
    .reading-actions-bar::after {
        content: '';
        flex-shrink: 0;
        width: 12px;
    }
    .btn-mail-action {
        padding: 6px 10px !important;
        font-size: 11.5px !important;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    /* FIX 1: Hide sidebar toggle button — hamburger already opens Lohmia sidebar,
       and bottom nav "Carpetas" opens mail folder sidebar. Having both causes overlap. */
    #btnSidebarToggle { display: none !important; }

    /* FIX 2: Header left padding to avoid overlap with hamburger button (44px + 10px left + gap) */
    .mail-list-header {
        padding-left: 68px !important;
        min-height: 56px;
        align-items: center;
    }

    /* FIX 3: Hamburger button refined for mail — ensure always on top and not covering content */
    .hamburger-menu {
        top: 10px !important;
        left: 10px !important;
        z-index: 998 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: rgba(15,23,42,0.95) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }

    /* FIX 4: Bottom nav — increase icon/text visibility */
    .mail-bottom-nav {
        background: var(--bg-secondary, #1e293b) !important;
        border-top: 1px solid rgba(0,212,170,0.15) !important;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.3) !important;
    }
    .mail-nav-item {
        gap: 4px !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        min-height: 56px !important;
    }
    .mail-nav-item svg {
        width: 24px !important;
        height: 24px !important;
    }
    .mail-nav-item.active {
        color: #00D4AA !important;
        position: relative !important;
    }
    .mail-nav-item.active::after {
        content: '';
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        border-radius: 2px;
        background: #00D4AA;
    }

    /* FIX 5: FAB — ensure visible above bottom nav */
    .mail-fab {
        bottom: 80px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        box-shadow: 0 4px 20px rgba(0,212,170,0.35), 0 2px 8px rgba(0,0,0,0.4) !important;
    }

    /* FIX 6: Reading pane — full screen with top bar for back button */
    #mail-reading-pane.mobile-open {
        top: 0 !important;
        z-index: 850 !important;
    }
    .btn-back-list {
        padding: 12px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #00D4AA !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        min-height: 48px !important;
        background: var(--bg-primary, #0f172a) !important;
    }

    /* FIX 7: Search bar — full row with proper sizing */
    .mail-list-search {
        padding: 8px 12px !important;
    }
    .mail-search-wrapper {
        gap: 8px !important;
    }
    .mail-ia-btn {
        min-width: 52px !important;
        padding: 6px 8px !important;
        height: 36px !important;
    }
    #searchInput {
        height: 36px !important;
        font-size: 14px !important;
    }

    /* FIX 8: Filter buttons — scrollable and bigger */
    .mail-list-filters {
        padding: 6px 12px !important;
        gap: 6px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .mail-filter-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-height: 32px !important;
    }

    /* FIX 9: Email items — bigger touch targets */
    .mail-item {
        padding: 12px 14px 12px 12px !important;
        min-height: 64px !important;
    }
    .mail-item-from {
        font-size: 14px !important;
    }
    .mail-item-subject {
        font-size: 13px !important;
    }

    /* FIX 10: Reading pane actions — horizontal scroll with larger buttons */
    .mail-reading-actions {
        padding: 10px 12px !important;
        gap: 8px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .btn-mail-action {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 40px !important;
        border-radius: 8px !important;
    }

    /* FIX 11: Composer — full width, proper z-index */
    #mail-composer.open {
        z-index: 2000 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-height: 90vh !important;
    }

    /* FIX 12: Mail sidebar (folders) overlay shadow */
    #mail-sidebar.mobile-open {
        box-shadow: 4px 0 20px rgba(0,0,0,0.4) !important;
    }

    /* FIX 13: Empty state centered */
    .mail-list-empty {
        padding: 40px 24px !important;
    }
    .mail-list-empty p {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    .mail-list-empty .btn-primary {
        padding: 12px 24px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    /* FIX 14: AI summary responsive */
    .ai-summary-block {
        padding: 10px 12px !important;
        font-size: 12.5px !important;
    }

    /* FIX 15: Toast above bottom nav */
    .toast-container {
        bottom: 80px !important;
    }
}

/* Small phones (<400px) */
@media (max-width: 400px) {
    .mail-list-header {
        padding-left: 60px !important;
    }
    .mail-list-title {
        font-size: 14px !important;
    }
    .mail-nav-item {
        font-size: 10px !important;
    }
    .mail-ia-btn {
        min-width: 42px !important;
        font-size: 10px !important;
    }
}

    /* ===== LOHMIA VISUAL SYSTEM — Palette Unification (2026-03-22) =====
     * Aligns mail.html palette with index.html:
     * - Body background: matches index.html gradient
     * - Primary accent: #00D4AA (teal) → #4A90E2 (blue)
     * - Brand primary: #2C5F7F
     * - Font: adds Roboto to stack
     * Layout/functionality untouched.
     * ================================================================ */

    /* 1. Body background — match index.html exactly */
    #mail-app {
        background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%) !important;
        min-height: 100vh;
    }
    body {
        background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%) !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    }

    /* 2. CSS variable overrides — replace teal with blue */
    :root {
        --mail-accent: #4A90E2 !important;
        --mail-accent-hover: #357ABD !important;
        --mail-unread-bg: rgba(74, 144, 226, 0.06) !important;
        --mail-selected-bg: rgba(74, 144, 226, 0.14) !important;
    }

    /* 3. Compose button — match index.html CTA gradient */
    .btn-compose {
        background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important;
        color: #fff !important;
    }
    .btn-compose:hover {
        background: linear-gradient(135deg, #5BA3F5 0%, #4A90E2 100%) !important;
    }

    /* 4. Active/selected states — replace teal */
    .mail-folder-item.active {
        background: rgba(74, 144, 226, 0.14) !important;
        color: #4A90E2 !important;
    }
    .mail-folder-item.active .mail-folder-icon { color: #4A90E2 !important; }
    .mail-folder-badge {
        background: #4A90E2 !important;
        color: #fff !important;
    }

    /* 5. Search/filter active state */
    .mail-filter-btn.active {
        background: #4A90E2 !important;
        color: #fff !important;
        border-color: #4A90E2 !important;
    }
    .mail-list-search input:focus { outline-color: #4A90E2 !important; }
    .account-selector:focus { outline-color: #4A90E2 !important; }

    /* 6. Unread dot / avatar accent */
    .mail-unread-dot { background: #4A90E2 !important; }
    .mail-item-avatar { background: rgba(74, 144, 226, 0.2) !important; color: #4A90E2 !important; }

    /* 7. Keyboard shortcuts modal heading */
    .kbd-section h3 { color: #4A90E2 !important; }

    /* 8. Drag-over folder highlight */
    .mail-folder-item.drag-over {
        background: rgba(74, 144, 226, 0.15) !important;
        border-color: #4A90E2 !important;
    }
    .drag-ghost { border-color: rgba(74, 144, 226, 0.5) !important; }

    /* 9. Composer header accent */
    .composer-header {
        background: linear-gradient(135deg, rgba(74,144,226,0.15) 0%, rgba(74,144,226,0.08) 100%) !important;
    }

    /* 10. Undo send bar / pin / p6 tag — replace teal */
    .undo-send-bar-fill { background: #4A90E2 !important; }
    .undo-send-btn { background: #4A90E2 !important; color: #fff !important; }
    .undo-send-btn:hover { background: #357ABD !important; }
    .pin-btn.pinned { color: #4A90E2 !important; }
    .p6-filter-tag {
        background: rgba(74,144,226,0.12) !important;
        border-color: rgba(74,144,226,0.25) !important;
        color: #4A90E2 !important;
    }
    .p6-filter-tag button { color: #4A90E2 !important; }

    /* 11. AI button — keep distinct teal identity for AI features */
    .mail-ia-btn, .mail-ia-badge, .mail-ia-header, .mail-item-ia {
        /* Keep teal for AI/semantic features — matches Lohmia AI color */
    }

    /* 12. Label/phase 4 accent — folders active color */
    #mail-sidebar .mail-folder-item[data-folder].active { color: #4A90E2 !important; }

    /* 13. Btn-manage-accounts border accent */
    .btn-manage-accounts:hover {
        border-color: #4A90E2 !important;
        color: #4A90E2 !important;
    }

    /* 14. Notifications: email notif highlight */
    #notifEmails { background: rgba(74,144,226,0.12) !important; border-radius: 8px; }
    #notifEmails .notification-label { color: #4A90E2 !important; font-weight: 600 !important; }

    /* 15. Reading actions bar — action button hover accent */
    .btn-mail-action:hover, .reading-action-btn:hover {
        background: rgba(74,144,226,0.12) !important;
        border-color: rgba(74,144,226,0.3) !important;
        color: #4A90E2 !important;
    }

    /* 16. Sidebar panels bg — match index sidebar */
    #mail-sidebar {
        background: rgba(13, 31, 60, 0.85) !important;
        backdrop-filter: blur(12px);
        border-right: 1px solid rgba(74,144,226,0.12) !important;
    }

    /* 17. Selected email item */
    .mail-item.selected {
        background: rgba(74,144,226,0.10) !important;
        border-left: 3px solid #4A90E2 !important;
    }
    .mail-item.unread { background: rgba(74,144,226,0.05) !important; }

    /* 18. Scrollbar accent */
    ::-webkit-scrollbar-thumb { background: rgba(74,144,226,0.3) !important; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(74,144,226,0.5) !important; }


    /* Send button in composer */
    .btn-send-composer {
        background: linear-gradient(135deg, #4A90E2, #357ABD) !important;
        color: #fff !important;
    }
    .btn-send-composer:hover { background: linear-gradient(135deg, #5BA3F5, #4A90E2) !important; }

    /* Recipient chips */
    .recipient-chip {
        background: rgba(74,144,226,0.12) !important;
        border-color: rgba(74,144,226,0.3) !important;
        color: #4A90E2 !important;
    }

    /* Primary mail action */
    .btn-mail-action.primary {
        background: rgba(74,144,226,0.12) !important;
        border-color: rgba(74,144,226,0.3) !important;
        color: #4A90E2 !important;
    }

    /* Manage accounts hover */
    .btn-manage-accounts:hover {
        border-color: rgba(74,144,226,0.3) !important;
        color: #4A90E2 !important;
        background: rgba(74,144,226,0.05) !important;
    }

    /* ===== ADDITIONAL ACCENT OVERRIDES (complete teal→blue) ===== */

    /* Notification SVG strokes */
    #notifEmails .notification-icon svg { stroke: #4A90E2 !important; }
    #notifEmails .notification-label { color: #4A90E2 !important; font-weight: 600 !important; }

    /* Active folder item before-element */
    .mail-folder-item.active { background: rgba(74,144,226,0.12) !important; color: #4A90E2 !important; font-weight: 600; }
    .mail-folder-item.active::before { background: #4A90E2 !important; }

    /* Drag over */
    .mail-folder-item.drag-over { background: rgba(74,144,226,.15) !important; border-color: #4A90E2 !important; }

    /* Mobile nav active */
    .mail-nav-item.active { color: #4A90E2 !important; }
    .mail-nav-item.active::after { background: #4A90E2 !important; }

    /* Back button mobile */
    .btn-back-list { color: #4A90E2 !important; }

    /* FAB mobile */
    .mail-fab { background: #4A90E2 !important; color: #fff !important;
                box-shadow: 0 4px 20px rgba(74,144,226,0.35), 0 2px 8px rgba(0,0,0,0.4) !important; }

    /* Focus outline */
    button:focus-visible { outline-color: #4A90E2 !important; }
    input:focus-visible { outline-color: #4A90E2 !important; }
    .mail-folder-item:focus-visible { outline-color: #4A90E2 !important; }

    /* Avatars */
    .avatar-s, .avatar-t, .avatar-default {
        background: rgba(74,144,226,0.2) !important;
        color: #4A90E2 !important;
    }

    /* Unread badge */
    .mail-unread-badge { background: #4A90E2 !important; color: #fff !important; }

    /* Unread border-left */
    .mail-item.unread { border-left-color: #4A90E2 !important; }

    /* Active folder sidebar border */
    #mail-sidebar .mail-folder-item.active::before,
    .mail-folder-item.active::before { background: #4A90E2 !important; }

    /* CSS variable override (no !important needed — :root specificity) */
    :root {
        --mail-accent: #4A90E2;
        --mail-accent-hover: #357ABD;
    }

    /* ===== PASS 2: Avatar, Sidebar & Nav Bar Unification (2026-03-22) ===== */

    /* Avatares: mail-avatar (.mail-avatar inline bg from JS) → blue tones, white text */
    .mail-avatar {
        background: rgba(44, 95, 127, 0.75) !important;
        color: #fff !important;
    }
    .reading-avatar {
        background: rgba(44, 95, 127, 0.75) !important;
        color: #fff !important;
    }
    .mail-reading-avatar {
        background: rgba(74, 144, 226, 0.2) !important;
        color: #4A90E2 !important;
    }
    .autocomplete-avatar {
        background: rgba(44, 95, 127, 0.75) !important;
        color: #fff !important;
    }

    /* Avatar CSS classes — replace vivid per-letter colors with blue variations */
    .avatar-a, .avatar-b { background: rgba(74,144,226,0.25) !important; color: #4A90E2 !important; }
    .avatar-c, .avatar-d { background: rgba(30,136,168,0.25) !important; color: #1E88A8 !important; }
    .avatar-e, .avatar-f { background: rgba(44,95,127,0.3) !important; color: #7EC8E3 !important; }
    .avatar-g, .avatar-h { background: rgba(53,122,189,0.25) !important; color: #5BA3F5 !important; }
    .avatar-i, .avatar-j { background: rgba(2,119,189,0.25) !important; color: #4A90E2 !important; }
    .avatar-k, .avatar-l { background: rgba(21,101,192,0.25) !important; color: #5BA3F5 !important; }
    .avatar-m, .avatar-n { background: rgba(2,136,209,0.25) !important; color: #4A90E2 !important; }
    .avatar-o, .avatar-p { background: rgba(3,155,229,0.25) !important; color: #5BA3F5 !important; }
    .avatar-q, .avatar-r { background: rgba(33,96,184,0.25) !important; color: #4A90E2 !important; }
    .avatar-s, .avatar-t { background: rgba(74,144,226,0.2) !important; color: #4A90E2 !important; }
    .avatar-u, .avatar-v { background: rgba(44,95,127,0.3) !important; color: #7EC8E3 !important; }
    .avatar-w, .avatar-x, .avatar-y, .avatar-z { background: rgba(74,114,166,0.25) !important; color: #90B8E0 !important; }
    .avatar-default { background: rgba(74,144,226,0.2) !important; color: #4A90E2 !important; }

    /* Credit amount: teal → blue */
    .credit-amount { color: #4A90E2 !important; }
    .credit-item:hover svg path, .credit-item:hover svg circle { stroke: #4A90E2 !important; }

    /* Notification hover svg — teal Claudia accent */
    /* No change needed here */

    /* Mail sidebar — solid dark-navy matching chat sidebar exactly */
    #mail-sidebar {
        background: #0d1f3c !important;
        backdrop-filter: none !important;
        border-right: 1px solid rgba(255,255,255,0.07) !important;
    }

    /* Compose btn text always white (blue gradient bg) */
    .btn-compose { color: #fff !important; }

    /* Mail nav item active indicator */
    .mail-nav-item.active::after { background: #4A90E2 !important; }

    /* Reading pane — no blue tint bleeding through */
    #mail-reading-pane {
        background: rgba(13,31,60,0.95) !important;
    }


/* ── SPECIALTIES BAR (shared with index.html) ── */
#specialties-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 8px 6px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    gap: 2px;
    min-height: 56px;
    overflow: hidden;
    position: relative;
}
#specialties-bar.specialties-empty { justify-content: center; }
.specialty-empty-hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.28);
    text-align: center;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s;
    line-height: 1.4;
}
.specialty-empty-hint:hover { color: rgba(245, 158, 11, 0.7); }
.specialty-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 56px;
    cursor: pointer;
    padding: 5px 2px;
    border-radius: 8px;
    transition: background 0.15s, transform 0.15s;
    position: relative;
    user-select: none;
}
.specialty-slot:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); }
.specialty-slot.dragging { opacity: 0.4; transform: scale(0.95); }
.specialty-slot.drag-over { background: rgba(74,144,226,0.15); outline: 1px dashed rgba(74,144,226,0.5); }
.specialty-icon { font-size: 18px; line-height: 1; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.specialty-label { font-size: 9px; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; font-weight: 500; }
.specialty-slot:hover .specialty-label { color: rgba(255,255,255,0.9); }

/* ===== MARKET + SPECIALTIES SYSTEM - mail.html ===== */
.market-btn-fixed.market-active { background: rgba(255,255,255,0.08); }
.market-btn-fixed.market-active .notification-icon svg { stroke: #00D4AA; }
.market-btn-fixed.market-active .notification-label { color: rgba(255,255,255,0.9); }
#market-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; align-items: flex-start; justify-content: flex-start; }
#market-panel.market-open { display: flex; }
#market-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); cursor: pointer; }
#market-drawer { position: relative; z-index: 1; width: 320px; max-width: 92vw; height: 100%; background: linear-gradient(180deg, #0d1f3c 0%, #0a1629 100%); border-right: 1px solid rgba(255,255,255,0.08); box-shadow: 4px 0 32px rgba(0,0,0,0.6); display: flex; flex-direction: column; overflow: hidden; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); }
#market-panel.market-open #market-drawer { transform: translateX(0); }
#market-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
#market-header h2 { margin: 0; font-size: 18px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; }
#market-header h2 svg { stroke: #F59E0B; }
#market-close-btn { background: rgba(255,255,255,0.06); border: none; cursor: pointer; color: rgba(255,255,255,0.6); width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
#market-close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
#market-subtitle { padding: 10px 20px; font-size: 11px; color: rgba(255,255,255,0.4); flex-shrink: 0; }
#market-body { flex: 1; overflow-y: auto; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
#market-body::-webkit-scrollbar { width: 4px; }
#market-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.market-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 16px; transition: border-color 0.2s, background 0.2s; }
.market-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }
.market-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.market-card-icon { font-size: 28px; width: 44px; height: 44px; background: rgba(245,158,11,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.market-card.soon .market-card-icon { background: rgba(255,255,255,0.04); opacity: 0.5; }
.market-card-name { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 2px; }
.market-card.soon .market-card-name { color: rgba(255,255,255,0.4); }
.market-card-desc { font-size: 11px; color: rgba(255,255,255,0.5); margin: 0; line-height: 1.4; }
.market-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.market-tag { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.market-tag.tag-available { background: rgba(74,144,226,0.15); color: #4A90E2; }
.market-tag.tag-soon { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3); }
.market-install-btn { padding: 7px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; transition: background 0.15s, transform 0.1s; white-space: nowrap; }
.market-install-btn.btn-install { background: linear-gradient(135deg, #F59E0B, #D97706); color: #000; }
.market-install-btn.btn-install:hover { background: linear-gradient(135deg, #FBBF24, #F59E0B); transform: translateY(-1px); }
.market-install-btn.btn-installed { background: rgba(74,144,226,0.15); color: #4A90E2; border: 1px solid rgba(74,144,226,0.3); }
.market-install-btn.btn-installed:hover { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.3); }
.market-install-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; }
.market-slots-info { text-align: center; font-size: 11px; color: rgba(255,255,255,0.3); padding: 8px 0; flex-shrink: 0; }
@media (max-width: 768px) {
    #market-drawer { width: 100%; max-width: 100%; height: 85%; top: auto; bottom: 0; border-right: none; border-top: 1px solid rgba(255,255,255,0.08); border-radius: 16px 16px 0 0; transform: translateY(100%); }
    #market-panel.market-open #market-drawer { transform: translateY(0); }
    #market-panel { align-items: flex-end; }
}
/* ===== END MARKET + SPECIALTIES SYSTEM ===== */