/* ==========================================================================
   Clik Work Email — UI/UX (mock data)
   Outlook three-pane structure × Apple Mail typography.
   Self-contained focus view; mirrors the To-Do / Calendar focus pattern.
   ========================================================================== */

.email-focus-view {
  --email-accent: var(--cw-accent);
  --email-accent-strong: var(--cw-accent-active);
  --email-tint: var(--cw-accent-tint);
  --email-ink: var(--cw-text);
  --email-soft-ink: var(--cw-text);
  --email-muted: var(--cw-text-muted);
  --email-faint: var(--cw-text-subtle);
  --email-sep: var(--cw-border);
  --email-hairline: var(--cw-border);
  --email-bg-soft: var(--cw-surface-muted);
  --email-star: var(--cw-warning);

  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--cw-surface);
  display: flex;
  flex-direction: column;
  color: var(--email-ink);
  font-size: 16.1px;
}
.email-focus-view[hidden] { display: none !important; }

/* ---- Focus mode: strip the global chrome ------------------------------- */
body.is-email-focus { overflow: hidden; }
body.is-email-focus .vx-header { display: none !important; }
body.is-email-focus #authScreen { z-index: 1001; }

/* ---- Top bar (slim) ---------------------------------------------------- */
.email-topbar {
  flex: 0 0 auto;
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--email-sep);
}
.email-back {
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: none; color: var(--email-ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.email-back svg { width: 24px; height: 24px; }
.email-back:hover { color: var(--email-accent); background: var(--email-tint); }

.email-folder-pill {
  display: none; /* mobile only */
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--email-sep);
  border-radius: 999px;
  background: var(--cw-surface);
  color: var(--email-ink);
  font-size: 14.9px; font-weight: 500;
  cursor: pointer;
}
.email-folder-pill svg { width: 15px; height: 15px; color: var(--email-muted); }

/* ---- Three-pane shell -------------------------------------------------- */
.email-shell {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* ---- Pane 1: folder sidebar -------------------------------------------- */
.email-sidebar {
  flex: 0 0 200px;
  width: 200px;
  border-right: 1px solid var(--email-sep);
  background: var(--cw-surface);
  padding: 12px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.email-folder-list { display: grid; gap: 1px; }
.email-folder {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--email-soft-ink);
  font-size: 16.1px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.email-folder:hover { background: var(--email-bg-soft); }
.email-folder.is-active {
  background: var(--email-tint);
  color: var(--email-accent);
  font-weight: 500;
}
.email-folder-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--email-muted); }
.email-folder.is-active .email-folder-icon { color: var(--email-accent); }
.email-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-folder-badge {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--email-accent);
  color: var(--cw-surface);
  font-size: 12.6px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.email-folder.is-draft-badge .email-folder-badge { background: var(--cw-text-subtle); color: var(--cw-text); }

.email-label-block { margin-top: 16px; display: grid; gap: 4px; }
.email-section-label {
  padding: 0 12px;
  font-size: 12.6px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--email-muted);
}
.email-add-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--email-muted);
  font-size: 14.9px;
  cursor: pointer;
}
.email-add-label:hover { background: var(--email-bg-soft); color: var(--email-accent); }
.email-add-label svg { width: 15px; height: 15px; }

/* ---- Pane 2: message list ---------------------------------------------- */
.email-list-pane {
  /* Width is driven by --email-list-w (set on .email-shell via the draggable
     splitter); the divider line is drawn by .email-splitter. min-width:0 keeps the
     flex column resizing cleanly — the sensible minimum is enforced by the drag clamp. */
  flex: 0 0 var(--email-list-w, 320px);
  width: var(--email-list-w, 320px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cw-surface);
}
.email-list-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--email-sep);
}
.email-list-head-titles { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.email-list-title { margin: 0; font-size: 18.4px; font-weight: 500; color: var(--email-ink); }
.email-unread-count { font-size: 14.9px; color: var(--email-muted); }
.email-sort {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 0;
  background: none;
  color: var(--email-muted);
  font-size: 14.9px;
  cursor: pointer;
  padding: 2px 0;
}
.email-sort svg { width: 14px; height: 14px; }
.email-sort:hover { color: var(--email-ink); }

/* Filter dropdown (next to Sort). */
.email-list-tools { display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.email-filter { position: relative; }
.email-filter-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 172px; padding: 6px;
  background: var(--cw-surface); border: 1px solid var(--email-sep); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  display: flex; flex-direction: column; gap: 2px;
}
.email-filter-menu[hidden] { display: none; }
.email-filter-opt {
  text-align: left; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14.9px; color: var(--email-ink);
  padding: 8px 10px; border-radius: 8px;
}
.email-filter-opt:hover { background: var(--email-bg-soft); }
.email-filter-opt.is-active { background: var(--email-tint); color: var(--email-accent); font-weight: 600; }

.email-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.email-row {
  position: relative;
  display: grid;
  grid-template-columns: 14px 36px minmax(0, 1fr);
  align-items: start;
  column-gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--email-hairline);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.email-row:hover { background: var(--email-bg-soft); }
.email-row.is-selected { background: var(--email-tint); }
/* Checked rows get a clear, distinct highlight + an accent edge. */
.email-row.is-checked { background: var(--email-tint); box-shadow: inset 3px 0 0 var(--email-accent); }
.email-row.is-checked:hover { background: var(--cw-accent-tint); }
.email-dot {
  grid-column: 1;
  align-self: center;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--email-accent);
  margin-top: 1px;
}
.email-row.is-read .email-dot { visibility: hidden; }
/* Avatar slot doubles as the multi-select checkbox target: the checkbox overlays
   the avatar and fades in on hover or in selection mode (Gmail-style). */
.email-pick {
  grid-column: 2;
  position: relative;
  width: 36px; height: 36px;
  align-self: center;
}
.email-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--avatar, var(--cw-text-subtle));
  color: var(--cw-surface);
  display: grid;
  place-items: center;
  font-size: 16.1px;
  font-weight: 600;
  transition: opacity .12s ease;
}
.email-check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--cw-surface);
  border: 1.5px solid var(--email-sep);
  color: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.email-check svg { width: 20px; height: 20px; }
