/* ═══════════════════════════════════════════════════
           WEBMAIL — Gmail-Class CSS
           ═══════════════════════════════════════════════════ */

        :root {
            --wm-sidebar-w: 240px;
            --wm-header-h: 60px;
            --wm-border: #e0e0e0;
            --wm-bg: #f6f8fc;
            --wm-unread-bg: #f2f6fc;
            --wm-hover-bg: #f1f3f4;
            --wm-selected-bg: #d3e3fd;
            --wm-text-muted: #5f6368;
            --wm-primary: #0d6efd;
            --wm-primary-light: #e8f0fe;
            --wm-radius: 8px;
            --wm-shadow: 0 1px 3px rgba(0,0,0,0.08);
            --wm-transition: 0.2s cubic-bezier(0.4,0,0.2,1);
        }

        *, *::before, *::after { box-sizing: border-box; }

        .wm-login-brand-logo {
            width: 56px;
            height: 56px;
            margin-bottom: 0.75rem;
        }

        /* ── Layout ── */
        .wm-app {
            display: grid;
            grid-template-columns: [sidebar] var(--wm-sidebar-w) [main] 1fr;
            grid-template-rows: 1fr;
            height: calc(100vh - var(--wm-header-h));
            margin-top: var(--wm-header-h);
            overflow: hidden;
        }

        /* ═══════ SIDEBAR ═══════ */
        .wm-sidebar {
            background: var(--wm-bg);
            border-right: 1px solid var(--wm-border);
            padding: 0.75rem 0;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            transition: transform 0.3s ease;
        }
        .wm-sidebar .btn-compose {
            margin: 0 0.75rem 0.75rem;
            padding: 0.75rem 1.25rem;
            font-weight: 600;
            font-size: 0.9rem;
            border-radius: 24px;
            display: flex;
            align-items: center;
            gap: 0.85rem;
            justify-content: center;
            background: var(--wm-primary);
            color: #fff;
            border: none;
            box-shadow: 0 2px 6px rgba(13,110,253,0.3), 0 1px 2px rgba(0,0,0,0.1);
            transition: box-shadow 0.25s ease, background 0.25s ease, transform 0.2s ease;
            letter-spacing: 0.01em;
            position: relative;
            overflow: hidden;
        }
        .wm-sidebar .btn-compose::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 24px;
            background: transparent;
            transition: box-shadow 0.3s ease;
        }
        .wm-sidebar .btn-compose:hover {
            box-shadow: 0 4px 16px rgba(13,110,253,0.45), 0 2px 8px rgba(0,0,0,0.12);
            background: #0b5ed7;
            transform: translateY(-1px);
            animation: composePulse 1.5s ease-in-out infinite;
        }
        .wm-sidebar .btn-compose:hover::after {
            box-shadow: 0 0 0 6px rgba(13,110,253,0.15);
        }
        .wm-sidebar .btn-compose i {
            font-size: 1.4rem;
        }
        @keyframes composePulse {
            0%, 100% { box-shadow: 0 4px 16px rgba(13,110,253,0.45), 0 2px 8px rgba(0,0,0,0.12); }
            50% { box-shadow: 0 6px 24px rgba(13,110,253,0.55), 0 4px 12px rgba(0,0,0,0.15); }
        }
        .wm-mailbox-list {
            list-style: none;
            padding: 0;
            margin: 0;
            flex: 1;
            overflow-y: auto;
        }
        .wm-mailbox-list li {
            display: flex;
            align-items: center;
            position: relative;
        }
        .wm-mailbox-list li a {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 0.65rem;
            padding: 0.4rem 0.75rem 0.4rem 1.25rem;
            color: #202124;
            text-decoration: none;
            font-size: 0.875rem;
            border-radius: 0 20px 20px 0;
            margin-right: 0.5rem;
            position: relative;
            transition: background 0.12s;
        }
        .wm-mailbox-list li a:hover { background: var(--wm-hover-bg); }
        .wm-mailbox-list li a.active {
            background: var(--wm-selected-bg);
            font-weight: 600;
            color: #001d35;
        }
        .wm-mailbox-list li a .badge {
            margin-left: auto;
            font-size: 0.7rem;
            font-weight: 600;
            background: #5f6368;
            min-width: 20px;
            text-align: center;
            border-radius: 10px;
            padding: 1px 6px;
            line-height: 1.4;
        }
        .wm-mailbox-list li a.active .badge {
            background: var(--wm-primary);
        }
        .wm-mailbox-list li a .wm-icon {
            font-size: 1.15rem;
            width: 22px;
            text-align: center;
        }
        .wm-folder-delete {
            opacity: 0;
            border: none;
            background: none;
            color: #dc3545;
            cursor: pointer;
            padding: 0.2rem 0.4rem;
            font-size: 0.95rem;
            border-radius: 50%;
            transition: opacity 0.15s;
            margin-right: 0.3rem;
            flex-shrink: 0;
        }
        .wm-mailbox-list li:hover .wm-folder-delete { opacity: 1; }
        .wm-folder-delete:hover { background: #fce8e6; }
        .wm-folder-actions {
            border-top: 1px solid var(--wm-border);
            padding-top: 0.5rem;
            margin-top: 0.5rem;
        }
        .wm-new-folder-item {
            border-top: 1px solid var(--wm-border);
            margin-top: 0.25rem;
            padding-top: 0.25rem;
        }
        .wm-new-folder-item a {
            color: var(--wm-primary) !important;
            font-weight: 500;
        }
        /* ═══════ MAIN CONTENT ═══════ */
        .wm-content {
            display: flex;
            flex-direction: column;
            min-width: 0;
            background: #fff;
            overflow: hidden;
        }

        /* ── Toolbar ── */
        .wm-toolbar {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.5rem 1rem;
            border-bottom: 1px solid var(--wm-border);
            background: #fff;
            flex-shrink: 0;
            min-height: 48px;
            z-index: 5;
        }
        .wm-toolbar .wm-search {
            flex: 1;
            max-width: 500px;
            position: relative;
            margin-left: 0.5rem;
        }
        .wm-toolbar .wm-search input {
            border-radius: 20px;
            padding: 0.4rem 0.75rem 0.4rem 2.5rem;
            background: #eaf1fb;
            border: none;
            font-size: 0.875rem;
            transition: background var(--wm-transition), box-shadow var(--wm-transition);
            width: 100%;
        }
        .wm-toolbar .wm-search input:focus {
            background: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.15);
            outline: none;
        }
        .wm-toolbar .wm-search .search-icon {
            position: absolute;
            left: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--wm-text-muted);
            pointer-events: none;
            font-size: 1.1rem;
        }
        .wm-toolbar .btn-icon {
            border: none;
            background: none;
            color: #444746;
            padding: 0.45rem;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.15rem;
            transition: background 0.12s, color 0.12s;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
        }
        .wm-toolbar .btn-icon:hover { background: var(--wm-hover-bg); color: #202124; }
        .wm-toolbar .btn-icon:disabled { opacity: 0.3; cursor: default; }
        .wm-toolbar .btn-icon:disabled:hover { background: none; }

        /* ═══════ EMAIL LIST ═══════ */
        .wm-email-list {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .wm-email-list-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.3rem 1rem;
            border-bottom: 1px solid var(--wm-border);
            background: #f8fafd;
            font-size: 0.8rem;
            color: var(--wm-text-muted);
            position: sticky;
            top: 0;
            z-index: 4;
            min-height: 36px;
        }
        .wm-email-item {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            padding: 0.4rem 1rem;
            border-bottom: 1px solid #f1f3f4;
            cursor: pointer;
            font-size: 0.875rem;
            transition: background 0.1s, box-shadow 0.15s;
            position: relative;
            min-height: 42px;
        }
        .wm-email-item:hover {
            background: #f8f9fa;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
        }
        .wm-email-item.unread {
            background: var(--wm-unread-bg);
        }
        .wm-email-item.unread:hover { background: #eaf1fb; }

        /* Checkbox */
        .wm-item-check {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            align-self: stretch;
            justify-content: center;
            width: 32px;
            margin: -0.2rem -0.25rem;
            cursor: pointer;
        }
        .wm-item-check input {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--wm-primary);
        }
        .wm-email-list-header .wm-select-all-cell {
            min-height: 32px;
            margin-top: -0.2rem;
            margin-bottom: -0.2rem;
        }

        /* Star */
        .wm-item-star {
            flex-shrink: 0;
            width: 22px;
            text-align: center;
        }
        .wm-item-star i {
            color: #ccc;
            cursor: pointer;
            font-size: 1.1rem;
            transition: color 0.15s;
        }
        .wm-item-star i.starred { color: #f4b400; }
        .wm-item-star i:hover { color: #e0a800; }

        /* Unread dot */
        .wm-unread-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--wm-primary);
            flex-shrink: 0;
            opacity: 0;
            transition: opacity 0.15s;
        }
        .wm-email-item.unread .wm-unread-dot { opacity: 1; }

        /* Avatar */
        .wm-avatar-sm {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 600;
            font-size: 0.8rem;
            flex-shrink: 0;
            letter-spacing: 0.02em;
        }

        /* Content area */
        .wm-item-content {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .wm-item-from {
            width: 160px;
            flex-shrink: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 500;
            color: #202124;
        }
        .wm-email-item.unread .wm-item-from {
            font-weight: 700;
        }
        .wm-item-subject-wrap {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            overflow: hidden;
        }
        .wm-item-subject {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--wm-text-muted);
        }
        .wm-email-item.unread .wm-item-subject {
            color: #202124;
            font-weight: 500;
        }
        .wm-replied-icon {
            font-size: 1.05rem;
            color: #5f6368;
            background: #e8eaed;
            border-radius: 4px;
            padding: 1px 4px;
            vertical-align: middle;
            flex-shrink: 0;
            margin-right: 2px;
        }
        .wm-item-preview {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #959da8;
            font-size: 0.82rem;
            flex: 1;
            min-width: 0;
        }
        .wm-item-date {
            flex-shrink: 0;
            font-size: 0.78rem;
            color: var(--wm-text-muted);
            white-space: nowrap;
            margin-left: auto;
            min-width: 55px;
            text-align: right;
        }
        .wm-item-paperclip {
            color: var(--wm-text-muted);
            font-size: 0.85rem;
            flex-shrink: 0;
        }

        /* Hover actions */
        .wm-item-actions {
            display: flex;
            align-items: center;
            gap: 0.15rem;
            opacity: 0;
            transition: opacity 0.15s;
            flex-shrink: 0;
            padding-left: 0.5rem;
        }
        .wm-email-item:hover .wm-item-actions { opacity: 1; }
        .wm-act-btn {
            border: none;
            background: none;
            color: #5f6368;
            cursor: pointer;
            padding: 0.3rem;
            border-radius: 50%;
            font-size: 1.05rem;
            transition: background 0.12s, color 0.12s;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
        }
        .wm-act-btn:hover { background: #e8eaed; color: #202124; }
        .wm-act-btn.wm-act-danger:hover { background: #fce8e6; color: #d93025; }

        /* Pagination */
        .wm-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem;
        }
        .wm-pagination .btn-load-more {
            border: 1px solid #dadce0;
            background: #fff;
            color: var(--wm-primary);
            cursor: pointer;
            padding: 0.5rem 1.5rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            transition: background var(--wm-transition);
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .wm-pagination .btn-load-more:hover { background: #f1f8ff; }
        .wm-pagination .btn-load-more:disabled { opacity: 0.4; cursor: default; }

        /* ═══════ EMAIL DETAIL ═══════ */
        .wm-detail {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem 2rem;
            background: #fff;
        }
        .wm-detail .wm-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.45rem 0.85rem;
            border: 1px solid #dadce0;
            background: #fff;
            border-radius: 20px;
            font-size: 0.85rem;
            cursor: pointer;
            color: #444746;
            margin-bottom: 1.25rem;
            transition: background var(--wm-transition);
        }
        .wm-detail .wm-back-btn:hover { background: #f1f3f4; }
        .wm-detail-header { margin-bottom: 1.5rem; }
        .wm-detail-header h3 {
            font-size: 1.35rem;
            margin-bottom: 0.5rem;
            font-weight: 500;
            line-height: 1.3;
        }
        .wm-detail-from-line {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            margin-bottom: 0.5rem;
        }
        .wm-detail-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 700;
            font-size: 1.05rem;
            flex-shrink: 0;
        }
        .wm-detail-meta {
            font-size: 0.82rem;
            color: var(--wm-text-muted);
            line-height: 1.5;
        }
        .wm-detail-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            margin-top: 0.75rem;
        }
        .wm-detail-actions .btn-sm {
            border-radius: 20px;
            font-size: 0.82rem;
            padding: 0.35rem 0.85rem;
            transition: background var(--wm-transition);
        }
        .wm-detail-body {
            line-height: 1.75;
            font-size: 0.95rem;
            color: #202124;
        }
        .wm-detail-body img { max-width: 100%; height: auto; }
        .wm-detail-body blockquote {
            margin: 0;
            border-left: 2px solid #ccc;
            padding-left: 1rem;
            color: #5f6368;
        }
        .wm-conv-message {
            padding: 0.75rem 0;
        }
        .wm-conv-message.expanded {
            position: relative;
        }
        .wm-conv-message.collapsed {
            min-height: 58px;
            padding: 0.55rem 0.35rem;
            border-radius: 8px;
            color: var(--wm-text);
            cursor: pointer;
        }
        .wm-conv-message.collapsed:hover {
            background: var(--wm-hover-bg);
        }
        .wm-conv-message.collapsed .wm-conv-header {
            margin-bottom: 0;
        }
        .wm-conv-header {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            margin-bottom: 0.75rem;
        }
        .wm-conv-toggle {
            cursor: pointer;
        }
        .wm-conv-chevron {
            color: var(--wm-text-muted);
            font-size: 1rem;
            flex-shrink: 0;
        }
        .wm-conv-header-main {
            min-width: 0;
            flex: 1 1 auto;
        }
        .wm-conv-date {
            font-size: 0.82rem;
            color: var(--wm-text-muted);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .wm-conv-message.collapsed .wm-detail-meta {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .wm-conv-preview-inline {
            color: var(--wm-text-muted);
        }
        .wm-conv-message-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            margin: -0.25rem 0 0.75rem 58px;
        }
        .wm-conv-message-actions .btn-sm {
            border-radius: 18px;
            font-size: 0.78rem;
            padding: 0.25rem 0.65rem;
        }
        .wm-conv-divider {
            height: 1px;
            background: var(--wm-border);
            margin: 0.25rem 0;
        }
        .wm-quote-trim {
            margin-top: 1rem;
            border: 1px solid var(--wm-border);
            border-radius: 8px;
            overflow: hidden;
            background: #f8fafd;
        }
        .wm-quote-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.55rem 0.75rem;
            color: var(--wm-text-muted);
            font-size: 0.86rem;
        }
        .wm-quote-toggle {
            border: 0;
            background: transparent;
            color: var(--wm-primary);
            font-weight: 600;
            padding: 0;
            white-space: nowrap;
        }
        .wm-quote-body {
            border-top: 1px solid var(--wm-border);
            padding: 0.75rem;
            color: var(--wm-text-muted);
        }
        .wm-attachments {
            margin-top: 1.5rem;
            padding-top: 1rem;
            border-top: 1px solid var(--wm-border);
        }
        .wm-att-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        .wm-att-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.75rem;
            background: #f1f3f4;
            border-radius: 20px;
            font-size: 0.8rem;
            cursor: default;
            transition: background 0.12s;
        }
        .wm-att-chip:hover { background: #e8eaed; }

        /* ═══════ COMPOSE PANEL ═══════ */
        .wm-compose-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.25);
            z-index: 1045;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        .wm-compose-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* ═══════ SETTINGS MODAL ═══════ */
        .wm-settings-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.25);
            z-index: 1055;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .wm-settings-modal {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.2);
            width: 600px;
            max-width: calc(100vw - 2rem);
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .wm-settings-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--wm-border);
            font-weight: 600;
            font-size: 1.05rem;
        }
        .wm-settings-header .btn-icon {
            border: none;
            background: none;
            font-size: 1.3rem;
            cursor: pointer;
            color: #5f6368;
            padding: 0.25rem;
            border-radius: 50%;
            transition: background 0.2s;
        }
        .wm-settings-header .btn-icon:hover { background: var(--wm-hover-bg); }
        .wm-settings-body {
            padding: 1.25rem;
            overflow-y: auto;
        }
        .wm-settings-body h6 {
            font-weight: 600;
            margin-bottom: 0.75rem;
            font-size: 0.95rem;
        }
        .wm-settings-section {
            padding-bottom: 1.25rem;
            margin-bottom: 1.25rem;
            border-bottom: 1px solid var(--wm-border);
        }
        .wm-settings-section:last-of-type {
            margin-bottom: 0;
        }
        .wm-settings-label {
            display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: #5f6368;
            margin-bottom: 0.35rem;
        }
        .wm-settings-input {
            width: 100%;
            border: 1px solid var(--wm-border);
            border-radius: 8px;
            padding: 0.55rem 0.7rem;
            font-size: 0.92rem;
            color: var(--wm-text);
            background: #fff;
            margin-bottom: 0.9rem;
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .wm-settings-input:focus {
            border-color: var(--wm-primary);
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
        }
        .wm-settings-input[readonly] {
            background: #f8f9fa;
            color: #5f6368;
            cursor: default;
        }
        .wm-settings-footer {
            display: flex;
            align-items: center;
            padding-top: 0.25rem;
        }
        .wm-sig-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            cursor: pointer;
        }
        .wm-sig-toggle input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        .wm-settings-body .ql-editor {
            min-height: 130px;
        }
        .wm-settings-body .ql-toolbar.ql-snow {
            border: 1px solid var(--wm-border);
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            background: #f8f9fa;
        }
        .wm-settings-body .ql-container.ql-snow {
            height: auto;
            min-height: 150px;
            border: 1px solid var(--wm-border);
            border-radius: 0 0 8px 8px;
            background: #fff;
            color: var(--wm-text);
        }
        [data-theme="dark"] .wm-settings-overlay {
            background: rgba(0,0,0,0.5);
        }
        [data-theme="dark"] .wm-settings-modal {
            background: #2d2d3a;
            color: #e0e0f0;
        }
        [data-theme="dark"] .wm-settings-body h6 {
            color: #f4f6ff;
        }
        [data-theme="dark"] .wm-settings-header {
            border-color: #3d3d4a;
        }
        [data-theme="dark"] .wm-settings-section {
            border-color: #3d3d4a;
            background: #2d2d3a !important;
        }
        [data-theme="dark"] .wm-settings-label {
            color: #d7d9ea;
        }
        [data-theme="dark"] .wm-settings-input {
            border-color: #55556b;
            background: #242432;
            color: #f1f3f4;
        }
        [data-theme="dark"] .wm-settings-input::placeholder {
            color: #b8bacd;
            opacity: 1;
        }
        [data-theme="dark"] .wm-settings-input:focus {
            border-color: #6ea8fe;
            box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.18);
        }
        [data-theme="dark"] .wm-settings-input[readonly] {
            background: #20202b;
            color: #d1d3e4;
        }
        [data-theme="dark"] .wm-sig-toggle {
            color: #d7d9ea;
        }
        [data-theme="dark"] .wm-sig-toggle input[type="checkbox"] {
            accent-color: #6ea8fe;
        }
        [data-theme="dark"] .wm-settings-body .ql-toolbar.ql-snow {
            border-color: #55556b !important;
            border-bottom: none !important;
            background: #20202b !important;
            box-shadow: none;
        }
        [data-theme="dark"] .wm-settings-body .ql-container.ql-snow {
            border-color: #55556b !important;
            background: #20202b !important;
            color: #f1f3f4 !important;
            box-shadow: none;
        }
        [data-theme="dark"] .wm-settings-body #wm-sig-editor,
        [data-theme="dark"] .wm-settings-body .ql-snow {
            background: #20202b !important;
        }
        [data-theme="dark"] .wm-settings-body .ql-editor {
            background: #20202b;
            color: #f1f3f4;
        }
        [data-theme="dark"] .wm-settings-body .ql-editor.ql-blank::before {
            color: #b8bacd;
        }
        [data-theme="dark"] .wm-settings-body .ql-snow .ql-stroke {
            stroke: #c8c8dc;
        }
        [data-theme="dark"] .wm-settings-body .ql-snow .ql-fill,
        [data-theme="dark"] .wm-settings-body .ql-snow .ql-stroke.ql-fill {
            fill: #c8c8dc;
        }
        [data-theme="dark"] .wm-settings-body .ql-snow .ql-picker {
            color: #c8c8dc;
        }
        [data-theme="dark"] .wm-settings-body .ql-snow button:hover,
        [data-theme="dark"] .wm-settings-body .ql-snow button:focus,
        [data-theme="dark"] .wm-settings-body .ql-snow .ql-picker-label:hover {
            background: #34344a;
        }
        [data-theme="dark"] .wm-settings-header .btn-icon {
            color: #a0a0b8;
        }
        [data-theme="dark"] .wm-settings-header .btn-icon:hover { background: #3d3d4a; }

        .wm-compose-panel {
            position: fixed;
            bottom: 0;
            right: 2rem;
            width: 600px;
            max-width: calc(100vw - 1rem);
            background: #fff;
            border-radius: 12px 12px 0 0;
            box-shadow: 0 8px 30px rgba(0,0,0,0.2);
            z-index: 1050;
            display: flex;
            flex-direction: column;
            max-height: 75vh;
            transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
        }
        .wm-compose-panel.open {
            transform: translateY(0);
        }
        .wm-compose-panel.minimized {
            transform: translateY(calc(100% - 44px));
        }
        .wm-compose-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.55rem 1rem;
            background: #f2f6fc;
            border-radius: 12px 12px 0 0;
            cursor: pointer;
            flex-shrink: 0;
            user-select: none;
            border-bottom: 1px solid #e8eaed;
        }
        .wm-compose-header span {
            font-weight: 600;
            font-size: 0.85rem;
            color: #202124;
            letter-spacing: 0.01em;
        }
        .wm-compose-header .btn-icon {
            border: none;
            background: none;
            padding: 0.25rem;
            cursor: pointer;
            font-size: 1.15rem;
            color: var(--wm-text-muted);
            border-radius: 50%;
            transition: background 0.12s;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .wm-compose-header .btn-icon:hover { background: #d3e3fd; }
        .wm-compose-body {
            padding: 0.75rem 1rem 0.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }
        .wm-compose-body input {
            border: none;
            border-bottom: 1px solid #e8eaed;
            padding: 0.55rem 0.65rem;
            font-size: 0.875rem;
            outline: none;
            background: transparent;
            width: 100%;
            border-radius: 4px 4px 0 0;
            transition: border-color 0.15s, background 0.15s;
        }
        .wm-compose-body input:hover {
            background: #fafbfc;
        }
        .wm-compose-body input:focus {
            border-bottom-color: var(--wm-primary);
            background: #fff;
        }
        .wm-compose-body .quill-editor {
            flex: 1;
            min-height: 180px;
            display: flex;
            flex-direction: column;
        }
        .wm-compose-body .ql-toolbar {
            border: none;
            border-bottom: 1px solid #e8eaed;
            padding: 0.4rem 0.5rem;
            background: #fafbfc;
            border-radius: 6px 6px 0 0;
        }
        .wm-compose-body .ql-container {
            border: none;
            font-size: 0.9rem;
            flex: 1;
        }
        .wm-compose-footer {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1rem;
            border-top: 1px solid #eee;
            flex-shrink: 0;
        }
        .wm-compose-footer .btn-send {
            border-radius: 20px;
            padding: 0.6rem 1.75rem;
            font-weight: 600;
            font-size: 0.875rem;
            background: var(--wm-primary);
            border: none;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: background var(--wm-transition), transform 0.15s, box-shadow var(--wm-transition);
            position: relative;
            overflow: hidden;
        }
        .wm-compose-footer .btn-send:hover {
            background: #0b5ed7;
            box-shadow: 0 2px 8px rgba(13,110,253,0.35);
        }
        .wm-compose-footer .btn-send:active { transform: scale(0.97); }
        .wm-compose-footer .btn-send:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
        .wm-compose-footer .btn-send i.send-icon {
            transition: transform 0.3s ease;
        }
        .wm-compose-footer .btn-send.sending i.send-icon {
            animation: paperPlaneFly 0.6s ease forwards;
        }
        @keyframes paperPlaneFly {
            0% { transform: translate(0, 0) rotate(0); opacity: 1; }
            50% { transform: translate(6px, -6px) rotate(-20deg); opacity: 0.7; }
            100% { transform: translate(40px, -40px) rotate(-45deg); opacity: 0; }
        }
        .wm-compose-footer .btn-link {
            text-decoration: none;
            font-size: 0.82rem;
            cursor: pointer;
        }
        .wm-compose-cc-bcc {
            display: flex;
            gap: 0.5rem;
        }
        .wm-compose-cc-bcc .toggle-link {
            font-size: 0.78rem;
            cursor: pointer;
            color: var(--wm-text-muted);
            text-decoration: none;
            padding: 0.15rem 0.5rem;
            border-radius: 4px;
            transition: background 0.12s, color 0.12s;
        }
        .wm-compose-cc-bcc .toggle-link:hover { background: #e8eaed; color: #202124; }
        .wm-compose-cc-bcc .toggle-link.active { color: var(--wm-primary); font-weight: 600; }
        .wm-draft-indicator {
            font-size: 0.72rem;
            color: #34a853;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .wm-draft-indicator.visible { opacity: 1; }

        /* ═══════ TOAST NOTIFICATIONS ═══════ */
        .wm-toast-container {
            position: fixed;
            top: 70px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 8px;
            pointer-events: none;
        }
        .wm-toast {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.7rem 1rem;
            border-radius: 8px;
            color: #fff;
            font-size: 0.85rem;
            font-weight: 500;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
            pointer-events: auto;
            animation: toastSlideIn 0.35s cubic-bezier(0.4,0,0.2,1);
            max-width: 380px;
            line-height: 1.35;
        }
        .wm-toast.wm-toast-hiding {
            animation: toastSlideOut 0.3s cubic-bezier(0.4,0,1,1) forwards;
        }
        .wm-toast-success { background: #1e8e3e; }
        .wm-toast-error { background: #d93025; }
        .wm-toast-info { background: #1967d2; }
        .wm-toast-warning { background: #f9ab00; color: #202124; }
        .wm-toast i { font-size: 1.2rem; flex-shrink: 0; }
        @keyframes toastSlideIn {
            from { transform: translateX(120%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes toastSlideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(120%); opacity: 0; }
        }

        /* ═══════ CONFIRM MODAL ═══════ */
        .wm-confirm-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.4);
            z-index: 1060;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: wmFadeIn 0.2s ease;
        }
        @keyframes wmFadeIn { from { opacity:0; } to { opacity:1; } }
        .wm-confirm-dialog {
            background: #fff;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            max-width: 400px;
            width: 90%;
            animation: wmDialogIn 0.25s cubic-bezier(0.4,0,0.2,1);
        }
        @keyframes wmDialogIn { from { transform:scale(0.9); opacity:0; } to { transform:scale(1); opacity:1; } }
        .wm-confirm-dialog h5 { font-size: 1rem; margin-bottom: 0.5rem; }
        .wm-confirm-dialog p { font-size: 0.875rem; color: var(--wm-text-muted); margin-bottom: 1.25rem; }
        .wm-confirm-buttons { display: flex; gap: 0.5rem; justify-content: flex-end; }
        .wm-confirm-buttons button {
            padding: 0.45rem 1.2rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: background var(--wm-transition);
        }
        .wm-confirm-cancel { background: #f1f3f4; color: #444746; }
        .wm-confirm-cancel:hover { background: #e8eaed; }
        .wm-confirm-ok { background: #d93025; color: #fff; }
        .wm-confirm-ok:hover { background: #c5221f; }
        .wm-confirm-ok.wm-confirm-primary { background: var(--wm-primary); }
        .wm-confirm-ok.wm-confirm-primary:hover { background: #0b5ed7; }

        /* ═══════ SKELETON LOADING ═══════ */
        .wm-skeleton-row {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            padding: 0.4rem 1rem;
            border-bottom: 1px solid #f1f3f4;
            min-height: 42px;
        }
        .wm-sk-box {
            background: #e9eaeb;
            border-radius: 4px;
            animation: wmSkPulse 1.5s ease-in-out infinite;
            height: 12px;
        }
        .wm-sk-circle {
            border-radius: 50%;
            animation: wmSkPulse 1.5s ease-in-out infinite;
            flex-shrink: 0;
        }
        @keyframes wmSkPulse {
            0%, 100% { opacity: 0.35; }
            50% { opacity: 0.75; }
        }

        /* ═══════ FOCUS RING (keyboard navigation) ═══════ */
        .wm-email-item.keyboard-focus {
            outline: 2px solid var(--wm-primary);
            outline-offset: -2px;
            border-radius: 3px;
            z-index: 2;
            position: relative;
        }

        /* ═══════ EMPTY STATE ═══════ */
        .wm-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 4rem 2rem;
            color: var(--wm-text-muted);
            text-align: center;
        }
        .wm-empty-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #f1f3f4;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
        }
        .wm-empty-icon i { font-size: 2.5rem; color: #bdc1c6; }
        .wm-empty h4 { font-size: 1.1rem; color: #202124; margin-bottom: 0.25rem; }
        .wm-empty p { font-size: 0.85rem; max-width: 280px; }

        /* ═══════ LOGIN ═══════ */
        .wm-login {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: calc(100dvh - var(--wm-header-h));
            margin-top: var(--wm-header-h);
            padding: clamp(2rem, 5vh, 4rem) 1rem;
            position: relative;
            overflow-x: hidden;
            overflow-y: auto;
            background: #f0f4f8;
        }
        .wm-login-wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(135deg, #0a58ca 0%, #0d6efd 40%, #4dabf7 100%);
            clip-path: ellipse(80% 100% at 50% 100%);
            opacity: 0.08;
            pointer-events: none;
        }
        .wm-login-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            width: 100%;
            max-width: 420px;
        }
        .wm-login-logo {
            margin-bottom: 0 !important;
            text-align: center;
        }
        .wm-login-logo img {
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }
        .wm-login .card {
            width: 100%;
            max-width: 420px;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }
        .wm-login .card:hover {
            box-shadow: 0 20px 50px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }
        .wm-login .card-body { padding: 2.25rem; }
        .wm-login .card-body > .text-center {
            margin-bottom: 1.75rem !important;
        }
        .wm-login .card-body > .text-center h4 {
            margin-top: 0.75rem !important;
            margin-bottom: 0.45rem;
        }
        .wm-login .card-body > .text-center p { margin-bottom: 0; }
        .wm-login #wm-login-form {
            display: grid;
            gap: 1.1rem;
        }
        .wm-login #wm-login-form > .mb-3 { margin-bottom: 0 !important; }
        .wm-login #wm-login-form .form-label { margin-bottom: 0.45rem; }
        .wm-login #wm-login-form .form-control { min-height: 44px; }
        .wm-login #wm-login-btn {
            min-height: 44px;
            margin-top: 0.15rem;
        }
        .wm-password-toggle {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: none;
            color: var(--wm-text-muted);
            cursor: pointer;
            padding: 4px;
            font-size: 1.25rem;
            line-height: 1;
            z-index: 5;
            transition: color 0.15s;
        }
        .wm-password-toggle:hover { color: var(--wm-primary); }
        .wm-remember {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.85rem;
            color: var(--wm-text-muted);
            user-select: none;
            cursor: pointer;
        }
        .wm-remember input { cursor: pointer; width: 15px; height: 15px; accent-color: var(--wm-primary); }

        /* ═══════ NAVBAR ═══════ */
        .wm-nav-user { display: flex; align-items: center; gap: 0.6rem; }
        .wm-nav-user .wm-user-email {
            font-size: 0.85rem;
            color: rgba(255,255,255,0.85);
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .wm-nav-user .btn-logout {
            color: rgba(255,255,255,0.7);
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 6px;
            padding: 0.3rem 0.7rem;
            font-size: 0.8rem;
            background: transparent;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .wm-nav-user .btn-logout:hover {
            color: #fff;
            background: rgba(255,255,255,0.15);
            border-color: rgba(255,255,255,0.4);
        }
        .wm-error-banner {
            animation: wmErrorIn 0.35s ease;
        }
        @keyframes wmErrorIn {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ═══════ RESPONSIVE ═══════ */
        @media (max-width: 768px) {
            .wm-sidebar {
                position: fixed;
                left: 0;
                top: var(--wm-header-h);
                bottom: 0;
                z-index: 1040;
                transform: translateX(-100%);
                box-shadow: 2px 0 8px rgba(0,0,0,0.1);
            }
            .wm-sidebar.open { transform: translateX(0); }
            .wm-compose-panel {
                right: 0;
                bottom: 0;
                width: 100%;
                max-width: 100%;
                border-radius: 12px 12px 0 0;
                max-height: 90vh;
            }
            .wm-detail { padding: 1rem; }
            .wm-conv-date {
                max-width: 120px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .wm-conv-message.collapsed .wm-detail-meta {
                white-space: normal;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .wm-conv-message-actions {
                margin-left: 0;
            }
            .wm-quote-summary {
                align-items: flex-start;
                flex-direction: column;
            }
            .wm-item-from { width: 90px; }
            .wm-item-preview { display: none; }
            .wm-item-actions { display: none; }
            .wm-toolbar .wm-search { max-width: 180px; }
            .wm-toast-container { right: 8px; top: 62px; }
            .wm-toast { max-width: calc(100vw - 16px); font-size: 0.82rem; }
        }
        @media (max-width: 480px) {
            .wm-item-from { width: 70px; font-size: 0.82rem; }
            .wm-item-subject { font-size: 0.82rem; }
            .wm-toolbar { gap: 0.15rem; padding: 0.4rem 0.5rem; }
            .wm-toolbar .btn-icon { width: 30px; height: 30px; font-size: 1rem; }
        }

        /* ═══════════════════════════════════════════════════
           SEARCH CHIPS & CLEAR BUTTON
           ═══════════════════════════════════════════════════ */
        .wm-search-clear {
            position: absolute;
            right: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: rgba(0,0,0,0.1);
            color: var(--wm-text-muted);
            cursor: pointer;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            padding: 0;
            z-index: 2;
            transition: background 0.15s, color 0.15s;
        }
        .wm-search-clear:hover {
            background: rgba(0,0,0,0.2);
            color: #202124;
        }
        .wm-search-chips {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.4rem 1rem;
            border-bottom: 1px solid var(--wm-border);
            background: #fafbfc;
            flex-shrink: 0;
            min-height: 36px;
        }
        .wm-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.25rem 0.7rem;
            border-radius: 16px;
            font-size: 0.78rem;
            font-weight: 500;
            color: #444746;
            background: #e8eaed;
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
            transition: background 0.15s, color 0.15s, box-shadow 0.15s;
        }
        .wm-chip:hover {
            background: #d3d7dd;
            color: #202124;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        .wm-chip.active {
            background: var(--wm-primary);
            color: #fff;
        }
        .wm-chip.active::after {
            content: ' ×';
            font-size: 1.1em;
            font-weight: bold;
        }

        /* ═══════════════════════════════════════════════════
           PAGE TRANSITIONS
           ═══════════════════════════════════════════════════ */
        @keyframes wmFadeUpIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .wm-view-enter {
            animation: wmFadeUpIn 0.18s ease forwards;
        }

        /* ═══════════════════════════════════════════════════
           COMPOSE FULLSCREEN
           ═══════════════════════════════════════════════════ */
        .wm-compose-panel.fullscreen {
            position: fixed;
            inset: 0;
            width: 100%;
            max-width: 100%;
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
            z-index: 2000;
        }
        .wm-compose-panel.fullscreen .wm-compose-header {
            border-radius: 0;
        }
        .wm-compose-panel.fullscreen .wm-compose-body {
            flex: 1;
        }

        /* ═══════════════════════════════════════════════════
           MINIMIZED COMPOSE TASKBAR (Gmail-style)
           ═══════════════════════════════════════════════════ */
        .wm-minibar {
            position: fixed;
            bottom: 0;
            right: 2rem;
            z-index: 1050;
            animation: wmMinibarIn 0.25s cubic-bezier(0.4,0,0.2,1);
        }
        @keyframes wmMinibarIn {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .wm-minibar-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.55rem 1rem;
            background: #f2f6fc;
            border: 1px solid #e0e0e0;
            border-bottom: none;
            border-radius: 10px 10px 0 0;
            cursor: pointer;
            user-select: none;
            min-width: 220px;
            gap: 1.5rem;
            transition: background 0.15s;
        }
        .wm-minibar-inner:hover {
            background: #e8f0fe;
        }
        .wm-minibar-inner span {
            font-weight: 600;
            font-size: 0.85rem;
            color: #202124;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }
        .wm-minibar-close {
            color: var(--wm-text-muted);
            cursor: pointer;
            border-radius: 50%;
        }
        .wm-minibar-close:hover {
            color: #d93025;
            background: #fce8e6;
        }


        /* ═══════════════════════════════════════════════════
           DARK MODE — Manual toggle via [data-theme="dark"]
           Fallback: @media (prefers-color-scheme: dark) for auto-detect
           ═══════════════════════════════════════════════════ */

        /* ── CSS Variables ── */
        [data-theme="dark"] {
            --wm-bg: #2a2a3c;
            --wm-border: #3d3d5c;
            --wm-unread-bg: #2d2d44;
            --wm-hover-bg: #353550;
            --wm-selected-bg: #3a3a6a;
            --wm-text-muted: #a0a0b8;
        }

        /* ── Body & Layout ── */
        [data-theme="dark"] body {
            background: #1e1e2e;
            color: #e0e0e8;
        }
        [data-theme="dark"] .wm-app {
            background: #1e1e2e;
        }
        [data-theme="dark"] .wm-content {
            background: #23233a;
        }

        /* ── Toolbar ── */
        [data-theme="dark"] .wm-toolbar {
            background: #23233a;
            border-bottom-color: var(--wm-border);
        }
        [data-theme="dark"] .wm-toolbar .wm-search input {
            background: #353550;
            color: #e0e0e8;
        }
        [data-theme="dark"] .wm-toolbar .wm-search input::placeholder {
            color: #c5c7d8;
            opacity: 1;
        }
        [data-theme="dark"] .wm-toolbar .wm-search input:focus {
            background: #2a2a40;
            color: #e0e0e8;
            box-shadow: 0 1px 4px rgba(0,0,0,0.4);
        }
        [data-theme="dark"] .wm-toolbar .wm-search .search-icon {
            color: #c5c7d8;
        }
        [data-theme="dark"] .wm-toolbar .btn-icon {
            color: #b0b0c8;
        }
        [data-theme="dark"] .wm-toolbar .btn-icon:hover {
            background: var(--wm-hover-bg);
            color: #e0e0e8;
        }
        [data-theme="dark"] .wm-search-clear {
            background: rgba(255,255,255,0.1);
            color: #a0a0b8;
        }
        [data-theme="dark"] .wm-search-clear:hover {
            background: rgba(255,255,255,0.2);
            color: #d0d0e0;
        }

        /* ── Sidebar ── */
        [data-theme="dark"] .wm-sidebar {
            background: var(--wm-bg);
            border-right-color: var(--wm-border);
        }
        [data-theme="dark"] .wm-mailbox-list li a {
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-mailbox-list li a:hover {
            background: var(--wm-hover-bg);
        }
        [data-theme="dark"] .wm-mailbox-list li a.active {
            background: var(--wm-selected-bg);
            color: #c0d0f8;
        }
        [data-theme="dark"] .wm-folder-delete:hover {
            background: #4a2020;
        }

        /* ── Email List ── */
        [data-theme="dark"] .wm-email-list-header {
            background: #282842;
            border-bottom-color: var(--wm-border);
            color: var(--wm-text-muted);
        }
        [data-theme="dark"] .wm-email-item {
            border-bottom-color: #353550;
        }
        [data-theme="dark"] .wm-email-item:hover {
            background: #2a2a44;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
        }
        [data-theme="dark"] .wm-email-item.unread {
            background: var(--wm-unread-bg);
        }
        [data-theme="dark"] .wm-email-item.unread:hover {
            background: #303050;
        }
        [data-theme="dark"] .wm-item-from {
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-email-item.unread .wm-item-from {
            color: #e8e8f8;
        }
        [data-theme="dark"] .wm-item-subject {
            color: var(--wm-text-muted);
        }
        [data-theme="dark"] .wm-email-item.unread .wm-item-subject {
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-replied-icon {
            color: #b0b0c0;
            background: #2d2d3a;
        }
        [data-theme="dark"] .wm-item-preview {
            color: #6a6a8a;
        }
        [data-theme="dark"] .wm-item-date {
            color: #8a8aa0;
        }
        [data-theme="dark"] .wm-item-star i {
            color: #555;
        }
        [data-theme="dark"] .wm-item-star i.starred {
            color: #f4b400;
        }
        [data-theme="dark"] .wm-act-btn {
            color: #8a8aa0;
        }
        [data-theme="dark"] .wm-act-btn:hover {
            background: #3d3d5c;
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-act-btn.wm-act-danger:hover {
            background: #4a2020;
            color: #ff6b6b;
        }

        /* ── Detail View ── */
        [data-theme="dark"] .wm-detail {
            background: #23233a;
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-detail-header h3 {
            color: #e8e8f8;
        }
        [data-theme="dark"] .wm-detail-body {
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-detail .wm-back-btn {
            background: #353550;
            border-color: var(--wm-border);
            color: #b0b0c8;
        }
        [data-theme="dark"] .wm-detail .wm-back-btn:hover {
            background: #404060;
        }
        [data-theme="dark"] .wm-detail-from-line .fw-semibold {
            color: #e0e0e8;
        }
        [data-theme="dark"] .wm-detail-meta {
            color: #a0a0b8;
        }
        [data-theme="dark"] .wm-conv-message.collapsed:hover {
            background: #2a2a44;
        }
        [data-theme="dark"] .wm-conv-chevron,
        [data-theme="dark"] .wm-conv-preview-inline {
            color: #a0a0b8;
        }
        [data-theme="dark"] .wm-quote-trim {
            background: #282842;
            border-color: var(--wm-border);
        }
        [data-theme="dark"] .wm-quote-body {
            border-top-color: var(--wm-border);
            color: #b0b0c8;
        }

        /* ── Attachments ── */
        [data-theme="dark"] .wm-attachments {
            border-top-color: var(--wm-border);
        }
        [data-theme="dark"] .wm-att-chip {
            background: #353550;
            border-color: #4a4a6a;
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-att-chip:hover {
            background: #404060;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            color: #e0e0e8;
        }
        [data-theme="dark"] .wm-att-chip-meta {
            color: #a0a0b8;
        }
        [data-theme="dark"] .wm-att-chip-icon i.att-generic {
            color: #8a8aa0;
        }

        /* ── Compose Panel ── */
        [data-theme="dark"] .wm-compose-panel {
            background: #23233a;
            box-shadow: 0 8px 30px rgba(0,0,0,0.5);
        }
        [data-theme="dark"] .wm-compose-header {
            background: #2a2a44;
            border-bottom-color: var(--wm-border);
        }
        [data-theme="dark"] .wm-compose-header span {
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-compose-header .btn-icon {
            color: #a0a0b8;
        }
        [data-theme="dark"] .wm-compose-header .btn-icon:hover {
            background: #3d3d5c;
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-compose-body input {
            color: #d0d0e0;
            border-bottom-color: #3d3d5c;
            background: transparent;
        }
        [data-theme="dark"] .wm-compose-body input:hover {
            background: #2a2a44;
        }
        [data-theme="dark"] .wm-compose-body input:focus {
            border-bottom-color: var(--wm-primary);
            background: #23233a;
        }
        [data-theme="dark"] .wm-compose-body .ql-toolbar {
            background: #2a2a44;
            border-bottom-color: #3d3d5c;
        }
        [data-theme="dark"] .wm-compose-body .ql-container {
            background: #23233a;
        }
        [data-theme="dark"] .wm-compose-body .ql-editor {
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-compose-body .ql-editor.ql-blank::before {
            color: #6a6a8a;
        }
        [data-theme="dark"] .wm-compose-cc-bcc .toggle-link {
            color: #a0a0b8;
        }
        [data-theme="dark"] .wm-compose-cc-bcc .toggle-link:hover {
            background: #353550;
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-compose-footer {
            border-top-color: var(--wm-border);
        }

        /* ── Quill Editor Dark Overrides ── */
        [data-theme="dark"] .ql-snow .ql-stroke {
            stroke: #b0b0c8;
        }
        [data-theme="dark"] .ql-snow .ql-fill {
            fill: #b0b0c8;
        }
        [data-theme="dark"] .ql-snow .ql-picker {
            color: #b0b0c8;
        }
        [data-theme="dark"] .ql-snow .ql-picker-options {
            background: #2a2a44;
            border-color: #3d3d5c;
        }
        [data-theme="dark"] .ql-snow .ql-picker-item {
            color: #d0d0e0;
        }
        [data-theme="dark"] .ql-snow .ql-picker-item:hover {
            color: #e8e8f8;
            background: #353550;
        }
        [data-theme="dark"] .ql-snow .ql-toolbar button:hover .ql-stroke,
        [data-theme="dark"] .ql-snow .ql-toolbar button.ql-active .ql-stroke {
            stroke: var(--wm-primary);
        }
        [data-theme="dark"] .ql-snow .ql-toolbar button:hover .ql-fill,
        [data-theme="dark"] .ql-snow .ql-toolbar button.ql-active .ql-fill {
            fill: var(--wm-primary);
        }

        /* ── Form Controls & Inputs (Bootstrap overrides) ── */
        [data-theme="dark"] .form-control {
            background: #353550 !important;
            border-color: #4a4a6a;
            color: #e0e0e8;
        }
        [data-theme="dark"] .form-control:focus {
            background: #2a2a40 !important;
            border-color: var(--wm-primary);
            color: #e0e0e8;
            box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.25);
        }
        [data-theme="dark"] .form-check-input {
            background-color: #353550;
            border-color: #4a4a6a;
        }
        [data-theme="dark"] .form-check-input:checked {
            background-color: var(--wm-primary);
            border-color: var(--wm-primary);
        }
        [data-theme="dark"] .form-select {
            background-color: #353550;
            border-color: #4a4a6a;
            color: #e0e0e8;
        }
        [data-theme="dark"] .input-group-text {
            background: #353550;
            border-color: #4a4a6a;
            color: #b0b0c8;
        }

        /* ── Dropdowns ── */
        [data-theme="dark"] .dropdown-menu {
            background: #23233a;
            border-color: var(--wm-border);
        }
        [data-theme="dark"] .dropdown-menu .dropdown-item {
            color: #d0d0e0;
        }
        [data-theme="dark"] .dropdown-menu .dropdown-item:hover {
            background: #353550;
            color: #e8e8f8;
        }
        [data-theme="dark"] .dropdown-divider {
            border-color: var(--wm-border);
        }

        /* ── Buttons (Bootstrap overrides) ── */
        [data-theme="dark"] .btn-outline-secondary {
            border-color: #4a4a6a;
            color: #b0b0c8;
        }
        [data-theme="dark"] .btn-outline-secondary:hover {
            background: #353550;
            color: #d0d0e0;
            border-color: #5a5a7a;
        }
        [data-theme="dark"] .btn-outline-danger {
            border-color: #6a3a3a;
            color: #e88;
        }
        [data-theme="dark"] .btn-outline-danger:hover {
            background: #4a2020;
            color: #ff6b6b;
        }

        /* ── Login ── */
        [data-theme="dark"] .wm-login {
            background: #1a1a2e;
        }
        [data-theme="dark"] .wm-login .card {
            background: #23233a;
            border-color: #3d3d5c;
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-login .card .text-muted {
            color: #a0a0b8 !important;
        }
        [data-theme="dark"] .wm-login .card .form-control {
            background: #353550;
            border-color: #4a4a6a;
            color: #e0e0e8;
        }
        [data-theme="dark"] .wm-login .card .form-control:focus {
            background: #2a2a40;
            border-color: var(--wm-primary);
            color: #e0e0e8;
        }

        /* ── Minibar ── */
        [data-theme="dark"] .wm-minibar-inner {
            background: #2a2a44;
            border-color: var(--wm-border);
        }
        [data-theme="dark"] .wm-minibar-inner:hover {
            background: #303050;
        }
        [data-theme="dark"] .wm-minibar-inner span {
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-minibar-close {
            color: #a0a0b8;
        }
        [data-theme="dark"] .wm-minibar-close:hover {
            color: #ff6b6b;
            background: #4a2020;
        }

        /* ── Focus Ring (dark) ── */
        [data-theme="dark"] .wm-email-item.keyboard-focus {
            outline-color: #6a9ff5;
        }

        /* ── Scroll Sentinel ── */
        .wm-scroll-sentinel {
            display: flex; align-items: center; justify-content: center;
            padding: 1rem; min-height: 48px;
        }

        /* ── Skeleton / Empty / Pagination ── */
        [data-theme="dark"] .wm-skeleton-row {
            border-bottom-color: #353550;
        }
        [data-theme="dark"] .wm-skeleton-row .wm-sk-circle,
        [data-theme="dark"] .wm-skeleton-row .wm-sk-box {
            background: #3d3d5c;
        }
        [data-theme="dark"] .wm-empty {
            color: #a0a0b8;
        }
        [data-theme="dark"] .wm-empty h4 {
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-empty-icon {
            background: #353550;
        }
        [data-theme="dark"] .wm-empty-icon i {
            color: #6a6a8a;
        }
        [data-theme="dark"] .wm-pagination .btn-load-more {
            background: #353550;
            border-color: var(--wm-border);
            color: var(--wm-primary);
        }
        [data-theme="dark"] .wm-pagination .btn-load-more:hover {
            background: #404060;
        }

        /* ── Confirm Dialog ── */
        [data-theme="dark"] .wm-confirm-dialog {
            background: #23233a;
            color: #d0d0e0;
        }
        [data-theme="dark"] .wm-confirm-dialog h5 {
            color: #e8e8f8;
        }
        [data-theme="dark"] .wm-confirm-dialog p {
            color: #a0a0b8;
        }
        [data-theme="dark"] .wm-confirm-cancel {
            background: #353550;
            color: #b0b0c8;
        }
        [data-theme="dark"] .wm-confirm-cancel:hover {
            background: #404060;
        }

        /* ── Search Chips ── */
        [data-theme="dark"] .wm-search-chips {
            background: #282842;
            border-bottom-color: var(--wm-border);
        }
        [data-theme="dark"] .wm-chip {
            background: #353550;
            color: #b0b0c8;
        }
        [data-theme="dark"] .wm-chip:hover {
            background: #454570;
            color: #d0d0e0;
        }

        /* ── Footer in dark mode ── */
        [data-theme="dark"] .footer-area {
            background: #1a1a2e !important;
            border-top-color: #3d3d5c;
        }

        /* ═══════════════════════════════════════════════════
           THEME TOGGLE BUTTON
           ═══════════════════════════════════════════════════ */
        .wm-theme-toggle {
            border: none;
            background: none;
            color: rgba(255,255,255,0.7);
            cursor: pointer;
            padding: 0.35rem 0.5rem;
            border-radius: 50%;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s, background 0.2s, transform 0.3s;
            width: 36px;
            height: 36px;
        }
        .wm-theme-toggle:hover {
            color: #fff;
            background: rgba(255,255,255,0.15);
        }
        .wm-theme-toggle i {
            transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
        }

        /* ═══════════════════════════════════════════════════
           ATTACHMENT CHIPS — Gmail-style cards
           ═══════════════════════════════════════════════════ */
        .wm-att-chip {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.3rem;
            padding: 0.6rem 0.9rem;
            background: #f1f3f4;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            font-size: 0.82rem;
            cursor: pointer;
            text-decoration: none;
            color: #202124;
            transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
            min-width: 120px;
            max-width: 220px;
        }
        .wm-att-chip:hover {
            background: #e8eaed;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transform: translateY(-1px);
            color: #202124;
        }
        .wm-att-chip-icon {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-weight: 500;
            width: 100%;
        }
        .wm-att-chip-icon i {
            font-size: 1.3rem;
            flex-shrink: 0;
        }
        .wm-att-chip-icon i.att-pdf { color: #e74c3c; }
        .wm-att-chip-icon i.att-image { color: #27ae60; }
        .wm-att-chip-icon i.att-doc { color: #2980b9; }
        .wm-att-chip-icon i.att-audio { color: #8e44ad; }
        .wm-att-chip-icon i.att-video { color: #e67e22; }
        .wm-att-chip-icon i.att-archive { color: #795548; }
        .wm-att-chip-icon i.att-generic { color: #5f6368; }
        .wm-att-chip-meta {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.72rem;
            color: #5f6368;
            width: 100%;
        }

        /* ═══════════════════════════════════════════════════
           SYSTEM PREFERENCE FALLBACK (no theme attribute set)
           ═══════════════════════════════════════════════════ */
        @media (prefers-color-scheme: dark) {
            html:not([data-theme]) {
                --wm-bg: #2a2a3c;
                --wm-border: #3d3d5c;
                --wm-unread-bg: #2d2d44;
                --wm-hover-bg: #353550;
                --wm-selected-bg: #3a3a6a;
                --wm-text-muted: #a0a0b8;
            }
            html:not([data-theme]) body {
                background: #1e1e2e;
                color: #e0e0e8;
            }
            html:not([data-theme]) .wm-app {
                background: #1e1e2e;
            }
            html:not([data-theme]) .wm-content {
                background: #23233a;
            }
            html:not([data-theme]) .wm-toolbar {
                background: #23233a;
                border-bottom-color: #3d3d5c;
            }
            html:not([data-theme]) .wm-toolbar .wm-search input {
                background: #353550;
                color: #e0e0e8;
            }
            html:not([data-theme]) .wm-sidebar {
                background: #2a2a3c;
                border-right-color: #3d3d5c;
            }
            html:not([data-theme]) .wm-email-item {
                border-bottom-color: #353550;
            }
            html:not([data-theme]) .wm-email-item:hover {
                background: #2a2a44;
            }
            html:not([data-theme]) .wm-email-item.unread {
                background: #2d2d44;
            }
            html:not([data-theme]) .wm-detail {
                background: #23233a;
                color: #d0d0e0;
            }
            html:not([data-theme]) .wm-compose-panel {
                background: #23233a;
            }
            html:not([data-theme]) .form-control {
                background: #353550;
                border-color: #4a4a6a;
                color: #e0e0e8;
            }
            html:not([data-theme]) .dropdown-menu {
                background: #23233a;
                border-color: #3d3d5c;
            }
            html:not([data-theme]) .dropdown-menu .dropdown-item {
                color: #d0d0e0;
            }
        }

        /* ═══════════════════════════════════════════════════
           LOGIN REDESIGN — Branded with shipping theme
           ═══════════════════════════════════════════════════ */
        .wm-login-brand {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        .wm-login-brand img {
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
            margin-bottom: 0.5rem;
        }
        .wm-login-company {
            font-size: 1.5rem;
            font-weight: 700;
            color: #0d6efd;
            letter-spacing: 0.03em;
            margin: 0.25rem 0 0;
        }
        .wm-login-tagline {
            font-size: 0.85rem;
            color: #6c757d;
            margin: 0;
            letter-spacing: 0.02em;
        }
        .wm-login-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #0a58ca, #0d6efd);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(13,110,253,0.3);
        }
        .wm-login-icon i {
            font-size: 2rem;
            color: #fff;
        }
        .wm-login-footer {
            text-align: center;
            margin-top: 1.25rem;
        }
        .wm-login .input-group-text {
            background: #f8f9fa;
            border-right: none;
            color: #6c757d;
        }
        .wm-login .input-group .form-control {
            border-left: none;
        }
        .wm-login .input-group .form-control:focus {
            border-color: #86b7fe;
            box-shadow: none;
        }
        .wm-login .input-group:focus-within .input-group-text {
            border-color: #86b7fe;
        }
        .wm-login-ship {
            position: absolute;
            bottom: 15%;
            left: 5%;
            width: 120px;
            height: 120px;
            opacity: 0.06;
            pointer-events: none;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230d6efd' d='M21.9 8.9l-1.4-1.4-1.7 1.7-3.8-1V4.3l1.6-.6L12 0 7.4 3.7 9 4.3v3.9L5.2 7.2 3.5 5.5 2.1 6.9l1.7 1.7L0 10v2h24v-2l-2.1-1.1zM2 13v2.5c0 .8.7 1.5 1.5 1.5S5 16.3 5 15.5V14h2v1.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V14h4v1.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V14h2v1.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V13H2z'/%3E%3C/svg%3E") center/contain no-repeat;
        }
        @media (max-width: 768px) {
            .wm-login-ship { display: none; }
        }

        /* ═══════════════════════════════════════════════════
           COMPOSE ACTION ROW — Signature, Attach, Drag hint
           ═══════════════════════════════════════════════════ */
        .wm-compose-actions-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.25rem 0;
            border-bottom: 1px solid #e8eaed;
        }
        .wm-compose-actions-row .btn-link {
            font-size: 0.82rem;
            padding: 0.2rem 0.5rem;
            text-decoration: none;
            border-radius: 4px;
            transition: background 0.12s, color 0.12s;
        }
        .wm-compose-actions-row .btn-link:hover {
            background: #e8eaed;
            color: #202124 !important;
        }
        .wm-attach-label {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            color: var(--wm-text-muted);
            font-size: 1.15rem;
            transition: background 0.12s, color 0.12s;
            flex-shrink: 0;
        }
        .wm-attach-label:hover {
            background: var(--wm-hover-bg);
            color: var(--wm-primary);
        }
        [data-theme="dark"] .wm-attach-label:hover {
            background: #353550;
            color: #80b4ff;
        }
        .wm-attach-hint {
            font-size: 0.75rem;
            opacity: 0.6;
            margin-left: auto;
        }
        .wm-attach-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            padding-top: 0.3rem;
        }
        .wm-attach-preview-item {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.3rem 0.6rem;
            background: #e8f0fe;
            border-radius: 6px;
            font-size: 0.78rem;
            color: #1967d2;
        }
        .wm-attach-preview-item .wm-attach-remove {
            cursor: pointer;
            color: #5f6368;
            font-size: 0.9rem;
            border-radius: 50%;
            padding: 0 2px;
            transition: color 0.12s, background 0.12s;
        }
        .wm-attach-preview-item .wm-attach-remove:hover {
            color: #d93025;
            background: rgba(217,48,37,0.1);
        }
        [data-theme="dark"] .wm-compose-actions-row { border-bottom-color: var(--wm-border); }
        [data-theme="dark"] .wm-compose-actions-row .btn-link:hover { background: #353550; color: #d0d0e0; }
        [data-theme="dark"] .wm-attach-preview-item { background: #2d3a5c; color: #a0c4ff; }

        /* ═══════════════════════════════════════════════════
           UNDO SEND TOAST
           ═══════════════════════════════════════════════════ */
        .wm-undo-toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2000;
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 1.25rem;
            background: #323232;
            color: #fff;
            border-radius: 10px;
            font-size: 0.9rem;
            box-shadow: 0 4px 16px rgba(0,0,0,0.25);
            animation: undoSendIn 0.3s cubic-bezier(0.4,0,0.2,1);
            min-width: 280px;
        }
        @keyframes undoSendIn {
            from { transform: translateX(-50%) translateY(20px); opacity: 0; }
            to { transform: translateX(-50%) translateY(0); opacity: 1; }
        }
        .wm-undo-btn {
            background: none;
            border: none;
            color: #8ab4f8;
            font-weight: 600;
            cursor: pointer;
            font-size: 0.85rem;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            transition: background 0.12s;
        }
        .wm-undo-btn:hover { background: rgba(138,180,248,0.15); }
        .wm-undo-close {
            background: none;
            border: none;
            color: #aaa;
            cursor: pointer;
            padding: 0.15rem;
            border-radius: 50%;
            font-size: 1.1rem;
            transition: color 0.12s;
        }
        .wm-undo-close:hover { color: #fff; }

        /* ═══════════════════════════════════════════════════
           ATTACHMENT PREVIEW MODAL
           ═══════════════════════════════════════════════════ */
        .wm-preview-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: wmFadeIn 0.15s ease;
        }
        .wm-preview-modal {
            background: #fff;
            border-radius: 12px;
            max-width: 90vw;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            animation: wmDialogIn 0.2s ease;
            overflow: hidden;
        }
        .wm-preview-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #e0e0e0;
            font-size: 0.9rem;
            font-weight: 600;
        }
        .wm-preview-body {
            overflow: auto;
            padding: 1rem;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 200px;
        }
        .wm-preview-body img { max-width: 100%; max-height: 70vh; }
        .wm-preview-body iframe { width: 80vw; height: 80vh; border: none; }
        [data-theme="dark"] .wm-preview-modal { background: #23233a; }
        [data-theme="dark"] .wm-preview-header { border-bottom-color: var(--wm-border); color: #d0d0e0; }

        /* ═══════════════════════════════════════════════════
           KEYBOARD SHORTCUTS DIALOG
           ═══════════════════════════════════════════════════ */
        .wm-shortcuts-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: wmFadeIn 0.15s ease;
        }
        .wm-shortcuts-dialog {
            background: #fff;
            border-radius: 16px;
            padding: 1.5rem 2rem;
            max-width: 480px;
            width: 90%;
            box-shadow: 0 12px 40px rgba(0,0,0,0.25);
            animation: wmDialogIn 0.2s ease;
        }
        .wm-shortcuts-dialog h4 {
            font-size: 1.1rem;
            margin-bottom: 1rem;
            text-align: center;
        }
        .wm-shortcuts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem 1.5rem;
        }
        .wm-shortcuts-grid div {
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .wm-shortcuts-grid kbd {
            background: #e8eaed;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 0.15rem 0.4rem;
            font-size: 0.75rem;
            font-family: inherit;
            min-width: 18px;
            text-align: center;
        }
        [data-theme="dark"] .wm-shortcuts-dialog { background: #23233a; color: #d0d0e0; }
        [data-theme="dark"] .wm-shortcuts-grid kbd { background: #353550; border-color: #4a4a6a; color: #d0d0e0; }

        /* ═══════════════════════════════════════════════════
           DENSITY — Compact mode
           ═══════════════════════════════════════════════════ */
        [data-density="compact"] .wm-email-item {
            padding: 0.15rem 1rem;
            min-height: 32px;
            font-size: 0.82rem;
            gap: 0.4rem;
        }
        [data-density="compact"] .wm-email-list-header {
            min-height: 28px;
            padding: 0.1rem 1rem;
            font-size: 0.75rem;
        }
        [data-density="compact"] .wm-avatar-sm {
            width: 26px;
            height: 26px;
            font-size: 0.7rem;
        }
        [data-density="compact"] .wm-item-from { width: 130px; font-size: 0.82rem; }
        [data-density="compact"] .wm-item-preview { display: none; }
        [data-density="compact"] .wm-unread-dot { width: 6px; height: 6px; }
        [data-density="comfortable"] .wm-email-item {
            padding: 0.5rem 1rem;
            min-height: 48px;
        }
        [data-density="comfortable"] .wm-avatar-sm {
            width: 40px;
            height: 40px;
            font-size: 0.9rem;
        }
        [data-density="comfortable"] .wm-item-preview { display: block; }

        /* ═══════ UNDO SEND BAR ═══════ */
        .wm-undo-bar {
            position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
            z-index: 2000; display: flex; align-items: center; gap: 1rem;
            padding: 0.7rem 1.2rem; background: #323232; color: #fff;
            border-radius: 10px; font-size: 0.9rem;
            box-shadow: 0 4px 16px rgba(0,0,0,0.25);
            animation: wmFadeIn 0.25s ease;
            overflow: hidden;
        }
        .wm-undo-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background: var(--wm-primary);
            width: 100%;
            transform-origin: left;
            animation: wm-undo-countdown 5s linear forwards;
        }
        @keyframes wm-undo-countdown {
            from { transform: scaleX(1); }
            to { transform: scaleX(0); }
        }
        .wm-undo-bar .wm-undo-btn {
            background: none; border: none; color: #8ab4f8; font-weight: 600;
            cursor: pointer; font-size: 0.85rem; padding: 0.25rem 0.5rem; border-radius: 4px;
        }
        .wm-undo-bar .wm-undo-btn:hover { background: rgba(138,180,248,0.15); }
        .wm-undo-bar .wm-undo-x {
            background: none; border: none; color: #888; cursor: pointer; font-size: 1.1rem;
        }
        .wm-undo-bar .wm-undo-x:hover { color: #fff; }

        /* ═══════════════════════════════════════════════════
           2026 VISUAL POLISH — calm, cohesive business mail
           Keeps the established blue unread dot and motion language.
           ═══════════════════════════════════════════════════ */
        :root {
            --wm-sidebar-w: 248px;
            --wm-header-h: 60px;
            --wm-primary: #0d6efd;
            --wm-primary-hover: #0b5ed7;
            --wm-primary-soft: #e9f2ff;
            --wm-canvas: #f4f7fb;
            --wm-surface: #ffffff;
            --wm-surface-subtle: #f8fafc;
            --wm-surface-hover: #f2f6fb;
            --wm-border: #dfe5ec;
            --wm-border-soft: #edf1f5;
            --wm-text: #18212f;
            --wm-text-secondary: #4f5d70;
            --wm-text-muted: #748094;
            --wm-bg: var(--wm-canvas);
            --wm-unread-bg: #f4f8ff;
            --wm-hover-bg: var(--wm-surface-hover);
            --wm-selected-bg: #dfebff;
            --wm-radius-sm: 6px;
            --wm-radius: 10px;
            --wm-radius-lg: 14px;
            --wm-shadow-sm: 0 1px 2px rgba(20, 35, 55, 0.06);
            --wm-shadow-md: 0 8px 24px rgba(20, 35, 55, 0.12);
            --wm-shadow-lg: 0 18px 46px rgba(20, 35, 55, 0.16);
            --wm-transition: 0.18s cubic-bezier(0.2, 0, 0, 1);
        }

        body {
            color: var(--wm-text);
            background: var(--wm-canvas);
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
        body > .navbar {
            background: linear-gradient(105deg, #0a58ca 0%, #0d6efd 72%, #2b7cff 100%) !important;
            box-shadow: 0 1px 0 rgba(0, 29, 74, 0.16);
        }
        .wm-app { background: var(--wm-canvas); }
        .wm-content { background: var(--wm-surface); }

        /* Sidebar */
        .wm-sidebar {
            padding: 1rem 0 0.75rem;
            background: var(--wm-canvas);
            border-right-color: var(--wm-border);
        }
        .wm-sidebar .btn-compose {
            min-height: 46px;
            margin: 0 0.875rem 1rem;
            border-radius: 14px;
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.22), var(--wm-shadow-sm);
            transition: background var(--wm-transition), box-shadow var(--wm-transition), transform var(--wm-transition);
        }
        .wm-sidebar .btn-compose:hover {
            background: var(--wm-primary-hover);
            transform: translateY(-1px);
            animation: composePulse 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }
        .wm-sidebar .btn-compose:hover::after {
            box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.10);
        }
        @keyframes composePulse {
            0%, 100% { box-shadow: 0 5px 14px rgba(13, 110, 253, 0.25), var(--wm-shadow-sm); }
            50% { box-shadow: 0 7px 19px rgba(13, 110, 253, 0.34), var(--wm-shadow-sm); }
        }
        .wm-mailbox-list li a {
            min-height: 38px;
            margin-right: 0.75rem;
            padding: 0.48rem 0.8rem 0.48rem 1.25rem;
            border-radius: 0 12px 12px 0;
            color: var(--wm-text-secondary);
            transition: color var(--wm-transition), background var(--wm-transition);
        }
        .wm-mailbox-list li a.active {
            color: #0a3d85;
            background: var(--wm-selected-bg);
        }
        .wm-mailbox-list li a .badge {
            background: #657287;
            padding: 2px 7px;
            line-height: 1.35;
        }

        /* Organized mailbox navigation: smart views, system groups, custom folders */
        .wm-mailbox-list {
            padding: 0 0.75rem 0.5rem 0;
        }
        .wm-mailbox-list li a {
            margin-right: 0;
        }
        .wm-sidebar-divider {
            height: 1px;
            margin: 0.55rem 0 0.55rem 1rem;
            background: var(--wm-border);
        }
        .wm-folder-group-heading {
            padding-left: 0.25rem;
        }
        .wm-folder-group-heading button {
            width: 100%;
            min-height: 38px;
            padding: 0.48rem 0.75rem 0.48rem 1rem;
            border: 0;
            background: transparent;
            color: var(--wm-text);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font: inherit;
            font-size: 0.875rem;
            font-weight: 650;
            text-align: left;
            border-radius: 0 12px 12px 0;
            transition: background var(--wm-transition), color var(--wm-transition);
        }
        .wm-folder-group-heading button:hover {
            background: var(--wm-surface-hover);
        }
        .wm-folder-group-heading button > span {
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }
        .wm-folder-group-heading .wm-icon,
        .wm-folder-group-heading .wm-folder-chevron {
            font-size: 1.15rem;
        }
        .wm-folder-group-heading .wm-icon {
            width: 22px;
            text-align: center;
        }
        .wm-folder-chevron {
            color: var(--wm-text-muted);
        }
        .wm-folder-group {
            display: block !important;
        }
        .wm-folder-group.collapsed {
            display: none !important;
        }
        .wm-folder-group > ul {
            width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wm-folder-group .wm-custom-folder a,
        .wm-new-folder-item a {
            padding-left: 1.5rem;
        }
        .wm-new-folder-item {
            border-top: 0;
            margin-top: 0.1rem;
            padding-top: 0;
        }
        .wm-new-folder-item a {
            color: var(--wm-text-muted) !important;
            font-weight: 500;
        }
        .wm-new-folder-item a:hover {
            color: var(--wm-primary) !important;
        }

        /* Toolbar and search */
        .wm-toolbar {
            min-height: 58px;
            gap: 0.25rem;
            padding: 0.6rem 1.25rem;
            background: var(--wm-surface);
            border-bottom-color: var(--wm-border);
        }
        .wm-toolbar .btn-icon {
            width: 38px;
            height: 38px;
            color: var(--wm-text-secondary);
            transition: color var(--wm-transition), background var(--wm-transition);
        }
        .wm-toolbar .btn-icon:hover { background: var(--wm-surface-hover); }
        .wm-toolbar .wm-search {
            max-width: 580px;
            margin-left: 0.85rem;
        }
        .wm-toolbar .wm-search input {
            min-height: 40px;
            border: 1px solid transparent;
            border-radius: 12px;
            background: #edf3fb;
            color: var(--wm-text);
        }
        .wm-toolbar .wm-search input:focus {
            border-color: #b8d2f7;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.10), var(--wm-shadow-sm);
        }
        .wm-search-chips {
            min-height: 42px;
            padding: 0.45rem 1.25rem;
            background: var(--wm-surface-subtle);
            border-bottom-color: var(--wm-border-soft);
        }
        .wm-chip {
            border: 1px solid var(--wm-border);
            background: var(--wm-surface);
            color: var(--wm-text-secondary);
            box-shadow: none;
        }

        /* Message list */
        .wm-email-list-header {
            min-height: 38px;
            padding: 0.35rem 1.25rem;
            background: var(--wm-surface-subtle);
            border-bottom-color: var(--wm-border);
        }
        .wm-email-item {
            min-height: 48px;
            gap: 0.65rem;
            padding: 0.45rem 1.25rem;
            border-bottom-color: var(--wm-border-soft);
            color: var(--wm-text);
            transition: background var(--wm-transition), box-shadow var(--wm-transition);
        }
        .wm-email-item:hover {
            background: var(--wm-surface-hover);
            box-shadow: inset 3px 0 0 rgba(13, 110, 253, 0.22);
        }
        .wm-email-item.unread { background: var(--wm-unread-bg); }
        .wm-email-item.unread:hover { background: #edf5ff; }
        .wm-unread-dot {
            width: 8px;
            height: 8px;
            background: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.09);
        }
        .wm-avatar-sm {
            width: 32px;
            height: 32px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 0 1px rgba(30, 48, 70, 0.08);
            filter: saturate(0.74);
        }
        .wm-item-content { gap: 0.8rem; }
        .wm-item-from {
            width: 168px;
            color: var(--wm-text);
            font-weight: 550;
        }
        .wm-email-item.unread .wm-item-from { font-weight: 700; }
        .wm-item-subject { color: var(--wm-text-secondary); }
        .wm-email-item.unread .wm-item-subject {
            color: var(--wm-text);
            font-weight: 600;
        }
        .wm-item-preview { color: var(--wm-text-muted); }
        .wm-item-date {
            min-width: 68px;
            color: var(--wm-text-muted);
            font-variant-numeric: tabular-nums;
        }
        .wm-item-actions {
            min-width: 94px;
            justify-content: flex-end;
        }
        .wm-act-btn { color: var(--wm-text-muted); }
        .wm-act-btn:hover { background: #e5ebf2; }

        /* Reading and conversation view */
        .wm-detail {
            padding: 1.5rem clamp(1.25rem, 4vw, 4rem) 3rem;
            background: var(--wm-surface);
        }
        .wm-detail > * {
            width: 100%;
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
        }
        .wm-detail .wm-back-btn {
            border-color: var(--wm-border);
            background: var(--wm-surface);
            color: var(--wm-text-secondary);
            box-shadow: var(--wm-shadow-sm);
        }
        .wm-detail-header { margin-bottom: 1.25rem; }
        .wm-detail-header h3 {
            margin-bottom: 0.75rem;
            color: var(--wm-text);
            font-size: clamp(1.3rem, 2vw, 1.55rem);
            font-weight: 600;
            letter-spacing: -0.012em;
        }
        .wm-detail-body {
            color: var(--wm-text);
            font-size: 0.96rem;
            line-height: 1.72;
        }
        .wm-conv-message { padding: 1rem 0; }
        .wm-conv-message.collapsed {
            min-height: 64px;
            padding: 0.7rem 0.65rem;
            border: 1px solid transparent;
            border-radius: var(--wm-radius);
        }
        .wm-conv-message.collapsed:hover {
            border-color: var(--wm-border-soft);
            background: var(--wm-surface-hover);
        }
        .wm-conv-header { gap: 0.9rem; }
        .wm-conv-date {
            color: var(--wm-text-muted);
            font-variant-numeric: tabular-nums;
        }
        .wm-conv-divider { background: var(--wm-border-soft); }
        .wm-detail-actions .btn-sm,
        .wm-conv-message-actions .btn-sm {
            border-color: var(--wm-border);
            background: var(--wm-surface);
            color: var(--wm-text-secondary);
        }
        .wm-quote-trim {
            border-color: var(--wm-border);
            background: var(--wm-surface-subtle);
        }
        .wm-att-chip {
            border: 1px solid var(--wm-border);
            background: var(--wm-surface-subtle);
            border-radius: var(--wm-radius);
            box-shadow: none;
        }
        .wm-att-chip:hover {
            background: var(--wm-surface-hover);
            box-shadow: var(--wm-shadow-sm);
            transform: translateY(-1px);
        }

        /* Compose and editor */
        .wm-compose-overlay { background: rgba(20, 31, 48, 0.28); }
        .wm-compose-panel {
            width: 620px;
            border: 1px solid var(--wm-border);
            border-bottom: 0;
            border-radius: var(--wm-radius-lg) var(--wm-radius-lg) 0 0;
            box-shadow: var(--wm-shadow-lg);
            transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1);
        }
        .wm-compose-header {
            min-height: 48px;
            padding: 0.55rem 1rem 0.55rem 1.15rem;
            background: #edf4fd;
            border-bottom-color: var(--wm-border);
            border-radius: var(--wm-radius-lg) var(--wm-radius-lg) 0 0;
        }
        .wm-compose-header span { color: var(--wm-text); }
        .wm-compose-header .btn-icon:hover { background: #dceaff; }
        .wm-compose-body {
            gap: 0.35rem;
            padding: 0.8rem 1.1rem 0.6rem;
        }
        .wm-compose-body input {
            min-height: 42px;
            padding: 0.55rem 0.35rem;
            border-radius: 0;
            border-bottom-color: var(--wm-border-soft);
            color: var(--wm-text);
        }
        .wm-compose-body input:hover { background: var(--wm-surface-subtle); }
        .wm-compose-body .ql-toolbar {
            margin-top: 0.25rem;
            padding: 0.45rem 0.55rem;
            border: 1px solid var(--wm-border);
            border-radius: var(--wm-radius) var(--wm-radius) 0 0;
            background: var(--wm-surface-subtle);
        }
        .wm-compose-body .ql-toolbar .ql-formats {
            margin-right: 0.45rem;
            padding-right: 0.45rem;
            border-right: 1px solid var(--wm-border);
        }
        .wm-compose-body .ql-toolbar .ql-formats:last-child {
            margin-right: 0;
            padding-right: 0;
            border-right: 0;
        }
        .wm-compose-body .ql-container {
            border: 1px solid var(--wm-border) !important;
            border-top: 0 !important;
            border-radius: 0 0 var(--wm-radius) var(--wm-radius);
            font-size: 0.96rem;
        }
        .wm-compose-body .ql-editor {
            min-height: 210px;
            padding: 1rem 1.05rem;
            line-height: 1.65;
        }
        .wm-compose-footer {
            min-height: 58px;
            padding: 0.65rem 1.1rem;
            border-top-color: var(--wm-border-soft);
        }
        .wm-compose-footer .btn-send {
            min-height: 38px;
            padding: 0.55rem 1.5rem;
            box-shadow: 0 3px 9px rgba(13, 110, 253, 0.20);
        }
        @keyframes paperPlaneFly {
            0% { transform: translate(0, 0) rotate(0); opacity: 1; }
            55% { transform: translate(5px, -5px) rotate(-14deg); opacity: 0.8; }
            100% { transform: translate(26px, -26px) rotate(-30deg); opacity: 0; }
        }

        /* Modals, settings, empty states, and login */
        .wm-settings-overlay,
        .wm-confirm-overlay { background: rgba(20, 31, 48, 0.42); }
        .wm-settings-modal,
        .wm-confirm-dialog,
        .wm-shortcuts-dialog,
        .wm-preview-modal {
            border: 1px solid var(--wm-border);
            border-radius: var(--wm-radius-lg);
            box-shadow: var(--wm-shadow-lg);
        }
        .wm-settings-header,
        .wm-preview-header { border-bottom-color: var(--wm-border); }
        .wm-settings-section { border-bottom-color: var(--wm-border-soft); }
        .wm-settings-body h6 {
            color: var(--wm-text);
            font-weight: 650;
        }
        .wm-settings-input {
            min-height: 42px;
            border-color: var(--wm-border);
            border-radius: var(--wm-radius-sm);
        }
        .wm-empty { color: var(--wm-text-muted); }
        .wm-empty-icon {
            background: var(--wm-primary-soft);
            box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.08);
        }
        .wm-empty h4 { color: var(--wm-text); }
        .wm-login { background: var(--wm-canvas); }
        .wm-login-wave {
            background: linear-gradient(125deg, #0958bf 0%, #0d6efd 58%, #3985e8 100%);
        }
        .wm-login .card {
            border: 1px solid var(--wm-border);
            border-radius: var(--wm-radius-lg);
            box-shadow: var(--wm-shadow-md);
        }
        .wm-login .card:hover {
            transform: translateY(-2px);
            box-shadow: var(--wm-shadow-lg);
        }
        .wm-login-logo h2 { color: var(--wm-primary) !important; letter-spacing: -0.02em; }

        /* Neutral charcoal/navy dark theme */
        [data-theme="dark"] {
            --wm-canvas: #111820;
            --wm-surface: #18212b;
            --wm-surface-subtle: #1d2834;
            --wm-surface-hover: #243240;
            --wm-border: #31404e;
            --wm-border-soft: #263440;
            --wm-text: #edf2f7;
            --wm-text-secondary: #c2ccd7;
            --wm-text-muted: #8f9cab;
            --wm-bg: var(--wm-canvas);
            --wm-unread-bg: #192a3d;
            --wm-hover-bg: var(--wm-surface-hover);
            --wm-selected-bg: #193b63;
            --wm-primary-soft: #183452;
            --wm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
            --wm-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.30);
            --wm-shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.42);
        }
        [data-theme="dark"] body,
        [data-theme="dark"] .wm-app { background: var(--wm-canvas); color: var(--wm-text); }
        [data-theme="dark"] .wm-content,
        [data-theme="dark"] .wm-toolbar,
        [data-theme="dark"] .wm-detail { background: var(--wm-surface); }
        [data-theme="dark"] .wm-sidebar { background: var(--wm-canvas); }
        [data-theme="dark"] .wm-mailbox-list li a { color: var(--wm-text-secondary); }
        [data-theme="dark"] .wm-mailbox-list li a.active { color: #d7e9ff; }
        [data-theme="dark"] .wm-toolbar .wm-search input {
            background: #22303d;
            color: var(--wm-text);
        }
        [data-theme="dark"] .wm-toolbar .wm-search input:focus { background: #1b2732; }
        [data-theme="dark"] .wm-toolbar .text-muted,
        [data-theme="dark"] .wm-email-list-header .text-muted { color: var(--wm-text-muted) !important; }
        [data-theme="dark"] .wm-search-chips,
        [data-theme="dark"] .wm-email-list-header { background: var(--wm-surface-subtle); }
        [data-theme="dark"] .wm-chip,
        [data-theme="dark"] .wm-detail .wm-back-btn,
        [data-theme="dark"] .wm-detail-actions .btn-sm,
        [data-theme="dark"] .wm-conv-message-actions .btn-sm {
            border-color: var(--wm-border);
            background: var(--wm-surface);
            color: var(--wm-text-secondary);
        }
        [data-theme="dark"] .wm-email-item { border-bottom-color: var(--wm-border-soft); }
        [data-theme="dark"] .wm-email-item:hover { background: var(--wm-surface-hover); }
        [data-theme="dark"] .wm-email-item.unread { background: var(--wm-unread-bg); }
        [data-theme="dark"] .wm-email-item.unread:hover { background: #20354a; }
        [data-theme="dark"] .wm-item-from,
        [data-theme="dark"] .wm-email-item.unread .wm-item-from,
        [data-theme="dark"] .wm-email-item.unread .wm-item-subject,
        [data-theme="dark"] .wm-detail-header h3,
        [data-theme="dark"] .wm-detail-body { color: var(--wm-text); }
        [data-theme="dark"] .wm-item-subject { color: var(--wm-text-secondary); }
        [data-theme="dark"] .wm-item-preview,
        [data-theme="dark"] .wm-item-date { color: var(--wm-text-muted); }
        [data-theme="dark"] .wm-unread-dot {
            background: #5da1ff;
            box-shadow: 0 0 0 3px rgba(93, 161, 255, 0.12);
        }
        [data-theme="dark"] .wm-compose-panel,
        [data-theme="dark"] .wm-settings-modal,
        [data-theme="dark"] .wm-confirm-dialog,
        [data-theme="dark"] .wm-shortcuts-dialog,
        [data-theme="dark"] .wm-preview-modal { background: var(--wm-surface); border-color: var(--wm-border); }
        [data-theme="dark"] .wm-compose-header,
        [data-theme="dark"] .wm-compose-body .ql-toolbar { background: var(--wm-surface-subtle); }
        [data-theme="dark"] .wm-compose-body .ql-container,
        [data-theme="dark"] .wm-compose-body input:focus { background: var(--wm-surface); }
        [data-theme="dark"] .wm-login { background: var(--wm-canvas); }
        [data-theme="dark"] .wm-login .card { background: var(--wm-surface); border-color: var(--wm-border); }
        [data-theme="dark"] .wm-login-logo .text-muted,
        [data-theme="dark"] .wm-login-tagline { color: var(--wm-text-muted) !important; }
        [data-theme="dark"] .wm-login .form-control,
        [data-theme="dark"] .wm-login .input-group-text {
            background: #22303d !important;
            border-color: var(--wm-border);
            color: var(--wm-text);
        }
        [data-theme="dark"] .wm-login .form-control::placeholder { color: #8290a0; }
        [data-theme="dark"] .wm-login .form-control:focus {
            background: #1d2934 !important;
            border-color: #5d9ff5;
            box-shadow: 0 0 0 3px rgba(93, 159, 245, 0.14);
        }
        [data-theme="dark"] .footer-area {
            background: #0c131b !important;
            border-top: 1px solid #344555;
            box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
        }
        [data-theme="dark"] .footer-area .footer-bottom {
            background: #090f15;
            border-top-color: #263542;
        }

        /* Density and responsive alignment */
        [data-density="compact"] .wm-email-item { min-height: 36px; padding: 0.22rem 1.25rem; }
        [data-density="compact"] .wm-unread-dot { width: 6px; height: 6px; box-shadow: none; }
        [data-density="comfortable"] .wm-email-item { min-height: 56px; padding: 0.58rem 1.25rem; }
        @media (max-width: 900px) {
            .wm-item-from { width: 128px; }
            .wm-item-actions { min-width: 0; }
            .wm-toolbar .wm-search { max-width: none; }
        }
        @media (max-width: 768px) {
            .wm-app { grid-template-columns: minmax(0, 1fr); }
            .wm-content { width: 100vw; min-width: 0; }
            .wm-toolbar { min-height: 54px; padding: 0.45rem 0.65rem; }
            .wm-toolbar .wm-search {
                min-width: 88px;
                max-width: none;
                margin-left: 0.25rem;
            }
            #wm-toolbar-info { display: none; }
            .wm-search-chips {
                overflow-x: auto;
                scrollbar-width: none;
            }
            .wm-search-chips::-webkit-scrollbar { display: none; }
            .wm-email-item { padding-left: 0.75rem; padding-right: 0.75rem; }
            .wm-email-list-header { padding-left: 0.75rem; padding-right: 0.75rem; }
            .wm-detail { padding: 1rem 1rem 2rem; }
            .wm-compose-panel { right: 0.5rem; width: calc(100vw - 1rem); }
            .wm-compose-body .ql-toolbar .ql-formats {
                margin-right: 0.2rem;
                padding-right: 0.2rem;
            }
        }
        @media (max-width: 480px) {
            .wm-toolbar .btn-icon:disabled,
            #wm-btn-density { display: none; }
            .wm-avatar-sm { width: 30px; height: 30px; }
            .wm-unread-dot { width: 7px; height: 7px; box-shadow: none; }
            .wm-item-content { gap: 0.45rem; }
            .wm-item-date { min-width: 48px; }
            .wm-search-chips { padding-left: 0.65rem; padding-right: 0.65rem; }
        }

        /* Preserve motion by default, while respecting OS accessibility settings. */
        @keyframes wmFadeUpIn {
            from { opacity: 0; transform: translateY(3px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .wm-view-enter { animation: wmFadeUpIn 0.2s cubic-bezier(0.2, 0, 0, 1) forwards; }
        @media (prefers-reduced-motion: reduce) {
            .wm-sidebar .btn-compose:hover,
            .wm-compose-footer .btn-send.sending i.send-icon,
            .wm-view-enter,
            .wm-confirm-overlay,
            .wm-preview-overlay,
            .wm-shortcuts-overlay,
            .wm-undo-bar {
                animation: none !important;
            }
            .wm-compose-panel,
            .wm-login .card,
            .wm-att-chip { transition-duration: 0.01ms !important; }
        }

        /* ═══════════════════════════════════════════════════
           SCREENSHOT REFINEMENT — contained reader and unified dark UI
           ═══════════════════════════════════════════════════ */
        .wm-navbar-logo {
            display: block;
            width: auto;
            height: 34px;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }

        /* Message viewer: application canvas → shell → message stage. */
        .wm-detail {
            padding: 24px;
            background: var(--wm-canvas);
        }
        .wm-detail > .wm-message-shell {
            width: 100%;
            max-width: 1180px;
            min-height: calc(100% - 1px);
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid var(--wm-border);
            border-radius: var(--wm-radius-lg);
            background: var(--wm-surface);
            box-shadow: var(--wm-shadow-sm);
        }
        .wm-message-topbar {
            min-height: 54px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.55rem 1rem;
            border-bottom: 1px solid var(--wm-border);
            background: var(--wm-surface-subtle);
        }
        .wm-detail .wm-message-topbar .wm-back-btn {
            width: auto;
            max-width: none;
            margin: 0;
            padding: 0.42rem 0.6rem;
            border: 0;
            background: transparent;
            box-shadow: none;
            color: var(--wm-text-secondary);
        }
        .wm-detail .wm-message-topbar .wm-back-btn:hover {
            background: var(--wm-surface-hover);
            color: var(--wm-text);
        }
        .wm-thread-controls,
        .wm-action-group {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        .wm-thread-controls .btn {
            border-color: transparent;
            background: transparent;
            color: var(--wm-text-muted);
        }
        .wm-thread-controls .btn:hover {
            border-color: var(--wm-border);
            background: var(--wm-surface-hover);
            color: var(--wm-text);
        }
        .wm-message-shell .wm-detail-header {
            width: auto;
            max-width: none;
            margin: 0;
            padding: 1.25rem 1.5rem 1rem;
            border-bottom: 1px solid var(--wm-border);
            background: var(--wm-surface);
        }
        .wm-message-subject-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
        }
        .wm-message-subject-row h3 {
            min-width: 0;
            margin: 0;
            font-size: clamp(1.25rem, 2vw, 1.55rem);
            line-height: 1.35;
        }
        .wm-message-count {
            flex-shrink: 0;
            padding-top: 0.35rem;
            color: var(--wm-text-muted);
            font-size: 0.78rem;
            font-variant-numeric: tabular-nums;
        }
        .wm-message-shell .wm-detail-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-top: 1rem;
        }
        .wm-message-shell .wm-detail-actions .btn,
        .wm-message-shell .wm-conv-message-actions .btn {
            min-height: 32px;
            padding: 0.3rem 0.7rem;
            border-color: var(--wm-border);
            background: transparent;
            color: var(--wm-text-secondary);
        }
        .wm-message-shell .wm-detail-actions .btn:hover,
        .wm-message-shell .wm-conv-message-actions .btn:hover {
            background: var(--wm-surface-hover);
            color: var(--wm-text);
        }
        .wm-message-shell .wm-detail-actions .wm-detail-delete:hover {
            border-color: rgba(220, 53, 69, 0.4);
            background: rgba(220, 53, 69, 0.09);
            color: #dc3545;
        }
        #wm-btn-detail-star,
        #wm-btn-detail-unread {
            width: 34px;
            padding: 0.3rem !important;
        }
        .wm-conversation-list {
            background: var(--wm-surface-subtle);
        }
        .wm-message-shell .wm-conv-message {
            width: auto;
            max-width: none;
            margin: 0;
            padding: 1rem 1.5rem 1.25rem;
            background: var(--wm-surface);
        }
        .wm-message-shell .wm-conv-message.collapsed {
            min-height: 68px;
            border: 0;
            border-radius: 0;
            background: var(--wm-surface);
        }
        .wm-message-shell .wm-conv-message.collapsed:hover {
            background: var(--wm-surface-hover);
        }
        .wm-message-shell .wm-conv-divider {
            margin: 0;
            background: var(--wm-border);
        }
        .wm-message-shell .wm-conv-header {
            margin-bottom: 0.8rem;
        }
        .wm-message-shell .wm-conv-message.collapsed .wm-conv-header {
            margin-bottom: 0;
        }
        .wm-message-shell .wm-conv-message-actions {
            margin: -0.15rem 0 0.85rem 60px;
        }
        .wm-message-stage {
            margin-left: 60px;
            padding: clamp(1rem, 3vw, 2rem);
            overflow: auto;
            border: 1px solid var(--wm-border);
            border-radius: var(--wm-radius);
            background: var(--wm-canvas);
        }
        .wm-message-stage .wm-detail-body {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            overflow-wrap: anywhere;
        }
        .wm-message-stage.plain .wm-detail-body {
            padding: clamp(1rem, 2.5vw, 1.5rem);
            border: 1px solid var(--wm-border-soft);
            border-radius: var(--wm-radius-sm);
            background: var(--wm-surface);
        }
        .wm-message-shell .wm-attachments {
            margin-left: 60px;
        }

        /* Inbox hierarchy and predictable columns. */
        .wm-item-from { width: 188px; }
        .wm-item-subject { color: var(--wm-text-secondary); font-weight: 520; }
        .wm-email-item.unread .wm-item-subject { font-weight: 650; }
        .wm-item-preview {
            color: var(--wm-text-muted);
            opacity: 0.82;
        }
        .wm-item-date { width: 72px; min-width: 72px; }
        .wm-toolbar .wm-search input {
            background: #edf3fb !important;
            color: var(--wm-text) !important;
        }
        .wm-toolbar .wm-search input::placeholder { color: var(--wm-text-muted); }

        /* Settings: one continuous surface with a visible save footer. */
        .wm-settings-modal {
            width: 680px;
            max-height: 85vh;
            border-color: var(--wm-border);
            background: var(--wm-surface);
        }
        .wm-settings-header {
            flex-shrink: 0;
            padding: 0.9rem 1.25rem;
            background: var(--wm-surface-subtle);
        }
        .wm-settings-body {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            padding: 0;
            overflow-y: auto;
            background: var(--wm-surface);
        }
        .wm-settings-section {
            flex-shrink: 0;
            margin: 0;
            padding: 1.25rem;
            border: 0;
            border-bottom: 1px solid var(--wm-border);
            background: transparent !important;
        }
        .wm-settings-section h6 { margin-bottom: 1rem; }
        .wm-settings-account-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.85rem 1rem;
        }
        .wm-settings-field { min-width: 0; }
        .wm-settings-label {
            color: var(--wm-text-secondary);
            font-weight: 600;
        }
        .wm-settings-input {
            min-height: 42px;
            margin: 0;
            border-color: var(--wm-border);
            background: var(--wm-surface-subtle);
            color: var(--wm-text);
        }
        .wm-settings-input[readonly] {
            background: var(--wm-canvas);
            color: var(--wm-text-muted);
        }
        .wm-settings-footer {
            z-index: 2;
            flex-shrink: 0;
            min-height: 60px;
            padding: 0.75rem 1.25rem;
            border-top: 1px solid var(--wm-border);
            background: var(--wm-surface);
        }
        .wm-settings-section:last-child {
            padding-bottom: 1.5rem;
            border-bottom: 0;
        }

        /* Final dark-theme specificity pass: eliminate legacy purple surfaces. */
        [data-theme="dark"] .wm-detail { background: var(--wm-canvas); }
        [data-theme="dark"] .wm-message-shell,
        [data-theme="dark"] .wm-message-shell .wm-detail-header,
        [data-theme="dark"] .wm-message-shell .wm-conv-message,
        [data-theme="dark"] .wm-settings-modal,
        [data-theme="dark"] .wm-settings-body,
        [data-theme="dark"] .wm-settings-section,
        [data-theme="dark"] .wm-settings-footer {
            background: var(--wm-surface) !important;
            color: var(--wm-text);
        }
        [data-theme="dark"] .wm-message-topbar,
        [data-theme="dark"] .wm-settings-header,
        [data-theme="dark"] .wm-conversation-list {
            background: var(--wm-surface-subtle) !important;
        }
        [data-theme="dark"] .wm-toolbar .wm-search input {
            background: #22303d !important;
            color: var(--wm-text) !important;
        }
        [data-theme="dark"] .wm-toolbar .wm-search input:focus {
            background: #1d2934 !important;
        }
        [data-theme="dark"] .wm-settings-label,
        [data-theme="dark"] .wm-sig-toggle { color: var(--wm-text-secondary); }
        [data-theme="dark"] .wm-settings-input,
        [data-theme="dark"] .wm-settings-input[readonly] {
            border-color: var(--wm-border);
            background: #202c37 !important;
            color: var(--wm-text);
        }
        [data-theme="dark"] .wm-settings-input[readonly] {
            background: #17212b !important;
            color: var(--wm-text-muted);
        }
        [data-theme="dark"] .wm-settings-input::placeholder { color: var(--wm-text-muted); }
        [data-theme="dark"] .wm-settings-body .ql-toolbar.ql-snow,
        [data-theme="dark"] .wm-settings-body .ql-container.ql-snow,
        [data-theme="dark"] .wm-settings-body #wm-sig-editor,
        [data-theme="dark"] .wm-settings-body .ql-snow,
        [data-theme="dark"] .wm-settings-body .ql-editor {
            border-color: var(--wm-border) !important;
            background: #17212b !important;
            color: var(--wm-text) !important;
        }
        [data-theme="dark"] .wm-message-stage {
            border-color: var(--wm-border);
            background: #111820;
        }
        [data-theme="dark"] .wm-message-stage.plain .wm-detail-body {
            border-color: var(--wm-border-soft);
            background: #17212b;
        }

        @media (max-width: 1100px) {
            .wm-item-from { width: 150px; }
            .wm-message-shell .wm-detail-actions { align-items: flex-start; flex-direction: column; }
        }
        @media (max-width: 768px) {
            .wm-navbar-logo { height: 30px; }
            .wm-nav-user .wm-user-email { display: none !important; }
            .wm-nav-user .btn-logout {
                padding: 0.35rem 0.45rem;
                font-size: 0;
            }
            .wm-nav-user .btn-logout i { font-size: 1.1rem; }
            .wm-detail { padding: 0; }
            .wm-detail > .wm-message-shell {
                min-height: 100%;
                border-width: 0;
                border-radius: 0;
            }
            .wm-message-topbar { padding: 0.45rem 0.75rem; }
            .wm-thread-controls .btn { font-size: 0; padding: 0.4rem; }
            .wm-thread-controls .btn i { font-size: 1rem; }
            .wm-message-shell .wm-detail-header,
            .wm-message-shell .wm-conv-message { padding-left: 1rem; padding-right: 1rem; }
            .wm-message-subject-row { flex-direction: column; gap: 0.25rem; }
            .wm-message-count { padding-top: 0; }
            .wm-message-shell .wm-detail-actions { overflow-x: auto; }
            .wm-action-group { flex-shrink: 0; }
            .wm-message-stage,
            .wm-message-shell .wm-attachments { margin-left: 0; }
            .wm-message-stage { padding: 0.75rem; }
            .wm-message-shell .wm-conv-message-actions { margin-left: 0; }
            .wm-message-shell .wm-conv-header {
                align-items: flex-start;
                flex-wrap: wrap;
            }
            .wm-message-shell .wm-conv-header-main {
                flex: 1 1 calc(100% - 80px);
                min-width: 0;
            }
            .wm-message-shell .wm-conv-header-main .fw-semibold {
                overflow-wrap: anywhere;
            }
            .wm-message-shell .wm-conv-date {
                width: 100%;
                max-width: none;
                margin-left: 76px !important;
                text-align: left;
                white-space: normal;
            }
            .wm-settings-modal { max-height: calc(100vh - 1rem); }
            .wm-settings-account-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 480px) {
            .wm-message-topbar { gap: 0.35rem; }
            .wm-detail .wm-message-topbar .wm-back-btn {
                max-width: 190px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .wm-message-shell .wm-detail-actions .btn { white-space: nowrap; }
            .wm-message-stage.plain .wm-detail-body { padding: 0.85rem; }
            .wm-settings-section { padding: 1rem; }
            .wm-settings-footer { padding: 0.65rem 1rem; }
        }

        /* ═══════════════════════════════════════════════════
           2026-07-14 COMPLETE WEBMAIL UX RELEASE
           ═══════════════════════════════════════════════════ */
        .wm-mailbox-title {
            flex: 0 0 auto;
            min-width: 88px;
            max-width: 170px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--wm-text);
            font-size: 0.95rem;
        }
        .wm-selection-hint { color: var(--wm-text-muted); }
        .wm-item-subject-wrap { max-width: min(100%, 900px); }
        .wm-item-date { width: 76px; min-width: 76px; }

        .wm-login .form-control:-webkit-autofill,
        .wm-login .form-control:-webkit-autofill:hover,
        .wm-login .form-control:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--wm-text) !important;
            caret-color: var(--wm-text);
            box-shadow: 0 0 0 1000px var(--wm-surface) inset !important;
            border-color: var(--wm-primary) !important;
            transition: background-color 9999s ease-out 0s;
        }
        .wm-login .form-control:autofill {
            color: var(--wm-text) !important;
            background: var(--wm-surface) !important;
            border-color: var(--wm-primary) !important;
        }

        .wm-compose-body .ql-toolbar {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.2rem;
            padding: 0.55rem 0.65rem;
        }
        .wm-compose-body .ql-toolbar .ql-formats {
            display: inline-flex;
            align-items: center;
            gap: 0.15rem;
            margin: 0;
            padding-right: 0.55rem;
            border-right: 1px solid var(--wm-border-soft);
        }
        .wm-compose-body .ql-toolbar .ql-formats:last-child { border-right: 0; padding-right: 0; }
        .wm-compose-body .ql-toolbar button {
            width: 32px;
            height: 32px;
            border-radius: 6px;
        }
        .wm-compose-body .ql-toolbar button:hover,
        .wm-compose-body .ql-toolbar button:focus,
        .wm-compose-body .ql-toolbar button.ql-active { background: var(--wm-primary-soft); }
        .wm-compose-body .ql-editor {
            min-height: 220px;
            font-size: 0.95rem;
            line-height: 1.65;
        }
        .wm-attach-label {
            width: auto;
            padding: 0 0.65rem;
            gap: 0.35rem;
            border-radius: 8px;
            font-size: 0.82rem;
        }
        .wm-attach-label > i { font-size: 1.15rem; }
        .wm-attach-preview { width: 100%; }
        .wm-attach-preview-item {
            position: relative;
            flex: 1 1 240px;
            max-width: 100%;
            min-height: 48px;
            border: 1px solid transparent;
        }
        .wm-attach-preview-item.failed { background: #fff2f2; border-color: #f4b7b7; color: #a61b1b; }
        .wm-attach-preview-main {
            display: flex;
            flex: 1;
            min-width: 0;
            flex-direction: column;
        }
        .wm-attach-preview-main strong,
        .wm-attach-preview-main small {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .wm-attach-preview-main small { color: var(--wm-text-muted); }
        .wm-attach-error { color: #b42318 !important; }
        .wm-upload-progress {
            display: block;
            height: 3px;
            margin-top: 0.25rem;
            overflow: hidden;
            border-radius: 2px;
            background: rgba(13,110,253,0.14);
        }
        .wm-upload-progress > span { display: block; height: 100%; background: var(--wm-primary); transition: width 0.15s; }
        .wm-attach-retry,
        #wm-draft-retry {
            border: 0;
            background: transparent;
            color: var(--wm-primary);
            font-weight: 600;
            font-size: 0.78rem;
            cursor: pointer;
        }
        .wm-attach-remove { border: 0; background: transparent; }
        #wm-draft-retry { margin-left: 0.35rem; text-decoration: underline; }

        .wm-app.compose-minimized .wm-email-list,
        .wm-app.compose-minimized .wm-detail { padding-bottom: 62px !important; }

        .wm-settings-help {
            display: block;
            margin-top: 0.35rem;
            color: var(--wm-text-muted);
            font-size: 0.75rem;
            line-height: 1.35;
        }

        .wm-att-chip { padding: 0; gap: 0; }
        .wm-att-chip-main,
        .wm-att-chip-download {
            border: 0;
            background: transparent;
            color: inherit;
            cursor: pointer;
        }
        .wm-att-chip-main {
            display: flex;
            flex: 1;
            min-width: 0;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.65rem 0.75rem;
            text-align: left;
        }
        .wm-att-chip-download {
            align-self: stretch;
            padding: 0 0.75rem;
            border-left: 1px solid var(--wm-border-soft);
        }
        .wm-att-chip-main:hover,
        .wm-att-chip-download:hover { background: var(--wm-surface-hover); color: var(--wm-primary); }
        .wm-preview-actions { display: flex; align-items: center; gap: 0.5rem; }
        .wm-preview-loading,
        .wm-preview-error { padding: 2rem; color: var(--wm-text-muted); }
        .wm-preview-error { color: #b42318; }

        .wm-sidebar-backdrop {
            position: fixed;
            inset: var(--wm-header-h) 0 0;
            z-index: 1035;
            border: 0;
            background: rgba(15, 23, 42, 0.42);
        }

        @media (max-width: 768px) {
            .wm-toolbar { gap: 0.3rem; }
            .wm-mailbox-title { min-width: 0; max-width: 120px; }
            .wm-toolbar .wm-search { order: 5; flex-basis: 100%; margin: 0.25rem 0 0; }
            .wm-toolbar { flex-wrap: wrap; }
            .wm-selection-hint { display: none; }
            .wm-email-item,
            .wm-mailbox-list a,
            .wm-toolbar .btn-icon,
            .wm-detail-actions .btn { min-height: 44px; }

            .wm-compose-panel {
                inset: var(--wm-header-h) 0 0;
                width: 100%;
                height: calc(100dvh - var(--wm-header-h));
                max-width: none;
                max-height: none;
                border-radius: 0;
            }
            .wm-compose-header { min-height: 52px; border-radius: 0; }
            .wm-compose-body { overscroll-behavior: contain; }
            .wm-compose-footer { min-height: 58px; background: var(--wm-surface); }
            .wm-compose-body .ql-editor { min-height: 36vh; }
            .wm-compose-panel.fullscreen { inset: var(--wm-header-h) 0 0; }

            .wm-settings-overlay { inset: var(--wm-header-h) 0 0; padding: 0; align-items: stretch; }
            .wm-settings-modal {
                width: 100%;
                height: calc(100dvh - var(--wm-header-h));
                max-width: none;
                max-height: none;
                border: 0;
                border-radius: 0;
            }
            .wm-settings-header { min-height: 52px; }
            .wm-settings-body { flex: 1; overflow-y: auto; }
            .wm-settings-footer { min-height: 58px; }

            .wm-preview-modal { width: calc(100vw - 1rem); max-width: none; }
            .wm-preview-body iframe { width: calc(100vw - 2rem); height: 70dvh; }
        }

        @media (max-width: 480px) {
            .wm-mailbox-title { max-width: 92px; }
            .wm-toolbar #wm-btn-refresh { display: none; }
            .wm-attach-label span { display: none; }
            .wm-attach-label { width: 40px; justify-content: center; padding: 0; }
            .wm-minibar { left: 0.5rem; right: 0.5rem; }
            .wm-minibar-inner { min-width: 0; width: 100%; }
            .wm-preview-header { align-items: flex-start; gap: 0.5rem; }
            .wm-preview-actions .btn { font-size: 0; }
            .wm-preview-actions .btn i { font-size: 1rem; }
        }

        @media print {
            @page { margin: 14mm; }
            body.wm-printing { background: #fff !important; color: #111 !important; }
            body.wm-printing .navbar,
            body.wm-printing .wm-sidebar,
            body.wm-printing .wm-sidebar-backdrop,
            body.wm-printing .wm-toolbar,
            body.wm-printing .wm-search-chips,
            body.wm-printing .wm-compose-panel,
            body.wm-printing .wm-compose-overlay,
            body.wm-printing .wm-minibar,
            body.wm-printing .wm-toast-container,
            body.wm-printing .wm-message-topbar,
            body.wm-printing .wm-detail-actions,
            body.wm-printing .wm-conv-message-actions,
            body.wm-printing .wm-quote-summary,
            body.wm-printing .scroll-top { display: none !important; }
            body.wm-printing main,
            body.wm-printing .wm-app,
            body.wm-printing .wm-content,
            body.wm-printing .wm-detail {
                display: block !important;
                position: static !important;
                width: auto !important;
                height: auto !important;
                min-height: 0 !important;
                overflow: visible !important;
                padding: 0 !important;
                background: #fff !important;
            }
            body.wm-printing .wm-message-shell { border: 0 !important; box-shadow: none !important; }
            body.wm-printing .wm-conv-message { break-inside: avoid; border-color: #bbb !important; }
            body.wm-printing .wm-message-stage { background: #fff !important; color: #111 !important; box-shadow: none !important; }
            body.wm-printing .wm-att-chip { border-color: #bbb !important; }
        }

        /* ═══════════════════════════════════════════════════
           APPLICATION HEADER — theme-aware brand connection
           ═══════════════════════════════════════════════════ */
        body > .wm-navbar {
            min-height: var(--wm-header-h);
            padding: 0;
            background: linear-gradient(105deg, #0a58ca 0%, #0d6efd 72%, #2b7cff 100%) !important;
            border-bottom: 1px solid rgba(0, 29, 74, 0.18);
            box-shadow: 0 1px 0 rgba(0, 29, 74, 0.12);
        }
        .wm-navbar-inner {
            display: grid;
            grid-template-columns: var(--wm-sidebar-w) minmax(0, 1fr);
            width: 100%;
            min-height: var(--wm-header-h);
            padding: 0 20px 0 0;
        }
        .wm-navbar-brand {
            display: flex;
            align-items: center;
            min-width: 0;
            height: var(--wm-header-h);
            margin: 0;
            padding: 0 18px 0 24px;
            color: #fff;
            text-decoration: none;
        }
        .wm-navbar-brand:hover,
        .wm-navbar-brand:focus { color: #fff; }
        .wm-navbar-logo {
            width: auto;
            height: 40px;
            flex: 0 0 auto;
        }
        .wm-navbar-divider {
            width: 1px;
            height: 24px;
            margin: 0 13px;
            background: rgba(255, 255, 255, 0.32);
        }
        .wm-navbar-product {
            overflow: hidden;
            color: rgba(255, 255, 255, 0.88);
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.035em;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .wm-nav-actions {
            justify-self: end;
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
            padding: 3px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 12px;
            background: rgba(4, 42, 102, 0.13);
        }
        .wm-nav-user .wm-user-email {
            max-width: 260px;
            padding: 0 10px;
            color: rgba(255, 255, 255, 0.88);
            font-size: 0.82rem;
        }
        .wm-nav-actions .wm-theme-toggle {
            width: 40px;
            height: 40px;
            padding: 0;
            color: rgba(255, 255, 255, 0.8);
            border-radius: 9px;
            font-size: 1.55rem;
            transition: color var(--wm-transition), background var(--wm-transition), transform var(--wm-transition);
        }
        .wm-nav-actions .wm-theme-toggle:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.14);
            transform: none;
        }
        .wm-nav-actions .btn-logout {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            min-height: 40px;
            padding: 0 11px;
            color: rgba(255, 255, 255, 0.78);
            border-color: transparent;
            border-radius: 9px;
            font-size: 0.8rem;
        }
        .wm-nav-actions .btn-logout i { font-size: 1.45rem; }
        .wm-nav-actions .btn-logout:hover {
            color: #fff;
            border-color: transparent;
            background: rgba(255, 255, 255, 0.14);
        }
        .wm-navbar-brand:focus-visible,
        .wm-nav-actions .wm-theme-toggle:focus-visible,
        .wm-nav-actions .btn-logout:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

        [data-theme="dark"] body > .wm-navbar {
            background: linear-gradient(100deg, #111820 0%, #151f29 55%, #182633 100%) !important;
            border-bottom-color: rgba(43, 124, 255, 0.5);
            box-shadow: 0 1px 0 rgba(13, 110, 253, 0.18), 0 5px 18px rgba(0, 0, 0, 0.16);
        }
        [data-theme="dark"] .wm-nav-actions {
            border-color: var(--wm-border);
            background: rgba(255, 255, 255, 0.025);
        }
        [data-theme="dark"] .wm-navbar-divider { background: var(--wm-border); }

        @media (max-width: 768px) {
            .wm-navbar-inner {
                grid-template-columns: minmax(0, 1fr) auto;
                padding-right: 8px;
            }
            .wm-navbar-brand { padding: 0 10px 0 14px; }
            .wm-navbar-logo { height: 34px; }
            .wm-navbar-divider,
            .wm-navbar-product,
            .wm-nav-user .wm-user-email { display: none !important; }
            .wm-nav-actions { gap: 2px; }
            .wm-nav-actions .btn-logout { width: 40px; padding: 0; justify-content: center; }
            .wm-nav-actions .btn-logout .wm-logout-label { display: none; }
            .wm-nav-user .btn-logout i { font-size: 1.45rem; }
        }

        @media (max-width: 360px) {
            .wm-navbar-brand { padding-left: 10px; }
            .wm-navbar-logo { height: 31px; }
            .wm-nav-actions .wm-theme-toggle,
            .wm-nav-actions .btn-logout { width: 38px; height: 38px; min-height: 38px; }
        }