:root {
    --wm-border: #e1dfdd;
    --wm-bg: #f3f2f1;
    --wm-surface: #fff;
    --wm-text: #242424;
    --wm-muted: #605e5c;
    --wm-faint: #8a8886;
    --wm-accent: #0f6cbd;
    --wm-accent-hover: #115ea3;
    --wm-accent-soft: #e8f1fb;
    --wm-danger: #e5484d;
    --wm-danger-soft: #fdecec;
    --wm-warning: #eda100;
    --wm-warning-soft: #fff4d9;
    --wm-folder-bg: #faf9f8;
    /* Nền wm-topbar — tách riêng khỏi --wm-accent (dùng ở khắp nơi cho nút/link) vì dark mode cần topbar
       đen thay vì xanh, trong khi --wm-accent vẫn phải giữ nguyên làm màu nhấn cho phần còn lại của app. */
    --wm-topbar-bg: var(--wm-accent);

    /* Thang chữ dùng chung cho tên folder (sidebar), chủ đề (subject) và tên người gửi trong danh sách
       mail — trước đây mỗi nơi tự đặt 1 rem riêng (.8/.93/1rem) không theo quy luật nào, nhìn không đồng
       bộ khi lướt mắt từ sidebar sang list. Giờ folder name và subject dùng CHUNG 1 biến (cùng cấp độ,
       cùng là "tên mục"), tên người gửi nhỉnh hơn 1 bậc vì là thông tin nổi bật nhất của 1 dòng mail. */
    --wm-fs-list-name: .95rem;
    --wm-fs-list-title: .85rem;
    --wm-fs-list-meta: .8rem;
}

/* ---------- Dark mode ----------
   Theme is picked per-mailbox in Settings ("light"/"dark"/"system") and rendered server-side as
   <html data-theme="…"> to avoid a flash on load. "system" (and any page without the attribute, e.g.
   the pre-login screen) falls through to this prefers-color-scheme block; [data-theme="dark"/"light"]
   below has higher specificity than a bare :root and so overrides it regardless of OS setting. */
@media (prefers-color-scheme: dark) {
    :root {
        --wm-border: #33353a;
        --wm-bg: #16171a;
        --wm-surface: #1e2024;
        --wm-text: #e6e8eb;
        --wm-muted: #9aa1ab;
        --wm-accent: #6c8fff;
        --wm-accent-soft: #22304f;
        --wm-danger: #f0605f;
        --wm-danger-soft: #3a2224;
        --wm-warning: #f0b429;
        --wm-warning-soft: #3a2f14;
        --wm-folder-bg: #1e2024;
        --wm-topbar-bg: #000;
    }
}
:root[data-theme="dark"] {
    --wm-border: #33353a;
    --wm-bg: #16171a;
    --wm-surface: #1e2024;
    --wm-text: #e6e8eb;
    --wm-muted: #9aa1ab;
    --wm-accent: #6c8fff;
    --wm-accent-soft: #22304f;
    --wm-danger: #f0605f;
    --wm-danger-soft: #3a2224;
    --wm-warning: #f0b429;
    --wm-warning-soft: #3a2f14;
    --wm-folder-bg: #1e2024;
    --wm-topbar-bg: #000;
}
:root[data-theme="light"] {
    --wm-border: #e1dfdd;
    --wm-bg: #f3f2f1;
    --wm-surface: #fff;
    --wm-text: #242424;
    --wm-muted: #605e5c;
    --wm-faint: #8a8886;
    --wm-accent: #0f6cbd;
    --wm-accent-hover: #115ea3;
    --wm-accent-soft: #e8f1fb;
    --wm-danger: #e5484d;
    --wm-danger-soft: #fdecec;
    --wm-warning: #eda100;
    --wm-warning-soft: #fff4d9;
    --wm-folder-bg: #faf9f8;
    --wm-topbar-bg: var(--wm-accent);
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--wm-text);
    background: var(--wm-bg);
    font-size: 15px;
}
/* Cỡ chữ mặc định (Settings > Hiển thị, Mailbox.FontSize) — hầu hết font-size trong file này dùng rem
   nên chỉ cần đổi font-size gốc của <html> là toàn bộ giao diện (danh sách mail, khung đọc, soạn thư…)
   scale theo tỉ lệ tương ứng. Cả 5 mức đều +1px so với trước (nhỏ quá) — "medium" (mặc định ở trên) từ
   14px lên 15px, các mức còn lại giữ nguyên khoảng cách tương đối giữa các bậc. */
