/* Dark mode overrides */

.theme-dark {
    color-scheme: dark;
    /* Lighter gray palette - inspired by Mimestream */
    --dark-sidebar: #2d2d2d;
    --dark-bg: #333333;
    --dark-panel: #3a3a3a;
    --dark-panel-2: #424242;
    --dark-panel-3: #4a4a4a;
    --dark-surface: #404040;
    --dark-border: #4d4d4d;
    --dark-border-strong: #5a5a5a;
    --dark-text: #ffffff;
    --dark-text-muted: #e0e0e0;
    --dark-text-faint: #a0a0a0;
    /* Soft blue accent */
    --dark-accent: #6b9fff;
    --dark-accent-muted: rgba(107, 159, 255, 0.15);
    --dark-hover: rgba(255, 255, 255, 0.08);
    --dark-hover-strong: rgba(255, 255, 255, 0.12);

}

.theme-dark body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

/* === Surface differentiation === */

/* Sidebar - darkest */
.theme-dark #main-sidebar,
.theme-dark #main-sidebar > div {
    background-color: var(--dark-sidebar) !important;
}

.theme-dark #main-sidebar .message-content-surface {
    border-right: none !important;
    box-shadow: none !important;
}

/* Sidebar status footer - remove white overlay */
.theme-dark #main-sidebar .bg-white\/30 {
    background-color: transparent !important;
}

.theme-dark #sidebar-status-footer,
.theme-dark #sidebar-status-footer span,
.theme-dark #sync-status-idle span,
.theme-dark #connection-status-text,
.theme-dark #sync-status-count-idle,
.theme-dark #main-sidebar .bg-white\/30 button,
.theme-dark #main-sidebar .bg-white\/30 svg {
    color: var(--dark-text-muted) !important;
}

/* Sidebar items hover */
.theme-dark #main-sidebar a:hover {
    background-color: var(--dark-hover-strong) !important;
}

/* Thread list - medium dark with rounded corner */
.theme-dark #thread-list-pane {
    background-color: var(--dark-bg) !important;
    border-right: none !important;
    border-color: transparent !important;
    box-shadow: -3px 0 8px 0 rgba(0, 0, 0, 0.08) !important;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    overflow: hidden !important;
}

/* Sidebar - remove right border */
.theme-dark #main-sidebar {
    border-right: none !important;
}

.theme-dark #thread-list-pane .sticky {
    background-color: var(--dark-bg) !important;
}

/* Reading pane - slightly lighter */
.theme-dark #reading-pane {
    background-color: var(--dark-panel) !important;
}

/* Message content area - lightest surface */
.theme-dark #message-content {
    background-color: var(--dark-panel) !important;
}

.theme-dark .message-scroll-area {
    background-color: rgba(227, 227, 227, 0) !important;
}

/* Email content (.reader-body, .message-body) should render "as is" - no color overrides */
/* Only style the surrounding UI, not the actual email content */

/* Reply/Forward footer buttons */
.theme-dark .footer-actions {
    background-color: var(--dark-panel-2) !important;
    border-color: var(--dark-border) !important;
    --tw-divide-opacity: 1 !important;
    --tw-divide-color: var(--dark-border) !important;
}

.theme-dark .footer-actions > * + * {
    border-left-color: var(--dark-border) !important;
    border-inline-start-color: var(--dark-border) !important;
}

.theme-dark .footer-actions button {
    color: var(--dark-text-muted) !important;
    border-color: var(--dark-border) !important;
}

.theme-dark .footer-actions button:hover {
    color: var(--dark-text) !important;
    background-color: var(--dark-hover-strong) !important;
}

.theme-dark .message-content-surface {
    background-color: var(--dark-surface) !important;
}

/* Message item cards in thread view */
.theme-dark .message-item.bg-white {
    background-color: rgba(52, 52, 52, 0.95) !important;
    border-color: var(--dark-border) !important;
}

/* Keep iframe chrome from showing light seams in dark mode */
.theme-dark #message-content iframe {
    background-color: transparent !important;
}

/* App grid base */
.theme-dark .app-grid {
    background-color: var(--dark-sidebar);
}

.theme-dark #mobile-shell {
    background-color: var(--dark-bg);
}

/* === Utility class overrides === */
.theme-dark .bg-white { background-color: var(--dark-panel) !important; }
.theme-dark .bg-gray-50 { background-color: var(--dark-panel) !important; }
.theme-dark .bg-gray-100 { background-color: var(--dark-panel-2) !important; }
.theme-dark .bg-gray-200 { background-color: var(--dark-panel-3) !important; }
.theme-dark .bg-zinc-50 { background-color: var(--dark-panel) !important; }
.theme-dark .bg-zinc-100 { background-color: var(--dark-panel-2) !important; }
.theme-dark .bg-zinc-200 { background-color: var(--dark-panel-3) !important; }
.theme-dark .bg-white\/90 { background-color: rgba(36, 36, 38, 0.95) !important; }
.theme-dark .bg-white\/80 { background-color: rgba(36, 36, 38, 0.88) !important; }
.theme-dark .bg-white\/30 { background-color: rgba(36, 36, 38, 0.5) !important; }
.theme-dark .bg-white\/20 { background-color: rgba(36, 36, 38, 0.35) !important; }
.theme-dark .bg-white\/10 { background-color: rgba(36, 36, 38, 0.2) !important; }
.theme-dark .bg-black\/5 { background-color: rgba(255, 255, 255, 0.04) !important; }
.theme-dark .bg-black\/10 { background-color: rgba(255, 255, 255, 0.06) !important; }
.theme-dark .bg-black\/\[0\.06\] { background-color: rgba(255, 255, 255, 0.06) !important; }

