/* Put mini.css into a named cascade layer so its broad element selectors
 * (p, h1, table, input, blockquote, etc.) can be demoted below the email
 * body's own styles. Layer-cascade is resolved BEFORE specificity, so any
 * unlayered rule wins over anything in `base` regardless of selector weight. */
@layer base;
@import url("/lib/mini.css/dist/mini-default.css") layer(base);

@import url("/shared/ui-styles/tokens.css");
@import url("/shared/ui-styles/fonts.css");
@import url("/shared/ui-styles/header.css");
@import url("/shared/ui-styles/buttons.css");
@import url("/shared/ui-styles/modal.css");
@import url("/shared/ui-styles/form.css");
@import url("/shared/ui-styles/tabs.css");
@import url("/shared/ui-styles/account.css");
@import url("/shared/ui-styles/borders.css");
@import url("/shared/ui-styles/utilities.css");
@import url("/shared/ui-styles/icons.css");
@import url("/shared/ui-styles/base.css");
@import url("/shared/ui-styles/gadgetui.css");
@import url("/shared/ui-styles/systemMessage.css");

/* Email body reset. `all: revert-layer` on an unlayered rule rolls each
 * property back to its value from the previous layer (i.e., browser
 * defaults — mini.css is skipped because it's in `base`). `:where()` pins
 * specificity to 0 so any inline styles or <style> blocks inside the email
 * HTML still win. Scoped to descendants only; the container itself keeps
 * its app-chrome layout rules further down this file. */
:where(.message-view-body) * {
    all: revert-layer;
}

/* Mail-only layout token. `--header-height` is referenced by .header,
 * .headerCenter, and .mail-layout so the three heights can't drift apart
 * and leave outer page scroll. (gadget-ui-menu bridge tokens come from
 * the shared tokens.css.) */
:root {
    --header-height: 5em;
}

/* Header */
.header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    position: relative;
}

.headerLeft {
    display: flex;
    align-items: center;
}

.headerCenter {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--header-height);
}

.mail-search-form {
    width: 100%;
    max-width: 500px;
    margin: 0;
}

.mail-search-input {
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color-primary);
    border-radius: 20px;
    background: var(--input-back-color);
    color: var(--fore-color);
    font-size: 0.9rem;
}