:root[data-font-size="xsmall"] { font-size: 13px; }
:root[data-font-size="small"] { font-size: 14px; }
:root[data-font-size="medium"] { font-size: 15px; }
:root[data-font-size="large"] { font-size: 16.5px; }
:root[data-font-size="xlarge"] { font-size: 18.5px; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
/* CKEditor's toolbar/dropdown/balloon chrome (buttons, menus — NOT the editable content area, which has
   no font rule of its own and already inherits Roboto from body above) ships with its own hardcoded
   --ck-font-face default; override it here so the editor UI matches the rest of the page instead of
   falling back to its own Helvetica/Arial default. */
.ck.ck-reset_all, .ck.ck-editor { --ck-font-face: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
/* Form controls don't reliably inherit color from the document in every browser (dark-mode-aware UA
   styles can pick their own text color for the light color-scheme our page never declares) — pin it
   explicitly so inputs/selects/textareas always match the theme instead of rendering unreadable. */
input, select, textarea { color: var(--wm-text); }
#swal-foldername {color: #22304f;}
/* ---------- Login page (split screen: dark brand panel + form panel) ---------- */
.wm-login-page { min-height: 100vh; display: flex; background: var(--wm-surface); }

.wm-login-left {
    width: 440px;
    flex-shrink: 0;
    background: linear-gradient(145deg, #1e2a45 0%, #16181d 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}
.wm-login-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(59,130,246,.18) 0%, transparent 65%),
        radial-gradient(ellipse at 70% 70%, rgba(139,92,246,.12) 0%, transparent 60%);
}
.wm-login-brand { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.wm-login-brand-icon {
    width: 72px;
    height: 72px;
    background: rgba(59,130,246,.15);
    border: 1px solid rgba(59,130,246,.3);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wm-login-brand-icon i { font-size: 2rem; color: #3b82f6; }
.wm-login-brand-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 20px; }
.wm-login-brand h1 { font-size: 1.7rem; font-weight: 700; color: #fff; letter-spacing: -.3px; margin: 0; }
.wm-login-brand p { font-size: .88rem; color: #9ca3af; max-width: 280px; line-height: 1.6; margin: 0; }

.wm-login-features { position: relative; z-index: 1; margin-top: 3rem; display: flex; flex-direction: column; gap: .85rem; width: 100%; }
.wm-feature-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: .75rem 1rem;
}
.wm-feature-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: rgba(59,130,246,.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wm-feature-icon i { font-size: 1rem; color: #3b82f6; }
.wm-feature-text { font-size: .8rem; color: #9ca3af; line-height: 1.4; }
.wm-feature-text strong { color: #d1d5db; font-weight: 600; }

.wm-login-right { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; }
.wm-login-form-wrap { width: 100%; max-width: 380px; }
.wm-login-form-wrap h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 .3rem; }
.wm-login-form-wrap .wm-sub { color: var(--wm-muted); margin: 0 0 1.75rem; font-size: .88rem; }

.wm-field { margin-bottom: 1.1rem; }
.wm-field label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .4rem; }
.wm-field input {
    width: 100%;
    padding: .65rem .85rem;
    border: 1.5px solid var(--wm-border);
    border-radius: 10px;
    font-size: .9rem;
    background: var(--wm-bg);
}
.wm-field input:focus { outline: none; border-color: var(--wm-accent); background: var(--wm-surface); box-shadow: 0 0 0 3px var(--wm-accent-soft); }
.wm-field-password-wrap { position: relative; }
.wm-field-password-wrap input { padding-right: 2.6rem; }
.wm-field-toggle-btn {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--wm-muted);
    cursor: pointer;
    padding: .3rem;
    font-size: .9rem;
    line-height: 1;
}
.wm-field-toggle-btn:hover { color: var(--wm-accent); }

.wm-login-remember { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--wm-muted); margin: -.3rem 0 1.1rem; cursor: pointer; }
.wm-login-remember input { margin: 0; }

.wm-login-footer-note { text-align: center; font-size: .76rem; color: var(--wm-muted); margin-top: 1.75rem; }

@media (max-width: 760px) {
    .wm-login-left { display: none; }
}
.swal2-modal {border-radius: 30px;}
.wm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--wm-accent);
    background: var(--wm-accent);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}
.wm-btn:hover { filter: brightness(1.05); }
.wm-btn.wm-btn-block { width: 100%; }
.wm-btn.wm-btn-secondary { background: var(--wm-surface); color: var(--wm-text); border-color: var(--wm-border); text-decoration: none; }
.wm-btn.wm-btn-danger { background: var(--wm-danger); border-color: var(--wm-danger); }
/* Nút chỉ có icon, không chữ (vd đính kèm file cạnh Gửi trong footer soạn thư) — bớt padding ngang cho
   gần vuông thay vì rộng như nút có chữ. */
.wm-btn.wm-btn-icon-only { padding: .6rem .75rem; }
.wm-alert {
    padding: .6rem .8rem;
    border-radius: 8px;
    font-size: .85rem;
    margin-bottom: 1rem;
    background: var(--wm-danger-soft);
    color: var(--wm-danger);
}

/* ---------- App shell ---------- */
.wm-app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ---------- Outlook-style shell (Mail page only) ----------
   Wraps wm-topbar + wm-cmdbar + wm-app in a column so the blue ribbon and flat command bar span the
   full width above the existing rail/sidebar/list/reading-pane row — other pages (Compose, Contacts,
   Calendar, Settings) don't use this wrapper and keep .wm-app at 100vh exactly as before. */
.wm-shell-col { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.wm-shell-col .wm-app { height: auto; flex: 1; min-height: 0; }

/* Top ribbon — matches wwwroot/webmail-outlook-style.html's .ribbon exactly: solid brand blue, fixed
   regardless of light/dark theme (like Outlook's own bar), white icons/text/translucent search pill. */
.wm-topbar {
    height: 48px;
    flex-shrink: 0;
    background: var(--wm-topbar-bg);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 4px;
}
.wm-topbar-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-right: 12px; line-height: 1; }
.wm-topbar-logo {
    width: 28px; height: 26px; border-radius: 6px;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem; color: #fff; flex-shrink: 0;
    line-height: 1;
}
/* Logo ảnh tự upload (Admin > Settings) — dùng <img> thật thay vì background-image trên <div> vuông cố định:
   phần lớn logo thật là hình chữ nhật (wordmark), ép vào khung 32x32 vuông + "contain" để lại khoảng trắng
   2 bên trông lệch tâm, không thẳng hàng với chữ site title bên cạnh. Ở đây chỉ cố định CHIỀU CAO = 32px
   (khớp khung chữ-cái-đầu khi chưa có logo) và để chiều rộng tự co theo đúng tỉ lệ ảnh gốc — logo vuông hay
   ngang đều lên thẳng hàng, không bao giờ méo hình. */
.wm-topbar-logo.wm-topbar-logo--image {
    width: auto;
    max-width: 160px;
    background: none;
    border-radius: 0;
    object-fit: contain;
    object-position: left center;
}
.wm-topbar-brand span { font-size: 18px; font-weight: 600; white-space: nowrap; color: #fff; line-height: 1; }
.wm-topbar-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.wm-topbar-icon-btn:hover { background: rgba(255,255,255,.15); }
.wm-topbar-badge-dot {
    position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--wm-danger); border: 1.5px solid var(--wm-topbar-bg);
}
.wm-topbar-search {
    flex: 1;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.18);
    border-radius: 4px;
    height: 32px;
    transition: background .15s ease;
}
.wm-topbar-search:focus-within { background: #fff; }
/* Contacts dùng ô tìm kiếm này KHÔNG có nút phạm vi (wm-search-scope-btn) đứng trước icon như bên Mail —
   thiếu phần đệm trái mà nút đó vốn tạo ra khiến icon kính lúp dính sát viền trái. Bo tròn hẳn thành viên
   thuốc (pill, bán kính = nửa chiều cao) thay vì góc vuông 4px kiểu Outlook — hợp với ô tìm kiếm đứng độc
   lập hơn, không có gì để "ngắt" hình chữ nhật thành nhiều đoạn như bên Mail. */
.wm-topbar-search-plain { border-radius: 16px; padding-left: .9rem; }
.wm-topbar-search-plain .wm-topbar-search-icon { margin-left: 0; }
.wm-topbar-search-plain .wm-topbar-search-input { padding-right: .9rem; }
/* Icon kính lúp giờ là 1 flex item thường (đứng sau nút phạm vi tìm kiếm), không còn absolute-overlay lên
   input như trước — layout đơn giản hơn khi có thêm .wm-search-scope-btn chen vào bên trái. */
.wm-topbar-search-icon {
    color: rgba(255,255,255,.85);
    font-size: .8rem;
    margin: 0 .5rem 0 .1rem;
    flex-shrink: 0;
    pointer-events: none;
}
/* Cố định màu tối (giống --wm-muted của theme sáng) chứ không dùng var(--wm-muted) — cùng lý do màu chữ
   input ở dưới: nền focus luôn #fff bất kể theme, var(--wm-muted) ở dark mode lại gần trắng, không đọc được. */
.wm-topbar-search:focus-within .wm-topbar-search-icon { color: #605e5c; }
.wm-topbar-search-input {
    flex: 1;
    min-width: 0;
    height: 32px;
    border: none;
    background: none;
    padding: 0 2.2rem 0 0;
    font-size: .85rem;
    color: #fff;
}
.wm-topbar-search-input::placeholder { color: rgba(255,255,255,.85); }
/* Nền ô search khi focus LUÔN là #fff (dòng .wm-topbar-search:focus-within phía trên), bất kể theme đang
   sáng hay tối — nên màu chữ ở đây phải cố định luôn tối màu (#242424, giống --wm-text của theme sáng),
   KHÔNG được dùng var(--wm-text) như trước: ở dark mode --wm-text là màu gần trắng (#e6e8eb), ghép với nền
   trắng cố định ở trên thành chữ trắng trên nền trắng, không đọc được. */
.wm-topbar-search:focus-within .wm-topbar-search-input { color: #242424; }
.wm-topbar-search:focus-within .wm-topbar-search-input::placeholder { color: #8a8886; }
.wm-topbar-search-input:focus { outline: none; }
.wm-topbar-search-btn {
    position: absolute;
    right: .3rem;
    width: 1.6rem;
    height: 1.6rem;
    border: none;
    background: none;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
}
.wm-topbar-search:focus-within .wm-topbar-search-btn { color: #605e5c; }
.wm-topbar-search-btn:hover { color: var(--wm-accent) !important; }

/* Nút "Junk Email ⌄" / "Tất cả thư mục ⌄"... đứng đầu ô tìm kiếm (giống Outlook) — bấm mở
   .wm-search-scope-menu bên dưới để đổi phạm vi tìm kiếm trước khi bấm tìm. */
.wm-search-scope-btn {
    display: flex;
    align-items: center;
    gap: .3rem;
    height: 100%;
    flex-shrink: 0;
    max-width: 130px;
    margin-right: .4rem;
    padding: 0 .6rem 0 .8rem;
    border: none;
    border-right: 1px solid rgba(255,255,255,.3);
    background: none;
    color: rgba(255,255,255,.92);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}
.wm-search-scope-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-search-scope-btn i { font-size: .6rem; flex-shrink: 0; }
.wm-topbar-search:focus-within .wm-search-scope-btn { color: #605e5c; border-right-color: #e1dfdd; }
.wm-search-scope-btn:hover { background: rgba(0,0,0,.06); }
.wm-search-scope-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    min-width: 190px;
    padding: .35rem;
    z-index: 60;
}
.wm-search-scope-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: .5rem .7rem;
    border: 1px solid transparent;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: .85rem;
    color: var(--wm-text);
}
.wm-search-scope-option:hover { background: var(--wm-bg); }
.wm-search-scope-option.active { border-color: var(--wm-accent); }
.wm-topbar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
.wm-topbar-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: #fff; color: var(--wm-accent); font-weight: 700; font-size: .72rem;
    display: flex; align-items: center; justify-content: center;
    margin-left: 4px; cursor: pointer; flex-shrink: 0;
}

/* Command bar — a single flat row of buttons below the ribbon, matching .command-bar in the reference
   (no File/Home/View/Help ribbon tabs — this app doesn't have separate "pages" to switch between there). */
.wm-cmdbar {
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 12px;
    border-bottom: 1px solid var(--wm-border);
    background: var(--wm-surface);
}
.wm-cmd-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 4px;
    border: none;
    background: none;
    font-size: .8rem;
    color: var(--wm-muted);
    cursor: pointer;
}
.wm-cmd-btn:hover { background: var(--wm-bg); color: var(--wm-text); }
.wm-cmd-btn i { font-size: .9rem; }
/* Nút nổi bật (vd "Thư mới") — nền accent đặc, tách khỏi các nút phẳng còn lại của cmdbar, giống nút
   "New mail" của Outlook. */
.wm-cmd-btn-primary { background: var(--wm-accent); color: #fff; }
.wm-cmd-btn-primary:hover { background: var(--wm-accent-hover); color: #fff; }
.wm-cmd-sep { width: 1px; height: 20px; background: var(--wm-border); margin: 0 6px; flex-shrink: 0; }
.wm-cmd-btn.wm-empty-trash-btn:hover { background: var(--wm-danger-soft); color: var(--wm-danger); }
/* Compose page reuses the same command bar (see Compose.cshtml) — buttons that only make sense with a
   message/list open (Xoá/Đọc-chưa đọc/Gắn cờ/…) are visually dimmed but stay clickable (shows a toast
   explaining why, see compose.js), same "honest, not silently broken" spirit as wm-rail-disabled. */
.wm-cmd-btn.wm-cmd-inactive { opacity: .45; }
/* Mail page: same dimmed look, but a real disabled state (no selection/open email yet) — becomes
   clickable/bright once updateCmdBarState (webmail.js) detects a valid target. */
.wm-cmd-btn:disabled { opacity: .45; cursor: not-allowed; }
.wm-cmd-btn:disabled:hover { background: none; color: var(--wm-muted); }

/* "Tất cả" / "Chưa đọc" filter tabs above the message list — a real client-side filter (see
   applyListFilter in webmail.js), matching .list-filter in the reference. */
.wm-list-tabs { display: flex; gap: 12px; padding: 0 14px 10px; font-size: .75rem; color: var(--wm-muted); border-bottom: 1px solid var(--wm-border); }
.wm-list-tab { padding-bottom: 2px; cursor: pointer; }
.wm-list-tab.active { color: var(--wm-accent); font-weight: 600; border-bottom: 2px solid var(--wm-accent); }

/* Far-left app-switcher rail — matches .app-rail in the reference: light gray bg, square-ish icons. */
.wm-rail {
    width: 48px;
    flex-shrink: 0;
    background: var(--wm-bg);
    border-right: 1px solid var(--wm-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 0;
}
.wm-rail-top, .wm-rail-bottom { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.wm-rail-btn {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--wm-muted);
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wm-rail-btn:hover { background: var(--wm-bg); }
.wm-rail-btn.active { background: var(--wm-accent-soft); color: var(--wm-accent); }
.wm-rail-btn.wm-rail-disabled { opacity: .35; cursor: not-allowed; }
.wm-rail-avatar { cursor: pointer; }
.wm-rail-btn-logout:hover { background: var(--wm-danger-soft); color: var(--wm-danger); }

/* Quota-ring avatar: a small conic progress ring (storage used / limit) in place of a flat initial. */
.wm-quota-ring {
    position: relative;
    background: var(--wm-bg);
}
.wm-quota-ring .wm-quota-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.wm-quota-ring .wm-quota-track { fill: none; stroke: var(--wm-border); stroke-width: 3; }
.wm-quota-ring .wm-quota-fill {
    fill: none;
    stroke: var(--wm-accent);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray .3s ease;
}
.wm-quota-ring .wm-quota-fill.wm-quota-warning { stroke: var(--wm-warning); }
.wm-quota-ring .wm-quota-fill.wm-quota-critical { stroke: var(--wm-danger); }
.wm-quota-ring .wm-quota-label {
    position: relative;
    z-index: 1;
    font-size: .58rem;
    font-weight: 700;
    color: var(--wm-text);
}

/* Usage-details popup opened by clicking the quota button */
.wm-quota-modal { text-align: left; }
.wm-quota-modal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem 0;
    font-size: .9rem;
}
.wm-quota-modal-row strong { font-weight: 700; }
.wm-quota-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--wm-border);
    overflow: hidden;
    margin-top: .35rem;
}
.wm-quota-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--wm-accent);
    transition: width .3s ease;
}
.wm-quota-bar-fill.wm-quota-warning { background: var(--wm-warning); }
.wm-quota-bar-fill.wm-quota-critical { background: var(--wm-danger); }
.wm-quota-modal-percent { margin-top: .3rem; font-size: .78rem; color: var(--wm-muted); text-align: right; }
.wm-quota-modal-divider { border-top: 1px solid var(--wm-border); margin: .75rem 0; }

/* Folder pane — matches .folder-pane in the reference (off-white bg, narrower than before). Uses
   --wm-folder-bg (defined alongside the other theme variables at the top of this file) rather than a
   hardcoded color, so it still follows the light/dark/system precedence the rest of the file already
   established instead of fighting @media specificity here. */
.wm-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--wm-folder-bg);
    border-right: 1px solid var(--wm-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 10px 8px;
}
.wm-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}
.wm-avatar.wm-avatar-sm { width: 34px; height: 34px; font-size: .8rem; }

.wm-search-wrap {
    position: relative;
    margin: 0 1rem .75rem;
}
.wm-search-icon-btn {
    position: absolute;
    right: .3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--wm-muted);
    font-size: .8rem;
    cursor: pointer;
    border-radius: 6px;
}
.wm-search-icon-btn:hover { color: var(--wm-accent); background: var(--wm-bg); }
.wm-search-input {
    width: 100%;
    padding: .5rem 1.9rem .5rem .6rem;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    font-size: .85rem;
    background: var(--wm-bg);
}
.wm-search-input:focus { outline: none; border-color: var(--wm-accent); background: var(--wm-surface); }