/* Reveal the checkbox on row hover or whenever selection mode is active. */
.email-row:hover .email-check,
.email-list.is-selecting .email-check { opacity: 1; pointer-events: auto; }
.email-row:hover .email-avatar,
.email-list.is-selecting .email-avatar { opacity: 0; }
/* Checked: brand fill + tick, always visible. */
.email-row.is-checked .email-check {
  opacity: 1; pointer-events: auto;
  background: var(--email-accent);
  border-color: var(--email-accent);
  color: var(--cw-text-on-accent);
}
.email-row.is-checked .email-avatar { opacity: 0; }
.email-row-body { grid-column: 3; min-width: 0; display: grid; gap: 2px; }
.email-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.email-row-sender {
  flex: 1;
  min-width: 0;
  font-size: 16.1px;
  font-weight: 400;
  color: var(--email-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-row.is-unread .email-row-sender { font-weight: 600; }
/* Right-side row meta in ONE flex slot that never shrinks (flex:0 0 auto). It
   holds two mutually-exclusive groups — the resting date block and the hover
   quick-actions — which swap by display, so an action icon can never stack on
   top of the date (no absolute positioning anywhere here). */
.email-row-meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.email-row-time { flex: 0 0 auto; font-size: 12.6px; color: var(--email-muted); white-space: nowrap; }
/* Paperclip flag — shown only when a row has at least one TRUE (non-inline) attachment. */
.email-row-clip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--cw-text-subtle);
}
.email-row-clip svg { width: 13px; height: 13px; }
.email-row.is-unread .email-row-clip { color: var(--cw-text-muted); }
.email-row-subject {
  font-size: 14.9px;
  font-weight: 400;
  color: var(--email-soft-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-row.is-unread .email-row-subject { font-weight: 600; color: var(--email-ink); }
.email-row-snippet {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.8px;
  color: var(--email-muted);
  overflow: hidden;
}
.email-row-snippet span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The meta slot holds TWO mutually-exclusive groups: `.email-row-rest` (date +
   paperclip + a starred indicator) at rest, and `.email-row-actions` (quick
   actions) on hover/long-press. Only one shows at a time — they swap via display,
   never overlapping the date. */
.email-row-rest { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.email-row-star-rest { display: inline-flex; align-items: center; color: var(--email-star); }
.email-row-star-rest svg { width: 14px; height: 14px; fill: var(--email-star); stroke: var(--email-star); }

.email-row-actions {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: 1px;
}
/* Swap rest → actions when the row is hovered, keyboard-focused, or long-pressed
   on touch. */
.email-row:hover .email-row-rest,
.email-row:focus-within .email-row-rest,
.email-row.is-acting .email-row-rest { display: none; }
.email-row:hover .email-row-actions,
.email-row:focus-within .email-row-actions,
.email-row.is-acting .email-row-actions { display: inline-flex; }
/* In selection mode, keep the date visible (actions move to the bulk bar). */
.email-list.is-selecting .email-row:hover .email-row-rest { display: inline-flex; }
.email-list.is-selecting .email-row:hover .email-row-actions { display: none; }

.email-row-act {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 7px;
  background: none;
  color: var(--email-muted);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.email-row-act svg { width: 16px; height: 16px; }
.email-row-act:hover { background: var(--email-bg-soft); color: var(--email-accent); }
.email-row-act.is-on { color: var(--email-star); }
.email-row-act.is-on svg { fill: var(--email-star); }
.email-row-act-danger:hover { background: var(--cw-danger-bg); color: var(--cw-danger); }

.email-list-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--email-muted);
  font-size: 14.9px;
}

/* "Load more" footer at the end of the message list (paged loading). */
.email-list-more {
  display: block;
  width: calc(100% - 24px);
  margin: 8px 12px 16px;
  padding: 11px 14px;
  border: 1px solid var(--email-sep);
  border-radius: 10px;
  background: var(--cw-surface);
  color: var(--email-accent);
  font: inherit;
  font-size: 14.9px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.email-list-more:hover { background: var(--email-tint); border-color: var(--email-accent); }
.email-list-more.is-loading {
  color: var(--email-muted);
  font-weight: 500;
  cursor: default;
}

/* ---- Pane 3: reading pane ---------------------------------------------- */
.email-reading-pane {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--cw-surface);
}
.email-reader { min-height: 100%; display: flex; flex-direction: column; }

.email-empty-state {
  flex: 1 1 auto;
  height: 100%;
  min-height: 320px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--email-muted);
  text-align: center;
}
.email-empty-state svg { width: 32px; height: 32px; color: var(--email-faint); }
.email-empty-state strong { font-size: 17.2px; font-weight: 500; color: var(--email-soft-ink); }
.email-empty-state span { font-size: 14.9px; }

/* Flex column that fills the pane height. The body region (below) grabs the
   slack so it's the tallest, unobstructed part — no bottom FAB to clear, so the
   old 80px bottom gutter is gone and the top padding is tightened too. */
.email-msg {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2vw, 24px) clamp(20px, 4vw, 44px) clamp(18px, 2vw, 28px);
}
.email-msg-back {
  display: none; /* mobile only */
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  border: 0; background: none;
  color: var(--email-accent);
  font-size: 16.1px; cursor: pointer;
  padding: 0;
}
.email-msg-back svg { width: 20px; height: 20px; }

.email-msg-head { flex: 0 0 auto; display: grid; gap: 9px; }
/* Reading-pane subject: an <h1>, so it must override the global display-hero h1
   tracking (letter-spacing:-3.3px) or glyphs crush together and spaces vanish. */
.email-msg-subject {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  color: var(--email-ink);
  line-height: 1.3;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
  font-family: var(--font-base);
}
.email-msg-meta-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.email-msg-meta { flex: 1; min-width: 220px; display: grid; gap: 3px; font-size: 14.9px; color: var(--email-muted); }
.email-msg-meta b { color: var(--email-soft-ink); font-weight: 500; }
.email-msg-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.email-pill-btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--email-sep);
  border-radius: 999px;
  background: var(--cw-surface);
  color: var(--email-soft-ink);
  font-size: 14.9px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.email-pill-btn:hover { border-color: var(--email-accent); color: var(--email-accent); background: var(--email-tint); }
.email-icon-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--email-sep);
  border-radius: 50%;
  background: var(--cw-surface);
  color: var(--email-muted);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.email-icon-btn svg { width: 16px; height: 16px; }
.email-icon-btn:hover { border-color: var(--email-accent); color: var(--email-accent); }

.email-msg-divider { flex: 0 0 auto; height: 1px; background: var(--email-sep); margin: 14px 0; }
.email-msg-body {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 640px;
  font-size: 17.2px;
  line-height: 1.7;
  color: var(--email-ink);
  white-space: pre-wrap;
}
.email-msg-body a, .email-msg-link { color: var(--email-accent); text-decoration: none; }

/* ---- Sent/Drafts recipient-aware rows + reading-pane recipients --------- */
/* Muted "To:" prefix in Sent/Drafts list rows (the row shows the RECIPIENT). */
.email-row-to { color: var(--email-muted); font-weight: 400; }
/* "+N" extra-recipients badge. */
.email-row-more {
  font-size: 12.6px;
  font-weight: 600;
  color: var(--email-muted);
  background: var(--email-bg-soft);
  border-radius: 999px;
  padding: 0 6px;
}
/* Full To/Cc lines in the reading-pane header. */
.email-msg-recipients { color: var(--email-muted); font-size: 14.9px; }
.email-msg-rlabel { color: var(--email-faint); }

/* ---- Quoted-thread / signature collapse -------------------------------- */
.email-quote-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 34px;
  margin: 8px 0 2px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--email-bg-soft);
  color: var(--email-muted);
  font-size: 18.4px;
  line-height: 1;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.email-quote-toggle:hover { background: var(--email-tint); color: var(--email-accent); }
.email-quote-toggle.is-open { background: var(--email-tint); color: var(--email-accent); }
/* Trimmed plain-text remainder (HTML bodies trim inside the iframe via srcdoc). */
.email-msg-quoted { display: block; margin-top: 8px; color: var(--email-muted); white-space: pre-wrap; }
.email-msg-quoted[hidden] { display: none; }

/* ---- Top-bar actions (Compose + Assistant), pinned top-right ----------- */
/* Both controls live in the always-visible top bar (no bottom FABs), so the
   reading-pane body stays fully unobstructed. Stays put on mobile too. */
.email-topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.email-topbar-actions[hidden] { display: none; }
/* Compose — the standout filled action, mirrors the Notes "New note" button:
   on-brand accent gradient, on-accent text, pencil/compose icon. */
