/* ============================================================
   Email Center — admin webmail (admin/email-center.php)
   ============================================================ */

/* The email center is a dense webmail view — let it use the full admin canvas
   instead of the shell's 1400px reading column (admin-app-shell.css sets
   `.admin-workspace .admin-main { max-width: 1400px }`). Match that selector's
   specificity so this wins by load order. Scoped: this stylesheet only loads on
   the email pages, so no other admin section is affected. */
.admin-workspace .admin-main { max-width: none; }

.wsec {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* Grid items must be allowed to shrink below their content's intrinsic width —
   otherwise the nowrap mailbox-pill strip (≈490px of pills on phones) sets the
   minimum width of the whole column and the page scrolls sideways. */
.wsec__side,
.wsec__main {
    min-width: 0;
    max-width: 100%;
}

/* Long unbroken tokens (email addresses in error banners, subjects) wrap instead
   of widening the layout. */
.wsec .alert,
.wsec__subject,
.wsec__meta {
    overflow-wrap: anywhere;
}

/* --- Sidebar --- */
.wsec__side {
    position: sticky;
    top: 70px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
}

.wsec__compose-btn {
    display: block;
    text-align: center;
    background: #9c1c34;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 12px;
    border-radius: 9px;
    text-decoration: none;
    margin-bottom: 14px;
    transition: filter 0.15s ease;
}

.wsec__compose-btn:hover {
    filter: brightness(1.1);
    color: #fff;
}

.wsec__side-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    margin: 12px 0 6px;
}

.wsec__mb,
.wsec__folder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.86rem;
    color: #374151;
    text-decoration: none;
    transition: background 0.12s ease;
}

.wsec__mb {
    justify-content: flex-start;
}

.wsec__mb:hover,
.wsec__folder:hover {
    background: #f3f4f6;
}

.wsec__mb.is-active,
.wsec__folder.is-active {
    background: #fdf2f4;
    color: #9c1c34;
    font-weight: 700;
}

.wsec__mb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    margin-right: 8px;
    flex: 0 0 auto;
}

.wsec__mb.is-active .wsec__mb-dot {
    background: #9c1c34;
}

.wsec__badge {
    background: #9c1c34;
    color: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
}

.wsec__access-link {
    display: block;
    margin-top: 14px;
    font-size: 0.8rem;
    color: #6b7280;
    text-decoration: none;
}

.wsec__access-link:hover {
    color: #9c1c34;
}

/* --- Main panel --- */
.wsec__panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
}

.wsec__muted {
    color: #6b7280;
    font-size: 0.82rem;
}

/* --- Search / toolbar --- */
.wsec__search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.wsec__search input[type="search"] {
    flex: 1 1 220px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font: inherit;
}

.wsec__count {
    margin-left: auto;
}

/* --- Message list --- */
.wsec__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #f3f4f6;
}

.wsec__row-link {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 90px;
    gap: 12px;
    align-items: baseline;
    padding: 10px 8px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: #374151;
    transition: background 0.12s ease;
}

.wsec__row-link:hover {
    background: #f9fafb;
}

