:root{color-scheme:light dark;--bg:#f5f6f2;--surface:#fff;--text:#202d28;--muted:#596960;--accent:#254f46;--on-accent:#fff;--line:#dbe2da;--soft:#e7eee6;--focus:#1573b8;font:15px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit}button,input{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.6}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.skip{position:absolute;top:-5rem;left:1rem;z-index:5;background:var(--surface);padding:1rem}.skip:focus{top:1rem}.topbar{min-height:88px;padding:1rem clamp(1.25rem,5vw,5rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:25px;font-weight:650;letter-spacing:-1px}.brand-mark{display:grid;place-items:center;width:37px;height:37px;background:var(--accent);color:var(--on-accent);border-radius:12px;font:italic 28px Georgia,serif}.brand-label{font-size:10px;letter-spacing:2px;color:var(--muted);padding-top:7px}output{font-size:12px;color:var(--muted)}main{min-height:calc(100dvh - 151px)}.welcome{max-width:1180px;margin:0 auto;min-height:calc(100dvh - 151px);display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,7vw,7rem);align-items:center;padding:4rem 2rem 5rem}.eyebrow{font-size:10px;font-weight:750;letter-spacing:2px;color:var(--muted);margin:0 0 20px}.introduction h1{font:clamp(40px,4.8vw,65px)/1.12 Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-2px;margin:0 0 26px}.lead{font-size:17px;line-height:1.8;color:var(--muted)}.principles{display:flex;flex-wrap:wrap;gap:18px;margin-top:36px;font-size:12px}.principles span:before{content:'✓';color:var(--accent);margin-right:8px}.preview-note{margin-top:64px;color:var(--muted);font-size:11px}.login-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:38px;box-shadow:0 20px 70px #183a2410}.card-symbol{display:grid;place-items:center;border-radius:14px;background:var(--soft);color:var(--accent);width:48px;height:48px;font-size:26px}.login-card h2{font-size:24px;letter-spacing:-.7px;margin:20px 0 4px}.muted{color:var(--muted)}.login-card>.muted{font-size:13px;margin:0 0 28px}label{display:block;font-size:12px;font-weight:650}input{display:block;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:12px 14px;color:var(--text);margin:8px 0 17px;min-height:48px}input::placeholder{color:var(--muted)}.label-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}.text-button{background:transparent;border:0;color:var(--accent);padding:8px 0;font-size:12px}.label-row .text-button{min-height:28px;padding:0}.notice{font-size:12px;min-height:40px;color:var(--muted);margin:20px 0 16px;overflow-wrap:anywhere}.primary{width:100%;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:9px;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font-weight:600}.primary:hover:not(:disabled){filter:brightness(1.15)}.security-note{border-top:1px solid var(--line);padding-top:20px;margin-top:25px;margin-bottom:0;font-size:11px;color:var(--muted);line-height:1.8}footer{min-height:63px;padding:18px clamp(1.25rem,5vw,5rem);display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);font-size:11px;color:var(--muted);padding-bottom:max(18px,env(safe-area-inset-bottom))}.mailspace{display:grid;grid-template-columns:260px 1fr;min-height:calc(100dvh - 151px)}.sidebar{border-inline-end:1px solid var(--line);padding:30px 20px;background:var(--surface)}.account{display:flex;gap:12px;align-items:center;margin-bottom:36px;min-width:0}.account>div{min-width:0}.account strong{font-size:13px}.account p{font-size:11px;margin:0;overflow-wrap:anywhere;color:var(--muted)}.avatar{flex-shrink:0;display:grid;place-items:center;width:36px;height:36px;background:var(--soft);border-radius:50%}nav{display:grid;gap:4px;max-height:50vh;overflow:auto}nav button{background:transparent;border:1px solid transparent;border-radius:8px;text-align:start;padding:10px 12px;color:var(--text);overflow-wrap:anywhere}nav button[aria-current]{background:var(--soft);border-color:var(--line);font-weight:650}.secondary{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:24px 0 8px;width:100%}.sidebar>.text-button{width:100%;text-align:start}.mail-content{padding:38px;min-width:0}.content-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.content-heading h1{font-size:28px;margin:0;overflow-wrap:anywhere}.content-heading .eyebrow{margin:0 0 4px}.preview-badge{font-size:11px;border:1px solid var(--line);border-radius:30px;padding:5px 12px;color:var(--muted)}.empty-state{max-width:580px;margin:80px auto;padding:38px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:18px}.empty-state h2{font-size:21px}.empty-state p{font-size:13px;overflow-wrap:anywhere}.empty-symbol{font-size:36px;color:var(--accent)}
@media(max-width:700px){.topbar{min-height:72px;flex-wrap:wrap}.brand{font-size:22px}.welcome{display:block;padding:35px 20px}.introduction h1{font-size:43px}.lead{font-size:15px}.principles{margin-top:18px}.preview-note{margin:22px 0}.login-card{padding:26px}.mailspace{display:block}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:20px}.account{margin-bottom:15px}nav{display:flex;max-height:150px;flex-wrap:wrap}.sidebar>.eyebrow{margin-bottom:8px}.secondary{width:auto;margin-right:20px}.sidebar>.text-button{width:auto}.mail-content{padding:25px 20px}.empty-state{margin:25px auto;padding:24px}footer{flex-wrap:wrap}main{min-height:calc(100dvh - 135px)}}
@media(prefers-color-scheme:dark){:root{--bg:#131c18;--surface:#1b2721;--text:#e9efe9;--muted:#aabbae;--accent:#add9bd;--on-accent:#183126;--line:#36473b;--soft:#293e30;--focus:#79beff}.login-card{box-shadow:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
#compose-dialog{width:min(700px,calc(100% - 28px));max-height:90dvh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:28px}#compose-dialog::backdrop{background:#071a1580}.compose-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.compose-heading h2{margin:0;font-size:25px}.compose-notice,#compose-status{font-size:12px;padding:12px;background:var(--soft);border-radius:8px;overflow-wrap:anywhere}#compose-dialog textarea{width:100%;resize:vertical;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:14px;font:inherit;line-height:1.7;min-height:180px}.compose-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.compose-actions .primary,.compose-actions .secondary{width:auto;margin:0;font-size:12px}.sidebar>#compose-mail{margin-bottom:24px}
.mailspace{grid-template-columns:220px minmax(270px,340px) minmax(300px,1fr);background:var(--surface)}.mail-content{padding:26px 20px;border-inline-end:1px solid var(--line)}.mail-content .content-heading h1{font-size:24px}.mail-content #folder-state,.mail-content #folder-detail{font-size:12px}.message-list{display:grid;margin:18px -20px 0}.message-row{display:grid;gap:6px;text-align:start;border:0;border-bottom:1px solid var(--line);padding:20px;background:var(--surface);color:var(--text);overflow-wrap:anywhere;min-width:0}.message-row .row-sender{font-size:12px}.message-row strong{font-size:14px;font-weight:500}.message-row small{color:var(--muted);font-size:11px}.message-row.unread strong{font-weight:750}.message-row[aria-current]{background:var(--soft);box-shadow:inset 3px 0 var(--accent)}[dir=rtl] .message-row[aria-current]{box-shadow:inset -3px 0 var(--accent)}.message-row:hover{background:var(--soft)}.mail-reader{padding:26px clamp(24px,4vw,60px);min-width:0}.mail-reader .eyebrow{margin-top:30px}.mail-reader h2{font-size:28px;line-height:1.3;overflow-wrap:anywhere}.mail-reader #message-sender{font-size:13px;overflow-wrap:anywhere}.reading-note{font-size:11px;color:var(--muted);border-block:1px solid var(--line);padding:14px 0}.message-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;padding:28px 0;unicode-bidi:plaintext;font-size:14px}body[data-theme=dark]{color-scheme:dark;--bg:#131c18;--surface:#1b2721;--text:#e9efe9;--muted:#aabbae;--accent:#add9bd;--on-accent:#183126;--line:#36473b;--soft:#293e30;--focus:#79beff}body[data-theme=light]{color-scheme:light;--bg:#f5f6f2;--surface:#fff;--text:#202d28;--muted:#596960;--accent:#254f46;--on-accent:#fff;--line:#dbe2da;--soft:#e7eee6;--focus:#1573b8}
@media(max-width:1000px){.mailspace{grid-template-columns:190px minmax(240px,1fr)}.mail-reader{grid-column:2}.mailspace[data-reading] .mail-content{display:none}.mailspace[data-reading] .sidebar{grid-row:1/3}}
@media(max-width:700px){.mailspace{display:block}.mail-content{padding:24px 20px}.mail-reader{padding:22px}.mailspace[data-reading] .sidebar{display:none}.message-body{padding:16px 0}.mail-reader h2{font-size:25px}}
@media(forced-colors:active){button,input,.login-card,.empty-state{border:1px solid CanvasText}nav button[aria-current]{outline:2px solid Highlight}button:disabled{color:GrayText}}
.reader-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 12px; }
.reader-actions .primary, .reader-actions .secondary { width: auto; margin: 0; min-width: 104px; }
#compose-context:empty { display: none; }
.compose-heading { flex-wrap: wrap; }
.compose-heading h2 { flex: 1 1 auto; }
.compose-heading #save-draft { width: auto; margin: 0; flex: 0 0 auto; }
@media(max-width:480px){#compose-dialog .compose-heading h2{flex-basis:100%;font-size:22px}#compose-dialog .compose-heading{gap:8px}}
:root .draft-tools { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line, #8a9d963d); border-radius: 14px; }
.draft-tools select { width: 100%; min-height: 44px; padding: .7rem; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
#draft-status { font-weight: 600; }
#settings-dialog { width: min(640px,calc(100% - 28px)); max-height: 90dvh; overflow: auto; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); }
#settings-dialog::backdrop { background: #071a1580; }
#contacts-dialog{width:min(940px,calc(100% - 28px));max-height:88dvh;overflow:auto;padding:20px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:12px}
#contacts-dialog::backdrop{background:#071a1580}
#contacts-dialog h2{font-size:22px}#contacts-dialog h3{font-size:15px;margin:0 0 12px}
#contacts-account{font-size:13px;overflow-wrap:anywhere;margin:4px 0 16px}
.contacts-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
#contacts-dialog input{background:var(--soft);border:0;border-radius:6px;min-height:34px;padding:7px 10px;margin:5px 0 12px}
#contacts-dialog input:focus{outline:0;box-shadow:none;background:color-mix(in srgb,var(--soft),var(--text) 14%)}
#contacts-dialog #contact-search{width:min(320px,100%);margin:0}
.contacts-workspace{display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr);gap:24px}
#contacts-dialog .contact-list{max-height:50dvh;margin:0}
#contacts-dialog .contact-list li{padding:10px 0;gap:10px}
#contacts-dialog .contact-detail{flex-basis:100%;font-size:13px}
#contacts-dialog button{min-height:32px}#contacts-dialog .compose-actions{gap:12px}
#contacts-dialog .secondary{width:auto;margin:0;padding:6px 12px}
#contact-status,#contacts-empty{font-size:13px;margin:0 0 10px}
@media(max-width:620px){.contacts-workspace{grid-template-columns:1fr;gap:18px}#contacts-dialog{padding:16px}#contacts-dialog .contact-list{max-height:none}}
@media(pointer:coarse){#contacts-dialog button{min-height:44px}#contacts-dialog input{font-size:16px}}
@media(forced-colors:active){#contacts-dialog input:focus{outline:2px solid Highlight}}
#move-dialog { width: min(520px,calc(100% - 28px)); max-height: 90dvh; overflow: auto; padding: 28px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 16px; }
#move-dialog::backdrop { background: #071a1580; }
#move-dialog p { font-size: 13px; overflow-wrap: anywhere; }
#move-target { width: 100%; min-height: 44px; margin: 10px 0 24px; padding: 10px; background: var(--bg); color: var(--text); font: inherit; border: 1px solid var(--line); border-radius: 8px; }
#settings-dialog .eyebrow { margin-bottom: 8px; }
.settings-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.settings-section:last-child { border: 0; }
.settings-section h3 { font-size: 16px; margin: 0 0 10px; }
.settings-section p { font-size: 13px; overflow-wrap: anywhere; }
.settings-section select { width: 100%; min-height: 44px; padding: 10px; margin: 8px 0 16px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: inherit; }
body[data-density=compact] .message-row { padding: 10px 20px; gap: 3px; }
body[data-reading-size=large] .message-body { font-size: 18px; }
#saved-draft-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; font: inherit; padding: .8rem; background: #8a9d961a; border-radius: 8px; }
.message-paging{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:space-between;margin:.5rem 0}.message-paging button{min-height:44px}
.message-paging #page-indicator{align-self:center;white-space:nowrap;color:var(--muted)}
.message-paging .page-jump{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px}
.message-paging .page-jump button{min-width:34px;min-height:34px;padding:5px 8px}
.message-paging .page-jump button[aria-current=page]{background:var(--accent);color:var(--on-accent);font-weight:700;opacity:1}
#copy-recipients { margin: 0 0 20px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
#copy-recipients summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--text); font-size: 13px; }
#copy-recipients summary:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
#attachments { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 16px; }
#attachments h3 { font-size: 15px; margin: 0 0 12px; }
#attachment-list { list-style: none; padding: 0; margin: 0; }
.attachment-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.attachment-row div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.attachment-row strong, .attachment-row small { display: block; font-size: 13px; }
.attachment-row small { margin-top: 6px; font-size: 12px; }
.attachment-row button { min-height: 44px; flex-shrink: 0; width: auto; margin: 0; }
#attachment-confirm-dialog, #action-confirm-dialog { width: min(480px,calc(100% - 28px)); max-height: 90dvh; overflow: auto; padding: 28px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 16px; }
#attachment-confirm-dialog::backdrop, #action-confirm-dialog::backdrop { background: #071a1580; }
#action-confirm-text { overflow-wrap: anywhere; }
#attachment-confirm-name { overflow-wrap: anywhere; font-weight: 650; }
@media(max-width:380px) { .attachment-row { align-items: stretch; flex-direction: column; } }
/* Native popup menus need a concrete scheme and opaque option colors too. */
:root { color-scheme: light; }
@media(prefers-color-scheme:dark) { :root { color-scheme: dark; } }
select option, select optgroup { color: var(--text); background-color: var(--surface); }
.compose-attachments { padding: 14px 16px; margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; }
.compose-attachments h3 { margin: 0 0 6px; font-size: 14px; }
.compose-attachments p { margin: 0; font-size: 12px; color: var(--muted); }
#compose-file-list { list-style: none; padding: 0; }
#compose-file-input::file-selector-button { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin-right: 10px; cursor: pointer; }
#compose-file-status { margin-top: 12px; }
#compose-dialog .compose-heading { position: sticky; top: -28px; z-index: 2; background: var(--surface); padding: 14px 0; border-bottom: 1px solid var(--line); }
#compose-save-state { flex-basis: 100%; font-size: 12px; color: var(--text); }
#compose-save-state[data-unsaved=true] { font-weight: 700; }
#compose-drop-zone[data-dragging=true] { outline: 3px solid var(--focus); outline-offset: 3px; background: var(--soft); }
.compose-attachments .file-drop-hint { margin: 8px 0; }
@media(forced-colors:active) { select, select option, select optgroup { color: CanvasText; background-color: Canvas; border-color: ButtonText; } }
/* Compose formatting: shared theme tokens keep controls visible in both themes. */
.format-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px;background:var(--soft);border:1px solid var(--line);border-radius:10px 10px 0 0}
.format-toolbar button,.format-toolbar select{min-height:40px;width:auto;margin:0;padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);font:inherit}
.format-toolbar button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#format-bold{font-weight:750}#format-italic{font-style:italic}#format-underline{text-decoration:underline}#format-strike{text-decoration:line-through}
.compose-editor{min-height:230px;max-height:420px;overflow:auto;padding:16px;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;background:var(--surface);color:var(--text);font:14px/1.6 Arial,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.compose-editor[aria-disabled="true"]{opacity:.7}
/* Native fontSize emits CSS keywords. Match their display to our bounded wire sizes. */
.compose-editor [style*="font-size: xx-small;"],.compose-editor [style*="font-size: x-small;"]{font-size:12px!important}
.compose-editor [style*="font-size: small;"],.compose-editor [style*="font-size: medium;"]{font-size:14px!important}
.compose-editor [style*="font-size: large;"]{font-size:18px!important}
.compose-editor [style*="font-size: x-large;"],.compose-editor [style*="font-size: xx-large;"],.compose-editor [style*="font-size: xxx-large;"]{font-size:24px!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.session-warning{max-width:28rem;padding:.45rem .7rem;border:1px solid var(--line);border-radius:.5rem;background:var(--soft);color:var(--text);font-size:.75rem;line-height:1.35}
.mail-search-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.mail-search-controls .text-button{min-height:44px}#mail-search{margin-bottom:0}
.contact-list{list-style:none;padding:0;margin:12px 0;max-height:220px;overflow:auto}.contact-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}.contact-list .contact-detail{flex:1;min-width:160px;overflow-wrap:anywhere}.contact-list button{min-height:40px}.contact-list .contact-detail strong{display:block}
#all-search-results{max-height:320px}#all-search-results li button{width:100%;text-align:left;overflow-wrap:anywhere}
@media(max-width:700px){.format-toolbar{gap:5px;padding:8px}.format-toolbar button,.format-toolbar select{min-height:44px;padding:6px 10px}.compose-editor{min-height:180px}}
/* Keep the first message visible sooner on narrow screens without hiding account controls. */
@media(max-width:700px){
  .topbar{min-height:64px;flex-wrap:nowrap;padding:10px 16px;gap:8px}
  .topbar .brand{font-size:20px;flex-shrink:0}
  .topbar .brand-label{display:none}
  .topbar output{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar #open-settings{flex-shrink:0}
  .topbar #open-all-search{flex-shrink:0;padding-inline:6px;font-size:12px}
  .sidebar{padding:12px 16px}
  .sidebar .account{margin-bottom:8px}
  .sidebar #compose-mail{margin-bottom:8px}
  .sidebar>.eyebrow{margin:0 0 4px}
  .sidebar nav{flex-wrap:nowrap;max-height:none;overflow-x:auto;overflow-y:hidden;gap:2px}
  .sidebar nav button{flex:0 0 auto;white-space:nowrap;padding:8px 10px}
  .sidebar .secondary{min-height:44px;margin:8px 8px 0 0;padding:6px 10px;font-size:12px}
  .sidebar>.text-button{min-height:44px}
  .mail-content{padding:18px 16px}
  .mail-content #folder-state,.mail-content #folder-detail{margin:6px 0}
  .mail-content #mail-search{margin:4px 0 8px}
  .mail-content .mail-search-controls .text-button,.mail-content #refresh-messages{min-height:44px}
  .mail-content .message-paging button:disabled{display:none}
  .mail-content .message-list{margin-top:8px}
}
/* Keep the sender primary and the message summary secondary in both themes. */
.message-row .row-sender{font-size:16px;font-weight:400;line-height:1.4}
.message-row.unread .row-sender{font-weight:750}
.message-row strong{font-size:12px;font-weight:400;line-height:1.5}
.message-row.unread strong{font-weight:550}
/* Resolve on the list, after the active light/dark and installation palette.
   Fixed forest colors here would override inherited ocean/slate branding. */
.mail-content{--read-row:var(--surface);--unread-row:var(--soft);--read-text:var(--muted);--unread-mark:var(--accent)}
.message-list .message-row{background:var(--read-row);border-left:4px solid transparent;color:var(--read-text)}
.message-list .message-row.unread{background:var(--unread-row);border-left-color:var(--unread-mark);color:var(--text)}
.message-row .row-sender::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;border:1px solid currentColor;vertical-align:middle;opacity:.5}
.message-row.unread .row-sender::before{background:var(--unread-mark);border-color:var(--unread-mark);opacity:1}
.message-list .message-row[aria-current]{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:none}
.message-list .message-row:hover{outline:1px solid var(--accent);outline-offset:-1px}
.read-filters{display:flex;gap:5px;flex-wrap:wrap;margin:14px 0 6px}
.read-filters button{flex:1;min-width:65px;padding:9px 6px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:12px}
.read-filters button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.filter-note{font-size:11px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.send-notice{padding:14px;margin-bottom:18px;border:1px solid var(--accent);border-radius:10px;background:var(--soft);font-size:12px;line-height:1.6}
.send-notice p{margin:0 0 8px}.send-notice .text-button{margin-right:10px}
.mail-reader #message-sender{font-size:18px;font-weight:750;line-height:1.5}
.message-body a{color:#0866c6;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
body[data-theme=dark] .message-body a{color:#80baff}
@media(prefers-color-scheme:dark){body:not([data-theme=light]) .message-body a{color:#80baff}}
@media(forced-colors:active){.message-body a{color:LinkText}}
.contact-shortcuts{display:flex;flex-wrap:wrap;gap:6px}.contact-add{font-size:12px;overflow-wrap:anywhere;text-align:start}
.bulk-selection{display:flex;align-items:center;gap:20px;margin-top:18px;font-size:13px}.bulk-selection label{display:flex;align-items:center;gap:10px;margin:0}
.bulk-selection input,.message-row>input{width:24px;height:24px;margin:0;accent-color:var(--accent);cursor:pointer}
.bulk-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:14px;margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.bulk-toolbar button,.bulk-toolbar select{font:inherit;font-size:12px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:10px;margin:0;width:auto;max-width:100%}
.bulk-toolbar button:disabled{opacity:.45;cursor:not-allowed}.bulk-toolbar .danger{color:#cf3030;border-color:currentColor}body[data-theme=dark] .bulk-toolbar .danger{color:#ffaaa0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#bulk-status{font-size:13px;line-height:1.6;overflow-wrap:anywhere}
#schedule-dialog,#scheduled-dialog{width:min(640px,calc(100vw - 24px));max-height:85dvh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:24px}
.scheduled-card{border:1px solid var(--line);border-radius:10px;padding:16px;margin-block:12px;overflow-wrap:anywhere}.scheduled-card h3{margin:0;font-size:16px}.scheduled-card p{font-size:12px}.scheduled-card button{margin:4px}
/* One fixed navigation column, one full-width list OR reader. Each scrolls independently. */
body[data-mailbox=true]{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body[data-mailbox=true]>.topbar{flex:0 0 76px;min-height:76px;padding:12px 24px;flex-wrap:nowrap}
body[data-mailbox=true]>main{flex:1;min-height:0;overflow:hidden}
body[data-mailbox=true]>footer{display:none}
.site-footer{min-height:72px;justify-content:center;align-items:center;flex-wrap:wrap;column-gap:1.25rem;row-gap:.25rem;padding-block:16px max(16px,env(safe-area-inset-bottom));font-size:12px;line-height:1.5;text-align:center}
.site-footer>span{display:inline-block}
.mailspace{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100%;min-height:0}
.mailspace>.sidebar{grid-column:1;grid-row:1;min-height:0;height:100%;overflow:auto;overscroll-behavior:contain;padding:24px 18px}
.mailspace>.mail-content,.mailspace>.mail-reader{grid-column:2;grid-row:1;min-height:0;height:100%;overflow:auto;overscroll-behavior:contain}
.mailspace>.mail-content{padding:26px 32px;border-right:0}
.mailspace[data-reading]>.mail-content{display:none}
.mailspace[data-reading]>.sidebar{display:block;grid-row:1}
.mailspace>.mail-reader{padding:28px clamp(24px,5vw,72px)}
.mailspace .message-list{margin:18px -32px 0}
.mailspace .message-row{grid-template-columns:minmax(160px,28%) minmax(0,1fr) minmax(105px,165px);align-items:center;gap:18px;padding:18px 28px;min-height:68px}
.mailspace .message-row .row-sender,.mailspace .message-row strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mailspace .message-row .row-sender{font-size:15px}
.mailspace .message-row strong{font-size:13px}
.mailspace .message-row small{text-align:right;line-height:1.5}
.mailspace .read-filters{max-width:360px}
.inbox-tools{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:18px 0 8px}
.mailspace .inbox-tools .read-filters{flex:0 1 320px;margin:0}
.mailspace .inbox-tools #mail-search-form{display:flex;align-items:center;gap:12px;flex:1;min-width:260px}
.inbox-tools #mail-search-form>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mailspace .inbox-tools #mail-search{margin:0;flex:1;min-width:0;width:auto;min-height:44px}
.mailspace #folder-state{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mailspace .content-heading .eyebrow{display:none}
.mailspace #folder-detail{margin:4px 0 8px}
.mailspace #mail-search-form{max-width:760px}
.mailspace #refresh-messages{display:inline-block;margin-right:20px}
.mailspace .message-paging{display:inline-flex;vertical-align:middle;max-height:none}
.mailspace .mail-reader .eyebrow{margin-top:24px}
.mailspace .message-body{max-width:100%;min-height:180px;padding:28px 0;font-size:15px}
.mailspace .sidebar nav{display:grid;max-height:none;overflow:visible}
.mailspace .sidebar nav button{white-space:normal}
@media(max-width:900px){.mailspace{grid-template-columns:180px minmax(0,1fr)}.mailspace .message-row{grid-template-columns:minmax(0,1fr) auto;gap:5px 12px}.mailspace .message-row strong{grid-column:1/-1;grid-row:2}.mailspace .message-row small{grid-column:2;grid-row:1;max-width:130px;font-size:11px}}
@media(max-width:600px){body[data-mailbox=true]>.topbar{flex-basis:64px;min-height:64px;padding:10px 12px}.mailspace{grid-template-columns:116px minmax(0,1fr)}.mailspace>.sidebar{padding:16px 8px}.mailspace .sidebar .avatar,.mailspace .sidebar .account strong{display:none}.mailspace .sidebar .account{margin-bottom:14px}.mailspace .sidebar .account p{font-size:10px}.mailspace .sidebar button{font-size:11px;padding:8px 7px;max-width:100%}.mailspace .sidebar .secondary{width:100%;margin:12px 0 0}.mailspace .sidebar>.text-button{width:100%}.mailspace>.mail-content,.mailspace>.mail-reader{padding:20px 14px}.mailspace .message-list{margin-inline:-14px}.mailspace .message-row{padding:14px 10px;grid-template-columns:minmax(0,1fr);gap:5px}.mailspace .message-row .row-sender{font-size:14px}.mailspace .message-row strong{font-size:12px;grid-column:1;grid-row:2}.mailspace .message-row small{grid-column:1;grid-row:3;text-align:left;max-width:none}.mailspace .read-filters{gap:4px}.mailspace .read-filters button{min-width:50px;padding:7px 4px;font-size:11px}.mailspace .content-heading h1{font-size:22px}.mailspace .mail-reader h2{font-size:23px}.mailspace .message-body{font-size:14px}.mailspace #message-sender{font-size:15px}}
@media(forced-colors:active){.message-list .message-row.unread{border-left-color:Highlight}.message-row.unread .row-sender::before{background:Highlight}.read-filters button[aria-pressed=true]{outline:2px solid Highlight}}
@media(max-width:600px){.mailspace .inbox-tools #mail-search-form{min-width:0;flex-basis:100%;flex-wrap:wrap}.mailspace .inbox-tools #mail-search{flex-basis:100%;width:100%}.mailspace .inbox-tools .read-filters{flex-basis:100%;min-width:0}}
.mailspace .message-row{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:0 20px;cursor:default}
.message-open{display:grid;grid-template-columns:minmax(160px,28%) minmax(0,1fr) minmax(105px,165px);gap:18px;align-items:center;min-width:0;min-height:68px;padding:18px 8px;background:transparent;color:inherit;border:0;text-align:left;width:100%;font:inherit;cursor:pointer}
.message-row>input:focus-visible,.message-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:900px){.message-open{grid-template-columns:minmax(0,1fr) auto;gap:5px 12px}}
@media(max-width:600px){.mailspace .message-row{grid-template-columns:18px minmax(0,1fr);gap:7px;padding:0 8px}.message-open{grid-template-columns:minmax(0,1fr);padding:14px 3px;gap:5px}.bulk-selection{gap:10px;flex-wrap:wrap}.bulk-toolbar{padding:8px}.bulk-toolbar button{flex:1 1 auto}.bulk-toolbar select{width:100%}}
.setup-details{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.6;background:var(--bg);padding:1rem;border-radius:12px}
.sidebar #account-switcher{width:100%;min-width:0;margin-bottom:.5rem;padding:.65rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:.8rem}
#client-setup-content button{border:1px solid var(--border);border-radius:8px;padding:.7rem;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.linked-account-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.7rem 0;border-bottom:1px solid var(--border)}
.linked-account-row strong{flex:1;overflow-wrap:anywhere;min-width:160px}

/* Approved compact inbox + full-inbox composer. Keep readable type; reduce chrome. */
body[data-mailbox=true]{--mail-header:54px;--mail-sidebar:var(--mail-sidebar-desktop,220px)}
body[data-mailbox=true]>.topbar{flex-basis:var(--mail-header);min-height:var(--mail-header);padding:7px 18px}
body[data-mailbox=true] .brand{font-size:22px}
body[data-mailbox=true] .brand-mark{width:30px;height:32px;border-radius:8px;font-size:25px}
.mailspace{grid-template-columns:var(--mail-sidebar,190px) minmax(0,1fr)}
.mailspace>.sidebar{padding:16px 12px}
.sidebar .account{margin-bottom:12px;gap:8px}
#account-switch-status:empty{display:none}
.sidebar #account-switcher{padding:5px 7px;border-color:var(--line);min-height:32px;font-size:13px}
.sidebar #compose-mail{margin:10px 0 16px;padding:6px 10px;justify-content:flex-start;gap:8px}
.sidebar .eyebrow{margin:12px 0 5px}
.mailspace .sidebar nav{gap:2px}
.mailspace .sidebar nav button{padding:5px 9px;min-height:34px;display:flex;align-items:center;gap:8px}
.mailspace .sidebar .secondary{margin:10px 0 4px;padding:5px 9px}
.mailspace>.mail-content{padding:14px 18px}
.mailspace .content-heading h1{font-size:23px}
.mailspace .inbox-tools{gap:12px;margin:10px 0 4px}
.mailspace .inbox-tools .read-filters{flex:0 1 auto;width:auto;gap:3px}
.mailspace .read-filters button{min-height:32px;min-width:65px;padding:3px 9px}
.mailspace .inbox-tools #mail-search{min-height:34px;padding:5px 10px}
.mailspace .inbox-tools #mail-search-form{gap:8px}
.mailspace .message-list{margin:8px -18px 0}
.mailspace .message-row{min-height:38px;padding:0 14px;gap:8px;grid-template-columns:16px minmax(0,1fr)}
.mailspace .message-open{min-height:38px;padding:5px 4px;gap:12px;grid-template-columns:minmax(130px,27%) minmax(0,1fr) minmax(90px,150px)}
.mailspace .bulk-selection input,.mailspace .message-row>input{width:14px;height:14px;min-height:14px;padding:0;margin:0;flex-shrink:0}
.brand-name{white-space:nowrap}
.folder-unread{margin-left:auto;flex-shrink:0;min-width:20px;padding:0 5px;border-radius:6px;background:var(--soft);font-size:11px;font-variant-numeric:tabular-nums;text-align:center}
.mailspace .message-row .row-sender{font-size:15px}
.mailspace .message-row strong{font-size:13px;grid-column:auto;grid-row:auto}
.mailspace .message-row small{grid-column:auto;grid-row:auto;font-size:11px}
.mailspace .bulk-selection{margin:6px 0;min-height:32px;padding:0;gap:14px}
.mailspace .bulk-toolbar{margin:5px 0;padding:5px;gap:5px}
.mailspace .bulk-toolbar button{padding:4px 8px;min-height:32px}
.mailspace #bulk-status:empty,.mailspace #mail-search-status:empty{display:none}
.mailspace #bulk-status{margin:4px 0}
.mailspace #folder-detail{margin:4px 0;font-size:12px}
.mailspace .message-paging{margin:0;gap:8px}
.mailspace .inbox-navigation{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0}
.mailspace .inbox-navigation .message-paging{margin-left:auto}
.mailspace .inbox-navigation #refresh-messages{margin:0}
.mailspace #read-filter-note{margin:3px 0;font-size:12px;line-height:1.4}
.mailspace .read-filters button{white-space:nowrap;flex:0 0 auto;width:auto}
body[data-mailbox=true] button{min-height:32px}
.ui-icon{width:16px;height:16px;vertical-align:-3px;flex-shrink:0;margin-right:6px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sidebar nav .ui-icon,.sidebar #compose-mail .ui-icon{margin-right:0}
/* Compact classic reader + attachment-first cards. Existing action gates stay intact. */
.mailspace>.mail-reader[data-compact-reader]{padding:12px 18px 20px}
.mail-reader[data-compact-reader] .reader-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.mail-reader[data-compact-reader] #back-messages{margin-right:auto;white-space:nowrap}
.mail-reader[data-compact-reader] .reader-actions{gap:5px;margin:0}
.mail-reader[data-compact-reader] .reader-actions button{min-width:0;min-height:30px;padding:4px 8px;font-size:12px}
.mail-reader[data-compact-reader] h2{margin:0 0 12px;font-size:20px;line-height:1.35}
.reader-sender-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mail-reader[data-compact-reader] #message-sender{margin:0;font-size:15px;line-height:1.5;min-width:0}
.reader-sender-line .contact-shortcuts{margin:0}
.mail-reader[data-compact-reader] .reader-attachment-badge{margin:0 0 0 auto;width:auto;min-height:30px;padding:4px 8px;background:var(--soft);color:var(--accent);font-size:12px}
.mail-reader[data-compact-reader] .reading-note{padding:4px 0;margin:4px 0;border:0;font-size:12px}
.mail-reader[data-compact-reader] .reading-note:empty{display:none}
.mail-reader[data-compact-reader] #attachments{margin:12px 0 0;padding:10px 0;border-block:1px solid var(--line)}
.mail-reader[data-compact-reader] #attachments h3{font-size:12px;margin:0 0 6px;color:var(--muted)}
.mail-reader[data-compact-reader] #attachment-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.mail-reader[data-compact-reader] .attachment-row{display:flex;align-items:center;gap:10px;max-width:100%;margin:0;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.mail-reader[data-compact-reader] .attachment-row>div{min-width:0}
.mail-reader[data-compact-reader] .attachment-row strong{font-size:13px;overflow-wrap:anywhere}
.mail-reader[data-compact-reader] .attachment-row small{display:block;font-size:11px}
.mail-reader[data-compact-reader] .attachment-row button{min-height:30px;padding:4px 8px;margin:0;width:auto;font-size:12px;flex-shrink:0}
.mail-reader[data-compact-reader] .message-body{padding:16px 0;line-height:1.7}
.reader-help{border-top:1px solid var(--line);padding:6px 0;font-size:12px;color:var(--muted)}
.reader-help summary{padding:4px 0}
.row-attachments{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;color:var(--accent)}
@media(max-width:600px){.mailspace>.mail-reader[data-compact-reader]{padding:12px}.mail-reader[data-compact-reader] .reader-actions{gap:4px}.mail-reader[data-compact-reader] .attachment-row{flex-wrap:wrap}.mail-reader[data-compact-reader] .reader-attachment-badge{margin-left:0}}
@media(pointer:coarse){.mail-reader[data-compact-reader] .reader-actions button,.mail-reader[data-compact-reader] .attachment-row button,.mail-reader[data-compact-reader] .reader-attachment-badge{min-height:44px}}
#compose-dialog[data-compact-layout]{position:fixed;inset:var(--mail-header,54px) 0 0 var(--mail-sidebar,190px);width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;border-left:1px solid var(--line);border-radius:0;overflow:hidden}
#compose-dialog[data-compact-layout][open]{display:flex;flex-direction:column}
#compose-dialog[data-compact-layout]::backdrop{background:transparent}
#compose-dialog[data-compact-layout] .compose-heading{position:static;flex-shrink:0;min-height:44px;padding:6px 18px;border-bottom:1px solid var(--line);gap:8px;flex-wrap:nowrap}
#compose-dialog[data-compact-layout] .compose-heading h2{font-size:20px}
#compose-dialog .compose-fields{padding:0 18px;flex-shrink:0;max-height:32dvh;overflow:auto}
#compose-dialog .compose-fields>p{margin:0;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;overflow-wrap:anywhere}
#compose-dialog .compose-field{display:flex;align-items:center;gap:10px;min-height:36px;border-bottom:1px solid var(--line)}
#compose-dialog .compose-field>label{width:52px;flex-shrink:0;color:var(--muted);font-size:13px}
#compose-dialog .compose-field>input{min-height:34px;margin:0;padding:5px 0;background:transparent;border:0;border-radius:0;min-width:0;flex:1}
#compose-dialog #compose-to-contacts{margin:0;flex-shrink:0;max-width:35%;display:flex;gap:4px;flex-wrap:wrap}
#compose-dialog #compose-to-contacts:empty{display:none}
#compose-dialog #copy-recipients{margin:0;padding:3px 0;border:0;font-size:13px}
#compose-dialog #copy-recipients summary{min-height:28px;color:var(--accent)}
#compose-dialog #copy-recipients input{margin:3px 0;padding:5px 8px;min-height:32px}
#compose-dialog[data-compact-layout] .compose-editor{flex:1;min-height:60px;max-height:none;padding:16px 20px;border:0;border-radius:0;overflow:auto}
#compose-dialog .compose-footer{flex-shrink:0;border-top:1px solid var(--line);padding:0 18px 6px;background:var(--surface)}
#compose-dialog .format-toolbar{padding:4px 0;margin:0;background:transparent;border:0;gap:5px;flex-wrap:wrap}
#compose-dialog .format-toolbar button,#compose-dialog .format-toolbar select{padding:3px 8px;min-height:29px;font-size:13px}
#compose-dialog .compose-primary-actions{padding:7px 0 4px;gap:7px;border-top:1px solid var(--line);display:flex;align-items:center;flex-wrap:wrap}
#compose-dialog .compose-primary-actions button{padding:5px 11px;min-height:32px;font-size:14px;width:auto;margin:0}
#compose-dialog .compose-primary-actions #save-draft{margin-left:auto}
#compose-dialog #compose-save-state{font-size:12px;display:block;line-height:1.4}
#compose-dialog .compose-options{font-size:12px;border:0;margin:3px 0 0;padding:0}
#compose-dialog .compose-tool-buttons{display:flex;gap:8px;flex-wrap:wrap;padding:6px 0}
#compose-dialog .compose-tool-button{min-height:32px;padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
#compose-dialog .compose-tool-button[aria-expanded=true]{background:var(--soft);border-color:var(--accent);font-weight:700}
#compose-dialog .compose-options-body,#compose-dialog .compose-help-body{max-height:none;overflow:visible;border-top:1px solid var(--line);padding:10px 0}
#compose-dialog[data-compact-layout][open][data-tool-panel=draft],#compose-dialog[data-compact-layout][open][data-tool-panel=help]{display:block;overflow-y:auto}
#compose-dialog[open]:is([data-tool-panel=draft],[data-tool-panel=help]) .compose-fields{max-height:none;overflow:visible}
#compose-dialog[data-compact-layout][open]:is([data-tool-panel=draft],[data-tool-panel=help]) .compose-editor{height:clamp(180px,30dvh,320px);min-height:180px}
#compose-dialog .compose-options-body .secondary{width:auto;margin:4px;padding:4px 8px}
#compose-dialog .compose-options-body p{margin:6px 0}
#compose-dialog .compose-options-body .draft-tools,#compose-dialog .compose-attachments{padding:8px;margin:6px 0}
#compose-dialog .compose-live-notices{max-height:12dvh;overflow:auto}
#compose-dialog .compose-live-notices p{margin:3px 0;padding:4px 6px;min-height:0;font-size:12px}
#compose-dialog .compose-live-notices p:empty{display:none}
#compose-dialog #compose-file-list{display:flex;flex-wrap:wrap;gap:4px;margin:0;max-height:70px;overflow:auto;padding:0;list-style:none}
#compose-dialog #compose-file-list li{font-size:12px;padding:2px 6px;background:var(--soft);border-radius:5px}
@media(max-width:900px){body[data-mailbox=true]{--mail-sidebar:min(35vw,var(--mail-sidebar-desktop,220px))}.mailspace .message-open{grid-template-columns:minmax(100px,32%) minmax(0,1fr) 90px}.mailspace .message-row small{max-width:none}}
@media(max-width:600px){body[data-mailbox=true]{--mail-sidebar:110px;--mail-header:60px}body[data-mailbox=true]>.topbar{padding:6px 10px}.mailspace>.sidebar{padding:12px 6px}.mailspace .sidebar button{font-size:12px}.mailspace .sidebar nav button{gap:4px;padding:5px 3px}.mailspace>.mail-content{padding:12px}.mailspace .message-list{margin-inline:-12px}.mailspace .message-open{grid-template-columns:minmax(0,1fr);gap:3px}.mailspace .message-row strong{grid-column:1;grid-row:2}.mailspace .message-row small{grid-column:1;grid-row:3;text-align:left}.mailspace .read-filters button{min-width:0;font-size:12px}#compose-dialog[data-compact-layout]{left:0}#compose-dialog .compose-heading,#compose-dialog .compose-fields,#compose-dialog .compose-footer{padding-left:12px;padding-right:12px}#compose-dialog .compose-primary-actions #save-draft{margin-left:0}#compose-dialog .compose-heading h2{flex-basis:auto}#compose-dialog .compose-options-body{max-height:20dvh}}
@media(pointer:coarse){body[data-mailbox=true] button,.mailspace .sidebar nav button,#compose-dialog .format-toolbar button,#compose-dialog .compose-primary-actions button{min-height:44px}#compose-dialog .compose-field>input{font-size:16px}#compose-dialog .format-toolbar{gap:3px}#compose-dialog .compose-fields{max-height:25dvh}}
#create-folder{display:flex;align-items:center;gap:6px;min-height:30px;margin:0 0 5px;font-size:12px}
#folder-create-controls{min-width:0;padding-left:12px}
#folder-create-anchor #folder-create-controls{padding-left:0}
#create-folder-form{padding:7px;background:var(--soft);border-radius:8px;margin:0 0 6px}
#create-folder-form label{font-size:11px}
#create-folder-form input{min-height:32px;margin:4px 0;padding:5px 7px;font-size:12px}
#create-folder-form button{min-height:30px;margin:2px 6px 2px 0;padding:4px 7px;width:auto;font-size:11px}
#create-folder-status{margin:2px 0;padding:2px 0;border:0;font-size:11px}
#send-availability{margin:0;padding:3px 0;border:0;color:var(--muted);font-size:11px;line-height:1.3}

/* Keep the running build visible while the folder list scrolls independently. */
.mailspace>.sidebar{display:flex;flex-direction:column;overflow:hidden}
.mailspace[data-reading]>.sidebar{display:flex}
.sidebar-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:8px}
.sidebar-scroll>.text-button{width:100%;text-align:left}
.app-version{flex:0 0 auto;margin-top:6px;padding:8px 2px 0;border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.4;overflow-wrap:anywhere}

/* Unified toolbar: one quiet command strip and a compact, borderless reading sheet. */
.mailspace>.mail-reader[data-unified-layout]{padding:0 18px 18px}
.mail-reader[data-unified-layout] .reader-toolbar{margin:0 -18px 12px;padding:8px 12px;background:var(--soft);gap:8px}
.mail-reader[data-unified-layout] .reader-toolbar button{border:0;background:transparent}
.mail-reader[data-unified-layout] .reader-toolbar .primary{background:var(--accent);color:var(--on-accent)}
.reader-sheet{background:var(--surface);border-radius:8px;padding:12px 14px}
.mail-reader[data-unified-layout] h2{margin:0 0 6px}
.mail-reader[data-unified-layout] .reader-sender-line{gap:7px;margin:0 0 6px}
.mail-reader[data-unified-layout] .message-body{min-height:0;padding:10px 0;line-height:1.5}
.mail-reader[data-unified-layout] #attachments{border:0;padding:4px 0;margin:6px 0}
.mail-reader[data-unified-layout] .attachment-row{border:0;background:var(--soft);padding:6px 9px}
.mail-reader[data-unified-layout] .reader-help{border:0;padding:4px 0}
body[data-show-help=false] [data-help-only]{display:none!important}
.toggle-help{white-space:nowrap}
#compose-dialog .compose-field{border:0;gap:8px;margin:5px 0}
#compose-dialog .compose-field>input,#compose-dialog #compose-cc,#compose-dialog #compose-bcc{background:var(--soft);border:0;border-radius:5px;padding:6px 10px;min-height:34px}
#compose-dialog .compose-fields>p{border:0;padding:5px 0}
#compose-dialog #copy-recipients{border:0;margin:3px 0;padding:0}
#compose-dialog #copy-recipients input{margin:4px 0}
#compose-dialog .compose-primary-actions button,#compose-dialog .format-toolbar button{border:0}
#compose-dialog .compose-live-notices p{border:0;margin:3px 0;padding:3px 0}
#compose-dialog .compose-live-notices p:empty{display:none}
.reader-images-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:8px 0;padding:8px 10px;background:var(--soft);border-radius:6px;font-size:12px}
.reader-images-controls button{width:auto;min-height:30px;min-width:0;margin:0;padding:4px 8px;border:0;font-size:12px}
.image-privacy-note{flex-basis:100%;font-size:12px;margin:0;color:var(--muted)}
.reader-images{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin:12px 0;max-inline-size:100%;min-inline-size:0}
.reader-images img{display:block;flex:0 1 auto;min-inline-size:0;width:auto;height:auto;max-width:min(100%,320px);max-height:min(240px,40vh);object-fit:contain;object-position:left top;border:0}
.message-body{max-inline-size:78ch}
.message-link-details{white-space:normal;margin-block:16px;border:1px solid var(--line);border-radius:6px;padding:8px 12px}
.message-link-details summary{cursor:pointer;color:var(--muted)}
.message-date{margin:4px 0 12px;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.message-list-date{display:block;line-height:1.5;overflow-wrap:normal;word-break:normal;text-wrap:balance}
.message-link-details .message-link-list{white-space:pre-wrap;padding-block:8px;overflow-wrap:anywhere}
.trusted-image-senders{list-style:none;margin:8px 0;padding:0}
.trusted-image-senders li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0;overflow-wrap:anywhere}
.trusted-image-senders button{min-height:30px;padding:4px 8px}
.provider-notice{font-size:13px;margin:8px 0;color:var(--muted)}
#settings-dialog input,#settings-dialog select,#settings-dialog textarea{background:var(--soft);border:0;border-radius:6px;min-height:34px;padding:7px 10px}
#settings-dialog .settings-section{margin-top:14px;padding-top:10px}
#settings-dialog label{margin-top:10px}
#settings-dialog .eyebrow{display:none}
.send-notice{position:fixed;z-index:15;right:20px;top:calc(var(--mail-header,54px) + 10px);max-width:min(520px,calc(100vw - 30px));padding:10px 14px;border:0;background:var(--accent);color:var(--on-accent);box-shadow:0 4px 16px #0003}
.send-notice p{margin:0}.send-notice .text-button{color:inherit;min-height:28px;padding:3px 6px}
@media(max-width:600px){.mailspace>.mail-reader[data-unified-layout]{padding:0 10px 12px}.mail-reader[data-unified-layout] .reader-toolbar{margin:0 -10px 10px;padding:7px}.reader-sheet{padding:10px 0}.mail-reader[data-unified-layout] .reader-actions{gap:3px}.topbar .toggle-help{padding:4px;font-size:12px}}
@media(pointer:coarse){.reader-images-controls button,.trusted-image-senders button{min-height:44px}#settings-dialog input,#settings-dialog select,#settings-dialog textarea{font-size:16px}}

/* Bounded entry lines; the writing canvas deliberately keeps the full inbox width. */
body{--entry-active:color-mix(in srgb,var(--soft) 84%,var(--accent))}
body :is(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=datetime-local],textarea,select){max-width:36rem}
#compose-dialog .compose-fields{width:min(100%,54rem)}
#compose-dialog .compose-field>input,#compose-dialog #compose-cc,#compose-dialog #compose-bcc{max-width:none}
#compose-dialog #copy-recipients .compose-field{margin:5px 0}
#compose-dialog #copy-recipients .compose-field>input{margin:0;min-width:0;width:100%}
.mailspace #mail-search-form{flex:0 1 42rem;max-width:100%;min-width:0}
.mailspace #mail-search,#all-search-query{width:100%;max-width:28rem;min-width:0;background:var(--soft);border-color:transparent}
/* Background is the focus indicator for entry controls, for mouse AND keyboard.
   Buttons/links retain their outlines; forced-colors users retain a system outline. */
body :is(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=datetime-local],textarea,select,[contenteditable=true]):is(:focus,:focus-visible){outline:none!important;box-shadow:none!important;border-color:transparent!important;background:var(--entry-active)!important}
@media(forced-colors:active){body :is(input,textarea,select,[contenteditable=true]):is(:focus,:focus-visible){outline:2px solid Highlight!important;outline-offset:2px}}

/* Compact mailbox header and explicit Light, Dark, Auto appearance control. */
body[data-mailbox=true]>.topbar{justify-content:flex-start;gap:12px}
body[data-mailbox=true]>.topbar #connection{flex:0 1 auto;margin-left:clamp(4px,2vw,24px);white-space:nowrap}
body[data-mailbox=true]>.topbar #session-warning{max-width:18rem}
body[data-mailbox=true]>.topbar #open-all-search{display:inline-flex;align-items:center;justify-content:flex-start;flex:0 1 230px;width:230px;min-width:110px;margin-left:clamp(4px,2vw,24px);padding:5px 10px;border-radius:7px;background:var(--soft);color:var(--text);text-align:left;white-space:nowrap}
body[data-mailbox=true]>.topbar #open-settings{margin-left:auto;flex-shrink:0;white-space:nowrap}
.theme-switch{display:inline-flex;align-items:center;gap:3px;padding:3px;border-radius:10px;background:var(--soft);flex-shrink:0}
.mailspace .sidebar nav button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mailspace .sidebar nav button .folder-unread{flex:0 0 auto;margin-left:auto}
#settings-dialog .availability-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#settings-dialog .availability-lists>div{min-width:0;padding:12px;border-radius:8px;background:var(--soft)}
#settings-dialog .availability-lists h4{margin:0;font-size:13px}
#settings-dialog #plan-included,#settings-dialog #plan-unavailable{margin:6px 0 10px;padding-inline-start:22px;display:grid;gap:4px}
#settings-dialog #plan-included li::marker{color:var(--accent)}
#settings-dialog #plan-unavailable{color:var(--muted)}
#settings-dialog #plan-upgrade{display:inline-flex;width:auto;margin:6px 0;padding:7px 12px;min-height:34px;text-decoration:none}
#settings-dialog #plan-upgrade[hidden]{display:none}
@media(max-width:520px){#settings-dialog .availability-lists{grid-template-columns:1fr}}
#settings-dialog .rule-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:5px}
#settings-dialog .rule-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:6px;background:var(--soft);overflow-wrap:anywhere}
#settings-dialog .rule-list button{flex:0 0 auto;min-height:28px}
#settings-dialog .rule-list li{flex-wrap:wrap}
#settings-dialog .rule-list li>span{flex:1 1 100%}
#settings-dialog>.compose-heading{position:sticky;top:-28px;z-index:5;background:var(--surface);padding-block:12px;border-bottom:1px solid var(--line);direction:ltr}
#close-settings{margin-left:auto;flex:0 0 auto;align-self:flex-start;min-height:40px;background:var(--surface)}
#settings-dialog #rule-form{max-width:36rem}
#settings-dialog #rule-form button{width:auto;min-height:34px;padding:6px 12px}
.theme-switch button{border:0;border-radius:8px;background:transparent;color:var(--muted);min-height:30px;padding:3px 12px;font:inherit;font-size:12px;font-weight:600}
.theme-switch button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 4px #0002}
#settings-help-toggle{display:inline-flex;align-items:center;justify-content:flex-start;min-height:32px;margin-top:10px}
#all-search-dialog{width:min(560px,calc(100% - 28px));max-height:86dvh;overflow:auto;padding:20px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:12px}
#all-search-dialog::backdrop{background:#071a1580}
#all-search-dialog .compose-heading{gap:8px}
#all-search-dialog .compose-heading h2{font-size:20px}
#all-search-form{max-width:28rem}
#all-search-form #all-search-query{width:100%;max-width:28rem;min-height:36px;margin:5px 0 10px}
#all-search-form #all-search-submit{width:auto;min-width:9rem;min-height:36px;padding:6px 12px}
@media(max-width:700px){body[data-mailbox=true]>.topbar #connection{margin-left:0;max-width:100px;overflow:hidden;text-overflow:ellipsis}body[data-mailbox=true]>.topbar #open-all-search{margin-left:0;flex:0 0 40px;width:40px;min-width:40px;justify-content:center;padding:4px;font-size:0}body[data-mailbox=true]>.topbar #open-all-search .ui-icon{margin:0;width:18px;height:18px}.theme-switch button{padding-inline:8px}}
@media(max-width:420px){body[data-mailbox=true]>.topbar{gap:5px}body[data-mailbox=true] .brand{font-size:17px}body[data-mailbox=true]>.topbar #connection{max-width:66px;font-size:10px}body[data-mailbox=true]>.topbar #open-settings{font-size:11px}}
@media(forced-colors:active){.theme-switch button[aria-pressed=true]{outline:2px solid Highlight}body[data-mailbox=true]>.topbar #open-all-search{border:1px solid CanvasText}}

/* Selected quiet-classic reader and docked-classic composer. Keep the existing
   dialog and action handlers, including save, send, and uncertain-result gates. */
.mailspace>.mail-reader[data-unified-layout]{padding:14px 18px 20px}
.mail-reader[data-unified-layout] .reader-toolbar{margin:0 0 12px;padding:0 0 8px;background:transparent;border-bottom:1px solid var(--line)}
.mail-reader[data-unified-layout] .reader-sheet{padding:0;background:transparent;border-radius:0}
.mail-reader[data-unified-layout] #attachments{margin:10px 0 0;padding:10px 0;border-block:1px solid var(--line)}
#compose-dialog[data-compact-layout]{inset:auto 16px 0 auto;width:min(560px,calc(100vw - var(--mail-sidebar,220px) - 32px));height:min(510px,calc(100dvh - var(--mail-header,54px) - 12px));max-width:none;max-height:none;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;box-shadow:0 14px 40px #0004}
#compose-dialog[data-compact-layout] .compose-heading{padding-inline:14px;background:var(--soft)}
#compose-dialog[data-compact-layout] .compose-fields{width:100%;padding-inline:14px}
#compose-dialog[data-compact-layout] .compose-editor{padding:14px 18px}
#compose-dialog[data-compact-layout] .compose-footer{padding-inline:14px}
/* Reader permissions stay above the sandboxed email; approved images remain inline. */
.mail-reader[data-unified-layout] .reader-toolbar{margin-bottom:6px;padding-bottom:4px}
.mail-reader[data-unified-layout] h2{margin-bottom:2px}
.mail-reader[data-unified-layout] .reader-sender-line{margin-bottom:2px}
.mail-reader[data-unified-layout] .message-date{margin:0 0 4px;font-size:12px}
.mail-reader[data-unified-layout] .view-switch{margin:4px 0 2px}
.mail-reader[data-unified-layout] .message-frame{margin:6px 0}
.mail-reader[data-unified-layout] .reader-images-controls{margin:4px 0 6px}

/* The resize shortcut belongs to the message area, not the window controls. */
#compose-dialog .compose-editor-controls{display:flex;align-items:center;gap:10px;padding:5px 18px;border-bottom:1px solid var(--line);direction:ltr}
#compose-dialog .compose-editor-controls #expand-compose{width:auto;margin:0;min-height:32px;padding:4px 9px}
#compose-dialog .compose-editor-controls #compose-message-label{font-size:13px;font-weight:650;color:var(--muted)}
#compose-dialog .compose-editor-controls #ai-writing-toggle{width:auto;margin:0 0 0 auto;min-height:32px;padding:4px 10px}
#compose-dialog #ai-writing{margin:0;padding:12px 18px;border-inline:0;border-radius:0;flex-shrink:0;max-height:none;overflow:visible}
#compose-dialog #ai-writing label{display:block;margin:8px 0 4px}
#compose-dialog #ai-writing-instruction{display:block;box-sizing:border-box;width:100%;max-width:100%;height:76px;min-height:76px;margin:0 0 8px;line-height:1.45}
#compose-dialog #ai-writing-preview{max-height:none;overflow:visible}
#compose-dialog[data-compact-layout][open]:has(#ai-writing:not([hidden])){display:block;overflow-y:auto}
#compose-dialog[data-compact-layout][open]:has(#ai-writing:not([hidden])) .compose-fields{max-height:none;overflow:visible}
#compose-dialog[data-compact-layout][open]:has(#ai-writing:not([hidden])) .compose-editor{height:clamp(180px,30dvh,320px);min-height:180px}
.ai-tools{margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--text)}
.ai-tools h3{font-size:14px;margin:0 0 8px}
.ai-tools>summary{cursor:pointer;font-size:13px;font-weight:650}
.ai-tools label{font-size:12px;margin-inline:8px 4px}
.ai-tools button{width:auto;margin:4px;min-height:36px}
.ai-tools input{width:min(180px,100%);min-height:36px;margin:4px;padding:6px}
.ai-tools textarea{width:100%;min-height:64px;margin:4px 0 8px;padding:8px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:6px}
.ai-tools pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px;max-height:40dvh;overflow:auto}
.ai-tools p{font-size:12px;line-height:1.45}
#ai-reader{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;width:fit-content;max-width:100%;box-sizing:border-box;padding:8px 12px}
#ai-reader h3{margin:0;white-space:nowrap}
#ai-reader .ai-reader-controls,#ai-reader .ai-reader-translate{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
#ai-reader .ai-reader-controls{flex:0 1 auto}
#ai-reader .ai-reader-translate label{margin:0;white-space:nowrap}
#ai-reader .ai-reader-translate input{width:160px;max-width:min(160px,100%);min-height:34px;margin:0}
#ai-reader button{min-height:34px;margin:0;padding:5px 10px}
#ai-reader-status,#ai-reader-result{flex-basis:100%;margin:0}
#ai-reader-status:empty,#ai-reader-result[hidden]{display:none}
@media(max-width:640px){#ai-reader h3{flex-basis:100%}#ai-reader .ai-reader-controls{flex-basis:100%}#ai-reader .ai-reader-translate{flex-wrap:nowrap;max-width:100%}#ai-reader .ai-reader-translate label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#ai-reader .ai-reader-translate input{width:min(145px,100%);min-width:0}}
#ai-setup-dialog{width:min(440px,calc(100% - 24px));max-width:100%;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)}
#ai-setup-dialog::backdrop{background:#071a1580}
#ai-setup-dialog h2{margin:0 0 8px;font-size:20px}
#ai-setup-dialog p{margin:0 0 18px;line-height:1.5}
#ai-setup-dialog .ai-setup-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#ai-setup-dialog .ai-setup-actions button{width:auto;min-height:40px;margin:0;padding:8px 12px}
#ai-open-settings{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}
#ai-open-settings:focus-visible{outline:2px solid var(--text);outline-offset:2px}
#ai-settings input,#ai-settings select{width:100%;max-width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px}
#ai-settings input[type=password]{font-family:inherit}
#ai-search-help{font-size:12px;color:var(--muted)}
/* The docked composer grows upward and inward from its corner. Keep the editor
   visually distinct before focus and do not spend its height on repeated help. */
#compose-dialog[data-compact-layout]{width:min(var(--compose-docked-width,650px),calc(100vw - var(--mail-sidebar,220px) - 32px));height:min(var(--compose-docked-height,600px),calc(100dvh - var(--mail-header,54px) - 12px));z-index:40}
#compose-dialog[data-compact-layout] .compose-editor{min-height:180px;background:var(--bg);border-block:1px solid var(--line)}
#compose-dialog[data-compact-layout] .compose-footer{max-height:180px;overflow-y:auto}
#compose-dialog[data-compact-layout] .compose-live-notices{max-height:52px;overflow-y:auto}
#compose-dialog[data-compact-layout] .compose-live-notices [data-duplicate]{display:none}
#compose-dialog[data-compact-layout] .compose-resize-handle{position:absolute;z-index:4;inset-block-start:0;inset-inline-start:0;width:24px;height:24px;cursor:nwse-resize;touch-action:none;border-inline-start:3px solid var(--accent);border-block-start:3px solid var(--accent);border-start-start-radius:9px}
#compose-dialog[data-compact-layout] .compose-resize-handle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
html[dir=rtl] #compose-dialog[data-compact-layout] .compose-resize-handle{cursor:nesw-resize}
#compose-dialog[data-compact-layout][data-expanded=true] .compose-resize-handle{display:none}
/* Options are below the recipient fields, never trapped in a second footer scroll. */
#compose-dialog[data-compact-layout] .compose-options{flex-shrink:0;margin:0 14px;border-bottom:1px solid var(--line)}
#compose-dialog[data-compact-layout] .compose-tool-buttons{padding:7px 0}
#compose-dialog[data-compact-layout] .compose-options-body,#compose-dialog[data-compact-layout] .compose-help-body{max-height:none;overflow:visible;padding:8px 0 12px}
#compose-dialog[data-compact-layout] .compose-footer{max-height:none;overflow:visible}
#compose-dialog[data-compact-layout] .compose-live-notices{max-height:none;overflow:visible}
#compose-dialog[data-compact-layout][open]:is([data-tool-panel=draft],[data-tool-panel=help]) .compose-heading{position:sticky;top:0;z-index:5}
#compose-dialog[data-compact-layout] .compose-heading #expand-compose{order:-1;flex:0 0 auto;width:auto;margin:0;padding:4px 8px}
#compose-dialog[data-compact-layout] .compose-heading #compose-save-state{flex:1 1 auto;min-width:110px;margin-left:auto}
@media(max-height:650px){#compose-dialog[data-compact-layout][open]{overflow-y:auto}#compose-dialog[data-compact-layout] .compose-editor{min-height:160px;flex:0 0 35dvh}}
@media(max-width:700px){
  #compose-dialog[data-compact-layout]{inset:var(--mail-header,54px) 0 0 0;width:auto;height:auto;border:0;border-radius:0;box-shadow:none}
  #compose-dialog[data-compact-layout] .compose-resize-handle{display:none}
  #compose-dialog[data-compact-layout] .compose-footer{max-height:40dvh}
  .mailspace>.mail-reader[data-unified-layout]{padding:12px}
}
#compose-dialog[data-compact-layout] .compose-footer{max-height:none}
@media(forced-colors:active){#compose-dialog[data-compact-layout]{border:1px solid CanvasText}}

/* The first grid track follows document direction, so RTL puts navigation on the right. */
html[dir=rtl] .mailspace{direction:rtl}
html[dir=rtl] .mailspace>.sidebar{border-inline-end:1px solid var(--line)}
html[dir=rtl] .mailspace>.mail-content{border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] .mailspace .sidebar nav button,html[dir=rtl] .sidebar-scroll>.text-button{text-align:right}
html[dir=rtl] .message-row[aria-current]{box-shadow:inset -3px 0 var(--accent)}
html[dir=rtl] .mailspace .inbox-navigation .message-paging{margin-left:0;margin-right:auto}
html[dir=rtl] body[data-mailbox=true]>.topbar #connection,html[dir=rtl] body[data-mailbox=true]>.topbar #open-all-search{margin-left:0;margin-right:clamp(4px,2vw,24px)}
html[dir=rtl] body[data-mailbox=true]>.topbar #open-settings{margin-left:0;margin-right:auto}
html[dir=rtl] body[data-mailbox=true]>.topbar #open-all-search{text-align:right;justify-content:flex-start}
html[dir=rtl] #compose-dialog[data-compact-layout]{inset:auto auto 0 16px}
html[dir=rtl] #account-email,html[dir=rtl] #account-switcher,html[dir=rtl] #email,html[dir=rtl] #add-account-email,html[dir=rtl] #compose-to,html[dir=rtl] #compose-cc,html[dir=rtl] #compose-bcc,html[dir=rtl] #contact-address{direction:ltr;text-align:left;unicode-bidi:isolate}
html[dir=rtl] #message-body,html[dir=rtl] #compose-editor,html[dir=rtl] #compose-subject,html[dir=rtl] #message-subject{text-align:start;unicode-bidi:plaintext}
@media(max-width:700px){html[dir=rtl] #compose-dialog[data-compact-layout]{inset:var(--mail-header,54px) 0 0 0}}

/* Conversation view, recipient suggestions, undo send, shortcuts */
.thread-toggle{display:inline-grid;place-items:center;min-width:22px;min-height:22px;padding:0 6px;margin:0;border:1px solid var(--line);border-radius:11px;background:var(--soft);color:var(--text);font-size:11px;font-weight:650;line-height:1;vertical-align:middle}
.thread-toggle[aria-expanded=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.message-row.thread-member{padding-inline-start:40px;background:color-mix(in srgb,var(--surface) 92%,var(--soft))}
.message-row.thread-member::before{content:'↳';position:absolute;inset-inline-start:22px;color:var(--muted);font-size:12px}
.message-row{position:relative}
.conversation-nav{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:6px 0 10px}
.conversation-nav .reading-note{border:0;padding:0;margin:0;flex-basis:100%}
.conversation-link{padding:4px 0;font-size:12px;overflow-wrap:anywhere;text-align:start}
.recipient-suggestions{list-style:none;margin:-12px 0 14px;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--surface);box-shadow:0 10px 30px #0000001f;max-height:240px;overflow:auto}
.recipient-suggestions li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px}
.recipient-suggestions li[aria-selected=true],.recipient-suggestions li:hover{background:var(--soft)}
.recipient-suggestions small{color:var(--muted);font-size:11px}
#undo-send{width:auto;margin:0}
.shortcut-list{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:16px 0 20px;font-size:13px}
.shortcut-list dt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:2px 8px;justify-self:start}
.shortcut-list dd{margin:0;align-self:center}
#shortcut-dialog{max-width:440px;border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--surface);color:var(--text)}

/* Formatted (HTML) message view */
.view-switch{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:12px 0 0}
.view-switch button[aria-pressed=true]{font-weight:700;text-decoration:underline}
.message-frame{display:block;width:100%;min-height:360px;height:70vh;border:1px solid var(--line);border-radius:10px;background:#fff;margin:16px 0}
/* Drag and drop: rows are draggable; a folder under the pointer is outlined. */
.message-row[draggable=true]{cursor:grab}
body[data-dragging] .message-row{cursor:grabbing}
#folders button.drop-target{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--soft)}
/* Print: only the open message. Plain text is printed even when the
   formatted view is showing. */
@media print{
  body[data-printing=message] .sidebar,body[data-printing=message] .mail-content,body[data-printing=message] .topbar,body[data-printing=message] #welcome,body[data-printing=message] dialog,body[data-printing=message] #session-warning,body[data-printing=message] .reader-actions,body[data-printing=message] .reading-note,body[data-printing=message] .view-switch,body[data-printing=message] #message-frame,body[data-printing=message] #message-html-form,body[data-printing=message] #back-messages,body[data-printing=message] .eyebrow,body[data-printing=message] .contact-shortcuts,body[data-printing=message] .conversation-nav,body[data-printing=message] .reader-images-controls,body[data-printing=message] #attachments{display:none !important}
  body[data-printing=message]{background:#fff;color:#000}
  body[data-printing=message] .mailspace{display:block}
  body[data-printing=message] #reader{display:block !important;padding:0;max-width:none}
  body[data-printing=message] #message-body[hidden]{display:block !important}
  body[data-printing=message] #message-body{padding:16px 0;line-height:1.6;font-size:12pt}
  body[data-printing=message] #message-subject{font-size:18pt}
  body[data-printing=message] a::after{content:' (' attr(href) ')';font-size:9pt;color:#444}
}
.sort-control{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:6px 0}
.sort-control select{font-size:12px;padding:4px 8px}
.unified-inbox{margin:10px 0 4px;width:100%}
.unified-inbox[aria-current]{background:var(--soft);box-shadow:inset 3px 0 var(--accent)}
.row-account{color:var(--accent);font-weight:600}
.attachment-row{flex-wrap:wrap}.attachment-preview{flex-basis:100%;margin-top:8px;display:grid;gap:6px}.attachment-row .attachment-preview{flex:1 1 100%}
.attachment-preview img{max-width:100%;max-height:480px;object-fit:contain;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
.attachment-preview pre{max-height:360px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
/* Touch swipe: the row shows the pending action while the finger moves. */
.message-row{touch-action:pan-y;position:relative}
.message-row[data-swipe=archive]{background:var(--soft);box-shadow:inset 6px 0 var(--accent)}
.message-row[data-swipe=trash]{background:var(--soft);box-shadow:inset -6px 0 #b4463d}
.message-row[data-swipe=archive]::after,.message-row[data-swipe=trash]::after{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;padding:4px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent)}
.message-row[data-swipe=archive]::after{content:'Archive';inset-inline-start:12px}
.message-row[data-swipe=trash]::after{content:'Trash';inset-inline-end:12px;background:#b4463d;color:#fff}
.template-insert{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.template-insert select{flex:1 1 200px}
#template-list li{display:grid;grid-template-columns:1fr auto auto;gap:6px 10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
#template-list li small{grid-column:1/-1;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.contact-group-chip{display:inline-block;margin-inline-start:8px;padding:1px 8px;border-radius:999px;background:var(--soft);color:var(--accent);font-size:11px;font-weight:600}
.contact-import-label{cursor:pointer}
.snooze-presets{flex-wrap:wrap}
#snoozed-list li{display:grid;grid-template-columns:1fr auto auto;gap:4px 10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
#snoozed-list li small{grid-column:1/-1;color:var(--muted)}
/* Expanded compose keeps the same editor and draft controls, in either direction. */
html #compose-dialog[data-compact-layout][data-expanded="true"],
html[dir=rtl] #compose-dialog[data-compact-layout][data-expanded="true"] {
  inset: 12px; margin: 0; width: calc(100vw - 24px);
  height: calc(100dvh - 24px); max-width: none; max-height: none;
  border: 1px solid var(--line); border-radius: 10px;
}
/* Search never changes the capability-controlled hidden state of a section. */
#settings-dialog .settings-section[data-settings-filtered="true"] { display:none !important; }
#settings-dialog .settings-search { margin-block: 12px 20px; }
#settings-dialog .settings-search input { width:100%; }

/* Task directory keeps search and Close visible while one settings group scrolls. */
#settings-dialog{width:min(980px,calc(100% - 28px));height:min(780px,90dvh);max-height:90dvh;padding:0;display:none;flex-direction:column;overflow:hidden}
#settings-dialog[open]{display:flex}
#settings-dialog>.compose-heading{position:relative;top:auto;flex:0 0 auto;margin:0;padding:16px 22px}
#settings-dialog>.settings-search{flex:0 0 auto;margin:0;padding:12px 22px;border-bottom:1px solid var(--line)}
#settings-dialog .settings-search label{margin:0 0 4px}
#settings-dialog .settings-search input{margin:0;max-width:none}
#settings-dialog #settings-search-status{margin:3px 0 0;min-height:1.2em;font-size:12px}
#settings-task-workspace{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);flex:1 1 auto;min-height:0;direction:inherit}
#settings-task-nav{overflow:auto;padding:12px;border-inline-end:1px solid var(--line);background:var(--soft);display:flex;flex-direction:column;gap:4px}
#settings-task-nav .settings-task-link{display:block;width:100%;padding:10px 12px;min-height:54px;text-align:start;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text);font:inherit}
#settings-task-nav .settings-task-link strong{display:block;font-size:13px}
#settings-task-nav .settings-task-link small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35}
#settings-task-nav .settings-task-link[aria-current=page]{background:var(--surface);border-color:var(--line)}
#settings-task-nav .settings-task-link[hidden]{display:none}
#settings-task-content{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px 26px}
#settings-task-title{margin:0;font-size:20px}
#settings-task-hint{margin:4px 0 15px;color:var(--muted);font-size:13px}
#settings-dialog .settings-section[data-settings-active=false]{display:none!important}
#settings-dialog .settings-section[hidden]{display:none!important}
#settings-task-content .settings-section{margin-top:0}
@media(max-width:640px){
  #settings-dialog{width:calc(100% - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}
  #settings-dialog>.compose-heading{padding:12px 14px}
  #settings-dialog>.settings-search{padding:8px 14px}
  #settings-task-workspace{display:flex;flex-direction:column}
  #settings-task-nav{flex:0 0 auto;max-height:156px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-inline-end:0;border-bottom:1px solid var(--line);padding:8px;gap:4px}
  #settings-task-nav .settings-task-link{min-height:44px;padding:7px 8px}
  #settings-task-nav .settings-task-link small{display:none}
  #settings-task-content{padding:16px}
}