.theme-dark .text-gray-900 { color: var(--dark-text) !important; }
.theme-dark .text-gray-800 { color: var(--dark-text) !important; }
.theme-dark .text-gray-700 { color: var(--dark-text-muted) !important; }
.theme-dark .text-gray-600 { color: var(--dark-text-muted) !important; }
.theme-dark .text-gray-500 { color: var(--dark-text-faint) !important; }
.theme-dark .text-gray-400 { color: var(--dark-text-faint) !important; }
.theme-dark .text-gray-300 { color: #8e8e93 !important; }

/* Content text colors for empty states etc. */
.theme-dark .text-content-secondary { color: var(--dark-text-muted) !important; }
.theme-dark .text-content-tertiary { color: var(--dark-text-faint) !important; }

.theme-dark .text-zinc-900 { color: var(--dark-text) !important; }
.theme-dark .text-zinc-800 { color: var(--dark-text) !important; }
.theme-dark .text-zinc-700 { color: var(--dark-text-muted) !important; }
.theme-dark .text-zinc-600 { color: var(--dark-text-muted) !important; }
.theme-dark .text-zinc-500 { color: var(--dark-text-faint) !important; }
.theme-dark .text-zinc-400 { color: var(--dark-text-faint) !important; }
.theme-dark .text-zinc-300 { color: #6e6e73 !important; }

.theme-dark .border-gray-100 { border-color: var(--dark-border) !important; }
.theme-dark .border-gray-200 { border-color: var(--dark-border) !important; }
.theme-dark .border-gray-300 { border-color: var(--dark-border-strong) !important; }
.theme-dark .border-zinc-100 { border-color: var(--dark-border) !important; }
.theme-dark .border-zinc-200 { border-color: var(--dark-border) !important; }
.theme-dark .border-zinc-300 { border-color: var(--dark-border-strong) !important; }

.theme-dark .divide-gray-100 > * + * { border-color: var(--dark-border) !important; }
.theme-dark .divide-gray-200 > * + * { border-color: var(--dark-border) !important; }
.theme-dark .divide-zinc-100 > * + * { border-color: var(--dark-border) !important; }
.theme-dark .divide-zinc-200 > * + * { border-color: var(--dark-border) !important; }

.theme-dark .hover\:bg-gray-50:hover,
.theme-dark .hover\:bg-zinc-50:hover,
.theme-dark .hover\:bg-zinc-100:hover,
.theme-dark .hover\:bg-zinc-200:hover,
.theme-dark .hover\:bg-gray-100:hover {
    background-color: var(--dark-hover) !important;
}

.theme-dark .hover\:bg-black\/5:hover,
.theme-dark .hover\:bg-black\/10:hover,
.theme-dark .hover\:bg-black\/\[0\.06\]:hover,
.theme-dark .hover\:bg-white\/10:hover,
.theme-dark .hover\:bg-white\/20:hover {
    background-color: var(--dark-hover-strong) !important;
}

/* Hover text color overrides */
.theme-dark .hover\:text-gray-900:hover,
.theme-dark .hover\:text-gray-800:hover,
.theme-dark .hover\:text-zinc-900:hover,
.theme-dark .hover\:text-zinc-800:hover,
.theme-dark .hover\:text-black:hover {
    color: var(--dark-text) !important;
}

.theme-dark .hover\:text-gray-700:hover,
.theme-dark .hover\:text-gray-600:hover,
.theme-dark .hover\:text-zinc-700:hover,
.theme-dark .hover\:text-zinc-600:hover {
    color: var(--dark-text-muted) !important;
}

.theme-dark .hover\:text-blue-600:hover,
.theme-dark .hover\:text-blue-500:hover,
.theme-dark .hover\:text-blue-700:hover,
.theme-dark .hover\:text-indigo-600:hover {
    color: #6b9fff !important;
}

/* Group hover states */
.theme-dark .group:hover .group-hover\:text-gray-900,
.theme-dark .group:hover .group-hover\:text-gray-800,
.theme-dark .group:hover .group-hover\:text-zinc-900,
.theme-dark .group:hover .group-hover\:text-zinc-800,
.theme-dark .group:hover .group-hover\:text-black {
    color: var(--dark-text) !important;
}

.theme-dark .group:hover .group-hover\:text-gray-600,
.theme-dark .group:hover .group-hover\:text-zinc-600 {
    color: var(--dark-text-muted) !important;
}

/* Ring colors */
.theme-dark .ring-gray-200 { --tw-ring-color: var(--dark-border) !important; }
.theme-dark .ring-zinc-200 { --tw-ring-color: var(--dark-border) !important; }
.theme-dark .focus\:ring-gray-200:focus { --tw-ring-color: var(--dark-border) !important; }

/* === Pills, badges, labels === */
.theme-dark .label-badge,
.theme-dark span[class*="rounded-full"][class*="bg-"],
.theme-dark span[class*="px-"][class*="py-"][class*="rounded"] {
    background-color: var(--dark-panel-3) !important;
    color: var(--dark-text-muted) !important;
}

/* Folder unread badge inside active sidebar item */
.theme-dark .sidebar-item-active .folder-unread-badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

/* Colored pills - ensure readability */
.theme-dark .bg-blue-100,
.theme-dark .bg-blue-50 {
    background-color: rgba(10, 132, 255, 0.2) !important;
    color: #6b9fff !important;
}

.theme-dark .bg-green-100,
.theme-dark .bg-green-50 {
    background-color: rgba(48, 209, 88, 0.2) !important;
    color: #30d158 !important;
}

.theme-dark .bg-green-500,
.theme-dark [class*="rounded-full"].bg-green-500 {
    background-color: #30d158 !important;
}

.theme-dark .bg-yellow-100,
.theme-dark .bg-yellow-50 {
    background-color: rgba(255, 214, 10, 0.2) !important;
    color: #ffd60a !important;
}

.theme-dark .bg-red-100,
.theme-dark .bg-red-50 {
    background-color: rgba(255, 69, 58, 0.2) !important;
    color: #ff6961 !important;
}

.theme-dark .bg-purple-100,
.theme-dark .bg-purple-50 {
    background-color: rgba(191, 90, 242, 0.2) !important;
    color: #bf5af2 !important;
}

.theme-dark .bg-indigo-100,
.theme-dark .bg-indigo-50 {
    background-color: rgba(94, 92, 230, 0.2) !important;
    color: #7d7aff !important;
}

.theme-dark .bg-pink-100,
.theme-dark .bg-pink-50 {
    background-color: rgba(255, 55, 95, 0.2) !important;
    color: #ff6482 !important;
}

.theme-dark .bg-orange-100,
.theme-dark .bg-orange-50 {
    background-color: rgba(255, 159, 10, 0.2) !important;
    color: #ff9f0a !important;
}

/* === Buttons === */
.theme-dark .btn-icon {
    color: var(--dark-text-muted);
}

.theme-dark .btn-icon:hover {
    background: var(--dark-hover-strong);
    color: var(--dark-text);
}

/* General button hover states */
.theme-dark button:hover,
.theme-dark [role="button"]:hover {
    color: var(--dark-text);
}

/* Action button hover states - keep dark backgrounds */
.theme-dark button.hover\:bg-rose-50:hover,
.theme-dark button.hover\:bg-red-50:hover {
    background-color: rgba(255, 69, 58, 0.15) !important;
    color: #ff6961 !important;
}

.theme-dark button.hover\:bg-blue-50:hover {
    background-color: rgba(107, 159, 255, 0.15) !important;
    color: #6b9fff !important;
}

.theme-dark button.hover\:bg-amber-50:hover,
.theme-dark button.hover\:bg-yellow-50:hover {
    background-color: rgba(255, 214, 10, 0.15) !important;
    color: #ffd60a !important;
}

.theme-dark button.hover\:bg-green-50:hover {
    background-color: rgba(48, 209, 88, 0.15) !important;
    color: #30d158 !important;
}

.theme-dark button.hover\:bg-zinc-200\/50:hover,
.theme-dark button.hover\:bg-zinc-100:hover,
.theme-dark button.hover\:bg-gray-100:hover {
    background-color: var(--dark-hover-strong) !important;
}

.theme-dark .kbd,
.theme-dark kbd {
    background: var(--dark-panel-2);
    border-color: var(--dark-border);
    color: var(--dark-text-muted);
}

/* === Inputs === */
.theme-dark input,
.theme-dark textarea,
.theme-dark select {
    background-color: rgba(57, 57, 57, 0.15);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus {
    border-color: var(--dark-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2);
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
    color: var(--dark-text-faint);
}

/* === Thread list states === */
.theme-dark .thread-item:hover {
    background-color: var(--dark-hover) !important;
}

.theme-dark .thread-item.selected {
    background-color: var(--dark-accent-muted) !important;
    border-left: 3px solid var(--dark-accent);
}

.theme-dark .thread-item.selected:hover {
    background-color: rgba(10, 132, 255, 0.22) !important;
}

.theme-dark .thread-item.selected.active {
    background-color: rgba(10, 132, 255, 0.2) !important;
}

/* Unread indicator */
.theme-dark .thread-item .unread-dot {
    background-color: var(--dark-accent);
}

/* === Bulk actions bar === */
.theme-dark #bulk-actions-bar {
    background: var(--dark-panel-2);
    border-color: var(--dark-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.theme-dark #bulk-actions-bar .selection-count {
    color: var(--dark-text);
}

.theme-dark #bulk-actions-bar button {
    background: var(--dark-panel);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.theme-dark #bulk-actions-bar button:hover {
    background: var(--dark-hover-strong);
    border-color: var(--dark-border-strong);
}

.theme-dark #bulk-actions-bar button:active {
    background: var(--dark-panel-3);
}

.theme-dark #bulk-actions-bar button.danger {
    border-color: #7f1d1d;
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.2);
}

.theme-dark #bulk-actions-bar button.danger:hover {
    background: rgba(127, 29, 29, 0.3);
    border-color: #991b1b;
}

.theme-dark #bulk-actions-bar button[data-action="bulk-clear-selection"] {
    color: var(--dark-text-faint);
}

.theme-dark #bulk-actions-bar button[data-action="bulk-clear-selection"]:hover {
    color: var(--dark-text);
    background: var(--dark-hover-strong);
}

/* === Unified Glass Modals (dark) === */

/* Glass dialog panels — all modals */
.theme-dark [role="dialog"],
.theme-dark .modal-content,
.theme-dark #fetch-custom-dialog > div {
    background-color: rgba(20, 20, 22, 0.88) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Glass-through for internal bg-white/bg-gray-50 elements */
.theme-dark #preferences-modal .bg-white,
.theme-dark #preferences-modal .bg-gray-50,
.theme-dark #help-modal .bg-white,
.theme-dark #help-modal .bg-gray-50 {
    background-color: transparent !important;
}

/* Dark text colors inside dialogs */
.theme-dark #fetch-custom-dialog .fetch-dialog-title,
.theme-dark #help-modal h2,
.theme-dark #help-modal h3 {
    color: #fff !important;
}

.theme-dark #fetch-custom-dialog .fetch-dialog-message,
.theme-dark #help-modal .text-gray-700,
.theme-dark #help-modal .text-gray-600,
.theme-dark #help-modal .text-sm {
    color: var(--dark-text-muted) !important;
}