.wsec__row-from {
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wsec__row-subject {
    font-size: 0.86rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wsec__row-date {
    font-size: 0.78rem;
    color: #9ca3af;
    text-align: right;
    white-space: nowrap;
}

.wsec__row.is-unread .wsec__row-from,
.wsec__row.is-unread .wsec__row-subject {
    font-weight: 700;
    color: #111827;
}

.wsec__answered {
    color: #16a34a;
    font-weight: 400;
}

/* Spam / phishing signal */
.wsec__spam-chip {
    display: inline-block;
    border-radius: 5px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 1.5;
    margin-right: 2px;
    vertical-align: middle;
}
.wsec__row.is-spam { background: rgba(239, 68, 68, 0.06); }
.wsec__row.is-suspect { background: rgba(234, 179, 8, 0.07); }
html[data-ws-theme="dark"] .wsec__row.is-spam { background: rgba(239, 68, 68, 0.12); }
html[data-ws-theme="dark"] .wsec__row.is-suspect { background: rgba(234, 179, 8, 0.12); }

/* Status pills + spam signals — colours live here (not inline) so dark mode can retune them.
   Light mode: soft tint + dark ink. Dark mode: muted translucent fill + LIGHT ink so reds
   read as a calm signal, not a glaring pastel block. */
.wsec__pill {
    display: inline-block; border-radius: 999px; padding: 1px 9px;
    font-size: 11.5px; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.wsec__pill--blocked { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.wsec__pill--allowed { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.wsec__pill--off     { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }

.wsec__spam-chip--spam    { background: #fee2e2; color: #991b1b; }
.wsec__spam-chip--suspect { background: #fef9c3; color: #854d0e; }
.wsec__spam-chip--ok      { background: #dcfce7; color: #166534; }

.wsec__spam-banner {
    border: 1px solid transparent; border-radius: 10px;
    padding: 10px 12px; margin: 0 0 12px; font-size: 13px;
}
.wsec__spam-banner--spam    { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.wsec__spam-banner--suspect { background: #fffbeb; color: #854d0e; border-color: #fde68a; }
.wsec__spam-banner__note { margin-top: 5px; font-size: 12px; opacity: .8; }

html[data-ws-theme="dark"] .wsec__pill--blocked,
html[data-ws-theme="dark"] .wsec__spam-chip--spam,
html[data-ws-theme="dark"] .wsec__spam-banner--spam {
    background: rgba(239, 68, 68, .16); color: #fca5a5; border-color: rgba(239, 68, 68, .40);
}
html[data-ws-theme="dark"] .wsec__spam-chip--suspect,
html[data-ws-theme="dark"] .wsec__spam-banner--suspect {
    background: rgba(234, 179, 8, .15); color: #fcd34d; border-color: rgba(234, 179, 8, .34);
}
html[data-ws-theme="dark"] .wsec__pill--allowed,
html[data-ws-theme="dark"] .wsec__spam-chip--ok {
    background: rgba(34, 197, 94, .15); color: #86efac; border-color: rgba(34, 197, 94, .32);
}
html[data-ws-theme="dark"] .wsec__pill--off {
    background: #232a33; color: #cbd5e1; border-color: #2b323d;
}
/* "Danger" action text (Remove / Delete) — the light-mode dark red is unreadable on a dark surface. */
html[data-ws-theme="dark"] .wsec__danger { color: #f87171; }
html[data-ws-theme="dark"] .wsec__rtb-btn.wsec__danger:hover { background: rgba(248, 113, 113, .16); color: #fca5a5; }

.wsec__empty {
    color: #6b7280;
    font-size: 0.9rem;
    padding: 24px 0;
    text-align: center;
}

.wsec__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

/* --- Reader --- */
.wsec__reader-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.wsec__reader-toolbar form {
    margin: 0;
}

.wsec__danger {
    color: #b91c1c;
}

.wsec__subject {
    font-size: 1.2rem;
    margin: 0 0 10px;
}

.wsec__meta {
    font-size: 0.84rem;
    color: #4b5563;
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    margin-bottom: 12px;
    word-break: break-word;
}

.wsec__atts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.wsec__att {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f9fafb;
    font-size: 0.8rem;
    color: #374151;
    text-decoration: none;
}

.wsec__att:hover {
    border-color: #9c1c34;
    color: #9c1c34;
}

.wsec__body {
    white-space: pre-wrap;
    word-break: break-word;
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 12px;
    max-height: 60vh;
    overflow-y: auto;
}

.wsec__html-toggle summary {
    cursor: pointer;
    font-size: 0.84rem;
    color: #9c1c34;
    font-weight: 600;
    margin-bottom: 8px;
}

.wsec__html-frame {
    width: 100%;
    height: 60vh;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

/* --- Compose --- */
.wsec__from-note {
    font-weight: 400;
    margin-left: 8px;
}

.wsec__compose label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.wsec__compose input[type="text"],
.wsec__compose textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font: inherit;
}

.wsec__compose textarea {
    resize: vertical;
    min-height: 200px;
}

.wsec__attach input[type="file"] {
    display: block;
    margin-top: 4px;
    font-size: 0.84rem;
}

.wsec__compose-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

/* --- Access table --- */
.wsec__access-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.86rem;
    margin: 12px 0;
}

.wsec__access-table th,
.wsec__access-table td {
    border: 1px solid #e5e7eb;
    padding: 8px 10px;
    text-align: center;
}

.wsec__access-table td:first-child,
.wsec__access-table th:first-child {
    text-align: left;
}

.wsec__grant {
    width: 34px;
    height: 28px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #f9fafb;
    color: #9ca3af;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.12s ease;
}

.wsec__grant.is-on {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.wsec__grant:hover {
    border-color: #9c1c34;
}

/* --- Mobile --- */
@media (max-width: 860px) {
    .wsec {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Sidebar becomes a compact header: full-width compose button, then
       mailboxes and folders as swipeable single rows of pills. */
    .wsec__side {
        position: static;
        padding: 10px 10px 2px;
    }

    .wsec__compose-btn {
        margin-bottom: 8px;
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .wsec__side-label {
        margin: 0 0 4px;
        font-size: 0.62rem;
    }

    .wsec__mbs,
    .wsec__folders {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -10px 8px;
        padding: 1px 10px 4px;
    }

    .wsec__mbs::-webkit-scrollbar,
    .wsec__folders::-webkit-scrollbar {
        display: none;
    }

    .wsec__mb,
    .wsec__folder {
        flex: 0 0 auto;
        border: 1px solid #e5e7eb;
        border-radius: 999px;
        padding: 5px 11px;
        font-size: 0.78rem;
        font-weight: 600;
        background: #fff;
        white-space: nowrap;
        color: #4b5563;
    }

    .wsec__mb.is-active,
    .wsec__folder.is-active {
        background: #9c1c34;
        border-color: #9c1c34;
        color: #fff;
    }

    .wsec__mb.is-active .wsec__mb-dot {
        background: #fff;
    }

    .wsec__mb-dot {
        display: none;
    }

    .wsec__badge {
        font-size: 0.66rem;
        padding: 1px 6px;
    }

    .wsec__folder.is-active .wsec__badge {
        background: #fff;
        color: #9c1c34;
    }

    .wsec__access-link {
        margin: 0 0 6px;
        padding: 2px 0;
        font-size: 0.74rem;
    }

    .wsec__panel {
        padding: 10px;
    }

    .wsec__search input[type="search"] {
        padding: 7px 11px;
        font-size: 0.85rem;
    }

    .wsec__row-from,
    .wsec__row-subject {
        font-size: 0.82rem;
    }

    .wsec__row-date {
        font-size: 0.72rem;
    }

    .wsec__row-link {
        padding: 9px 4px;
        gap: 8px;
    }

    .wsec__subject {
        font-size: 1.05rem;
    }

    .wsec__meta {
        font-size: 0.76rem;
        padding: 8px 10px;
    }

    .wsec__body {
        font-size: 0.86rem;
    }

    /* Neutralize the legacy global ".btn { width: 100% }" for inline toolbars
       (reader actions, pager, search) — full-width stacks waste a phone screen. */
    .wsec__reader-toolbar .btn,
    .wsec__pager .btn,
    .wsec__search .btn,
    .wsec__atts .btn {
        width: auto;
    }

    .wsec__reader-toolbar {
        gap: 6px;
    }

    .wsec__compose-actions .btn {
        flex: 1 1 0;
        width: auto;
    }

    .wsec__row-link {
        grid-template-columns: minmax(0, 1fr) 70px;
        grid-template-rows: auto auto;
        padding: 12px 6px;
    }

    .wsec__row-from {
        grid-column: 1;
        grid-row: 1;
    }

    .wsec__row-date {
        grid-column: 2;
        grid-row: 1;
    }

    .wsec__row-subject {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .wsec__html-frame,
    .wsec__body {
        max-height: 50vh;
        height: auto;
    }

    .wsec__html-frame {
        height: 50vh;
    }

    .wsec__access-table {
        display: block;
        overflow-x: auto;
    }
}

/* ——— Dark mode — surfaces/borders/text flip. The email-HTML iframe (.wsec__html-frame)
   stays light, since emails are authored for a white background. ——— */
html[data-ws-theme="dark"] .wsec__side,
html[data-ws-theme="dark"] .wsec__panel,
html[data-ws-theme="dark"] .wsec__reader-toolbar,
html[data-ws-theme="dark"] .wsec__body,
html[data-ws-theme="dark"] .wsec__access-table { background: #161a20; border-color: #2b323d; color: #e5e7eb; }
html[data-ws-theme="dark"] .wsec__list { background: #161a20; border-color: #2b323d; }
html[data-ws-theme="dark"] .wsec__row { border-color: #232a33; }
html[data-ws-theme="dark"] .wsec__row:hover,
html[data-ws-theme="dark"] .wsec__folder:hover { background: #1b2026; }
html[data-ws-theme="dark"] .wsec__muted,
html[data-ws-theme="dark"] .wsec__meta,
html[data-ws-theme="dark"] .wsec__row-date,
html[data-ws-theme="dark"] .wsec__from-note,
html[data-ws-theme="dark"] .wsec__empty,
html[data-ws-theme="dark"] .wsec__side-label { color: #9ca3af; }
html[data-ws-theme="dark"] .wsec__att { background: #232a33; border-color: #2b323d; color: #d1d5db; }
html[data-ws-theme="dark"] .wsec__search,
html[data-ws-theme="dark"] .wsec input:not([type=checkbox]):not([type=radio]),
html[data-ws-theme="dark"] .wsec select,
html[data-ws-theme="dark"] .wsec textarea { background: #1b2026; border-color: #2b323d; color: #e5e7eb; }

/* ============================================================
   Modernization layer (2026-06) — depth, polish, avatars, touch.
   Appended: same-specificity selectors win over the base above;
   layout-affecting rules are media-scoped so the responsive work
   and dark mode above stay intact.
   ============================================================ */

/* — Soft layered depth on the main surfaces — */
.wsec__side,
.wsec__panel {
    border-radius: 16px;
    border-color: #ededf0;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 14px 34px -22px rgba(17, 24, 39, .22);
}
html[data-ws-theme="dark"] .wsec__side,
html[data-ws-theme="dark"] .wsec__panel {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -22px rgba(0, 0, 0, .6);
}

/* — Compose button: gradient + lift — */
.wsec__compose-btn {
    background: linear-gradient(135deg, #b8233f, #9c1c34);
    border-radius: 12px;
    box-shadow: 0 8px 18px -8px rgba(156, 28, 52, .55);
    letter-spacing: .01em;
    transition: transform .15s ease, box-shadow .15s ease;
}
.wsec__compose-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -8px rgba(156, 28, 52, .6);
    filter: none;
}
.wsec__compose-btn:active { transform: translateY(0); }

/* — Sender avatar (initials, colour-hashed per sender) — */
.wsec__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .85rem;
    line-height: 1;
    background: hsl(var(--h, 210) 62% 93%);
    color: hsl(var(--h, 210) 58% 38%);
    box-shadow: inset 0 0 0 1px hsl(var(--h, 210) 50% 86%);
}
html[data-ws-theme="dark"] .wsec__avatar {
    background: hsl(var(--h, 210) 32% 22%);
    color: hsl(var(--h, 210) 65% 76%);
    box-shadow: inset 0 0 0 1px hsl(var(--h, 210) 30% 32%);
}
.wsec__row.is-unread .wsec__avatar { box-shadow: inset 0 0 0 1px hsl(var(--h, 210) 50% 80%), 0 0 0 2px rgba(156, 28, 52, .25); }

/* — Message rows: rounded list, hover lift, unread accent, touch-sized — */
.wsec__list { border-top: 0; }
.wsec__row {
    position: relative;
    border-radius: 12px;
    margin: 2px 0;
    transition: background .14s ease, box-shadow .14s ease;
}
.wsec__row-link {
    border-bottom: 0;
    border-radius: 12px;
    align-items: center;
    min-height: 56px;
    padding: 8px 12px;
}
.wsec__row:hover { box-shadow: 0 8px 20px -14px rgba(17, 24, 39, .35); }
.wsec__row.is-unread { background: rgba(156, 28, 52, .045); }
.wsec__row.is-unread::before {
    content: "";
    position: absolute;
    left: -2px; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #9c1c34;
}
html[data-ws-theme="dark"] .wsec__row.is-unread { background: rgba(184, 35, 63, .14); }

/* — Reader: sticky frosted toolbar + softer meta card — */
.wsec__reader-toolbar {
    position: sticky;
    top: 60px;
    z-index: 4;
    padding: 8px 0;
    margin: -2px 0 14px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 0 12px 12px;
}
html[data-ws-theme="dark"] .wsec__reader-toolbar { background: rgba(22, 26, 32, .82); }
.wsec__meta {
    background: linear-gradient(180deg, #fafafb, #f6f6f8);
    border-color: #ededf0;
    border-radius: 12px;
}
html[data-ws-theme="dark"] .wsec__meta { background: #1b2026; }
.wsec__att { transition: transform .12s ease, border-color .12s ease, color .12s ease; }
.wsec__att:hover { transform: translateY(-1px); }

/* — Desktop: give rows an avatar column — */
@media (min-width: 861px) {
    .wsec__side { top: 76px; }
    .wsec__row-link { grid-template-columns: 36px 190px minmax(0, 1fr) 86px; }
    .wsec__mb.is-active,
    .wsec__folder.is-active {
        background: linear-gradient(135deg, rgba(156, 28, 52, .14), rgba(156, 28, 52, .05));
        color: #9c1c34;
    }
    html[data-ws-theme="dark"] .wsec__mb.is-active,
    html[data-ws-theme="dark"] .wsec__folder.is-active {
        background: linear-gradient(135deg, rgba(184, 35, 63, .3), rgba(184, 35, 63, .12));
        color: #f3b6c2;
    }
}

/* — Mobile-first touch: avatar spans the stacked row, ≥56px targets — */
@media (max-width: 860px) {
    .wsec__row-link {
        grid-template-columns: 38px minmax(0, 1fr) 60px;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 2px;
        padding: 11px 10px;
        min-height: 60px;
    }
    .wsec__avatar { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 38px; height: 38px; }
    .wsec__row-from { grid-column: 2; grid-row: 1; }
    .wsec__row-date { grid-column: 3; grid-row: 1; }
    .wsec__row-subject { grid-column: 2 / -1; grid-row: 2; }
    .wsec__row.is-unread::before { top: 10px; bottom: 10px; }
    /* Roomier tap targets for the compact pill rail + folders */
    .wsec__mb, .wsec__folder { padding: 7px 13px; }
    .wsec__reader-toolbar { top: 54px; }
    .wsec__reader-toolbar .btn { padding: 8px 12px; }
}

/* ============================================================
   Controls v2 (2026-06) — kebab bulk menu + per-mailbox unread counts.
   ============================================================ */

/* — Bulk-action toolbar → a tidy bar with a kebab menu — */
.wsec__bulkbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 10px;
    margin: 0 0 8px;
    background: #fafafb;
    border: 1px solid #ededf0;
    border-radius: 12px;
}
html[data-ws-theme="dark"] .wsec__bulkbar { background: #1b2026; border-color: #2b323d; }
.wsec__selall { font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.wsec__selcount { font-size: 12.5px; color: #6b7280; }
html[data-ws-theme="dark"] .wsec__selcount { color: #9ca3af; }
.wsec__kebab { position: relative; margin-left: auto; }
.wsec__kebab-btn {
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 20px; line-height: 1;
    color: #374151; cursor: pointer;
    transition: background .12s ease, opacity .12s ease;
}
.wsec__kebab-btn:hover:not(:disabled) { background: #f3f4f6; }
.wsec__kebab-btn:disabled { opacity: .4; cursor: default; }
html[data-ws-theme="dark"] .wsec__kebab-btn { background: #161a20; border-color: #2b323d; color: #e5e7eb; }
.wsec__kebab-menu {
    position: absolute; right: 0; top: 40px; z-index: 30;
    min-width: 184px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 16px 36px -12px rgba(17, 24, 39, .32);
    padding: 6px;
}
html[data-ws-theme="dark"] .wsec__kebab-menu { background: #161a20; border-color: #2b323d; }
.wsec__kebab-menu button {
    display: flex; align-items: center; gap: 9px;
    width: 100%; text-align: left;
    background: none; border: 0;
    padding: 9px 10px; border-radius: 8px;
    font-size: 13.5px; color: #374151; cursor: pointer;
}
.wsec__kebab-menu button:hover { background: #f3f4f6; }
html[data-ws-theme="dark"] .wsec__kebab-menu button { color: #e5e7eb; }
html[data-ws-theme="dark"] .wsec__kebab-menu button:hover { background: #1b2026; }
.wsec__kebab-menu .wsec__danger:hover { background: #fef2f2; }
html[data-ws-theme="dark"] .wsec__kebab-menu .wsec__danger:hover { background: #2a1416; }
.wsec__mi-ic { width: 18px; text-align: center; flex: 0 0 auto; }

/* — Per-mailbox unread count — */
.wsec__mb-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsec__mb-count {
    flex: 0 0 auto;
    font-size: .7rem; font-weight: 800; line-height: 1.55;
    color: #9c1c34;
    background: rgba(156, 28, 52, .12);
    border-radius: 999px;
    padding: 0 7px;
}
html[data-ws-theme="dark"] .wsec__mb-count { color: #f3b6c2; background: rgba(184, 35, 63, .24); }
.wsec__mb.has-unread .wsec__mb-name { font-weight: 700; }
.wsec__mb.is-active .wsec__mb-count { background: rgba(156, 28, 52, .16); }

@media (max-width: 860px) {
    /* Mobile: a tiny count tucked into the pill — present only when > 0, no extra row. */
    .wsec__mb-count { font-size: .62rem; padding: 0 5px; }
    .wsec__mb.is-active .wsec__mb-count { background: rgba(255, 255, 255, .26); color: #fff; }
    .wsec__bulkbar { padding: 7px 9px; gap: 8px; }
    .wsec__kebab-btn { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
    /* Tightest phones: drop the verbose "1–25 of 25" range, keep the ‹ › arrows,
       so the select-all + caret + kebab + pager all fit without spilling off-screen. */
    .wsec__pager2-range { display: none; }
    .wsec__bulkbar { gap: 6px; }
}

/* ============================================================
   Swipe to archive / trash (2026-06) — touch rows.
   Two action layers sit behind an opaque foreground that the
   finger drags; release past the threshold fires the action.
   On desktop (no touch) the foreground never moves, so rows
   look and behave exactly as before.
   ============================================================ */
.wsec__row { overflow: hidden; }
.wsec__swipe-fg {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: #fff;
    will-change: transform;
}
.wsec__swipe-fg .wsec__row-link { flex: 1 1 auto; min-width: 0; }
html[data-ws-theme="dark"] .wsec__swipe-fg { background: #161a20; }
.wsec__row.is-unread .wsec__swipe-fg { background: #fdf5f8; }
html[data-ws-theme="dark"] .wsec__row.is-unread .wsec__swipe-fg { background: #1d1519; }
.wsec__row.is-spam .wsec__swipe-fg { background: #fef4f4; }
.wsec__row.is-suspect .wsec__swipe-fg { background: #fefcf0; }
html[data-ws-theme="dark"] .wsec__row.is-spam .wsec__swipe-fg { background: #241618; }
html[data-ws-theme="dark"] .wsec__row.is-suspect .wsec__swipe-fg { background: #221f12; }

/* Move the unread accent bar onto the foreground (the old one is clipped now). */
.wsec__row.is-unread::before { display: none; }
.wsec__row.is-unread .wsec__swipe-fg::before {
    content: "";
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #9c1c34;
    z-index: 2;
}

.wsec__swipe-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    opacity: 0;
    transition: opacity .1s ease;
}
.wsec__swipe-bg--arch { justify-content: flex-start; background: #15803d; }
.wsec__swipe-bg--trash { justify-content: flex-end; background: #b91c1c; }
.wsec__row.swiping-r .wsec__swipe-bg--arch { opacity: .85; }
.wsec__row.swiping-l .wsec__swipe-bg--trash { opacity: .85; }
.wsec__row.swipe-armed.swiping-r .wsec__swipe-bg--arch,
.wsec__row.swipe-armed.swiping-l .wsec__swipe-bg--trash { opacity: 1; }
.wsec__row.swipe-armed .wsec__swipe-bg span { transform: scale(1.06); transition: transform .1s ease; }

/* ============================================================
   Undo snackbar (2026-06) — toast after archive / move-to-Trash.
   ============================================================ */
.wsec__snack {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: calc(100vw - 28px);
    padding: 12px 14px 12px 18px;
    background: #1f2937;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .5);
    font-size: 14px;
    animation: wsecSnackIn .25s ease;
}
@keyframes wsecSnackIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.wsec__snack--out { opacity: 0; transform: translate(-50%, 14px); transition: opacity .3s ease, transform .3s ease; }
.wsec__snack-msg { white-space: nowrap; }
.wsec__snack-undo {
    background: none;
    border: 0;
    color: #93c5fd;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 7px;
    transition: background .12s ease, color .12s ease;
}
.wsec__snack-undo:hover { color: #fff; background: rgba(255, 255, 255, .12); }
@media (max-width: 860px) {
    /* Sit above the mobile tab tray. */
    .wsec__snack { bottom: 84px; left: 14px; right: 14px; transform: none; max-width: none; }
    @keyframes wsecSnackIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
    .wsec__snack--out { transform: translateY(14px); }
}

/* ============================================================
   Star/flag · keyboard cursor · Starred view · pull-to-refresh (2026-06)
   ============================================================ */
.wsec__star {
    flex: 0 0 auto;
    background: none; border: 0;
    font-size: 18px; line-height: 1;
    color: #d1d5db; cursor: pointer;
    padding: 6px; border-radius: 8px;
    transition: color .12s ease, transform .12s ease;
}
.wsec__star:hover { color: #f59e0b; transform: scale(1.12); }
.wsec__star.is-on { color: #f59e0b; }
html[data-ws-theme="dark"] .wsec__star { color: #4b5563; }
html[data-ws-theme="dark"] .wsec__star.is-on { color: #fbbf24; }

.wsec__row.is-cursor { box-shadow: inset 0 0 0 2px rgba(156, 28, 52, .45); }

.wsec__starred-link {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 10px; margin: 0 0 12px;
    border-radius: 9px;
    font-size: .86rem; font-weight: 600;
    color: #b45309; text-decoration: none;
    background: rgba(245, 158, 11, .08);
    transition: background .12s ease;
}
.wsec__starred-link:hover { background: rgba(245, 158, 11, .16); color: #b45309; }
.wsec__starred-link.is-active { background: rgba(245, 158, 11, .2); color: #b45309; }
html[data-ws-theme="dark"] .wsec__starred-link { color: #fbbf24; background: rgba(245, 158, 11, .1); }
html[data-ws-theme="dark"] .wsec__starred-link:hover,
html[data-ws-theme="dark"] .wsec__starred-link.is-active { background: rgba(245, 158, 11, .18); }

.wsec__ptr {
    position: fixed; top: 8px; left: 50%;
    transform: translateX(-50%);
    z-index: 150;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px -6px rgba(17, 24, 39, .4);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #9c1c34;
    opacity: 0; transition: opacity .15s ease;
}
.wsec__ptr.ready { background: #9c1c34; color: #fff; }
.wsec__ptr.spin span { display: inline-block; animation: wsecSpin .7s linear infinite; }
@keyframes wsecSpin { to { transform: rotate(360deg); } }
html[data-ws-theme="dark"] .wsec__ptr { background: #1f2937; color: #f3b6c2; }

@media (max-width: 860px) {
    .wsec__star { font-size: 20px; padding: 8px 6px; align-self: center; }
}

/* ============================================================
   Conversation threading (2026-06) — toggle, count chip, reader strip.
   ============================================================ */
.wsec__convtoggle {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 11px;
    border: 1px solid #e5e7eb; border-radius: 999px;
    font-size: .8rem; font-weight: 600;
    color: #6b7280; text-decoration: none; background: #fff;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.wsec__convtoggle.is-on { background: rgba(156, 28, 52, .1); border-color: rgba(156, 28, 52, .3); color: #9c1c34; }
html[data-ws-theme="dark"] .wsec__convtoggle { background: #161a20; border-color: #2b323d; color: #9ca3af; }
html[data-ws-theme="dark"] .wsec__convtoggle.is-on { background: rgba(184, 35, 63, .18); color: #f3b6c2; border-color: rgba(184, 35, 63, .4); }

.wsec__tcount {
    display: inline-block; min-width: 18px; text-align: center;
    font-size: .66rem; font-weight: 800;
    color: #6b7280; background: #eef0f3;
    border-radius: 999px; padding: 0 6px; margin-left: 4px;
    vertical-align: middle;
}
.wsec__row.is-unread .wsec__tcount { color: #9c1c34; background: rgba(156, 28, 52, .14); }
html[data-ws-theme="dark"] .wsec__tcount { background: #2b323d; color: #cbd5e1; }

.wsec__conv { margin: 0 0 14px; border: 1px solid #ededf0; border-radius: 12px; background: #fafafb; overflow: hidden; }
html[data-ws-theme="dark"] .wsec__conv { background: #1b2026; border-color: #2b323d; }
.wsec__conv summary { cursor: pointer; padding: 10px 14px; font-size: .85rem; font-weight: 700; color: #374151; list-style: none; }
.wsec__conv summary::-webkit-details-marker { display: none; }
html[data-ws-theme="dark"] .wsec__conv summary { color: #e5e7eb; }
.wsec__conv-list { list-style: none; margin: 0; padding: 0 0 6px; }
.wsec__conv-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: .84rem; border-top: 1px solid #f0f1f3; }
html[data-ws-theme="dark"] .wsec__conv-item { border-color: #232a33; }
.wsec__conv-item a { text-decoration: none; color: #374151; }
.wsec__conv-item a:hover { color: #9c1c34; }
html[data-ws-theme="dark"] .wsec__conv-item a { color: #e5e7eb; }
.wsec__conv-from { font-weight: 600; }
.wsec__conv-item.is-current { background: rgba(156, 28, 52, .06); }
.wsec__conv-here { color: #9c1c34; font-size: .76rem; font-weight: 600; }
.wsec__conv-date { margin-left: auto; color: #9ca3af; font-size: .76rem; white-space: nowrap; }

/* ============================================================
   Two-pane reading layout (2026-06) — desktop list + reader side by side;
   mobile stays single-pane (the reader takes over when a message is open).
   ============================================================ */
.wsec__row.is-open .wsec__swipe-fg { background: rgba(156, 28, 52, .09); }
html[data-ws-theme="dark"] .wsec__row.is-open .wsec__swipe-fg { background: rgba(184, 35, 63, .22); }

/* Base (and stacked-fallback) order: the LIST is the anchor on top, the reader below.
   The reader pane is emitted first in the DOM, so without this it would stack above the
   list whenever the side-by-side grid isn't active. The desktop grid below overrides
   this to put them side by side (list left, reader right). */
.wsec__split { display: flex; flex-direction: column; gap: 16px; }
.wsec__split .wsec__listpane { order: 0; }
.wsec__split .wsec__readerpane { order: 1; }

@media (min-width: 861px) {
    .wsec__split.has-reader {
        display: grid;
        grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }
    .wsec__split.has-reader .wsec__listpane { order: 0; min-width: 0; }
    .wsec__split.has-reader .wsec__readerpane { order: 1; min-width: 0; }
    /* Narrow list in two-pane: stack subject under sender, hide date + star to save room. */
    .wsec__split.has-reader .wsec__row-link {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 10px; row-gap: 1px;
    }
    .wsec__split.has-reader .wsec__avatar { grid-row: 1 / span 2; align-self: center; }
    .wsec__split.has-reader .wsec__row-from { grid-column: 2; grid-row: 1; }
    .wsec__split.has-reader .wsec__row-subject { grid-column: 2; grid-row: 2; }
    .wsec__split.has-reader .wsec__row-date,
    .wsec__split.has-reader .wsec__star { display: none; }
    /* The reader's "Back" is redundant beside the list on desktop. */
    .wsec__split.has-reader .wsec__reader-toolbar [data-k="u"] { display: none; }
}
@media (max-width: 860px) {
    /* Single pane: the open message replaces the list. */
    .wsec__split.has-reader .wsec__listpane { display: none; }
}

/* ============================================================
   Reader toolbar — Gmail-style compact icon bar + overflow kebab
   ============================================================ */
.wsec__reader-toolbar { gap: 2px; }
.wsec__rtb-f { margin: 0; display: inline-flex; }
.wsec__rtb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 8px;
    border: none; background: transparent; color: #5f6368;
    font-size: 16px; line-height: 1; border-radius: 8px;
    cursor: pointer; text-decoration: none; transition: background .12s ease, color .12s ease;
}
.wsec__rtb-btn:hover { background: rgba(60, 64, 67, .09); color: #202124; }
.wsec__rtb-btn:focus-visible { outline: 2px solid #9c1c34; outline-offset: 1px; }
.wsec__rtb-btn.wsec__danger:hover { background: rgba(185, 28, 28, .12); color: #b91c1c; }
.wsec__rtb-sep { width: 1px; height: 22px; background: #e2e2e6; margin: 0 5px; flex: 0 0 auto; }
.wsec__rtb-btn--primary {
    padding: 0 16px; height: 36px; border-radius: 999px;
    background: #9c1c34; color: #fff; font-size: 14px; font-weight: 600; gap: 6px;
}
.wsec__rtb-btn--primary:hover { background: #851629; color: #fff; }
.wsec__rstar.is-on { color: #f5b400; }
.wsec__rstar.is-on:hover { color: #e0a500; }

.wsec__rkebab { position: relative; display: inline-flex; }
.wsec__rkebab-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
    min-width: 210px; padding: 6px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .16);
}
.wsec__rkebab-menu form { margin: 0; }
.wsec__rkebab-menu a,
.wsec__rkebab-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 11px; border: none; background: transparent; color: #202124;
    font-size: 14px; text-align: left; text-decoration: none; border-radius: 8px; cursor: pointer;
}
.wsec__rkebab-menu a:hover,
.wsec__rkebab-menu button:hover { background: rgba(60, 64, 67, .08); }
.wsec__rkebab-menu .wsec__mi-ic { width: 18px; text-align: center; flex: 0 0 auto; opacity: .85; }

html[data-ws-theme="dark"] .wsec__rtb-btn { color: #9aa0a6; }
html[data-ws-theme="dark"] .wsec__rtb-btn:hover { background: rgba(232, 234, 237, .12); color: #e8eaed; }
html[data-ws-theme="dark"] .wsec__rtb-sep { background: #2b323d; }
html[data-ws-theme="dark"] .wsec__rkebab-menu { background: #1b2026; border-color: #2b323d; }
html[data-ws-theme="dark"] .wsec__rkebab-menu a,
html[data-ws-theme="dark"] .wsec__rkebab-menu button { color: #e5e7eb; }
html[data-ws-theme="dark"] .wsec__rkebab-menu a:hover,
html[data-ws-theme="dark"] .wsec__rkebab-menu button:hover { background: rgba(232, 234, 237, .1); }

@media (max-width: 860px) {
    .wsec__rtb-btn { min-width: 42px; height: 42px; font-size: 18px; }
    .wsec__rtb-btn--primary { padding: 0 18px; }
}

/* ============================================================
   List toolbar — Gmail-style: select-by-state, condensed pager,
   refresh, split-view toggle
   ============================================================ */
.wsec__bulkbar-sp { flex: 1 1 auto; }
.wsec__selall { gap: 0; }
.wsec__selmenu { margin-left: -6px; }
.wsec__selcaret { min-width: 22px; padding: 0 2px; font-size: 11px; }
.wsec__pager2 { display: inline-flex; align-items: center; gap: 0; }
.wsec__pager2-range { font-size: 12px; color: #6b7280; margin-right: 4px; white-space: nowrap; }
html[data-ws-theme="dark"] .wsec__pager2-range { color: #9ca3af; }
.wsec__rtb-btn.is-disabled { opacity: .3; cursor: default; pointer-events: none; }
.wsec__splitbtn.is-on { color: #9c1c34; }
html[data-ws-theme="dark"] .wsec__splitbtn.is-on { color: #f3b6c2; }

/* Single-column mode: the open message takes over the pane (no side-by-side). */
@media (min-width: 861px) {
    .wsec__split--nosplit.has-reader { display: block; }
    .wsec__split--nosplit.has-reader .wsec__listpane { display: none; }
    .wsec__split--nosplit.has-reader .wsec__readerpane { min-width: 0; }
}
/* The split toggle only matters where two-pane exists (desktop). */
@media (max-width: 860px) { .wsec__splitbtn { display: none; } }

/* Reader back button — labeled "← Inbox" in single-column view (icon-only in split). */
.wsec__rtb-back--label { width: auto; padding: 0 12px 0 9px; gap: 6px; font-size: 14px; font-weight: 600; color: #202124; }
.wsec__rtb-back--label:hover { background: rgba(60, 64, 67, .09); }
html[data-ws-theme="dark"] .wsec__rtb-back--label { color: #e8eaed; }