.wm-folders-section { flex: 1; overflow-y: auto; }
/* Favorites (folder người dùng tự ghim, xem renderFavorites trong shell.js) đứng trên khối account/folder
   chính, không chia đều chiều cao với nó — chỉ cao bằng đúng nội dung, có viền dưới phân tách rõ 2 khối. */
.wm-favorites-section { flex: 0 0 auto; overflow: visible; border-bottom: 1px solid var(--wm-border); padding-bottom: .4rem; margin-bottom: .4rem; }
/* matches .folder-title in the reference */
.wm-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 4px;
    font-size: .69rem;
    font-weight: 700;
    color: var(--wm-faint);
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* Header hiện địa chỉ mailbox đang đăng nhập (thay vì nhãn tĩnh "Thư mục") — không viết hoa/giãn chữ như
   nhãn thường, và cắt bớt bằng "…" thay vì xuống dòng vì địa chỉ email có thể khá dài. Font-size nhích lên
   1 chút so với .wm-section-head gốc (.69rem) — chữ thường không viết hoa nhìn "nhỏ" hơn rõ rệt so với
   nhãn viết hoa (FAVORITES/FOLDERS) dù đo bằng công cụ thì đúng là cùng cỡ, bù lại bằng mắt cho cân đối. */
.wm-account-head span {
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: .78rem;
    text-overflow: ellipsis;
}
/* Thu gọn/mở rộng danh sách folder (xem btnToggleFolderList trong shell.js) — nút bọc cả icon chevron
   lẫn địa chỉ mailbox, chiếm hết phần còn lại của hàng (trừ nút "Folder mới" cạnh nó). */
.wm-account-toggle {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    flex: 1;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
.wm-account-toggle i { font-size: .65rem; flex-shrink: 0; transition: transform .15s ease; }
.wm-account-toggle.collapsed i { transform: rotate(-90deg); }
.wm-folders.collapsed { display: none; }
.wm-section-action {
    background: none;
    border: none;
    color: var(--wm-muted);
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
    padding: .1rem .3rem;
    border-radius: 4px;
}
.wm-section-action:hover { background: var(--wm-bg); color: var(--wm-accent); }
.wm-empty-trash-btn:hover { background: var(--wm-danger-soft); color: var(--wm-danger); }

/* matches .folder-item in the reference */
.wm-folder-group { margin-bottom: .1rem; }
.wm-folder-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--wm-fs-list-title);
    color: var(--wm-text);
}
.wm-folder-row:hover { background: var(--wm-bg); }
.wm-folder-row.active { background: var(--wm-accent-soft); color: var(--wm-accent); font-weight: 600; }
.wm-folder-row .wm-folder-icon { font-size: .9rem; width: 1rem; text-align: center; color: var(--wm-muted); }
.wm-folder-row.active .wm-folder-icon { color: var(--wm-accent); }
.wm-folder-row .wm-folder-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* matches .folder-count in the reference */
.wm-folder-row .wm-folder-unread {
    margin-left: auto;
    font-size: .69rem;
    background: none;
    color: var(--wm-faint);
    padding: 0;
    border-radius: 0;
}
.wm-folder-row.active .wm-folder-unread { color: var(--wm-accent); font-weight: 700; }
.wm-folder-row .wm-folder-delete { display: none; background: none; border: none; color: var(--wm-muted); cursor: pointer; padding: 0 .2rem; }
.wm-folder-row:hover .wm-folder-delete { display: inline-block; }
.wm-folder-row .wm-folder-rename { display: none; background: none; border: none; color: var(--wm-muted); cursor: pointer; padding: 0 .2rem; font-size: .8rem; }
.wm-folder-row:hover .wm-folder-rename { display: inline-block; }
.wm-folder-row .wm-folder-rename:hover, .wm-folder-row .wm-folder-delete:hover { color: var(--wm-accent); }

/* Kéo-thả email vào folder — xem handleRowDragStart/bindFolderDropTarget trong webmail.js */
.wm-message-row.wm-dragging { opacity: .4; }
.wm-folder-row.wm-drop-target {
    outline: 2px dashed var(--wm-accent);
    outline-offset: -2px;
    background: var(--wm-accent-soft);
    color: var(--wm-accent);
}
/* Ảnh kéo tuỳ chỉnh (dataTransfer.setDragImage) — luôn tạo ở góc trái trên màn hình (top/left âm) rồi chụp
   ngay lập tức, không bao giờ thật sự hiện ra cho người dùng thấy ở vị trí đó. */
.wm-drag-badge {
    position: fixed;
    top: -100px;
    left: -100px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--wm-accent);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.wm-folder-sub { padding-left: 1.1rem; }
.wm-folder-sub.collapsed { display: none; }
/* Mũi tên thu gọn/mở rộng — chỉ render (xem renderFolderRow trong shell.js) cho folder có subfolder bên
   trong; folder lá dùng .wm-folder-toggle-spacer cùng chiều rộng để tên/icon các dòng thẳng hàng nhau. */
.wm-folder-row .wm-folder-toggle,
.wm-folder-row .wm-folder-toggle-spacer {
    width: .85rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wm-folder-row .wm-folder-toggle {
    background: none;
    border: none;
    padding: 0;
    color: var(--wm-muted);
    font-size: .6rem;
    cursor: pointer;
    transition: transform .15s ease;
}
.wm-folder-row .wm-folder-toggle:hover { color: var(--wm-accent); }
.wm-folder-row .wm-folder-toggle.collapsed { transform: rotate(-90deg); }

/* ---------- Message list ---------- */
.wm-message-list {
    position: relative;
    width: 370px;
    flex-shrink: 0;
    background: var(--wm-surface);
    border-right: 1px solid var(--wm-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Kéo để đổi độ rộng danh sách mail (xem initListResize trong webmail.js) — dải mỏng đè lên đúng viền
   phải, mở rộng vùng bấm/kéo ra ngoài viền 1px thật để dễ trúng chuột hơn mà không đổi bố cục. */
.wm-list-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
    background: transparent;
}
.wm-list-resize-handle:hover, .wm-list-resize-handle.dragging { background: var(--wm-accent); opacity: .5; }
.wm-list-header {
    padding: .95rem 1.1rem .6rem;
    font-weight: 700;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wm-list-header-left { display: flex; align-items: center; gap: .65rem; }
/* Ghim folder đang xem vào Favorites (xem btnFolderFavorite trong Index.cshtml) — nhỏ hơn wm-star-btn
   mặc định (vốn để dùng trong khung đọc 1 email) cho vừa hàng tiêu đề danh sách. */
.wm-list-favorite-btn { font-size: .95rem; padding: .15rem; }
.wm-list-header-right { display: flex; align-items: center; gap: .3rem; }
.wm-list-compose-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: var(--wm-accent);
    color: #fff;
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wm-list-compose-btn:hover { filter: brightness(1.06); }
.wm-select-all-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--wm-accent); }
.wm-list-scroll { flex: 1; overflow-y: auto; }
.wm-list-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1.1rem;
    border-top: 1px solid var(--wm-border);
    flex-shrink: 0;
    font-size: .78rem;
    color: var(--wm-muted);
}
.wm-pagination-btns { display: flex; align-items: center; gap: .5rem; }
.wm-pagination-page { min-width: 3.5rem; text-align: center; }
.wm-pagination-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--wm-border);
    background: var(--wm-surface);
    color: var(--wm-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
}
.wm-pagination-btn:hover:not(:disabled) { background: var(--wm-bg); border-color: var(--wm-accent); color: var(--wm-accent); }
.wm-pagination-btn:disabled { opacity: .35; cursor: not-allowed; }
.wm-message-row {
    display: flex;
    gap: .65rem;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--wm-border);
    cursor: pointer;
    position: relative;
}
.wm-message-row:hover { background: var(--wm-bg); }
.wm-message-row.active { background: var(--wm-accent-soft); }
.wm-message-row.selected { background: var(--wm-accent-soft); }
/* matches .mail-row.selected::before in the reference — a thin accent bar on the selected row's left edge */
.wm-message-row.active::before, .wm-message-row.selected::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--wm-accent);
}
.wm-message-row.unread .wm-msg-from,
.wm-message-row.unread .wm-msg-subject { font-weight: 700; }
.wm-msg-select { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; }
.wm-msg-select input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--wm-accent); }

/* Conversation view — "N" count badge next to sender, and the chevron that expands a thread's individual
   messages inline in the list (separate from opening the full stacked thread in the reading pane). */
.wm-msg-thread-toggle {
    align-self: center;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--wm-muted);
    cursor: pointer;
    padding: .3rem;
    font-size: .78rem;
    border-radius: 4px;
}
.wm-msg-thread-toggle:hover { background: var(--wm-border); color: var(--wm-accent); }
.wm-thread-sublist { background: var(--wm-bg); }
.wm-thread-subrow { padding-left: 2.6rem; }
.wm-thread-subrow .wm-msg-subject { display: none; }

.wm-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wm-accent);
    flex-shrink: 0;
    margin-top: .4rem;
}
.wm-msg-body { min-width: 0; flex: 1; }
.wm-msg-top { display: flex; justify-content: space-between; gap: .5rem; }
.wm-msg-from { font-size: var(--wm-fs-list-name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Thread size badge next to the sender name — a soft pill that lights up accent-colored when the
   conversation has something unread, same visual language as the unread dot elsewhere in the row. */
.wm-msg-thread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3em;
    padding: .04rem .38rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--wm-muted);
    background: var(--wm-border);
    border-radius: 999px;
    vertical-align: middle;
    transition: background .15s ease, color .15s ease;
}
.wm-message-row.unread .wm-msg-thread-count { background: var(--wm-accent-soft); color: var(--wm-accent); }
/* Groups the (optional) folder badge with the timestamp on the row's right edge, so justify-content:
   space-between on .wm-msg-top still only ever sees two children (sender vs. this cluster). */
