:root {
  color-scheme: light;

  /* ── Neutrals ──────────────────────────────────────────────────────── */
  --bg: #eef0f5;
  --surface: #ffffff;
  --surface-alt: #f4f5f9;
  --surface-hover: #eaecf2;
  --border: #e2e4ec;
  --border-strong: #cdd0dc;

  --text: #16171d;
  --text-secondary: #4b4d58;
  --muted: #8b8d98;
  --muted-soft: #b4b6c0;

  /* ── Brand accent (indigo/violet) ──────────────────────────────────── */
  --accent: #5b5bf5;
  --accent-hover: #4747e6;
  --accent-active: #3d3dd1;
  --accent-soft: #eeeeff;
  --accent-text: #4a4ae0;

  /* ── Semantic ──────────────────────────────────────────────────────── */
  --urgent: #dc2626;
  --urgent-bg: #fef2f2;
  --high: #c2760c;
  --high-bg: #fef8ec;
  --normal: #2563eb;
  --normal-bg: #eff5ff;
  --low: #6b7280;
  --low-bg: #f2f3f5;

  --ok: #16884d;
  --ok-bg: #eafbf1;
  --err: #d5292f;
  --err-bg: #fdedee;
  --warn: #c2760c;
  --warn-bg: #fef8ec;
  --pending: #6b6d78;
  --pending-bg: #f0f0f4;

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* ── Radius ────────────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ── Shadow ────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(20, 21, 31, 0.06);
  --shadow-sm: 0 2px 4px rgba(20, 21, 31, 0.06), 0 6px 16px rgba(20, 21, 31, 0.07);
  --shadow-md: 0 6px 20px rgba(20, 21, 31, 0.11), 0 2px 6px rgba(20, 21, 31, 0.07);
  --shadow-lg: 0 24px 56px rgba(20, 21, 31, 0.18), 0 6px 16px rgba(20, 21, 31, 0.08);
  --shadow-focus: 0 0 0 3.5px rgba(91, 91, 245, 0.2);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Soft card ground — a whisper of the brand tint, not a loud gradient. */
  --card-gradient: linear-gradient(160deg, #ffffff 0%, #f8f8ff 55%, #f3f3ff 100%);
  /* Main content area's backdrop and the sticky topbar's translucent fill —
     named so dark mode can redefine them instead of leaving a hardcoded
     white/near-white surface showing through. */
  --page-gradient: linear-gradient(160deg, #f4f5fd 0%, #eef0fb 42%, #edf3f5 100%);
  --header-bg: rgba(255, 255, 255, 0.92);

  /* Decorative per-feature colors (Overview page) — deliberately separate from
     the semantic priority/status palette above, so a "blue" feature card never
     gets confused for "normal priority" meaning. */
  --feat-blue: #2f6fed; --feat-blue-bg: #eaf1ff;
  --feat-green: #12a150; --feat-green-bg: #e7fbf0;
  --feat-purple: #7c3aed; --feat-purple-bg: #f3edfe;
  --feat-orange: #dd7015; --feat-orange-bg: #fef1e3;
  --feat-teal: #0e9488; --feat-teal-bg: #e5fbf8;
  --feat-pink: #db2777; --feat-pink-bg: #fdedf5;

  /* Category badges (Emails table / briefing detail) not already covered by
     the semantic urgent/high/normal/low/ok/err/warn/pending pairs above —
     financial reuses --ok*, spam reuses --err*. */
  --cat-action-bg: #fff1e6; --cat-action-text: #b4550a;
  --cat-fyi-bg: #eef1f6; --cat-fyi-text: #3f4657;
  --cat-legal-bg: #f4eefe; --cat-legal-text: #7133d6;
  --cat-scheduling-bg: #e9f7fa; --cat-scheduling-text: #0e7f96;
  --cat-personal-bg: #fdeef6; --cat-personal-text: #b02669;
  --cat-promo-bg: #fdf8e3; --cat-promo-text: #92700c;
}

/* ── Dark theme ──────────────────────────────────────────────────────────
   Both modes are selected — dark is its own stepped set of values (chart
   categorical hues re-validated against this dark surface with
   dataviz's scripts/validate_palette.js; badge/semantic pairs hand-derived
   in HSL and checked for >=4.5:1 text contrast), not a CSS filter/invert
   flip. Declared twice on purpose: the media-query block covers "system"
   (OS dark, no explicit user choice — the :not([data-theme="light"]) guard
   lets an explicit light choice beat OS dark), the [data-theme="dark"] block
   covers the toggle's explicit dark choice regardless of OS setting. Keep
   every custom property name identical to :root above — anything not
   redefined here silently keeps its light value. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0f1015;
    --surface: #1a1c24;
    --surface-alt: #22242e;
    --surface-hover: #2a2d38;
    --border: #2a2d38;
    --border-strong: #3d4152;

    --text: #eef0f5;
    --text-secondary: #b8bac5;
    --muted: #8b8fa3;
    --muted-soft: #5b5f70;

    --accent: #7c7cf8;
    --accent-hover: #9090fa;
    --accent-active: #6a6af0;
    --accent-soft: #262a4a;
    --accent-text: #a5a5fb;
    --chat-user-bubble-text: #0f1015;

    --urgent: #f49090; --urgent-bg: #411b1b;
    --high: #f1bb7e; --high-bg: #412f1b;
    --normal: #91b0f3; --normal-bg: #1f2c47;
    --low: #b2b6bd; --low-bg: #32363e;

    --ok: #74e7b1; --ok-bg: #19382a;
    --err: #f49093; --err-bg: #411b1c;
    --warn: #f1bb7e; --warn-bg: #412f1b;
    --pending: #b6b7c3; --pending-bg: #31323f;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.4);
    --shadow-focus: 0 0 0 3.5px rgba(124, 124, 248, 0.35);

    --card-gradient: linear-gradient(160deg, #1c1e28 0%, #1a1c26 55%, #191b25 100%);
    --page-gradient: linear-gradient(160deg, #101119 0%, #0d0e14 50%, #0e1013 100%);
    --header-bg: rgba(20, 21, 28, 0.75);

    --feat-blue: #6e9fed; --feat-blue-bg: #1b2941;
    --feat-green: #5ce093; --feat-green-bg: #183a26;
    --feat-purple: #af89f0; --feat-purple-bg: #2d1e48;
    --feat-orange: #eca265; --feat-orange-bg: #432c19;
    --feat-teal: #52e0d9; --feat-teal-bg: #163635;
    --feat-pink: #ea71ad; --feat-pink-bg: #43192e;

    --cat-action-bg: #432a19; --cat-action-text: #f2b288;
    --cat-fyi-bg: #2e3442; --cat-fyi-text: #bfc4cf;
    --cat-legal-bg: #321e48; --cat-legal-text: #c4a1ed;
    --cat-scheduling-bg: #18343a; --cat-scheduling-text: #86d9ea;
    --cat-personal-bg: #411b2e; --cat-personal-text: #ee96c2;
    --cat-promo-bg: #3b3116; --cat-promo-text: #edcb6e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0f1015;
  --surface: #1a1c24;
  --surface-alt: #22242e;
  --surface-hover: #2a2d38;
  --border: #2a2d38;
  --border-strong: #3d4152;

  --text: #eef0f5;
  --text-secondary: #b8bac5;
  --muted: #8b8fa3;
  --muted-soft: #5b5f70;

  --accent: #7c7cf8;
  --accent-hover: #9090fa;
  --accent-active: #6a6af0;
  --accent-soft: #262a4a;
  --accent-text: #a5a5fb;
  --chat-user-bubble-text: #0f1015;

  --urgent: #f49090; --urgent-bg: #411b1b;
  --high: #f1bb7e; --high-bg: #412f1b;
  --normal: #91b0f3; --normal-bg: #1f2c47;
  --low: #b2b6bd; --low-bg: #32363e;

  --ok: #74e7b1; --ok-bg: #19382a;
  --err: #f49093; --err-bg: #411b1c;
  --warn: #f1bb7e; --warn-bg: #412f1b;
  --pending: #b6b7c3; --pending-bg: #31323f;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3.5px rgba(124, 124, 248, 0.35);

  --card-gradient: linear-gradient(160deg, #1c1e28 0%, #1a1c26 55%, #191b25 100%);
  --page-gradient: linear-gradient(160deg, #101119 0%, #0d0e14 50%, #0e1013 100%);
  --header-bg: rgba(20, 21, 28, 0.75);

  --feat-blue: #6e9fed; --feat-blue-bg: #1b2941;
  --feat-green: #5ce093; --feat-green-bg: #183a26;
  --feat-purple: #af89f0; --feat-purple-bg: #2d1e48;
  --feat-orange: #eca265; --feat-orange-bg: #432c19;
  --feat-teal: #52e0d9; --feat-teal-bg: #163635;
  --feat-pink: #ea71ad; --feat-pink-bg: #43192e;

  --cat-action-bg: #432a19; --cat-action-text: #f2b288;
  --cat-fyi-bg: #2e3442; --cat-fyi-text: #bfc4cf;
  --cat-legal-bg: #321e48; --cat-legal-text: #c4a1ed;
  --cat-scheduling-bg: #18343a; --cat-scheduling-text: #86d9ea;
  --cat-personal-bg: #411b2e; --cat-personal-text: #ee96c2;
  --cat-promo-bg: #3b3116; --cat-promo-text: #edcb6e;
}

* { box-sizing: border-box; }
*::selection { background: var(--accent-soft); color: var(--accent-active); }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--text); }

/* ── Scrollbar ──────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }

/* ── Shell / sidebar ────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 0 rgba(20, 21, 31, 0.02), 6px 0 24px -12px rgba(20, 21, 31, 0.12);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-3) var(--space-5);
  position: relative;
  z-index: 5;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: var(--space-2) var(--space-2) var(--space-5);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(155deg, #6d6dfa 0%, #4c4cee 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(75, 76, 238, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name { font-weight: 700; font-size: 14.5px; letter-spacing: -0.015em; color: var(--text); }
.brand-sub { color: var(--muted); font-size: 11.5px; font-weight: 500; }

.sidebar nav { display: flex; flex-direction: column; gap: 5px; }
.nav-group-label {
  font-size: 10.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  padding: 10px 10px 6px;
}
.nav-group-label:not(:first-child) {
  margin-top: var(--space-3);
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  padding: 11px 14px 11px 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.005em;
  box-shadow: none;
  transition: background-color 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent-text);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tab svg { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.9; stroke-width: 2.1; }
.tab:hover { background: var(--surface-alt); color: var(--text); }
.tab:hover .tab-icon { background: rgba(91, 91, 245, 0.16); }
.tab:hover svg { opacity: 1; }
.tab.active {
  background: linear-gradient(135deg, #6d6dfa 0%, #4c4cee 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 18px -4px rgba(75, 76, 238, 0.5), 0 2px 6px rgba(75, 76, 238, 0.32);
}
.tab.active:hover { background: linear-gradient(135deg, #7a7afb 0%, #5555f0 100%); color: #fff; }
.tab.active .tab-icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
.tab.active svg { opacity: 1; stroke-width: 2.25; }
.tab.hidden { display: none; }

/* ── Main column / topbar ───────────────────────────────────────────── */
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 4px 20px -6px rgba(20, 21, 31, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}
header h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; flex-shrink: 0; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.theme-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}
.theme-option svg { width: 16px; height: 16px; }
.theme-option:hover { background: var(--surface-hover); color: var(--text); box-shadow: none; }
.theme-option.active { background: var(--accent-soft); color: var(--accent-text); }
.theme-option.active:hover { background: var(--accent-soft); }

.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  margin: 0 var(--space-5);
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--surface-alt);
  border: 1.5px solid var(--border);
  color: var(--muted);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.search-bar svg { width: 17px; height: 17px; flex-shrink: 0; }
