/* «نامه‌های دریافتی» و «نامه‌های ارسالی» (mb) */

.mb-page, .mb-modal, .mb-confirm { --mb-violet: #7c3aed; }
body.theme-dark .mb-page, body.theme-dark .mb-modal, body.theme-dark .mb-confirm { --mb-violet: #a78bfa; }
.mb-page svg, .mb-modal svg, .mb-confirm svg, .mb-zoom svg { flex-shrink: 0; }

.mb-page .tone-brand, .mb-modal .tone-brand { --tone: var(--oa-brand); }
.mb-page .tone-success, .mb-modal .tone-success { --tone: var(--oa-success); }
.mb-page .tone-warning, .mb-modal .tone-warning { --tone: var(--oa-warning); }
.mb-page .tone-danger, .mb-modal .tone-danger { --tone: var(--oa-danger); }
.mb-page .tone-violet, .mb-modal .tone-violet { --tone: var(--mb-violet); }
.mb-page .tone-muted, .mb-modal .tone-muted { --tone: var(--oa-ink-faint); }
.mb-page .tone-dark, .mb-modal .tone-dark { --tone: var(--oa-ink); }

.mb-page { display: flex; flex-direction: column; gap: 14px; }

/* ---- header ---- */
.mb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mb-head-text { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mb-headline { margin: 0; font-size: 1.02rem; font-weight: 900; line-height: 1.8; color: var(--oa-ink); }

.mb-head-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--oa-brand), color-mix(in srgb, var(--oa-brand) 55%, #7c3aed));
    color: #fff;
    box-shadow: 0 8px 20px -10px var(--oa-brand);
    flex-shrink: 0;
}

.mb-page[data-box="sent"] .mb-head-icon { background: linear-gradient(135deg, #0f766e, #0ea5e9); box-shadow: 0 8px 20px -10px #0ea5e9; }
.mb-head-icon svg { width: 22px; height: 22px; }
.mb-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mb-updated { font-size: 0.72rem; color: var(--oa-ink-faint); }

/* ---- buttons ---- */
.mb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.mb-btn svg { width: 16px; height: 16px; }
.mb-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mb-btn:focus-visible { outline: 2px solid var(--oa-brand); outline-offset: 2px; }
.mb-btn.is-loading { opacity: 0.7; cursor: progress; }
.mb-btn-sm { padding: 5px 10px; font-size: 0.74rem; border-radius: 9px; }
.mb-btn-sm svg { width: 14px; height: 14px; }
.mb-icon-only { padding: 8px 10px; }
.mb-btn-primary { background: var(--oa-brand); color: #fff; }
.mb-btn-primary:hover:not(:disabled) { background: var(--oa-brand-hover); color: #fff; }
.mb-btn-success { background: var(--oa-success); color: #fff; }
.mb-btn-success:hover:not(:disabled) { background: var(--oa-success-hover, var(--oa-success)); color: #fff; filter: brightness(0.95); }
.mb-btn-danger { background: var(--oa-danger); color: #fff; }
.mb-btn-danger:hover:not(:disabled) { filter: brightness(0.94); color: #fff; }
.mb-btn-ghost { background: var(--oa-surface); color: var(--oa-ink-soft); border-color: var(--oa-line); }
.mb-btn-ghost:hover:not(:disabled) { color: var(--oa-brand); border-color: color-mix(in srgb, var(--oa-brand) 40%, var(--oa-line)); }

/* ---- tabs ---- */
.mb-tabs { display: flex; gap: 4px; padding: 5px; border-radius: 16px; background: var(--oa-surface-muted); overflow-x: auto; scrollbar-width: none; }
.mb-tabs::-webkit-scrollbar { display: none; }

.mb-tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 6px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--oa-ink-soft);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mb-tab svg { width: 15px; height: 15px; }
.mb-tab:hover { color: var(--oa-ink); }
.mb-tab b { min-width: 24px; padding: 1px 8px; border-radius: 99px; background: var(--oa-surface); color: var(--oa-ink-soft); font-size: 0.72rem; text-align: center; }
.mb-tab b[class*="tone-"] { background: var(--tone); color: #fff; }
.mb-tab.is-active { background: var(--oa-surface); color: var(--oa-brand); box-shadow: var(--oa-shadow-sm); }
.mb-tab.is-active b { background: var(--oa-brand); color: #fff; }

/* ---- toolbar and chips ---- */
.mb-toolbar { display: flex; flex-wrap: wrap; gap: 10px; }

.mb-search {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--oa-line);
    background: var(--oa-surface);
    color: var(--oa-ink-faint);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mb-search:focus-within { border-color: var(--oa-brand); box-shadow: 0 0 0 3px var(--oa-brand-glow); }
.mb-search svg { width: 17px; height: 17px; }
.mb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--oa-ink); font-family: inherit; font-size: 0.86rem; }
.mb-search kbd { padding: 0 7px; border-radius: 6px; border: 1px solid var(--oa-line); background: var(--oa-surface-soft); color: var(--oa-ink-faint); font-size: 0.7rem; font-family: inherit; }
.mb-search:focus-within kbd { display: none; }

.mb-toolbar select {
    flex: 0 1 170px;
    min-width: 140px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--oa-line);
    background: var(--oa-surface);
    color: var(--oa-ink);
    font-family: inherit;
    font-size: 0.82rem;
}

.mb-toolbar select:focus { outline: 0; border-color: var(--oa-brand); box-shadow: 0 0 0 3px var(--oa-brand-glow); }

.mb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.mb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid var(--oa-line);
    background: var(--oa-surface);
    color: var(--oa-ink-soft);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.mb-chip svg { width: 14px; height: 14px; }
.mb-chip:hover { border-color: color-mix(in srgb, var(--oa-brand) 45%, var(--oa-line)); color: var(--oa-ink); }
.mb-chip.is-active { background: color-mix(in srgb, var(--oa-brand) 10%, var(--oa-surface)); border-color: var(--oa-brand); color: var(--oa-brand); }
.mb-chip-clear { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 0; background: none; color: var(--oa-danger); font-family: inherit; font-size: 0.76rem; font-weight: 800; cursor: pointer; }
.mb-chip-clear svg { width: 13px; height: 13px; }

.mb-bulk {
    position: sticky;
    top: 8px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--oa-brand) 9%, var(--oa-surface));
    border: 1px solid color-mix(in srgb, var(--oa-brand) 28%, var(--oa-line));
    box-shadow: var(--oa-shadow-sm);
}

.mb-bulk[hidden] { display: none; }
.mb-bulk > strong { margin-inline-end: auto; font-size: 0.84rem; color: var(--oa-ink); }

/* ---- list ---- */
.mb-list-wrap { min-width: 0; }

.mb-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--oa-line);
    border-radius: var(--oa-radius-lg, 18px);
    background: var(--oa-surface);
    overflow: hidden;
    outline: 0;
    transition: opacity 0.2s ease;
}

.mb-list.is-busy { opacity: 0.55; }
.mb-list:has(> .mb-empty) { border: 0; background: none; }

.mb-group {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: 7px 18px;
    background: var(--oa-surface-soft);
    border-bottom: 1px solid var(--oa-line-subtle);
    color: var(--oa-ink-faint);
    font-size: 0.72rem;
    font-weight: 900;
}

.mb-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 18px 13px 14px;
    border-bottom: 1px solid var(--oa-line-subtle);
    background: var(--oa-surface);
    cursor: pointer;
    outline: 0;
    transition: background-color 0.12s ease;
}

.mb-row:last-child { border-bottom: 0; }
.mb-row:hover { background: color-mix(in srgb, var(--oa-brand) 3%, var(--oa-surface)); }
.mb-row.is-cursor, .mb-row:focus-visible { background: color-mix(in srgb, var(--oa-brand) 6%, var(--oa-surface)); box-shadow: inset 3px 0 0 var(--oa-brand); }
.mb-row.is-open { background: color-mix(in srgb, var(--oa-brand) 9%, var(--oa-surface)); }
.mb-row.is-unread { background: color-mix(in srgb, var(--oa-brand) 4%, var(--oa-surface)); }
.mb-row.is-unread::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--oa-brand); }
.mb-row.is-skeleton { cursor: default; align-items: center; }

.mb-check { display: flex; align-items: center; height: 42px; margin: 0; cursor: pointer; }
.mb-check input { width: 17px; height: 17px; accent-color: var(--oa-brand); cursor: pointer; }

.mb-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: hsl(var(--hue) 70% 92%);
    color: hsl(var(--hue) 55% 32%);
    font-size: 0.8rem;
    font-weight: 900;
    flex-shrink: 0;
    user-select: none;
}

