/* ===========================================================
   SmarterApply — Gmail-grade inbox UI
   Light, dense, information-first. RTL-native.
   =========================================================== */

:root {
    /* Surfaces */
    --bg: #ffffff;
    --bg-soft: #f6f8fc;
    --bg-soft-2: #eef1f7;
    --bg-hover: #eaeef6;
    --bg-sunken: #f1f3f9;

    /* Lines */
    --line: #e3e7ef;
    --line-soft: #edf0f6;

    /* Ink */
    --ink: #12151c;
    --ink-2: #454c5a;
    --ink-3: #79818f;
    --ink-4: #a6adba;

    /* Brand */
    --brand: #4f5eff;
    --brand-dark: #3b45d6;
    --brand-soft: #eceefe;
    --brand-tint: #f5f6ff;

    /* Semantic */
    --green: #0f9d6a;   --green-bg: #e4f7ef;
    --blue: #2563eb;    --blue-bg: #e8f0fe;
    --red: #dc3b40;     --red-bg: #fdecec;
    --amber: #a9700c;   --amber-bg: #fbf1dd;
    --grey: #7c8595;    --grey-bg: #eef0f5;
    --star: #e3b341;

    /* Geometry */
    --r-xs: 6px;
    --r-sm: 9px;
    --r-md: 13px;
    --r-lg: 18px;
    --r-pill: 999px;

    /* Elevation */
    --e1: 0 1px 2px rgba(18,21,28,.05);
    --e2: 0 2px 8px rgba(18,21,28,.07);
    --e3: 0 12px 32px rgba(18,21,28,.13);
    --e4: 0 24px 64px rgba(18,21,28,.2);
    --e-brand: 0 6px 18px rgba(79,94,255,.28);

    /* Motion — critically damped by default (no gratuitous overshoot) */
    --ease: cubic-bezier(.2, .8, .3, 1);
    --spring: cubic-bezier(.34, 1.4, .64, 1);
    --t-fast: .13s;
    --t: .24s;

    --font: "Vazirmatn", "Roboto", "Segoe UI", Tahoma, Arial, sans-serif;

    /* Layout -- fluid, not fixed. The three side panes used to be hard-coded
       (244 + 480 + 320 = 1044px of chrome consumed at ANY viewport width), which
       starved the reading pane on smaller screens: at 1280px CSS it was left with
       ~386px and the subject line wrapped over four lines. These clamp() widths
       scale with the viewport, so wide screens look exactly as before while
       narrow ones tighten the side panes instead of crushing the reading pane. */
    --sidebar-w: clamp(200px, 13.5vw, 244px);
    --list-w: clamp(300px, 26vw, 480px);
    --topbar-h: 60px;
    --chat-w: clamp(280px, 20vw, 340px);
    --rail-w: 60px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
.hidden { display: none !important; }

/* Size-specific tracking: tighten as type grows, open up as it shrinks. */
h1, .thread-subject { letter-spacing: -.02em; }
.nav-count, .chip, .meta-xs { letter-spacing: .01em; }

@keyframes fadeUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pop { from { opacity:0; transform: scale(.96) translateY(6px); } to { opacity:1; transform:none; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001s !important;
    }
}

/* ---------------- primitives ---------------- */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px;
    border-radius: var(--r-sm);
    font-size: 13px; font-weight: 600;
    color: var(--ink-2);
    background: var(--bg);
    border: 1px solid var(--line);
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
    white-space: nowrap;
}
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: scale(.97); }          /* feedback on press, not release */
.btn-primary {
    background: var(--brand); border-color: transparent; color: #fff;
    box-shadow: var(--e-brand);
}
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:active { transform: scale(.97); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--red-bg); }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 11px 18px; font-size: 14.5px; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--ink-3);
    font-size: 16px;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--ink); }
.icon-btn:active { transform: scale(.9); }
.icon-btn-xs { width: 24px; height: 24px; font-size: 14px; }

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    color: #fff; font-weight: 700; font-size: 14px;
    user-select: none;
}
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-xs { width: 26px; height: 26px; font-size: 11px; }

/* Bounce warning: this thread's employer address is on record as having bounced at
   least once (see App\Support\Bounces). Amber, not red -- it's a heads-up to stop
   waiting on a reply, not a hard error state. Clickable (pins the tooltip open, e.g.
   to screenshot it) as well as hoverable -- see showBounceTip/hideBounceTip in app.js. */