.search-bar:focus-within {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-focus);
  color: var(--accent);
}
.search-bar input {
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13.5px;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.search-bar input:focus { box-shadow: none; }
.search-bar input::-webkit-search-cancel-button { cursor: pointer; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 16px 7px 7px;
  border-radius: var(--radius-full);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.user-chip .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(155deg, #6d6dfa, #4c4cee);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(75, 76, 238, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.user-chip .who-info { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.user-chip .who-email { font-size: 13.5px; font-weight: 650; color: var(--text); }
.user-chip .who-role {
  font-size: 11px;
  font-weight: 650;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  color: var(--accent-text);
}

main {
  flex: 1;
  padding: var(--space-7) var(--space-6) var(--space-8);
  max-width: 1280px;
  width: 100%;
  background: var(--page-gradient);
}
.panel { display: none; }
.panel.active { display: block; animation: fade-in 0.18s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

.panel-intro {
  margin: 0 0 var(--space-5);
  max-width: 640px;
  font-size: 14.5px;
  color: var(--text-secondary);
}

/* ── Buttons / inputs ───────────────────────────────────────────────── */
button {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-xs);
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
button:hover { background: var(--surface-alt); border-color: var(--muted-soft); box-shadow: var(--shadow-sm); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
button.primary {
  background: linear-gradient(135deg, #6d6dfa 0%, #4c4cee 100%);
  border-color: transparent;
  border-radius: var(--radius-full);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  box-shadow: 0 2px 4px rgba(75, 76, 238, 0.2), 0 8px 20px -4px rgba(75, 76, 238, 0.4);
}
button.primary:hover {
  background: linear-gradient(135deg, #7a7afb 0%, #5555f0 100%);
  border-color: transparent;
  box-shadow: 0 3px 6px rgba(75, 76, 238, 0.25), 0 10px 24px -4px rgba(75, 76, 238, 0.48);
  transform: translateY(-1px);
}
button.primary:active { background: var(--accent-active); transform: translateY(1px); }
button[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

select, input, textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
select::placeholder, input::placeholder, textarea::placeholder { color: var(--muted-soft); }
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
select { cursor: pointer; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  align-items: center;
}
#filter-reset.hidden, #filter-active-badge.hidden { display: none; }

/* Emails page view switcher (Table/Cards/Compact/Kanban) — a segmented
   control, pinned to the toolbar's trailing edge when there's room. */
.view-switcher {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-left: auto;
}
.view-switch-btn {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.view-switch-btn:hover { background: var(--surface-hover); box-shadow: none; color: var(--text); }
.view-switch-btn:active { transform: none; }
.view-switch-btn.active { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-xs); }
.meta { color: var(--muted); font-size: 13px; line-height: 1.6; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: 13.5px;
  padding: var(--space-8) var(--space-4);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}
.empty-state svg { width: 30px; height: 30px; color: var(--muted-soft); }
.empty-state span { max-width: 320px; }

/* ── Loading skeletons ──────────────────────────────────────────────── */
.skeleton-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.skeleton-row {
  --skeleton-width: 100%;
  width: var(--skeleton-width);
  height: 48px;
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--surface-alt) 20%, var(--surface-hover) 42%, var(--surface-alt) 64%);
  background-size: 300% 100%;
  animation: skeleton-shimmer 1.7s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-row { animation: none; background: var(--surface-alt); }
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card .subject { font-weight: 650; font-size: 14.5px; letter-spacing: -0.01em; margin-bottom: 2px; }

.kv-grid { display: grid; grid-template-columns: 190px 1fr; gap: var(--space-3) var(--space-4); margin: 0; }
.kv-grid dt { color: var(--muted); font-size: 12.5px; font-weight: 500; padding-top: 1px; }
.kv-grid dd { margin: 0; font-weight: 500; }
.kv-grid pre { margin: 0; }

/* ── Data tables ────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.data-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  background: var(--surface-alt);
  padding: 17px 22px;
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 20px 22px;
  border-bottom: 1px solid var(--border-strong);
  vertical-align: middle;
  font-size: 14px;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tr.data-row { cursor: pointer; transition: background-color 0.12s ease, box-shadow 0.12s ease; }
.data-table tr.data-row.row-alt { background: var(--surface-alt); }
.data-table tr.data-row:hover {
  background: var(--accent-soft);
  box-shadow: inset 5px 0 0 0 var(--accent);
}
.data-table tr.detail-row td { background: var(--surface-alt); padding: var(--space-4) 22px var(--space-5); }
.data-table tr.detail-row.hidden { display: none; }

/* ── Emails table: dense "financial data table" skin ──────────────────────
   Scoped to .emails-table (only the Emails tab's table carries this class)
   so Drafts/Tasks/Rules/Accounts/Users — which all reuse the base
   .data-table — keep their current spacing untouched. Denser padding,
   right-aligned date column, muted secondary columns, and an always-on
   left accent bar keyed to priority (like a screener's red/green price
   column) so urgency reads without hovering or expanding a row.

   table-layout: fixed plus explicit column widths keep every row a single
   line (like a screener's fixed grid) instead of the ragged multi-line wrap
   an auto-layout table gives long subjects. Overflow truncates with an
   ellipsis; the full text is still reachable via the .cell-tip hover
   tooltip below (app.js) — nothing is actually hidden, just not
   force-wrapped. The detail row's colspan="8" cell ignores column widths,
   so the expanded summary still gets the full row width. */
.emails-table { table-layout: fixed; }
.emails-table col.col-toggle { width: 3%; }
.emails-table col.col-subject { width: 25%; }
.emails-table col.col-from { width: 12%; }
.emails-table col.col-company { width: 11%; }
.emails-table col.col-priority { width: 8%; }
.emails-table col.col-category { width: 10%; }
.emails-table col.col-received { width: 18%; }
.emails-table col.col-action { width: 13%; }

.emails-table thead th {
  padding: 9px 14px;
  font-size: 11px;
  letter-spacing: 0.07em;
}
.emails-table tbody td {
  padding: 7px 14px;
  font-size: 13px;
}
.emails-table tr.detail-row td {
  padding: var(--space-3) 14px var(--space-4);
}
.emails-table th.col-toggle,
.emails-table td.col-toggle { padding-left: 10px; padding-right: 0; }
.emails-table th.col-received,
.emails-table td.col-received { text-align: right; }
.emails-table td.col-received {
  color: var(--muted);
  font-size: 12.3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.emails-table td.col-from,
.emails-table td.col-company {
  color: var(--text-secondary);
  font-weight: 450;
  font-size: 12.8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The "needs reply" dot must never get clipped by the subject text's own
   ellipsis truncation, so it lives in a flex wrapper alongside the text —
   but that flex layout goes on an INNER .subject-cell-inner div, not the
   <td> itself. A <td> with display:flex breaks out of the table's normal
   row-height stretching (which every sibling <td> still gets, matching the
   tallest cell in the row); its own box then renders only as tall as its
   flex content needs, so its border-bottom lands at that shorter height
   instead of the row's, showing up as a separate stray line above the
   row's real bottom border. Keeping the <td> a plain table-cell (stretched
   to the row height, border-bottom at the same Y as every sibling) and
   scoping the flex layout to the inner div avoids that entirely. */
.emails-table td.subject-cell {
  font-size: 13.4px;
}
.emails-table td.subject-cell .subject-cell-inner {
  display: flex;
  align-items: center;
  gap: 6px;
}
.emails-table td.subject-cell .subject-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.emails-table td.subject-cell .dot-badge { flex-shrink: 0; }
.emails-table .badge { padding: 3px 9px; font-size: 10.5px; }
.emails-table .action-cell { min-width: 0; white-space: normal; }
.emails-table .action-cell .row-action-toggle { padding: 5px 10px; font-size: 12.5px; width: 100%; }

.emails-table tr.data-row { box-shadow: inset 3px 0 0 0 transparent; }
.emails-table tr.data-row.priority-row-urgent { box-shadow: inset 3px 0 0 0 var(--urgent); }
.emails-table tr.data-row.priority-row-high { box-shadow: inset 3px 0 0 0 var(--high); }
.emails-table tr.data-row.priority-row-normal { box-shadow: inset 3px 0 0 0 var(--normal); }
.emails-table tr.data-row.priority-row-low { box-shadow: inset 3px 0 0 0 var(--low); }
/* Hover only tints the background — the priority accent bar stays visible
   underneath instead of being swapped out, so urgency never disappears on
   interaction the way the base .data-table's hover accent swap would do. */
.emails-table tr.data-row:hover { background: var(--surface-hover); }

/* Hover tooltip for truncated Subject/From/Company cells — a single shared
   node (app.js: cellTipEl), position: fixed and appended to <body> rather
   than the table, so .data-table's own overflow:hidden (used for its
   rounded corners) never clips it near the table's edges. Visibility is
   toggled by app.js on mouseenter/mouseleave, not CSS :hover, so it can
   never be left showing once its cell leaves the DOM. */
.cell-tip-popup {
  position: fixed;
  z-index: 1000;
  max-width: 360px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  font-size: 12.3px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
}
.cell-tip-popup.hidden { display: none; }

.subject-cell { font-weight: 700; color: var(--text); font-size: 14.5px; }
.dot-badge {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px var(--urgent-bg);
}
.expand-toggle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 6px;
  color: var(--muted-soft);
  font-size: 11px;
  line-height: 1;
  transition: transform 0.15s ease, color 0.12s ease;
}
.expand-toggle:hover { background: transparent; color: var(--text-secondary); border-color: transparent; }
.expand-toggle.open { transform: rotate(90deg); color: var(--accent); }

.detail-panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-1) 0; }
.summary { margin: 0; color: var(--text-secondary); font-size: 13.3px; line-height: 1.6; }

.actions-cell { display: flex; gap: var(--space-2); }
.actions-cell button { padding: 6px 12px; font-size: 12.5px; }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-alt);
  color: var(--text-secondary);
  border: 1px solid transparent;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.badge.priority-urgent { background: var(--urgent-bg); color: var(--urgent); }
.badge.priority-high { background: var(--high-bg); color: var(--high); }
.badge.priority-normal { background: var(--normal-bg); color: var(--normal); }
.badge.priority-low { background: var(--low-bg); color: var(--low); }

.badge.active { background: var(--ok-bg); color: var(--ok); }
.badge.inactive { background: var(--err-bg); color: var(--err); }
.badge.error { background: var(--err-bg); color: var(--err); }
.badge.disconnected { background: var(--pending-bg); color: var(--pending); }

.badge.status-pending { background: var(--pending-bg); color: var(--pending); }
.badge.status-approved { background: var(--ok-bg); color: var(--ok); }
.badge.status-edited { background: var(--normal-bg); color: var(--normal); }
.badge.status-sent { background: var(--ok-bg); color: var(--ok); }
.badge.status-rejected { background: var(--err-bg); color: var(--err); }

/* Email category — each gets its own hue so the column reads at a glance,
   distinct from the urgency semantics used by priority badges. */
.badge.category-action_required { background: var(--cat-action-bg); color: var(--cat-action-text); }
.badge.category-fyi { background: var(--cat-fyi-bg); color: var(--cat-fyi-text); }
.badge.category-financial { background: var(--ok-bg); color: var(--ok); }
.badge.category-legal { background: var(--cat-legal-bg); color: var(--cat-legal-text); }
.badge.category-scheduling { background: var(--cat-scheduling-bg); color: var(--cat-scheduling-text); }
.badge.category-personal { background: var(--cat-personal-bg); color: var(--cat-personal-text); }
.badge.category-promotional { background: var(--cat-promo-bg); color: var(--cat-promo-text); }
.badge.category-spam { background: var(--err-bg); color: var(--err); }

/* ── Overview / feature highlights ─────────────────────────────────── */
.hero-card {
  background: linear-gradient(135deg, #6d6dfa 0%, #4c4cee 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-7);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(75, 76, 238, 0.45);
  margin-bottom: var(--space-6);
}
.hero-card h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.hero-card p { margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.85); max-width: 560px; line-height: 1.6; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}
.feature-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.feature-card:active { transform: translateY(-1px); }
.feature-card:focus-visible { outline: none; box-shadow: var(--shadow-lg), var(--shadow-focus); }
.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-icon svg { width: 23px; height: 23px; }
.feature-icon.blue { background: var(--feat-blue-bg); color: var(--feat-blue); }
.feature-icon.green { background: var(--feat-green-bg); color: var(--feat-green); }
.feature-icon.purple { background: var(--feat-purple-bg); color: var(--feat-purple); }
.feature-icon.orange { background: var(--feat-orange-bg); color: var(--feat-orange); }
.feature-icon.teal { background: var(--feat-teal-bg); color: var(--feat-teal); }
.feature-icon.pink { background: var(--feat-pink-bg); color: var(--feat-pink); }
.feature-card h3 { font-size: 16.5px; font-weight: 750; letter-spacing: -0.01em; }
.feature-card p { margin: 0; font-size: 13.3px; color: var(--text-secondary); line-height: 1.6; }

/* ── Briefing cards ─────────────────────────────────────────────────── */
.briefing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.briefing-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease;
}
.briefing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.briefing-card.expanded { grid-column: 1 / -1; }
.briefing-card.expanded:hover { transform: none; }
.briefing-card-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.briefing-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-active);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.briefing-icon svg { width: 19px; height: 19px; }
.briefing-card-title { flex: 1; min-width: 0; }
.briefing-card-title .subject { text-transform: capitalize; }
.briefing-card-stats { display: flex; gap: var(--space-2); }
.stat-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  font-size: 12px;
  color: var(--text-secondary);
}
.stat-pill strong { font-size: 14.5px; color: var(--text); font-weight: 700; }

.card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  box-shadow: none;
}
.card-toggle:hover { background: var(--surface-hover); color: var(--text); }
.card-toggle svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.18s ease; }
.card-toggle.open svg { transform: rotate(180deg); }
.brief-body.hidden, .activity-detail.hidden { display: none; }