.wm-msg-top-right { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
/* Shown only when conversation view merges in a message from a folder other than the one being browsed
   (see folderBadgeHtml in webmail.js) — e.g. a Sent reply surfacing inside an Inbox thread. */
.wm-msg-folder-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    color: var(--wm-muted);
    background: var(--wm-bg);
    border: 1px solid var(--wm-border);
    border-radius: 999px;
    padding: .04rem .45rem;
    white-space: nowrap;
}
.wm-msg-time { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.wm-msg-date { font-size: .72rem; color: var(--wm-muted); white-space: nowrap; }
.wm-msg-hour { font-size: .68rem; color: var(--wm-muted); opacity: .75; white-space: nowrap; }
.wm-msg-subject { font-size: var(--wm-fs-list-title); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-msg-preview { font-size: var(--wm-fs-list-meta); color: var(--wm-muted); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-empty-state { padding: 2rem 1rem; text-align: center; color: var(--wm-muted); font-size: .88rem; }

/* ---------- Reading pane ---------- */
/* wm-reading-col bọc ngoài wm-reading-pane (xem Index.cshtml) để chứa nút "quay lại" trên di động (nằm
   ngoài #readingPane vì nội dung bên trong bị ghi đè mỗi lần mở email) — bản thân nó phải là flex:1 +
   flex container thì wm-reading-pane bên trong mới giãn hết cỡ được, không riêng gì màn hình hẹp. */
.wm-reading-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.wm-reading-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--wm-surface); }
.wm-reading-toolbar {
    padding: .65rem 1.25rem;
    border-bottom: 1px solid var(--wm-border);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.wm-toolbar-btn {
    background: none;
    border: none;
    color: var(--wm-text);
    text-decoration: none;
    cursor: pointer;
    font-size: .82rem;
    padding: .4rem .6rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.wm-toolbar-btn:hover { background: var(--wm-bg); }
.wm-toolbar-btn.wm-toolbar-danger:hover { background: var(--wm-danger-soft); color: var(--wm-danger); }
/* matches .read-toolbar .cmd-btn.primary in the reference — Reply stands out from Reply all/Forward/... */
.wm-toolbar-btn.wm-thread-card-reply { /*background: var(--wm-accent-soft); color: var(--wm-accent);*/ }
.wm-toolbar-btn.wm-thread-card-reply:hover { filter: brightness(0.97); }
.wm-toolbar-divider { width: 1px; align-self: stretch; background: var(--wm-border); margin: .25rem .4rem; }
.wm-reading-toolbar .wm-spacer { flex: 1; }
.wm-star-btn { background: none; border: none; cursor: pointer; font-size: 1.15rem; color: var(--wm-border); padding: .3rem; }
.wm-star-btn.active { color: #f5a623; }

.wm-reading-body { flex: 1; overflow-y: auto; padding: 1.5rem 1.75rem; }
.wm-reading-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.wm-reading-subject { font-size: 1.3rem; font-weight: 700; margin: 0 0 1rem; flex: 1; }
/* Meta is a header row for the message below it, set off by the same hairline-divider convention the
   rest of the app already uses (folder rows, message rows, the toolbar) — not a floating card, just a
   clean rule between "who/when" and the body copy. */
.wm-reading-meta {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    /* border-bottom: 1px solid var(--wm-border); */
}
.wm-reading-meta .wm-avatar { width: 42px; height: 42px; }
.wm-reading-meta-text .wm-from-name { font-weight: 600; }
.wm-reading-meta-text .wm-to { font-size: .8rem; color: var(--wm-muted); margin-top: .15rem; }
/* Contact name vs raw address inline in From/To/Cc/Bcc ("Name <email>") — name stands out, address recedes. */
.wm-reading-meta-text .wm-contact-name { font-weight: 600; color: var(--wm-text); }
.wm-reading-meta-text .wm-addr-inline { font-weight: 400; color: var(--wm-muted); }
.wm-reading-date { font-size: .8rem; color: var(--wm-muted); white-space: nowrap; }
/* Wraps the date + the optional "⋮" more-actions button (older thread cards only, see buildThreadCard/
   openMoreMenu in webmail.js) so both sit together at the right edge of .wm-reading-meta. */
.wm-reading-date-wrap { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.wm-thread-card-more {
    background: none;
    border: none;
    color: var(--wm-muted);
    cursor: pointer;
    padding: .25rem .4rem;
    border-radius: 4px;
    font-size: .85rem;
}
.wm-thread-card-more:hover { background: var(--wm-border); color: var(--wm-accent); }
/* Popup opened by .wm-thread-card-more — appended to document.body with position:fixed so it isn't
   clipped by the reading pane's own scroll container. */
.wm-more-menu {
    position: fixed;
    z-index: 1000;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    padding: .35rem;
    min-width: 170px;
    display: flex;
    flex-direction: column;
}
.wm-more-menu button {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: none;
    border: none;
    text-align: left;
    font-size: .85rem;
    color: var(--wm-text);
    padding: .5rem .6rem;
    border-radius: 6px;
    cursor: pointer;
}
.wm-more-menu button:hover { background: var(--wm-bg); }
/* Dropdown tài khoản (avatar/cài đặt trên rail lẫn topbar — xem openSettingsMenu trong shell.js), dùng
   chung khung .wm-more-menu, chỉ rộng hơn 1 chút cho vừa "Dung lượng lưu trữ" và có nút Đăng xuất tô đỏ
   khi hover, khác các mục còn lại. */
.wm-account-menu { min-width: 380px; }
.wm-more-menu button.wm-more-menu-danger:hover { background: var(--wm-danger-soft); color: var(--wm-danger); }
/* Tên hiển thị + địa chỉ email đang đăng nhập, đứng đầu dropdown tài khoản (xem openSettingsMenu) — để
   biết đang mở đúng mailbox nào, nhất là khi quản lý nhiều mailbox khác nhau. */
.wm-account-menu-header { padding: .5rem .6rem .6rem; }
.wm-account-menu-name { font-size: .9rem; font-weight: 700; color: var(--wm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-account-menu-email { font-size: .8rem; color: var(--wm-muted); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-account-menu-sep { height: 1px; background: var(--wm-border); margin: 0 0 .35rem; }
/* Lưới icon kiểu "Google apps" (xem openSettingsMenu) thay cho danh sách nút full-width — icon tròn ở
   trên, nhãn ngắn bên dưới, 3 cột/hàng. Đăng xuất KHÔNG nằm trong lưới này (giữ dạng nút full-width tô đỏ
   khi hover như cũ) vì đây là hành động khác hẳn nhóm "cài đặt/xem" còn lại — tách riêng cho rõ, tránh bấm
   nhầm giữa các ô lưới sát nhau. */
.wm-account-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .15rem; padding: .35rem; }
.wm-account-menu-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    background: none;
    border: none;
    padding: .6rem .2rem;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
}
.wm-account-menu-grid-item:hover { background: var(--wm-bg); }
.wm-account-menu-grid-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wm-accent-soft);
    color: var(--wm-accent);
    font-size: 1.05rem;
}
.wm-account-menu-grid-label { font-size: .72rem; line-height: 1.2; color: var(--wm-text); white-space: nowrap; }
.wm-reading-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: .92rem;
    line-height: 1.6;
}

/* Conversation view — Gmail-style stacked thread in the reading pane (renderThreadPane/buildThreadCard in
   webmail.js). No card boxes — messages are just separated by a plain hairline (like Gmail's own thread
   view), the first message flush with the top of the stack. Collapsed ones are a one-line summary,
   expanded ones reuse .wm-reading-meta/.wm-reading-content unchanged so they look identical to the
   single-message view. */
.wm-reading-top .wm-msg-thread-count {
    background: var(--wm-border);
    border-radius: 10px;
    padding: .1rem .55rem;
    align-self: center;
}
.wm-thread-cards { display: flex; flex-direction: column; margin-top: .5rem; }
.wm-thread-card { border-top: 1px solid var(--wm-border); padding: 1rem 0; }
.wm-thread-cards .wm-thread-card:first-child { border-top: none; padding-top: 0; }
.wm-thread-card.collapsed:hover { background: var(--wm-bg); }
.wm-thread-card-summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
}
.wm-thread-card-summary-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: .6rem;
}
.wm-thread-card-from { font-weight: 600; flex-shrink: 0; }
.wm-thread-card-preview {
    color: var(--wm-muted);
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.wm-thread-card-date { font-size: .78rem; color: var(--wm-muted); white-space: nowrap; flex-shrink: 0; }
/* Per-card Reply/Reply All/Forward (buildThreadCardActionsHtml) — lets the user reply to any one message
   in the thread, not just whichever the page-level toolbar targets (the newest). */
.wm-thread-card-actions {
    display: flex;
    gap: .25rem;
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--wm-border);
}

.wm-select {
    padding: .5rem .6rem;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    font-size: .85rem;
    background: var(--wm-surface);
}

/* SweetAlert2 form bits reused across modals */
.wm-swal-form .form-group { margin-bottom: .85rem; text-align: left; }
.wm-swal-form label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }
/* .wm-swal-form label (display:block) có độ đặc hiệu cao hơn .wm-rule-enabled-check (display:flex) nên
   luôn thắng bất kể thứ tự khai báo — ghi đè riêng cho trường hợp checkbox dùng lại class đó bên trong
   modal (vd "Cả ngày" ở form Sự kiện lịch) để checkbox và chữ canh giữa cùng 1 hàng thay vì lệch baseline. */
.wm-swal-form label.wm-rule-enabled-check { display: flex; align-items: center; font-weight: 400; margin-bottom: 0; }
.wm-swal-form input, .wm-swal-form select, .wm-swal-form textarea {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    font-size: .9rem;
    font-family: inherit;
    color: #242424;
}
.wm-swal-form textarea { resize: vertical; }
/* input[type=checkbox/radio] không nên kéo giãn theo width:100% ở trên — sẽ bị phóng to hết chiều ngang modal. */
.wm-swal-form input[type="checkbox"], .wm-swal-form input[type="radio"] { width: auto; }

/*
 * Custom folder-tree picker used instead of a native <select> in the SweetAlert2 modals: many
 * browsers render an open <select>'s dropdown list with the OS's native UI font rather than the
 * page's CSS font, which can drop glyph coverage for Vietnamese diacritics. A plain div-based list
 * always renders through our own font stack (Lato), and lets us show real hierarchy/indentation.
 */
.wm-folder-picker {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    text-align: left;
}
.wm-folder-picker-item {
    padding: .5rem .75rem;
    cursor: pointer;
    font-size: .87rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid var(--wm-border);
}
.wm-folder-picker-item:last-child { border-bottom: none; }
.wm-folder-picker-item:hover { background: var(--wm-bg); }
.wm-folder-picker-item.selected { background: var(--wm-accent-soft); color: var(--wm-accent); font-weight: 700; }
.wm-folder-picker-item.disabled { color: var(--wm-muted); opacity: .55; cursor: not-allowed; }
.wm-folder-picker-item.disabled:hover { background: none; }

/* Attachments */
/* Sits right under .wm-reading-meta (inside .wm-reading-body/.wm-thread-card, both already padded
   horizontally), so no side padding here — just the vertical rhythm + separating hairline. */
.wm-attachment-bar { border-top: 1px solid var(--wm-border); padding: .85rem 0; margin-bottom: .5rem; }
.wm-attachment-divider { border-top: 1px solid var(--wm-border); margin: 1.5rem 0 1rem; }
/* max-height + cuộn dọc — trước đây không giới hạn, message có nhiều file đính kèm (đặc biệt sau khi thêm
   nút "Tải tất cả") làm khối này kéo dài xuống rất nhiều dòng, đẩy nội dung mail xuống xa phía dưới, nhìn lộn
   xộn. ~2 hàng chip là vừa mắt, nhiều hơn thì tự cuộn trong chính khung này. */
.wm-attachment-list { display: flex; flex-wrap: wrap; gap: .5rem; padding-right: 2px; }
.wm-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 220px;
    padding: .4rem .7rem;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    font-size: .8rem;
    background: var(--wm-bg);
    text-decoration: none;
    color: var(--wm-text);
}
.wm-attachment-chip:hover { border-color: var(--wm-accent); color: var(--wm-accent); }
/* min-width:0 bắt buộc phải có — mặc định 1 flex item không tự co xuống dưới độ rộng nội dung của nó, nếu
   thiếu dòng này thì overflow/text-overflow bên dưới không có tác dụng gì với tên file dài. */
.wm-attachment-chip .wm-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wm-attachment-chip .wm-attachment-size { color: var(--wm-muted); flex-shrink: 0; white-space: nowrap; }
/* "Tải tất cả (.zip)" — chỉ hiện khi >2 file đính kèm (xem buildAttachmentsHtml, webmail.js). Tông màu nhấn
   thay vì trung tính như chip file thường, để rõ đây là 1 HÀNH ĐỘNG (tải cả 1 file .zip gộp), không phải
   thêm 1 file trong danh sách. */