.bounce-badge {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 20px; height: 20px;
    margin-inline-start: -10px;
    border-radius: 50%;
    background: var(--amber-bg); color: var(--amber);
    border: 2px solid var(--bg);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.bounce-badge:hover { background: var(--amber); color: #fff; transform: scale(1.12); }
.thread-head-row .bounce-badge { margin-inline-start: 0; width: 22px; height: 22px; }

/* Interview-tab-only column: avatar (+bounce badge) on top, then the "go to job posting" /
   "show job description" buttons stacked right underneath it -- side by side, below the
   avatar, rather than inline in the row (which used to push the subject/snippet text over).
   The two slots are always in the row's markup so nothing shifts around when the async lookup
   fills them in a moment later; they just render empty (zero size) until then. */
.row-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.row-avatar-top { display: inline-flex; align-items: center; }
.job-link-slot, .job-dsc-slot { display: inline-flex; flex: 0 0 auto; }
.job-link-btn, .job-dsc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    padding: 0; cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.job-link-btn svg, .job-dsc-btn svg { width: 13px; height: 13px; }
.job-link-btn { background: var(--blue-bg); color: var(--blue); }
.job-link-btn:hover { background: var(--blue); color: #fff; transform: scale(1.12); }
.job-dsc-btn { background: var(--green-bg); color: var(--green); }
.job-dsc-btn:hover { background: var(--green); color: #fff; transform: scale(1.12); }

/* Job-description modal -- centered overlay (not a hover tooltip like .bounce-tip) since this
   text can run long: needs real width, a scrollable body, and to stay open however long the user
   wants to read/select/copy/screenshot it rather than close on mouseout. */
.job-dsc-modal {
    position: fixed; inset: 0; z-index: 600;
    display: flex; align-items: center; justify-content: center;
    background: rgba(18, 21, 28, .45);
    padding: 24px;
}
.job-dsc-modal.hidden { display: none; }
.job-dsc-box {
    width: min(680px, 100%);
    max-height: min(80vh, 720px);
    display: flex; flex-direction: column;
    background: var(--bg);
    border-radius: var(--r-lg);
    box-shadow: var(--e4);
    overflow: hidden;
}
.job-dsc-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}
.job-dsc-title { font-weight: 700; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.job-dsc-close {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: var(--bg-sunken); color: var(--ink-2);
    font-size: 20px; line-height: 1; cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}
.job-dsc-close:hover { background: var(--bg-hover); }
.job-dsc-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 18px 20px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.85;
    font-size: 13.5px;
    color: var(--ink-2);
    user-select: text;
}

/* Fixed-position custom tooltip for .bounce-badge -- see app.js. Fixed positioning (not
   absolute inside the row/header) means it always escapes the list's own scroll
   container instead of being clipped by it, and unlike the native `title` attribute it
   can be clicked to stay open (e.g. to screenshot it) instead of vanishing on mouse move. */
.bounce-tip {
    position: fixed;
    z-index: 500;
    max-width: 340px;
    padding: 10px 12px;
    border-radius: var(--r-md, 10px);
    background: var(--ink, #1a1d29);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.7;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    pointer-events: auto;
}
.bounce-tip.hidden { display: none; }
.bounce-tip-head { font-weight: 700; color: var(--amber, #f0b429); margin-bottom: 4px; }
.bounce-tip-row { display: flex; gap: 8px; align-items: baseline; }
.bounce-tip-row + .bounce-tip-row { margin-top: 2px; }
.bounce-tip-date { flex: 0 0 auto; opacity: .75; font-variant-numeric: tabular-nums; }
.bounce-tip-reason { flex: 1; min-width: 0; }

.chip {
    display: inline-flex; align-items: center;
    max-width: 100%;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700;
    background: var(--grey-bg); color: var(--grey);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-interview          { background: var(--green-bg); color: var(--green); }
.chip-offer              { background: var(--blue-bg);  color: var(--blue); }
.chip-rejection          { background: var(--red-bg);   color: var(--red); }
.chip-documents_requested{ background: var(--amber-bg); color: var(--amber); }
.chip-delivery_failure   { background: var(--amber-bg); color: var(--amber); }
.chip-other              { background: var(--grey-bg);  color: var(--grey); }
.chip-unclassified       { background: var(--grey-bg);  color: var(--ink-4); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.field input, .field textarea, .field select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.75; }
.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.check input { width: auto; }
.hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.85; margin: 0 0 4px; }
.hint code { background: var(--bg-soft-2); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.foot-status { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.row-end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.row-end .foot-status { margin-inline-end: auto; }

/* ---------------- login ---------------- */
.login-screen {
    height: 100vh; display: grid; place-items: center;
    background:
        radial-gradient(1200px 600px at 12% 10%, #eef0ff 0%, transparent 55%),
        radial-gradient(1000px 600px at 88% 90%, #e6f7f0 0%, transparent 55%),
        var(--bg);
    padding: 20px;
}
.login-card {
    width: 100%; max-width: 380px;
    display: flex; flex-direction: column; gap: 15px;
    padding: 40px 34px 30px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: var(--r-lg);
    box-shadow: var(--e4);
    animation: pop .4s var(--spring);
}
.login-anim { display: grid; place-items: center; margin: -10px 0 -6px; }
.login-anim dotlottie-player {
    /* width: 168px; */
    /* height: 168px; */
}
.brand-simple-center { text-align: center; margin-bottom: 6px; font-size: 20px; }
.login-error { min-height: 18px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--red); }

/* ---------------- app loading screen ---------------- */
.app-loading-screen {
    position: fixed; inset: 0; z-index: 500;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: var(--bg);
    animation: fadeIn .15s var(--ease);
}
.app-loading-screen.fade-out { animation: fadeOut .35s var(--ease) forwards; }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }
.app-loading-screen dotlottie-player { width: 180px; height: 180px; }
.app-loading-bar {
    width: 220px; height: 4px;
    border-radius: var(--r-pill);
    background: var(--bg-soft-2);
    overflow: hidden;
}
.app-loading-bar-fill {
    height: 100%; width: 0%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    transition: width .35s var(--ease);
}

/* ---------------- app shell ----------------
   Every scroll ancestor carries `min-height: 0`. Without it a long message
   forces the flex chain to grow instead of scrolling, which is what used to
   blow the whole layout apart. */
.app { height: 100vh; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h);
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 14px;
    padding: 0 16px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border-bottom: 1px solid var(--line);
    z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.sync-icon, .btn-ico { display: inline-flex; align-items: center; justify-content: center; }

.brand-simple {
    font-family: var(--font);
    font-weight: 800; font-size: 18px; letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    white-space: nowrap;
}

/* ---------------- account switcher (Gmail-style) ---------------- */
.account-switch-wrap { position: relative; }
.account-switch-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--r-pill);
    transition: background var(--t-fast) var(--ease);
}
.account-switch-btn:hover { background: var(--bg-hover); }
.account-switch-btn.warn .account-switch-avatar::after {
    content: ''; position: absolute; top: -1px; inset-inline-end: -1px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--amber); border: 2px solid var(--bg);
}
.account-switch-avatar {
    position: relative;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #8f97ff);
    color: #fff; font-size: 12px; font-weight: 800;
}
.account-switch-caret { font-size: 10px; color: var(--ink-3); }

.account-switcher-popup {
    position: absolute; top: calc(100% + 10px); inset-inline-start: 0;
    width: 300px; max-height: 70vh;
    display: flex; flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--e4);
    overflow: hidden;
    z-index: 50;
    animation: pop .18s var(--ease);
}
.asp-all {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 9px;
    padding: 12px 16px;
    font-size: 13px; font-weight: 700; color: var(--ink-2);
    border-bottom: 1px solid var(--line);
}
.asp-all:hover { background: var(--bg-hover); }
.asp-all.active { background: var(--brand-soft); color: var(--brand-dark); }
.asp-all-ico { font-size: 15px; }

.asp-groups { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.asp-group { margin-bottom: 2px; }
.asp-group-head {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}
.asp-group-head:hover { background: var(--bg-hover); }
.asp-group-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.asp-group-count { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--ink-4); }
.asp-group-caret { flex: 0 0 auto; font-size: 10px; color: var(--ink-4); transition: transform var(--t-fast) var(--ease); }
.asp-group.open .asp-group-caret { transform: rotate(180deg); }
.asp-group-body { padding: 2px 0 6px 0; }

.asp-acct {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 7px 10px 7px 22px;
    border-radius: var(--r-sm);
    font-size: 12.5px; color: var(--ink-2);
}
.asp-acct:hover { background: var(--bg-hover); }
.asp-acct.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.asp-acct-mail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.asp-acct-count { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--ink-4); }
.asp-acct-key { flex: 0 0 auto; font-size: 11px; }

.asp-footer { flex: 0 0 auto; padding: 6px; border-top: 1px solid var(--line); }
.asp-create-btn {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    font-size: 12.5px; font-weight: 700; color: var(--brand);
}
.asp-create-btn:hover { background: var(--brand-soft); }
.syncing .sync-icon { animation: spin 1s linear infinite; }

.searchbar { position: relative; flex: 1; max-width: 720px; }
.searchbar-icon {
    position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%);
    color: var(--ink-4); display: flex; pointer-events: none;
}
.searchbar input {
    width: 100%;
    height: 42px;
    padding-inline: 42px 40px;
    border: 1.5px solid transparent;
    border-radius: var(--r-pill);
    background: var(--bg-sunken);
    font-size: 13.5px;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.searchbar input:focus {
    outline: none; background: var(--bg);
    border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft);
}
.searchbar-clear {
    position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%;
    color: var(--ink-3); font-size: 12px;
}
.searchbar-clear:hover { background: var(--bg-hover); }

.body-wrap { flex: 1; min-height: 0; display: flex; }

/* ---------------- sidebar ---------------- */
.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 auto;
    min-height: 0;
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 10px;
    overflow-y: auto;
    border-inline-end: 1px solid var(--line);
    background: var(--bg-soft);
}
.compose-btn {
    display: flex; align-items: center; gap: 9px;
    padding: 13px 18px;
    margin-bottom: 10px;
    border-radius: var(--r-pill);
    background: var(--brand); color: #fff;
    font-size: 14px; font-weight: 700;
    box-shadow: var(--e-brand);
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.compose-btn:hover { background: var(--brand-dark); box-shadow: 0 8px 22px rgba(79,94,255,.34); }
.compose-btn:active { transform: scale(.97); }
.compose-plus { font-size: 12px; }

.nav-section { display: flex; flex-direction: column; gap: 1px; }
.nav-title {
    padding: 10px 12px 5px;
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    color: var(--ink-4); letter-spacing: .06em;
}
.nav-title-row { display: flex; align-items: center; gap: 6px; padding: 10px 6px 5px 12px; }
.nav-title-row .nav-title { padding: 0; flex: 1; }
.nav-divider { height: 1px; background: var(--line); margin: 7px 12px; }

.nav-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--r-pill);
    font-size: 13px; font-weight: 600;
    color: var(--ink-2);
    text-align: start;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item:hover { background: var(--bg-hover); }
.nav-item:active { transform: scale(.985); }
.nav-item.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; }
.nav-ico { flex: 0 0 auto; width: 20px; text-align: center; font-size: 13px; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--ink-4); }
.nav-item.active .nav-count { color: var(--brand-dark); }