/* Compose — bare pencil, fully neutral grey (matches the other action icons).
   No accent tint, no pill, no shadow. The visible "Compose" label is hidden;
   the button keeps its title + aria-label. */
.email-compose-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--email-muted);
  cursor: pointer;
  transition: color .15s ease;
}
.email-compose-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.email-compose-btn span { display: none; }
.email-compose-btn:hover { color: var(--email-ink); }
/* Assistant — bare chat icon, neutral grey, matches Sync/Compose. */
.email-assistant-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border: 0;
  background: none;
  color: var(--email-muted);
  cursor: pointer;
  transition: color .15s ease;
}
.email-assistant-btn svg { width: 20px; height: 20px; }
.email-assistant-btn:hover { color: var(--email-ink); }

/* ---- Top bar, persistent state: quick-filter chips + sync -------------- */
.email-topbar-persistent {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  margin-left: 4px;
}
.email-topbar-persistent[hidden] { display: none; }
.email-quick-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.email-quick-chips::-webkit-scrollbar { display: none; }
/* Enclosure-free filter "chips": bare text/icons sitting directly on the bar.
   Active state = theme accent colour + medium weight only (no fill/border).
   Inactive = muted grey via currentColor, so icons adapt across all 5 themes. */
.email-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;          /* >=40px tap target (visible icon ~20px) */
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--email-muted);
  font: inherit;
  font-size: 14.9px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color .12s ease;
}
.email-chip:hover { color: var(--email-ink); }
.email-chip.is-active { color: var(--email-accent); font-weight: 600; }
/* Icon filter chips (Unread / Starred / Has attachment). "All" stays a text
   chip. Icons use currentColor, so they inherit the inactive (--email-muted)
   and active (--email-accent) chip colours from the rules above. Icon-only when
   inactive; icon + label when active (readable without crowding). */
.email-quick-chips .email-chip-icon {
  gap: 6px;
  min-width: 40px;          /* square >=40px tap target when icon-only */
  padding: 0 8px;
}
.email-quick-chips .email-chip-icon .email-chip-ico { display: inline-flex; align-items: center; }
.email-quick-chips .email-chip-icon svg { width: 20px; height: 20px; display: block; }
.email-quick-chips .email-chip-icon .email-chip-label { display: none; }
.email-quick-chips .email-chip-icon.is-active .email-chip-label { display: inline; }
.email-quick-chips .email-chip-icon.is-active { min-width: 0; padding: 0 10px; }
/* Unread badge dot: accent fill + a thin ring in the bar's background colour so
   it reads as a badge. var() lives in CSS here (not the SVG presentation
   attribute, where it would not resolve cross-browser). */
.email-unread-badge { fill: var(--cw-accent); stroke: var(--cw-surface); }
.email-sync { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.email-sync-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: none;
  color: var(--email-muted);
  cursor: pointer;
  transition: color .12s ease;
}
.email-sync-btn svg { width: 20px; height: 20px; }
.email-sync-btn:hover { color: var(--email-ink); }
/* Accent only while actively syncing — transient functional feedback. */
.email-sync-btn.is-syncing { color: var(--email-accent); pointer-events: none; }
.email-sync-btn.is-syncing svg { animation: email-sync-spin .8s linear infinite; }
@keyframes email-sync-spin { to { transform: rotate(360deg); } }
.email-last-synced {
  font-size: 13.8px;
  color: var(--email-faint);
  white-space: nowrap;
}

/* ---- Top bar, contextual state: bulk-action bar ----------------------- */
/* Shown only while one or more rows are selected; replaces the persistent
   controls + back/folder/compose so the whole bar becomes a triage toolbar. */
.email-bulk-bar { display: none; }
.email-topbar.is-selecting > .email-back,
.email-topbar.is-selecting > .email-folder-pill,
.email-topbar.is-selecting > .email-topbar-persistent,
.email-topbar.is-selecting > .email-topbar-actions { display: none !important; }
.email-topbar.is-selecting > .email-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.email-bulk-clear {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--email-ink);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.email-bulk-clear svg { width: 20px; height: 20px; }
.email-bulk-clear:hover { background: var(--email-tint); color: var(--email-accent); }
.email-bulk-count {
  flex: 0 0 auto;
  font-size: 16.1px;
  font-weight: 600;
  color: var(--email-ink);
  white-space: nowrap;
}
.email-bulk-selectall {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 6px;
  border: 0; border-radius: 999px;
  background: none;
  color: var(--email-muted);
  font: inherit; font-size: 14.9px;
  cursor: pointer;
}
.email-bulk-selectall:hover { background: var(--email-bg-soft); color: var(--email-ink); }
.email-bulk-selectall-box {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1.5px solid var(--email-sep);
  border-radius: 6px;
  color: transparent;
}
.email-bulk-selectall-box svg { width: 16px; height: 16px; }
.email-bulk-selectall.is-on .email-bulk-selectall-box {
  background: var(--email-accent);
  border-color: var(--email-accent);
  color: var(--cw-text-on-accent);
}
.email-bulk-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.email-bulk-actions::-webkit-scrollbar { display: none; }
.email-bulk-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border: 0; border-radius: 8px;
  background: none;
  color: var(--email-soft-ink);
  font: inherit; font-size: 14.9px; font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.email-bulk-btn svg { width: 17px; height: 17px; flex: 0 0 17px; }
.email-bulk-btn:hover { background: var(--email-bg-soft); color: var(--email-accent); }
.email-bulk-btn-danger:hover { background: var(--cw-danger-bg); color: var(--cw-danger); }

/* "Move to" dropdown inside the bulk bar. */
.email-move { position: relative; flex: 0 0 auto; }
.email-move-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 150px; padding: 6px;
  background: var(--cw-surface);
  border: 1px solid var(--email-sep);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  display: flex; flex-direction: column; gap: 2px;
}
.email-move-menu[hidden] { display: none; }
.email-move-menu button {
  text-align: left; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14.9px; color: var(--email-ink);
  padding: 8px 10px; border-radius: 8px;
}
.email-move-menu button:hover { background: var(--email-tint); color: var(--email-accent); }