/* ── Briefing detail (structured render) ──────────────────────────────── */
.briefing-detail { display: flex; flex-direction: column; gap: var(--space-5); }
.briefing-detail.hidden { display: none; }

.stats-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Analytics ────────────────────────────────────────────────────────── */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.analytics-grid .card.span-2 { grid-column: span 2; }
@media (max-width: 900px) {
  .analytics-grid .card.span-2 { grid-column: span 1; }
}
.analytics-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.analytics-card-title h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); }
.analytics-chart-wrap { position: relative; width: 100%; }
.analytics-chart-wrap.h-180 { height: 180px; }
.analytics-chart-wrap.h-220 { height: 220px; }
.analytics-chart-wrap.h-260 { height: 260px; }
.analytics-hero-stat { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.analytics-hero-number { font-size: 34px; font-weight: 750; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.analytics-hero-number + .meta { margin-top: 4px; }
.analytics-sparkline { width: 130px; height: 44px; flex-shrink: 0; }
.analytics-recent-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.analytics-recent-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 12.8px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.analytics-recent-list li:last-child { border-bottom: none; padding-bottom: 0; }
.analytics-recent-list .subject-cell { font-size: 12.8px; }
.analytics-empty { color: var(--muted); font-size: 12.8px; padding: var(--space-3) 0; }

.exec-summary {
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.exec-summary h4 {
  font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent-text); margin: 0 0 6px;
}
.exec-summary p { margin: 0; font-size: 13.8px; line-height: 1.65; color: var(--text); }

.highlight-section h4 {
  font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); margin: 0 0 var(--space-3);
}
.highlight-cards { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.highlight-card {
  flex: 1 1 240px;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.highlight-card.priority-urgent { border-left-color: var(--urgent); }
.highlight-card.priority-high { border-left-color: var(--high); }
.highlight-card.reply-card { border-left-color: var(--accent); }
.highlight-card.reply-card.carried-over { border-left-color: var(--pending); background: var(--surface-alt); }
.highlight-card-head { display: flex; gap: 6px; flex-wrap: wrap; }

.category-groups { display: flex; flex-direction: column; gap: var(--space-3); }
.category-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.category-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-alt);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
}
.category-toggle:hover { background: var(--surface-hover); }
.category-toggle-label { flex: 1; text-align: left; }
.category-toggle .badge { background: var(--surface); }
.category-toggle svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.18s ease; }
.category-toggle.open svg { transform: rotate(180deg); }
.category-body { padding: var(--space-2) var(--space-4) var(--space-3); }
.category-body.hidden { display: none; }