.nav-create-label {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--r-pill);
    font-size: 12.5px; font-weight: 600;
    color: var(--ink-3);
    text-align: start;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-create-label:hover { background: var(--bg-hover); color: var(--ink-2); }
.nav-create-label .nav-ico { flex: 0 0 auto; width: 20px; text-align: center; font-size: 14px; }

/* ---- add-to-category menu on the open thread ---- */
.label-menu-wrap { position: relative; }
.label-menu {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0;
    min-width: 200px; max-height: 260px; overflow-y: auto;
    padding: 6px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--e3);
    z-index: 30;
}
.label-menu-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border-radius: var(--r-sm);
    font-size: 12.5px; color: var(--ink-2);
    text-align: start;
}
.label-menu-item:hover { background: var(--bg-hover); }
.label-menu-check { flex: 0 0 auto; width: 14px; color: var(--brand); font-weight: 800; }
.label-menu-empty { padding: 10px; font-size: 12px; color: var(--ink-4); text-align: center; }

.warn-pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--amber-bg); color: var(--amber); font-size: 11px;
}

/* ---------------- list pane ---------------- */
.list-pane {
    width: var(--list-w);
    flex: 0 0 auto;
    min-height: 0;
    display: flex; flex-direction: column;
    border-inline-end: 1px solid var(--line);
    background: var(--bg);
}
.list-toolbar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--line);
}
.list-title { margin: 0; font-size: 15px; font-weight: 800; }
.new-pill {
    margin-inline-start: auto;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: var(--brand-soft); color: var(--brand-dark);
    font-size: 11.5px; font-weight: 700;
    animation: fadeUp .28s var(--spring);
}
.new-pill:hover { background: var(--brand); color: #fff; }

.email-list { flex: 1; min-height: 0; overflow-y: auto; outline: none; }

.row {
    position: relative;
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 16px 11px 14px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}
.row:hover { background: var(--bg-soft); }
.row:active { background: var(--bg-hover); }
.row.selected { background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .row.selected { box-shadow: inset -3px 0 0 var(--brand); }
.row.unread { background: #fff; }
.row.unread .row-from, .row.unread .row-subject { font-weight: 800; color: var(--ink); }
.row.unread::after {
    content: ""; position: absolute; inset-inline-start: 5px; top: 50%;
    width: 5px; height: 5px; margin-top: -2.5px;
    border-radius: 50%; background: var(--brand);
}

.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row-top { display: flex; align-items: center; gap: 8px; }
.row-from { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-date { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--ink-4); }
.row-subject { font-size: 13px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-snippet { font-size: 12px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-tags { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.row-tags .chip { flex: 0 1 auto; min-width: 0; }
.row-acct { flex: 0 0 auto; font-size: 10.5px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.thread-n {
    flex: 0 0 auto; min-width: 17px; padding: 0 5px;
    border-radius: var(--r-pill); background: var(--bg-soft-2);
    color: var(--ink-3); font-size: 10px; font-weight: 800; text-align: center;
}

.star {
    flex: 0 0 auto; font-size: 15px; line-height: 1; color: var(--ink-4);
    transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--spring);
}
.star:hover { color: var(--star); transform: scale(1.2); }
.star.on { color: var(--star); }
.row-trash {
    flex: 0 0 auto; font-size: 13px; opacity: 0;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--spring);
}
.row:hover .row-trash { opacity: .75; }
.row-trash:hover { opacity: 1; transform: scale(1.18); }

.empty { padding: 56px 24px; text-align: center; color: var(--ink-4); font-size: 13px; animation: fadeIn .3s var(--ease); }
.skeleton { padding: 12px 16px; }
/* .icon-spin is set on a couple of pre-existing spinner SVGs (ICON_SPINNER in app.js) that
   had no matching animation rule yet -- @keyframes spin already existed above, just unused. */
.icon-spin { animation: spin .8s linear infinite; transform-origin: center; }

/* Infinite-scroll bottom loader, shown while loadMore() fetches the next page. */
.list-loading-more {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 0 22px;
    color: var(--ink-3);
    font-size: 12.5px;
    animation: fadeIn var(--t-fast, .15s) var(--ease, ease);
}

.skeleton-row { height: 58px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--bg-soft) 25%, var(--bg-soft-2) 37%, var(--bg-soft) 63%); background-size: 400% 100%; animation: shimmer 1.3s infinite; margin-bottom: 8px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------------- reading pane ---------------- */
.reading-pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.reading-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--ink-4); }
.reading-empty-art { font-size: 40px; opacity: .5; }
.reading-empty p { margin: 0; font-size: 13.5px; }

.thread-view { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: fadeIn .22s var(--ease); }

.thread-head {
    flex: 0 0 auto;
    padding: 16px 24px 14px;
    border-bottom: 1px solid var(--line);
}
.thread-head-row { display: flex; align-items: flex-start; gap: 12px; }
.thread-subject { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.thread-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.thread-tools .icon-btn.on { color: var(--star); }
.thread-meta { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-4); }

.thread-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 28px; }

.msg {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg);
    box-shadow: var(--e1);
    margin-bottom: 12px;
    overflow: hidden;
}
.msg.out { border-color: #dfe2ff; background: #fcfcff; }
.msg-head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    background: var(--bg-soft);
    cursor: pointer;
    user-select: none;
    transition: background var(--t-fast) var(--ease);
}
.msg-head:hover { background: var(--bg-hover); }
.msg.open > .msg-head { background: var(--bg); border-bottom: 1px solid var(--line-soft); }