/* ---- Undo snackbar ---------------------------------------------------- */
.email-snackbar {
  position: absolute;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 11px 12px 11px 18px;
  border-radius: 12px;
  background: var(--cw-text);
  color: var(--cw-surface);
  box-shadow: 0 12px 34px rgba(0,0,0,.30);
  font-size: 15.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.email-snackbar.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.email-snackbar[hidden] { display: none; }
.email-snackbar-msg { font-weight: 500; }
.email-snackbar-undo {
  flex: 0 0 auto;
  border: 0; border-radius: 8px;
  padding: 6px 12px;
  background: none;
  color: var(--email-accent);
  font: inherit; font-size: 15.5px; font-weight: 700;
  cursor: pointer;
}
.email-snackbar-undo:hover { background: color-mix(in srgb, var(--email-accent) 18%, transparent); }

/* ---- Compose panel: three size modes ----------------------------------- */
/* Dimmed backdrop behind the expanded/full-screen composer (docked has none). */
.email-compose-backdrop {
  position: fixed;
  inset: 0;
  z-index: 128;
  background: rgba(0, 0, 0, .38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.email-compose-backdrop:not([hidden]) { opacity: 1; pointer-events: auto; }

.email-compose {
  position: fixed;
  z-index: 130;
  background: var(--cw-surface);
  border: 1px solid var(--email-sep);
  border-radius: 12px;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, .10), 0 18px 50px rgba(0, 0, 0, .22);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: transform .24s cubic-bezier(.32, .72, 0, 1), opacity .2s ease,
              width .18s ease, height .18s ease;
}
.email-compose.is-open { opacity: 1; pointer-events: auto; }

/* DOCKED: bottom-right quick-reply popup; size persists via --compose-w/h. */
.email-compose.is-docked {
  right: 24px; bottom: 0; left: auto; top: auto;
  width: var(--compose-w, 480px);
  height: var(--compose-h, 540px);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 70px);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  transform: translateY(12px);
}
.email-compose.is-docked.is-open { transform: translateY(0); }
.email-compose.is-docked.is-min { height: 48px !important; }

/* EXPANDED: large centered modal — a real writing surface. */
.email-compose.is-expanded {
  left: 50%; top: 50%; right: auto; bottom: auto;
  width: min(880px, calc(100vw - 64px));
  height: min(86vh, 920px);
  transform: translate(-50%, -48%) scale(.99);
}
.email-compose.is-expanded.is-open { transform: translate(-50%, -50%) scale(1); }

/* FULL: edge-to-edge. */
.email-compose.is-full {
  inset: 0;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  border: 0; border-radius: 0;
  transform: translateY(8px);
}
.email-compose.is-full.is-open { transform: none; }
.email-compose-head {
  flex: 0 0 auto;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 16px;
  background: var(--email-bg-soft);
  border-bottom: 1px solid var(--email-hairline);
  cursor: pointer;
}
.email-compose-head strong { font-size: 16.1px; font-weight: 500; color: var(--email-ink); }
.email-compose-head-actions { display: flex; align-items: center; gap: 2px; }
.email-compose-icon {
  width: 30px; height: 30px;
  border: 0; border-radius: 7px;
  background: none; color: var(--email-muted);
  display: grid; place-items: center; cursor: pointer;
}
.email-compose-icon svg { width: 16px; height: 16px; }
.email-compose-icon:hover { background: rgba(0, 0, 0, .06); color: var(--email-ink); }

.email-compose-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.email-compose.is-min .email-compose-body,
.email-compose.is-min .email-compose-toolbar { display: none; }
.email-compose-fields { flex: 0 0 auto; }
.email-compose-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--email-hairline);
}
.email-compose-row[hidden] { display: none; }

/* ---- Recipient chip fields (To / Cc / Bcc) ---------------------------- */
.email-rcpt-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--email-hairline);
}
.email-rcpt-row[hidden] { display: none; }
.email-rcpt-label {
  flex: 0 0 auto;
  padding-top: 6px;
  font-size: 14.9px;
  color: var(--email-muted);
}
.email-chips {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.email-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 24px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  background: var(--email-tint);
  color: var(--email-accent);
  font-size: 14.4px;
  font-weight: 500;
}
.email-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-chip.is-invalid {
  background: var(--cw-danger-bg);
  color: var(--cw-danger);
}
.email-chip-x {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none; color: inherit;
  cursor: pointer;
  opacity: .75;
}
.email-chip-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); }
.email-chip-x svg { width: 12px; height: 12px; }
.email-chip-input {
  flex: 1 1 80px;
  min-width: 80px;
  height: 26px;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 14.9px;
  color: var(--email-ink);
}
.email-chip-input::placeholder { color: var(--email-faint); }
.email-rcpt-toggles { flex: 0 0 auto; display: inline-flex; gap: 2px; padding-top: 3px; }
.email-rcpt-toggle {
  border: 0; background: none;
  color: var(--email-muted);
  font: inherit; font-size: 14.4px; font-weight: 500;
  padding: 3px 6px; border-radius: 6px;
  cursor: pointer;
}
.email-rcpt-toggle:hover { color: var(--email-accent); background: var(--email-bg-soft); }
.email-rcpt-toggle.is-on { color: var(--email-accent); }

/* ---- Contact autocomplete -------------------------------------------- */
.email-ac-menu {
  position: absolute;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  padding: 5px;
  background: var(--cw-surface);
  border: 1px solid var(--email-sep);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
}
.email-ac-menu[hidden] { display: none; }
.email-ac-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.email-ac-item.is-active, .email-ac-item:hover { background: var(--email-tint); }
.email-ac-name { font-size: 14.9px; color: var(--email-ink); }
.email-ac-email { font-size: 13.8px; color: var(--email-muted); }
.email-ac-item.is-active .email-ac-email { color: var(--email-accent); }
.email-compose-row label {
  flex: 0 0 auto;
  font-size: 14.9px;
  color: var(--email-muted);
}
.email-compose-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 14.9px;
  color: var(--email-ink);
  font-family: inherit;
}
.email-compose-row input:focus { outline: none; }
.email-cc-toggle {
  flex: 0 0 auto;
  border: 0; background: none;
  color: var(--email-muted);
  font-size: 14.9px; cursor: pointer;
}
.email-cc-toggle:hover { color: var(--email-accent); }
.email-compose-textarea {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  border: 0;
  padding: 14px 16px;
  font-size: 16.1px;
  line-height: 1.6;
  color: var(--email-ink);
  font-family: inherit;
}
.email-compose-textarea:focus { outline: none; }
.email-compose-textarea::placeholder { color: var(--email-faint); }

/* ---- Compose rich-text editor (shared Quill module, email preset) -------
   Tokens only (all --email-* alias --cw-*), so the composer matches Notes and
   stays legible in dark mode. The toolbar flattens Quill's snow chrome; the
   editor area fills the panel and scrolls. */
.email-compose-fmt {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-bottom: 1px solid var(--email-hairline);
  overflow-x: auto;
}
.email-compose-fmt .ql-toolbar.ql-snow { border: 0; padding: 0; background: none; white-space: nowrap; }
.email-compose-fmt .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; }
.email-compose-fmt .ql-stroke { stroke: var(--email-muted); }
.email-compose-fmt .ql-fill { fill: var(--email-muted); }
.email-compose-fmt .ql-picker { color: var(--email-muted); }
.email-compose-fmt button:hover .ql-stroke,
.email-compose-fmt button.ql-active .ql-stroke,
.email-compose-fmt .ql-picker-label:hover .ql-stroke,
.email-compose-fmt .ql-picker-item:hover .ql-stroke { stroke: var(--email-accent); }
.email-compose-fmt button:hover .ql-fill,
.email-compose-fmt button.ql-active .ql-fill { fill: var(--email-accent); }
.email-compose-fmt .ql-picker-label:hover,
.email-compose-fmt .ql-picker-item:hover,
.email-compose-fmt button:hover,
.email-compose-fmt button.ql-active { color: var(--email-accent); }

.email-body-editor {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  --rte-font: 14px;
}
.email-body-editor.ql-container { border: 0; background: none; font-family: inherit; font-size: var(--rte-font, 16px); }
.email-body-editor .ql-editor {
  padding: 14px 16px;
  min-height: 160px;
  color: var(--email-ink);
  line-height: 1.6;
}
.email-body-editor .ql-editor.ql-blank::before {
  color: var(--email-faint);
  font-style: normal;
  left: 16px;
  right: 16px;
}
.email-body-editor .ql-editor a { color: var(--email-accent); }
.email-body-editor .ql-editor h1,
.email-body-editor .ql-editor h2,
.email-body-editor .ql-editor h3,
.email-body-editor .ql-editor strong { color: var(--email-ink); }
.email-body-editor .ql-editor blockquote {
  border-left: 3px solid var(--email-sep);
  margin: 0 0 10px;
  padding-left: 12px;
  color: var(--email-muted);
}
.email-body-editor .ql-editor img { max-width: 100%; height: auto; border-radius: 6px; }

