/* 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;
}

.welcome-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-self: center;
    font-size: 1.1rem;
}

.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 */
.mail-layout {
    display: flex;
    height: calc(100vh - var(--header-height));
}

/* 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;
}

/* 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;
}

.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);
}

.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;
}

.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;
}

.folder-item .unread-count {
    margin-left: auto;
    font-weight: bold;
    font-size: 12px;
    color: var(--button-primary-back-color, #3498db);
}

/* 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;
}

.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;
}

.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;
    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);
}

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

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

.compose-fields input {
    width: 100%;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid var(--border-color-primary);
    background: transparent;
    font-size: 14px;
    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: 13px;
    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: 13px;
    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: 12px;
    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: 13px;
}

.contact-menu-email {
    font-size: 11px;
    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: 4px;
    padding: 4px 10px;
    background: var(--back-color, #fff);
    border: 1px solid var(--border-color-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

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

.attachment-item .feather {
    width: 14px;
    height: 14px;
}

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

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

/* 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: 12px;
}

.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;
    }

    /* 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;
    }

    .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;
    }
}

/* Embedded login form — shown when /api/auth/me reports unauthenticated.
 * Mounts on #loginForm (a body-level div, sibling to #mailLayout) and
 * covers the body's 1fr grid track since the other content panels stay
 * display:none until the user is authenticated. */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
}

.login-form {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--border-color-primary, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--main-bg-color);
}

.login-title {
    margin: 0 0 4px 0;
    font-size: 1.4rem;
    text-align: center;
}

.login-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.login-row label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fore-color-secondary);
}

.login-row input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font: inherit;
}

/* Password input + eye-icon toggle. Wrapper is full-width to match the
 * other inputs; the button overlays the right edge of the input via
 * absolute positioning. The !important values fight
 * ui-styles/buttons.css's `padding: 0.25em 1em 0 1em !important` and
 * `height: 2em` on every button, which would otherwise push the icon
 * off-center and stretch the toggle taller than the input. */
.login-row .password-input-wrap {
    position: relative;
    width: 100%;
}
.login-row .password-input-wrap input {
    padding-right: 40px;
}
.login-row .password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
    margin: 0 !important;
    height: auto !important;
    width: 32px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--fore-color-secondary, #666);
    opacity: 0.75;
    transition: opacity 0.15s ease;
}
.login-row .password-toggle:hover {
    opacity: 1;
}
.login-row .password-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}
.login-row .password-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.login-error {
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(198, 40, 40, 0.08);
    color: #c62828;
    font-size: 0.9rem;
}

.login-submit {
    margin-top: 4px;
    padding: 10px;
    background: var(--button-primary-back-color);
    color: var(--button-primary-fore-color);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.login-submit:hover:not(:disabled) {
    background: var(--button-primary-hover-back-color);
}

.login-submit:disabled,
.login-sso:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.login-divider {
    text-align: center;
    color: var(--fore-color-secondary);
    font-size: 0.85rem;
    margin: 4px 0;
}

.login-sso {
    padding: 10px;
    background: transparent;
    color: inherit;
    border: 1px solid var(--border-color-primary, rgba(0, 0, 0, 0.18));
    border-radius: 6px;
    cursor: pointer;
}

.login-sso:hover:not(:disabled) {
    background: var(--secondary-back-color);
}