.msg-who { flex: 0 0 auto; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; }
.msg-peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-4); }
/* The AI verdict is always visible — collapsed *and* open. It's the whole point of the panel. */
.msg-chip { flex: 0 0 auto; max-width: 42%; }
.msg-when { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--ink-4); }
.msg-caret { flex: 0 0 auto; font-size: 10px; color: var(--ink-4); transition: transform var(--t) var(--ease); }
.msg.open .msg-caret { transform: rotate(180deg); }
.msg:not(.open) .msg-peek { display: block; }
.msg.open .msg-peek { display: none; }

.msg-body { display: none; }
.msg.open .msg-body { display: block; }
.msg-addr { padding: 10px 16px 0; font-size: 11.5px; color: var(--ink-4); }

/* Plain text: pre-wrap belongs ONLY here, never on an HTML body. */
.msg-text {
    padding: 14px 16px;
    font-size: 13.5px; line-height: 1.9;
    white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}


.msg-quote {
    margin: 0 16px 14px;
    padding: 8px 12px;
    border-inline-start: 3px solid var(--line);
    background: var(--bg-soft);
    border-radius: var(--r-xs);
    color: var(--ink-4);
    font-size: 12.5px; line-height: 1.8;
    white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
.quote-btn {
    margin: 0 16px 12px;
    padding: 1px 10px;
    border-radius: var(--r-xs);
    background: var(--bg-soft-2); color: var(--ink-3);
    border: 1px solid var(--line);
    font-size: 13px; font-weight: 800; letter-spacing: .1em; line-height: 1.5;
}
.quote-btn:hover { background: var(--bg-hover); }

/* HTML mail lives in a sandboxed iframe so its CSS can never touch the panel. */
.msg-frame { display: block; width: 100%; border: 0; background: #fff; height: 100px; }
.msg-actions { display: flex; gap: 8px; padding: 0 16px 14px; }

.reply-dock {
    flex: 0 0 auto;
    display: flex; flex-direction: column;
    /* Capped so a long toolbar+editor can never push the send/attach row off the bottom of
       the viewport with no way to reach it -- the middle section scrolls, head/row don't. */
    max-height: min(58vh, 480px);
    margin: 0 24px 18px;
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg);
    box-shadow: var(--e2);
    overflow: hidden;
    animation: pop .18s var(--ease);
}
.reply-dock-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
}
.reply-dock-to { font-size: 12.5px; color: var(--ink-3); }
.reply-dock-to b { color: var(--ink-2); font-weight: 700; }