.email-compose-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--email-hairline);
}
.email-send-btn {
  height: 36px;
  padding: 0 22px;
  border: 0; border-radius: 999px;
  background: var(--email-accent);
  color: var(--cw-surface);
  font-size: 16.1px; font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease;
}
.email-send-btn:hover { filter: brightness(1.06); }
.email-send-btn:disabled { opacity: .6; cursor: default; }
.email-tool-btn {
  width: 34px; height: 34px;
  border: 0; border-radius: 8px;
  background: none; color: var(--email-muted);
  display: grid; place-items: center; cursor: pointer;
}
.email-tool-btn svg { width: 18px; height: 18px; }
.email-tool-btn:hover { background: var(--email-bg-soft); color: var(--email-ink); }

/* Quiet draft indicator (Saving… / Saved). */
.email-compose-status { margin-left: auto; font-size: 13.8px; color: var(--email-muted); display: inline-flex; align-items: center; gap: 5px; }
.email-compose-status.is-saving { color: var(--email-muted); }
.email-compose-status.is-saved { color: var(--cw-success, var(--email-accent)); }
.email-compose-status.is-saved::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ---- Body is the dominant region: generous min-height, taller in the big
   modes, comfortable line length in expanded/full. -------------------------- */
.email-body-editor { flex: 1 1 auto; }
.email-compose.is-docked .email-body-editor .ql-editor { min-height: 200px; }
.email-compose.is-expanded .email-body-editor .ql-editor,
.email-compose.is-full .email-body-editor .ql-editor {
  min-height: 360px;
  max-width: 820px;        /* comfortable measure for long-form writing */
  margin: 0 auto;
  padding: 18px 24px;
  font-size: 17.2px;
  line-height: 1.7;
}
.email-compose.is-expanded .email-compose-fmt,
.email-compose.is-full .email-compose-fmt { padding: 8px clamp(16px, 4vw, 28px); }

/* ---- Attachment chips ------------------------------------------------- */
.email-attach-list {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--email-hairline);
  max-height: 132px;
  overflow-y: auto;
}
.email-attach-list[hidden] { display: none; }
.email-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--email-sep);
  border-radius: 10px;
  background: var(--cw-surface);
}
.email-attach-chip-ic {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--email-bg-soft);
  color: var(--email-muted);
}
.email-attach-chip-ic svg { width: 15px; height: 15px; }
.email-attach-chip-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.email-attach-chip-name {
  font-size: 14.4px; font-weight: 500; color: var(--email-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-attach-chip-size { font-size: 12.6px; color: var(--email-muted); }
.email-attach-chip-x {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: none; color: var(--email-muted);
  cursor: pointer;
}
.email-attach-chip-x:hover { background: var(--cw-danger-bg); color: var(--cw-danger); }
.email-attach-chip-x svg { width: 14px; height: 14px; }

/* ---- Drag-and-drop overlay ------------------------------------------- */
.email-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: none;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--email-accent) 12%, var(--cw-surface));
}
.email-compose.is-dropping .email-drop-overlay { display: grid; }
.email-drop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 40px;
  border: 2px dashed var(--email-accent);
  border-radius: 16px;
  color: var(--email-accent);
  font-size: 16.1px; font-weight: 600;
  background: var(--cw-surface);
  pointer-events: none;
}
.email-drop-card svg { width: 30px; height: 30px; }

/* ---- Docked resize handles ------------------------------------------- */
.email-resize { position: absolute; z-index: 20; display: none; }
.email-compose.is-docked .email-resize { display: block; }
.email-resize-top { top: 0; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.email-resize-left { left: 0; top: 10px; bottom: 0; width: 7px; cursor: ew-resize; }
.email-resize-corner { top: 0; left: 0; width: 16px; height: 16px; cursor: nwse-resize; }
body.email-compose-resizing { cursor: nwse-resize !important; user-select: none; }
body.email-compose-resizing iframe { pointer-events: none; }
/* Don't animate width/height while the user is actively dragging an edge. */
body.email-compose-resizing .email-compose { transition: none !important; }

/* ---- Sidebar backdrop (mobile slide-in) -------------------------------- */
.email-sidebar-backdrop {
  position: absolute;
  inset: 52px 0 0 0;
  z-index: 8;
  background: rgba(0, 0, 0, .28);
}
.email-sidebar-backdrop[hidden] { display: none; }

/* ======================================================================
   MOBILE — single-pane (≤768px)
   ====================================================================== */
@media (max-width: 768px) {
  .email-folder-pill { display: inline-flex; }

  .email-shell { position: relative; }

  /* Sidebar becomes a slide-in drawer */
  .email-sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    z-index: 9;
    width: 248px; flex-basis: 248px;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.32, .72, 0, 1);
    box-shadow: 8px 0 30px rgba(0, 0, 0, .12);
  }
  .email-focus-view.is-sidebar-open .email-sidebar { transform: translateX(0); }

  /* List fills the screen by default */
  .email-list-pane {
    flex: 1 1 auto;
    width: auto;
    border-right: 0;
  }

  /* Reading pane slides over the list when an email is open */
  .email-reading-pane {
    position: absolute;
    inset: 0;
    z-index: 6;
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.32, .72, 0, 1);
  }
  .email-focus-view.is-reading .email-reading-pane { transform: translateX(0); }
  .email-msg-back { display: inline-flex; }

  /* Compose is always full-screen on phones, whatever the saved mode. */
  .email-compose,
  .email-compose.is-docked,
  .email-compose.is-expanded,
  .email-compose.is-full {
    inset: 0;
    right: 0; left: 0; top: 0; bottom: 0;
    width: 100%; height: 100%;
    max-width: 100%; max-height: 100%;
    border: 0; border-radius: 0;
    transform: translateY(8px);
  }
  .email-compose.is-open { transform: none; }
  .email-compose.is-docked.is-min { height: 100% !important; }
  /* No edge-resize or expand-cycle on touch. */
  .email-compose .email-resize,
  .email-compose [data-email="compose-expand"] { display: none; }
  .email-compose-backdrop { display: none; }
  .email-compose.is-expanded .email-body-editor .ql-editor,
  .email-compose.is-full .email-body-editor .ql-editor { max-width: none; margin: 0; padding: 16px; }

  /* Compose is already a bare 40px icon from the desktop rules — mobile matches
     desktop exactly (no enclosure, label hidden), so nothing to override here. */

  /* Slim top bar on phones: the quiet "last synced" caption is dropped and the
     chips/actions scroll horizontally so everything stays reachable. */
  .email-last-synced { display: none; }
  .email-topbar-persistent { gap: 8px; margin-left: 0; }
  .email-chip { height: 28px; padding: 0 11px; font-size: 14.4px; }
  /* Keep the icon filter chips a >=40px tap target on phones. */
  .email-quick-chips .email-chip-icon { height: auto; min-height: 40px; min-width: 40px; }

  /* Bulk bar: icon-only buttons so the full action set fits a phone width. */
  .email-bulk-btn span,
  .email-bulk-selectall-lbl { display: none; }
  .email-bulk-btn { padding: 0; width: 36px; justify-content: center; }
  .email-bulk-count { font-size: 14.9px; }
}