body.theme-dark .mb-avatar { background: hsl(var(--hue) 40% 24%); color: hsl(var(--hue) 70% 82%); }
.mb-avatar.is-light, body.theme-dark .mb-avatar.is-light { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); color: #fff; }

.mb-status-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--tone) 13%, transparent);
    color: var(--tone);
    flex-shrink: 0;
}

.mb-status-icon svg { width: 19px; height: 19px; }

.mb-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mb-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mb-who { min-width: 0; font-size: 0.8rem; font-weight: 700; color: var(--oa-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-who small { font-weight: 600; color: var(--oa-ink-faint); }
.mb-row.is-unread .mb-who { font-weight: 900; color: var(--oa-ink); }
.mb-time { margin-inline-start: auto; font-size: 0.72rem; color: var(--oa-ink-faint); white-space: nowrap; }
.mb-row.is-unread .mb-time { color: var(--oa-brand); font-weight: 800; }

.mb-subject { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mb-subject span { min-width: 0; font-size: 0.92rem; font-weight: 700; color: var(--oa-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-row.is-unread .mb-subject span { font-weight: 900; }
.mb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--oa-brand); flex-shrink: 0; }

.mb-excerpt {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.8;
    color: var(--oa-ink-faint);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mb-pill {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--tone, var(--oa-ink-faint)) 13%, transparent);
    color: var(--tone, var(--oa-ink-soft));
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.9;
    white-space: nowrap;
    flex-shrink: 0;
}

.mb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 2px; }
.mb-tags:empty { display: none; }

.mb-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--tone, var(--oa-ink-faint)) 11%, transparent);
    color: var(--tone, var(--oa-ink-soft));
    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1.9;
    white-space: nowrap;
}

