/* Minimal Mail — one calm surface, grays and one blue. Type: the system font at 400 and 700 only. */
:root, [data-theme="dark"] {
  --bg: #0b0b0b; --panel: #111111; --raise: #161616;
  --t1: #f2f2f2; --t2: #bdbdbd; --t3: #8a8a8a; --t4: #6e6e6e; --t5: #4a4a4a;
  --line: #1c1c1c; --line-strong: #2a2a2a;
  --sel: rgba(10, 132, 255, 0.14); --hover: rgba(255, 255, 255, 0.035);
  --acc: #0a84ff; --acc-text: #4da3ff; --warn: #ff9f6e; --ok: #63d38d;
  --body: #ededed;
}
[data-theme="light"] {
  --bg: #ffffff; --panel: #fafafa; --raise: #f4f4f4;
  --t1: #111111; --t2: #3c3c3c; --t3: #6e6e6e; --t4: #8a8a8a; --t5: #b5b5b5;
  --line: #ececec; --line-strong: #dddddd;
  --sel: rgba(0, 122, 255, 0.08); --hover: rgba(0, 0, 0, 0.025);
  --acc: #007aff; --acc-text: #0066d6; --warn: #c2410c; --ok: #15803d;
  --body: #1a1a1a;
}
:root { --row: 34px; --row-font: 14px; --avatar: 22px; --pad: 28px; --bar: 52px; --foot: 44px; --side: 300px; }
[data-density="comfortable"] { --row: 52px; --row-font: 16px; --avatar: 32px; --pad: 40px; --bar: 64px; --foot: 56px; --side: 340px; }

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--t1);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; font-weight: 400;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
input, textarea { font: inherit; color: var(--t1); }
a { color: var(--acc-text); text-decoration: none; }
a:hover { text-decoration: underline; }
kbd { font: 700 11px/1 inherit; font-family: inherit; color: var(--t4); margin-right: 6px; }
h1, h2, h3 { font-weight: 700; margin: 0; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.muted { color: var(--t3); } .faint { color: var(--t4); } .small { font-size: 12.5px; }
.warn { color: var(--warn); } .ok { color: var(--ok); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.push { margin-left: auto; }
.link { color: var(--acc-text); }
.link:hover { text-decoration: underline; }
.boot { height: 100%; display: grid; place-items: center; }

/* ---- Shell ---- */
.app { height: 100%; display: flex; flex-direction: column; }
.topbar { height: var(--bar); flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); border-bottom: 1px solid var(--line); gap: 24px; }
.topbar-right { display: flex; align-items: center; gap: 18px; min-width: 0; }
.icon { color: var(--t4); font-size: 15px; }
.tabs { display: flex; gap: 28px; align-self: stretch; }
.tabs { position: relative; }
.tab { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--t4); padding-top: 2px; transition: color 160ms var(--ease); }
.tab:hover { color: var(--t2); }
.tab.on { color: var(--t1); }
.tab-count { font-weight: 400; color: var(--t5); font-size: 13px; }
.tab.on .tab-count { color: var(--t3); }
.tab kbd { margin: 0 0 0 3px; }
.crumb { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.crumb kbd { color: var(--t2); margin: 0; }
.switcher { display: flex; gap: 16px; align-items: center; overflow: hidden; }
.switch { display: flex; align-items: center; gap: 7px; color: var(--t3); font-size: 13px; white-space: nowrap; }
.switch kbd { margin: 0; }
.switch.on { color: var(--t1); font-weight: 700; }
.switch.on kbd { color: var(--t1); }
.body { flex: 1; display: flex; min-height: 0; }
.main { flex: 1; min-width: 0; overflow: auto; }
.bottombar { height: var(--foot); flex: none; display: flex; align-items: center; gap: 24px; padding: 0 var(--pad); border-top: 1px solid var(--line); overflow: hidden; }
.key-hint { display: flex; align-items: baseline; gap: 0; color: var(--t4); font-size: 13px; white-space: nowrap; }
.key-hint kbd { color: var(--t2); font-size: 12px; margin-right: 7px; }
.key-hint.hot, .key-hint.hot kbd { color: var(--acc-text); font-weight: 700; }

/* ---- Tiles and avatars ---- */
.tile { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar { position: relative; flex: none; display: inline-block; }
.avatar-face { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.avatar-face.initials { border-radius: 50%; line-height: 1; background-size: cover; image-rendering: pixelated; color: #fff; font-weight: 700; letter-spacing: .02em; text-shadow: 0 0 3px rgba(0,0,0,.35); }
.avatar-face.favicon { background: transparent; }
.avatar-face.favicon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.avatar-badge { position: absolute; right: -1px; bottom: -1px; display: inline-flex; padding: 1.5px; border-radius: 30%; background: var(--bg); }
.row.selected .avatar-badge { background: var(--sel-solid, var(--bg)); }

/* ---- List ---- */
.list { padding-bottom: 24px; }
.group { display: flex; align-items: baseline; gap: 10px; padding: 18px 20px 4px var(--pad); }
[data-density="comfortable"] .group { padding: 26px 32px 10px var(--pad); }
.group-title { font-size: 12.5px; font-weight: 700; color: var(--t3); }
.group-count { font-size: 12.5px; color: var(--t5); }
.group-note { margin-left: auto; font-size: 12px; color: var(--t5); }
.row { display: flex; align-items: center; gap: 11px; height: var(--row); padding: 0 20px 0 var(--pad); cursor: default; user-select: none; }
[data-density="comfortable"] .row { gap: 14px; padding-right: 32px; }
.row:hover { background: var(--hover); }
.row.selected { background: var(--sel); }
.row-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; font-size: var(--row-font); }
.row-sender { flex: none; color: var(--t3); display: inline-flex; align-items: baseline; gap: 5px; max-width: 34%; overflow: hidden; text-overflow: ellipsis; }
.row-count { font-size: 11px; color: var(--t5); }
.row-subject { color: var(--t4); flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.row-preview { color: var(--t5); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row.strong .row-sender { color: var(--t1); font-weight: 700; }
.row.strong .row-subject { color: var(--t2); }
.row.strong .row-preview { color: var(--t4); }
.row.unread:not(.strong) .row-sender { color: var(--t2); font-weight: 700; }
.row-tag { width: 96px; flex: none; text-align: right; font-size: 12.5px; color: var(--t3); white-space: nowrap; }
.row-tag.critical { color: var(--warn); font-weight: 700; }
.row-age { width: 36px; flex: none; text-align: right; font-size: 12.5px; color: var(--t4); }
.row.strong .row-age { color: var(--t1); font-weight: 700; }
.row.selected .row-age { color: var(--acc-text); }
.list-end { height: 40px; display: grid; place-items: center; color: var(--t5); font-size: 12px; }
.empty { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; padding: 40px; }
.empty h2 { font-size: 20px; }

/* ---- Sidebar ---- */
.sidebar { width: var(--side); flex: none; border-left: 1px solid var(--line); padding: 22px; overflow: auto; display: flex; flex-direction: column; gap: 26px; }
.sidebar h3 { font-size: 12px; color: var(--t3); margin-bottom: 8px; display: flex; justify-content: space-between; }
.sender { display: flex; flex-direction: column; gap: 4px; }
.sender .avatar { margin-bottom: 8px; }
.sender-name { font-size: 16px; font-weight: 700; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.facts span { font-size: 11.5px; color: var(--t3); border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 7px; }
.side-row { display: flex; width: 100%; gap: 10px; align-items: baseline; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--t2); text-align: left; }
.side-row:hover { color: var(--t1); }
.side-row .key { width: 10px; flex: none; font-size: 11px; font-weight: 700; }
.side-row .ellipsis { flex: 1; }
.side-row .faint { flex: none; font-size: 12px; }
.sync-note { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.sync-note .tile { vertical-align: -2px; margin-right: 4px; }

/* ---- Thread ---- */
.thread { display: flex; justify-content: center; padding: 28px 24px 60px; }
.thread-col { width: 680px; max-width: 100%; display: flex; flex-direction: column; }
.why { display: flex; align-items: center; gap: 7px; font-size: 15px; flex-wrap: wrap; }
.why span { color: var(--t2); }
.why-tag { color: var(--acc-text) !important; font-weight: 700; font-size: 13px; margin-left: 4px; }
.why-tag.critical { color: var(--warn) !important; }
.why .faint { color: var(--t4); font-size: 13px; }
.subject { font-size: 22px; line-height: 28px; padding: 8px 0 16px; }
.earlier { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.earlier-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.earlier-row:hover .earlier-line { color: var(--t3); }
.earlier-from { width: 130px; flex: none; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.earlier-line { flex: 1; min-width: 0; color: var(--t4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.earlier-row .faint { font-size: 12px; }
.message { padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.message.compact { padding: 14px 0; border-bottom: 1px solid var(--line); }
.message-head { display: flex; align-items: center; gap: 9px; font-size: 14px; min-width: 0; }
.message-head .faint { font-size: 12.5px; }
.body-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 17px; line-height: 28px; color: var(--body); }
.message.compact .body-text { font-size: 15px; line-height: 24px; color: var(--t2); }
.body-text details.quoted { color: var(--t4); font-size: 14px; line-height: 22px; }
.body-text details.quoted summary { cursor: pointer; list-style: none; color: var(--t4); }
.body-html { border-radius: 10px; overflow: hidden; background: #fff; }
.body-html iframe { width: 100%; border: 0; display: block; height: 60px; }
.attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.attachment { font-size: 13px; color: var(--t2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 10px; }
.reply { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.reply-head { display: flex; justify-content: space-between; align-items: center; }
.reply-head .tile { vertical-align: -2px; }
.reply-box, .reply-to { width: 100%; background: transparent; border: 0; outline: 0; resize: none; font-size: 17px; line-height: 28px; padding: 4px 0; }
.reply-box { caret-color: var(--acc); }
.reply-box::placeholder, .reply-to::placeholder { color: var(--t5); }
.reply-to { font-size: 15px; border-bottom: 1px solid var(--line); }

/* ---- Compose ---- */
.compose { display: flex; justify-content: center; padding: 28px 24px; height: 100%; }
.compose-col { width: 680px; max-width: 100%; display: flex; flex-direction: column; }
.field { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); gap: 12px; }
.field-label { width: 72px; flex: none; color: var(--t4); font-size: 13px; }
.field-value { flex: 1; min-width: 0; }
.field-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 15px; height: 46px; }
.field-hint { flex: none; color: var(--t5); font-size: 12px; }
.from-picker { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0; }
.from-option { display: flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 6px; color: var(--t3); font-size: 14px; }
.from-option.on { background: var(--raise); color: var(--t1); font-weight: 700; }
.from-option .faint { font-weight: 400; font-size: 12.5px; }
.compose-body { flex: 1; min-height: 280px; background: transparent; border: 0; outline: 0; resize: none; font-size: 17px; line-height: 28px; padding: 24px 0; caret-color: var(--acc); }
.compose-body::placeholder { color: var(--t5); }

/* ---- Connect / onboarding ---- */
.connect { display: flex; justify-content: center; padding: 48px 24px 64px; overflow: auto; height: 100%; }
.settings .connect { padding: 0; height: auto; display: block; }
.connect-col { width: 620px; max-width: 100%; display: flex; flex-direction: column; gap: 22px; }
.settings .connect-col { width: 100%; }
.connect-title { font-size: 22px; }
.connect-section h3 { font-size: 13px; color: var(--t3); margin-bottom: 8px; }
.connected { display: flex; align-items: center; gap: 12px; height: 48px; border-bottom: 1px solid var(--line); }
.connected-name { flex: 1; font-weight: 700; }
.provider { border-radius: 8px; }
.provider.open { background: var(--raise); }
.provider-row { display: flex; align-items: center; gap: 14px; width: 100%; height: 52px; padding: 0 14px; text-align: left; border-radius: 8px; }
.provider-row:hover:not(:disabled) { background: var(--hover); }
.provider.open .provider-row:hover { background: transparent; }
.provider-name { font-size: 15px; font-weight: 700; min-width: 150px; }
.provider-action { margin-left: auto; color: var(--acc-text); font-size: 13px; font-weight: 700; }
.provider.disabled .provider-name { color: var(--t3); }
.provider .alt { margin: -6px 0 6px 54px; display: block; }
.provider-form { display: flex; flex-direction: column; gap: 14px; padding: 4px 14px 18px 54px; }
.input-label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--t4); }
.input-label input { height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); outline: 0; font-size: 14px; }
.input-label input:focus { border-color: var(--acc); }
.form-actions { display: flex; align-items: center; gap: 16px; }
.primary, .secondary { height: 40px; padding: 0 18px; border-radius: 7px; font-weight: 700; }
.primary { background: var(--acc); color: #fff; }
.secondary { background: var(--raise); border: 1px solid var(--line-strong); }
.wide { width: 100%; }

/* ---- Settings ---- */
.settings { display: flex; justify-content: center; padding: 36px 24px 64px; }
.settings-col { width: 760px; max-width: 100%; display: flex; flex-direction: column; gap: 40px; }
.settings h2 { font-size: 18px; margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; }
.settings h2 .faint { font-size: 12px; }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.setting-text { display: flex; flex-direction: column; gap: 2px; }
.segmented { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--raise); flex: none; }
.segmented button { padding: 4px 12px; border-radius: 5px; font-size: 13px; color: var(--t3); }
.segmented button.on { background: var(--line-strong); color: var(--t1); font-weight: 700; }
[data-theme="light"] .segmented button.on { background: #fff; box-shadow: 0 0 0 1px var(--line-strong); }

/* ---- Sign in ---- */
.signin { height: 100%; display: grid; place-items: center; padding: 24px; }
.signin-col { width: 360px; display: flex; flex-direction: column; gap: 14px; }
.signin h1 { font-size: 22px; }
.signin form { display: flex; flex-direction: column; gap: 12px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--t5); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- Toast ---- */
.toast { position: fixed; left: 50%; bottom: calc(var(--foot) + 16px); transform: translateX(-50%); display: flex; gap: 18px; align-items: center;
  padding: 10px 16px; border-radius: 8px; background: var(--raise); border: 1px solid var(--line-strong); font-size: 13.5px; }
.toast kbd { color: var(--acc-text); }

@media (max-width: 900px) { .sidebar { display: none; } .switcher .switch:not(.on) { display: none; } }

/* ---- No visible scrollbars: the list scrolls with the keyboard, trackpad and wheel ---- */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---- Teach palette ---- */
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; justify-content: center; padding-top: 140px; z-index: 10; }
[data-theme="light"] .overlay { background: rgba(0, 0, 0, .18); }
.palette { width: 600px; max-width: calc(100% - 32px); height: fit-content; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.palette-head { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.palette-title { font-size: 17px; font-weight: 700; }
.palette-list { display: flex; flex-direction: column; padding: 6px 0; }
.palette-row { display: flex; align-items: baseline; gap: 6px; height: 40px; padding: 0 18px; text-align: left; font-size: 14px; }
.palette-row:hover { background: var(--sel); }
.palette-row kbd { width: 16px; color: var(--acc-text); }
.palette-form, .rule-form { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 16px; }
.rule-form { padding: 14px 0 0; }
.palette-form textarea, .rule-form textarea { width: 100%; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 7px; padding: 10px 12px; font-size: 14px; line-height: 20px; resize: none; outline: 0; }
.palette-form textarea:focus, .rule-form textarea:focus { border-color: var(--acc); }
.palette-actions, .rule-actions { display: flex; align-items: center; gap: 14px; }
.palette-actions .primary, .rule-actions .primary { margin-left: auto; }
.palette-error { padding: 0 18px 14px; }
.setting.rule .setting-text span:first-child { max-width: 600px; }

/* ---- Motion ----
   Short, ease-out, transform and opacity only. Keyboard navigation (j/k, selection) stays instant;
   things that arrive, leave or change place get a brief transition. */
:root { --ease: cubic-bezier(.22, .8, .24, 1); --ease-in: cubic-bezier(.5, 0, .75, 0); }

@keyframes fade-in { from { opacity: 0 } }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px) } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97) } }
@keyframes pop-out { to { opacity: 0; transform: translateY(-4px) scale(.98) } }
@keyframes row-in { from { opacity: 0; transform: translateY(4px) } }
@keyframes row-out {
  0% { opacity: 1; transform: none; height: var(--row) }
  45% { opacity: 0; transform: translateX(14px); height: var(--row) }
  100% { opacity: 0; transform: translateX(14px); height: 0 }
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.98) } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 6px) } }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.85) } 50% { opacity: 1; transform: scale(1) } }
@keyframes spin { to { transform: rotate(360deg) } }