/* Touch (no hover): the long-press-revealed actions take over the meta slot. */
@media (hover: none) {
  .email-row.is-acting .email-row-rest { display: none; }
  .email-row.is-acting .email-row-actions { display: inline-flex; }
}

/* ---- Connect Gmail prompt (shown until OAuth is wired) ----------------- */
.email-connect-prompt {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: linear-gradient(180deg, var(--email-tint), var(--cw-surface) 60%);
}
.email-connect-prompt[hidden] { display: none !important; }
.email-connect-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 360px;
  gap: 8px;
}
.email-connect-icon {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border-radius: 22px;
  background: var(--email-accent);
  color: var(--cw-surface);
  box-shadow: 0 16px 38px rgba(12, 139, 94, .32);
  margin-bottom: 10px;
}
.email-connect-icon svg { width: 34px; height: 34px; }
.email-connect-title { font-size: 25.3px; font-weight: 700; color: var(--email-ink); margin: 0; }
.email-connect-sub { font-size: 16.7px; color: var(--email-muted); margin: 0 0 14px; }
.email-connect-btn {
  border: 0;
  border-radius: 999px;
  padding: 13px 30px;
  font-size: 17.2px;
  font-weight: 600;
  color: var(--cw-surface);
  background: var(--email-accent);
  box-shadow: 0 10px 26px rgba(12, 139, 94, .34);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.email-connect-btn:hover { background: var(--email-accent-strong); transform: translateY(-1px); }
.email-connect-btn:active { transform: scale(.98); }
.email-connect-btn:disabled { opacity: .65; cursor: default; transform: none; }
.email-connect-note { font-size: 14.9px; color: var(--email-muted); margin: 6px 0 0; }

/* ---- Sandboxed HTML email body ---------------------------------------- */
.email-msg-frame {
  flex: 1 1 auto;
  width: 100%;
  max-width: 760px;
  min-height: 360px;
  border: 0;
  background: var(--cw-surface);
}

/* ===== AI inbox triage ===== */
.email-ai-panel {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--cw-surface);
  border-left: 1px solid var(--cw-surface-muted);
  overflow: hidden;
}
.email-ai-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--cw-surface-muted);
}
.email-ai-head h3 { margin: 0; font-size: 18.4px; font-weight: 700; }
.email-ai-scope { margin: 4px 0 0; font-size: 13.8px; color: var(--cw-text-muted); }
.email-ai-close {
  flex: none;
  width: 32px; height: 32px;
  border: 0; border-radius: 8px;
  background: var(--cw-accent-tint); cursor: pointer; color: var(--cw-text-muted);
}
.email-ai-close svg { width: 18px; height: 18px; }
.email-ai-summary { padding: 12px 18px 0; }
.email-ai-summary-card {
  background: linear-gradient(135deg, var(--cw-accent-tint), var(--cw-accent-tint));
  border: 1px solid var(--cw-accent-tint);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15.5px; line-height: 1.5; color: var(--cw-text);
}
.email-ai-summary-card strong { display: block; color: var(--cw-accent-active); margin-bottom: 4px; font-size: 13.8px; text-transform: uppercase; letter-spacing: .03em; }
.email-ai-loading, .email-ai-empty { padding: 14px 18px; color: var(--cw-text-muted); font-size: 15.5px; }
.email-ai-list { flex: 1; overflow-y: auto; padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.email-ai-item {
  border: 1px solid var(--cw-surface-muted); border-radius: 12px; padding: 12px 14px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.email-ai-item:hover { border-color: var(--cw-accent-tint); box-shadow: 0 2px 10px rgba(12, 139, 94,.08); }
.email-ai-item:active { transform: scale(.997); }
.email-ai-item-top { display: flex; justify-content: space-between; gap: 8px; }
.email-ai-from { font-weight: 600; font-size: 15.5px; color: var(--cw-text); }
.email-ai-when { font-size: 13.8px; color: var(--cw-text-subtle); flex: none; }
.email-ai-subj { font-size: 15.5px; color: var(--cw-text); margin-top: 2px; }
.email-ai-line { font-size: 14.4px; color: var(--cw-accent-text); margin-top: 4px; line-height: 1.45; }
.email-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.email-ai-chip {
  font-size: 12.6px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--cw-accent-tint); color: var(--cw-accent-text);
}
.email-ai-chip.is-await { background: var(--cw-warning-bg); color: var(--cw-warning); }
.email-ai-chip.is-vip { background: var(--cw-accent-tint); color: var(--cw-accent-active); }
.email-ai-chip.is-urgent { background: var(--cw-danger-bg); color: var(--cw-danger); }
.email-ai-chip.is-cat { background: var(--cw-accent-tint); color: var(--cw-accent-text); }
.email-ai-actions { margin: 8px 0 0; padding-left: 18px; font-size: 14.4px; color: var(--cw-text-muted); }
.email-ai-actions li { margin: 2px 0; }
.email-ai-meta { padding: 0 18px 14px; margin: 0; font-size: 12.6px; color: var(--cw-text-subtle); }

.email-ai-search { display: flex; gap: 8px; padding: 12px 18px 4px; }
.email-ai-search input {
  flex: 1; border: 1px solid var(--cw-border); border-radius: 10px;
  padding: 9px 12px; font-size: 14.9px; outline: none; background: var(--cw-surface);
}
.email-ai-search input:focus { border-color: var(--cw-accent-tint); box-shadow: 0 0 0 3px rgba(12, 139, 94,.12); }
.email-ai-ask-btn {
  flex: none; border: 0; border-radius: 10px; padding: 9px 16px;
  background: var(--cw-accent); color: var(--cw-surface); font-weight: 600; font-size: 14.9px; cursor: pointer;
}
.email-ai-ask-btn:hover { background: var(--cw-accent-active); }

/* ===== Inbox search bar ===== */
/* Fills the full width of the list column with only a hair of side gutter, so
   it's comfortable to scan and type in. */
.email-search-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 8px 6px;
  padding: 8px 12px;
  border: 1px solid var(--email-sep);
  border-radius: 10px;
  background: var(--email-bg-soft);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.email-search-bar:focus-within {
  border-color: var(--email-accent);
  box-shadow: 0 0 0 3px rgba(12, 139, 94, .12);
  background: var(--cw-surface);
}
.email-search-icon { width: 16px; height: 16px; color: var(--email-muted); flex: none; }
.email-search-bar input {
  flex: 1;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 15.5px;
  color: var(--email-ink);
}
.email-search-bar input::-webkit-search-cancel-button { display: none; }
.email-search-clear {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none; color: var(--email-muted);
  cursor: pointer;
}
.email-search-clear:hover { background: rgba(0, 0, 0, .06); color: var(--email-ink); }
.email-search-clear svg { width: 14px; height: 14px; }

/* ===== Draggable splitter: list column <-> reading pane ===== */
.email-splitter {
  flex: 0 0 6px;
  width: 6px;
  align-self: stretch;
  position: relative;
  cursor: col-resize;
  background: transparent;
  z-index: 5;
  touch-action: none;            /* let JS own touch drags */
}
/* The 1px divider line, centered in the 6px hit area. */
.email-splitter::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--email-sep);
  transition: background .12s ease, width .12s ease;
}
.email-splitter:hover::before,
.email-splitter:focus-visible::before,
.email-splitter.is-dragging::before {
  width: 2px;
  background: var(--email-accent);
}
.email-splitter:focus-visible { outline: none; }
/* While dragging: global col-resize cursor, no text selection, and freeze pane
   pointer events so the mouse can't get "captured" by reader content. */