.mb-tag svg { width: 12px; height: 12px; }
.mb-tag.is-light { background: rgba(255, 255, 255, 0.18); color: #fff; }
.mb-code { margin-inline-start: auto; font-size: 0.68rem; color: var(--oa-ink-faint); direction: ltr; unicode-bidi: isolate; }

.mb-track { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 2px; color: var(--tone); }
.mb-track small { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 0.72rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-track small svg { width: 13px; height: 13px; }
.mb-bar { flex: 0 0 110px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--tone) 15%, var(--oa-surface-muted)); overflow: hidden; }
.mb-bar i { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: var(--tone); }

.mb-star {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--oa-ink-faint);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.mb-star svg { width: 18px; height: 18px; }
.mb-row:hover .mb-star, .mb-row.is-cursor .mb-star { opacity: 1; }
.mb-star:hover { background: var(--oa-surface-muted); color: #f59e0b; }
.mb-star.is-on { opacity: 1; color: #f59e0b; }
.mb-star.is-on svg, .mb-md-star.is-on svg { fill: currentColor; }
.mb-star:active { transform: scale(0.9); }

.mb-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 4px; font-size: 0.76rem; color: var(--oa-ink-faint); }

.mb-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 18px; border: 1px dashed var(--oa-line); border-radius: var(--oa-radius-lg, 18px); background: var(--oa-surface); text-align: center; }
.mb-empty > svg { width: 40px; height: 40px; color: var(--oa-ink-faint); }
.mb-empty strong { color: var(--oa-ink); }
.mb-empty p { margin: 0; max-width: 420px; font-size: 0.8rem; line-height: 1.9; color: var(--oa-ink-faint); }
.mb-empty.is-error > svg { color: var(--oa-danger); }

/* sidebar badge */
.menu-item { position: relative; }
.mb-menu-badge { margin-inline-start: auto; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--oa-brand); color: #fff; font-size: 0.68rem; font-weight: 900; text-align: center; line-height: 1.7; }

/* ---- letter dialog ---- */
body.mb-modal-open { overflow: hidden; }

.mb-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mb-modal-backdrop.is-open { opacity: 1; visibility: visible; }