.mail-search-input:focus {
    outline: none;
    border-color: var(--highlight-color, #6c757d);
}

.toolbar-search-label strong {
    margin-left: 0.25rem;
}

.headerLogo_mini {
    font-family: "Linux Libertine Initials O";
    font-size: 4em;
    line-height: 1em;
    color: var(--logo-color);
    text-decoration: none;
}

img.headerLogo_mini {
    height: 56px;
    width: auto;
}

/* Gadget-UI menu overrides */
/* Header avatar dropdown — uses gadget-ui >=12.2.4 portal mode (see
 * header.js). The dropdown is appended to document.body and tagged with
 * `header-menu` via the Menu's `dropdownClass` option. z-index comes from
 * gadget-ui's `.gadget-ui-menu-portaled` rule (10000). */
.header-menu.gadget-ui-menu-menuItem {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: max-content;
    min-width: 160px;
    padding: 4px 0;
}

.header-menu .gadget-ui-menu-item {
    white-space: nowrap;
}

/* Mail layout. overflow: hidden is required because body uses CSS grid
 * layout (utilities.css). Without it, wide content inside the flex children
 * can expand the grid track beyond the viewport, defeating all the
 * min-width: 0 / overflow: hidden constraints further down the tree. */
.mail-layout {
    display: flex;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
}

/* Panel layout: each panel is a flex column with a fixed-height header
 * (toolbar/meta) and one scrollable inner container. Scrolling never
 * drags the toolbar with it. */
.folder-panel {
    width: 220px;
    min-width: 220px;
    border-right: 1px solid var(--border-color-primary);
    background: var(--secondary-back-color, #f8f9fa);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.folder-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.folder-list-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.mail-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-width: 0;
}

/* Vertical split (side by side) - default */
.mail-content.split-vertical {
    flex-direction: row;
}

.mail-content.split-vertical .message-panel,
.mail-content.split-vertical .message-view-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.mail-content.split-vertical .message-view-panel {
    border-left: none;
    border-top: none;
}

.mail-content.split-vertical .split-resizer {
    width: 4px;
    cursor: col-resize;
    background: var(--border-color-primary);
    flex-shrink: 0;
}

.mail-content.split-vertical .split-resizer:hover {
    background: var(--button-primary-back-color, #3498db);
}

/* Horizontal split (stacked) */
.mail-content.split-horizontal {
    flex-direction: column;
}

.mail-content.split-horizontal .message-panel,
.mail-content.split-horizontal .message-view-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.mail-content.split-horizontal .message-view-panel {
    border-left: none;
    border-top: none;
}

.mail-content.split-horizontal .split-resizer {
    height: 4px;
    cursor: row-resize;
    background: var(--border-color-primary);
    flex-shrink: 0;
}

.mail-content.split-horizontal .split-resizer:hover {
    background: var(--button-primary-back-color, #3498db);
}

/* Fallback when no split class yet */
.message-panel,
.message-view-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Altseven wraps view output in a <div> inside each panel. That wrapper
 * needs the same flex constraints so the content chain can shrink and
 * text-overflow: ellipsis works on message subjects. */
.message-panel > div,
.message-view-panel > div,
.compose-modal > div,
.folder-panel > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Inner scroll containers */
.message-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.message-list-rows {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.message-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Email body container. Flex child of .message-view, fills the remaining
 * vertical space below the toolbar / meta / attachments / banner. The
 * iframe inside is a flex child so it fills this container exactly; no
 * hardcoded pixel height, no outer-page overflow. Content longer than the
 * pane scrolls inside the iframe. */
.message-view-body {
    flex: 1;
    min-height: 0;
    padding: 0;
    background: #fff;
    display: flex;
    overflow: hidden;
}

/* Sandboxed iframe that renders the email content. */
.email-frame {
    flex: 1;
    display: block;
    width: 100%;
    border: 0;
    background: #fff;
    min-height: 0;
}

/* Banner above the email body, used to surface per-message actions like
 * "Show remote images". Full-width, subtle background, right-aligned
 * button. */
.message-view-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: var(--secondary-back-color, #f8f9fa);
    border-bottom: 1px solid var(--border-color-primary);
    font-size: 13px;
    color: var(--fore-color-secondary, #666);
    flex-shrink: 0;
}

/* Forwarded-message headers inserted by Thunderbird (and derivatives).
 * Style them as a quoted header block instead of a raw bordered table. */
.message-view-body .moz-email-headers-table {
    border-collapse: collapse;
    margin: 0.5em 0 1em;
    padding-left: 12px;
    border-left: 0;
    font-size: 0.95em;
}
.message-view-body .moz-email-headers-table tbody {
    padding: 0;
    margin: 0;
    border: none;
    flex: unset;
    display: table-row-group;
}
.message-view-body .moz-email-headers-table th {
    text-align: right;
    font-weight: 600;
    color: var(--fore-color-secondary);
    padding: 2px 10px 2px 0;
    vertical-align: top;
    white-space: nowrap;
    background: transparent;
    border: none;
    flex: unset;
}
.message-view-body .moz-email-headers-table tr {
    background: var(--back-color);
    display: flex;
}
.message-view-body .moz-email-headers-table td {
    padding: 2px 0;
    vertical-align: top;
    border: none;
    flex: unset;
}

.message-view-body .moz-email-headers-table a {
    word-break: break-all;
}

/* Folder list */
.folder-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;

    color: var(--fore-color);
    transition: background 0.15s;
}

/* Hover: subtle tint relative to the panel bg, independent of theme.
 * Don't reuse --selected-background-color here — it resolves to the same
 * value as --secondary-back-color (the folder-panel's own background),
 * which would render hover invisible. */
.folder-item:hover {
    background: color-mix(in srgb, var(--fore-color) 8%, transparent);
}

/* Active: highlight-tinted background + accent stripe down the left edge.
 * The padding-left compensates for the 3px border so the icon/label stays
 * aligned with non-active rows. */
.folder-item.active {
    background: color-mix(in srgb, var(--highlight-color) 18%, transparent);
    border-left: 3px solid var(--highlight-color);
    padding-left: 13px;
    font-weight: 600;
}

.folder-item.active:hover {
    background: color-mix(in srgb, var(--highlight-color) 28%, transparent);
}

/* No folder's messages are on screen while the compose pane is open, so the
 * highlight is dropped for the duration and restored when compose closes.
 * Keyed off body.composing rather than folderList state because the two
 * compose-close paths (event/mail.js's returnToList and composeform's own
 * closeComposeModal) both maintain that class already and so can't drift. */
body.composing .folder-item.active {
    background: transparent;
    border-left: none;
    padding-left: 16px;
    font-weight: normal;
}

body.composing .folder-item.active:hover {
    background: color-mix(in srgb, var(--fore-color) 8%, transparent);
}

.folder-item.drag-over {
    background: var(--button-primary-back-color, #3498db);
    color: var(--button-primary-fore-color, #fff);
}

.folder-section-divider {
    margin: 8px 12px 4px;
    border-top: 1px solid var(--border-color-primary);
}

.message-row[draggable="true"] {
    cursor: grab;
}

.message-row[draggable="true"]:active {
    cursor: grabbing;
}

.folder-item[draggable="true"] {
    cursor: grab;
}

.folder-item[draggable="true"]:active {
    cursor: grabbing;
}

.folder-item {
    position: relative;
}

/* Per-folder context menu — gadget-ui Menu attaches its toggle inside this
   anchor and (in portal mode) places its dropdown on document.body. Hidden
   until the folder row is hovered, OR while the menu's dropdown is open
   (so it doesn't disappear out from under the user when they mouse off the
   row to click an item). The `.menu-open` class is toggled by JS via Menu's
   menuOpened/menuClosed events — :has() can't see across the portal. */
.folder-menu-anchor {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
}

.folder-item:hover .folder-menu-anchor,
.folder-menu-anchor.menu-open {
    opacity: 1;
    pointer-events: auto;
}

.folder-menu-anchor .gadget-ui-menu {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    color: var(--fore-color-secondary, #888);
}

.folder-menu-anchor .gadget-ui-menu:hover {
    color: var(--fore-color);
}

/* Inline feather <svg> renders with stroke="currentColor" so it inherits
   the folder-menu-anchor color above. Explicit size overrides feather.js's
   default 24x24. */
.folder-menu-icon,
.folder-menu-anchor .gadget-ui-menu svg.feather {
    width: 16px;
    height: 16px;
    display: block;
}

/* gadget-ui >=12.2.4 exposes a paired theming contract on its menu vars.
   We override the bg/fg pair in tandem so they can never drift apart, and
   layer on email-specific chrome (border-radius, shadow, min-width). The
   z-index comes from gadget-ui's `.gadget-ui-menu-portaled` rule (10000). */
.folder-menu.gadget-ui-menu-menuItem {
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* width: max-content keeps the dropdown sized to its content. Without it
     * the absolutely-positioned dropdown was stretching to the available
     * width of its containing block (viewport) instead of shrink-to-fitting,
     * which also broke right-align math because offsetWidth was huge. */
    width: max-content;
    min-width: 160px;
    padding: 4px 0;
}

.folder-menu .gadget-ui-menu-item {
    padding: 6px 12px;
    font-size: 13px;
    white-space: nowrap;
}

/* Compose button pinned at the top of the folder panel — the desktop entry
 * point for starting a new message. Sits above the folder list with a
 * separator; hidden while composing (see body.composing rule below). */
.folder-compose {
    padding: 4px 12px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color-primary);
    flex-shrink: 0;
}

.folder-compose-btn {
    display: flex;
    align-items: normal;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--button-primary-back-color, #3498db);
    color: var(--button-primary-fore-color, #fff);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.folder-compose-btn:hover {
    filter: brightness(1.05);
}

.folder-compose-btn .feather {
    width: 18px;
    height: 18px;
}

/* Compose is active — hide both compose affordances so the only exit is the
 * compose pane's own send/cancel controls. */
body.composing .folder-compose {
    display: none;
}

/* Floating compose button. Mobile-only affordance (the folder panel is an
 * off-canvas drawer on phones, so its Compose button isn't always visible);
 * revealed in the mobile media query. Hidden by default on desktop. */
.compose-fab {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--button-primary-back-color, #3498db);
    color: var(--button-primary-fore-color, #fff);
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
    z-index: 900;
}

.compose-fab .feather {
    width: 24px;
    height: 24px;
    margin-top: -2px;
    margin-left: 2px;
}

/* Hidden while the compose pane is open. Clicking the FAB mid-draft
 * republishes mail.compose, which resets the form and silently drops the
 * message being written — so the FAB must not be reachable then. Two
 * selectors on purpose: `.is-hidden` is toggled directly by the compose
 * open/close paths (authoritative, tracks the modal itself), and the body
 * flag covers any layout that sets it. Deliberately outside the mobile
 * media query so the hide holds at every viewport width. */
body.composing .compose-fab,
.compose-fab.is-hidden {
    display: none !important;
}

.folder-actions {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color-primary);
    flex-shrink: 0;
}

.folder-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fore-color-secondary);
    font-size: 13px;
    padding: 6px 0;
}

.folder-action-btn .feather {
    width: 16px;
    height: 16px;
}

.folder-action-btn:hover {
    color: var(--fore-color);
}

.folder-item .feather {
    width: 18px;
    height: 18px;
}

/* Unread-count badge: a filled pill pushed to the right edge of the row.
 * margin-right leaves room for the hover-only .folder-menu-anchor (⋯), which
 * is absolutely positioned at right: 8px, so the count doesn't sit under it. */
.folder-item .folder-unread-count {
    margin-left: auto;
    margin-right: 4px;
    min-width: 20px;
    padding: 0 6px;
    height: 18px;
    box-sizing: border-box;
    border-radius: 9px;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    background: var(--button-primary-back-color, #3498db);
    color: var(--button-primary-fore-color, #fff);
}

/* Folders with unread mail get a bold label so the whole row is scannable,
 * not just the badge. */
.folder-item.has-unread .folder-name {
    font-weight: 700;
}

/* Message list */
.message-list-toolbar,
.message-view-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-primary);
    flex-shrink: 0;
}

.message-list-toolbar button,
.message-view-toolbar button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: var(--button-primary-back-color, #3498db);
    color: var(--button-primary-fore-color, white);
    cursor: pointer;
    font-size: 13px;
}

.message-list-toolbar button:hover,
.message-view-toolbar button:hover {
    opacity: 0.9;
}

.message-list-toolbar button .feather,
.message-view-toolbar button .feather {
    width: 16px;
    height: 16px;
}

.message-list-toolbar .toolbar-folder-name {
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
}

.message-list-toolbar .toolbar-btn-right {
    margin-left: auto;
    background: var(--secondary-back-color, #eee);
    color: var(--fore-color);
}

.message-list-toolbar .toolbar-btn-right:hover {
    background: var(--selected-background-color, #ddd);
}

.message-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color-primary);
    background: var(--back-color-secondary, rgba(0, 0, 0, 0.02));
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fore-color-secondary, #666);
    user-select: none;
    min-width: 0;
    overflow: hidden;
}

.message-list-header .sortable {
    cursor: pointer;
}

.message-list-header .sortable:hover {
    color: var(--fore-color, #222);
}

.message-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-primary);
    cursor: pointer;
    transition: background 0.1s;
    min-width: 0;
    overflow: hidden;
}

.message-row:hover {
    background: var(--selected-background-color);
}

.message-row.unread {
    font-weight: 600;
}

.message-row.unread .message-from {
    font-weight: 700;
}

.message-from {
    width: 200px;
    min-width: 200px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-subject {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-date {
    font-size: 12px;
    color: var(--fore-color-secondary, #888);
    white-space: nowrap;
}

/* Approve / Reject icon buttons rendered only in the Pending folder.
 * Sit at the right edge of the row, after the date column. Sized small
 * so they don't dominate; colored only on hover so the row stays calm
 * when scanning a long Pending list. */
.row-pending-actions {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
    flex-shrink: 0;
}

.row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--fore-color-secondary, #888);
    cursor: pointer;
    transition:
        background 0.1s,
        color 0.1s,
        border-color 0.1s;
}

.row-action-btn .feather {
    width: 16px;
    height: 16px;
}

.row-action-btn.approve:hover {
    background: color-mix(in srgb, #2e7d32 18%, transparent);
    border-color: #2e7d32;
    color: #2e7d32;
}

.row-action-btn.reject:hover {
    background: color-mix(in srgb, #c62828 18%, transparent);
    border-color: #c62828;
    color: #c62828;
}

/* Per-row folder badge rendered after the subject in the All Mail view —
 * tells the user which mailbox a message lives in (so they know where a
 * move/delete will operate). Borrow the highlight color used by the
 * active-folder accent so the affordance feels consistent. */
.message-folder-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--highlight-color);
    background: color-mix(in srgb, var(--highlight-color) 14%, transparent);
    border-radius: 3px;
    vertical-align: middle;
}

/* Bulk-select column. Lives at the left of every header and row so the
   existing from/subject/date columns keep their widths. The checkbox sits
   centered in a fixed-width slot so rows don't visibly shift when the
   selection state changes. */
.message-select {
    width: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.row-select,
.row-select-all {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

/* Highlight rows whose checkbox is checked. Distinct from `:hover` so the
   bulk-action target stays visually stable as the pointer moves. */
.message-row.selected {
    background: var(--selected-background-color, rgba(52, 152, 219, 0.08));
}

/* Bulk-action group, inserted between the refresh button and the hamburger
   when one or more rows are selected. The left border separates the group
   from the always-on toolbar buttons. */
.message-list-toolbar .toolbar-bulk-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 8px;
    margin-left: 4px;
    border-left: 1px solid var(--border-color-primary);
}

/* Folder picker for the bulk move action. Native <select> with chrome
   tuned so it sits cleanly alongside the toolbar buttons rather than
   inheriting their primary-blue background. */
.message-list-toolbar .toolbar-bulk-move {
    padding: 8px 10px;
    border: 1px solid var(--border-color-primary);
    border-radius: 6px;
    background: var(--back-color-secondary, #fff);
    color: var(--fore-color);
    font-size: 13px;
    cursor: pointer;
}

.message-list-toolbar .toolbar-bulk-count {
    font-size: 13px;
    color: var(--fore-color-secondary, #666);
    user-select: none;
}

.message-pagination,
.message-list-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid var(--border-color-primary);
    font-size: 13px;
    flex-shrink: 0;
}

.message-pagination button {
    padding: 6px 12px;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    background: var(--back-color, white);
    cursor: pointer;
    font-size: 13px;
}

.message-pagination button:disabled {
    opacity: 0.4;
    cursor: default;
}

.no-messages {
    padding: 40px;
    text-align: center;
    color: var(--fore-color-secondary, #888);
    font-size: 14px;
}

/* Message view */
.message-view-header {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-primary);
}

.message-view-header button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    background: var(--back-color, white);
    cursor: pointer;
    font-size: 13px;
    color: var(--fore-color);
}

.message-view-header button:hover {
    background: var(--selected-background-color, #f0f0f0);
}

.message-view-header button .feather {
    width: 14px;
    height: 14px;
}

.message-view-header button.delete-btn {
    margin-left: auto;
    color: #e74c3c;
    border-color: #e74c3c;
}

.plain-text-quote {
    border-left: 3px solid var(--button-primary-back-color, #3498db);
    padding-left: 12px;
    margin: 8px 0;
    color: var(--fore-color-secondary);
}

.message-meta {
    padding: 16px;
    border-bottom: 1px solid var(--border-color-primary);
    font-size: 14px;
    line-height: 1.8;
}

.message-meta .label {
    font-weight: 600;
    color: var(--fore-color-secondary, #666);
    margin-right: 8px;
}

.message-meta .subject-line {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.message-body {
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.message-body img {
    max-width: 100%;
    height: auto;
}

/* Compose modal */
.compose-modal {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 550px;
    /* Cap the floating modal so long drafts don't push the toolbar off
     * the top of the viewport. With a bounded height the inner flex
     * chain below gives the editor a real scroll container. */
    height: 70vh;
    max-height: calc(100vh - 40px);

    background: var(--back-color, white);
    border: 1px solid var(--border-color-primary);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

/* Compose form: flex column filling the modal (or the mail-content slot
 * in fullscreen mode). Toolbar/fields/attachments are fixed-size rows;
 * .compose-body takes the remaining space. `height: 100%` is the
 * belt-and-suspenders — flex: 1 alone is enough in most browsers, but
 * because the parent (.compose-modal) has an explicit height this works
 * even if something odd prevents flex stretch. */
.compose-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.compose-toolbar,
.compose-fields,
.compose-attachments {
    flex-shrink: 0;
}

.compose-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* Icon toolbar at the top of the compose form (replaces the old bottom
 * button row). Scoped to compose only — the generic .toolbar-btn styling
 * from the message toolbars applies to the icon buttons here too. */
.compose-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color-primary);
    background: var(--secondary-back-color, #f8f9fa);
    border-radius: 8px 8px 0 0;
}

.compose-toolbar .toolbar-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--fore-color);
    cursor: pointer;
}

.compose-toolbar .toolbar-btn:hover {
    background: var(--selected-background-color, rgba(0, 0, 0, 0.08));
}

.compose-toolbar .toolbar-btn .feather {
    width: 18px;
    height: 18px;
}

/* Send is the primary action — make it pop. */
.compose-toolbar .toolbar-btn-primary {
    background: var(--button-primary-back-color, #3498db);
    color: var(--button-primary-fore-color, white);
}

.compose-toolbar .toolbar-btn-primary:hover {
    opacity: 0.9;
    background: var(--button-primary-back-color, #3498db);
}

/* In-flight send: lock the button and swap the send icon for a spinner so
 * the click gives immediate feedback while the message is on its way. The
 * button keeps its primary color (no dimming) — this reads as "working",
 * not "disabled". Toggled by composeform.js setSending(). */
.compose-toolbar .toolbar-btn-primary.is-sending {
    position: relative;
    cursor: default;
    background: var(--button-primary-back-color, #3498db);
}

.compose-toolbar .toolbar-btn-primary.is-sending .feather {
    visibility: hidden;
}

.compose-toolbar .toolbar-btn-primary.is-sending::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--button-primary-fore-color, white);
    border-top-color: transparent;
    border-radius: 50%;
    animation: compose-send-spin 0.7s linear infinite;
}

@keyframes compose-send-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Cancel pushed to the right of the toolbar. */
.compose-toolbar .toolbar-btn-cancel {
    margin-left: auto;
}

/* Scheduled-send chip. Empty (and invisible) until a time is chosen, so the
 * toolbar doesn't reserve space for a state most messages never enter. It
 * sits before .toolbar-btn-cancel's margin-left:auto, so it stays grouped
 * with the compose actions rather than drifting to the right edge. */
.compose-schedule-chip {
    display: none;
}

.compose-schedule-chip.is-set {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--highlight-color) 18%, transparent);
    color: var(--fore-color);
    font-size: 0.8125em;
    white-space: nowrap;
    /* The time can be long in some locales ("Fri, 15 Aug, 09:00 GMT+2"); let
     * it shrink and ellipsis rather than push Cancel off a narrow pane. */
    min-width: 0;
    overflow: hidden;
}

.compose-schedule-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.compose-schedule-clear {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 1.15em;
    line-height: 1;
    color: inherit;
    opacity: 0.75;
    cursor: pointer;
}

.compose-schedule-clear:hover {
    opacity: 1;
}

/* Toolbar toggle reads as "on" while a send time is set, so the state is
 * legible even when the chip is ellipsised down to nothing. */
.compose-toolbar .toolbar-btn.compose-schedule-toggle.is-set {
    background: var(--selected-background-color, rgba(0, 0, 0, 0.08));
}

/* --- Schedule picker dialog ------------------------------------------- */

.compose-schedule-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compose-sched-presets {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Preset row: label on the left, the resolved time on the right, so the
 * user sees exactly what "Tomorrow morning" means before committing. */
.compose-sched-preset {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--fore-color);
    font-size: 0.9375em;
    text-align: left;
    cursor: pointer;
}

.compose-sched-preset:hover {
    background: color-mix(in srgb, var(--fore-color) 8%, transparent);
    border-color: var(--border-color-primary);
}

.compose-sched-preset-when {
    color: var(--fore-color-secondary);
    font-size: 0.8125em;
    white-space: nowrap;
}

.compose-sched-fields {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.compose-sched-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
    min-width: 0;
    font-size: 0.875em;
    color: var(--fore-color-secondary);
}

.compose-sched-field input {
    box-sizing: border-box;
    width: 100%;
    padding: 1px;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    background: var(--input-back-color, transparent);
    color: var(--fore-color);
    font-size: 1rem;
    outline: none;
}

.compose-sched-field input:focus {
    border-color: var(--button-primary-back-color, #3498db);
}

/* The timezone line is load-bearing, not a footnote: it's what stops
 * "9:00 AM" from being ambiguous. Sized to be read, not skimmed past. */
.compose-sched-tz {
    margin: 0;
    font-size: 0.875em;
    color: var(--fore-color-secondary);
}

.compose-sched-error {
    margin: 0;
    min-height: 1.2em;
    font-size: 0.875em;
    color: var(--warning-color, #c33);
}

/* Send time in a Scheduled-folder row, in place of the received date. */
.message-date-scheduled {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fore-color-secondary);
}

.message-date-scheduled .feather {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Formatting-toggle button shows its "on" state while the rich-text
 * toolbar is revealed. */
.compose-toolbar .toolbar-btn.compose-format-toggle.active {
    background: var(--selected-background-color, rgba(0, 0, 0, 0.08));
}

/* Rich-text formatting toolbar — optional row between the address fields
 * and the editor, revealed by the toolbar's format toggle. Fixed-size row
 * so the editor keeps the remaining space. */
.compose-format-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 12px;
    background: var(--secondary-back-color, #f8f9fa);
    border-bottom: 1px solid var(--border-color-primary);
}

.compose-format-toolbar.compose-format-collapsed {
    display: none;
}

.compose-format-btn {
    background: transparent;
    color: var(--fore-color);
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 0.95em;
    min-width: 24px;
    line-height: 1;
    margin: 2px 0;
    cursor: pointer;
}

.compose-format-btn:hover {
    background: var(--card-back-color, rgba(0, 0, 0, 0.06));
    border-color: var(--border-color-primary);
}

.compose-format-btn .feather {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.compose-format-sep {
    width: 1px;
    height: 18px;
    background: var(--border-color-primary);
    margin: 0 3px;
}

.compose-fields {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color-primary);
}

/* Compose type scale. The editor body (composeEditorShell in composeform.js)
 * is the reference at 1em / 16px; the address and subject fields match it,
 * and the surrounding labels, toggles and chips step down from there:
 * 0.875em for secondary labels, 0.8125em for chips. */
.compose-fields input {
    width: 100%;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid var(--border-color-primary);
    background: transparent;
    font-size: 1em;
    color: var(--fore-color);
    outline: none;
}

.compose-fields input:focus {
    border-bottom-color: var(--button-primary-back-color, #3498db);
}

/* Contact chips in To/CC fields */
.compose-field .gadgetui-lookuplist-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    border: none;
    border-bottom: 1px solid var(--border-color-primary);
    padding: 4px 0;
    /* gadget-ui's stylesheet hardcodes background:#fff and a silver border
       on the chip wrapper — overrides them so To/CC fields follow the
       active theme instead of forcing white in dark mode. */
    background: transparent;
    /* Anchor the absolutely-positioned suggestion menu to this wrapper so
       it consistently drops below the input row instead of floating to the
       page-level positioning ancestor. */
    position: relative;
}

.compose-field .gadgetui-lookuplist-input input {
    flex: 1;
    min-width: 120px;
    border-bottom: none !important;
    padding: 4px 0;
}

.compose-field label {
    font-size: 0.875em;
    color: var(--fore-color-secondary);
    margin-bottom: 2px;
}

/* CC and BCC start collapsed; user clicks the corresponding toggle in the
 * row below the To: field to expand. Same class is also applied to the
 * toggle row itself when no toggles remain (both fields expanded). */
.compose-field-collapsed {
    display: none;
}

/* Row of clickable labels surfacing collapsed CC/BCC fields. Sits between
 * the address fields and the Subject field. */
.compose-field-toggles {
    display: flex;
    gap: 12px;
    padding: 6px 0;
}

.compose-field-toggle {
    background: none;
    border: none;
    color: var(--fore-color-secondary);
    font-size: 0.875em;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}

.compose-field-toggle:hover {
    background: var(--secondary-back-color, rgba(0, 0, 0, 0.06));
    color: var(--fore-color);
}

.contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--button-primary-back-color, #3498db);
    color: var(--button-primary-fore-color, #fff);
    border-radius: 14px;
    padding: 2px 10px 2px 2px;
    font-size: 0.8125em;
    white-space: nowrap;
}

.contact-chip-pic {
    width: 20px;
    height: 20px;
    border-radius: 8px;
    object-fit: cover;
}

.contact-menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
}

.contact-menu-pic {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.contact-menu-info {
    display: flex;
    flex-direction: column;
}

.contact-menu-item:hover {
    background: var(--menu-hover-background-color, #eee);
}

.contact-menu-name {
    font-weight: 600;
    font-size: 0.875em;
}

.contact-menu-email {
    font-size: 0.75em;
    color: var(--fore-color-secondary);
}

.gadgetui-lookuplist-menu {
    position: absolute;
    /* Drop the menu directly below the chip wrapper (which contains the
       input) and left-align with the wrapper's left edge so the user can
       still see what they're typing. */
    top: 100%;
    left: 0;
    margin-top: 4px;
    /* Fixed width so the menu doesn't jump around as connection names
       lengthen or shorten. Capped to viewport on narrow screens. */
    width: 320px;
    max-width: calc(100vw - 32px);
    z-index: 1000;
    background: var(--menu-background-color, #fff);
    border: 1px solid var(--border-color-primary);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Attachment display in message view */
.message-attachments {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color-primary);
    background: var(--secondary-back-color, #f8f9fa);
    flex-shrink: 0;
}

/* Message view header area - everything above the body that should not scroll */
.message-view-meta {
    padding: 12px 16px;
    flex-shrink: 0;
}

.message-view-separator {
    flex-shrink: 0;
    margin: 0;
}

.attachments-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fore-color-secondary);
    margin-bottom: 6px;
}

.attachments-label .feather {
    width: 14px;
    height: 14px;
}

.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 8px;
    background: var(--back-color, #fff);
    border: 1px solid var(--border-color-primary);
    border-radius: 6px;
    font-size: 12px;
}

.attachment-main {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    cursor: pointer;
}

.attachment-item.previewable .attachment-main:hover .attachment-name {
    text-decoration: underline;
}

.attachment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: var(--fore-color-secondary);
}

.attachment-icon .feather {
    width: 16px;
    height: 16px;
}

.attachment-thumb {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color-primary);
    background: var(--secondary-back-color, #f0f0f0);
}

.attachment-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.attachment-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-size {
    color: var(--fore-color-secondary);
    font-size: 11px;
}

.attachment-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.attachment-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0 !important;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--fore-color-secondary);
    cursor: pointer;
}

.attachment-action:hover {
    background: var(--selected-background-color, #eee);
    color: var(--fore-color);
}

.attachment-action .feather {
    width: 15px;
    height: 15px;
}

/* Attachment preview overlay */
.attachment-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.6);
}

.attachment-preview-content {
    display: flex;
    flex-direction: column;
    width: min(900px, 100%);
    height: min(90vh, 100%);
    background: var(--back-color, #fff);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.attachment-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color-primary);
    flex-shrink: 0;
}

.attachment-preview-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-preview-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--fore-color-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.attachment-preview-close:hover {
    background: var(--selected-background-color, #eee);
    color: var(--fore-color);
}

.attachment-preview-body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: var(--secondary-back-color, #f8f9fa);
}

.attachment-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.attachment-preview-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

.attachment-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color-primary);
    flex-shrink: 0;
}

.attachment-preview-actions .toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--border-color-primary);
    border-radius: 6px;
    background: var(--secondary-back-color, #eee);
    color: var(--fore-color);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.attachment-preview-actions .toolbar-btn:hover {
    background: var(--selected-background-color, #e2e2e2);
}

.attachment-preview-actions .toolbar-btn.primary {
    border-color: transparent;
    background: var(--button-primary-back-color, #3498db);
    color: var(--button-primary-fore-color, #fff);
}

.attachment-preview-actions .toolbar-btn.primary:hover {
    opacity: 0.9;
    background: var(--button-primary-back-color, #3498db);
}

/* Compose attachments */
.compose-attachments {
    padding: 4px 16px;
}

.compose-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.compose-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--secondary-back-color, #eee);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 0.8125em;
}

.compose-attachment-remove {
    cursor: pointer;
    font-weight: bold;
    color: var(--fore-color-secondary);
    margin-left: 2px;
}

.compose-attachment-remove:hover {
    color: var(--warning-color, #c33);
}

/* The compose editor is an iframe with a contenteditable body — same
 * isolation trick as the message-view iframe, so quoted replies and
 * forwarded HTML can't leak their table widths / inline styles into the
 * surrounding app layout. Fills .compose-body exactly; the iframe's own
 * body handles scroll internally. */
.compose-editor-frame {
    flex: 1;
    display: block;
    width: 100%;
    min-height: 0;
    border: 0;
    /* Match the iframe's inner body background so the brief moment between
     * iframe creation and srcdoc load doesn't flash white in dark themes.
     * The inner body's bg is set inline by composeEditorShell() reading the
     * same theme var. */
    background: var(--back-color, #fff);
}

/* Mail ToS opt-in gate */
.tos-gate {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 20px 40px;
    min-height: calc(100vh - 60px);
}

.tos-gate-card {
    max-width: 560px;
    width: 100%;
    padding: 40px;
    background: var(--back-color, white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.tos-gate-card h2 {
    margin-top: 0;
    margin-bottom: 8px;
}

.tos-gate-email {
    color: var(--fore-color-secondary, #666);
    margin-bottom: 20px;
}

.tos-gate-terms {
    background: var(--secondary-back-color, #f8f9fa);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.tos-gate-terms ul {
    padding-left: 20px;
    margin: 12px 0;
}

.tos-gate-terms li {
    margin-bottom: 8px;
}

.tos-gate-version {
    color: var(--fore-color-secondary, #999);
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 0;
}

.tos-gate-error {
    color: #e74c3c;
    font-size: 13px;
    margin-bottom: 16px;
}

.tos-gate-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.tos-gate-actions button {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    border: 1px solid var(--border-color-primary);
    background: var(--back-color, white);
    color: var(--fore-color);
}

.tos-gate-actions button.primary {
    background: var(--button-primary-back-color, #3498db);
    color: white;
    border-color: transparent;
}

.tos-gate-actions button:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Quoted message (reply/forward) */
.quoted-message {
    border-left: 3px solid var(--border-color-primary, #ccc);
    padding-left: 12px;
    margin-left: 4px;
    color: var(--fore-color-secondary, #666);
}

/* ---------------------------------------------------------------
 * Layout modes: "split" (current three-pane) vs "fullscreen" (two-pane).
 * body gets .mail-layout-split or .mail-layout-fullscreen on load.
 * body gets .viewing-message or .composing when a message is open /
 * compose is active — drives the fullscreen column transitions.
 * ------------------------------------------------------------- */

/* Fullscreen: hide the message list whenever a message is being read
 * or composed. The folder list stays in place on the left; the message
 * detail (or compose pane) takes the full width of .mail-content on
 * the right. */
body.mail-layout-fullscreen.viewing-message .message-panel,
body.mail-layout-fullscreen.composing .message-panel {
    display: none;
}

/* The split-direction resizer has no role in fullscreen mode. */
body.mail-layout-fullscreen .split-resizer {
    display: none !important;
}

/* Fullscreen: compose takes the message-view slot, not a floating modal.
 * Reset height/max-height so the base-rule `height: 70vh` doesn't pin the
 * pane short — the flex chain inside .mail-content should stretch us to
 * whatever the pane actually has. */
body.mail-layout-fullscreen .compose-modal {
    position: static;
    bottom: auto;
    right: auto;
    width: auto;
    height: auto;
    max-height: none;
    flex: 1;
    border: none;
    border-left: 1px solid var(--border-color-primary);
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
    min-width: 0;
    min-height: 0;
}

/* Fullscreen: when composing, the message view hides so the compose
 * pane is the right column. */
body.mail-layout-fullscreen.composing #messageView {
    display: none !important;
}

/* Fullscreen: when a message is open, the messageView needs a proper
 * column width. */
body.mail-layout-fullscreen.viewing-message .message-view-panel {
    flex: 1;
    border-left: 1px solid var(--border-color-primary);
    min-width: 0;
}

/* System message styles moved to /shared/ui-styles/systemMessage.css */

/* ---------------------------------------------------------------
 * Settings page (shell in /shared/ui-styles/account.css; rules
 * below style the radio-card widgets inside the tab content).
 * ------------------------------------------------------------- */

.settings-description {
    margin: 0 0 1rem 0;
    color: var(--fore-color-secondary);
    font-size: 13px;
}

.settings-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color-primary);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.1s;
}

.settings-option:hover {
    background: var(--selected-background-color, rgba(0, 0, 0, 0.03));
}

.settings-option-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.settings-option-disabled:hover {
    background: transparent;
}

.settings-option-note {
    font-style: italic;
}

.settings-option input[type="radio"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.settings-option-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-option-title {
    font-weight: 600;
    font-size: 14px;
}

.settings-option-detail {
    color: var(--fore-color-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-color-primary);
}

/* Hamburger button - only visible on mobile (see media query below) */
.toolbar-hamburger {
    display: none !important;
}

/* Mobile drawer backdrop - shown only while drawer is open, on any viewport */
.folder-drawer-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
}

body.folder-drawer-open .folder-drawer-backdrop {
    display: block;
}

/* New folder dialog content */
.new-folder-dialog {
    padding: 0.5rem 1rem 1rem;
}

.new-folder-dialog label {
    display: block;
    font-size: 13px;
    color: var(--fore-color-secondary);
    margin-bottom: 0.25rem;
}

.new-folder-dialog .new-folder-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    background: var(--back-color, white);
    color: var(--fore-color);
    border: 1px solid var(--border-color-primary);
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
}

.new-folder-dialog .new-folder-input:focus {
    border-color: var(--button-primary-back-color, #3498db);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .mail-layout {
        flex-direction: column;
    }

    /* The welcome name overlaps the search bar on narrow viewports. Hide it
     * here; it reappears as the first (non-actionable) item in the avatar
     * menu instead (see header.js). */
    .welcome-text {
        display: none;
    }

    /* With the name gone, nudge the search bar toward the left edge of its
     * band so it clears the avatar menu on the right. */
    .headerCenter {
        justify-content: flex-start;
        padding-left: 0.25rem;
    }

    /* Shorten the search bar so it doesn't run under the avatar menu. */
    .mail-search-form {
        width: 85%;
    }

    /* Folder panel becomes an off-canvas drawer sliding in from the left,
     * covering ~3/4 of the viewport. */
    .folder-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 75%;
        max-width: 320px;
        min-width: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        border-right: 1px solid var(--border-color-primary);
        border-bottom: none;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1000;
    }

    body.folder-drawer-open .folder-panel {
        transform: translateX(0);
    }

    /* Show the hamburger button in mobile viewports */
    .toolbar-hamburger {
        display: flex !important;
    }

    /* Floating compose button is the always-visible entry point on mobile,
     * where the folder panel (and its Compose button) is a hidden drawer.
     * Hide it while reading a message, and while the drawer is open (the
     * drawer's own Compose button takes over, and the FAB would sit under
     * the backdrop anyway). The composing case is handled at every width
     * by the base rules above. */
    .compose-fab {
        display: flex;
    }

    body.viewing-message .compose-fab,
    body.folder-drawer-open .compose-fab {
        display: none;
    }

    .folder-item {
        white-space: normal;
        padding: 10px 16px;
    }

    .mail-content {
        flex-direction: column;
    }

    .message-view-panel {
        border-left: none;
        border-top: 1px solid var(--border-color-primary);
    }

    .message-from {
        width: 120px;
        min-width: 120px;
    }

    .compose-modal {
        width: 100%;
        right: 0;
        max-height: 80vh;
    }

    /* Tighten the message-view toolbar on mobile so the trash icon stops
     * overflowing the right edge. Six buttons at desktop spacing don't
     * fit on a typical phone viewport. */
    .message-view-toolbar {
        gap: 4px;
        padding: 10px 8px;
    }

    .message-view-toolbar button {
        padding: 6px 8px;
        gap: 4px;
    }

    .message-view-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 16px;
        font-size: 14px;
        line-height: 1.6;
        overflow-wrap: break-word;
    }

    /* Forwarded-message headers inserted by Thunderbird (and derivatives).
     * Style them as a quoted header block instead of a raw bordered table. */
    .message-view-body .moz-email-headers-table {
        border-collapse: collapse;
        margin: 0.5em 0 1em;
        padding-left: 12px;
        border-left: 0;
        font-size: 0.95em;
    }

    .message-view-body .moz-email-headers-table tbody {
        padding: 0;
        margin: 0;
        border: none;
        flex: unset;
    }
    .message-view-body .moz-email-headers-table th {
        text-align: right;
        font-weight: 600;
        color: var(--fore-color-secondary);
        padding: 2px 10px 2px 0;
        vertical-align: top;
        white-space: nowrap;
        background: transparent;
        border: none;
        height: auto;
        clip: auto;
        clip-path: none;
        display: contents;
    }
    .message-view-body .moz-email-headers-table tr {
        padding: 0 2px;
        margin: 0;
        border: none;
    }
    .message-view-body .moz-email-headers-table td {
        padding: 2px 0;
        vertical-align: top;
        border: none;
        text-align: left;
    }

    .message-view-body .moz-email-headers-table a {
        word-break: break-all;
    }
}

/* --- Address actions -------------------------------------------------
 *
 * Sender names in the message list and every address in the message-view
 * headers are click targets that open the address menu (add to contacts,
 * open in contacts, compose, copy). Styled as a subtle affordance rather
 * than a link — these sit inside dense rows where blue underlines would
 * add a lot of visual noise. */

.address-link {
    cursor: pointer;
    border-radius: 3px;
    padding: 0 2px;
    margin: 0 -2px;
}

.address-link:hover {
    background: var(--selected-background-color);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.address-sep {
    color: var(--fore-color-secondary);
}

/* The menu is appended to <body>, not to a view's element, so it survives
 * an altseven re-render of the list underneath it. Position is computed at
 * open time against the anchor's rect. */
.address-menu {
    position: fixed;
    z-index: 2000;
    min-width: 200px;
    max-width: 300px;
    padding: 4px 0;
    background: var(--back-color);
    border: 1px solid var(--border-color-primary);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.address-menu-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px 8px;
    border-bottom: 1px solid var(--border-color-primary);
    margin-bottom: 4px;
}

.address-menu-name {
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.address-menu-email {
    font-size: 12px;
    color: var(--fore-color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.address-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.address-menu-item:hover:not(:disabled) {
    background: var(--selected-background-color);
}

.address-menu-item:disabled {
    color: var(--fore-color-secondary);
    cursor: default;
}

.address-menu-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Review list inside the "Add to contacts" dialog. One row per unique
 * address; rows already saved are checked off and disabled. */
.add-contact-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.add-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.add-contact-row:hover {
    background: var(--selected-background-color);
}

.add-contact-row.known {
    cursor: default;
    opacity: 0.7;
}

.add-contact-check {
    flex-shrink: 0;
    margin: 0;
}

.add-contact-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.add-contact-name {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-contact-email {
    font-size: 12px;
    color: var(--fore-color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-contact-known {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--fore-color-secondary);
    white-space: nowrap;
}

/* --- Recipient picker ------------------------------------------------
 *
 * Clicking a To:/Cc:/Bcc: label opens a modal listing connections and saved
 * contacts. The label is a button, styled to keep the original label's
 * quiet appearance while reading as clickable on hover. */

.compose-field-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 1px 4px;
    margin: 0 0 2px -4px;
    border-radius: 3px;
    font-size: 0.875em;
    color: var(--fore-color-secondary);
    cursor: pointer;
}

.compose-field-label:hover {
    background: var(--secondary-back-color, rgba(0, 0, 0, 0.06));
    color: var(--fore-color);
}

.compose-field-label svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* × on a recipient chip. Sized against the chip's own text (em, not px) so
 * it stays on the baseline rather than stretching the pill. */
.contact-chip-remove {
    margin-left: 2px;
    padding: 0 1px;
    font-size: 1.15em;
    line-height: 1;
    opacity: 0.75;
    cursor: pointer;
}

.contact-chip-remove:hover {
    opacity: 1;
}

/* Recipient picker (the contacts search dialog opened from the To/Cc/Bcc
 * labels). Same type scale as the compose form it's launched from: 1em for
 * the search box and each row's primary name, 0.875em for secondary labels,
 * 0.8125em for chips and metadata, 0.75em for the smallest annotations. */
.recipient-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.recipient-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    background: var(--input-back-color, transparent);
    color: var(--fore-color);
    font-size: 1em;
    outline: none;
}

.recipient-search:focus {
    border-color: var(--button-primary-back-color, #3498db);
}

.recipient-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.recipient-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.recipient-row:hover {
    background: var(--selected-background-color);
}

.recipient-row.is-existing {
    cursor: default;
    opacity: 0.65;
}

.recipient-check {
    flex-shrink: 0;
    margin: 0;
}

.recipient-avatar {
    width: 26px;
    height: 26px;
    border-radius: 13px;
    object-fit: cover;
    flex-shrink: 0;
}

.recipient-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--button-primary-back-color, #3498db);
    color: var(--button-primary-fore-color, #fff);
    font-size: 0.8125em;
    font-weight: 600;
}

.recipient-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.recipient-name {
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipient-email {
    font-size: 0.8125em;
    color: var(--fore-color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipient-source {
    flex-shrink: 0;
    font-size: 0.75em;
    color: var(--fore-color-secondary);
    white-space: nowrap;
}

.recipient-empty {
    padding: 24px 8px;
    text-align: center;
    font-size: 0.875em;
    color: var(--fore-color-secondary);
}

.recipient-footer {
    min-height: 18px;
    font-size: 0.8125em;
    color: var(--fore-color-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Saved contact groups, offered as chips above the person list. Clicking one
 * checks every member; the list below then shows them selected. */
.recipient-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.recipient-groups:empty {
    display: none;
}

.recipient-groups-label {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fore-color-secondary);
}

.recipient-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: none;
    border-radius: 12px;
    background: color-mix(in srgb, var(--fore-color) 8%, transparent);
    color: var(--fore-color);
    font-size: 0.8125em;
    cursor: pointer;
}

.recipient-group-chip:hover {
    background: color-mix(in srgb, var(--fore-color) 16%, transparent);
}

/* Member count inside a group chip — em here is relative to the chip's own
 * text, so it stays a step below whatever the chip resolves to. */
.recipient-group-chip em {
    font-style: normal;
    opacity: 0.6;
    font-size: 0.9em;
}

.recipient-savegroup {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--button-primary-back-color, #3498db);
    font-size: 0.8125em;
    cursor: pointer;
}

.recipient-savegroup-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.recipient-groupname {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    background: var(--input-back-color, transparent);
    color: var(--fore-color);
    font-size: 0.875em;
    outline: none;
}