/* Dialog input fields */
.theme-dark #fetch-custom-dialog .fetch-dialog-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* Help modal subsections */
.theme-dark #help-modal .bg-gray-50 {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.theme-dark #help-modal .border-gray-200,
.theme-dark #help-modal .border-b {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.theme-dark #help-modal select {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.theme-dark #help-modal kbd {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

.theme-dark #help-modal .hover\:bg-gray-50:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Dialog buttons — cancel */
.theme-dark #fetch-custom-dialog .fetch-dialog-btn-cancel {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

.theme-dark #fetch-custom-dialog .fetch-dialog-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.theme-dark #search-modal .search-modal-content {
    background-color: rgba(20, 20, 22, 0.72) !important;
    backdrop-filter: blur(50px) saturate(140%);
    -webkit-backdrop-filter: blur(50px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-dark #search-modal .search-modal-input,
.theme-dark #search-modal .search-modal-footer,
.theme-dark #search-preview-panel {
    background-color: transparent !important;
}

.theme-dark #search-modal .search-input-pill {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark #search-modal .search-result-item.search-result-item--selected {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

.theme-dark #search-modal .search-result-item:hover:not(.search-result-item--selected) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.theme-dark #search-modal .search-result-item.search-result-item--selected .search-result-enter kbd {
    background-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
}

.theme-dark #search-modal .search-modal-footer {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.theme-dark #search-modal .search-modal-footer kbd {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

.theme-dark #search-history-suggestions,
.theme-dark #search-history-menu {
    background-color: rgba(30, 30, 34, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.theme-dark #search-history-suggestions button {
    color: rgba(255, 255, 255, 0.7) !important;
}

.theme-dark #search-history-suggestions button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark #search-modal-open-list {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.theme-dark #search-modal-open-list:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.theme-dark #search-modal #search-sort-toggle {
    color: rgba(255, 255, 255, 0.5) !important;
}

.theme-dark #search-modal #search-modal-clear,
.theme-dark #search-modal #search-history-gear {
    color: rgba(255, 255, 255, 0.4) !important;
}

.theme-dark #search-modal #search-modal-clear:hover,
.theme-dark #search-modal #search-history-gear:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

.theme-dark #search-modal #search-modal-input {
    color: var(--dark-text) !important;
}

.theme-dark #search-modal #search-modal-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.theme-dark #search-modal .search-input-pill svg {
    color: rgba(255, 255, 255, 0.35) !important;
}

.theme-dark .pref-header {
    background: rgba(28, 28, 30, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.theme-dark .pref-header-title {
    color: var(--dark-text);
}

.theme-dark .pref-header-close {
    color: rgba(255, 255, 255, 0.35);
}

.theme-dark .pref-header-close:hover {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
}

.theme-dark .pref-sidebar {
    background: rgba(28, 28, 30, 0.4);
    border-right-color: rgba(255, 255, 255, 0.06);
}

.theme-dark .pref-sidebar-item {
    color: rgba(255, 255, 255, 0.85);
}

.theme-dark .pref-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.theme-dark #pref-tab-accounts:checked ~ .pref-sidebar label[for="pref-tab-accounts"],
.theme-dark #pref-tab-general:checked ~ .pref-sidebar label[for="pref-tab-general"],
.theme-dark #pref-tab-calendar:checked ~ .pref-sidebar label[for="pref-tab-calendar"],
.theme-dark #pref-tab-appearance:checked ~ .pref-sidebar label[for="pref-tab-appearance"],
.theme-dark #pref-tab-ai:checked ~ .pref-sidebar label[for="pref-tab-ai"],
.theme-dark #pref-tab-shortcuts:checked ~ .pref-sidebar label[for="pref-tab-shortcuts"],
.theme-dark #pref-tab-sync:checked ~ .pref-sidebar label[for="pref-tab-sync"],
.theme-dark #pref-tab-dev:checked ~ .pref-sidebar label[for="pref-tab-dev"],
.theme-dark #pref-tab-security:checked ~ .pref-sidebar label[for="pref-tab-security"],
.theme-dark #pref-tab-data:checked ~ .pref-sidebar label[for="pref-tab-data"] {
    background: rgba(255, 255, 255, 0.1);
}

/* Preferences - Liquid Glass section system (dark) */
.theme-dark .pref-section-title {
    color: rgba(255, 255, 255, 0.45);
}

.theme-dark .pref-section-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-dark .pref-section-card::before {
    background: rgba(255, 255, 255, 0.03);
}

.theme-dark .pref-row-border {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.theme-dark .pref-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.theme-dark .pref-label {
    color: #fff;
}

.theme-dark .pref-desc {
    color: rgba(255, 255, 255, 0.5);
}

.theme-dark .pref-select,
.theme-dark #preferences-modal select {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.theme-dark .pref-select:focus,
.theme-dark #preferences-modal select:focus {
    border-color: rgba(107, 159, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(107, 159, 255, 0.15);
}

.theme-dark #preferences-modal input[type="text"],
.theme-dark #preferences-modal input[type="email"],
.theme-dark #preferences-modal input[type="url"],
.theme-dark #preferences-modal input[type="number"],
.theme-dark #preferences-modal input[type="password"] {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.theme-dark #preferences-modal input[type="text"]:focus,
.theme-dark #preferences-modal input[type="email"]:focus,
.theme-dark #preferences-modal input[type="url"]:focus,
.theme-dark #preferences-modal input[type="number"]:focus,
.theme-dark #preferences-modal input[type="password"]:focus {
    border-color: rgba(107, 159, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(107, 159, 255, 0.15);
}

.theme-dark .pref-toggle-track {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.theme-dark .pref-toggle-track.checked,
.theme-dark input.sr-only:checked + .pref-toggle-track {
    background: rgba(52, 199, 89, 0.7);
    border-color: rgba(52, 199, 89, 0.5);
}

.theme-dark .shortcut-category {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .shortcut-category-title {
    color: rgba(255, 255, 255, 0.45) !important;
}

.theme-dark .shortcut-item {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.theme-dark .pref-content-wrapper {
    background: rgba(20, 20, 22, 0.45) !important;
}

.theme-dark .shortcut-action {
    color: #fff !important;
}

.theme-dark .shortcut-key {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Preferences text colors */
.theme-dark #preferences-modal h2,
.theme-dark #preferences-modal h3,
.theme-dark #preferences-modal label,
.theme-dark #preferences-modal .text-gray-900,
.theme-dark #preferences-modal .text-gray-800,
.theme-dark #preferences-modal .font-medium {
    color: var(--dark-text) !important;
}

.theme-dark #preferences-modal .text-gray-700,
.theme-dark #preferences-modal .text-gray-600,
.theme-dark #preferences-modal p {
    color: var(--dark-text-muted) !important;
}

.theme-dark #preferences-modal [data-signature-preview],
 .theme-dark #preferences-modal [data-signature-preview] p:not([style*="color"]) {
    color: var(--dark-text) !important;
}

.theme-dark #preferences-modal [data-signature-preview] {
    color: var(--dark-text) !important;
}

.theme-dark #preferences-modal .text-gray-500,
.theme-dark #preferences-modal .text-gray-400 {
    color: var(--dark-text-faint) !important;
}

/* Sign Out section in preferences */
.theme-dark #preferences-modal .bg-rose-50 {
    background-color: rgba(255, 69, 58, 0.15) !important;
}

.theme-dark #preferences-modal .bg-rose-100 {
    background-color: rgba(255, 69, 58, 0.25) !important;
}

.theme-dark #preferences-modal .bg-rose-100:hover,
.theme-dark #preferences-modal .hover\:bg-rose-200:hover {
    background-color: rgba(255, 69, 58, 0.35) !important;
}

.theme-dark #preferences-modal .text-rose-700 {
    color: #ff6961 !important;
}

/* Shortcut items in preferences */
.theme-dark .shortcut-category .text-sm,
.theme-dark #preferences-modal .rounded-xl .text-sm {
    color: var(--dark-text) !important;
}

.theme-dark .shortcut-category .uppercase,
.theme-dark #preferences-modal h3.uppercase {
    color: var(--dark-text-muted) !important;
}

/* Shortcut kbd badges */
.theme-dark .shortcut-category kbd,
.theme-dark #preferences-modal kbd {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* Help modal — covered by unified glass rules above */

/* Search modal */
.theme-dark #search-modal {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.theme-dark #search-preview-panel {
    background-color: rgba(66, 66, 66, 0) !important;
    border-color: var(--dark-border) !important;
}