.mb-modal {
    display: flex;
    flex-direction: column;
    width: min(1080px, 100%);
    height: min(90vh, 900px);
    border-radius: 22px;
    background: var(--oa-bg);
    color: var(--oa-ink);
    box-shadow: var(--oa-shadow-modal);
    overflow: hidden;
    outline: 0;
    transform: translateY(14px) scale(0.98);
    transition: transform 0.22s ease;
}

.mb-modal-backdrop.is-open .mb-modal { transform: none; }
.mb-modal.is-busy .mb-md-body { opacity: 0.5; pointer-events: none; }

.mb-md-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--oa-ink-soft); }
.mb-md-loading > svg { width: 40px; height: 40px; color: var(--oa-danger); }
.mb-md-loading strong { color: var(--oa-ink); }
.mb-md-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.mb-md-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 22px 16px;
    background: linear-gradient(125deg, color-mix(in srgb, var(--tone) 80%, #0f172a), color-mix(in srgb, var(--tone) 52%, #0f172a));
    color: #fff;
    flex-shrink: 0;
}

.mb-md-head.tone-muted { background: linear-gradient(125deg, #334155, #1e293b); }
.mb-md-bar { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.mb-md-kind { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.mb-md-kind svg { width: 15px; height: 15px; }
.mb-md-pos { font-size: 0.74rem; font-weight: 700; color: rgba(255, 255, 255, 0.78); white-space: nowrap; }
.mb-md-tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.mb-md-sep { width: 1px; height: 22px; margin: 0 2px; background: rgba(255, 255, 255, 0.22); }

.mb-md-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mb-md-icon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.26); }
.mb-md-icon:disabled { opacity: 0.38; cursor: default; }
.mb-md-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mb-md-icon svg { width: 18px; height: 18px; }
.mb-md-star.is-on { color: #fcd34d; }

.mb-md-head h3 { margin: 0; font-size: 1.2rem; font-weight: 900; line-height: 1.7; color: #fff; overflow-wrap: anywhere; }
.mb-md-from { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.mb-md-from > div:not(.mb-tags) { display: flex; flex-direction: column; min-width: 0; }
.mb-md-from strong { font-size: 0.88rem; font-weight: 800; }
.mb-md-from strong small { font-weight: 600; opacity: 0.8; }
.mb-md-from span { font-size: 0.74rem; color: rgba(255, 255, 255, 0.8); }
.mb-md-from .mb-tags { margin: 0; margin-inline-start: auto; }

.mb-md-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    align-items: start;
    gap: 18px;
    padding: 20px 22px 24px;
    transition: opacity 0.15s ease;
}

.mb-md-main, .mb-md-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mb-md-section { padding: 14px 16px; border-radius: 16px; background: var(--oa-surface); border: 1px solid var(--oa-line-subtle); }
.mb-md-section h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 0.84rem; font-weight: 900; color: var(--oa-ink); }
.mb-md-section h4 > svg { width: 15px; height: 15px; color: var(--oa-ink-faint); }
.mb-md-section h4 small { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; font-size: 0.7rem; font-weight: 700; color: var(--oa-ink-faint); }
.mb-md-section h4 small svg { width: 13px; height: 13px; }
.mb-md-section h4 small.is-good { color: var(--oa-success); }
.mb-muted { margin: 0; font-size: 0.78rem; color: var(--oa-ink-faint); }

/* document */
.mb-doc { padding: 0; overflow: hidden; }
.mb-doc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--oa-line-subtle); }
.mb-doc-bar h4 { margin: 0; }
.mb-doc-tools { display: flex; gap: 6px; margin-inline-start: auto; }
.mb-doc > .mb-text, .mb-doc > .mb-muted { margin: 0; padding: 16px 18px; }
.mb-text { font-size: 0.88rem; line-height: 2.15; color: var(--oa-ink-soft); white-space: pre-line; overflow-wrap: anywhere; }

.mb-paper { position: relative; display: flex; justify-content: center; padding: 18px; background: var(--oa-surface-muted); }
.mb-paper img { display: block; width: 100%; max-width: 640px; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(15, 23, 42, 0.06); cursor: zoom-in; }
.mb-paper-loading { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 640px; aspect-ratio: 1 / 1.414; padding: 40px 36px; border-radius: 4px; background: var(--oa-surface); }
.mb-paper-loading .oa-skeleton { height: 12px; border-radius: 6px; }
.mb-paper-loading .oa-skeleton:nth-child(1) { width: 45%; }
.mb-paper-loading .oa-skeleton:nth-child(2) { width: 85%; }
.mb-paper-loading .oa-skeleton:nth-child(3) { width: 70%; }
.mb-paper-loading small { margin-top: auto; text-align: center; font-size: 0.74rem; color: var(--oa-ink-faint); }

.mb-paper-zoom {
    position: absolute;
    top: 26px;
    inset-inline-start: 26px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 0;
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.mb-paper-zoom svg { width: 14px; height: 14px; }
.mb-paper:hover .mb-paper-zoom, .mb-paper-zoom:focus-visible { opacity: 1; }

.mb-zoom { position: fixed; inset: 0; z-index: 1350; display: flex; justify-content: center; align-items: flex-start; padding: 56px 16px 24px; overflow: auto; background: rgba(2, 6, 23, 0.86); cursor: zoom-out; }
.mb-zoom img { width: min(1000px, 100%); height: auto; border-radius: 4px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); cursor: default; }
.mb-zoom .mb-md-icon { position: fixed; top: 12px; inset-inline-end: 12px; }

/* thread */
.mb-thread { display: flex; flex-direction: column; gap: 8px; }
.mb-thread-replies { display: flex; flex-direction: column; gap: 6px; padding-inline-start: 14px; border-inline-start: 2px solid var(--oa-line); }
.mb-thread-label { font-size: 0.7rem; font-weight: 800; color: var(--oa-ink-faint); }

.mb-thread-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--oa-line-subtle);
    border-radius: 12px;
    background: var(--oa-surface-soft);
    color: var(--oa-ink);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

.mb-thread-item:hover { border-color: color-mix(in srgb, var(--oa-brand) 40%, var(--oa-line)); }
.mb-thread-item > span:first-child { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 800; color: var(--mb-violet); }
.mb-thread-item > span:first-child svg { width: 13px; height: 13px; }
.mb-thread-item strong { min-width: 0; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-thread-item small { font-size: 0.7rem; color: var(--oa-ink-faint); white-space: nowrap; }

/* attachments */
.mb-files { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mb-files li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--oa-line-subtle); background: var(--oa-surface-soft); }
.mb-file-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--oa-brand) 10%, transparent); color: var(--oa-brand); flex-shrink: 0; }
.mb-file-icon svg { width: 17px; height: 17px; }
.mb-files li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mb-files strong { font-size: 0.8rem; color: var(--oa-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-files small { font-size: 0.68rem; color: var(--oa-ink-faint); }

/* facts */
.mb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.mb-facts div { min-width: 0; }
.mb-facts dt { font-size: 0.66rem; font-weight: 700; color: var(--oa-ink-faint); }
.mb-facts dd { margin: 1px 0 0; font-size: 0.8rem; font-weight: 800; color: var(--oa-ink); overflow-wrap: anywhere; }
.mb-facts dd.is-code { direction: ltr; text-align: end; unicode-bidi: isolate; font-family: ui-monospace, Consolas, monospace; font-size: 0.76rem; }

/* recipients */
.mb-people { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mb-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px; border-radius: 11px; background: var(--oa-surface-soft); font-size: 0.8rem; }
.mb-person.is-me { background: color-mix(in srgb, var(--oa-brand) 8%, var(--oa-surface)); }
.mb-person strong { font-weight: 800; color: var(--oa-ink); }
.mb-person strong small, .mb-person > small { font-weight: 600; color: var(--oa-ink-faint); font-size: 0.7rem; }
.mb-person-role { padding: 0 7px; border-radius: 99px; background: var(--oa-brand-soft); color: var(--oa-brand); font-size: 0.64rem; font-weight: 800; line-height: 1.8; }
body.theme-dark .mb-person-role { background: rgba(96, 165, 250, 0.16); }
.mb-person.is-sender .mb-person-role { background: color-mix(in srgb, var(--mb-violet) 14%, transparent); color: var(--mb-violet); }
.mb-receipt { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: auto; font-size: 0.68rem; font-weight: 700; color: var(--oa-ink-faint); }
.mb-receipt svg { width: 13px; height: 13px; }
.mb-receipt.is-read { color: var(--oa-success); }

/* route */
.mb-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mb-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--oa-line-subtle); }
.mb-steps li.is-active { border-color: color-mix(in srgb, var(--oa-warning) 45%, var(--oa-line)); background: color-mix(in srgb, var(--oa-warning) 7%, var(--oa-surface)); }
.mb-steps li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mb-steps strong { font-size: 0.8rem; color: var(--oa-ink); }
.mb-steps small { font-size: 0.7rem; color: var(--oa-ink-faint); }
.mb-steps p { margin: 4px 0 0; font-size: 0.74rem; line-height: 1.8; color: var(--oa-ink-soft); }
.mb-step-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); font-size: 0.72rem; font-weight: 900; flex-shrink: 0; }
.mb-step-mark svg { width: 14px; height: 14px; }

