/* Mail V2: Figma Midnight Navy/Purple inbox system, scoped to the Mail route. */
.mail-page{--mail-bg:#080b18;--mail-panel:#0e1224;--mail-panel-raised:#121831;--mail-border:#1c2244;--mail-text:#e8eeff;--mail-muted:#96a0c0;--mail-purple:#7b5eea;--mail-cyan:#22d3ee;max-width:none;min-width:0;color:var(--mail-text)}
.mail-page .mail-page-heading{align-items:center;margin:0 0 14px}.mail-page .mail-page-heading h1{font-size:clamp(28px,2.3vw,36px);letter-spacing:-.035em}.mail-page .mail-page-heading p{color:var(--mail-muted);font-size:13px}.mail-page .mail-page-heading .eyebrow{color:#a995ff;letter-spacing:.16em}.mail-add-account{min-height:44px;padding-inline:17px;border:1px solid rgba(123,94,234,.5);border-radius:12px;background:linear-gradient(135deg,#7657e5,#5341bb);box-shadow:0 8px 24px rgba(72,53,170,.22);font-size:12px;font-weight:700}.mail-add-account:hover{filter:brightness(1.12)}
.mail-workspace{position:relative;display:grid;grid-template-columns:minmax(205px,245px) minmax(320px,.94fr) minmax(390px,1.3fr);gap:12px;width:100%;height:calc(100dvh - 198px);min-height:460px;max-height:980px;overflow:hidden}.mail-workspace>.card{min-width:0;height:100%;padding:0;overflow:hidden;border:1px solid var(--mail-border);border-radius:14px;background:linear-gradient(180deg,#0e1224,#0b1020);box-shadow:0 16px 42px rgba(2,5,18,.24)}
.mail-rail,.mail-list-panel,.mail-reader{display:flex;flex-direction:column;min-height:0}.mail-rail{overflow:auto;background:linear-gradient(180deg,#0f1428,#0a0f20)}.mail-rail-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:17px 15px 13px;border-bottom:1px solid var(--mail-border)}.mail-rail-head .eyebrow{display:block;margin:0 0 5px;color:#9a8be8;font-size:9px;letter-spacing:.15em}.mail-rail-head strong{display:block;font-size:15px;letter-spacing:-.01em}.mail-rail-section{padding:12px 10px;border-bottom:1px solid rgba(140,160,220,.08)}.mail-rail-label{display:block;padding:0 8px 7px;color:#7682a8;font-size:9px;letter-spacing:.13em;text-transform:uppercase}.mail-rail-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:42px;margin:2px 0;padding:7px 9px;border:1px solid transparent;border-radius:9px;color:#a6afca;text-align:left;font-size:11px}.mail-rail-item>span{display:flex;align-items:center;gap:8px;min-width:0}.mail-rail-item>span svg{width:16px;height:16px}.mail-rail-item small{flex:0 0 auto;color:#7480a2;font:10px var(--font-data)}.mail-rail-item:hover,.mail-rail-item:focus-visible{color:var(--mail-text);background:rgba(111,92,205,.12);outline:0}.mail-rail-item.active{color:white;border-color:rgba(123,94,234,.27);background:linear-gradient(90deg,rgba(123,94,234,.2),rgba(34,211,238,.045));box-shadow:inset 2px 0 #9c80ff}.mail-rail-section-heading{display:flex;align-items:center;justify-content:space-between}.mail-rail-section-heading .mail-rail-label{padding-bottom:6px}.mail-add-small,.mail-account-menu,.mail-drawer-close,.mail-icon-button{display:inline-grid;place-items:center;flex:0 0 auto;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border:1px solid transparent;border-radius:9px;color:#abb5d4}.mail-add-small svg,.mail-account-menu svg,.mail-drawer-close svg,.mail-icon-button svg{width:17px;height:17px}.mail-add-small:hover,.mail-account-menu:hover,.mail-drawer-close:hover,.mail-icon-button:hover{border-color:rgba(123,94,234,.25);background:rgba(123,94,234,.14);color:white}.mail-account-entry{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:2px}.mail-account-select{min-height:55px;margin:2px 0}.mail-account-label{display:grid!important;grid-template-columns:1fr;gap:3px!important;overflow:hidden}.mail-account-provider{display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e4e9fb;font-size:11px;font-weight:650}.mail-account-provider svg{width:14px!important;height:14px!important}.mail-account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8f9ab9;font-size:10px}.mail-account-status{display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin-top:2px;color:#67d9b2;font-size:9px}.mail-account-status:before{width:6px;height:6px;border-radius:50%;background:currentColor;content:""}.mail-account-status.attention{color:#f0ba71}.mail-account-status.syncing{color:#69d9ed}.mail-account-status.paused{color:#8d96b1}.mail-account-menu{width:38px;height:38px;min-width:38px;min-height:38px;color:#7883a3}.mail-rail-foot{display:flex;align-items:center;gap:7px;margin-top:auto;padding:12px 14px;color:#818cab;font-size:10px}.mail-rail-foot svg{width:14px;height:14px;color:#6ddab5}
.mail-list-panel{background:linear-gradient(180deg,#10152a,#0c1122)!important}.mail-list-head{padding:12px 13px 9px;border-bottom:1px solid var(--mail-border)}.mail-list-topline{display:grid;grid-template-columns:auto minmax(0,1fr) 42px;align-items:center;gap:8px}[data-mail-drawer-open]{display:none;min-height:42px;padding:6px 9px;border:1px solid var(--mail-border);border-radius:9px;color:#bbc5e1;font-size:10px;white-space:nowrap}[data-mail-drawer-open] svg{width:15px;height:15px}.mail-search{display:flex;align-items:center;gap:8px;width:100%;height:42px;padding:0 11px;border:1px solid #242b4a;border-radius:10px;background:#0a0e1d}.mail-search svg{width:17px;height:17px;color:#7884a7}.mail-search input{width:100%;min-width:0;height:40px;padding:0;border:0;outline:0;background:transparent;color:var(--mail-text);font-size:11px}.mail-search input::placeholder{color:#737f9f}.mail-sync-all{width:42px;height:42px;min-width:42px;min-height:42px;border:1px solid #252c4b;border-radius:10px;color:#bbc5e1;background:#11172c}.mail-sync-all:hover{border-color:#6250bd;color:white}.mail-sync-all svg{width:16px;height:16px}.mail-filter-row{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow-x:auto;margin-top:9px;padding-bottom:2px;scrollbar-width:thin}.mail-filter-label,.mail-provider-filter-label{flex:0 0 auto;color:#7782a1;font-size:9px;letter-spacing:.08em;text-transform:uppercase}.mail-provider-filter-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.mail-filter-row select{flex:0 0 auto;max-width:130px;min-height:32px;padding:4px 22px 4px 8px;border:1px solid #252c4b;border-radius:8px;background:#11172c;color:#b9c4e1;font-size:9px}.mail-filter-chip{flex:0 0 auto;min-height:32px;padding:5px 9px;border:1px solid #242b49;border-radius:8px;background:#10162a;color:#98a3c1;font-size:9px}.mail-filter-chip:hover,.mail-filter-chip:focus-visible{border-color:#6553bd;color:white;outline:0}.mail-filter-chip.active{border-color:rgba(123,94,234,.5);background:rgba(123,94,234,.18);color:#e8e1ff}.mail-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}.mail-list-caption{overflow:hidden;color:#e0e6fa;font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.mail-list-toolbar .hint{margin:0;color:#7782a1;font-size:9px}.mail-list{flex:1;min-height:0;overflow:auto;padding:5px 7px;overscroll-behavior:contain}.mail-row{display:grid;grid-template-columns:7px minmax(0,1fr) 7px;gap:9px;align-items:start;margin:0;padding:13px 10px;border:1px solid transparent;border-bottom-color:rgba(140,160,220,.09);border-radius:9px;background:transparent;cursor:pointer}.mail-row:hover,.mail-row:focus-visible{background:#141a31;outline:2px solid rgba(123,94,234,.48);outline-offset:-2px}.mail-row.selected{border-color:rgba(123,94,234,.42);background:linear-gradient(100deg,rgba(123,94,234,.16),rgba(34,211,238,.035));box-shadow:inset 2px 0 #9c80ff}.mail-row.handled{opacity:.72}.mail-provider-dot{width:7px;height:7px;margin-top:5px;border-radius:50%;background:#9e85ff}.provider-google{background:#4e98f4}.provider-microsoft{background:#35b6df}.provider-icloud{background:#a594ff}.mail-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:7px;min-width:0}.mail-row-top strong{overflow:hidden;color:#e8eeff;font-size:11px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.mail-account{flex:0 1 auto;overflow:hidden;color:#8691b2;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.mail-subject{overflow:hidden;margin-top:4px;color:#d5dcf2;font-size:11px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.mail-snippet{overflow:hidden;margin-top:4px;color:#8894b2;font-size:10px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}.mail-row-meta{display:flex;align-items:center;gap:6px;margin-top:7px}.mail-row-meta time{margin-left:auto;color:#7682a0;font-size:9px}.mail-signal{max-width:20ch;padding:2px 6px;border:1px solid rgba(240,186,113,.2);border-radius:99px;background:rgba(240,186,113,.09);color:#e9bb78;font-size:8px}.handled-signal{border-color:rgba(103,217,178,.2);background:rgba(103,217,178,.08);color:#67d9b2}.mail-unread-dot{width:7px;height:7px;margin-top:5px;border-radius:50%;background:#25c6e5;box-shadow:0 0 8px rgba(34,211,238,.65)}.mail-list-footer{display:flex;align-items:center;justify-content:center;min-height:52px;padding:6px 10px;border-top:1px solid rgba(140,160,220,.08);color:#7984a3}.mail-load-more{min-height:40px;padding:7px 13px;border:1px solid #2b3152;border-radius:9px;color:#c1cafa;font-size:10px}.mail-caught-up{font-size:9px}
.mail-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:100%;padding:30px 22px;text-align:center;color:#a1accb}.mail-empty-state>svg{width:32px;height:32px;color:#a18aff}.mail-empty-state strong{color:#eef1ff;font-size:14px}.mail-empty-state p{max-width:32ch;margin:0;color:#929ebd;font-size:11px;line-height:1.6}.mail-empty-state .button{margin-top:4px;min-height:44px;font-size:11px}.mail-reader{position:relative;background:linear-gradient(180deg,#10162b,#0b1020)!important}.mail-reader-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:64px;padding:10px 15px;border-bottom:1px solid rgba(140,160,220,.1);background:#11172b}.mail-reader-head-label .eyebrow{display:block;margin:0 0 4px;color:#9886ed;font-size:8px;letter-spacing:.14em}.mail-reader-head-label strong{display:block;overflow:hidden;color:#b4bfdc;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.mail-reader-close{display:none;align-items:center;gap:6px;min-height:42px;padding:7px 9px;border:1px solid #29304e;border-radius:8px;color:#c4cbe0;font-size:10px}.mail-reader-close svg{width:15px;height:15px}.mail-reader-nav{display:flex;gap:4px}.mail-icon-button:disabled{opacity:.35}.mail-reader-content{flex:1;min-height:0;overflow:auto;padding:19px 22px;overscroll-behavior:contain}.mail-reader-title-line{display:flex;align-items:center;justify-content:space-between;gap:9px}.mail-reader-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px}.mail-provider-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid #292f50;border-radius:99px;background:#151b33;color:#c6cceb;font-size:9px}.mail-provider-chip svg{width:13px;height:13px}.mail-reader-content h2{margin:2px 0 14px;color:#f0f2ff;font-size:clamp(18px,1.5vw,24px);line-height:1.3;overflow-wrap:anywhere}.mail-reader-from{display:flex;align-items:center;gap:10px;padding:0 0 14px;border-bottom:1px solid rgba(140,160,220,.11)}.mail-reader-avatar{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(144,121,245,.26);border-radius:11px;background:linear-gradient(140deg,#332967,#172744);color:#e5ddff;font-size:13px;font-weight:700}.mail-reader-from>div{min-width:0}.mail-reader-from strong,.mail-reader-from small{display:block;overflow-wrap:anywhere}.mail-reader-from strong{color:#e3e8fa;font-size:11px}.mail-reader-from small{margin-top:3px;color:#8a95b5;font-size:9px;line-height:1.5}.mail-reader-content .message-body{max-height:none;margin:17px 0 0;padding:0;border:0;background:transparent;color:#d3dbf0;font-size:12px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}.mail-reader-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid rgba(140,160,220,.08)}.mail-reader-actions .button{min-height:42px;padding:7px 10px;border:1px solid #29304f;border-radius:9px;background:#151b31;color:#cbd3ea;font-size:10px}.mail-reader-actions .button:hover{border-color:#6755bf;color:white}.mail-reader-actions .button svg{width:15px;height:15px}.mail-reader-foot{display:flex;align-items:center;gap:7px;padding:9px 15px;border-top:1px solid rgba(140,160,220,.08);color:#8190ad;font-size:9px}.mail-reader-foot svg{width:13px;height:13px;color:#69d4b0}.mail-reader-empty{display:grid;place-content:center;justify-items:center;gap:9px;min-height:100%;padding:25px;text-align:center;color:#a0abc9}.mail-reader-empty>svg{width:32px;height:32px;color:#9c85ff}.mail-reader-empty strong{color:#eaf0ff;font-size:13px}.mail-reader-empty p{max-width:34ch;margin:0;color:#929dbc;font-size:10px;line-height:1.6}.mail-drawer-close,.mail-drawer-scrim,[data-mail-drawer-open]{display:none}.mail-page button:focus-visible,.mail-page a:focus-visible,.mail-page select:focus-visible,.mail-page input:focus-visible{outline:2px solid #9b82ff;outline-offset:2px}
.mail-connect-options,.mail-account-actions,.mail-message-menu{display:grid;gap:8px;margin-top:13px}.mail-connect-option{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;width:100%;min-height:66px;padding:10px 12px;border:1px solid #292e50;border-radius:11px;background:#10162a;text-align:left}.mail-connect-option:not(:disabled):hover{border-color:#6555ba;background:#171c36}.mail-connect-option:disabled{cursor:not-allowed;opacity:.57}.mail-connect-icon{display:grid;place-items:center;width:39px;height:39px;border:1px solid #343050;border-radius:10px;background:#1a1934;color:#b5a5ff}.mail-connect-icon svg{width:18px;height:18px}.mail-connect-option strong,.mail-connect-option small{display:block}.mail-connect-option strong{color:#e8edff;font-size:11px}.mail-connect-option small{margin-top:4px;color:#8792b2;font-size:9px}.mail-connect-action{color:#bbaeff;font-size:10px;font-weight:650}.mail-coming-later{display:grid;gap:4px;margin-top:13px;padding:12px;border:1px dashed #303654;border-radius:10px;color:#a5afca}.mail-coming-later strong{font-size:10px}.mail-coming-later span{font-size:9px}.mail-account-detail{display:grid;gap:7px;margin:12px 0;padding:13px;border:1px solid #292f4d;border-radius:10px;background:#10162a}.mail-account-detail>strong{font-size:11px;overflow-wrap:anywhere}.mail-account-detail>small{color:#8c97b5;font-size:9px}.mail-account-warning{display:flex;align-items:flex-start;gap:7px;margin:2px 0 0;color:#efbc7e;font-size:10px}.mail-account-warning svg{width:15px;height:15px}.mail-account-actions .button,.mail-disconnect-confirm .button,.mail-message-menu .button{justify-content:flex-start;min-height:44px;padding:8px 12px;border:1px solid #2a3151;border-radius:9px;background:#131a30;color:#d1d9ef;font-size:10px}.mail-account-actions .button:hover,.mail-message-menu .button:hover{border-color:#6858bd;background:#191f39}.mail-account-actions .button.danger,.mail-disconnect-confirm .button.danger{border-color:rgba(236,108,130,.24);color:#f2a5b2}.mail-disconnect-confirm{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.mail-disconnect-confirm>strong,.mail-disconnect-confirm>p{grid-column:1/-1}.mail-disconnect-confirm>strong{font-size:13px}.mail-disconnect-confirm>p,.mail-message-local-note{margin:0 0 5px;color:#929dbc;font-size:10px;line-height:1.55}.mail-v2-dialog{width:min(520px,calc(100vw - 28px));max-width:none;max-height:min(88dvh,760px);padding:22px;border:1px solid #2b3153;border-radius:18px;background:linear-gradient(160deg,#12172b,#0c1121);color:#e8eeff;box-shadow:0 25px 80px rgba(0,0,0,.58)}.mail-v2-dialog::backdrop{background:rgba(3,5,14,.72);backdrop-filter:blur(5px)}.mail-v2-dialog .dialog-heading{align-items:flex-start;gap:12px}.mail-v2-dialog .dialog-heading h2{margin:3px 0 0;color:#f0f2ff;font-size:19px;overflow-wrap:anywhere}.mail-v2-dialog .dialog-heading .eyebrow{display:block;margin:0;color:#9a88f0;font-size:9px;letter-spacing:.14em}.mail-v2-dialog>.hint{margin:4px 0 12px;color:#9da8c7;font-size:11px}.mail-v2-dialog label{color:#dce3f8;font-size:11px}.mail-v2-dialog input{background:#11172b;color:#eff2ff}.mail-v2-dialog .form-error{font-size:10px}
@media(min-width:1024px){.mail-page .mail-workspace{grid-template-columns:minmax(205px,245px) minmax(340px,.94fr) minmax(390px,1.3fr)}.mail-drawer-scrim{display:none!important}}
@media(min-width:768px) and (max-width:1023px){.mail-page .mail-page-heading{margin-bottom:11px}.mail-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:calc(100dvh - 190px);min-height:440px}.mail-workspace[data-reader-open="false"] .mail-list-panel,.mail-workspace[data-reader-open="false"] .mail-reader{display:flex}.mail-rail{position:absolute;z-index:12;top:0;bottom:0;left:0;display:flex;width:min(310px,78vw);height:100%;transform:translateX(calc(-100% - 8px));transition:transform .18s ease;box-shadow:18px 0 50px rgba(0,0,0,.48)}.mail-workspace.mail-drawer-open .mail-rail{transform:translateX(0)}.mail-workspace.mail-drawer-open .mail-drawer-scrim{position:absolute;z-index:11;inset:0;display:block;width:100%;height:100%;min-height:100%;border-radius:14px;background:rgba(3,5,15,.62)}.mail-drawer-close{display:inline-grid}[data-mail-drawer-open]{display:inline-flex}.mail-reader{display:flex}.mail-reader-close{display:none}.mail-list-head{padding:10px}.mail-filter-chip{padding-inline:7px}}
.mail-coming-later{gap:9px;margin-top:18px;padding:14px 0 0;border:0;border-top:1px solid rgba(140,160,220,.14);border-radius:0;background:transparent}.mail-coming-later h3{margin:0;color:#919bbc;font-size:9px;font-weight:700;letter-spacing:.12em}.mail-future-providers{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mail-future-provider{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:46px;padding:8px 10px;border:1px solid rgba(140,160,220,.09);border-radius:9px;background:rgba(18,24,44,.48);opacity:.68}.mail-future-provider strong{color:#a4aec9;font-size:10px;font-weight:550}.mail-future-provider span{flex:0 0 auto;color:#7884a3;font-size:9px}@media(max-width:480px){.mail-future-providers{grid-template-columns:1fr}.mail-future-provider{min-height:42px}}
@media(max-width:767px){.mail-page .mail-page-heading{align-items:center;flex-direction:row;gap:8px;margin:0 0 10px}.mail-page .mail-page-heading h1{margin-bottom:3px;font-size:25px}.mail-page .mail-page-heading p{max-width:34ch;font-size:10px}.mail-page .mail-page-heading .eyebrow{font-size:8px}.mail-add-account{flex:0 0 auto;min-height:44px;padding:7px 10px;font-size:0}.mail-add-account svg{width:17px;height:17px}.mail-workspace{display:grid;grid-template-columns:minmax(0,1fr);height:calc(100dvh - 176px);min-height:440px;max-height:none;overflow:hidden}.mail-workspace>.mail-rail{position:absolute;z-index:12;top:0;bottom:0;left:0;display:flex;width:min(310px,calc(100vw - 64px));height:100%;transform:translateX(calc(-100% - 8px));transition:transform .18s ease;box-shadow:18px 0 50px rgba(0,0,0,.48)}.mail-workspace.mail-drawer-open>.mail-rail{transform:translateX(0)}.mail-workspace.mail-drawer-open .mail-drawer-scrim{position:absolute;z-index:11;inset:0;display:block;width:100%;height:100%;min-height:100%;border-radius:14px;background:rgba(3,5,15,.65)}.mail-drawer-close,[data-mail-drawer-open]{display:inline-flex}.mail-list-panel{grid-column:1;grid-row:1;min-height:0;height:100%}.mail-workspace[data-reader-open="false"] .mail-list-panel{display:flex}.mail-workspace[data-reader-open="true"] .mail-list-panel{display:none}.mail-reader{display:none;grid-column:1;grid-row:1;min-height:0;height:100%}.mail-workspace[data-reader-open="false"] .mail-reader{display:none}.mail-workspace[data-reader-open="true"] .mail-reader{display:flex}.mail-reader-head{grid-template-columns:auto minmax(0,1fr) auto;min-height:57px;padding:7px 9px}.mail-reader-close{display:inline-flex}.mail-reader-head-label .eyebrow{font-size:7px}.mail-reader-head-label strong{max-width:24ch;font-size:9px}.mail-reader-content{padding:14px 14px}.mail-reader-content h2{font-size:19px}.mail-reader-actions{display:grid;grid-template-columns:1fr 1fr;padding:8px}.mail-reader-actions .button{justify-content:center;min-height:44px;padding:6px;font-size:9px}.mail-reader-actions .button:last-child:nth-child(3){grid-column:1/-1}.mail-reader-foot{padding:8px 10px}.mail-list-head{padding:9px}.mail-list-topline{grid-template-columns:auto minmax(0,1fr) 40px;gap:5px}[data-mail-drawer-open]{min-width:42px;width:42px;padding:0;justify-content:center;font-size:0}[data-mail-drawer-open] svg{width:17px;height:17px}.mail-search{height:40px;padding-inline:8px}.mail-search input{font-size:10px}.mail-sync-all{width:40px;height:40px;min-width:40px;min-height:40px}.mail-filter-row{gap:4px;margin-top:7px}.mail-filter-label{font-size:8px}.mail-provider-filter-label{display:none}.mail-filter-row select{max-width:100px;min-height:31px;padding-inline:6px 16px;font-size:8px}.mail-filter-chip{min-height:31px;padding-inline:7px;font-size:8px}.mail-list-toolbar{margin-top:7px}.mail-list-caption{font-size:10px}.mail-list-toolbar .hint{font-size:8px}.mail-list{padding:3px 5px}.mail-row{gap:7px;padding:11px 7px}.mail-row-top strong,.mail-subject{font-size:10px}.mail-account{max-width:13ch;font-size:8px}.mail-snippet{font-size:9px}.mail-row-meta{margin-top:5px}.mail-row-meta time{font-size:8px}.mail-empty-state{padding:20px 16px}.mail-v2-dialog{padding:17px}.mail-connect-option{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding:9px}.mail-connect-icon{width:36px;height:36px}.mail-connect-option strong{font-size:10px}.mail-connect-option small,.mail-connect-action{font-size:8px}}
@media(max-width:359px){.mail-page .mail-page-heading p{max-width:28ch}.mail-workspace{height:calc(100dvh - 170px)}.mail-filter-label{display:none}.mail-filter-row select{max-width:89px}.mail-filter-chip{padding-inline:6px}.mail-row-top{display:block}.mail-account{display:none}.mail-reader-actions{grid-template-columns:1fr}.mail-reader-actions .button:last-child:nth-child(3){grid-column:auto}.mail-reader-head-label strong{max-width:17ch}}

/* Responsive V3 C4: let compact Mail controls wrap and preserve a usable pane above the phone keyboard. */
.mail-filter-toggle{display:none}
@media(max-width:1279px){
  /* Trigger-button styles are scoped by data attribute so the workspace state class stays a full-width grid. */
  .mail-filter-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:7px;border:1px solid #252c4b;border-radius:9px;background:#11172c;color:#bbc5e1;font-size:10px}
  .mail-workspace>.mail-rail{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  .mail-filter-toggle svg{width:16px;height:16px}
  .mail-filter-row{display:none;flex-wrap:wrap;overflow:visible;row-gap:6px}
  .mail-filter-row.is-open{display:flex}
  .mail-filter-label{width:100%;margin-top:1px}
  .mail-filter-row select{flex:1 1 100%;max-width:none;min-height:44px;padding-inline:10px;font-size:10px}
  .mail-filter-chip{flex:1 1 calc(50% - 8px);min-height:44px;justify-content:center;padding-inline:8px;font-size:10px}
  [data-mail-drawer-open],.mail-sync-all,.mail-account-menu,.mail-drawer-close,.mail-icon-button,.mail-reader-close{min-width:44px;min-height:44px}
  .mail-sync-all{width:44px;height:44px}
  .mail-search{height:44px}
  .mail-search input{height:42px;font-size:12px}
  .mail-account-entry{grid-template-columns:minmax(0,1fr) 44px}
  .mail-account-menu{width:44px;height:44px}
  .mail-reader-actions .button{min-height:44px}
  .mail-load-more{min-height:44px}
}
@media(max-width:767px){
  .mail-workspace{height:calc(100dvh - 190px);min-height:280px}
  .mail-filter-row{column-gap:6px}
  .mail-filter-chip{flex-basis:calc(50% - 6px)}
  .mail-row-top strong{font-size:11px}
  .mail-subject{font-size:12px}
  .mail-snippet{font-size:10px}
  .mail-add-account{width:44px;height:44px;min-width:44px;padding:0}
}
/* Desktop Mail is a viewport-filling workspace; its columns own their scrolling, not the page. */
@media(min-width:1024px){
  .shell:has(.mail-page){height:100dvh;min-height:0;overflow:hidden}
  .shell:has(.mail-page)>.workspace{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
  .shell:has(.mail-page)>.workspace>.topbar{flex:0 0 72px}
  .shell:has(.mail-page) .content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;max-width:none;width:100%;margin:0;padding:16px 24px 0;overflow:hidden}
  .shell:has(.mail-page) .content>.footer{display:none}
  .shell:has(.mail-page) .mail-page{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;max-width:none;margin:0}
  .shell:has(.mail-page) .mail-page-heading{flex:0 0 auto}
  .shell:has(.mail-page) .mail-workspace{flex:1 1 auto;height:auto;min-height:0;max-height:none}
  .shell:has(.mail-page) .mail-workspace>.card{height:100%;min-height:0}
  .shell:has(.mail-page) .mail-workspace>.mail-rail{overflow:auto}
  .shell:has(.mail-page) .mail-workspace[data-reader-open] .mail-list-panel{display:flex}
  .shell:has(.mail-page) .mail-workspace[data-reader-open] .mail-reader{display:flex;grid-column:auto}
  .shell:has(.mail-page) .mail-workspace .mail-reader-close{display:none}
}
/* Mail search is flex-based. The shared .search-field icon positioning overlaps the placeholder. */
@media(max-width:767px){
  .mail-search.search-field>svg{position:static;flex:0 0 17px}
  .mail-empty-state{min-height:0;padding:16px 12px;gap:7px}
  .mail-empty-state>svg{width:25px;height:25px}
  .mail-empty-state strong{font-size:13px}
  .mail-empty-state p{font-size:11px;line-height:1.45}
}