.theme-dark #search-preview-panel .bg-white {
    background-color: var(--dark-panel) !important;
}

.theme-dark #search-preview-panel .border-gray-200,
.theme-dark #search-preview-panel .border-gray-100 {
    border-color: var(--dark-border) !important;
}

.theme-dark #search-preview-panel .text-gray-900,
.theme-dark #search-preview-panel .text-gray-800 {
    color: var(--dark-text) !important;
}

.theme-dark #search-preview-panel .text-gray-600,
.theme-dark #search-preview-panel .text-gray-500 {
    color: var(--dark-text-muted) !important;
}

.theme-dark #search-preview-panel .bg-gray-50 {
    background-color: var(--dark-panel-2) !important;
}

/* PDF lightbox */
.theme-dark #pdf-lightbox {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Context menus */
.theme-dark [data-context-menu],
.theme-dark .context-menu {
    background-color: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Thread context menu - liquid glass effect */
.theme-dark #thread-context-menu,
.theme-dark .thread-context-menu {
    background: rgba(30, 30, 30, 0.82) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.theme-dark [data-context-menu] button,
.theme-dark .context-menu-item,
.theme-dark .context-menu-btn {
    color: var(--dark-text) !important;
}

.theme-dark [data-context-menu] button:hover,
.theme-dark .context-menu-item:hover,
.theme-dark .context-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.theme-dark [data-context-menu] button:active,
.theme-dark .context-menu-item:active,
.theme-dark .context-menu-btn:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark #thread-context-menu .text-rose-600 {
    color: #fb7185 !important;
}

/* === Scrollbars === */
.theme-dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.theme-dark ::-webkit-scrollbar-track {
    background: transparent;
}

.theme-dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}


/* === Links === */
.theme-dark a {
    color: #6b9fff;
}

.theme-dark a:hover {
    color: #8ab4ff;
}