.tab-bar { position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--acc); transition: transform 260ms var(--ease), width 260ms var(--ease); }
.sorting { display: flex; align-items: center; gap: 7px; align-self: center; font-size: 12px; color: var(--t4); animation: fade-in 300ms var(--ease); }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); animation: pulse 1.4s ease-in-out infinite; }

.row { transition: background-color 120ms ease; }
.row.selected { transition: none; }
.row.entering { animation: row-in 260ms var(--ease) both; }
.row.leaving { animation: row-out 200ms var(--ease-in) forwards; overflow: hidden; pointer-events: none; }
.group.fade-in { animation: fade-in 240ms var(--ease) both; }

.view-in { animation: rise-in 220ms var(--ease) both; }
.swap { animation: fade-in 180ms var(--ease) both; }
.earlier-row, .side-row, .provider-row, .chip, .link, .primary, .secondary, .segmented button, .from-option, .switch { transition: background-color 140ms ease, color 140ms ease, opacity 140ms ease, transform 120ms var(--ease); }
.primary:active:not(:disabled), .secondary:active:not(:disabled), .chip:active:not(:disabled) { transform: scale(.97); }
.provider { transition: background-color 180ms ease; }
.provider-form { animation: rise-in 200ms var(--ease) both; }
.input-label input, .reply-box, .palette textarea, .rule-form textarea { transition: border-color 160ms ease, box-shadow 160ms ease; }
.input-label input:focus, .rule-form textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.message.compact, .earlier-row + .message { animation: rise-in 200ms var(--ease) both; }
.avatar img { animation: fade-in 200ms ease both; }