.email-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.email-row:last-child { border-bottom: none; }
.email-row-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 2px;
  cursor: pointer;
  text-align: left;
}
.email-row-head:hover { background: var(--surface-alt); border-radius: var(--radius-sm); }
.email-row-head .subject-cell { flex: 1; font-size: 13.3px; }
.email-row > .summary { margin: 2px 0 0 26px; }
.email-row-detail { padding: var(--space-2) 4px var(--space-1) 26px; }
.email-row-detail.hidden { display: none; }
.email-row-detail .kv-grid { grid-template-columns: 110px 1fr; }

.email-row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.mini-action-btn { padding: 5px 11px; font-size: 12px; }
.email-row-result:not(:empty) { margin: var(--space-3) 0 var(--space-1); }

.inline-draft, .inline-form, .inline-task, .inline-confirm {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.inline-draft .draft-body { min-height: 90px; }
.inline-form-row { display: flex; gap: var(--space-2); }
.inline-form input, .inline-task input { width: 100%; }
.inline-status { margin: 0; }

/* Regenerate row (Emails/Briefings inline draft + the main Drafts tab) —
   free-text steer + button, sitting between the draft body and the
   Approve/Reject/Send row so it reads as "reshape the draft above" rather
   than another peer action alongside send/reject. */
.regenerate-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.regenerate-instruction { flex: 1; font-size: 13px; padding: 7px 10px; }
.regenerate-row button { white-space: nowrap; }
.action-error { color: var(--err); font-size: 12.5px; margin: var(--space-2) 0 0; }
.action-success { color: var(--ok); font-size: 12.5px; margin: var(--space-2) 0 0; }
.action-success a { color: inherit; font-weight: 650; }

/* ── Emails table: per-row Action column + sender rules panel ────────────── */
.action-cell { min-width: 180px; white-space: normal; }
.row-action-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  padding: 6px 10px;
  font-weight: 500;
}
.row-action-toggle-arrow { font-size: 10px; color: var(--muted); }
.row-action-feedback:not(:empty) { margin-top: var(--space-2); }