/* === Blue/indigo overrides (no purple) === */
.theme-dark .text-blue-600 { color: #6b9fff !important; }
.theme-dark .text-blue-500 { color: #6b9fff !important; }
.theme-dark .text-blue-400 { color: #6b9fff !important; }
.theme-dark .text-blue-700 { color: #6b9fff !important; }
.theme-dark .text-blue-500\/80 { color: rgba(100, 210, 255, 0.8) !important; }
.theme-dark .text-blue-500\/70 { color: rgba(100, 210, 255, 0.7) !important; }
.theme-dark .text-blue-500\/60 { color: rgba(100, 210, 255, 0.6) !important; }
.theme-dark .text-blue-600\/80 { color: rgba(100, 210, 255, 0.8) !important; }
.theme-dark .text-indigo-600 { color: #6b9fff !important; }
.theme-dark .text-indigo-500 { color: #6b9fff !important; }
.theme-dark .text-indigo-400 { color: #6b9fff !important; }
.theme-dark .text-violet-600 { color: #6b9fff !important; }
.theme-dark .text-violet-500 { color: #6b9fff !important; }
.theme-dark .text-purple-600 { color: #6b9fff !important; }
.theme-dark .text-purple-500 { color: #6b9fff !important; }
.theme-dark [class*="text-blue-"] { color: #6b9fff !important; }
.theme-dark [class*="text-indigo-"] { color: #6b9fff !important; }
.theme-dark [class*="text-violet-"] { color: #6b9fff !important; }
.theme-dark [class*="text-purple-"] { color: #6b9fff !important; }
.theme-dark .bg-blue-600 { background-color: var(--dark-accent) !important; }
.theme-dark .bg-blue-500 { background-color: var(--dark-accent) !important; }
.theme-dark .bg-indigo-600 { background-color: var(--dark-accent) !important; }
.theme-dark .bg-indigo-500 { background-color: var(--dark-accent) !important; }
.theme-dark [class*="bg-blue-5"]:not([class*="bg-blue-50"]) { background-color: var(--dark-accent) !important; }
.theme-dark [class*="bg-blue-6"] { background-color: var(--dark-accent) !important; }
.theme-dark [class*="bg-indigo-5"]:not([class*="bg-indigo-50"]) { background-color: var(--dark-accent) !important; }
.theme-dark [class*="bg-indigo-6"] { background-color: var(--dark-accent) !important; }
.theme-dark .border-blue-500 { border-color: var(--dark-accent) !important; }
.theme-dark .ring-blue-500 { --tw-ring-color: var(--dark-accent) !important; }
.theme-dark .focus\:ring-blue-500:focus { --tw-ring-color: var(--dark-accent) !important; }

/* === Toggle switch === */
.theme-dark input[type="checkbox"]:checked {
    background-color: var(--dark-accent);
}

/* === Compose button === */
.theme-dark .compose-button-surface {
    background-color: var(--dark-panel-2) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.theme-dark .compose-button-surface:hover {
    background-color: #454548 !important;
    border-color: var(--dark-border-strong) !important;
}

.theme-dark .compose-button-surface .text-blue-600,
.theme-dark .compose-button-surface [class*="text-blue"] {
    color: var(--dark-accent) !important;
}

/* Round compose button (toolbar icon) */
.theme-dark .compose-round-icon {
    color: rgba(255, 255, 255, 0.55) !important;
}

.theme-dark .compose-button-round:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .compose-button-round:hover .compose-round-icon {
    color: rgba(255, 255, 255, 0.85) !important;
}

.theme-dark .compose-button-round:active {
    background: rgba(255, 255, 255, 0.15) !important;
}

.theme-dark .compose-round-badge {
    background: rgba(255, 255, 255, 0.45) !important;
    color: rgba(0, 0, 0, 0.8) !important;
}

/* === Composer === */
.theme-dark .composer-toolbar {
    background-color: var(--dark-panel-2);
    border-color: var(--dark-border);
}

.theme-dark .ProseMirror {
    color: var(--dark-text);
}

.theme-dark .ProseMirror p.is-editor-empty:first-child::before {
    color: var(--dark-text-faint);
}

/* === Sync status inner elements === */
.theme-dark #backfill-progress-container .bg-zinc-100\/50 {
    background-color: var(--dark-panel-3) !important;
}

.theme-dark #backfill-progress-text {
    color: var(--dark-text-muted) !important;
}

.theme-dark #backfill-progress-container .bg-zinc-200\/60 {
    background-color: var(--dark-border) !important;
}

.theme-dark #sync-subject-snippet {
    color: var(--dark-text-muted) !important;
}

/* === Attachments === */
.theme-dark [id^="attachment-pill-"] {
    background-color: var(--dark-panel-2) !important;
    border-color: var(--dark-border) !important;
}

.theme-dark [id^="attachment-pill-"]:hover {
    border-color: var(--dark-accent) !important;
}

.theme-dark [id^="attachment-pill-"][data-attachment-active="true"] {
    background-color: var(--dark-accent-muted) !important;
    border-color: var(--dark-accent) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.theme-dark .attachment-buttons {
    background: transparent !important;
    box-shadow: none !important;
}

.theme-dark .attachment-buttons button {
    background-color: var(--dark-panel-3) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-muted) !important;
    box-shadow: none !important;
}

.theme-dark .attachment-buttons button:hover {
    background-color: var(--dark-panel-2) !important;
    border-color: var(--dark-accent) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

/* Attachment icon boxes - override light gradients */
.theme-dark [class*="bg-gradient-to-br"][class*="from-rose-50"],
.theme-dark [class*="bg-gradient-to-br"][class*="from-blue-50"],
.theme-dark [class*="bg-gradient-to-br"][class*="from-emerald-50"],
.theme-dark [class*="bg-gradient-to-br"][class*="from-amber-50"],
.theme-dark [class*="bg-gradient-to-br"][class*="from-zinc-50"] {
    background: var(--dark-panel-2) !important;
    border-color: var(--dark-border) !important;
}

/* Attachment type badges (PDF, DOC, etc.) */
.theme-dark .attachment-icon span[class*="bg-rose-100"] {
    background-color: rgba(244, 63, 94, 0.2) !important;
    color: #f87171 !important;
}
.theme-dark .attachment-icon span[class*="bg-blue-100"] {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}
.theme-dark .attachment-icon span[class*="bg-emerald-100"] {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}
.theme-dark .attachment-icon span[class*="bg-amber-100"] {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

/* === Shadows === */
.theme-dark .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; }
.theme-dark .shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4) !important; }
.theme-dark .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important; }
.theme-dark .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5) !important; }
.theme-dark .shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.5) !important; }
.theme-dark .shadow-2xl { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important; }

/* === Action sheet (mobile) === */
.theme-dark .action-sheet {
    background-color: var(--dark-panel) !important;
}

.theme-dark .action-sheet-item {
    border-color: var(--dark-border) !important;
}

/* === Toasts/notifications === */
.theme-dark .toast {
    background-color: var(--dark-panel-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* === Tooltips === */
.theme-dark [title]:hover::after,
.theme-dark [role="tooltip"],
.theme-dark .tooltip,
.theme-dark [data-tooltip] {
    background-color: var(--dark-panel-2) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Native browser tooltips - can't style directly, but title attr tooltips */
/* For custom tooltips that might exist */
.theme-dark .tippy-box,
.theme-dark .tippy-content {
    background-color: var(--dark-panel-2) !important;
    color: var(--dark-text) !important;
}

/* === Message header / nav bar === */
.theme-dark #reading-pane .sticky,
.theme-dark #reading-pane > div:first-child,
.theme-dark #message-content > .sticky,
.theme-dark #message-content .min-h-14,
.theme-dark .message-header {
    background-color: var(--dark-panel) !important;
    color: var(--dark-text) !important;
}

/* New messages divider pill */
.theme-dark .new-messages-pill {
    background-color: var(--dark-panel) !important;
}

/* Only style the UI header elements, NOT email content h1/h2 */
.theme-dark .message-subject {
    color: var(--dark-text) !important;
}

/* === Empty states === */
.theme-dark .empty-state {
    color: var(--dark-text-faint);
}

/* === Loading states === */
.theme-dark .skeleton {
    background: linear-gradient(90deg, var(--dark-panel-2) 25%, var(--dark-panel-3) 50%, var(--dark-panel-2) 75%);
}

/* === Calendar Invite === */
.theme-dark .calendar-invite-ui {
    background-color: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
}

.theme-dark .calendar-invite-loading,
.theme-dark .calendar-invite-error,
.theme-dark .calendar-invite-info {
    background-color: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
}

.theme-dark .invite-header {
    background: linear-gradient(to right, var(--dark-panel-2), var(--dark-panel)) !important;
    border-color: var(--dark-border) !important;
}

.theme-dark .day-view-header {
    background-color: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
}

.theme-dark .day-view-wrapper {
    border-color: var(--dark-border) !important;
}

.theme-dark .all-day-section {
    background-color: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
}

.theme-dark .hour-line {
    border-color: var(--dark-border) !important;
}

.theme-dark .hour-label {
    color: var(--dark-text-faint) !important;
}

.theme-dark .event-header {
    border-color: var(--dark-border) !important;
}

.theme-dark .attendee-list {
    --tw-divide-opacity: 1;
}

.theme-dark .attendee-list > * + * {
    border-color: var(--dark-border) !important;
}

.theme-dark .rsvp-buttons-container {
    background-color: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
}

/* Calendar invite text colors */
.theme-dark .calendar-invite-ui .text-zinc-900,
.theme-dark .calendar-invite-ui .text-zinc-800 {
    color: var(--dark-text) !important;
}

.theme-dark .calendar-invite-ui .text-zinc-700,
.theme-dark .calendar-invite-ui .text-zinc-600 {
    color: var(--dark-text-muted) !important;
}

.theme-dark .calendar-invite-ui .text-zinc-500,
.theme-dark .calendar-invite-ui .text-zinc-400 {
    color: var(--dark-text-faint) !important;
}

/* Calendar invite backgrounds */
.theme-dark .calendar-invite-ui .bg-white {
    background-color: var(--dark-panel) !important;
}

.theme-dark .calendar-invite-ui .bg-zinc-50,
.theme-dark .calendar-invite-ui .bg-zinc-100 {
    background-color: var(--dark-panel-2) !important;
}

/* Timezone dropdown */
.theme-dark .calendar-invite-ui select {
    background-color: var(--dark-panel-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* Calendar events (non-invite, non-conflict) */
.theme-dark .calendar-event:not(.bg-blue-500):not(.bg-rose-100) {
    background-color: var(--dark-panel-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-muted) !important;
}

.theme-dark .calendar-event--invite-provisional {
    /* Keep invite clearly "proposed" while still reading as pending. */
    background-color: rgba(127, 160, 255, 0.28) !important; /* brand-ish blue, lower alpha on dark */
}

.theme-dark .calendar-invite-pill {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
}

.theme-dark .calendar-invite-conflict-hatch {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(244, 63, 94, 0.36) 0px,
        rgba(244, 63, 94, 0.36) 6px,
        rgba(244, 63, 94, 0.12) 6px,
        rgba(244, 63, 94, 0.12) 12px
    );
}

.theme-dark .all-day-event:not([class*="bg-blue"]):not([class*="bg-rose"]) {
    background-color: var(--dark-panel-2) !important;
    color: var(--dark-text-muted) !important;
}

/* =============================================
   COMPOSER DARK MODE
   ============================================= */

/* --- Body & Container --- */
.theme-dark .composer-container {
    background: var(--dark-bg);
}

/* --- Form fields (scoped to composer) --- */
.theme-dark .composer-container input,
.theme-dark .composer-container select,
.theme-dark .compose-form input,
.theme-dark .compose-form select {
    background: transparent;
    color: var(--dark-text);
}

.theme-dark .composer-container input:focus,
.theme-dark .compose-form input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.theme-dark .composer-container label,
.theme-dark .composer-container .text-gray-500,
.theme-dark .compose-form label,
.theme-dark .compose-form .text-gray-500 {
    color: var(--dark-text-muted) !important;
}

.theme-dark .composer-container .border-gray-200,
.theme-dark .compose-form .border-gray-200 {
    border-color: var(--dark-border) !important;
}

/* --- Toolbar --- */
.theme-dark .tiptap-toolbar {
    background: var(--dark-panel);
    border-color: var(--dark-border);
}

.theme-dark .tiptap-toolbar button {
    color: var(--dark-text-muted);
}

.theme-dark .tiptap-toolbar button:hover {
    background: var(--dark-hover);
    color: var(--dark-text);
}

.theme-dark .tiptap-toolbar button.is-active {
    background: var(--dark-accent-muted);
    color: var(--dark-accent);
}

.theme-dark .tiptap-toolbar .divider {
    background: var(--dark-border);
}

/* --- Dropdowns --- */
.theme-dark .tiptap-dropdown .dropdown-toggle {
    color: var(--dark-text-muted);
}

.theme-dark .tiptap-dropdown .dropdown-toggle:hover {
    background: var(--dark-hover);
}

.theme-dark .tiptap-dropdown .dropdown-menu,
.theme-dark .tiptap-color-picker .color-menu {
    background: var(--dark-panel);
    border-color: var(--dark-border);
}

.theme-dark .tiptap-dropdown .dropdown-menu button {
    color: var(--dark-text);
}

.theme-dark .tiptap-dropdown .dropdown-menu button:hover {
    background: var(--dark-hover);
}

/* --- Suggestions dropdown --- */
.theme-dark #to-suggestions,
.theme-dark #cc-suggestions,
.theme-dark #bcc-suggestions {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
}

.theme-dark #to-suggestions button,
.theme-dark #cc-suggestions button,
.theme-dark #bcc-suggestions button {
    color: var(--dark-text) !important;
}

.theme-dark #to-suggestions button:hover,
.theme-dark #cc-suggestions button:hover,
.theme-dark #bcc-suggestions button:hover {
    background: var(--dark-hover) !important;
}

/* --- Account select --- */
.theme-dark .composer-container select option {
    background: var(--dark-panel);
    color: var(--dark-text);
}

/* --- Editor: dark background (default in dark mode) --- */
.theme-dark .tiptap-editor {
    background: var(--dark-panel);
}

.theme-dark .tiptap-editor .ProseMirror {
    color: var(--dark-text);
}

.theme-dark .tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
    color: var(--dark-text-faint);
}

.theme-dark .tiptap-editor .ProseMirror blockquote {
    border-left-color: var(--dark-border);
    color: var(--dark-text-muted);
}

.theme-dark .tiptap-editor .ProseMirror a {
    color: var(--dark-accent);
}

/* --- Signature preview editor (toggle day/night styles without mutating HTML) --- */
.theme-dark .tiptap-editor.signature-preview-editor {
    background: transparent;
}

.theme-dark .tiptap-editor.signature-preview-editor[data-signature-preview-mode="day"] .ProseMirror {
    color: #1f2937 !important;
}

.theme-dark #preferences-modal .tiptap-editor.signature-preview-editor[data-signature-preview-mode="day"] .ProseMirror p {
    color: #1f2937 !important;
}

.theme-dark .tiptap-editor.signature-preview-editor[data-signature-preview-mode="day"] .ProseMirror p.is-editor-empty:first-child::before {
    color: #9ca3af;
}

.theme-dark .tiptap-editor.signature-preview-editor[data-signature-preview-mode="day"] .ProseMirror blockquote {
    border-left-color: #e5e7eb;
    color: #6b7280;
}

.theme-dark .tiptap-editor.signature-preview-editor[data-signature-preview-mode="day"] .ProseMirror a {
    color: #2563eb;
}

.theme-dark .tiptap-editor.signature-preview-editor[data-signature-preview-mode="night"] .ProseMirror {
    color: var(--dark-text-muted) !important;
}

.theme-dark #preferences-modal .tiptap-editor.signature-preview-editor[data-signature-preview-mode="night"] .ProseMirror p {
    color: var(--dark-text-muted) !important;
}

/* --- Editor: light background (when toggled) --- */
.theme-dark .tiptap-editor.editor-light-bg {
    background: white;
}

.theme-dark .tiptap-editor.editor-light-bg .ProseMirror {
    color: #1f2937;
}

.theme-dark .tiptap-editor.editor-light-bg .ProseMirror p.is-editor-empty:first-child::before {
    color: #9ca3af;
}

.theme-dark .tiptap-editor.editor-light-bg .ProseMirror blockquote {
    border-left-color: #e5e7eb;
    color: #6b7280;
}

.theme-dark .tiptap-editor.editor-light-bg .ProseMirror a {
    color: #2563eb;
}

/* --- Bottom bar --- */
.theme-dark .composer-container .border-t {
    border-color: var(--dark-border) !important;
}

.theme-dark .composer-container button[type="submit"] {
    /* Keep blue send button - uses existing bg-blue overrides */
}

.theme-dark .composer-container [data-action="save-draft"],
.theme-dark .composer-container [data-action="attach-files"] {
    color: var(--dark-text-muted);
}

.theme-dark .composer-container [data-action="attach-files"]:hover,
.theme-dark .composer-container [data-action="save-draft"]:hover {
    color: var(--dark-text);
}

/* --- Overlays --- */
.theme-dark #success-overlay {
    background: var(--dark-bg) !important;
}

.theme-dark #success-overlay h2 {
    color: var(--dark-text) !important;
}

.theme-dark #success-overlay p {
    color: var(--dark-text-muted) !important;
}

.theme-dark #close-draft-overlay > div {
    background: var(--dark-panel);
    border-color: var(--dark-border);
}