.reply-body-scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* Quill: re-skin the default "snow" theme to match the app (rounded, borderless, our font). */
.reply-dock .ql-toolbar.ql-snow {
    border: 0; border-bottom: 1px solid var(--line);
    padding: 8px 10px;
    font-family: var(--font);
}
.reply-dock .ql-container.ql-snow { border: 0; font-family: var(--font); }
.reply-dock .ql-editor {
    min-height: 130px; max-height: 320px; overflow-y: auto;
    padding: 14px 16px;
    font-size: 13.5px; line-height: 1.8;
}
/* Paired with the rtlLanguage logic in app.js, which sets dir on the editor per draft: the
   panel is RTL but employer replies are normally German/English, and without these the
   Latin-script draft keeps RTL punctuation placement ("Guten Tag ,"). */
.reply-dock .ql-editor[dir="ltr"] { direction: ltr; text-align: left; unicode-bidi: plaintext; }
.reply-dock .ql-editor[dir="rtl"] { direction: rtl; text-align: right; unicode-bidi: plaintext; }
.reply-dock .ql-editor.ql-blank::before { color: var(--ink-4); font-style: normal; font-family: var(--font); }
.reply-dock .ql-snow .ql-picker { color: var(--ink-2); }
.reply-dock .ql-snow .ql-stroke { stroke: var(--ink-2); }
.reply-dock .ql-snow .ql-fill { fill: var(--ink-2); }
.reply-dock .ql-snow.ql-toolbar button:hover,
.reply-dock .ql-snow .ql-toolbar button:hover,
.reply-dock .ql-snow.ql-toolbar button.ql-active,
.reply-dock .ql-snow .ql-picker-label.ql-active { color: var(--brand); }
.reply-dock .ql-snow.ql-toolbar button:hover .ql-stroke,
.reply-dock .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--brand); }
.reply-dock .ql-snow.ql-toolbar button:hover .ql-fill,
.reply-dock .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--brand); }