.toast { animation: toast-in 220ms var(--ease) both; }
.toast.leaving { animation: toast-out 160ms var(--ease-in) forwards; }

/* ---- Teach Jev ---- */
.overlay { animation: fade-in 160ms ease both; align-items: flex-start; }
.overlay .palette { animation: pop-in 200ms var(--ease) both; transform-origin: top center; }
.overlay.closing { animation: fade-in 140ms ease reverse forwards; }
.overlay.closing .palette { animation: pop-out 140ms var(--ease-in) forwards; }
.palette.teach { width: 640px; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.teach-context { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--t4); }
.teach-direction { flex: none; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; font-weight: 700; transition: background-color 200ms ease, color 200ms ease; }
.teach-direction.other { background: var(--raise); color: var(--t2); }
.teach-direction.important { background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc-text); }
.teach-direction kbd { margin: 0; font-weight: 400; color: var(--t5); }
.teach-direction .swap { animation: rise-in 180ms var(--ease) both; }
.teach-input { width: 100%; background: transparent; border: 0; outline: 0; resize: none; font-size: 18px; line-height: 26px; padding: 4px 0; caret-color: var(--acc); color: var(--t1); }
.teach-input::placeholder { color: var(--t5); }
.teach-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.chip { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; color: var(--t3); background: var(--raise); max-width: 260px; white-space: nowrap; overflow: hidden; }
.chip:hover:not(:disabled) { color: var(--t1); background: var(--line-strong); }
.chip kbd { margin: 0; color: var(--t4); font-weight: 400; }
.teach-send { margin-left: auto; flex: none; white-space: nowrap; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--t5); transition: color 180ms ease; }
.teach-send kbd { margin: 0; color: inherit; }
.teach-send.ready { color: var(--acc-text); }
.spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

/* ---- Tune: swipe through ten emails ---- */
.tune { display: flex; justify-content: center; padding: 48px 24px 40px; height: 100%; overflow: auto; }
.tune-col { width: 640px; max-width: 100%; display: flex; flex-direction: column; gap: 28px; }
.tune-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.tune-head h1 { font-size: 22px; margin-bottom: 4px; }
.tune-progress { width: 140px; flex: none; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tune-progress span { display: block; height: 3px; border-radius: 2px; background: var(--acc); align-self: flex-start; transition: width 260ms var(--ease); }
.tune-progress::before { content: ""; display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--line-strong); margin-bottom: -9px; }
.tune-progress em { font-style: normal; font-size: 12px; color: var(--t4); }
.tune-status { display: flex; align-items: center; gap: 12px; color: var(--t3); min-height: 280px; justify-content: center; }
.deck { position: relative; min-height: 300px; }
.tune-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding: 24px 26px 22px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-strong);
  animation: card-in 260ms var(--ease) both; transition: transform 230ms var(--ease-in), opacity 230ms cubic-bezier(.6,0,.9,.4); }