.theme-dark #close-draft-overlay h3 {
    color: var(--dark-text);
}

.theme-dark #close-draft-overlay p {
    color: var(--dark-text-muted);
}

/* --- Attachments list --- */
.theme-dark #attachments-list {
    border-color: var(--dark-border) !important;
}

/* --- Attachment chips (scoped to composer) --- */
.theme-dark .composer-container [class*="attachment-chip"],
.theme-dark .composer-container .bg-gray-100 {
    background: var(--dark-panel-2) !important;
    color: var(--dark-text) !important;
}

/* --- Dropzone overlay --- */
.theme-dark #composer-dropzone {
    background: rgba(107, 159, 255, 0.15) !important;
}

.theme-dark #composer-dropzone > div {
    background: var(--dark-panel) !important;
    border-color: var(--dark-accent) !important;
}

.theme-dark #composer-dropzone p {
    color: var(--dark-accent) !important;
}

/* --- Address chips (To, Cc, Bcc) --- */
.theme-dark .composer-container [id$="-chips"] > span {
    background: var(--dark-panel-2) !important;
    color: var(--dark-text) !important;
}

/* --- Cc/Bcc toggle buttons --- */
.theme-dark .composer-container [data-action="toggle-cc"],
.theme-dark .composer-container [data-action="toggle-bcc"] {
    color: var(--dark-accent) !important;
}

/* --- Save status text --- */
.theme-dark #save-status {
    color: var(--dark-text-faint) !important;
}

/* === Team Collaboration === */
/* Invite cards */
.theme-dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; }
.theme-dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; }
.theme-dark .text-amber-900 { color: #fbbf24 !important; }
.theme-dark .text-amber-800 { color: #fcd34d !important; }
.theme-dark .bg-amber-900 { background-color: #92400e !important; }
.theme-dark .hover\:bg-amber-800:hover { background-color: #78350f !important; }

/* Discussion panel */
.theme-dark #team-discussion { border-color: var(--dark-border) !important; }
.theme-dark #team-discussion .bg-white { background-color: var(--dark-panel) !important; }
.theme-dark .disabled\:bg-gray-300:disabled { background-color: var(--dark-panel-3) !important; }
.theme-dark .disabled\:text-gray-700:disabled { color: var(--dark-text-faint) !important; }

/* Preferences team section */
.theme-dark #team-collab-section { border-color: var(--dark-border) !important; }
.theme-dark #team-collab-section .text-gray-900 { color: var(--dark-text) !important; }
.theme-dark #team-collab-section .text-gray-700 { color: var(--dark-text-muted) !important; }
.theme-dark #team-collab-section .text-gray-600 { color: var(--dark-text-faint) !important; }
.theme-dark #team-collab-section .text-gray-500 { color: var(--dark-text-faint) !important; }
.theme-dark #team-collab-section .font-mono { color: var(--dark-text-faint) !important; }

/* Team setup modal */
.theme-dark #team-setup-modal .bg-white { background-color: var(--dark-panel) !important; }
.theme-dark #team-setup-modal .text-zinc-900 { color: var(--dark-text) !important; }
.theme-dark #team-setup-modal .text-zinc-700 { color: var(--dark-text-muted) !important; }
.theme-dark #team-setup-modal .text-zinc-600 { color: var(--dark-text-faint) !important; }
.theme-dark #team-setup-modal .text-zinc-500 { color: var(--dark-text-faint) !important; }
.theme-dark #team-setup-modal .text-zinc-400 { color: var(--dark-text-faint) !important; }
.theme-dark #team-setup-modal .text-amber-600 { color: #fbbf24 !important; }
.theme-dark #team-setup-modal input {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}
.theme-dark #team-setup-modal input::placeholder { color: var(--dark-text-faint) !important; }

/* Invite banner in thread-view */
.theme-dark .team-invite-banner {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
.theme-dark .team-invite-banner .text-blue-900 { color: #93c5fd !important; }
.theme-dark .team-invite-banner .text-blue-700 { color: #93c5fd !important; }

/* ========================================
   Liquid Glass Mode (Tauri + macOS Tahoe)
   ======================================== */

/* Make html/body transparent so glass shows through */
html.liquid-glass,
body.tauri-app.liquid-glass,
html.vibrancy,
body.tauri-app.vibrancy {
    background-color: transparent !important;
}

/* Make app-grid and all main containers transparent so glass shows through */
body.tauri-app.liquid-glass .app-grid,
body.tauri-app.vibrancy .app-grid,
body.tauri-app.liquid-glass #main-content,
body.tauri-app.vibrancy #main-content,
body.tauri-app.liquid-glass .main-content,
body.tauri-app.vibrancy .main-content {
    background-color: transparent !important;
}

/* Thread list semi-transparent */
body.tauri-app.liquid-glass #thread-list-pane,
body.tauri-app.vibrancy #thread-list-pane {
    background-color: rgba(31, 31, 31, 0.85) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    border-right: none !important;
    border-color: transparent !important;
    box-shadow: -3px 0 8px 0 rgba(0, 0, 0, 0.08) !important;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

/* Reading pane with slight dark tint for depth */
body.tauri-app.liquid-glass #reading-pane,
body.tauri-app.vibrancy #reading-pane {
    background-color: rgba(0, 0, 0, 0.50) !important;
}

/* Message content surface - make transparent for glass effect */
body.tauri-app.liquid-glass .message-content-surface,
body.tauri-app.vibrancy .message-content-surface {
    background-color: transparent !important;
}

body.tauri-app.liquid-glass #message-content,
body.tauri-app.vibrancy #message-content {
    background-color: transparent !important;
}

/* Sidebar transparent - ONLY #main-sidebar, not other surfaces */
body.tauri-app.liquid-glass #main-sidebar,
body.tauri-app.liquid-glass #main-sidebar > div {
    background-color: transparent !important;
}

/* Dark mode: reduce glass transparency — tinted so desktop doesn't bleed through as harshly */
.theme-dark body.tauri-app.liquid-glass #main-sidebar,
.theme-dark body.tauri-app.liquid-glass #main-sidebar > div {
    background-color: rgba(30, 30, 30, 0.40) !important;
}

.theme-dark body.tauri-app.vibrancy #main-sidebar,
.theme-dark body.tauri-app.vibrancy #main-sidebar > div {
    background-color: rgba(30, 30, 30, 0.35) !important;
}

body.tauri-app.liquid-glass #main-sidebar .message-content-surface {
    background-color: transparent !important;
    border-right: none !important;
    box-shadow: none !important;
}

body.tauri-app.liquid-glass #sidebar-status-footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.tauri-app.liquid-glass #main-sidebar .bg-white\/30 {
    background-color: transparent !important;
}

