/* Keep interface controls still while allowing visitors to copy messages and edit their drafts. */
.app, .compose-window { user-select: none; }
.mail .thread, input, textarea, [contenteditable="true"] { user-select: text; }
button, svg, .mail .thread .collapsed, .editor-format, .editor-toolbar { user-select: none; }

/* Topic filters, attachment cards and optional reading pane. */
.mailbox > .top-bar { flex: 0 0 48px; container-type: inline-size; }
.mailbox > .top-bar[hidden] { display: none; }
.mailbox-controls { display: flex; align-items: center; position: relative; color: #c4c7c5; }
.mailbox .top-bar .mailbox-controls .option { width: 48px; gap: 5px; border-radius: 4px; color: var(--icon-ink, #c4c7c5); }
.mailbox-controls .option:hover { background: #414141; }
.mailbox-controls .pane-control { position: relative; }
.mailbox .top-bar .options .mailbox-controls .option .pane-icon { width: 12px; height: 12px; }
.mailbox .top-bar .options .mailbox-controls .option .keyboard-icon { width: 20px; height: 14px; }
.mailbox-controls select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mailbox-controls select option { color: #e8eaed; background: #2c2c2c; }
.mailbox-controls .pane-control:has(select:focus-visible), .keyboard-help:focus-visible {
    outline: 2px solid #a8c7fa; outline-offset: -2px;
}
.mailbox .top-bar .mailbox-controls .control-chevron { width: 10px; height: 10px; }
.view-notice:empty { display: none; }
.view-notice:not(:empty) {
    position: absolute; top: 40px; right: 0; z-index: 20; width: 220px; padding: 8px;
    background: #353535; border-radius: 4px; font-size: calc(12px * var(--text-scale, 1));
}
.mail-views { position: relative; display: flex; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.mail-views[data-pane="right"], .mail-views[data-pane="below"] { display: grid; gap: 1px; background: #555; }
.mail-views[data-pane="right"] { grid-template-columns: minmax(300px, 40%) minmax(0, 1fr); }
.mail-views[data-pane="below"] { grid-template-rows: minmax(150px, 42%) minmax(0, 1fr); }
.mail-views:not([data-pane="off"]) > .mail { position: relative; inset: auto; min-width: 0; min-height: 0; overflow: hidden; }
.mail-views:not([data-pane="off"]) .thread { height: calc(100% - 47px); min-height: 0; margin-right: 0; }
.mail-views:not([data-pane="off"]) .tray { overflow: hidden; background: #2c2c2c; min-width: 0; }
.mail-views:not([data-pane="off"]) .mail-categories { overflow-x: auto; flex-shrink: 0; }
.mail-views:not([data-pane="off"]) .tab { min-width: 92px; height: 42px; }
.mail-views:not([data-pane="off"]) .tab .icon { margin: 0 8px; }
.mail-views:not([data-pane="off"]) .footer { display: none; }
.pane-empty { display: grid; place-items: center; background: #2c2c2c; color: #aaa; font-size: calc(14px * var(--text-scale, 1)); text-align: center;
    padding: 24px; }
.mail[hidden], .pane-empty[hidden] { display: none; }
.sidebar { flex-shrink: 0; overflow-y: auto; }
.sidebar .compose, .sidebar .nav { flex-shrink: 0; }
.sidebar-labels { padding: 20px 8px 16px 0; margin-top: 0; flex-shrink: 0; width: 256px; font-size: calc(13px * var(--text-scale, 1)); }
.labels-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 8px 28px; }
.labels-heading h2 { font-size: calc(14px * var(--text-scale, 1)); font-weight: 500; }
.labels-heading button { background: none; color: #c4c7c5; border: none; font-size: calc(22px * var(--text-scale, 1)); cursor: pointer; }
.label-filter { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 32px; padding: 6px 16px 6px 28px; border: none;
    border-radius: 0 24px 24px 0; background: none; color: #c4c7c5; text-align: left; cursor: pointer; }
.label-filter > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-icon { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; stroke: none; }
.label-filter small { color: #aaa; font-size: calc(11px * var(--text-scale, 1)); }
.sidebar .toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
#more-folders[hidden] { display: none; }
.label-filter:hover, .label-filter.active { background: #414141; }
#more-labels[hidden] { display: none; }
.label-more-toggle { padding-left: 60px; }
.label-more-toggle[aria-expanded='true'] { color: var(--gmail-accent); }
.label-clear { margin: 0 0 8px 28px; border: none; background: none; color: #a8c7fa; cursor: pointer; font-size: calc(12px * var(--text-scale, 1)); }
.topic-label { display: inline-flex; align-items: center; gap: 4px; padding: 1px 5px; background: var(--label-background, #efefef);
    color: var(--label-text, #434343); border-radius: 3px; font-size: calc(10px * var(--text-scale, 1)); line-height: 16px; white-space: nowrap; }
.topic-label > span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.topic-label .label-link {
    border: none; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer;
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topic-label .label-link:hover { text-decoration: underline; }
.topic-label .label-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.label-overflow { color: #aaa; font-size: calc(10px * var(--text-scale, 1)); align-self: center; }
.row-labels { display: flex; flex: 0 1 auto; gap: 4px; margin-right: 6px; overflow: hidden; }
.row-labels:empty { display: none; }
.thread-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.thread-labels .label, .thread-labels .topic-label {
    padding: 0 4px; border-radius: 2px; font-size: calc(12px * var(--text-scale, 1)); line-height: 18px;
}
.thread-labels .label { background: #e1e3e1; color: #44473c; white-space: nowrap; }
.thread-labels .remove-thread-label { border: none; background: transparent; color: inherit; padding: 0 2px;
    font-size: calc(14px * var(--text-scale, 1)); line-height: 16px;
    cursor: pointer; }
.thread-labels .remove-thread-label:hover { background: #0001; border-radius: 2px; }
.thread-heading .label-error { color: #b3261e; font-size: calc(12px * var(--text-scale, 1)); }
.thread-heading .label-error:empty { display: none; }
.mail .message-head { flex-wrap: wrap; }
.mail .message-head .contacts { min-width: 120px; }
.mail .message-head .sender { flex-wrap: wrap; }
.mail .message-head .actions .icon { width: 30px; height: 30px; }
.mail .message-body { overflow-wrap: anywhere; }
.mailbox .email-list .email { flex-shrink: 0; }
.mailbox .email-list .email:focus-visible, .mailbox .email-list .email.keyboard-focused { outline: 2px solid #a8c7fa; outline-offset: -2px; }
.attachment-indicator { flex-shrink: 0; margin: 0 8px; font-size: calc(13px * var(--text-scale, 1)); }
.message-attachments { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.message-attachments:empty, .editor-attachments:empty, .collapsed .message-attachments { display: none; }
.attachment-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; max-width: 100%; width: 260px; border: 1px solid #dadce0;
    border-radius: 8px; padding: 10px; color: #202124; font-size: calc(12px * var(--text-scale, 1)); }
.attachment-name { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-card small { grid-column: 1 / -1; color: #5f6368; }
.attachment-card button { background: none; color: #185abc; border: none; text-align: left; cursor: pointer; }
.attachment-card [role="alert"] { grid-column: 1 / -1; color: #b3261e; }
.editor-attachments { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 4px; }
.editor-file { display: flex; align-items: center; gap: 8px; color: #185abc; background: #f1f3f4; border-radius: 4px; padding: 4px 8px;
    font-size: calc(12px * var(--text-scale, 1)); }
.editor-file span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-file small { flex-shrink: 0; color: #5f6368; }
.editor-file button { border: none; background: none; cursor: pointer; padding: 0 4px; }
.feature-dialog { margin: auto; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: none;
    border-radius: 12px; padding: 20px; color: #202124; background: white; box-shadow: 0 8px 40px #0006; font-size: calc(14px * var(--text-scale, 1));
        }
.feature-dialog::backdrop { background: #0008; }
.dialog-heading { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.dialog-heading h2 { font-size: calc(18px * var(--text-scale, 1)); font-weight: 500; overflow-wrap: anywhere; }
.dialog-heading button { flex-shrink: 0; border: none; background: none; font-size: calc(24px * var(--text-scale, 1)); cursor: pointer; }
.feature-dialog p { margin: 8px 0; color: #5f6368; }
.feature-dialog label { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.feature-dialog input:not([type="checkbox"]) { min-width: 0; flex: 1; border: 1px solid #dadce0; border-radius: 4px; padding: 6px; }
.feature-dialog button:not(.dialog-heading button) { padding: 6px 12px; border: 1px solid #dadce0; border-radius: 4px; background: #f1f3f4;
    color: #202124; cursor: pointer; }
.label-choices { max-height: 250px; overflow: auto; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.feature-dialog .label-error { color: #b3261e; }
.topbar .portfolio-settings { color: #e8eaed; }
.topbar .portfolio-settings svg { width: 20px; height: 20px; }
.sidebar button:focus-visible, .topic-label button:focus-visible, .portfolio-settings:focus-visible { outline: 2px solid #a8c7fa;
    outline-offset: -2px; }
.shortcuts-dialog dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.shortcuts-dialog dt { font-family: monospace; font-weight: bold; }
.file-preview { width: min(900px, calc(100vw - 32px)); }
.file-preview iframe { display: block; width: 100%; height: min(70dvh, 650px); border: 1px solid #dadce0; margin-bottom: 12px; }
.file-preview .preview-image { max-width: 100%; max-height: 70dvh; object-fit: contain; margin: 0 auto 12px; }
@container (max-width: 512px) {
    .mailbox .email-list .row-labels { display: none; }
    .mailbox .email-list .attachment-indicator { display: none; }
}
@media (max-width: 900px) {
    .mail-views[data-pane="right"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(150px, 42%) minmax(0, 1fr); }
    .sidebar:not(.collapsed) { width: 200px; }
    .sidebar:not(.collapsed) .nav, .sidebar:not(.collapsed) .sidebar-labels { width: 200px; }
    .sidebar:not(.collapsed) .nav .link { width: 192px; }
}
@media (max-width: 600px) {
    .sidebar:not(.collapsed) { width: 72px; }
    .sidebar:not(:hover) .sidebar-labels { display: none; }
    .sidebar:not(.collapsed) .nav .link { width: 56px; }
    .sidebar .nav .title, .sidebar .nav .unread-count { display: none; }
    .sidebar:hover { width: 200px; }
    .sidebar:not(.collapsed):hover .nav .link { width: 192px; }
    .sidebar:hover .nav .title, .sidebar:hover .nav .unread-count { display: initial; }
    .sidebar .compose .button { width: 56px; }
    .sidebar .compose .button span { display: none; }
    .mailbox { min-width: 0; }
    .mail .thread { padding-inline: 10px; }
    .mail .thread .thread-heading, .mail .thread .reply-form { margin-left: 0; }
    .mail .thread .thread-footer { padding-left: 0; }
    .mail .thread .thread-stack .message { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "body"; }
    .mail .thread .thread-stack .message .avatar { display: none; }
    .message-attachments { grid-column: 1; }
}

@container (max-width: 600px) {
    .mailbox .top-bar .option-group .options .message-count { display: none; }
    .mailbox .top-bar .option-group .options .option.square { width: 32px; }
    .mailbox .top-bar .mailbox-controls .option { width: 40px; }
}
@container (max-width: 440px) {
    .mailbox .top-bar .mailbox-controls .option { width: 32px; }
    .mailbox .top-bar .option-group .options.selected { left: 44px; }
    .mailbox .top-bar .option-group .options.selected .archive,
    .mailbox .top-bar .option-group .options.selected .spam,
    .mailbox .top-bar .option-group .options.selected .unread { display: none; }
}

/* Separate select-all from its menu while preserving the existing Gmail toolbar spacing. */
.mailbox .top-bar .bulk-selection { display: flex; align-items: center; position: relative; width: 56px; flex-shrink: 0; }
.mailbox .top-bar .bulk-selection .bulk-select { width: 36px; flex-shrink: 0; padding: 0; }
.mailbox .top-bar .select-options {
    display: grid; place-items: center; border: 0; background: transparent; width: 20px; height: 40px;
    cursor: pointer; border-radius: 4px; color: var(--gmail-ink); flex-shrink: 0;
}
.mailbox .top-bar .select-options:hover { background: var(--navigation-hover); }
.mailbox .top-bar .select-options svg { width: 8px; height: 8px; fill: var(--gmail-muted); }
.mailbox .top-bar .bulk-selection .selection-menu {
    position: absolute; inset: 40px auto auto 0; min-width: 170px; max-width: calc(100vw - 32px); z-index: 40;
    background: var(--gmail-surface); color: var(--gmail-ink); padding: 6px 0; border-radius: 4px;
    box-shadow: 0 4px 14px #0006; border: 1px solid var(--gmail-line);
}
.mailbox .top-bar .bulk-selection .selection-menu.hidden { display: none; }
.mailbox .top-bar .selection-menu button { display: block; width: 100%; text-align: left; padding: 10px 18px;
    border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.mailbox .top-bar .selection-menu button:hover { background: var(--navigation-hover); }
.mailbox .top-bar .option-group .options.selected { left: 56px; }
.mailbox .top-bar :is(.select-options, .selection-menu button):focus-visible {
    outline: 2px solid var(--gmail-accent); outline-offset: -2px;
}
.mail .thread-header .thread-action[hidden],
.mailbox .top-bar .option-group .options .action[hidden] { display: none; }

/* Forwarding is an explicit send with its own recipient fields, quota notice, and recoverable draft. */
.forward-dialog {
    width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
    background: var(--gmail-surface); color: var(--gmail-ink); border-color: var(--gmail-line);
    font: calc(14px * var(--text-scale, 1))/1.5 var(--display-font, Arial, Helvetica, sans-serif);
}
.forward-dialog header, .forward-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.forward-dialog h2 { margin: 0; font-size: calc(22px * var(--text-scale, 1)); font-weight: 400; }
.forward-dialog .forward-subject { font-weight: 600; overflow-wrap: anywhere; }
.forward-dialog label { display: grid; gap: 8px; margin: 16px 0; }
.forward-dialog :is(input, textarea) {
    width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--gmail-line); border-radius: 6px;
    background: var(--gmail-surface); color: var(--gmail-ink); font: inherit;
}
.forward-dialog textarea { min-height: 100px; resize: vertical; }
.forward-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow-y: auto; font: inherit; }
.forward-dialog p, .forward-dialog details { margin: 12px 0; color: var(--gmail-ink); }
.forward-dialog .forward-status { color: #f2b8b5; }
:root[data-theme='light'] .forward-dialog .forward-status { color: #b3261e; }
.forward-dialog .forward-status:empty { display: none; }
dialog.forward-dialog.feature-dialog button {
    min-height: 40px; color: var(--gmail-ink); border-color: var(--gmail-line); background: transparent; font: inherit;
}
.forward-dialog.feature-dialog button[data-send-forward] {
    background: var(--gmail-button); color: var(--gmail-button-ink); border-radius: 24px;
}
.forward-dialog button:disabled { opacity: .5; cursor: default; }
.forward-dialog button[hidden] { display: none; }
.forward-actions { justify-content: flex-end; flex-wrap: wrap; }
.forward-dialog :is(button, input, textarea, summary):focus-visible { outline: 2px solid var(--gmail-accent); outline-offset: 2px; }
.consent-dialog .consent-check { grid-template-columns: 22px 1fr; align-items: start; }
.consent-dialog .consent-check input { width: 18px; height: 18px; margin-top: 3px; }
.consent-dialog li { overflow-wrap: anywhere; margin: 12px 0; }
.consent-subscriptions li { display: grid; gap: 4px; }
.consent-subscriptions button { justify-self: start; }
.account-panel .account-forwarding { display: block; margin: 0 auto 16px; background: transparent;
    border: 1px solid var(--gmail-line); border-radius: 24px; padding: 10px 18px; color: var(--gmail-ink); cursor: pointer; }
.account-panel .account-forwarding[hidden] { display: none; }
@media (width < 800px) { .forward-dialog :is(input, textarea) { font-size: max(16px, calc(14px * var(--text-scale, 1))); } }
@media (width < 800px) {
    .mailbox .top-bar.has-selection .options.selected :is(.archive, .unread):not([hidden]) { display: flex; }
    .mailbox .top-bar.has-selection .bulk-selection { display: none; }
    .mailbox .top-bar.has-selection .mobile-selection-close { flex-shrink: 0; }
    .mailbox .top-bar.has-selection .mobile-selection-count { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}