.wm-attachment-download-all {
    background: var(--wm-accent-soft);
    border-color: var(--wm-accent);
    color: var(--wm-accent);
    font-weight: 600;
}
.wm-attachment-download-all:hover { background: var(--wm-accent); color: #fff; }
.wm-attachment-remove {
    border: none;
    background: none;
    color: var(--wm-muted);
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
    padding: 0 0 0 .1rem;
}
.wm-attachment-remove:hover { color: var(--wm-danger); }
.wm-msg-attach-icon { color: var(--wm-muted); font-size: .82rem; flex-shrink: 0; align-self: center; }
.wm-html-frame { width: 100%; border: none; min-height: 200px; }
/* Banner "Đã chặn N ảnh từ xa..." — hiện trên đầu iframe khi blockRemoteImages (shell.js) tìm thấy ảnh
   http(s):// trong email, trước khi người dùng bấm "Tải ảnh" để xem đầy đủ. */
.wm-remote-image-banner {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    background: var(--wm-warning-soft);
    border: 1px solid var(--wm-warning);
    border-radius: 8px;
    padding: .55rem .8rem;
    margin-bottom: .6rem;
    font-size: .85rem;
    color: var(--wm-text);
}
.wm-remote-image-banner i { color: var(--wm-warning); }
.wm-remote-image-banner button {
    margin-left: auto;
    border: 1px solid var(--wm-accent);
    background: none;
    color: var(--wm-accent);
    border-radius: 6px;
    padding: .3rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.wm-remote-image-banner button:hover { background: var(--wm-accent); color: #fff; }

.wm-attachment-list:empty { display: none; }
/* Kéo-thả file vào cả khung soạn thảo (không còn khung riêng luôn hiện sẵn nữa — nút đính kèm chuyển
   xuống footer cạnh Gửi, xem Compose.cshtml/compose.js) — viền nét đứt phủ lên trên bằng outline (không
   chiếm layout như border) để không bị giật khi bật/tắt lúc kéo file qua/ra khỏi khung. */
#composeForm.wm-attach-dropzone--active {
    outline: 2px dashed var(--wm-accent);
    outline-offset: -8px;
    background: var(--wm-accent-soft);
    border-radius: 10px;
    transition: background .15s ease;
}
.wm-attach-browse {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    align-self: flex-start;
    padding: .4rem .75rem;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    font-size: .82rem;
    color: var(--wm-muted);
    cursor: pointer;
    background: var(--wm-surface);
}
.wm-attach-browse:hover { border-color: var(--wm-accent); color: var(--wm-accent); }

/* Contact autocomplete dropdown for the To/Cc/Bcc fields */
.wm-compose-recipient-field { position: relative; }
.wm-contact-suggest {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin-top: .25rem;
    max-height: 220px;
    overflow-y: auto;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.wm-contact-suggest.wm-contact-suggest--open { display: block; }
.wm-contact-suggest-item { display: flex; flex-direction: column; padding: .5rem .7rem; cursor: pointer; }
.wm-contact-suggest-item:hover { background: var(--wm-bg); }
.wm-contact-suggest-item strong { font-size: .86rem; }
.wm-contact-suggest-item span { font-size: .76rem; color: var(--wm-muted); }

/* Sender name in the reading pane: a clickable contact name, or a raw address with a quick "add" button */
.wm-from-name-btn {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--wm-text);
    cursor: pointer;
    /* text-decoration: underline dotted; */
    text-underline-offset: 2px;
}
.wm-from-name-btn:hover { color: var(--wm-accent); }
.wm-from-add-contact {
    border: none;
    background: none;
    color: var(--wm-muted);
    cursor: pointer;
    font-size: .8rem;
    padding: 0 0 0 .35rem;
}
.wm-from-add-contact:hover { color: var(--wm-accent); }

/* Quick "view contact" card opened from the reading pane */
.wm-contact-quickview { text-align: center; padding: .5rem 0; }
.wm-contact-quickview-avatar { width: 64px; height: 64px; font-size: 1.4rem; margin: 0 auto .75rem; }
.wm-contact-quickview h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.wm-contact-quickview .wm-contact-field { text-align: left; }

/* Shared "label: value" row used by both the quick-view card and the Contacts detail pane */
.wm-contact-field {
    display: flex;
    gap: .5rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--wm-border);
    font-size: .88rem;
}
.wm-contact-field span { width: 120px; flex-shrink: 0; color: var(--wm-muted); }
.wm-contact-field strong { font-weight: 600; }

/* ---------- Contacts page (full page, not a modal) ---------- */
/* Sidebar kiểu Google Contacts (nút Tạo người liên hệ, điều hướng Danh bạ/Thường xuyên/Người liên hệ khác,
   Sửa và quản lý, Nhãn) — .wm-sidebar (base) đã lo layout/mobile-drawer, các hàng dùng lại nguyên
   .wm-folder-row/.wm-folders-section/.wm-section-head/.wm-account-toggle của folder-pane bên Mail, chỉ cần
   thêm khoảng cách dọc giữa các khối ở đây. */
.wm-contacts-sidebar { gap: .5rem; }
.wm-contacts-create-btn { border-radius: 24px; margin: 4px 8px 8px; }
/* .wm-folders-section (dùng chung với folder-pane Mail) mặc định flex:1 để 1 khối DUY NHẤT giãn hết chiều
   cao sidebar còn lại — Contacts có tới 2 khối (Sửa và quản lý + Nhãn) dùng chung class này, cả 2 cùng
   flex:1 khiến chúng tự giãn ra, đẩy khối Nhãn cách xa khối "Sửa và quản lý"/Thùng rác phía trên một
   khoảng trống lớn. Ghi đè về chiều cao tự nhiên (không giãn) để 2 khối nằm sát nhau như ý. */
.wm-contacts-sidebar .wm-folders-section { flex: 0 0 auto; overflow: visible; }
.wm-topbar-icon-btn.wm-rail-disabled { opacity: .35; cursor: not-allowed; }
.wm-topbar-icon-btn.wm-rail-disabled:hover { background: transparent; }

/* Không còn cột chi tiết bên phải (wm-contact-detail-col) — pane này giờ là nội dung DUY NHẤT của trang,
   chiếm toàn bộ chiều rộng còn lại. Bên trong, #contactListView (bảng) và #contactFormView (form thêm/sửa,
   dùng lại .wm-compose-main) đứng CHUNG chỗ và ẩn/hiện thay nhau qua JS (xem switchToListView/openEditPage
   trong contacts.js) — click 1 liên hệ mở "trang" form thay hẳn bảng, không còn panel xem cạnh bảng nữa. */
.wm-contact-list-pane {
    width: auto;
    flex: 1;
    background: var(--wm-surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wm-contact-list-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* Bảng danh bạ kiểu Google Contacts (Tên/Email/SĐT/Chức danh+Công ty/Nhãn) — thay cho danh sách avatar
   xếp chồng cũ, header dính khi cuộn nhờ .wm-list-scroll đã overflow-y:auto sẵn. */
.wm-contact-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.wm-contact-table thead th {
    position: sticky;
    top: 0;
    background: var(--wm-surface);
    text-align: left;
    padding: .6rem 1.1rem;
    font-weight: 600;
    font-size: .76rem;
    color: var(--wm-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--wm-border);
    white-space: nowrap;
}
.wm-contact-table tbody tr.wm-contact-row { cursor: pointer; border-bottom: 1px solid var(--wm-border); }
.wm-contact-table tbody tr.wm-contact-row:hover { background: var(--wm-bg); }
.wm-contact-table tbody tr.wm-contact-row.active { background: var(--wm-accent-soft); }
.wm-contact-table td {
    padding: .5rem 1.1rem;
    vertical-align: middle;
    color: var(--wm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.wm-contact-td-name { font-weight: 600; }
.wm-contact-name-cell { display: flex; align-items: center; gap: .6rem; }
.wm-contact-table-avatar { width: 32px; height: 32px; font-size: .76rem; flex-shrink: 0; }
.wm-contact-label-chip {
    display: inline-block;
    background: var(--wm-bg);
    border: 1px solid var(--wm-border);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .72rem;
    margin: 0 .25rem .25rem 0;
    color: var(--wm-muted);
}
.wm-contact-list-header {
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--wm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.02rem;
}
/* Cột hành động Sửa/Xoá trên mỗi hàng bảng danh bạ (thay cho việc phải mở panel chi tiết mới xoá/sửa
   được) — click hàng hoặc nút Sửa đều mở thẳng trang sửa (#contactFormView), nút Xoá xử lý tại chỗ. */
.wm-contact-td-actions { white-space: nowrap; text-align: right; }
.wm-contact-row-action-btn {
    border: none;
    background: none;
    color: var(--wm-muted);
    cursor: pointer;
    padding: .3rem .4rem;
    border-radius: 6px;
    font-size: .85rem;
}
.wm-contact-row-action-btn:hover { background: var(--wm-bg); color: var(--wm-accent); }
.wm-contact-row-action-btn.wm-contact-row-delete-btn:hover { color: var(--wm-danger); background: var(--wm-danger-soft); }

.wm-contact-detail-avatar { width: 64px; height: 64px; font-size: 1.4rem; flex-shrink: 0; }

.wm-contact-avatar-edit { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.wm-contact-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.wm-btn-text-danger { border: none; background: none; color: var(--wm-danger); font-size: .8rem; cursor: pointer; padding: 0; }
.wm-btn-text-danger:hover { text-decoration: underline; }
.wm-btn-text { border: none; background: none; color: var(--wm-accent); font-size: .8rem; cursor: pointer; padding: 0; font-weight: 600; }
.wm-btn-text:hover { text-decoration: underline; }

/* Hộp thoại "Hợp nhất và sửa" (nội dung HTML tuỳ biến bên trong Swal.fire, xem contacts.js) */
.wm-merge-list { text-align: left; max-height: 60vh; overflow-y: auto; }
.wm-merge-group { border: 1px solid var(--wm-border); border-radius: 8px; padding: .75rem; margin-bottom: .75rem; }
.wm-merge-group-title { font-size: .8rem; font-weight: 600; color: var(--wm-muted); margin-bottom: .5rem; }
.wm-merge-item { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .88rem; cursor: pointer; }
.wm-merge-btn { margin-top: .5rem; }

/* Tên/Họ cạnh nhau trong form sửa liên hệ */
.wm-contact-form-cols { display: flex; gap: .75rem; }
.wm-contact-form-cols .wm-compose-field { flex: 1; min-width: 0; }

/* Mỗi dòng email/SĐT có thể thêm/xoá động (kiểu Google Contacts) trong form sửa liên hệ */
.wm-contact-form-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.wm-contact-form-row input { flex: 1; min-width: 0; }
.wm-contact-form-row select { flex: 0 0 118px; }
.wm-contact-form-remove { border: none; background: none; color: var(--wm-muted); cursor: pointer; padding: .3rem; flex-shrink: 0; }
.wm-contact-form-remove:hover { color: var(--wm-danger); }
.wm-contact-form-add { border: none; background: none; color: var(--wm-accent); cursor: pointer; font-size: .85rem; padding: .25rem 0; }
.wm-contact-form-add:hover { text-decoration: underline; }

/* Ô nhập nhãn dạng "chip" — gõ rồi Enter/dấu phẩy để thêm, backspace trên ô trống để xoá chip cuối */
.wm-contact-labels-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    padding: .4rem .55rem;
    /* background: var(--wm-surface); */
}
.wm-contact-labels-input:focus-within { border-color: var(--wm-accent); box-shadow: 0 0 0 3px var(--wm-accent-soft); }
.wm-contact-label-chip-removable {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--wm-bg);
    border-radius: 999px;
    padding: .15rem .4rem .15rem .65rem;
    font-size: .78rem;
}
.wm-contact-label-chip-removable button { border: none; background: none; cursor: pointer; color: var(--wm-muted); padding: .1rem; font-size: .7rem; }
.wm-contact-label-chip-removable button:hover { color: var(--wm-danger); }
.wm-contact-labels-input input { border: none; outline: none; flex: 1; min-width: 90px; font-size: .88rem; background: transparent; font-family: inherit; }

/* ---------- Compose page (full page, not a modal) — sits in the wm-reading-pane's slot inside wm-app,
   keeping the rail + sidebar frame visible instead of taking over the whole viewport. ---------- */
.wm-compose-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--wm-surface);
}
.wm-compose-header {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--wm-border);
    flex-shrink: 0;
}
.wm-compose-back {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wm-muted);
    text-decoration: none;
    /* Compose chỉ dùng thẻ <a> (không viền mặc định); Contacts (trang sửa liên hệ) dùng <button> cho cùng
       class này — reset viền/nền/font mặc định của button để 2 nơi trông giống hệt nhau. */
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}
.wm-compose-back:hover { background: var(--wm-bg); color: var(--wm-text); }
.wm-compose-title { font-size: 1.05rem; font-weight: 700; }