/* Dark mode liquid glass - comprehensive light text for visibility */
/* Base text - all elements default to white */
.theme-dark body.tauri-app.liquid-glass #main-sidebar,
.theme-dark body.tauri-app.liquid-glass #main-sidebar span,
.theme-dark body.tauri-app.liquid-glass #main-sidebar a,
.theme-dark body.tauri-app.liquid-glass #main-sidebar button,
.theme-dark body.tauri-app.liquid-glass #main-sidebar p,
.theme-dark body.tauri-app.liquid-glass #main-sidebar div,
.theme-dark body.tauri-app.liquid-glass #main-sidebar h3,
.theme-dark body.tauri-app.liquid-glass #main-sidebar h4,
.theme-dark body.tauri-app.liquid-glass #main-sidebar label {
    color: #ffffff !important;
}

/* Primary text - bright white */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-zinc-900,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-zinc-800,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-gray-900,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-gray-800,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-black,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-content-primary {
    color: #ffffff !important;
}

/* Secondary text - slightly muted white */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-zinc-700,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-zinc-600,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-gray-700,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-gray-600,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-content-secondary {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Tertiary/muted text - softer white for hierarchy */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-zinc-500,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-zinc-400,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-zinc-300,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-gray-500,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-gray-400,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-gray-300,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-content-tertiary {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Blue accent text - light blue for visibility */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-blue-600,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-blue-500,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-blue-700,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-indigo-600,
.theme-dark body.tauri-app.liquid-glass #main-sidebar [class*="text-blue-"] {
    color: #93c5fd !important;
}

/* Icons - white with proper stroke */
.theme-dark body.tauri-app.liquid-glass #main-sidebar svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Muted icons */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-zinc-400 svg,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .text-gray-400 svg {
    color: rgba(255, 255, 255, 0.6) !important;
    stroke: rgba(255, 255, 255, 0.6) !important;
}

/* Vibrancy fallback (older macOS) - fully transparent for true vibrancy */
body.tauri-app.vibrancy #main-sidebar,
body.tauri-app.vibrancy #main-sidebar > div {
    background-color: transparent !important;
}

body.tauri-app.vibrancy #main-sidebar .message-content-surface {
    background-color: transparent !important;
    border-right: none !important;
}

/* Dark mode vibrancy - comprehensive light text for visibility */
/* Base text - all elements default to white */
.theme-dark body.tauri-app.vibrancy #main-sidebar,
.theme-dark body.tauri-app.vibrancy #main-sidebar span,
.theme-dark body.tauri-app.vibrancy #main-sidebar a,
.theme-dark body.tauri-app.vibrancy #main-sidebar button,
.theme-dark body.tauri-app.vibrancy #main-sidebar p,
.theme-dark body.tauri-app.vibrancy #main-sidebar div,
.theme-dark body.tauri-app.vibrancy #main-sidebar h3,
.theme-dark body.tauri-app.vibrancy #main-sidebar h4,
.theme-dark body.tauri-app.vibrancy #main-sidebar label {
    color: #ffffff !important;
}

/* Primary text - bright white */
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-zinc-900,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-zinc-800,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-gray-900,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-gray-800,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-black,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-content-primary {
    color: #ffffff !important;
}

/* Secondary text - slightly muted white */
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-zinc-700,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-zinc-600,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-gray-700,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-gray-600,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-content-secondary {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Tertiary/muted text - softer white for hierarchy */
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-zinc-500,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-zinc-400,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-zinc-300,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-gray-500,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-gray-400,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-gray-300,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-content-tertiary {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Blue accent text - light blue for visibility */
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-blue-600,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-blue-500,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-blue-700,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-indigo-600,
.theme-dark body.tauri-app.vibrancy #main-sidebar [class*="text-blue-"] {
    color: #93c5fd !important;
}

/* Icons - white with proper stroke */
.theme-dark body.tauri-app.vibrancy #main-sidebar svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Muted icons */
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-zinc-400 svg,
.theme-dark body.tauri-app.vibrancy #main-sidebar .text-gray-400 svg {
    color: rgba(255, 255, 255, 0.6) !important;
    stroke: rgba(255, 255, 255, 0.6) !important;
}

/* Account color bar - clean style */
body.tauri-app.liquid-glass #main-sidebar .account-color-bar,
body.tauri-app.vibrancy #main-sidebar .account-color-bar {
    box-shadow: none !important;
}

/* macOS-style rounded selection for sidebar items in liquid glass mode (dark) */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .sidebar-item-active,
.theme-dark body.tauri-app.liquid-glass #main-sidebar .sidebar-item.sidebar-item-active,
.theme-dark body.tauri-app.liquid-glass #main-sidebar a.sidebar-item-active,
.theme-dark body.tauri-app.liquid-glass #main-sidebar button.sidebar-item-active,
.theme-dark body.tauri-app.vibrancy #main-sidebar .sidebar-item-active,
.theme-dark body.tauri-app.vibrancy #main-sidebar .sidebar-item.sidebar-item-active,
.theme-dark body.tauri-app.vibrancy #main-sidebar a.sidebar-item-active,
.theme-dark body.tauri-app.vibrancy #main-sidebar button.sidebar-item-active {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

.theme-dark body.tauri-app.liquid-glass #main-sidebar .sidebar-item-active svg,
.theme-dark body.tauri-app.liquid-glass #main-sidebar a.sidebar-item-active svg,
.theme-dark body.tauri-app.liquid-glass #main-sidebar button.sidebar-item-active svg,
.theme-dark body.tauri-app.vibrancy #main-sidebar .sidebar-item-active svg,
.theme-dark body.tauri-app.vibrancy #main-sidebar a.sidebar-item-active svg,
.theme-dark body.tauri-app.vibrancy #main-sidebar button.sidebar-item-active svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.theme-dark body.tauri-app.liquid-glass #main-sidebar .sidebar-item-active span,
.theme-dark body.tauri-app.liquid-glass #main-sidebar button.sidebar-item-active span,
.theme-dark body.tauri-app.vibrancy #main-sidebar .sidebar-item-active span,
.theme-dark body.tauri-app.vibrancy #main-sidebar button.sidebar-item-active span {
    color: #ffffff !important;
}

.theme-dark body.tauri-app.liquid-glass #main-sidebar .sidebar-item:hover:not(.sidebar-item-active),
.theme-dark body.tauri-app.vibrancy #main-sidebar .sidebar-item:hover:not(.sidebar-item-active) {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
}

/* Remove shadows and white borders from labels and account colors - FLAT DESIGN (dark) */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .shadow-sm,
.theme-dark body.tauri-app.liquid-glass #main-sidebar [class*="shadow"],
.theme-dark body.tauri-app.vibrancy #main-sidebar .shadow-sm,
.theme-dark body.tauri-app.vibrancy #main-sidebar [class*="shadow"] {
    box-shadow: none !important;
}

.theme-dark body.tauri-app.liquid-glass #main-sidebar .ring-1,
.theme-dark body.tauri-app.liquid-glass #main-sidebar [class*="ring-"],
.theme-dark body.tauri-app.vibrancy #main-sidebar .ring-1,
.theme-dark body.tauri-app.vibrancy #main-sidebar [class*="ring-"] {
    --tw-ring-shadow: none !important;
    box-shadow: none !important;
}

/* Label color bars - crisp vertical line (dark) */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .label-color-bar,
.theme-dark body.tauri-app.vibrancy #main-sidebar .label-color-bar {
    box-shadow: none !important;
    outline: none !important;
}

/* Label items - same active styling as system folders (dark) */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .label-link.sidebar-item-active,
.theme-dark body.tauri-app.liquid-glass #main-sidebar a.label-link.sidebar-item-active,
.theme-dark body.tauri-app.vibrancy #main-sidebar .label-link.sidebar-item-active,
.theme-dark body.tauri-app.vibrancy #main-sidebar a.label-link.sidebar-item-active {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
}