body.email-col-resizing { cursor: col-resize !important; user-select: none; }
body.email-col-resizing .email-list-pane,
body.email-col-resizing .email-reading-pane { pointer-events: none; }

@media (max-width: 768px) {
  /* Single-pane mobile: no resizing; list fills, reading pane overlays. */
  .email-splitter { display: none; }
  .email-list-pane { flex: 1 1 auto; width: auto; }
}

/* ===== Attachments (view-only) in the reading pane ===== */
.email-att-wrap { margin-top: 26px; max-width: 640px; }
.email-att-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 14.4px; font-weight: 600; letter-spacing: .01em;
  color: var(--email-muted);
  margin-bottom: 10px;
}
.email-att-head svg { width: 15px; height: 15px; }
.email-att-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
/* Each attachment is a single click target → opens the view-only viewer. */
.email-att {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--email-sep);
  border-radius: 12px;
  background: var(--cw-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.email-att:hover {
  border-color: var(--email-accent);
  background: var(--email-tint);
  box-shadow: 0 2px 10px rgba(12, 139, 94, .08);
}
.email-att-icon {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--email-bg-soft);
  color: var(--email-muted);
}
.email-att-icon svg { width: 19px; height: 19px; }
.email-att-icon.is-pdf { background: var(--cw-danger-bg); color: var(--cw-danger); }
.email-att-icon.is-img { background: var(--cw-accent-tint); color: var(--cw-accent-text); }
.email-att-meta { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.email-att-name {
  font-size: 15.5px; font-weight: 600; color: var(--email-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-att-sub { font-size: 13.2px; color: var(--email-muted); }
.email-att-action { flex: 0 0 auto; display: flex; align-items: center; }
.email-att-view {
  font-size: 13.8px; font-weight: 600; color: var(--email-accent);
  padding: 4px 11px; border-radius: 999px; border: 1px solid transparent;
}
.email-att:hover .email-att-view { border-color: var(--email-accent); background: var(--cw-surface); }
/* Tiny inline spinner shown on the chip while the signed URL is minted. */
.email-att-spin {
  display: none;
  width: 14px; height: 14px; margin-right: 2px;
  border: 2px solid var(--email-faint);
  border-top-color: var(--email-accent);
  border-radius: 50%;
  animation: email-att-spin .7s linear infinite;
}
.email-att.is-loading { cursor: progress; }
.email-att.is-loading .email-att-spin { display: inline-block; }
.email-att.is-loading .email-att-view { display: none; }
@keyframes email-att-spin { to { transform: rotate(360deg); } }

/* ======================================================================
   In-module Calendar (read-only week view) + contained scheduler
   ====================================================================== */
/* Left-rail "Calendar" item reuses .email-folder styling; active state too. */
.email-cal-nav { margin-top: 2px; }

/* View swap: Calendar replaces the list + reading panes; the rail stays. */
.email-calendar-view {
  display: none;
  position: relative;          /* contains the scheduler modal (dims only here) */
  flex: 1;
  min-width: 0;
  flex-direction: column;
  background: var(--cw-surface);
}
.email-focus-view.is-calendar .email-list-pane,
.email-focus-view.is-calendar .email-splitter,
.email-focus-view.is-calendar .email-reading-pane,
.email-focus-view.is-calendar .email-ai-panel { display: none !important; }
.email-focus-view.is-calendar .email-calendar-view { display: flex; }
/* The mail-list filter chips + sync are irrelevant in the calendar view. */
.email-focus-view.is-calendar .email-topbar-persistent { visibility: hidden; }

/* ---- Week-view header ---- */
.ecal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--cw-border);
}
.ecal-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ecal-today {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--cw-border); border-radius: 999px;
  background: var(--cw-surface); color: var(--cw-text);
  font: inherit; font-size: 14.9px; font-weight: 600; cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.ecal-today:hover { border-color: var(--cw-accent-text); color: var(--cw-accent-text); }
.ecal-arrow {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: none; color: var(--cw-text-muted); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.ecal-arrow svg { width: 20px; height: 20px; }
.ecal-arrow:hover { background: var(--cw-surface-muted); color: var(--cw-accent-text); }
.ecal-range { margin: 0 4px; font-size: 18.4px; font-weight: 600; color: var(--cw-text); white-space: nowrap; }
.ecal-head-actions { display: flex; align-items: center; gap: 14px; }
.ecal-new {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 15px 0 12px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-active));
  color: var(--cw-text-on-accent);
  font: inherit; font-size: 14.9px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--cw-accent) 30%, transparent);
}
.ecal-new svg { width: 16px; height: 16px; }
.ecal-new:hover { filter: brightness(1.05); }
.ecal-open-full { font-size: 14.9px; font-weight: 600; color: var(--cw-accent-text); text-decoration: none; white-space: nowrap; }
.ecal-open-full:hover { text-decoration: underline; }

/* ---- Week grid (self-contained; mirrors the Calendar week layout) ---- */
.ecal-grid-host { position: relative; flex: 1; min-height: 0; display: flex; }
.ecal-grid {
  --ecal-cols: 7;
  --ecal-gutter: 54px;
  --ecal-hour: 46px;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.ecal-head-row {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: var(--ecal-gutter) repeat(var(--ecal-cols), minmax(0, 1fr));
  border-bottom: 1px solid var(--cw-border);
}
.ecal-colhead {
  padding: 7px 4px; text-align: center;
  border-left: 1px solid var(--cw-border);
  font-size: 13.8px; color: var(--cw-text-muted);
}
.ecal-colhead b { display: block; font-size: 18.4px; font-weight: 600; color: var(--cw-text); line-height: 1.2; }
.ecal-colhead.is-today b {
  color: var(--cw-text-on-accent); background: var(--cw-accent);
  width: 26px; height: 26px; margin: 1px auto 0; border-radius: 50%;
  display: grid; place-items: center;
}
.ecal-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ecal-body {
  position: relative;
  display: grid;
  grid-template-columns: var(--ecal-gutter) repeat(var(--ecal-cols), minmax(0, 1fr));
  height: calc(var(--ecal-hour) * 24);
}
.ecal-gutter { position: relative; }
.ecal-hour {
  height: var(--ecal-hour);
  padding-right: 6px;
  text-align: right;
  font-size: 12.1px; color: var(--cw-text-subtle);
  transform: translateY(-6px);
}
.ecal-col {
  position: relative;
  border-left: 1px solid var(--cw-border);
  background: repeating-linear-gradient(
    var(--cw-border) 0 1px, transparent 1px var(--ecal-hour));
  cursor: pointer;
}
.ecal-col.is-today { background-color: color-mix(in srgb, var(--cw-accent) 5%, transparent); }
.ecal-event {
  position: absolute;
  left: 2px; right: 3px;
  border-radius: 6px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--ev, var(--cw-accent)) 16%, var(--cw-surface));
  border-left: 3px solid var(--ev, var(--cw-accent));
  color: var(--cw-text);
  font-size: 13.2px; line-height: 1.25;
  overflow: hidden; cursor: default;
}
.ecal-event.is-optimistic { opacity: .72; }
.ecal-event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecal-event-time { font-size: 12.1px; color: var(--cw-text-muted); }
.ecal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--cw-danger); z-index: 4; }
.ecal-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--cw-danger); }
.ecal-sel {
  position: absolute; left: 2px; right: 3px; z-index: 3;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cw-accent) 22%, transparent);
  border: 1.5px solid var(--cw-accent);
  pointer-events: none;
}
.ecal-empty { padding: 40px 20px; text-align: center; color: var(--cw-text-muted); font-size: 14.9px; }