.wm-compose-body {
    flex: 1;
    width: 100%;
    /* max-width: 760px; */
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    overflow-y: auto;
}
.wm-compose-field { display: flex; flex-direction: column; gap: .35rem; }
.wm-compose-field label { font-size: .82rem; font-weight: 600; color: var(--wm-muted); }
.wm-compose-field input[type="text"],
.wm-compose-field input[type="password"],
.wm-compose-field input[type="date"],
.wm-compose-field input:not([type]),
.wm-compose-field select {
    padding: .6rem .75rem;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    font-size: .9rem;
    font-family: inherit;
    background: var(--wm-surface);
}
.wm-compose-field input:focus, .wm-compose-field select:focus { outline: none; border-color: var(--wm-accent); box-shadow: 0 0 0 3px var(--wm-accent-soft); }

/* Ô ngày dd/mm/yyyy (text, tự format — xem autoreply-settings.js) + nút mở lịch chọn native của trình
   duyệt qua showPicker() trên input[type=date] ẩn đứng cạnh, không hiển thị trực tiếp vì định dạng của nó
   luôn theo locale máy chứ không cố định dd/mm/yyyy như ô text. */
.wm-date-input-group { position: relative; display: flex; align-items: center; }
.wm-date-input-group input[type="text"] { flex: 1; padding-right: 2.4rem !important; }
.wm-date-pick-btn {
    position: absolute;
    right: .35rem;
    width: 1.8rem;
    height: 1.8rem;
    border: none;
    background: none;
    color: var(--wm-muted);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wm-date-pick-btn:hover { background: var(--wm-bg); color: var(--wm-accent); }
.wm-date-hidden-picker {
    position: absolute;
    right: .35rem;
    width: 1.8rem;
    height: 1.8rem;
    opacity: 0;
    pointer-events: none;
    border: none;
    padding: 0;
}
/* Fallback khi showPicker() không dùng được (bị trình duyệt từ chối/không hỗ trợ cho input[type=time] —
   gặp thực tế khác nhau giữa các loại input dù cùng API showPicker(), xem attachNativePickerButton trong
   compose.js/autoreply-settings.js) — hiện thẳng input gốc lên để người dùng vẫn bấm/mở được theo đúng
   cách trình duyệt render sẵn, thay vì 1 nút bấm không phản hồi gì. */
.wm-date-hidden-picker--fallback {
    opacity: 1;
    pointer-events: auto;
    right: 0;
    width: auto;
    background: var(--wm-surface);
    border: 1px solid var(--wm-accent);
    border-radius: 6px;
    z-index: 5;
}
.wm-compose-cc-toggle { display: flex; justify-content: flex-end; margin-top: -.5rem; }

/* ---------- Full-page reading view (double-click a message row) — standalone page, no rail/sidebar,
   for a large distraction-free read. Reuses .wm-reading-* classes from the reading pane for consistency. ---------- */
.wm-view-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--wm-bg); }
.wm-view-header {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--wm-border);
    background: var(--wm-surface);
    flex-shrink: 0;
}
.wm-view-header .wm-compose-title { flex: 1; }
.wm-view-raw-link { margin-left: auto; }
.wm-view-body {
    flex: 1;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
.wm-compose-cc-toggle button {
    border: none;
    background: none;
    color: var(--wm-accent);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: .15rem 0;
}
.wm-compose-cc-toggle button.active { text-decoration: underline; }
/* .ck-editor__editable trước có min-height cố định 320px — ở popup "mở rộng" (nhiều chỗ trống hơn 320px)
   khung soạn thảo không giãn khít xuống footer, để lại khoảng trắng thừa; ở popup cỡ mặc định nhỏ hơn thì
   ngược lại 320px lại quá cao so với chỗ trống thật, đẩy tổng nội dung (Đến/Tiêu đề/Nội dung) vượt quá
   chiều cao popup khiến CẢ .wm-compose-body cuộn — trông như khung soạn thảo "lấn" xuống dưới cả footer.
   Thay vì .wm-compose-body cuộn nguyên khối, chỉ để riêng phần Nội dung (editable) tự cuộn khi nội dung nó
   dài — To/Cc/Bcc/Tiêu đề luôn cố định thấy hết, editable co giãn (flex:1, không còn sàn 320px) vừa đúng
   khoảng trống còn lại nên LUÔN khít với footer dù popup đang thu gọn hay mở rộng. */
/* overflow-y:auto (không phải hidden) làm lưới an toàn cho trường hợp cực đoan (cửa sổ rất nhỏ + Cc/Bcc
   đang mở + nhiều file đính kèm) — bình thường editable đã tự co giãn vừa khít nên hiếm khi phải cuộn tới
   đây, chỉ cuộn khi editable co hết xuống sàn 80px mà vẫn còn tràn. */
.wm-compose-body { min-height: 0; }
.wm-compose-editor-field { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wm-compose-editor-field .ck-editor { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wm-compose-editor-field .ck-editor__main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wm-compose-editor-field .ck-editor__editable {
    flex: 1;
    min-height: 80px; /* sàn tối thiểu chỉ để tránh co về 0 ở cửa sổ cực nhỏ, không phải chiều cao chuẩn */
    overflow-y: auto;
    font-size: .92rem;
}
/* CKEditor ships its own theme (white bg, dark text) baked into its bundle — beat that specificity so
   the compose body follows our theme instead of staying white-on-white in dark mode. */
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {border:none !important;}
.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {border:none !important;}
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {border:none !important;
     box-shadow: none !important;
    outline: none !important;}
.wm-compose-editor-field .ck.ck-editor__editable {
    background: var(--wm-surface) !important;
    color: var(--wm-text) !important;
}
.wm-signature-editor-field .ck-editor__editable { min-height: 140px; }
/* Badge "Powered by CKEditor" — bản không có license key tự chèn thẻ này đè lên góc dưới editor. */
.ck-powered-by { display: none !important; }

.wm-compose-footer {
    display: flex;
    gap: .6rem;
    width: 100%;
    /* max-width: 760px; */
    margin: 0 auto;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--wm-border);
    flex-shrink: 0;
}
/* "Hẹn giờ gửi" — nằm sát bên phải footer, tách khỏi cụm Gửi/Lưu nháp/Huỷ bên trái. */
.wm-schedule-send-btn { margin-left: auto; }

/* Menu 2 lựa chọn bấm nút kẹp giấy (Tải lên từ máy / Chọn từ Drive) — cùng kiểu dropdown "position:fixed +
   toggle .show" với .wmd-new-menu ở Drive (drive.css), tự định vị bằng JS theo vị trí nút (xem compose.js). */
.wm-attach-chooser-wrap { position: relative; display: inline-block; }
.wm-attach-chooser-menu { position: fixed; width: 210px; background: var(--wm-surface); border: 1px solid var(--wm-border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.2); padding: .4rem; z-index: 200; display: none; }
.wm-attach-chooser-menu.show { display: block; }
.wm-attach-chooser-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .7rem; border: none; background: none; border-radius: 6px; cursor: pointer; font-size: .85rem; color: var(--wm-text); text-align: left; }
.wm-attach-chooser-item:hover { background: var(--wm-bg); }
.wm-attach-chooser-item i { width: 16px; text-align: center; color: var(--wm-muted); }

/* Picker "Chọn từ Drive" trong SweetAlert2 (xem openDrivePicker trong compose.js) */
.wmdp-hint { font-size: .78rem; color: var(--wm-muted); text-align: left; margin-bottom: .6rem; }
.wmdp-body { max-height: 320px; overflow-y: auto; border: 1px solid var(--wm-border); border-radius: 8px; text-align: left; }
.wmdp-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; font-size: .85rem; border-bottom: 1px solid var(--wm-border); cursor: pointer; }
.wmdp-row:last-child { border-bottom: none; }
.wmdp-row:hover { background: var(--wm-bg); }
.wmdp-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.wmdp-chevron { color: var(--wm-faint); font-size: .72rem; }
.wmdp-file { cursor: pointer; }
.wmdp-file input[type=checkbox] { margin: 0; }
.wmdp-empty { padding: 1.2rem; text-align: center; color: var(--wm-muted); font-size: .82rem; }
.wm-schedule-send-btn.active { color: var(--wm-accent); border-color: var(--wm-accent); }

/* Trạng thái lưu nháp ("Đang lưu.../Đã lưu lúc..."), cạnh nút Hẹn giờ gửi — rỗng thì không chiếm chỗ. */
.wm-compose-save-status { align-self: center; font-size: .78rem; color: var(--wm-muted); white-space: nowrap; }

/* ---------- Popup soạn thư kiểu Gmail ----------
   /Mail/Compose vẫn là 1 trang đầy đủ như cũ (WmShell.init() vẫn chạy, topbar/rail/sidebar vẫn render
   trong DOM) — mở qua <iframe src="/Mail/Compose?...&popup=1"> nhúng trong 1 khung nổi neo góc phải dưới
   (xem WmShell.openComposePopup trong shell.js), chỉ ẩn khung ngoài (topbar/rail/sidebar/header riêng của
   trang) bằng CSS bên dưới cho gọn còn lại đúng phần form soạn thư, đỡ phải viết lại/tách compose.js ra
   khỏi trang riêng. */
body.wm-compose-popup-mode { background: var(--wm-surface); }
body.wm-compose-popup-mode .wm-topbar,
body.wm-compose-popup-mode .wm-cmdbar,
body.wm-compose-popup-mode .wm-rail,
body.wm-compose-popup-mode .wm-sidebar,
body.wm-compose-popup-mode .wm-compose-header { display: none; }
body.wm-compose-popup-mode .wm-shell-col,
body.wm-compose-popup-mode .wm-app { height: 100vh; }
body.wm-compose-popup-mode .wm-compose-main { border-radius: 0; }