/* Labels scrollbar - darker style (dark) */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .scroll-y::-webkit-scrollbar-thumb,
.theme-dark body.tauri-app.vibrancy #main-sidebar .scroll-y::-webkit-scrollbar-thumb,
.theme-dark body.tauri-app.liquid-glass #main-sidebar [class*="overflow"]::-webkit-scrollbar-thumb,
.theme-dark body.tauri-app.vibrancy #main-sidebar [class*="overflow"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
}

.theme-dark body.tauri-app.liquid-glass #main-sidebar .scroll-y:hover::-webkit-scrollbar-thumb,
.theme-dark body.tauri-app.vibrancy #main-sidebar .scroll-y:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Remove all borders in sidebar for clean glass look (dark) */
.theme-dark body.tauri-app.liquid-glass #main-sidebar [class*="border-dashed"],
.theme-dark body.tauri-app.liquid-glass #main-sidebar [class*="border-white"],
.theme-dark body.tauri-app.liquid-glass #main-sidebar .border-t,
.theme-dark body.tauri-app.liquid-glass #main-sidebar [class*="border-zinc"],
.theme-dark body.tauri-app.vibrancy #main-sidebar [class*="border-dashed"],
.theme-dark body.tauri-app.vibrancy #main-sidebar [class*="border-white"],
.theme-dark body.tauri-app.vibrancy #main-sidebar .border-t,
.theme-dark body.tauri-app.vibrancy #main-sidebar [class*="border-zinc"] {
    border-color: transparent !important;
}

/* Active label item - flat background (dark) */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .bg-white.shadow-sm,
.theme-dark body.tauri-app.vibrancy #main-sidebar .bg-white.shadow-sm {
    background-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

/* Empty state in reading pane - lighter for visibility on dark glass */
.theme-dark body.tauri-app.liquid-glass #message-content > .flex-1.text-gray-400,
.theme-dark body.tauri-app.vibrancy #message-content > .flex-1.text-gray-400 {
    color: rgba(255, 255, 255, 0.6) !important;
}

.theme-dark body.tauri-app.liquid-glass #message-content .text-gray-300,
.theme-dark body.tauri-app.vibrancy #message-content .text-gray-300 {
    color: rgba(255, 255, 255, 0.4) !important;
}

.theme-dark body.tauri-app.liquid-glass #message-content svg.text-gray-300,
.theme-dark body.tauri-app.vibrancy #message-content svg.text-gray-300 {
    color: rgba(255, 255, 255, 0.4) !important;
    stroke: rgba(255, 255, 255, 0.4) !important;
}

/* Search pill — dark mode */
.theme-dark #search-pill {
    background: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark #search-pill:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.theme-dark #search-pill svg {
    color: rgba(255, 255, 255, 0.45) !important;
    stroke: rgba(255, 255, 255, 0.45) !important;
}

.theme-dark #search-pill input {
    color: rgba(255, 255, 255, 0.9) !important;
}

.theme-dark #search-pill input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Search pill — dark liquid glass / vibrancy */
.theme-dark body.tauri-app.liquid-glass #search-pill,
.theme-dark body.tauri-app.vibrancy #search-pill {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.10) !important;
}

.theme-dark body.tauri-app.liquid-glass #search-pill:hover,
.theme-dark body.tauri-app.vibrancy #search-pill:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

.theme-dark body.tauri-app.liquid-glass #search-pill svg,
.theme-dark body.tauri-app.vibrancy #search-pill svg {
    color: rgba(255, 255, 255, 0.5) !important;
    stroke: rgba(255, 255, 255, 0.5) !important;
}

.theme-dark body.tauri-app.liquid-glass #search-pill input::placeholder,
.theme-dark body.tauri-app.vibrancy #search-pill input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Kbd badge inside search pill — dark glass */
.theme-dark body.tauri-app.liquid-glass #main-sidebar .kbd,
.theme-dark body.tauri-app.vibrancy #main-sidebar .kbd {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Collaborative editing sync status — dark mode */
.theme-dark .collab-sync-status {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   Per-theme sidebar active item — bright accent colors (dark mode)
   Must beat .theme-dark liquid-glass specificity (1,4,1)
   ═══════════════════════════════════════════════════════════════ */

/* Deep Blue — bright blue */
html.theme-dark.accent-deep-blue body #main-sidebar .sidebar-item.sidebar-item-active,
html.theme-dark.accent-deep-blue body #main-sidebar a.sidebar-item.sidebar-item-active,
html.theme-dark.accent-deep-blue body #main-sidebar a.label-link.sidebar-item-active {
    background-color: #007AFF !important;
    color: white !important;
}
html.theme-dark.accent-deep-blue body #main-sidebar .sidebar-item.sidebar-item-active svg {
    color: white !important;
    stroke: white !important;
}

/* Charcoal — Apple blue */
html.theme-dark.accent-charcoal body #main-sidebar .sidebar-item.sidebar-item-active,
html.theme-dark.accent-charcoal body #main-sidebar a.sidebar-item.sidebar-item-active,
html.theme-dark.accent-charcoal body #main-sidebar a.label-link.sidebar-item-active {
    background-color: #007AFF !important;
    color: white !important;
}
html.theme-dark.accent-charcoal body #main-sidebar .sidebar-item.sidebar-item-active svg {
    color: white !important;
    stroke: white !important;
}

/* Forest — bright green */
html.theme-dark.accent-forest body #main-sidebar .sidebar-item.sidebar-item-active,
html.theme-dark.accent-forest body #main-sidebar a.sidebar-item.sidebar-item-active,
html.theme-dark.accent-forest body #main-sidebar a.label-link.sidebar-item-active {
    background-color: #30D158 !important;
    color: white !important;
}
html.theme-dark.accent-forest body #main-sidebar .sidebar-item.sidebar-item-active svg {
    color: white !important;
    stroke: white !important;
}

/* Plum — bright purple */
html.theme-dark.accent-plum body #main-sidebar .sidebar-item.sidebar-item-active,
html.theme-dark.accent-plum body #main-sidebar a.sidebar-item.sidebar-item-active,
html.theme-dark.accent-plum body #main-sidebar a.label-link.sidebar-item-active {
    background-color: #BF5AF2 !important;
    color: white !important;
}
html.theme-dark.accent-plum body #main-sidebar .sidebar-item.sidebar-item-active svg {
    color: white !important;
    stroke: white !important;
}

/* Slate Teal — bright teal (dark text for legibility) */
html.theme-dark.accent-slate-teal body #main-sidebar .sidebar-item.sidebar-item-active,
html.theme-dark.accent-slate-teal body #main-sidebar a.sidebar-item.sidebar-item-active,
html.theme-dark.accent-slate-teal body #main-sidebar a.label-link.sidebar-item-active {
    background-color: #5AC8FA !important;
    color: #0a1e26 !important;
}
html.theme-dark.accent-slate-teal body #main-sidebar .sidebar-item.sidebar-item-active svg {
    color: #0a1e26 !important;
    stroke: #0a1e26 !important;
}

/* Unread badges on active items — all accent themes */
html.theme-dark.accent-deep-blue body #main-sidebar .sidebar-item.sidebar-item-active .folder-unread-badge,
html.theme-dark.accent-deep-blue body #main-sidebar .sidebar-item.sidebar-item-active .account-unread-badge,
html.theme-dark.accent-charcoal body #main-sidebar .sidebar-item.sidebar-item-active .folder-unread-badge,
html.theme-dark.accent-charcoal body #main-sidebar .sidebar-item.sidebar-item-active .account-unread-badge,
html.theme-dark.accent-forest body #main-sidebar .sidebar-item.sidebar-item-active .folder-unread-badge,
html.theme-dark.accent-forest body #main-sidebar .sidebar-item.sidebar-item-active .account-unread-badge,
html.theme-dark.accent-plum body #main-sidebar .sidebar-item.sidebar-item-active .folder-unread-badge,
html.theme-dark.accent-plum body #main-sidebar .sidebar-item.sidebar-item-active .account-unread-badge {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
}
html.theme-dark.accent-slate-teal body #main-sidebar .sidebar-item.sidebar-item-active .folder-unread-badge,
html.theme-dark.accent-slate-teal body #main-sidebar .sidebar-item.sidebar-item-active .account-unread-badge {
    background-color: rgba(0, 0, 0, 0.15) !important;
    color: #0a1e26 !important;
}