.mail-toolbar { display:flex; gap:10px; margin-bottom:12px; align-items:center; }
.mail-toolbar .search-bar { flex:1; max-width:none; }
.mail-folders-toggle { flex:0 0 auto; display:inline-grid; width:34px; height:34px; padding:0; place-items:center; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text-sec); cursor:pointer; }
.mail-folders-toggle:hover { border-color:var(--border-focus); color:var(--primary); background:var(--primary-light); }
.mail-folders-toggle:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.mail-folders-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mail-folders-toggle-arrow { transform-origin:center; transition:transform .16s ease; }
.mail-folders-toggle[aria-expanded='false'] .mail-folders-toggle-arrow { transform:rotate(180deg); }
.mail-relation-filter { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; padding:10px 13px; border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border)); border-radius:9px; background:var(--primary-light); color:var(--text-sec); font-size:11px; }
.mail-relation-filter a { flex:0 0 auto; color:var(--primary); font-weight:800; text-decoration:none; }
.mail-relation-filter a:hover { text-decoration:underline; }
#main.mail-page-host { height:calc(100vh / var(--ui-zoom, 1) - var(--topbar-h, 0px)); min-height:0; overflow:hidden; display:flex; flex-direction:column; }
#main.mail-page-host > .mail-page-header,
#main.mail-page-host > #mail-sync-status,
#main.mail-page-host > .mail-relation-filter,
#main.mail-page-host > .mail-toolbar { flex:0 0 auto; }
.mail-shell { min-height:0; height:auto; flex:1 1 auto; display:grid; grid-template-columns:190px minmax(300px,360px) minmax(420px,1fr); overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card); box-shadow:var(--shadow); }
.mail-shell.mail-folders-collapsed { grid-template-columns:0 minmax(300px,360px) minmax(420px,1fr); }
.mail-shell.mail-folders-collapsed .mail-folders { visibility:hidden; overflow:hidden; padding-right:0; padding-left:0; border-right:0; pointer-events:none; }
.mail-folders { display:flex; min-width:0; flex-direction:column; padding:14px 10px; border-right:1px solid var(--border); background:color-mix(in srgb,var(--bg) 72%,var(--card)); }
.mail-folders > label { margin:0 6px 5px; color:var(--text-muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.mail-folders > select { width:100%; margin-bottom:14px; padding:8px; border:1px solid var(--border); border-radius:7px; background:var(--card); color:var(--text); }
.mail-folders nav { display:flex; flex-direction:column; gap:3px; }
.mail-folders nav button { width:100%; padding:9px 10px; border:0; border-radius:7px; background:transparent; color:var(--text-sec); text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-folders nav button:hover,.mail-folders nav button.active { background:var(--primary-light); color:var(--primary); font-weight:700; }
.mail-account-state { margin-top:auto; padding:10px 7px; border-top:1px solid var(--border); color:var(--text-muted); font-size:10px; line-height:1.45; }
.mail-account-state small { display:block; margin-top:7px; color:var(--danger); overflow-wrap:anywhere; }
.mail-message-list { min-width:0; overflow-y:auto; border-right:1px solid var(--border); background:var(--card); }
.mail-list-item { display:block; width:100%; padding:14px 15px; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); text-align:left; }
.mail-list-item:hover,.mail-list-item.selected { background:var(--bg); }
.mail-list-item:not(.unread) .mail-list-top strong,
.mail-list-item:not(.unread) h3 { font-weight:400; }
.mail-list-item:not(.unread) .mail-list-top strong { color:var(--text-sec); }
.mail-list-item.unread h3,.mail-list-item.unread .mail-list-top strong { font-weight:850; color:var(--text); }
.mail-list-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mail-list-top strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.mail-list-top time { flex:0 0 auto; color:var(--text-muted); font-size:9px; }
.mail-list-item h3 { margin:5px 0 3px; overflow:hidden; color:var(--text-sec); font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.mail-list-item p { display:-webkit-box; overflow:hidden; color:var(--text-muted); font-size:11px; line-height:1.35; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mail-list-meta { display:flex; gap:5px; margin-top:7px; align-items:center; overflow:hidden; }
.mail-link-pill,.mail-suggestion-pill { overflow:hidden; padding:2px 6px; border-radius:999px; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.mail-link-pill { background:var(--success-bg); color:var(--success); }
.mail-suggestion-pill { background:var(--warning-bg); color:var(--warning); }
.mail-pagination { position:sticky; z-index:2; top:0; display:flex; justify-content:center; align-items:center; gap:12px; padding:9px 12px; border-bottom:1px solid var(--border); background:var(--card); box-shadow:0 3px 8px color-mix(in srgb,var(--text) 7%,transparent); }
.mail-pagination button { padding:5px 9px; border:1px solid var(--border); border-radius:6px; background:var(--card); color:var(--text-sec); }
.mail-reader { min-width:0; overflow-y:auto; background:var(--card); -webkit-user-select:text; user-select:text; }
.mail-reader-return { padding:14px 25px 0; }
.mail-reader-return a { display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-size:11px; font-weight:750; text-decoration:none; }
.mail-reader-return a:hover { text-decoration:underline; }
.mail-reader-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); text-align:center; }
.mail-reader-empty > span { font-size:42px; opacity:.35; }
.mail-google-calendar-option { display:grid; gap:5px; margin-top:11px; padding:11px 12px; border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border)); border-radius:9px; background:var(--primary-light); }
.mail-google-calendar-option small { color:var(--text-sec); line-height:1.35; }
.mail-google-calendar-events { display:grid; gap:8px; }
.mail-google-calendar-event { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--card); }
.mail-google-calendar-event > span { display:grid; flex:1; min-width:0; gap:3px; }
.mail-google-calendar-event small { color:var(--text-sec); }
.mail-reader-header { display:flex; justify-content:space-between; gap:18px; padding:22px 25px 14px; border-bottom:1px solid var(--border); }
.mail-reader-header h2 { margin-bottom:9px; font-size:19px; line-height:1.3; }
.mail-reader-header time,.mail-to { color:var(--text-muted); font-size:10px; }
.mail-from { color:var(--text-sec); font-size:12px; }
.mail-reader-actions { display:flex; flex-wrap:wrap; gap:5px; padding:9px 25px; border-bottom:1px solid var(--border); }
.mail-reader-actions button { padding:5px 9px; border:1px solid var(--border); border-radius:6px; background:var(--card); color:var(--text-sec); font-size:11px; }
.mail-linked-box a { color:inherit; font-weight:800; text-decoration:underline; text-underline-offset:2px; }
.mail-reader-actions button:hover { border-color:var(--border-focus); color:var(--primary); }
.mail-linked-box,.mail-suggested-box { display:flex; align-items:center; gap:8px; margin:13px 25px 0; padding:9px 11px; border-radius:8px; font-size:11px; }
.mail-linked-box { background:var(--success-bg); color:var(--success); }
.mail-suggested-box { background:var(--warning-bg); color:var(--warning); }
.mail-suggested-box button { margin-left:auto; border:0; background:transparent; color:inherit; font-weight:800; }
.mail-body { padding:25px; color:var(--text); font:13px/1.65 var(--font); overflow-wrap:anywhere; cursor:text; -webkit-user-select:text !important; user-select:text !important; }
.mail-body * { -webkit-user-select:text !important; user-select:text !important; }
.mail-body::selection,.mail-body *::selection { background:color-mix(in srgb,var(--primary) 28%,transparent); color:var(--text); }
.mail-body p { margin:0 0 13px; }
.mail-body p:last-child { margin-bottom:0; }
.mail-body h1,.mail-body h2,.mail-body h3,.mail-body h4,.mail-body h5,.mail-body h6 { margin:18px 0 8px; color:var(--text); line-height:1.3; }
.mail-body h1:first-child,.mail-body h2:first-child,.mail-body h3:first-child { margin-top:0; }
.mail-body a { color:var(--primary); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.mail-body ul,.mail-body ol { margin:10px 0 14px 22px; padding:0; }
.mail-body li { margin:3px 0; }
.mail-body blockquote { margin:13px 0; padding:9px 13px; border-left:3px solid var(--primary); background:var(--bg); color:var(--text-sec); }
.mail-body pre,.mail-body code { font-family:var(--mono); }
.mail-body pre { max-width:100%; margin:12px 0; padding:12px; overflow:auto; border:1px solid var(--border); border-radius:7px; background:var(--bg); white-space:pre-wrap; }
.mail-body hr { margin:18px 0; border:0; border-top:1px solid var(--border); }
.mail-body table { width:auto; max-width:100%; margin:0; border:0; border-spacing:0; border-collapse:collapse; }
.mail-body th,.mail-body td { padding:0; border:0; vertical-align:top; }
.mail-body th { background:transparent; font-weight:700; }
.mail-body td:empty,.mail-body th:empty,.mail-body p:empty,.mail-body div:empty,.mail-body span:empty { display:none !important; }
.mail-body-formatted > :first-child { margin-top:0; }
.mail-empty-body { color:var(--text-muted); font-style:italic; }
.mail-attachments { margin:0 25px 25px; padding-top:14px; border-top:1px solid var(--border); }
.mail-attachments h3 { margin-bottom:9px; font-size:12px; }
.mail-attachments button { display:inline-flex; gap:8px; margin:0 7px 7px 0; padding:8px 11px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); text-align:left; }
.mail-attachments button span:last-child { display:flex; min-width:0; flex-direction:column; }
.mail-attachments small { color:var(--text-muted); }
.mail-attachment-card { max-width:680px; margin:0 0 8px; border:1px solid var(--border); border-radius:9px; background:var(--bg); }
.mail-attachment-row { display:flex; align-items:stretch; gap:6px; padding:6px; }
.mail-attachment-row .mail-attachment-button { flex:1; min-width:0; margin:0; border:0; background:transparent; }
.mail-attachment-row .mail-attachment-download { flex:0 0 auto; align-items:center; margin:0; background:var(--card); font-size:10px; white-space:nowrap; }
.mail-zip-arrow { flex:0 0 auto; width:12px; transition:transform .15s ease; }
.mail-zip-toggle[aria-expanded='true'] > .mail-zip-arrow { transform:rotate(90deg); }
.mail-zip-children { padding:0 7px 7px 27px; }
.mail-zip-entry { margin-top:5px; border-left:2px solid var(--border); }
.mail-zip-entry > .mail-zip-entry-button { display:flex; width:100%; margin:0; border:0; background:transparent; }
.mail-zip-entry > .mail-zip-children { padding:0 0 2px 22px; }
.mail-zip-loading,.mail-zip-empty,.mail-zip-error { margin:5px 0; padding:8px 10px; border-radius:7px; color:var(--text-muted); font-size:10px; }
.mail-zip-loading { display:flex; align-items:center; gap:7px; background:var(--card); }
.mail-zip-loading .spinner { width:14px; height:14px; }
.mail-zip-error { background:var(--danger-bg); color:var(--danger); }
.mail-compose textarea { min-height:260px; font-family:var(--font); line-height:1.55; }
.mail-attachment-source > .btn { margin-top:8px; align-self:flex-start; }
.mail-matter-selected { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.mail-matter-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:5px 8px; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); }
.mail-matter-chip > span:not(.file-icon) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-matter-chip button { border:0; background:transparent; color:var(--danger); cursor:pointer; font-size:18px; line-height:1; }
.mail-matter-panel { margin-top:10px; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-secondary); }
.mail-matter-panel > label { display:block; margin-bottom:5px; font-weight:700; }
.mail-matter-panel > input { width:100%; margin-bottom:4px; }
.mail-matter-panel > .subtitle { min-height:18px; margin-bottom:8px; }
.mail-matter-panel > select { width:100%; margin-bottom:10px; }
.mail-matter-file-list { max-height:240px; overflow:auto; display:grid; gap:5px; }
.mail-matter-file { display:flex; align-items:center; gap:8px; padding:7px; border-radius:7px; cursor:pointer; }
.mail-matter-file:hover { background:var(--surface); }
.mail-matter-file span:last-child { min-width:0; }
.mail-matter-file strong,.mail-matter-file small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-matter-file small { color:var(--text-sec); margin-top:2px; }
.mail-print-frame { position:fixed; left:-10000px; top:0; width:1px; height:1px; border:0; opacity:0; pointer-events:none; }
html[data-theme='dark'] .mail-folders { background:#111c2e; }
html[data-theme='dark'] .mail-link-pill { background:rgba(34,197,94,.14); color:#86efac; }
html[data-theme='dark'] .mail-suggestion-pill { background:rgba(245,158,11,.14); color:#fcd34d; }
@media(max-width:1100px){.mail-shell{grid-template-columns:160px 300px minmax(360px,1fr)}}
@media(max-width:850px){#main.mail-page-host{height:auto;overflow:visible;display:block}.mail-relation-filter{align-items:flex-start;flex-direction:column}.mail-shell,.mail-shell.mail-folders-collapsed{height:auto;min-height:0;grid-template-columns:1fr}.mail-shell.mail-folders-collapsed .mail-folders{display:none}.mail-folders{border-right:0;border-bottom:1px solid var(--border)}.mail-folders nav{flex-direction:row;overflow-x:auto}.mail-message-list{max-height:420px;border-right:0;border-bottom:1px solid var(--border)}.mail-reader{min-height:480px}}