/* The popover itself: position: fixed + appended to <body> (see app.js —
   ensureActionMenu) so .data-table's overflow:hidden (used for its rounded
   corners) never clips it near the table's edges, same reasoning as the
   Subject/From/Company hover tooltip. */
.row-action-menu {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.row-action-menu.hidden { display: none; }
.row-action-menu-options { display: flex; flex-direction: column; }
.row-action-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.row-action-option:hover { background: var(--surface-hover); }
.row-action-option input { cursor: pointer; }
.row-action-apply-btn {
  margin-top: var(--space-1);
  padding: 7px 10px;
  font-size: 12.5px;
  width: 100%;
}

/* Per-action outcome list — one line per selected action, since a combo can
   partially fail (e.g. Delete succeeds, Block sender fails). */
.row-action-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.row-action-results li { font-size: 12.5px; font-weight: 500; }
.row-action-result-ok { color: var(--ok); }
.row-action-result-fail { color: var(--err); }
.row-action-result-skip { color: var(--muted); font-weight: 450; }
.row-rule-followup {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--space-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.row-rule-followup input { margin-top: 2px; cursor: pointer; }
.rule-saved { color: var(--ok); font-size: 12px; font-weight: 600; }

.rules-panel {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.rules-panel.hidden { display: none; }
/* Brief highlight when the panel is opened from Settings or Analytics —
   those entry points land the user on the Emails tab, and without a cue it
   isn't obvious which part of a busy page they were sent to. */
@keyframes rules-panel-flash {
  from { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
  to { box-shadow: 0 0 0 0 transparent; }
}
.rules-panel-flash { animation: rules-panel-flash 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .rules-panel-flash { animation: none; }
}

.analytics-rules-figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.analytics-rules-figure strong { font-size: 30px; font-weight: 700; line-height: 1; }
.analytics-rules-figure span { font-size: 13px; color: var(--text-secondary); }
.analytics-rules-detail {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.analytics-rules-detail li { padding: 1px 0; }
.analytics-rules-detail:empty { margin-bottom: var(--space-2); }
.rules-panel-header h3 { margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.rules-panel-header p { margin: 0 0 var(--space-3); }
.rules-panel-header { position: relative; }
.rules-panel-header #rule-new-btn { margin-bottom: var(--space-3); }

/* Rules table: the condition list is the widest thing in it, so let it
   breathe and keep the narrow status columns from wrapping. */
.rules-table td { vertical-align: top; }
/* Fixed proportions: without them the browser starves the two columns that
   carry the actual rule ("Matches" and "When") in favour of the button
   column, and the timing text wraps to one word per line. */
.rules-table { table-layout: fixed; }
.rules-table th:nth-child(1), .rules-table td:nth-child(1) { width: 21%; }
.rules-table th:nth-child(2), .rules-table td:nth-child(2) { width: 19%; }
/* Wider than the other four actions need, because a forwarding rule's cell
   also carries a full email address underneath the verb. */
.rules-table th:nth-child(3), .rules-table td:nth-child(3) { width: 16%; }
.rules-table th:nth-child(4), .rules-table td:nth-child(4) { width: 18%; }
.rules-table th:nth-child(5), .rules-table td:nth-child(5) { width: 10%; }
.rules-table th:nth-child(6), .rules-table td:nth-child(6) { width: 16%; }
/* Fixed layout clips rather than reflows, so anything long in a cell has to
   be told it may break mid-token — addresses and rule names both can be. */
.rules-table td { overflow-wrap: anywhere; }
.rules-table .rule-name, .rules-table .rule-cond-value { overflow-wrap: anywhere; }
.rules-table tr.rule-row-disabled { opacity: 0.6; }
.rule-name { font-weight: 600; }
.rule-original { font-style: italic; }
.rule-source-badge { background: var(--surface-alt); color: var(--text-secondary); }
.badge.rule-timing-scheduled { background: var(--high-bg); color: var(--high); }
.badge.rule-timing-immediate { background: var(--ok-bg); color: var(--ok); }
.rule-cond-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.rule-cond-list li { padding: 1px 0; }
.rule-cond-and { color: var(--text-secondary); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; }
.rule-cond-field { color: var(--text-secondary); }
.rule-cond-value { font-weight: 600; }
/* Buttons wrap within the cell without turning the <td> itself into a flex
   container — `display: flex` on a table cell drops it out of the column
   model entirely, so under table-layout: fixed it collapses to its padding
   and the buttons spill over the neighbouring column. */
.rule-controls .mini-action-btn {
  display: inline-block;
  white-space: nowrap;
  margin: 0 var(--space-2) var(--space-2) 0;
}

/* In-panel rule builder — same preview-then-save gate as the chat flow. */
.rule-builder {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.rule-builder.hidden { display: none; }
.rule-builder-section { margin-bottom: var(--space-3); }
.rule-builder-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* Beats this file's own display:flex above — the global .hidden is declared
   earlier, so an equal-specificity rule here would otherwise lose to it. */
.rule-builder-row.hidden { display: none; }
/* This stylesheet has no global `.hidden` rule — every component declares its
   own (see .rules-panel.hidden, .row-action-menu.hidden, ...) — so the
   builder's toggled controls each need one or the class is inert. */
.rule-builder-row select.hidden, .rule-builder-row input.hidden { display: none; }
.rule-builder-row #rule-action-address { flex: 1 1 220px; min-width: 180px; }
.rule-forward-to {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
  overflow-wrap: anywhere;
}

/* Bulk action bar — appears above the Emails table once a row is ticked. */
.bulk-action-bar {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
.bulk-action-bar.hidden { display: none; }
.bulk-action-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.bulk-action-bar .row-action-menu-options {
  display: flex;
  /* Explicit: the shared .row-action-menu-options rule sets column direction
     for the narrow popover, and inheriting that here turns flex-wrap into
     column-wrapping — the options stack and spill sideways instead of
     flowing across the bar. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.bulk-action-bar .row-action-param { flex: 1 1 240px; min-width: 200px; }
.bulk-action-bar .row-action-param.hidden { display: none; }
.bulk-action-bar .row-action-param-input { width: 100%; }
.bulk-action-foot { display: flex; gap: var(--space-2); }
.bulk-action-feedback:not(:empty) { margin-top: var(--space-3); }
.bulk-action-error { margin: 0 0 var(--space-2); }
.emails-table .col-select { width: 34px; text-align: center; }
.emails-table .col-select input { cursor: pointer; }

/* Inline parameter input inside the per-row Actions popover. */
.row-action-param { margin: 2px 0 var(--space-2) 22px; }
.row-action-param.hidden { display: none; }
.row-action-param-input { width: 100%; font-size: 12.5px; }
.row-action-menu-error { margin: 0 0 var(--space-2); font-size: 12px; }
.row-action-menu-error.hidden { display: none; }

/* "Custom instruction…" — the 7th option in the same list. Its textarea is a
   .row-action-param like the forward address field, so it inherits the same
   reveal-on-check indentation; only the multi-line shape differs. */
.row-action-instruction-input {
  width: 100%;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  resize: vertical;
  min-height: 46px;
}
.row-action-instruction-hint {
  margin: var(--space-1) 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}
/* In the bulk bar the options flow across a wrapped row; the instruction
   needs the full width rather than a 240px column. */
.bulk-action-bar .row-action-instruction { flex: 1 1 100%; margin-left: 0; }

/* The answer panel, rendered in the row's own feedback area so the reply is
   read next to the email it's about (see app.js — ensureInstructionPanel). */
/* Hosted in the row's full-width expand row in table view (app.js —
   instructionHostFor); capped so a long answer stays a readable column
   instead of running the full width of a 1500px table. */
.row-instruction-host { margin-bottom: var(--space-3); }
.row-instruction-panel {
  max-width: 760px;
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.row-instruction-turns { display: flex; flex-direction: column; gap: var(--space-2); }
.row-instruction-turn { display: flex; flex-direction: column; }
.row-instruction-turn.user { align-items: flex-end; }
.row-instruction-turn.yovi { align-items: flex-start; }
.row-instruction-bubble {
  max-width: 92%;
  padding: 8px 11px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.row-instruction-turn.user .row-instruction-bubble {
  background: var(--accent);
  color: var(--chat-user-bubble-text, #fff);
  border-bottom-right-radius: 5px;
}
.row-instruction-turn.yovi .row-instruction-bubble {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}
.row-instruction-bubble.thinking { color: var(--muted); font-style: italic; }
.row-instruction-bubble.failed { color: var(--err); background: var(--err-bg); border-color: var(--err); }
/* Which tools actually ran — the difference between "I read it and here's
   the answer" and "I archived it and forwarded it". */
.row-instruction-ran {
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ok);
}
.row-instruction-followup {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.row-instruction-followup-input { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.row-instruction-followup button { flex: 0 0 auto; }

/* Bulk: one panel per selected email, each labeled with its subject — a
   stack of unattributed replies would be unreadable. */
.bulk-instruction-email { margin-bottom: var(--space-3); }
.bulk-instruction-subject {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}


.rule-builder-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.rule-builder-section > .rule-builder-label { display: block; margin-bottom: var(--space-2); }
.rule-condition-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.rule-condition-row .rule-cond-value-input { flex: 1 1 180px; min-width: 140px; }
.rule-condition-row .hidden { display: none; }
.rule-builder-preview {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-alt);
  border-left: 3px solid var(--accent, var(--border-strong));
  border-radius: var(--radius-sm);
}
.rule-builder-preview.hidden { display: none; }
.rule-preview-summary { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 600; }
.rule-preview-warn { margin: 0 0 var(--space-2); font-size: 12px; color: var(--high); }
.rule-preview-samples { margin: var(--space-2) 0 0; padding-left: 18px; font-size: 12px; }
.rule-builder-actions { display: flex; gap: var(--space-2); }

.data-table.compact thead th { padding: 10px 16px; }
.data-table.compact tbody td { padding: 10px 16px; font-size: 13px; }

/* ── Emails: Cards view ───────────────────────────────────────────────────
   Same border-left priority accent as the table's inset shadow (see
   .emails-table tr.data-row.priority-row-* above), reapplied as a plain
   border here since these aren't table rows. */
.emails-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}
.email-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
}
.email-card.priority-row-urgent { border-left-color: var(--urgent); }
.email-card.priority-row-high { border-left-color: var(--high); }
.email-card.priority-row-normal { border-left-color: var(--normal); }
.email-card.priority-row-low { border-left-color: var(--low); }
.email-card-subject {
  margin: 0;
  font-size: 13.8px;
  font-weight: 650;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.email-card-meta { margin: 3px 0 0; }
.email-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-2); }
.email-card-received { margin-left: auto; }
.email-card .email-detail-body { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* ── Emails: Compact view ─────────────────────────────────────────────────
   One flex row per email, modeled on the Briefings tab's .email-row-head. */
.emails-compact-list { display: flex; flex-direction: column; }
.email-compact-item { border-bottom: 1px solid var(--border); }
.email-compact-item:last-child { border-bottom: none; }
.email-compact-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 4px;
  cursor: pointer;
  box-shadow: inset 3px 0 0 0 transparent;
}
.email-compact-row.priority-row-urgent { box-shadow: inset 3px 0 0 0 var(--urgent); }
.email-compact-row.priority-row-high { box-shadow: inset 3px 0 0 0 var(--high); }
.email-compact-row.priority-row-normal { box-shadow: inset 3px 0 0 0 var(--normal); }
.email-compact-row.priority-row-low { box-shadow: inset 3px 0 0 0 var(--low); }
.email-compact-row:hover { background: var(--surface-alt); border-radius: var(--radius-sm); }
.email-compact-row .expand-toggle { flex-shrink: 0; }
.email-compact-subject {
  flex: 2 1 220px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.3px;
  font-weight: 550;
  color: var(--text);
}
.email-compact-sender {
  flex: 1 1 140px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-compact-received { flex: 0 0 auto; white-space: nowrap; margin-left: auto; }
.email-detail-wrap { background: var(--surface-alt); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 4px 0 var(--space-2); }
.email-detail-wrap.hidden { display: none; }

/* ── Emails: Kanban view ───────────────────────────────────────────────────
   Horizontal-scrolling board, one column per category (see
   EMAIL_CATEGORY_ORDER in app.js) — .data-table's overflow reasoning
   doesn't apply here since columns scroll individually, the board scrolls
   as a whole. */
.emails-kanban {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
.kanban-column {
  flex: 0 0 260px;
  /* Flex items default to min-width:auto, which lets their content's
     min-content size (e.g. an expanded draft's regenerate-row) push them
     wider than their flex-basis — confirmed live: without this, the
     column holding an open draft visibly grows past 260px while its
     siblings stay put. min-width:0 makes the fixed width actually hold;
     .regenerate-row below wraps instead of forcing overflow. */
  min-width: 0;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-height: 74vh;
  display: flex;
  flex-direction: column;
}
.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 2px var(--space-2);
}
.kanban-column-title { font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.kanban-column-body { display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; }
.kanban-card-item { display: flex; flex-direction: column; }
.kanban-card {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.kanban-card.priority-row-urgent { border-left-color: var(--urgent); }
.kanban-card.priority-row-high { border-left-color: var(--high); }
.kanban-card.priority-row-normal { border-left-color: var(--normal); }
.kanban-card.priority-row-low { border-left-color: var(--low); }
.kanban-card .expand-toggle { flex-shrink: 0; margin-top: 1px; }
.kanban-card-body { min-width: 0; flex: 1; }
.kanban-card-subject { margin: 0; font-size: 12.8px; font-weight: 600; color: var(--text); line-height: 1.4; }
.kanban-card-meta { margin: 3px 0 0; font-size: 12px; }
.kanban-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.kanban-card-item .email-detail-wrap { margin: 4px 0 0; }

.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em; margin: var(--space-3) 0 6px;
}
.markdown-body p { margin: 0 0 var(--space-2); font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }
.markdown-body ul { margin: 0 0 var(--space-2); padding-left: 20px; }
.markdown-body li { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 4px; }
.markdown-body strong { color: var(--text); font-weight: 650; }

/* ── Activity feed ──────────────────────────────────────────────────── */
.activity-feed { display: flex; flex-direction: column; gap: var(--space-4); }
.activity-item {
  display: flex;
  gap: var(--space-4);
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s ease, border-color 0.15s ease;
}
.activity-item:hover { transform: translateX(3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.activity-icon svg { width: 17px; height: 17px; }
.activity-icon.ok { background: var(--ok-bg); color: var(--ok); }
.activity-icon.fail { background: var(--err-bg); color: var(--err); }
.activity-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.activity-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.activity-action { font-weight: 620; font-size: 13.5px; color: var(--text); text-transform: capitalize; letter-spacing: -0.005em; }
.activity-time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.activity-target { font-size: 12.5px; color: var(--text-secondary); }
.activity-body .card-toggle { width: auto; align-self: flex-start; padding: 5px 11px; }
.activity-detail {
  width: 100%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

/* ── Draft / briefing bodies ────────────────────────────────────────── */
.draft-body, .brief-body {
  width: 100%;
  min-height: 130px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
}
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.brief-body { white-space: pre-wrap; margin: 0; }
pre { white-space: pre-wrap; word-break: break-word; }

/* ── Login overlay ──────────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(91, 91, 245, 0.16), transparent 55%), rgba(15, 16, 23, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.overlay.hidden { display: none; }
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6) var(--space-6);
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.login-card h2 { font-size: 21px; letter-spacing: -0.02em; }
.login-card .meta { margin: -6px 0 6px; font-size: 13px; }
.login-card input { padding: 10px 13px; font-size: 14px; }
.login-card button.primary { padding: 10px 14px; margin-top: var(--space-1); }
.error { color: var(--urgent); font-size: 12.5px; min-height: 16px; margin: 0; font-weight: 500; }

/* ── Modal (Organize My Inbox) ────────────────────────────────────────── */
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 520px;
  max-width: calc(100vw - var(--space-6));
  max-height: calc(100vh - var(--space-7));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 18px; letter-spacing: -0.02em; margin: 0; }
.icon-btn {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: var(--space-1) var(--space-2);
  font-size: 15px;
  color: var(--muted);
}
.icon-btn:hover { background: var(--surface-alt); color: var(--text); box-shadow: none; }
.modal-body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.organize-summary { margin: 0; }
.scope-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.scope-selector label { font-size: 13px; font-weight: 600; color: var(--text); }
.scope-selector .meta { margin: 0; }
.mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.mode-options.single-col { grid-template-columns: 1fr; }
.mode-option {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  font-weight: 400;
  cursor: pointer;
}
.mode-option-label { font-size: 14px; font-weight: 700; color: var(--text); }
.mode-option-desc { font-size: 12.5px; font-weight: 400; color: var(--text-secondary); line-height: 1.4; }
.mode-option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1.5px var(--accent) inset;
}
.custom-rules {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.custom-rules.hidden { display: none; }
.custom-group {
  border: none;
  padding: 0;
  margin: 0;
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.custom-group legend { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); padding: 0 0 4px; }
.custom-group label { display: flex; align-items: center; gap: 8px; font-size: 13.3px; font-weight: 400; }
.custom-group input[type="checkbox"] {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--border-strong);
  accent-color: var(--accent);
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
.organize-results ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.organize-rules-preview {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.organize-rules-preview .meta:first-child { margin-top: 0; }
.organize-rules-matches, .custom-instruction-matches {
  margin: var(--space-2) 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.3px;
  max-height: 220px;
  overflow-y: auto;
}
.organize-rules-matches p.meta, .custom-instruction-matches p.meta { margin: 0; }
.organize-standing-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.organize-auto-apply-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.3px;
  color: var(--text-secondary);
}
.organize-auto-apply-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--border-strong);
  accent-color: var(--accent);
}

/* ── Accounts ───────────────────────────────────────────────────────── */
.account-forms { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.account-form {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.account-form input { padding: 9px 12px; font-size: 13.5px; }
.account-form button { align-self: flex-start; margin-top: var(--space-1); }
.banner {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 13.3px;
  border: 1px solid transparent;
}
.banner.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(22, 136, 77, 0.16); }
.banner.err { background: var(--err-bg); color: var(--err); border-color: rgba(213, 41, 47, 0.16); }
.banner.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(194, 118, 12, 0.18); }

/* ── Chat ───────────────────────────────────────────────────────────── */
#chat.panel.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 216px);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1) var(--space-4);
}
.chat-messages .empty-state { margin: auto; max-width: 380px; }
.chat-msg { display: flex; }
.chat-msg.chat-user { justify-content: flex-end; }
.chat-msg.chat-assistant { justify-content: flex-start; }
.chat-bubble {
  max-width: 68%;
  padding: 11px 15px;
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.chat-user .chat-bubble {
  background: var(--accent);
  /* White text on the light-mode --accent (#5b5bf5) clears contrast; the
     lighter dark-mode --accent (#7c7cf8, needed so it still pops off a dark
     page) does not stay >=4.5:1 with white — dark ink instead, still >=5.5:1. */
  color: var(--chat-user-bubble-text, #fff);
  border-bottom-right-radius: 5px;
  box-shadow: 0 2px 8px rgba(75, 76, 238, 0.2);
}
.chat-assistant .chat-bubble {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
  box-shadow: var(--shadow-xs);
}
.chat-bubble.typing { padding: 14px 16px; }
.typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: typing-bounce 1.1s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation: none; opacity: 0.6; }
}
.chat-input-row {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.chat-input-row input { flex: 1; border-radius: var(--radius-full); padding: 11px 18px; }
.chat-input-row button { border-radius: var(--radius-full); padding: 10px 20px; }

/* ── Users ──────────────────────────────────────────────────────────── */
.banner.password-reveal { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.banner.password-reveal code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .sidebar { width: 76px; padding-left: var(--space-2); padding-right: var(--space-2); }
  .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .brand-text, .tab span { display: none; }
  .tab { justify-content: center; padding: 10px; }
  main { padding: var(--space-4); }
  header { padding: var(--space-3) var(--space-4); }
  .user-chip .who-email, .user-chip .who-role { display: none; }
  .user-chip { padding: 5px; }
  .search-bar { display: none; }
}

/* ── Toasts ──────────────────────────────────────────────────────────────────
   For results that land after the user has moved on — a background ingest
   finishing, above all, since the click that started it returns immediately. */
.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 40px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  font-size: 0.9rem;
  line-height: 1.4;
  animation: toast-in 160ms ease-out;
}
.toast-success { border-left: 3px solid var(--ok); }
.toast-error { border-left: 3px solid var(--err); }
.toast-text { flex: 1; }
.toast-close {
  flex: none;
  padding: 0 4px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}
.toast-close:hover { opacity: 1; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* The ingest button doubles as the running-job indicator while a background
   ingest is in flight (see updateIngestButton in app.js). */
#ingest-btn.is-busy {
  opacity: 0.75;
  cursor: progress;
}

/* ── System Health (Settings tab) ──────────────────────────────────────────
   Built entirely from the existing --err/--warn/--ok tokens, which are
   already redefined in the dark block above — so this inherits light/dark
   without a second set of rules to keep in sync. */
.system-health .health-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.system-health .health-summary {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.health-ok {
  color: var(--ok);
  font-weight: 600;
  font-size: 13px;
}
.health-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.health-badge-critical { color: var(--err); background: var(--err-bg); }
.health-badge-warning  { color: var(--warn); background: var(--warn-bg); }
.health-badge-info     { color: var(--low); background: var(--low-bg); }

.health-toolbar {
  margin: var(--space-3) 0 var(--space-2);
  align-items: center;
  gap: var(--space-3);
}
.health-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.health-list { display: flex; flex-direction: column; gap: var(--space-2); }

.health-issue {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-3);
  background: var(--surface, transparent);
}
/* The left rule is the at-a-glance severity cue, so it stays even when the
   badge scrolls out of view on a narrow screen. */
.health-issue.health-critical { border-left-color: var(--err); }
.health-issue.health-warning  { border-left-color: var(--warn); }
.health-issue.health-info     { border-left-color: var(--low); }

.health-issue-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.health-where { font-size: 12px; color: var(--text-muted, #667085); }
.health-message {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  /* Provider errors are long and unbroken; without this they force the card
     to scroll horizontally. */
  overflow-wrap: anywhere;
}
.health-remedy { color: var(--ok); margin: 6px 0 0; }
.health-alert-error { color: var(--err); margin: 6px 0 0; }
.health-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.health-actions:empty { display: none; }