.reply-attachments {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: var(--bg);
}
.attach-chip {
    display: flex; align-items: center; gap: 8px;
    min-width: 190px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-soft);
    font-size: 12px;
    color: var(--ink-3);
}
.attach-chip.error { border-color: var(--red); background: var(--red-bg); }
a.attach-chip { text-decoration: none; color: inherit; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
a.attach-chip:hover { background: var(--bg-hover); border-color: var(--ink-4); }

.msg-attachments {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 0 16px 14px;
}
.attach-chip-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.attach-chip-name {
    color: var(--ink-2); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-chip-meta { color: var(--ink-4); font-size: 11px; }
.attach-chip.error .attach-chip-meta { color: var(--red); }
.attach-chip-bar {
    display: block; width: 100%; height: 3px;
    border-radius: var(--r-pill);
    background: var(--line);
    overflow: hidden;
}
.attach-chip-bar span {
    display: block; height: 100%;
    background: var(--brand);
    transition: width .15s var(--ease);
}
.attach-chip-x {
    flex: 0 0 auto;
    width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--ink-3); font-size: 10px;
}
.attach-chip-x:hover { background: var(--red-bg); color: var(--red); }

/* drag a file anywhere onto the editor to attach it, Gmail-style -- the class lands on the
   Quill container (#reply-editor keeps its id, Quill just adds ql-container to it and puts
   the actual editable .ql-editor div inside), so target the container itself here. */
#reply-editor.drag-over {
    outline: 2px dashed var(--brand);
    outline-offset: -3px;
    background: var(--brand-tint);
}

.reply-row {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
}
.reply-row .foot-status { margin-inline-start: 4px; font-size: 12px; color: var(--ink-3); }
#reply-attach-btn { font-size: 15px; }

/* ---------------- thread AI chat pane ---------------- */
.chat-pane {
    width: var(--chat-w);
    flex: 0 0 auto;
    min-height: 0;
    display: flex; flex-direction: column;
    border-inline-start: 1px solid var(--line);
    background: var(--bg-soft);
    animation: fadeIn .22s var(--ease);
}
.chat-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    height: var(--topbar-h);
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}
.chat-head-ico { font-size: 15px; }
.chat-head-title { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }

.chat-messages {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.chat-empty {
    flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px;
    text-align: center; color: var(--ink-4); padding: 20px;
}
.chat-empty-ico { font-size: 26px; opacity: .6; }
.chat-empty p { margin: 0; font-size: 12.5px; line-height: 1.7; max-width: 210px; }

.chat-bubble {
    max-width: 92%;
    padding: 9px 13px;
    border-radius: var(--r-md);
    font-size: 13px; line-height: 1.75;
    white-space: pre-wrap; word-break: break-word;
    animation: pop .18s var(--ease);
}
.chat-bubble.user {
    align-self: flex-end;
    background: var(--brand); color: #fff;
    border-bottom-left-radius: var(--r-xs);
}
.chat-bubble.assistant {
    align-self: flex-start;
    background: var(--bg); color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-right-radius: var(--r-xs);
}
.chat-bubble.pending { color: var(--ink-3); font-style: italic; }
.chat-bubble.error { background: var(--red-bg); color: var(--red); border-color: transparent; }

.chat-quick-actions {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 14px 10px;
}
.chat-quick-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg);
    font-size: 11.5px; font-weight: 600; color: var(--ink-3);
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chat-quick-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }

.chat-dock {
    flex: 0 0 auto;
    display: flex; align-items: flex-end; gap: 8px;
    padding: 12px 14px 16px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, var(--bg-soft), var(--bg));
}
.chat-dock textarea {
    flex: 1; resize: none;
    max-height: 120px;
    padding: 10px 12px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    font-size: 13px; line-height: 1.6;
    background: var(--bg);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.chat-dock textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft); }
.chat-send-btn {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--brand); color: #fff;
    font-size: 14px;
    box-shadow: var(--e-brand);
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.chat-send-btn:hover { background: var(--brand-dark); }
.chat-send-btn:active { transform: scale(.92); }
.chat-send-btn:disabled { opacity: .5; box-shadow: none; }

@media (max-width: 1180px) {
    .chat-pane { display: none; }
}