/* Khung nổi neo góc phải dưới (phía cửa sổ CHA, NGOÀI iframe) — do WmShell.openComposePopup dựng. Thanh
   tiêu đề + nút thu nhỏ/mở rộng/đóng nằm hẳn ở đây (không phải trong iframe, xem lý do ở .wm-compose-header
   trên) để khi thu nhỏ (ẩn <iframe>, xem .wm-compose-popup-minimized bên dưới) vẫn còn thấy thanh này, bấm
   lại được để mở ra tiếp — giống hệt cách Gmail thu nhỏ popup soạn thư về 1 thanh dưới cùng màn hình. */
.wm-compose-popup-panel {
    position: fixed;
    right: 24px;
    bottom: 0;
    width: 680px;
    height: 660px;
    max-height: calc(100vh - 32px);
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wm-compose-popup-panel-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .5rem .7rem 1rem;
    background: var(--wm-bg);
    border-bottom: 1px solid var(--wm-border);
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}
.wm-compose-popup-panel-title { font-size: .88rem; font-weight: 700; color: var(--wm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-compose-popup-panel-controls { display: flex; gap: .15rem; margin-left: auto; }
.wm-compose-popup-panel-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--wm-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wm-compose-popup-panel-btn:hover { background: var(--wm-border); color: var(--wm-text); }
.wm-compose-popup-panel-btn.wm-compose-popup-panel-close:hover { background: var(--wm-danger-soft); color: var(--wm-danger); }
.wm-compose-popup-panel iframe { flex: 1; width: 100%; border: none; }
.wm-compose-popup-panel.wm-compose-popup-large { width: 880px; height: 85vh; }
.wm-compose-popup-panel.wm-compose-popup-minimized { height: auto; }
.wm-compose-popup-panel.wm-compose-popup-minimized iframe { display: none; }
@media (max-width: 560px) {
    .wm-compose-popup-panel { right: 0; width: 100vw; border-radius: 0; }
    .wm-compose-popup-panel.wm-compose-popup-large { width: 100vw; height: 100vh; max-height: 100vh; }
}

/* Modal "Hẹn giờ gửi" (SweetAlert2, xem compose.js) — preset nhanh + tuỳ chỉnh ngày/giờ. */
.wm-schedule-modal { text-align: left; }
.wm-schedule-presets { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .9rem; }
.wm-schedule-preset-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem .8rem;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    background: var(--wm-surface);
    color: var(--wm-text);
    cursor: pointer;
    font-size: .88rem;
    text-align: left;
}
.wm-schedule-preset-btn:hover { border-color: var(--wm-accent); background: var(--wm-accent-soft); }
.wm-schedule-preset-btn span:last-child { color: var(--wm-muted); font-size: .78rem; }
.wm-schedule-custom { border-top: 1px solid var(--wm-border); padding-top: .8rem; }
.wm-schedule-custom label { display: block; font-size: .8rem; font-weight: 600; color: var(--wm-muted); margin-bottom: .4rem; }
.wm-schedule-custom-row { display: flex; gap: .5rem; }
.wm-schedule-custom-row input {
    flex: 1;
    min-width: 0;
    padding: .55rem .7rem;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    font-size: .88rem;
    font-family: inherit;
    background: var(--wm-surface);
    color: var(--wm-text);
}
.wm-schedule-custom-row input:focus { outline: none; border-color: var(--wm-accent); box-shadow: 0 0 0 3px var(--wm-accent-soft); }

/* Badge "Hẹn giờ: ..." trên dòng email trong Drafts (webmail.js) khi có scheduledSendAt. */
.wm-scheduled-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--wm-accent);
    background: var(--wm-accent-soft);
    border-radius: 999px;
    padding: .1rem .55rem;
    margin-left: .4rem;
}

/* Snackbar đếm ngược Undo Send (compose.js) — cố định đáy màn hình, chỉ hiện trong lúc chờ gửi thật. */
.wm-undo-send-banner {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: .7rem;
    background: var(--wm-text);
    color: var(--wm-surface);
    border-radius: 8px;
    padding: .7rem 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    font-size: .88rem;
}
.wm-undo-send-banner button {
    border: 1px solid var(--wm-surface);
    background: none;
    color: var(--wm-surface);
    border-radius: 6px;
    padding: .3rem .8rem;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
}
.wm-undo-send-banner button:hover { background: var(--wm-surface); color: var(--wm-text); }

/* ---------- Settings page ---------- */
.wm-settings-tabs {
    display: flex;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--wm-border);
    flex-shrink: 0;
}
.wm-settings-tab {
    padding: .85rem 0;
    margin-right: 1.5rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--wm-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.wm-settings-tab:hover { color: var(--wm-text); }
.wm-settings-tab.active { color: var(--wm-accent); border-bottom-color: var(--wm-accent); }
.wm-settings-body { gap: 0; }
.wm-settings-section {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--wm-border);
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.wm-settings-section:last-child { border-bottom: none; }
.wm-settings-section h3 { margin: 0; font-size: 1rem; }
/* .wm-settings-section là flex column, align-items mặc định "stretch" nên nút Lưu (con trực tiếp, không
   nằm trong .wm-compose-field) bị kéo giãn hết chiều ngang theo section — chỉ cần gọn theo nội dung. */
.wm-settings-section > .wm-btn { align-self: flex-start; }
.wm-settings-section-head { display: flex; align-items: center; justify-content: space-between; }
.wm-settings-section-head h3 { margin: 0; }
.wm-settings-hint { margin: -.4rem 0 0; font-size: .82rem; color: var(--wm-muted); }
.wm-settings-inline-form { display: flex; gap: .5rem; }
.wm-settings-inline-form input { flex: 1; min-width: 0; }
.wm-settings-section--danger { align-items: flex-start; }

/* Filter-rule rows */
.wm-rule-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    margin-bottom: .6rem;
}
.wm-rule-row--disabled { opacity: .55; }
.wm-rule-info { min-width: 0; flex: 1; }
.wm-rule-name { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-rule-summary { font-size: .8rem; color: var(--wm-muted); margin-top: .15rem; }
.wm-rule-actions { display: flex; gap: .2rem; flex-shrink: 0; }

/* Toggle switch (enable/disable a rule) */
.wm-rule-toggle { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; }
.wm-rule-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.wm-rule-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--wm-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease;
}
.wm-rule-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: var(--wm-surface);
    border-radius: 50%;
    transition: transform .15s ease;
}
.wm-rule-toggle input:checked + .wm-rule-toggle-slider { background: var(--wm-accent); }
.wm-rule-toggle input:checked + .wm-rule-toggle-slider::before { transform: translateX(14px); }

/* Add/edit rule form */
.wm-rule-form {
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    background: var(--wm-bg);
}
.wm-rule-form-row { display: flex; gap: .75rem; }
.wm-rule-form-row .wm-compose-field { flex: 1; min-width: 0; }
.wm-rule-enabled-check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; cursor: pointer; }
.wm-rule-form-footer { border-top: none; padding: 0; }

/* ---------- Settings > Dung lượng (Storage.cshtml/storage.js) — 1 dòng/folder, thụt lề theo "depth" mà
   server đã tính sẵn (depth-first) để phân biệt trực quan folder con với folder cha. ---------- */
/* Khối "Đã dùng X / Y (P%)" + thanh tiến trình ở đầu Settings > Dung lượng — tái dùng .wm-quota-bar/
   .wm-quota-modal-row (đã có sẵn cho popup quota ở sidebar) để 2 nơi hiển thị cùng 1 ngôn ngữ hình ảnh. */
.wm-storage-quota-summary {
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    background: var(--wm-surface);
}
.wm-storage-list { border: 1px solid var(--wm-border); border-radius: 8px; overflow: hidden; }
.wm-storage-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--wm-border);
    font-size: .87rem;
}
.wm-storage-row:last-child { border-bottom: none; }
.wm-storage-row:hover { background: var(--wm-bg); }
.wm-storage-icon { color: var(--wm-muted); width: 1.1rem; text-align: center; flex-shrink: 0; }
.wm-storage-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-storage-count { color: var(--wm-muted); font-size: .8rem; flex-shrink: 0; width: 6rem; text-align: right; }
.wm-storage-size { font-weight: 600; flex-shrink: 0; width: 6rem; text-align: right; }

/* ---------- Calendar page (FullCalendar v3 — xem wwwroot/webmail/vendor/fullcalendar) ---------- */
.fc-event .fc-content {color:#fff !important;}
.wm-calendar-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--wm-surface); position: relative; padding: 1rem 1.25rem; }
.wm-calendar-pane #calendar { flex: 1; min-height: 0; }

/* Cụm Hôm nay/prev/next/tiêu đề trên topbar — điều khiển FullCalendar qua API (header:false, xem
   wireTopbar trong calendar.js) thay cho header tích hợp sẵn của thư viện. */