/* Loading / empty / error overlays so the pane is never blank. */
.ecal-state {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: color-mix(in srgb, var(--cw-surface) 78%, transparent);
  color: var(--cw-text-muted);
  font-size: 15.5px;
}
.ecal-state.is-empty {
  /* a quiet hint pinned near the top; clicks pass through to the grid slots */
  pointer-events: none;
  background: none;
  align-content: start;
  padding-top: 14px;
}
.ecal-state.is-empty span {
  background: var(--cw-surface-muted);
  border-radius: 999px;
  padding: 6px 14px;
}
.ecal-state.is-error strong { font-size: 17.2px; font-weight: 600; color: var(--cw-text); }
.ecal-spinner {
  width: 26px; height: 26px;
  border: 3px solid var(--cw-border);
  border-top-color: var(--cw-accent-text);
  border-radius: 50%;
  animation: ecal-spin .8s linear infinite;
}
@keyframes ecal-spin { to { transform: rotate(360deg); } }
.ecal-retry {
  margin-top: 4px;
  height: 34px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: var(--cw-accent); color: var(--cw-text-on-accent);
  font: inherit; font-size: 14.9px; font-weight: 600; cursor: pointer;
}
.ecal-retry:hover { background: var(--cw-accent-active); }

/* ---- Contained scheduler modal (dims only the content area) ---- */
.ecal-modal { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 18px; }
.ecal-modal[hidden] { display: none; }
.ecal-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.ecal-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.ecal-modal-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cw-border);
}
.ecal-modal-head strong { font-size: 17.2px; font-weight: 600; color: var(--cw-text); }
.ecal-modal-x {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--cw-text-muted); cursor: pointer;
}
.ecal-modal-x svg { width: 18px; height: 18px; }
.ecal-modal-x:hover { background: var(--cw-surface-muted); color: var(--cw-text); }
.ecal-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.ecal-title {
  width: 100%; border: 0; border-bottom: 2px solid var(--cw-border);
  background: none; padding: 6px 2px; font: inherit; font-size: 20.7px; font-weight: 600;
  color: var(--cw-text); outline: none;
}
.ecal-title:focus { border-bottom-color: var(--cw-accent-text); }
.ecal-title::placeholder { color: var(--cw-text-subtle); }
.ecal-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ecal-field > label { font-size: 13.8px; font-weight: 600; color: var(--cw-text-muted); }
.ecal-field-row { display: flex; gap: 18px; flex-wrap: wrap; }
.ecal-field-row .ecal-field { flex: 1 1 160px; }
.ecal-chips {
  min-height: 38px; padding: 5px 8px;
  border: 1px solid var(--cw-border); border-radius: 10px;
}
.ecal-chips:focus-within { border-color: var(--cw-accent-text); }
/* Inline autocomplete under the attendees field. */
.ecal-ac {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 12;
  margin-top: 4px; max-height: 200px; overflow-y: auto; padding: 5px;
  background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
}
.ecal-ac[hidden] { display: none; }
.ecal-mini { height: 230px; border: 1px solid var(--cw-border); border-radius: 12px; overflow: hidden; display: flex; }
.ecal-mini .ecal-grid { --ecal-hour: 26px; --ecal-gutter: 42px; }
.ecal-mini .ecal-colhead { padding: 5px 2px; font-size: 12.6px; }
.ecal-mini .ecal-colhead b { font-size: 14.9px; }
.ecal-when { font-size: 14.9px; color: var(--cw-text); font-weight: 500; min-height: 18px; }
.ecal-when:empty::before { content: "Pick a slot in the grid above"; color: var(--cw-text-subtle); font-weight: 400; }
.ecal-durs { display: flex; gap: 6px; }
.ecal-durs button {
  height: 32px; padding: 0 12px; border: 1px solid var(--cw-border); border-radius: 999px;
  background: var(--cw-surface); color: var(--cw-text-muted); font: inherit; font-size: 14.9px; cursor: pointer;
}
.ecal-durs button.is-on { background: var(--cw-accent-tint); border-color: var(--cw-accent-text); color: var(--cw-accent-text); font-weight: 600; }
.ecal-select {
  height: 36px; padding: 0 10px; border: 1px solid var(--cw-border); border-radius: 10px;
  background: var(--cw-surface); color: var(--cw-text); font: inherit; font-size: 14.9px; cursor: pointer; width: 100%;
}
.ecal-vaia { display: flex; align-items: center; gap: 9px; font-size: 16.1px; color: var(--cw-text); cursor: pointer; }
.ecal-vaia input { width: 18px; height: 18px; accent-color: var(--cw-accent-text); cursor: pointer; }
.ecal-vaia-ic { display: inline-flex; color: var(--cw-accent-text); }
.ecal-vaia-ic svg { width: 20px; height: 20px; }
.ecal-agenda-fmt { border: 1px solid var(--cw-border); border-bottom: 0; border-radius: 10px 10px 0 0; }
.ecal-agenda { border: 1px solid var(--cw-border); border-radius: 0 0 10px 10px; max-height: 180px; min-height: 90px; }
.ecal-agenda .ql-editor { min-height: 80px; }
.ecal-modal-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--cw-border);
}
.ecal-modal-status { margin-right: auto; font-size: 14.4px; color: var(--cw-text-muted); }
.ecal-btn-ghost { height: 38px; padding: 0 16px; border: 1px solid var(--cw-border); border-radius: 999px; background: var(--cw-surface); color: var(--cw-text); font: inherit; font-size: 16.1px; font-weight: 600; cursor: pointer; }
.ecal-btn-ghost:hover { border-color: var(--cw-accent-text); color: var(--cw-accent-text); }
.ecal-btn-primary { height: 38px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--cw-accent); color: var(--cw-text-on-accent); font: inherit; font-size: 16.1px; font-weight: 700; cursor: pointer; }
.ecal-btn-primary:hover { background: var(--cw-accent-active); }
.ecal-btn-primary:disabled { opacity: .6; cursor: default; }

@media (max-width: 768px) {
  .ecal-head { padding: 10px 12px; }
  .ecal-range { font-size: 16.1px; }
  .ecal-open-full { display: none; }
  /* Horizontal scroll keeps all 7 day columns reachable on a phone. */
  .ecal-grid-host { overflow-x: auto; }
  .ecal-grid { min-width: 680px; }
  .ecal-modal { padding: 0; }
  .ecal-modal-card { width: 100%; height: 100%; max-height: 100%; border: 0; border-radius: 0; }
}

/* ============================================================================
   Mobile email-list legibility (<= 480px only — desktop rows are unchanged).
   Bumps size/weight, raises contrast off the faded grey, forces the native
   system font, and turns OFF the body's -webkit-font-smoothing: antialiased so
   the rows render at full weight (a big part of the "faded" look on iOS).
   ============================================================================ */
@media (max-width: 480px) {
  .email-row-sender,
  .email-row-subject,
  .email-row-snippet,
  .email-row-snippet span {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.4;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
  }
  .email-row-sender  { font-size: 16px; font-weight: 600; color: #1a1a1a; }
  .email-row-subject { font-size: 15px; font-weight: 500; color: #1a1a1a; }
  .email-row-snippet,
  .email-row-snippet span { font-size: 14px; font-weight: 400; color: #5a5a5a; }
}