/* ---------------- compose window (Gmail-style floating panel) ---------------- */
.compose-window {
    position: fixed;
    left: 24px;
    bottom: 0;
    width: 440px;
    max-width: calc(100vw - 48px);
    height: 500px;
    max-height: calc(100vh - 60px);
    display: flex; flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: var(--e4);
    z-index: 90;
    animation: composeIn .22s var(--spring);
    overflow: hidden;
}
@keyframes composeIn { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.compose-window.expanded {
    left: 50%;
    right: auto;
    bottom: 6vh;
    width: min(880px, calc(100vw - 48px));
    height: 84vh;
    transform: translateX(-50%);
    border-radius: var(--r-lg);
    border-bottom: 1px solid var(--line);
}

.compose-window.minimized { height: auto; }
.compose-window.minimized .compose-body,
.compose-window.minimized .compose-toolbar-row { display: none; }

.compose-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 44px;
    padding: 0 8px 0 14px;
    background: var(--bg-soft-2);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    user-select: none;
}
.compose-title { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.compose-head-actions { display: flex; align-items: center; gap: 2px; }
.compose-head-actions .icon-btn { width: 28px; height: 28px; }

.compose-body {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.compose-row {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line-soft);
}
.compose-row-label { flex: 0 0 auto; width: 52px; font-size: 12.5px; color: var(--ink-3); }
.compose-row-input {
    flex: 1; min-width: 0;
    border: 0; outline: none;
    font-size: 13.5px; font-family: var(--font);
    background: transparent;
    color: var(--ink);
    padding: 4px 0;
}
.compose-subject-row { border-bottom: 1px solid var(--line-soft); }
.compose-subject-input { font-weight: 600; }

.compose-from-row { position: relative; }
.compose-from-select {
    flex: 1; min-width: 0;
    appearance: none; -webkit-appearance: none;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2379818f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 12px center;
    padding: 6px 34px 6px 14px;
    font-size: 12.5px; font-family: var(--font); color: var(--ink-2);
    cursor: pointer;
}
[dir="rtl"] .compose-from-select { background-position: left 12px center; }

.compose-cc-toggle { flex: 0 0 auto; display: flex; gap: 8px; }
.compose-cc-toggle button {
    font-size: 12px; color: var(--ink-3); font-weight: 600;
    padding: 2px 4px;
}
.compose-cc-toggle button:hover { color: var(--ink-2); }
.compose-cc-toggle button.active { color: var(--brand); }

.compose-editor-wrap { flex: 1; min-height: 160px; display: flex; flex-direction: column; }
.compose-editor-wrap .ql-toolbar.ql-snow { display: none; border: 0; padding: 6px 10px; font-family: var(--font); }
.compose-editor-wrap.show-toolbar .ql-toolbar.ql-snow { display: block; }
.compose-editor-wrap .ql-container.ql-snow { border: 0; font-family: var(--font); flex: 1; }
.compose-editor-wrap .ql-editor { min-height: 140px; font-size: 13.5px; line-height: 1.8; padding: 10px 14px; }
.compose-editor-wrap .ql-editor.ql-blank::before { color: var(--ink-4); font-style: normal; font-family: var(--font); }
#compose-editor.drag-over { outline: 2px dashed var(--brand); outline-offset: -3px; background: var(--brand-tint); }

.compose-toolbar-row {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 4px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
    position: relative;
}
.compose-toolbar-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.compose-toolbar-row .foot-status { margin-inline-start: auto; font-size: 11.5px; color: var(--ink-3); }
.compose-discard { margin-inline-start: 4px; }
.compose-discard:hover { background: var(--red-bg); color: var(--red); }

.emoji-popover {
    position: absolute;
    bottom: 52px;
    inset-inline-start: 12px;
    width: 260px;
    max-height: 220px;
    overflow-y: auto;
    display: grid; grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--e3);
    z-index: 10;
}
.emoji-popover button {
    font-size: 18px; padding: 4px; border-radius: var(--r-xs);
    display: grid; place-items: center;
}
.emoji-popover button:hover { background: var(--bg-hover); }

@media (max-width: 560px) {
    .compose-window { inset-inline-start: 0; width: 100%; max-width: 100%; border-radius: 0; }
}

/* ---------------- modals ---------------- */
.scrim {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
    padding: 22px;
    background: rgba(14,17,24,.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: fadeIn var(--t-fast) var(--ease);
}
.sheet {
    display: flex; flex-direction: column;
    width: 100%; max-height: 88vh;
    background: var(--bg);
    border-radius: var(--r-lg);
    box-shadow: var(--e4);
    overflow: hidden;
    animation: pop var(--t) var(--spring);
}
.sheet-md { max-width: 560px; }
.sheet-lg { max-width: 860px; }
.sheet-narrow { width: 20%; min-width: 320px; }
.sheet-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 15px; font-weight: 800;
}
.sheet-close {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; color: var(--ink-4); font-size: 13px;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sheet-close:hover { background: var(--bg-soft); border-color: var(--line); color: var(--ink-1); }
.sheet-close:active { background: var(--line-soft, var(--bg-soft)); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; }
.sheet-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
}
.sheet-foot .foot-status { margin-inline-end: auto; }

.settings-sheet { height: 80vh; }
.settings-body { flex: 1; min-height: 0; display: flex; }
.settings-nav {
    width: 210px; flex: 0 0 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 10px;
    overflow-y: auto;
    background: var(--bg-soft);
    border-inline-end: 1px solid var(--line);
}
.settings-tab {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 13px;
    border-radius: var(--r-sm);
    font-size: 13px; font-weight: 700; color: var(--ink-2);
    text-align: start;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.settings-tab:hover { background: var(--bg-hover); }
.settings-tab.active { background: var(--brand-soft); color: var(--brand-dark); }
.tab-badge {
    min-width: 18px; padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--red); color: #fff;
    font-size: 10.5px; font-weight: 800; text-align: center;
}
.settings-panel { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 20px 22px; }
.settings-page { display: flex; flex-direction: column; gap: 13px; }

.field-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }

.export-smtp-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 340px; overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 6px;
}
.export-smtp-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px;
    border-radius: var(--r-xs);
    font-size: 12.5px; color: var(--ink-2);
    cursor: pointer;
}
.export-smtp-item:hover { background: var(--bg-hover); }
.export-smtp-item input { flex: 0 0 auto; }
.export-smtp-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.manage-list { display: flex; flex-direction: column; gap: 9px; }
.manage-item {
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-soft);
}
.manage-item.broken { border-color: #efd6a6; background: var(--amber-bg); }
.manage-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.manage-mail { font-size: 13px; font-weight: 700; }
.manage-src { font-size: 11.5px; color: var(--ink-4); }
.state {
    margin-inline-start: auto;
    padding: 2px 9px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700;
    background: var(--grey-bg); color: var(--ink-3);
}
.state.ok { background: var(--green-bg); color: var(--green); }
.state.bad { background: var(--amber-bg); color: var(--amber); }
.manage-del {
    flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--ink-3); font-size: 12px;
}
.manage-del:hover { background: var(--red-bg); color: var(--red); }
.manage-del:disabled { opacity: .4; cursor: not-allowed; }

.op-progress { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 6px; text-align: center; }
.op-progress-spinner {
    width: 30px; height: 30px;
    border: 3px solid var(--brand-soft);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.op-progress p { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.8; }
.manage-fix { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 9px; }
.manage-fix input {
    flex: 1; min-width: 150px;
    padding: 8px 11px;
    border: 1.5px solid var(--line); border-radius: var(--r-sm);
    font-size: 12.5px;
}
.manage-fix input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.conn-list { display: flex; flex-direction: column; gap: 8px; }
.conn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 13px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    font-size: 12.5px;
}
.conn-acts { display: flex; gap: 6px; }
.disclose summary { cursor: pointer; padding: 9px 0; font-size: 13px; font-weight: 700; color: var(--brand); }
.disclose[open] summary { margin-bottom: 10px; }
.disclose > .grid-2 { margin-bottom: 10px; }

/* ---------------- toast ---------------- */
.toast {
    position: fixed; inset-inline-start: 50%; bottom: 26px; transform: translateX(-50%);
    z-index: 300;
    padding: 11px 18px;
    border-radius: var(--r-pill);
    background: #12151c; color: #fff;
    font-size: 13px; font-weight: 600;
    box-shadow: var(--e3);
    animation: fadeUp .26s var(--spring);
}

/* ---------------- scrollbars ---------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d3d8e2; border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #bcc3d0; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- responsive ----------------
   The reading pane is the one that must never be starved: it is the actual
   content. Everything below progressively narrows the *chrome* around it
   (label rail, list, chat) rather than letting the reading pane collapse. */

/* Never let the reading pane shrink past a comfortable measure, no matter what
   the surrounding panes want. */
.reading-pane { min-width: 420px; }

/* Shortwave-style icon rail: below this width the label sidebar drops its text
   and becomes a 60px icon strip, handing ~150px straight back to the reading
   pane -- which is exactly the width that was missing on a 1280px viewport. */
@media (max-width: 1500px) {
    .sidebar {
        width: var(--rail-w);
        padding: 12px 6px;
        align-items: center;
        /* overflow-y stays auto (inherited): with many custom categories the rail
           must still scroll, so tooltips use the native title attribute -- set by
           navrail.js -- instead of a CSS bubble that overflow would clip. */
    }
    .sidebar .nav-title { display: none; }
    .sidebar .nav-count { display: none; }
    .sidebar .nav-item,
    .sidebar .nav-create-label {
        position: relative;
        width: 44px; height: 40px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
    .sidebar .nav-ico { margin: 0; }

    .sidebar .nav-label { display: none; }

    /* font-size:0 collapses the button's bare text node (it is not wrapped in an
       element, so it cannot be targeted directly); the icon restores its own. */
    .compose-btn {
        width: 44px; height: 44px;
        padding: 0;
        justify-content: center;
        font-size: 0;
        gap: 0;
    }
    .compose-btn .compose-plus { font-size: 14px; margin: 0; }

    /* The topbar carries seven labelled shortcuts; at this width they crush the
       search field. Every one of them already has a title attribute, so drop to
       icon-only. #logout-btn is excluded -- it has no icon, only text. */
    .topbar-actions .btn:not(#logout-btn) {
        font-size: 0;
        gap: 0;
        padding: 8px 10px;
    }
    .topbar-actions .btn .btn-ico,
    .topbar-actions .btn .sync-icon { font-size: 14px; }
    .topbar-actions #create-account-btn span { font-size: 15px; }
    .topbar-actions #logout-btn { font-size: 13px; }
}

/* Tighten the reading pane chrome itself once space is genuinely scarce. */
@media (max-width: 1280px) {
    .thread-head { padding: 14px 18px 12px; }
    .thread-body { padding: 16px 18px 24px; }
    .thread-subject { font-size: 16.5px; }
}

@media (max-width: 1120px) {
    /* Last resort before the reading pane would be squeezed: the AI chat pane
       is secondary, so it gives up its space first. */
    :root { --chat-w: 270px; }
    .list-pane { width: 300px; }
    .brand-simple { display: none; }
}

@media (max-width: 1050px) {
    /* Below this the panes are all flex:0 0 auto, so the reading pane min-width
       would push the total past the viewport and scroll the whole app sideways.
       Release the floor and let the side panes give up the remaining space. */
    .reading-pane { min-width: 0; }
    :root { --chat-w: 250px; }
    .list-pane { width: 260px; }
}