.wm-cal-toolbar { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin: 0 8px 0 4px; }
.wm-cal-today-btn { padding: .4rem .9rem; border-radius: 20px; font-size: .82rem; background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.wm-cal-today-btn:hover { background: rgba(255,255,255,.15); }
.wm-cal-title { font-size: 1.05rem; font-weight: 500; color: #fff; margin-left: 6px; white-space: nowrap; }

/* Nút chuyển view (Tháng/Tuần/Ngày) — không còn ô tìm kiếm sự kiện đứng cạnh (đã bỏ) nên margin-left:auto
   đẩy hẳn sang phải, có khoảng thoáng riêng thay vì chen chúc; menu thả xuống (wm-search-scope-menu) vẫn
   dùng lại nguyên CSS dropdown phạm vi tìm kiếm bên Mail cho khỏi trùng lặp. */
.wm-cal-view-switch { position: relative; flex-shrink: 0; margin-left: auto; }
.wm-cal-view-btn {
    display: flex;
    align-items: center;
    gap: .45rem;
    height: 32px;
    padding: 0 .9rem;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 20px;
    background: transparent;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}
.wm-cal-view-btn i { font-size: .65rem; }
.wm-cal-view-btn:hover { background: rgba(255,255,255,.15); }
.wm-cal-view-switch .wm-search-scope-menu { left: auto; right: 0; }

/* ---------- Sidebar Calendar (mini lịch tháng + danh sách "Lịch của tôi") ---------- */
.wm-calendar-sidebar { gap: .5rem; }
.wm-calendar-sidebar .wm-folders-section { flex: 0 0 auto; overflow: visible; }

.wm-cal-mini { padding: 0 4px 4px; }
.wm-cal-mini-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; }
.wm-cal-mini-title { font-size: .82rem; font-weight: 700; color: var(--wm-text); }
.wm-cal-mini-nav { display: flex; gap: 2px; }
.wm-cal-mini-weekdays, .wm-cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.wm-cal-mini-weekdays span { text-align: center; font-size: .68rem; color: var(--wm-faint); padding-bottom: 4px; }
.wm-cal-mini-day {
    border: none;
    background: none;
    height: 26px;
    font-size: .74rem;
    color: var(--wm-text);
    border-radius: 50%;
    cursor: pointer;
}
.wm-cal-mini-day:hover { background: var(--wm-bg); }
.wm-cal-mini-day-outside { color: var(--wm-faint); }
.wm-cal-mini-day-today { background: var(--wm-accent); color: #fff; font-weight: 700; }
/* .wm-cal-mini-day:hover (cùng độ đặc hiệu) chỉ đổi có background — nếu không ghi đè lại background ở đây,
   ngày "hôm nay" khi hover sẽ mất màu nền xanh, còn lại chữ trắng trên nền gần trắng, không đọc được số. */
.wm-cal-mini-day-today:hover { background: var(--wm-accent); filter: brightness(1.12); }

/* Hàng lịch con trong "Lịch của tôi" — dùng lại .wm-folder-row (đồng bộ hover/rename/delete với Contacts),
   chỉ thêm ô checkbox màu ở đầu thay icon. */
.wm-cal-list-row { cursor: default; }
.wm-cal-checkbox-wrap { display: flex; align-items: center; flex-shrink: 0; }
.wm-cal-visible-checkbox { width: 16px; height: 16px; cursor: pointer; }
/* Icon nhỏ cạnh mỗi lịch trong "Được chia sẻ với tôi" báo quyền người chia sẻ đã set cho mình (mắt = chỉ
   xem, bút = được chỉnh sửa) — xem renderSharedWithMeList trong calendar.js. */
.wm-cal-share-perm-badge { flex-shrink: 0; font-size: .68rem; color: var(--wm-faint); margin-left: .3rem; }

/* Chỉ chỉnh những gì cần để FullCalendar hợp theme (màu/nền/viền theo --wm-*) — phần layout/vị trí
   (top/left/height của ô ngày, sự kiện, đường kẻ giờ hiện tại...) do fullcalendar.css lo hết, không tự tính nữa. */
.fc { color: var(--wm-text); }
.fc-toolbar h2 { color: var(--wm-text); }
.fc-toolbar .fc-button { background: var(--wm-bg); color: var(--wm-text); border: 1px solid var(--wm-border); box-shadow: none; }
.fc-toolbar .fc-button:hover { background: var(--wm-accent-soft); color: var(--wm-accent); }
.fc-toolbar .fc-state-active, .fc-toolbar .fc-button.fc-state-active:hover { background: var(--wm-accent); color: #fff; }
.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content, .fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td { border-color: var(--wm-border); }
.fc-unthemed td.fc-today { background: var(--wm-accent-soft); }
.fc-event { color: #fff; }
.fc-day-grid-event .fc-content:before { display: none; }
.fc-day-grid-event .fc-content { padding: 0.15rem 0.2rem; }
.fc-time-grid-event .fc-content { padding: 0 .2rem; }
.fc-now-indicator-line { border-color: var(--wm-danger); }
.fc-now-indicator-arrow { border-top-color: var(--wm-danger); border-bottom-color: var(--wm-danger); }

/* Add/edit event modal */
.wm-cal-form-row { display: flex; gap: .75rem; }
.wm-cal-color-picker { display: flex; gap: .5rem; }
.wm-cal-color-dot { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px transparent; }
.wm-cal-color-dot.selected { box-shadow: 0 0 0 2px var(--wm-surface), 0 0 0 4px var(--wm-text); }

/* "Chia sẻ lịch" (nút btnCalendarSettings trên topbar) — trang riêng thay hẳn lưới lịch
   (#calendarSettingsView, dùng lại .wm-compose-header/-body của Contacts/Compose), vào thẳng "Lịch của tôi"
   luôn (không qua trang danh sách lịch trung gian nữa) — xem openShareManageDialog trong calendar.js. */
.wm-share-dialog hr { border: none; border-top: 1px solid var(--wm-border); margin: .9rem 0; }
.wm-share-person-row { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--wm-border); }
.wm-share-person-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .85rem; }
.wm-share-person-info span { font-size: .76rem; color: var(--wm-muted); }
/* Select này đứng CHUNG hàng với tên người + nút xoá — không dùng width:100% mặc định của input/select
   trong .wm-compose-field (ở đây select KHÔNG nằm trong .wm-compose-field nên không bị ảnh hưởng). */
.wm-share-permission-select { width: auto; flex-shrink: 0; font-size: .8rem; padding: .3rem .5rem; border: 1px solid var(--wm-border); border-radius: 6px; background: var(--wm-surface); color: var(--wm-text); }

/* Gợi ý email khi gõ vào ô "Thêm người" (chia sẻ lịch) — dropdown tự dựng thay cho <datalist> gốc (trình
   duyệt hiển thị datalist rất sơ sài/không đồng nhất giữa các máy), lọc trực tiếp từ /Mail/LocalMailboxes
   (mọi mailbox đang hoạt động trên server này) — xem renderPeopleChips trong calendar.js. */
.wm-autocomplete-wrap { position: relative; }
.wm-autocomplete-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    padding: .3rem;
    z-index: 60;
    max-height: 240px;
    overflow-y: auto;
}
.wm-autocomplete-option {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    width: 100%;
    text-align: left;
    padding: .5rem .6rem;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
    color: var(--wm-text);
}
.wm-autocomplete-option:hover, .wm-autocomplete-option.active { background: var(--wm-bg); }
.wm-autocomplete-option-email { flex-shrink: 0; }
.wm-autocomplete-option-name { color: var(--wm-muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==================== Responsive (điện thoại/tablet) ====================
   Desktop (mặc định phía trên) không đổi. Hai mốc:
   - <=900px: sidebar folder (220px, Mail/Compose/Settings) thu vào ngăn kéo trượt (drawer) mở bằng nút
     hamburger trên topbar, thay vì luôn chiếm chỗ — rail (48px) vẫn hiện cố định vì mọi trang (kể cả
     Contacts/Calendar không có sidebar) đều cần nó để chuyển mục/đăng xuất/đổi theme.
   - <=700px: những màn hình chia 2 cột (danh sách + nội dung — message-list/reading-pane ở Mail,
     contact-list/contact-detail ở Contacts) chuyển thành 1 cột kiểu app di động: mặc định hiện danh
     sách, chọn 1 item thì chuyển sang hiện nội dung + nút "quay lại" (xem wm-mobile-reading-open trên
     body, toggle bởi webmail.js/contacts.js). CmdBar ẩn chữ chỉ còn icon (đỡ tràn ngang), topbar bớt
     phần thương hiệu để nhường chỗ ô tìm kiếm. */

.wm-topbar-hamburger { display: none; }
.wm-sidebar-backdrop { display: none; }
.wm-mobile-back-btn { display: none; }

@media (max-width: 900px) {
    .wm-topbar-hamburger { display: flex; }
    /* Sidebar folder rời khỏi flex row bình thường, neo theo viewport, trượt ra từ mép trái — .wm-app
       không còn phải chừa chỗ cho nó nữa nên message-list/reading-pane/compose-main tự động giãn ra lấp
       khoảng trống. Neo ở left:0 (không phải 48px sau rail) để translateX(-100%) đẩy nó ra hẳn ngoài màn
       hình lúc đóng — nếu neo ở left:48px thì -100% chỉ dịch theo đúng bề rộng CỦA NÓ, cạnh phải vẫn dừng
       lại đúng x=48px (đè lên rail) thay vì biến mất hẳn. Lúc mở, ngăn kéo che tạm rail (z-index cao hơn)
       — chấp nhận được vì mọi chức năng của rail (đổi mục/avatar/đăng xuất/theme) bấm backdrop đóng lại
       là dùng được ngay. */
    .wm-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 56;
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 4px 0 16px rgba(0, 0, 0, .18);
    }
    body.wm-sidebar-open .wm-sidebar { transform: translateX(0); }
    body.wm-sidebar-open .wm-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(0, 0, 0, .35);
    }
}

@media (max-width: 700px) {
    /* ---------- Topbar/CmdBar: bớt phần không thiết yếu để nhường chỗ nội dung ---------- */
    .wm-topbar { padding: 0 6px; gap: 2px; }
    .wm-topbar-brand span { display: none; }
    .wm-topbar-brand { margin-right: 6px; }
    .wm-cmdbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .wm-cmd-label { display: none; }
    .wm-cmd-btn { padding: 0 8px; flex-shrink: 0; }
    .wm-cmd-sep { flex-shrink: 0; }

    /* ---------- Sidebar drawer rộng gần hết màn hình trên điện thoại nhỏ ---------- */
    .wm-sidebar { max-width: 90vw; }

    /* ---------- Message list (Mail): 1 cột, tự lấp đầy màn hình khi chưa mở item nào; nhường chỗ cho
       reading-pane khi đã mở (xem wm-mobile-reading-open). Khoá cứng 100% để đè lên style width theo px
       do initListResize (webmail.js) khôi phục từ localStorage — phòng trường hợp resize cửa sổ desktop
       xuống nhỏ mà không tải lại trang. Contacts không còn cột chi tiết riêng (list/form dùng chung 1
       pane, tự ẩn/hiện qua JS — xem wm-contact-list-pane trong webmail.css phần Contacts) nên không cần
       tham gia cơ chế wm-mobile-reading-open này nữa, chỉ luôn 100% width. ---------- */
    .wm-message-list, .wm-contact-list-pane { width: 100% !important; }
    .wm-list-resize-handle { display: none; }
    .wm-reading-pane { display: none; }
    body.wm-mobile-reading-open .wm-message-list { display: none; }
    body.wm-mobile-reading-open .wm-reading-pane { display: flex; }
    body.wm-mobile-reading-open .wm-mobile-back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        margin: .5rem 0 0 .6rem;
        border-radius: 8px;
        border: none;
        background: var(--wm-bg);
        color: var(--wm-text);
        cursor: pointer;
    }
    body.wm-mobile-reading-open .wm-mobile-back-btn:hover { background: var(--wm-border); }

    /* ---------- Reading pane / Compose / Settings: padding hẹp lại cho vừa màn hình nhỏ ---------- */
    .wm-reading-body { padding: 1rem 1.1rem; }
    .wm-reading-subject { font-size: 1.1rem; }
    /* wm-thread-card-from mặc định flex-shrink:0 (không co lại) — tên/email người gửi dài dễ đẩy tràn
       ngang qua khỏi ngày giờ bên phải trên màn hình hẹp; cho co lại + cắt "…" thay vì tràn. */
    .wm-thread-card-from { flex-shrink: 1; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* .wm-reading-meta-text không có flex:1/min-width:0 nên tên người gửi dài (email) cùng với
       .wm-reading-date-wrap (margin-left:auto) dễ đẩy tràn ngang trên màn hình hẹp — cho bọc dòng, ngày
       giờ rớt xuống dòng riêng thay vì tràn ra ngoài. */
    .wm-reading-meta { flex-wrap: wrap; }
    .wm-reading-meta-text { min-width: 0; }
    .wm-compose-body, .wm-view-body { padding: 1rem 1.1rem; }
    .wm-compose-header, .wm-compose-footer { padding: .85rem 1.1rem; }
    .wm-compose-recipient-field input { min-width: 0; }
    .wm-settings-tabs { padding: 0 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .wm-settings-tab { flex-shrink: 0; }

    /* ---------- Calendar: FullCalendar v3 không tự bọc dòng toolbar, ép bọc để không tràn ngang ---------- */
    .wm-calendar-pane { padding: .6rem; }
    .fc-toolbar { flex-wrap: wrap; gap: .4rem; }
    .fc-toolbar .fc-left, .fc-toolbar .fc-right { display: flex; flex-wrap: wrap; gap: .3rem; }
}