/* history */
.mb-history { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.mb-history::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 5px; width: 2px; background: var(--oa-line); }
.mb-history li { position: relative; display: flex; gap: 10px; padding: 5px 0; }
.mb-history li > span { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--oa-surface); border: 3px solid var(--oa-brand); flex-shrink: 0; }
.mb-history strong { display: block; font-size: 0.78rem; color: var(--oa-ink); }
.mb-history p { margin: 2px 0; font-size: 0.74rem; line-height: 1.8; color: var(--oa-ink-soft); }
.mb-history small { font-size: 0.68rem; color: var(--oa-ink-faint); }

.mb-md-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-top: 1px solid var(--oa-line);
    background: var(--oa-surface);
    flex-shrink: 0;
}

.mb-md-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.mb-md-actions:empty { display: none; }
.mb-md-open { margin-inline-start: auto; }

/* ---- confirm (above the letter dialog) ---- */
.mb-confirm-backdrop { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(3px); }

.mb-confirm {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(460px, 100%);
    padding: 22px;
    border-radius: 20px;
    background: var(--oa-surface);
    color: var(--oa-ink);
    box-shadow: var(--oa-shadow-modal);
}

.mb-confirm h3 { margin: 0; font-size: 1.05rem; font-weight: 900; }
.mb-confirm > p { margin: 0; font-size: 0.82rem; line-height: 1.9; color: var(--oa-ink-soft); }
.mb-field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.mb-field > span { font-size: 0.76rem; font-weight: 800; color: var(--oa-ink-soft); }
.mb-field textarea { width: 100%; min-height: 84px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--oa-line); background: var(--oa-surface-soft); color: var(--oa-ink); font-family: inherit; font-size: 0.86rem; line-height: 1.8; resize: vertical; }
.mb-field textarea:focus { outline: 0; border-color: var(--oa-brand); box-shadow: 0 0 0 3px var(--oa-brand-glow); }
.mb-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* ---- responsive ---- */
@media (max-width: 960px) {
    .mb-md-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .mb-toolbar select { flex: 1 1 45%; min-width: 0; }
    .mb-head-actions { width: 100%; }
    .mb-head-actions .mb-btn span { display: none; }
    .mb-head-actions .mb-btn { padding: 8px 10px; }
    .mb-updated { margin-inline-end: auto; }
    .mb-search kbd { display: none; }
    .mb-row { padding: 12px 12px 12px 8px; gap: 10px; }
    .mb-excerpt { display: none; }
    .mb-bar { flex-basis: 70px; }
    .mb-code { display: none; }
}

/* on phones the letter fills the screen */
@media (max-width: 640px) {
    .mb-modal-backdrop { padding: 0; align-items: stretch; }
    .mb-modal { width: 100%; height: 100%; border-radius: 0; }
    .mb-md-head { padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 14px; }
    .mb-md-head h3 { font-size: 1.02rem; }
    .mb-md-from .mb-tags { margin-inline-start: 0; width: 100%; }
    .mb-md-body { padding: 12px 12px 20px; gap: 12px; }
    .mb-md-main, .mb-md-side { gap: 12px; }
    .mb-md-section { padding: 12px; }
    .mb-paper { padding: 10px; }
    .mb-md-foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .mb-md-actions .mb-btn { flex: 1 1 auto; }
    .mb-md-open { flex: 1 1 100%; margin-inline-start: 0; }
    .mb-md-pos { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mb-row, .mb-modal, .mb-modal-backdrop, .mb-md-body, .mb-star, .mb-tab { transition: none; }
}