.tune-card.behind { position: absolute; inset: 10px 14px -10px; z-index: 0; opacity: .5; animation: none; }
.tune-card.fling-left { transform: translateX(-120px) rotate(-6deg); opacity: 0; }
.tune-card.fling-right { transform: translateX(120px) rotate(6deg); opacity: 0; }
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.98) } }
.tune-from { display: flex; align-items: center; gap: 12px; }
.tune-from div { display: flex; flex-direction: column; min-width: 0; }
.tune-card h2 { font-size: 19px; line-height: 25px; }
.tune-preview { margin: 0; color: var(--t2); font-size: 15px; line-height: 23px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tune-meta { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--t3); }
.stamp { position: absolute; top: 20px; padding: 3px 10px; border-radius: 6px; font-weight: 700; font-size: 13px; opacity: 0; transition: opacity 120ms ease; }
.stamp.left { right: 22px; color: var(--t2); border: 1.5px solid var(--t3); }
.stamp.right { right: 22px; color: var(--acc-text); border: 1.5px solid var(--acc); }
.stamp.on { opacity: 1; }
.tune-keys { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tune-key { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 10px; background: var(--raise); border: 1px solid var(--line-strong); font-weight: 700; color: var(--t2); transition: background-color 140ms ease, transform 120ms var(--ease); }
.tune-key:hover { color: var(--t1); }
.tune-key:active { transform: scale(.97); }
.tune-key kbd { margin: 0; color: var(--t3); }
.tune-key.want { background: var(--acc); border-color: var(--acc); color: #fff; }
.tune-key.want kbd { color: rgba(255,255,255,.8); }
.proposals { display: flex; flex-direction: column; gap: 8px; }
.proposal { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line-strong); text-align: left; animation: rise-in 240ms var(--ease) both; transition: border-color 160ms ease, background-color 160ms ease; }
.proposal.on { border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: color-mix(in srgb, var(--acc) 7%, transparent); }
.proposal .check { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid var(--t4); display: grid; place-items: center; font-size: 12px; color: #fff; margin-top: 1px; transition: background-color 140ms ease, border-color 140ms ease; }
.proposal.on .check { background: var(--acc); border-color: var(--acc); }
.proposal-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.proposal-text strong { font-size: 14.5px; line-height: 20px; }
.proposal kbd { margin: 2px 0 0; }
.proposals .tune-keys { margin-top: 12px; }
.tune-start { margin: 6px 0 10px; display: inline-flex; align-items: center; gap: 10px; }
.tune-start kbd { margin: 0; }
.tab-hint { align-self: center; } .tab-hint kbd { margin: 0; color: var(--t5); }

/* ---- Density switch: every size eases together, only while switching ---- */
.density-anim .row, .density-anim .group, .density-anim .topbar, .density-anim .bottombar, .density-anim .sidebar,
.density-anim .row-text, .density-anim .row-tag, .density-anim .row-age, .density-anim .tab, .density-anim .tabs,
.density-anim .avatar, .density-anim .avatar-face, .density-anim .avatar-badge, .density-anim .avatar-badge .tile, .density-anim .avatar-badge svg {
  transition-property: height, width, min-width, font-size, line-height, padding, gap, border-radius, background-color;
  transition-duration: 340ms;
  transition-timing-function: var(--ease);
}
.density-anim .row { transition-property: height, padding, gap, background-color; }

/* ---- Other groups: one at a time, Tab walks through them ---- */
.tabs-wrap { display: flex; align-items: stretch; gap: 22px; min-width: 0; align-self: stretch; }
.groups { display: flex; align-items: center; gap: 4px; overflow: hidden; animation: fade-in 200ms var(--ease) both; }
.group-chip { display: flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 6px; font-size: 13px; color: var(--t4); white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease; }
.group-chip span { font-size: 11.5px; color: var(--t5); }
.group-chip:hover { color: var(--t2); }
.group-chip.on { background: var(--raise); color: var(--t1); font-weight: 700; }
.group-chip.on span { color: var(--t3); font-weight: 400; }

/* ---- Sender details ---- */
.sender-button { display: flex; align-items: baseline; gap: 8px; min-width: 0; text-align: left; border-radius: 5px; padding: 1px 4px; margin: -1px -4px; transition: background-color 140ms ease; }
.sender-button:hover { background: var(--hover); }
.sender-button .faint { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sender-warning { flex: none; font-size: 12px; font-weight: 700; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 5px; padding: 1px 7px; }
.sender-details { display: grid; grid-template-columns: 84px 1fr; gap: 6px 12px; margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--raise); font-size: 13px; animation: rise-in 180ms var(--ease) both; }
.sender-details dt { color: var(--t4); }
.sender-details dd { margin: 0; color: var(--t2); overflow-wrap: anywhere; }
.sender-note { grid-column: 1 / -1; color: var(--warn); line-height: 1.5; }
.sender .sender-note { margin-top: 6px; }

/* ---- Message header: one tidy line, nothing wraps ---- */
.message-head { flex-wrap: nowrap; white-space: nowrap; }
.message-head > * { flex-shrink: 0; }
.message-head .sender-button { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.message-head .sender-button strong { flex: none; white-space: nowrap; }
.message-head .sender-button .faint { min-width: 0; }
.message-head .ellipsis { flex: 1 1 0; min-width: 40px; }
.message-head .push { margin-left: auto; padding-left: 12px; }
.sender-button:focus-visible { outline: none; background: var(--hover); box-shadow: 0 0 0 1px var(--line-strong); }
.sender-warning { white-space: nowrap; }

/* ---- Other: each group's top few, "N more" expands ---- */
.group-more { margin-left: auto; display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--acc-text); padding: 2px 6px; border-radius: 5px; transition: background-color 140ms ease; }
.group-more:hover { background: var(--hover); }
.group-more kbd { margin: 0; color: var(--t5); }
.group-note + .group-more { margin-left: 12px; }

/* ---- Key hints are buttons (tappable on touch) ---- */
.key-hint { background: none; border: 0; padding: 0; font: inherit; cursor: default; }
.key-hint.tappable { cursor: pointer; }
.back-arrow { display: none; }


/* ---- Desktop never shows the phone chrome ---- */
.m-header, .m-bar, .row-dot, .swipe-bg { display: none; }
.row-wrap { position: relative; }

/* =====================================================================
   Phone: an iCloud / iOS Mail layout. Tight 16 px margins, a large title,
   cells with a blue unread dot, sender + date, subject, two lines of preview,
   inset hairlines, swipe actions, and an icon toolbar at the bottom.
   ===================================================================== */
@media (max-width: 700px) {
  :root, [data-theme="dark"] { --bg: #000; --panel: #1c1c1e; --raise: #2c2c2e; --line: #38383a; --t3: #8e8e93; --t4: #8e8e93; --t5: #636366; }
  [data-theme="light"] { --bg: #fff; --panel: #f2f2f7; --raise: #e5e5ea; --line: #c6c6c8; --t3: #8e8e93; --t4: #8e8e93; --t5: #aeaeb2; }
  :root, [data-density] { --pad: 16px; --foot: calc(49px + env(safe-area-inset-bottom)); }
  html, body { background: var(--bg); }
  body { -webkit-tap-highlight-color: transparent; font-size: 17px; }
  .app { height: 100dvh; }
  kbd, .tab-hint, .group-note, .switcher, .sidebar, .key-hint, .bottombar .push { display: none !important; }

  /* Top bar: hidden in the list (the large title replaces it); a plain back bar elsewhere */
  .view-inbox .topbar { display: none; }
  .topbar { height: calc(44px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; border-bottom: 0; }
  .topbar-right { display: none; }
  .crumb { gap: 6px; min-width: 0; }
  .crumb .back { display: flex; align-items: center; flex: none; }
  .back-arrow { display: flex; align-items: center; gap: 0; color: var(--acc-text); font-size: 17px; margin-left: -2px; }
  .crumb > span { display: none; }
  .view-settings .crumb > span:last-child, .view-compose .crumb > span:last-child, .view-tune .crumb > span:last-child { display: inline; position: absolute; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: 17px; }

  /* Large title + pills */
  .m-header { display: block; padding: calc(env(safe-area-inset-top) + 6px) var(--pad) 6px; }
  .m-title-row { display: flex; align-items: center; justify-content: space-between; height: 52px; }
  .m-title { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -0.02em; }
  .m-icon { color: var(--acc-text); width: 36px; height: 36px; display: grid; place-items: center; margin-right: -6px; }
  .m-pills { display: flex; gap: 8px; padding: 6px 0 4px; }
  .m-pills button { display: flex; align-items: baseline; gap: 6px; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--panel); color: var(--t1); font-size: 15px; font-weight: 600; transition: background-color 160ms ease, color 160ms ease; }
  .m-pills button span { font-size: 13px; color: var(--t3); font-weight: 400; }
  .m-pills button.on { background: var(--acc); color: #fff; }
  .m-pills button.on span { color: rgba(255,255,255,.8); }

  /* Sections */
  .list { padding-bottom: 12px; }
  .group { padding: 18px var(--pad) 4px 44px; }
  .group-title { font-size: 13px; color: var(--t3); font-weight: 600; }
  .group-count { font-size: 13px; color: var(--t5); }
  .group-more { font-size: 13px; }

  /* Cells */
  .row-wrap { overflow: hidden; }
  .row { display: grid; height: auto; min-height: 0; align-items: start; cursor: default;
    grid-template-columns: 28px 40px 1fr auto; grid-template-areas: "dot avatar sender age" "dot avatar subject tag" "dot avatar preview preview";
    column-gap: 0; row-gap: 1px; padding: 10px var(--pad) 11px 0; background: var(--bg); position: relative; transition: transform 200ms var(--ease), background-color 120ms ease; }
  .row::after { content: ""; position: absolute; left: 80px; right: 0; bottom: 0; height: 1px; transform: scaleY(.5); background: var(--line); }
  .row:hover { background: var(--bg); }
  .row:active, .row.selected { background: var(--bg); }
  .row:active { background: var(--panel); }
  .row-wrap.swiping .row { transition: none; }
  .row-dot { display: block; grid-area: dot; justify-self: center; margin-top: 7px; width: 10px; height: 10px; border-radius: 50%; }
  .row.unread .row-dot { background: var(--acc); }
  .row .avatar { grid-area: avatar; width: 40px !important; height: 40px !important; margin-top: 2px; }
  .row .avatar-face { width: 34px !important; height: 34px !important; font-size: 13px !important; }
  .row-text { display: contents; }
  .row-sender { grid-area: sender; max-width: none; margin-left: 10px; font-size: 17px; line-height: 22px; color: var(--t1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row:not(.unread) .row-sender, .row.strong:not(.unread) .row-sender { font-weight: 600; color: var(--t1); }
  .row-count { font-size: 13px; color: var(--t3); font-weight: 400; }
  .row-age { grid-area: age; width: auto; padding-left: 8px; font-size: 15px; line-height: 22px; color: var(--t3) !important; font-weight: 400 !important; }
  .row-age::after { content: " ›"; color: var(--t5); }
  .row-subject { grid-area: subject; max-width: none; margin-left: 10px; font-size: 15px; line-height: 20px; color: var(--t1) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row-tag { grid-area: tag; width: auto; padding-left: 8px; font-size: 13px; line-height: 20px; color: var(--t3); text-align: right; white-space: nowrap; }
  .row-tag.critical { color: var(--warn); }
  .row-preview { grid-area: preview; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; margin-left: 10px;
    font-size: 15px; line-height: 20px; color: var(--t3) !important; }
  .row.entering { animation-duration: 200ms; }

  /* Swipe actions */
  .row-wrap.swiping .swipe-bg { display: flex; position: absolute; inset: 0; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; color: #fff; }
  .swipe-bg span { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 20px; flex: 1; }
  .swipe-snooze { background: #ff9f0a; opacity: .75; }
  .swipe-done { background: var(--acc); justify-content: flex-end; opacity: .75; }
  .swipe-bg span.armed { opacity: 1; }

  /* Toolbar */
  .bottombar { height: var(--foot); padding: 0 8px env(safe-area-inset-bottom); border-top: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(20px); position: relative; }
  .bottombar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; transform: scaleY(.5); background: var(--line); }
  .view-settings .bottombar { display: none; }
  .m-bar { display: flex; width: 100%; height: 49px; align-items: center; justify-content: space-between; }
  .m-tool { width: 44px; height: 44px; display: grid; place-items: center; color: var(--acc-text); border-radius: 10px; }
  .m-tool:active { background: var(--panel); }
  .m-tool-space { width: 44px; }
  .m-status { flex: 1; text-align: center; font-size: 12px; color: var(--t1); }
  .m-text { height: 44px; padding: 0 12px; font-size: 17px; color: var(--acc-text); }
  .m-text.strong { font-weight: 600; }

  /* Reading */
  .thread { padding: 4px var(--pad) 32px; }
  .thread-col { gap: 0; }
  .why { font-size: 13px; gap: 6px; color: var(--t3); padding-top: 2px; }
  .subject { order: -1; }
  .why .tile { display: none; }
  .why strong { font-weight: 600; color: var(--t2); }
  .subject { font-size: 22px; line-height: 27px; padding: 4px 0 2px; letter-spacing: -0.01em; }
  .message { padding-top: 14px; gap: 14px; }
  .message-head { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; align-items: center; row-gap: 0; }
  .message-head .avatar { grid-row: 1 / 3; width: 40px !important; height: 40px !important; }
  .message-head .avatar-face { width: 36px !important; height: 36px !important; font-size: 13px !important; }
  .message-head .sender-button { grid-column: 2; display: block; padding: 0; margin: 0; }
  .message-head .sender-button strong { font-size: 17px; font-weight: 600; }
  .message-head .sender-button .faint { display: none; }
  .message-head .ellipsis { display: block; grid-column: 2 / 4; grid-row: 2; font-size: 15px; color: var(--t3); }
  .message-head .push { grid-column: 3; grid-row: 1; font-size: 15px; color: var(--t3); padding-left: 8px; }
  .message-head .sender-warning { grid-column: 2 / 4; grid-row: 3; justify-self: start; margin-top: 6px; }
  .sender-details { grid-template-columns: 76px 1fr; }
  .body-text { font-size: 17px; line-height: 25px; }
  .body-html { border-radius: 0; margin: 0 calc(var(--pad) * -1); }
  .earlier { border-top: 0; }
  .earlier-row { font-size: 15px; padding: 10px 0; }
  .earlier-from { width: 92px; }
  .reply { margin-top: 18px; padding-top: 12px; }
  .reply-head .faint { display: none; }
  .reply-head .small { font-size: 13px; }
  .reply-box { font-size: 17px; line-height: 24px; background: var(--panel); border-radius: 18px; padding: 8px 14px; }

  /* Compose */
  .compose { padding: 0 var(--pad) 20px; }
  .field { min-height: 44px; }
  .field-label { width: 64px; font-size: 15px; color: var(--t3); }
  .field-input { font-size: 17px; height: 44px; }
  .field-hint, .from-option .faint { display: none; }
  .from-option { padding: 4px 8px; font-size: 15px; }
  .compose-body { font-size: 17px; line-height: 24px; padding: 16px 0; }

  /* Settings as an inset grouped list */
  .settings { padding: 8px var(--pad) 40px; background: var(--bg); }
  .settings-col { gap: 28px; }
  .settings h2 { font-size: 13px; font-weight: 600; color: var(--t3); margin: 0 0 6px 16px; }
  .settings h2 .faint { display: none; }
  .setting { background: var(--panel); padding: 11px 16px; border-bottom: 0; flex-wrap: wrap; gap: 8px; position: relative; }
  .setting:first-of-type { border-radius: 10px 10px 0 0; }
  .setting:last-of-type { border-radius: 0 0 10px 10px; }
  .setting:only-of-type { border-radius: 10px; }
  .setting + .setting::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; transform: scaleY(.5); background: var(--line); }
  .settings .connect-section h3 { font-size: 13px; font-weight: 600; color: var(--t3); margin: 0 0 6px 16px; }
  .connected, .provider { background: var(--panel); }
  .connected { padding: 0 16px; border-bottom: 0; border-radius: 10px; margin-bottom: 1px; }
  .connected-name { font-weight: 400; font-size: 17px; }
  .provider.open { background: var(--panel); }
  .settings .connect-col > .connect-section:first-child h3 { display: none; }
  .provider { border-radius: 0; }
  .provider:first-of-type { border-radius: 10px 10px 0 0; }
  .provider:last-child { border-radius: 0 0 10px 10px; }
  .provider-row { height: 50px; padding: 0 16px; gap: 12px; }
  .provider-row .faint { display: none; }
  .provider-name { min-width: 0; font-weight: 400; font-size: 17px; }
  .provider-action { font-weight: 400; }
  .provider-form { padding: 4px 16px 16px; }
  .provider .alt { margin: -4px 0 8px 16px; }
  .connect { padding: 16px var(--pad) 40px; }
  .settings .connect { padding: 0; }
  .connect-title { font-size: 34px; letter-spacing: -0.02em; }
  .segmented { flex-wrap: wrap; }
  .rule-form textarea { background: var(--panel); border: 0; }

  /* Tune */
  .tune { padding: 8px var(--pad) 24px; }
  .tune-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .tune-head h1 { font-size: 28px; }
  .tune-progress { width: 100%; align-items: flex-start; }
  .tune .tune-keys { display: none; }
  .proposals .tune-keys { display: flex; }
  .deck { min-height: 0; }
  .tune-card { padding: 18px; border-radius: 16px; background: var(--panel); border: 0; }
  .tune-card.behind { background: var(--panel); }

  /* Sign in */
  .signin-col { width: 100%; }
  .signin h1 { font-size: 34px; letter-spacing: -0.02em; }

  /* Overlays */
  .overlay { padding: 10px; padding-top: calc(env(safe-area-inset-top) + 56px); }
  .palette.teach { width: 100%; border-radius: 14px; }
  .teach-foot { flex-wrap: wrap; }
  .toast { left: 12px; right: 12px; transform: none; justify-content: space-between; bottom: calc(var(--foot) + 10px); border-radius: 12px; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px) } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(6px) } }
}

/* =====================================================================
   Wide screens: an iCloud Mail split. A narrow list of two-line cells on
   the left, the conversation filling the right. No context sidebar.
   ===================================================================== */
.split { display: flex; min-height: 0; }
.pane-list { width: 372px; flex: none; border-right: 1px solid var(--line); overflow-y: auto; }
.pane-read { flex: 1; min-width: 0; overflow-y: auto; }
.split .pane-read .thread { padding: 20px 36px 48px; justify-content: flex-start; }
.split .pane-read .thread-col { width: 100%; max-width: 760px; }

.cells .group { padding: 14px 16px 4px 34px; }
.cells .group-note { display: none; }
.cells .row { display: grid; height: auto; min-height: 0; align-items: start; gap: 0; cursor: default;
  grid-template-columns: 22px 38px 1fr auto; grid-template-areas: "dot avatar sender age" "dot avatar subject tag" "dot avatar preview preview";
  column-gap: 0; row-gap: 1px; padding: 9px 14px 10px 0; position: relative; border-radius: 0; }
.cells .row::after { content: ""; position: absolute; left: 60px; right: 0; bottom: 0; height: 1px; background: var(--line); }
.cells .row.selected { background: var(--sel); }
.cells .row.selected::after { opacity: 0; }
.cells .row-dot { display: block; grid-area: dot; justify-self: center; margin-top: 6px; width: 8px; height: 8px; border-radius: 50%; }
.cells .row.unread .row-dot { background: var(--acc); }
.cells .row .avatar { grid-area: avatar; width: 32px !important; height: 32px !important; margin-top: 1px; }
.cells .row .avatar-face { width: 29px !important; height: 29px !important; font-size: 11px !important; }
.cells .row-text { display: contents; }
.cells .row-sender { grid-area: sender; max-width: none; margin-left: 8px; font-size: 14px; line-height: 19px; font-weight: 700; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cells .row:not(.strong):not(.unread) .row-sender { font-weight: 600; color: var(--t2); }
.cells .row-count { font-size: 12px; font-weight: 400; color: var(--t4); }
.cells .row-age { grid-area: age; width: auto; padding-left: 8px; font-size: 12.5px; line-height: 19px; font-weight: 400 !important; color: var(--t3) !important; }
.cells .row-subject { grid-area: subject; max-width: none; margin-left: 8px; font-size: 13px; line-height: 18px; color: var(--t1) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cells .row-tag { grid-area: tag; width: auto; padding-left: 8px; font-size: 12px; line-height: 18px; text-align: right; white-space: nowrap; }
.cells .row-preview { grid-area: preview; margin-left: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden;
  font-size: 13px; line-height: 18px; color: var(--t3) !important; }
.cells .row.leaving { animation-name: cell-out; }
@keyframes cell-out { 0% { opacity: 1 } 45% { opacity: 0; transform: translateX(14px) } 100% { opacity: 0; transform: translateX(14px); max-height: 0; padding-top: 0; padding-bottom: 0 } }

/* Phone cells keep iOS sizes (the shared .cells rules above are tuned for the desktop list pane) */
@media (max-width: 700px) {
  .cells .group { padding: 18px 16px 4px 44px; }
  .cells .row { grid-template-columns: 28px 40px 1fr auto; padding: 10px 16px 11px 0; }
  .cells .row::after { left: 80px; transform: scaleY(.5); }
  .cells .row.selected { background: var(--bg); }
  .cells .row.selected::after { opacity: 1; }
  .cells .row:active { background: var(--panel); }
  .cells .row-dot { width: 10px; height: 10px; margin-top: 7px; }
  .cells .row .avatar { width: 40px !important; height: 40px !important; }
  .cells .row .avatar-face { width: 34px !important; height: 34px !important; font-size: 13px !important; }
  .cells .row-sender { margin-left: 10px; font-size: 17px; line-height: 22px; font-weight: 600; color: var(--t1); }
  .cells .row:not(.strong):not(.unread) .row-sender { color: var(--t1); }
  .cells .row-age { font-size: 15px; line-height: 22px; }
  .cells .row-subject, .cells .row-preview { margin-left: 10px; font-size: 15px; line-height: 20px; }
  .cells .row-tag { font-size: 13px; line-height: 20px; }
}

/* Tab autocomplete: a mirror of the textarea drawn on top, typed text invisible, suggestion faint. */
.ghost-wrap { position: relative; display: flex; flex-direction: column; }
.compose-col > .ghost-wrap { flex: 1; }
.ghost-wrap > textarea { flex: 1; }
.ghost-mirror { position: absolute; inset: 0; pointer-events: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; background: transparent !important; min-height: 0 !important; }
.ghost-typed { color: transparent; }
.ghost-text { color: var(--t4); animation: ghost-in 140ms ease-out; }
.ghost-key { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; line-height: 16px; vertical-align: 2px; color: var(--t4); }
@keyframes ghost-in { from { opacity: 0 } }
@media (max-width: 700px) { .ghost-key { display: none; } }

/* Recipient field: chips plus a bare input, with ranked contact suggestions. */
.recipients { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 46px; padding: 7px 0; cursor: text; height: auto; }
.reply-to.recipients { min-height: 38px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.recipients-input { flex: 1; min-width: 120px; background: transparent; border: 0; outline: 0; font: inherit; color: var(--t1); height: 30px; padding: 0; caret-color: var(--acc); }
.recipients-input::placeholder { color: var(--t5); }
.rcpt { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 4px 0 10px; border-radius: 13px; background: var(--raise); color: var(--t1); font-size: 14px; white-space: nowrap; transition: background-color 120ms ease, color 120ms ease; animation: rcpt-in 140ms var(--ease); }
.rcpt button { width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; color: var(--t4); font-size: 15px; line-height: 1; }
.rcpt button:hover { color: var(--t1); background: var(--line); }
.rcpt.bad { color: var(--warn); }
.rcpt.marked { background: var(--acc); color: #fff; }
.rcpt.marked button { color: rgba(255,255,255,.8); }
@keyframes rcpt-in { from { opacity: 0; transform: scale(.92) } }
.suggestions { position: absolute; z-index: 20; top: calc(100% + 4px); left: -8px; width: min(440px, calc(100vw - 24px)); padding: 4px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 12px 32px rgba(0,0,0,.28); animation: sugg-in 120ms var(--ease); }
.suggestion { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 8px; border-radius: 6px; font-size: 14px; cursor: default; }
.suggestion.on { background: var(--sel); }
.suggestion-name { font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 45%; }
.suggestion-email { color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.suggestion-why { margin-left: auto; flex: none; color: var(--t5); font-size: 12px; }
.subject-input::placeholder { color: var(--t5); }
@keyframes sugg-in { from { opacity: 0; transform: translateY(-3px) } }
.field-input { padding: 0; }

/* ---- Other: one newest-first list where importance is row size ---- */
.list:not(.cells) .row.tier-lead { height: calc(var(--row) * 1.72); gap: 12px; }
.list:not(.cells) .row.tier-lead .row-text { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "sender subject" "preview preview"; column-gap: 8px; row-gap: 1px; align-items: baseline; font-size: calc(var(--row-font) + 1px); }
.list:not(.cells) .row.tier-lead .row-sender { grid-area: sender; max-width: 30ch; color: var(--t1); font-weight: 700; }
.list:not(.cells) .row.tier-lead .row-subject { grid-area: subject; max-width: none; color: var(--t2); }
.list:not(.cells) .row.tier-lead .row-preview { grid-area: preview; font-size: var(--row-font); color: var(--t4); }
.list:not(.cells) .row.tier-lead .row-tag { color: var(--t4); }
.list:not(.cells) .row.tier-quiet { height: calc(var(--row) * 0.82); gap: 10px; }
.list:not(.cells) .row.tier-quiet .row-text { font-size: calc(var(--row-font) - 1.5px); }
.list:not(.cells) .row.tier-quiet .row-sender { color: var(--t4); font-weight: 400; max-width: 26%; }
.list:not(.cells) .row.tier-quiet.unread .row-sender { color: var(--t3); font-weight: 700; }
.list:not(.cells) .row.tier-quiet .row-subject { color: var(--t5); max-width: 60%; }
.list:not(.cells) .row.tier-quiet .row-preview { display: none; }
.list:not(.cells) .row.tier-quiet .row-age { font-size: 12px; color: var(--t5); }
.row.tier-quiet .avatar { opacity: .7; }
.row.tier-quiet .row-avatar-pad { width: 0; }
/* Phones: quiet cells drop the preview and shrink; lead cells keep everything. */
.cells .row.tier-quiet .row-preview { display: none; }
.cells .row.tier-quiet .row-sender { font-weight: 400; color: var(--t2); }
.cells .row.tier-quiet .row-subject { color: var(--t3) !important; }
/* Keep the text column aligned across row sizes: every avatar sits in the lead row's slot. */
.list-other:not(.cells) .row.tier-normal .avatar { margin: 0 4px; }
.list-other:not(.cells) .row.tier-quiet .avatar { margin: 0 7px; }
[data-density="comfortable"] .list-other:not(.cells) .row.tier-normal .avatar { margin: 0 3px; }
/* Normal rows step back so lead rows carry the weight. */
.list-other:not(.cells) .row.tier-normal .row-sender { color: var(--t2); font-weight: 700; }
.list-other:not(.cells) .row.tier-normal .row-subject { color: var(--t3); }
.list-other:not(.cells) .row.tier-normal .row-preview { color: var(--t5); }
.list-other:not(.cells) .row.tier-normal:not(.unread) .row-sender { font-weight: 400; }
.list-other:not(.cells) .row:not(.tier-lead) .row-age { font-weight: 400; color: var(--t4); }
.list-other:not(.cells) .row { gap: 12px; }

/* Email bodies appear finished: the iframe stays invisible until it has been sized, then fades in. */
.body-html { background: transparent; }
.body-html iframe { opacity: 0; }
.body-html iframe.fitted { opacity: 1; transition: opacity 120ms ease-out; }
.body-loading { min-height: 160px; }
/* Teach shortcuts say where the mail will go, so the direction can't be missed. */
.chip-dest { margin-left: 6px; font-weight: 700; }
.chip-dest.important { color: var(--acc-text); }
.chip-dest.other { color: var(--t3); }

.teach-foot .chip { max-width: 320px; flex: 0 1 auto; min-width: 0; }
.chip-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip-dest { flex: none; }

/* Phone chrome that desktop never shows */
.m-nav, .m-ptr, .m-arrows, .m-subtitle { display: none; }
.ios-spinner.spinning { animation: ios-spin 0.9s steps(8) infinite; }
@keyframes ios-spin { to { transform: rotate(360deg) } }

/* =====================================================================
   Phone, second pass after the iCloud Mail recording: no rubber-band
   overscroll, a custom pull to refresh with the iOS activity indicator,
   a collapsing large title, and floating glass controls.
   ===================================================================== */
@media (max-width: 700px) {
  html, body { overflow: hidden; overscroll-behavior: none; position: fixed; inset: 0; }
  .app { position: relative; overflow: hidden; }
  .main { overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
  .main .list-host { will-change: transform; }

  /* Navigation bar floating over the list */
  .m-nav { display: flex; align-items: center; justify-content: space-between; position: absolute; z-index: 30; left: 0; right: 0; top: 0;
    height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; pointer-events: none; }
  .m-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 180ms ease;
    background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
    mask-image: linear-gradient(#000 70%, transparent); }
  .m-nav.collapsed::before { opacity: 1; }
  .m-nav > * { pointer-events: auto; }
  .m-nav-space { width: 36px; }
  .m-nav-title { display: flex; flex-direction: column; align-items: center; min-width: 0; opacity: 0; transform: translateY(4px); transition: opacity 180ms ease, transform 220ms var(--ease); pointer-events: none; }
  .m-nav.collapsed .m-nav-title { opacity: 1; transform: none; }
  .m-nav-title strong { font-size: 16px; font-weight: 700; line-height: 20px; }
  .m-nav-title span { font-size: 11.5px; color: var(--t3); line-height: 14px; white-space: nowrap; }

  /* Large title block: room for the nav row above it */
  .m-header { padding: calc(env(safe-area-inset-top) + 52px) var(--pad) 4px; }
  .m-title { font-size: 34px; line-height: 40px; }
  .m-subtitle { display: block; font-size: 13px; color: var(--t3); line-height: 18px; min-height: 18px; margin: 1px 0 10px; transition: color 160ms ease; }
  .m-pills { padding: 0 0 4px; }

  /* Pull-to-refresh indicator sits in the gap the pull opens, just under the nav row */
  .m-ptr { display: grid; place-items: center; position: absolute; z-index: 5; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 52px); height: 30px;
    color: var(--t3); pointer-events: none; transition: opacity 120ms ease; }
  .m-ptr.settling { transition: opacity 200ms ease, transform 380ms cubic-bezier(.2, .9, .25, 1); }
  .m-ptr.refreshing, .m-ptr.idle { transition: opacity 200ms ease, transform 380ms cubic-bezier(.2, .9, .25, 1); }

  /* Glass controls */
  .glass { background: color-mix(in srgb, var(--panel) 62%, transparent); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: .5px solid color-mix(in srgb, var(--t1) 14%, transparent); box-shadow: 0 6px 24px rgba(0, 0, 0, .28); color: var(--t1); }
  [data-theme="light"] .glass { background: rgba(255, 255, 255, .72); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
  .m-round { width: 50px; height: 50px; border-radius: 25px; display: grid; place-items: center; flex: none; transition: transform 120ms var(--ease); }
  .m-round.small { width: 38px; height: 38px; border-radius: 19px; }
  .m-round:active, .m-capsule .m-tool:active { transform: scale(.92); }
  .m-capsule { display: flex; align-items: center; height: 50px; padding: 0 6px; border-radius: 25px; gap: 2px; }
  .m-capsule .m-tool { color: var(--t1); width: 46px; border-radius: 23px; }

  /* Bottom toolbar floats over the content */
  .bottombar { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; height: auto; padding: 0 14px calc(env(safe-area-inset-bottom) + 8px); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
  .bottombar::before { display: none; }
  .m-bar { pointer-events: auto; height: 58px; gap: 10px; }
  .view-compose .m-bar, .view-tune .m-bar { background: color-mix(in srgb, var(--panel) 62%, transparent); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border-radius: 25px; padding: 0 6px; height: 50px; }
  .main { padding-bottom: calc(env(safe-area-inset-bottom) + 76px); }
  .view-settings .main { padding-bottom: 0; }

  /* Thread: back on the left, previous/next on the right, all glass */
  .view-thread .topbar { justify-content: space-between; }
  .m-arrows { display: flex; gap: 8px; }
  .view-thread .back-arrow { font-size: 0; width: 38px; height: 38px; border-radius: 19px; display: grid; place-items: center; background: color-mix(in srgb, var(--panel) 62%, transparent); border: .5px solid color-mix(in srgb, var(--t1) 14%, transparent); color: var(--t1); }
  .view-thread .back-arrow svg { margin-left: -2px; }
}
.row-tag.pending { color: var(--t5); font-weight: 400; animation: pulse-text 1.6s ease-in-out infinite; }
@keyframes pulse-text { 50% { opacity: .45 } }

/* Agent access */
.agent-name { width: 100%; height: 36px; background: var(--raise); border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; font-size: 14px; outline: 0; }
.agent-name:focus { border-color: var(--acc); }
.agent-fresh { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin: 6px 0 10px; border-radius: 10px; background: color-mix(in srgb, var(--acc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); animation: rise-in 180ms var(--ease) both; }
.agent-token { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; color: var(--t1); user-select: all; }
.agent-fresh-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- r: refresh every mailbox ---- */
.refresh-panel { position: fixed; z-index: 40; top: calc(var(--bar) + 10px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 2px; min-width: 240px; padding: 6px;
  border-radius: 12px; background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--line-strong); box-shadow: 0 14px 40px rgba(0, 0, 0, .32); animation: refresh-in 220ms var(--ease) both; }
.refresh-panel.leaving { animation: refresh-out 200ms var(--ease-in) forwards; }
@keyframes refresh-in { from { opacity: 0; transform: translate(-50%, -8px) scale(.98) } }
@keyframes refresh-out { to { opacity: 0; transform: translate(-50%, -6px) scale(.98) } }
.refresh-row { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 8px; font-size: 13px; animation: refresh-row-in 240ms var(--ease) both; }
@keyframes refresh-row-in { from { opacity: 0; transform: translateY(-4px) } }
.refresh-tile { position: relative; width: 26px; height: 26px; display: grid; place-items: center; flex: none; }
.refresh-ring { position: absolute; inset: 0; width: 26px; height: 26px; transform: rotate(-90deg); }
.refresh-ring circle { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 28 100; transition: stroke-dasharray 320ms var(--ease), opacity 260ms ease 240ms, stroke 200ms ease; }
.refresh-row.checking .refresh-ring { animation: refresh-spin 900ms linear infinite; }
.refresh-row.done .refresh-ring circle { stroke-dasharray: 100 100; opacity: 0; }
.refresh-row.failed .refresh-ring circle { stroke: var(--warn); stroke-dasharray: 100 100; }
@keyframes refresh-spin { from { transform: rotate(-90deg) } to { transform: rotate(270deg) } }
.refresh-row.done .tile { animation: refresh-pop 320ms var(--ease); }
@keyframes refresh-pop { 40% { transform: scale(1.12) } }
.refresh-name { flex: 1; color: var(--t1); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.refresh-state { color: var(--t3); white-space: nowrap; display: flex; align-items: center; animation: refresh-state-in 200ms var(--ease) both; }
.refresh-state strong { color: var(--acc-text); }
.refresh-row.failed .refresh-state { color: var(--warn); }
@keyframes refresh-state-in { from { opacity: 0; transform: translateX(4px) } }
.refresh-check path { fill: none; stroke: var(--acc-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: refresh-draw 260ms var(--ease) forwards; }
@keyframes refresh-draw { to { stroke-dashoffset: 0 } }
@media (max-width: 700px) { .refresh-panel { top: calc(env(safe-area-inset-top) + 58px); } }
@media (prefers-reduced-motion: reduce) { .refresh-row.checking .refresh-ring { animation-duration: 2.4s; } }
.agent-sub { font-size: 12px; font-weight: 700; color: var(--t4); margin: 14px 0 2px; text-transform: none; }
.agent-toggle { margin-top: 12px; }