/* YOUR EXISTING CSS + CUSENTRA GMAIL UPGRADE */
:root {
  --bg: #F8FAFC;
  /* Gmail light blue-gray */
  --card: #fff;
  --text: #101114;
  --muted: #6B7280;
  --border: #CBD5E1;
  --blue: #0A74DA;
  /* CUSENTRA primary (logo blue) */
  --brand-ink: #0A74DA;
  /* The wordmark's blue - as text, not as a fill; lightened in the dark block */

  /* A filled accent that carries white text in BOTH themes. --blue is the accent as *text*
     and lightens to #60a5fa in the dark theme, where #fff on it is 2.3:1 - so anything
     painting white on a solid accent (the Compose button, Send, the chat's send button and
     its user bubbles) uses these instead and stays at the logo blue, 4.7:1 on both. */
  --accent-solid: #0A74DA;
  --accent-solid-hover: #0866C2;
  --accent-solid-active: #075AAB;

  /* Panel chrome - the title bars of the Compose drawer and of Cusentra Chat. A recessed
     surface under a hairline rather than a coloured banner: both panels can be open over the
     mailbox at once, and two saturated bars fight the mail list and each other. The colour in
     those panels comes from what is inside them (the send button, the user's own bubbles). */
  --panel-head-bg: #F1F5F9;
  --panel-head-border: #E2E8F0;
  --panel-head-text: #0F172A;
  --panel-head-sub: #64748B;
  --panel-head-btn: #475569;
  --panel-head-btn-hover: rgba(15, 23, 42, 0.09);
  --blue-accent: #007BFF;
  /* Hover/active */
  --shadow: 0 4px 12px rgba(16, 17, 20, 0.08);
  /* Gmail subtle */

  --tab-accent: var(--blue);
  --tab-hover-bg: rgba(10, 116, 218, 0.06);
  --tab-bg-subtle: #f0f7ff;
  --tab-border: #cbd5e1;

  /* Danger/error red (static/css/compose.css). The P1-P3 siblings went with
     agents/priority_agent on 2026-09-09; nothing referenced them. */
  --p0-red: #E74C3C;
}

/* YOUR EXISTING RULES (unchanged) */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
}

body[data-tab="primary"] {
  --tab-accent: #0A74DA;
  --tab-hover-bg: rgba(10, 116, 218, 0.06);
  --tab-bg-subtle: #f0f7ff;
  --tab-border: #dbeafe;
}

body[data-tab="promotions"] {
  --tab-accent: #F59E0B;
  --tab-hover-bg: rgba(245, 158, 11, 0.08);
  --tab-bg-subtle: #fff7ed;
  --tab-border: #ffedd5;
}

body[data-tab="social"] {
  --tab-accent: #8B5CF6;
  --tab-hover-bg: rgba(139, 92, 246, 0.08);
  --tab-bg-subtle: #f5f3ff;
  --tab-border: #ede9fe;
}

body[data-tab="updates"] {
  --tab-accent: #10B981;
  --tab-hover-bg: rgba(16, 185, 129, 0.08);
  --tab-bg-subtle: #f0fdf4;
  --tab-border: #dcfce7;
}

body[data-tab="all"] {
  --tab-accent: #65A30D;
  --tab-hover-bg: rgba(101, 163, 13, 0.1);
  --tab-bg-subtle: #f7fee7;
  --tab-border: #d9f99d;
}

/* Label tabs: keep inbox row hover color consistent with active label tone */
body[data-tab^="label:"] {
  --tab-accent: #3B82F6;
  --tab-hover-bg: rgba(59, 130, 246, 0.1);
  --tab-bg-subtle: #eff6ff;
  --tab-border: #bfdbfe;
}

body:has(.sidebar .tab-user-label.tab-user-label-color-0.active) {
  --tab-accent: #3B82F6;
  --tab-hover-bg: rgba(59, 130, 246, 0.1);
  --tab-bg-subtle: #eff6ff;
  --tab-border: #bfdbfe;
}

body:has(.sidebar .tab-user-label.tab-user-label-color-1.active) {
  --tab-accent: #F97316;
  --tab-hover-bg: rgba(249, 115, 22, 0.1);
  --tab-bg-subtle: #fff7ed;
  --tab-border: #fed7aa;
}

body:has(.sidebar .tab-user-label.tab-user-label-color-2.active) {
  --tab-accent: #9333EA;
  --tab-hover-bg: rgba(147, 51, 234, 0.1);
  --tab-bg-subtle: #faf5ff;
  --tab-border: #e9d5ff;
}

body:has(.sidebar .tab-user-label.tab-user-label-color-3.active) {
  --tab-accent: #22C55E;
  --tab-hover-bg: rgba(34, 197, 94, 0.1);
  --tab-bg-subtle: #f0fdf4;
  --tab-border: #bbf7d0;
}

body[data-tab="spam"] {
  --tab-accent: #DC2626;
  --tab-hover-bg: rgba(220, 38, 38, 0.08);
  --tab-bg-subtle: #fef2f2;
  --tab-border: #fecaca;
}

body[data-tab="bin"] {
  --tab-accent: #475569;
  --tab-hover-bg: rgba(71, 85, 105, 0.08);
  --tab-bg-subtle: #f8fafc;
  --tab-border: #cbd5e1;
}

body[data-tab="starred"] {
  --tab-accent: #B45309;
  --tab-hover-bg: rgba(180, 83, 9, 0.08);
  --tab-bg-subtle: #fffbeb;
  --tab-border: #fde68a;
}

body[data-tab="important"] {
  --tab-accent: #BE123C;
  --tab-hover-bg: rgba(190, 18, 60, 0.08);
  --tab-bg-subtle: #fff1f2;
  --tab-border: #fecdd3;
}

body[data-tab="sent"] {
  --tab-accent: #4338CA;
  --tab-hover-bg: rgba(67, 56, 202, 0.08);
  --tab-bg-subtle: #eef2ff;
  --tab-border: #c7d2fe;
}

body[data-tab="scheduled"] {
  --tab-accent: #0891B2;
  --tab-hover-bg: rgba(8, 145, 178, 0.08);
  --tab-bg-subtle: #ecfeff;
  --tab-border: #a5f3fc;
}

body[data-tab="snoozed"] {
  --tab-accent: #EC4899;
  --tab-hover-bg: rgba(236, 72, 153, 0.08);
  --tab-bg-subtle: #fdf2f8;
  --tab-border: #fbcfe8;
}


/* NEW: GMAIL LAYOUT */
.gmail-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}

.sidebar {
  width: 260px;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 16px 20px !important;
  position: fixed;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 116, 218, 0.4);
}

.sidebar .tab {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
}

/* Unread count badge on sidebar tabs */
.tab-unread-badge {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  background: var(--tab-accent, #0A74DA);
  color: #fff;
}

/* Match badge color to each tab's accent */
.tab-primary .tab-unread-badge { background: #0A74DA; }
.tab-promotions .tab-unread-badge { background: #F59E0B; }
.tab-social .tab-unread-badge { background: #3B82F6; }
.tab-updates .tab-unread-badge { background: #10B981; }
.tab-spam .tab-unread-badge { background: #EF4444; }
.tab-bin .tab-unread-badge { background: #6B7280; }

/* Primary (1) = Blue */
.sidebar ul li:nth-child(1) .tab:hover,
.sidebar ul li:nth-child(1) .tab.active {
  background: rgba(10, 116, 218, 0.12);
  border-color: rgba(10, 116, 218, 0.38);
  color: var(--text);
  font-weight: 600;
}

/* Promotions (2) = Orange */
.sidebar ul li:nth-child(2) .tab:hover,
.sidebar ul li:nth-child(2) .tab.active {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.42);
  color: var(--text);
  font-weight: 600;
}

/* Social (3) = Purple */
.sidebar ul li:nth-child(3) .tab:hover,
.sidebar ul li:nth-child(3) .tab.active {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.42);
  color: var(--text);
  font-weight: 600;
}

/* Updates (4) = Green */
.sidebar ul li:nth-child(4) .tab:hover,
.sidebar ul li:nth-child(4) .tab.active {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.42);
  color: var(--text);
  font-weight: 600;
}

/* All Mails (5) = Lime */
.sidebar ul li:nth-child(5) .tab:hover,
.sidebar ul li:nth-child(5) .tab.active {
  background: rgba(101, 163, 13, 0.14);
  border-color: rgba(101, 163, 13, 0.38);
  color: var(--text);
  font-weight: 600;
}

/* Spam (6) = Red */
.sidebar ul li:nth-child(6) .tab:hover,
.sidebar ul li:nth-child(6) .tab.active {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.35);
  color: var(--text);
  font-weight: 600;
}

/* Bin (7) = Violet */
.sidebar ul li:nth-child(7) .tab:hover,
.sidebar ul li:nth-child(7) .tab.active {
  background: rgba(71, 85, 105, 0.12);
  border-color: rgba(71, 85, 105, 0.35);
  color: var(--text);
  font-weight: 600;
}

/* Starred (9) = Amber */
.sidebar ul li:nth-child(9) .tab:hover,
.sidebar ul li:nth-child(9) .tab.active {
  background: rgba(180, 83, 9, 0.12);
  border-color: rgba(180, 83, 9, 0.35);
  color: var(--text);
  font-weight: 600;
}

/* Important (10) = Rose */
.sidebar ul li:nth-child(10) .tab:hover,
.sidebar ul li:nth-child(10) .tab.active {
  background: rgba(190, 18, 60, 0.12);
  border-color: rgba(190, 18, 60, 0.35);
  color: var(--text);
  font-weight: 600;
}

/* Sent (11) = Indigo/Purple */
.sidebar ul li:nth-child(11) .tab:hover,
.sidebar ul li:nth-child(11) .tab.active {
  background: rgba(67, 56, 202, 0.12);
  border-color: rgba(67, 56, 202, 0.35);
  color: var(--text);
  font-weight: 600;
}

/* Scheduled (12) = Teal */
.sidebar ul li:nth-child(12) .tab:hover,
.sidebar ul li:nth-child(12) .tab.active {
  background: rgba(8, 145, 178, 0.12);
  border-color: rgba(8, 145, 178, 0.35);
  color: var(--text);
  font-weight: 600;
}

/* Snoozed (13) = Pink */
.sidebar ul li:nth-child(13) .tab:hover,
.sidebar ul li:nth-child(13) .tab.active {
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.35);
  color: var(--text);
  font-weight: 600;
}

.logo {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-top: 0;
  flex-shrink: 0;
}

.logo-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}

.sidebar-logo-toggle:hover {
  background: rgba(10, 116, 218, 0.06);
}

.sidebar-logo-toggle:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

.logo-text {
  min-width: 0;
}

/* The brand mark is painted, not loaded as an image, so it can take a colour per theme.
   `--brand-ink` already resolves to #0A74DA on light and the lighter #5EA9F2 on dark (the
   account avatar uses the same token), and the mark is the one shape in the app that has to
   look right on both grounds - the deep blue goes muddy against #0b1220. A mask gives one
   file two colourways; an <img> could not, because its own pixels would paint over any
   background-color behind them. The drawing itself lives in images/brand/mark-orbit.svg. */
.header-logo,
.sidebar-brand-logo {
  background-color: var(--brand-ink);
  -webkit-mask: url("images/brand/mark-orbit.svg") center / contain no-repeat;
  mask: url("images/brand/mark-orbit.svg") center / contain no-repeat;
}

.sidebar-brand-logo {
  display: block;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.sidebar-collapse-btn {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 10px;
}

.logo h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
  white-space: nowrap;
}

/* The wordmark is one line in two weights: "Cusentra" in the brand blue the rest of the
   app already uses as its accent, "Mail" in the ordinary text colour at a lighter weight.
   Deliberately flat - a gradient text-fill at 20px only muddies the letterforms, and it
   was the one place in the sidebar painting a violet that appears nowhere else.
   The second line ("Powered by Cusentra") is gone: it said the brand name a second time
   directly under a product already named after it. */
.logo .brand {
  color: var(--brand-ink);
  font-weight: 700;
}

.logo .product {
  color: var(--text);
  font-weight: 500;
}

/* Square, so width and height move together - `width: auto` is no use now that this is a
   painted span rather than an <img> with intrinsic proportions. responsive.css sets both. */
.header-logo {
  width: 32px;
  height: 32px;
  display: block;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0 0 auto 0;
  flex-grow: 1;
}

.sidebar li {
  margin: 4px 0;
}

.sidebar .sidebar-more-title {
  margin: 10px 12px 4px 0;
  padding: 8px 16px 2px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.sidebar .tab {
  --switch-bg: rgba(10, 116, 218, 0.16);
  --switch-border: rgba(10, 116, 218, 0.38);
  --switch-shadow: rgba(10, 116, 218, 0.18);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 16px;
  margin-right: 12px;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.sidebar .tab-primary {
  --switch-bg: rgba(10, 116, 218, 0.16);
  --switch-border: rgba(10, 116, 218, 0.38);
  --switch-shadow: rgba(10, 116, 218, 0.2);
}

.sidebar .tab-promotions {
  --switch-bg: rgba(245, 158, 11, 0.16);
  --switch-border: rgba(245, 158, 11, 0.42);
  --switch-shadow: rgba(245, 158, 11, 0.2);
}

.sidebar .tab-social {
  --switch-bg: rgba(139, 92, 246, 0.18);
  --switch-border: rgba(139, 92, 246, 0.44);
  --switch-shadow: rgba(139, 92, 246, 0.24);
}

.sidebar .tab-updates {
  --switch-bg: rgba(16, 185, 129, 0.16);
  --switch-border: rgba(16, 185, 129, 0.42);
  --switch-shadow: rgba(16, 185, 129, 0.2);
}

.sidebar .tab-all {
  --switch-bg: rgba(101, 163, 13, 0.16);
  --switch-border: rgba(101, 163, 13, 0.38);
  --switch-shadow: rgba(101, 163, 13, 0.2);
}

.sidebar .tab-spam {
  --switch-bg: rgba(220, 38, 38, 0.16);
  --switch-border: rgba(220, 38, 38, 0.38);
  --switch-shadow: rgba(220, 38, 38, 0.22);
}

.sidebar .tab-bin {
  --switch-bg: rgba(71, 85, 105, 0.16);
  --switch-border: rgba(71, 85, 105, 0.38);
  --switch-shadow: rgba(71, 85, 105, 0.2);
}

.sidebar .tab-starred {
  --switch-bg: rgba(180, 83, 9, 0.16);
  --switch-border: rgba(180, 83, 9, 0.38);
  --switch-shadow: rgba(180, 83, 9, 0.2);
}

.sidebar .tab-important {
  --switch-bg: rgba(190, 18, 60, 0.16);
  --switch-border: rgba(190, 18, 60, 0.38);
  --switch-shadow: rgba(190, 18, 60, 0.22);
}

.sidebar .tab-sent {
  --switch-bg: rgba(67, 56, 202, 0.16);
  --switch-border: rgba(67, 56, 202, 0.38);
  --switch-shadow: rgba(67, 56, 202, 0.22);
}

.sidebar .tab-scheduled {
  --switch-bg: rgba(8, 145, 178, 0.16);
  --switch-border: rgba(8, 145, 178, 0.38);
  --switch-shadow: rgba(8, 145, 178, 0.2);
}

.sidebar .tab-snoozed {
  --switch-bg: rgba(236, 72, 153, 0.16);
  --switch-border: rgba(236, 72, 153, 0.38);
  --switch-shadow: rgba(236, 72, 153, 0.22);
}

.sidebar .tab-label {
  font-size: 14px;
  line-height: 1.2;
}

.sidebar .tab-icon {
  width: 20px;
  height: 20px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar .tab-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.sidebar .tab.is-switching {
  background: var(--switch-bg) !important;
  border-color: var(--switch-border) !important;
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 4px 14px var(--switch-shadow);
}

.sidebar .tab.is-switching .tab-icon {
  animation: sidebarTabSwitchPulse 0.7s ease-in-out infinite;
}

@keyframes sidebarTabSwitchPulse {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.14);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.85;
  }
}

body.sidebar-tab-switching .sidebar a.tab.is-switching {
  pointer-events: none;
}

html[data-theme='dark'] .sidebar .tab.is-switching {
  background: var(--switch-bg) !important;
  border-color: var(--switch-border) !important;
  box-shadow: 0 4px 14px var(--switch-shadow);
}

.sidebar button.tab {
  width: calc(100% - 12px);
  text-align: left;
  font-family: inherit;
}

.sidebar-create-label-tab {
  background: #f8fbff !important;
  border: 1px solid #dbeafe !important;
  color: #2563eb !important;
  font-weight: 600;
}

.sidebar-create-label-tab:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

.sidebar-labels-divider {
  margin: 8px 14px 4px 0;
  padding: 8px 16px 2px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
}

.sidebar-label-settings-btn {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.14s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-label-settings-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.sidebar-label-settings-btn:hover {
  background: rgba(148, 163, 184, 0.16);
  color: #334155;
}

.sidebar-label-settings-btn:active {
  transform: scale(0.92);
}

.sidebar-label-settings-btn.is-opening,
.sidebar-label-settings-btn.is-open {
  background: rgba(59, 130, 246, 0.16);
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35);
}

.sidebar-label-settings-btn.is-opening svg {
  animation: sidebarLabelSettingsSpin 0.55s linear infinite;
}

@keyframes sidebarLabelSettingsSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);
  }
}

.sidebar-label-settings-btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

/* Stable class-based tab colors (avoid nth-child ordering issues) */
.sidebar .tab-sent:hover,
.sidebar .tab-sent.active {
  background: rgba(67, 56, 202, 0.12) !important;
  border-color: rgba(67, 56, 202, 0.35) !important;
  color: var(--text);
  font-weight: 600;
}

.sidebar .tab-scheduled:hover,
.sidebar .tab-scheduled.active {
  background: rgba(8, 145, 178, 0.12) !important;
  border-color: rgba(8, 145, 178, 0.35) !important;
  color: var(--text);
  font-weight: 600;
}

.sidebar .tab-snoozed:hover,
.sidebar .tab-snoozed.active {
  background: rgba(236, 72, 153, 0.12) !important;
  border-color: rgba(236, 72, 153, 0.35) !important;
  color: var(--text);
  font-weight: 600;
}

.sidebar .tab-user-label {
  border: 1px solid transparent;
  box-sizing: border-box;
  min-height: 44px;
  font-weight: 500;
}

.sidebar .tab-user-label:hover,
.sidebar .tab-user-label.active {
  color: var(--text);
  font-weight: 500;
  transform: none !important;
}

.sidebar .tab-user-label-color-0:hover,
.sidebar .tab-user-label-color-0.active {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.4);
}

.sidebar .tab-user-label-color-1:hover,
.sidebar .tab-user-label-color-1.active {
  background: rgba(249, 115, 22, 0.16);
  border-color: rgba(249, 115, 22, 0.4);
}

.sidebar .tab-user-label-color-2:hover,
.sidebar .tab-user-label-color-2.active {
  background: rgba(147, 51, 234, 0.16);
  border-color: rgba(147, 51, 234, 0.4);
}

.sidebar .tab-user-label-color-3:hover,
.sidebar .tab-user-label-color-3.active {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.4);
}

.sidebar-user-label-item {
  position: relative;
  --label-depth: 0;
}

.sidebar-user-label-item .tab-user-label {
  padding-left: calc(16px + (var(--label-depth) * 18px));
  padding-right: 38px;
}

.sidebar-label-expander {
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: #475569;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  margin-right: 4px;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.28);
}

.sidebar-label-expander:hover {
  background: rgba(148, 163, 184, 0.3);
  color: #1e293b;
}

.sidebar-label-expander .sidebar-label-expander-icon {
  width: 12px;
  height: 12px;
  transform: rotate(90deg);
  transition: transform 0.16s ease;
}

.sidebar-label-expander.is-collapsed .sidebar-label-expander-icon {
  transform: rotate(0deg);
}

.sidebar-label-expander:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

.sidebar-user-label-item:not(.has-sublabel-children) .sidebar-label-expander {
  visibility: hidden;
  pointer-events: none;
}

.sidebar-user-label-item.has-sublabel-children .tab-user-label.active .sidebar-label-expander {
  background: rgba(59, 130, 246, 0.22);
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35);
}

.sidebar-user-label-item.sidebar-user-sublabel-item .tab-user-label {
  font-weight: 450;
  position: relative;
  padding-left: calc(22px + (var(--label-depth) * 20px));
}

.sidebar-user-label-item.sidebar-user-sublabel-item .tab-icon {
  opacity: 0.75;
  font-size: 13px;
}

.sidebar-user-label-item.sidebar-user-sublabel-item::before {
  content: '';
  position: absolute;
  left: calc(14px + ((var(--label-depth) - 1) * 20px));
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: rgba(148, 163, 184, 0.42);
  pointer-events: none;
}

.sidebar-user-label-item.sidebar-user-sublabel-item .tab-user-label::before {
  content: '';
  position: absolute;
  left: calc(14px + ((var(--label-depth) - 1) * 20px));
  top: 50%;
  width: 12px;
  height: 1px;
  background: rgba(148, 163, 184, 0.65);
  transform: translateY(-50%);
  pointer-events: none;
}

.sidebar-label-menu-btn {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  z-index: 2;
  display: none;
}

.sidebar-user-label-item:hover .sidebar-label-menu-btn,
.sidebar-user-label-item.label-menu-open .sidebar-label-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-label-menu-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.sidebar-label-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 210px;
  max-width: min(240px, calc(100vw - 48px));
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
  padding: 8px 0;
  z-index: 200000;
}

.sidebar-user-label-item.label-menu-open .sidebar-label-menu {
  display: block;
}

.sidebar-label-menu.open {
  display: block;
}

.sidebar-label-menu-section-title {
  padding: 7px 12px 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.sidebar-label-menu-item {
  width: 100%;
  border: none;
  background: #fff;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
}

.sidebar-label-menu-item:hover {
  background: #f1f5f9;
}

.sidebar-label-menu-item.selected {
  font-weight: 600;
  color: #0f172a;
}

.sidebar-label-menu-item.selected::before {
  content: "✓ ";
  color: #0f172a;
}

.sidebar-label-menu-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 6px 0;
}

.sidebar-label-submenu {
  display: none;
  margin: 4px 10px 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.sidebar-label-submenu.open {
  display: block;
}

.sidebar-label-submenu .sidebar-label-menu-item {
  padding-left: 16px;
}

.sidebar-label-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 10px;
}

.sidebar-label-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.sidebar-label-color-swatch:hover {
  transform: scale(1.07);
}

.sidebar-label-color-swatch.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d4ed8;
}

.sidebar-label-color-swatch.selected::before {
  content: '' !important;
}

.label-color-preview-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 10px 0;
}

.label-color-preview-label {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
}

.label-color-preview-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #93c5fd;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

.label-color-input-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 10px;
  margin-top: 8px;
}

.label-color-input-grid label {
  font-size: 13px;
  color: #334155;
  font-weight: 600;
}

.label-color-input-grid input[type="color"] {
  width: 48px;
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  padding: 0;
}

/* ── Gmail-style New Label Modal ── */
.label-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(2px);
  z-index: 99998;
  align-items: center;
  justify-content: center;
}

.label-modal-overlay.open {
  display: flex;
}

.remove-label-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(2px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.remove-label-modal-overlay.open {
  display: flex;
}

.remove-label-modal-overlay.open ~ .hamburger-container,
body:has(.remove-label-modal-overlay.open) .hamburger-container {
  opacity: 0.88;
  filter: brightness(0.92) saturate(0.95);
}

.remove-label-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  width: 360px;
  max-width: 92vw;
  padding: 22px 24px 18px;
  border: 1px solid #e2e8f0;
}

.label-action-modal {
  width: min(460px, calc(100vw - 30px));
  max-width: 94vw;
  border-radius: 18px;
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.24);
  padding: 26px 24px 20px;
}

.remove-label-modal h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 500;
  color: #202124;
}

.label-action-modal h3 {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  color: #1f2937;
}

.remove-label-modal-text {
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 8px; 
  padding-right: 10px; 
  color: #5f6368;
  font-size: 14px;
}

.label-action-modal .remove-label-modal-text {
  display: block;
  margin: 0;
  padding-right: 0;
  text-align: center;
  color: #64748b;
  font-size: 15px;
  line-height: 1.55;
}

.remove-label-modal-actions {
  margin-top: 18px;
}

.label-action-modal .remove-label-modal-actions {
  margin-top: 16px;
}

.remove-label-modal-delete {
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px #fff;
  transition: background 0.15s;
}

.remove-label-modal-delete:hover {
  background: #155fc7;
}

.remove-label-modal-delete:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2), inset 0 0 0 2px #fff;
}

.label-action-modal .label-modal-actions {
  justify-content: center;
  gap: 12px;
}

.label-action-modal .label-modal-actions button {
  min-width: 110px;
  border-radius: 12px;
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 600;
}

.label-action-modal .label-modal-cancel {
  background: #f8fafc;
  border: 1px solid #dbe2ea;
  color: #334155;
}

.label-action-modal .label-modal-cancel:hover {
  background: #f1f5f9;
}

.label-action-modal .remove-label-modal-delete,
.label-action-modal .label-modal-create {
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  box-shadow: none;
}

.label-action-modal .remove-label-modal-delete:hover,
.label-action-modal .label-modal-create:hover {
  background: #dbeafe;
}

.sublabel-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 2px solid #1a73e8;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  margin-top: 12px;
  transition: border-color 0.15s;
}

.label-action-modal .sublabel-input {
  margin-top: 14px;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 15px;
}

.sublabel-input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15);
}

.label-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  width: 400px;
  max-width: 92vw;
  padding: 24px 28px 20px;
  font-family: inherit;
}

.label-modal h3 {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 500;
  color: #202124;
}

.label-settings-modal {
  width: min(860px, calc(100vw - 40px));
  max-height: min(82vh, 760px);
  border-radius: 16px;
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.22);
  border: 1px solid #e2e8f0;
  padding: 26px 26px 18px;
}

.label-settings-modal h3 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.label-settings-modal .remove-label-modal-text {
  font-size: 15px;
  color: #64748b;
  margin: 0 0 10px;
  padding-right: 0;
  justify-content: flex-start;
}

.label-settings-sync-status {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

.label-settings-sync-status.is-available {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.label-settings-sync-status.is-locked {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.label-settings-table-wrap {
  margin-top: 10px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #fbfdff;
  overflow: auto;
  max-height: min(54vh, 520px);
}

.label-settings-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.label-settings-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #dbe3ef;
}

.label-settings-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e9eff6;
  vertical-align: middle;
}

.label-settings-table tbody tr {
  transition: background 0.14s ease;
}

.label-settings-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.06);
}

.label-settings-table tr:last-child td {
  border-bottom: none;
}

.label-settings-name {
  color: #1f2937;
  font-weight: 600;
}

.label-settings-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  min-width: 150px;
  border: 1px solid #c8d4e3;
  border-radius: 999px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%2364758b' d='M5.25 7.75L10 12.5l4.75-4.75 1.5 1.5-6.25 6.25L3.75 9.25z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  color: #1f2937;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 34px 8px 14px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.label-settings-select:hover {
  border-color: #94a3b8;
}

.label-settings-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.label-settings-modal .remove-label-modal-actions {
  margin-top: 14px;
}

.label-settings-modal .label-modal-cancel {
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .label-settings-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 26px);
    padding: 18px 14px 14px;
    border-radius: 14px;
  }

  .label-settings-modal h3 {
    font-size: 22px;
  }

  .label-settings-table {
    min-width: 460px;
  }

  .label-settings-table thead th,
  .label-settings-table td {
    padding: 10px 10px;
  }
}

.label-settings-empty {
  color: #64748b;
  text-align: center;
  font-style: italic;
}

.label-modal label {
  display: block;
  font-size: 13px;
  color: #5f6368;
  margin-bottom: 6px;
}

.label-modal input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 2px solid #1a73e8;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.label-modal input[type="text"]:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15);
}

.label-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.label-modal-actions button {
  padding: 8px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.label-modal-actions .label-modal-cancel {
  background: none;
  border: none;
  color: #1a73e8;
}

.label-modal-actions .label-modal-cancel:hover {
  background: rgba(26, 115, 232, 0.08);
}

.label-modal-actions .label-modal-create {
  background: none;
  border: none;
  color: #5f6368;
}

.label-modal-actions .label-modal-create:hover {
  background: rgba(0, 0, 0, 0.06);
}

.label-modal-actions .label-modal-create:not(:disabled):hover {
  color: #202124;
}

.stats {
  font-size: 12px;
  color: var(--muted);
  padding: 16px 0 0 0;
  margin-top: auto;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.email-body img {
  display: inline-block !important;
  max-width: 100% !important;
  height: auto !important;
}

.inbox {
  flex: 1;
  padding: 0 clamp(10px, 1.2vw, 20px) 24px clamp(10px, 1.2vw, 20px);
  overflow-y: auto;
  height: 100vh;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: white;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 16px;
}

.content {
  flex: 1;
  min-width: 0;
}

.from {
  font-weight: 500;
  margin-bottom: 2px;
  font-size: 14px;
}

.email-domain {
  font-size: 12px;
  color: var(--muted);
  margin-left: 4px;
}

.preview {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 6px;
}

.date {
  font-size: 12px;
  color: var(--muted);
}

.attachments {
  color: var(--blue);
  font-size: 16px;
  margin-left: 12px;
  flex-shrink: 0;
}

/* LOADING + EMPTY */
.loader {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-style: italic;
}

.empty-state {
  text-align: center;
  padding: 80px 40px;
  color: var(--muted);
}

.empty-state h3 {
  margin: 0 0 8px 0;
}

/* A rule's list fields (Keywords) are textareas, not one-line inputs: the list grows and a
   single line meant the tenth keyword was typed past the right edge of the box, after the caret
   had travelled through the other nine. Small, monospace-ish line rhythm so each entry reads as
   its own item. */
/* A word list (settings.js ruleWordList): the box holds one word, "Show N" opens the rest. */
.rule-words-entry {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.rule-words-input {
  flex: 1 1 auto;
  min-width: 0;
}

.rule-words-toggle {
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--set-line-strong);
  border-radius: 999px;
  background: var(--set-panel-soft);
  color: var(--set-text-soft);
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}

.rule-words-toggle:hover:not(:disabled),
.rule-words-toggle[aria-expanded="true"] {
  border-color: var(--set-accent-line);
  color: var(--set-accent);
}

.rule-words-toggle:disabled {
  cursor: default;
  opacity: 0.7;
}

.rule-words-toggle.is-bumped {
  animation: rule-words-bump 0.45s ease-out;
}

@keyframes rule-words-bump {
  0% { background: var(--set-accent-soft); border-color: var(--set-accent); }
  100% { background: var(--set-panel-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .rule-words-toggle.is-bumped { animation: none; }
}

.rule-words-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.rule-words-list[hidden] {
  display: none;
}

.rule-words-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--set-line-strong);
  border-radius: 999px;
  background: var(--set-panel-soft);
  color: var(--set-text);
  font-size: 12.5px;
}

.rule-words-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rule-words-drop {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--set-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.rule-words-drop:hover {
  background: var(--set-danger-soft);
  color: var(--set-danger);
}

/* INBOX.HTML SELECTORS (REQUIRED) */
.title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text);
}

.muted {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 20px;
  background: var(--card);
  border-radius: 12px;
  border-left: 4px solid var(--border);
  transition: all 0.2s;
  box-shadow: var(--shadow);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-left-color: var(--tab-accent);
  background: var(--tab-hover-bg);
}

.subject {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text);
}

.meta {
  color: var(--muted);
  font-size: 14px;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 60px 20px;
  font-style: italic;
}

/* =========================
   EMAIL DETAIL (Gmail-like)
   Append-only: does NOT change inbox styles
   ========================= */

.email-detail-page {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  padding: 0;
  overflow-x: hidden;
}

.detail-header {
  margin-bottom: 14px;
}

/* Why this mail carries the chip it carries - one sentence from the rules engine
   (utils/rule_reasons), filled by static/js/email_detail.js. Hidden when empty. */
.verdict-why {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #64748b);
}

.verdict-why:empty {
  display: none;
}

/* ========== EMAIL BODY CONTAINER & CONTENT ========== */
.email-body-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 24px;
  margin: 16px 0 24px 0;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-x: hidden;
  word-break: break-word;
  white-space: normal;
  position: relative;
  z-index: 10;
}

/* HTML emails */
.email-body-html {
  font-size: 15px;
  color: var(--text);
}

.email-body-html div,
.email-body-html p,
.email-body-html span,
.email-body-html section,
.email-body-html article {
  max-width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  overflow-x: hidden;
}

/* Responsive images in emails */
.email-body-html img,
.email-body-text img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 12px 0 !important;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Tables in emails */
.email-body-html table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}

.email-body-html table td,
.email-body-html table th {
  padding: 12px;
  border: 1px solid var(--border);
  text-align: left;
}

.email-body-html table th {
  background: rgba(10, 116, 218, 0.08);
  font-weight: 600;
}

/* Lists in emails */
.email-body-html ul,
.email-body-html ol {
  margin: 12px 0;
  padding-left: 24px;
}

.email-body-html li {
  margin: 6px 0;
  line-height: 1.6;
}

/* Links in emails */
.email-body-html a,
.email-body-text a {
  color: var(--blue);
  text-decoration: none;
  word-break: break-all;
}

.email-body-html a:hover,
.email-body-text a:hover {
  text-decoration: underline;
}

/* Plain text emails */
.email-body-text {
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border-left: none;
}

.email-body-text pre {
  margin: 0;
  overflow-x: auto;
  max-width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Empty state */
.email-body-empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  font-style: italic;
}

/* Blockquotes in emails */
.email-body-html blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--border);
  background: rgba(10, 116, 218, 0.04);
  color: var(--muted);
  font-style: italic;
}

/* Code blocks in emails */
.email-body-html code,
.email-body-html pre {
  background: rgba(10, 116, 218, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  overflow-x: auto;
}

.email-body-html pre {
  padding: 12px;
  margin: 12px 0;
  overflow-x: auto;
  word-wrap: break-word;
}

/* Conversation thread cards (Gmail-like collapsed items) */
.thread-title {
  margin: 18px 0 10px 0;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Gmail-style conversation thread: each earlier message is a single collapsed
   row (avatar, sender, inline snippet, date), not a stacked card with the
   preview on its own line. Clicking a row expands that message in place. */
.thread-card {
  margin: 0;
  border: none;
  border-bottom: 1px solid #e8eaed;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.thread-card:last-child {
  border-bottom: none;
}

.thread-card-header {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  border-radius: 8px;
}

.thread-card-header:hover {
  background: #f5f6f7;
  box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0;
}

.thread-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border: none;
  line-height: 1;
}

/* Sender and snippet share one line, exactly like Gmail's collapsed rows. */
.thread-card-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.thread-card-from {
  font-size: 14px;
  font-weight: 700;
  color: #202124;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-card-snippet {
  font-size: 14px;
  color: #5f6368;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.thread-card-date {
  font-size: 12px;
  color: #5f6368;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Paperclip on a collapsed row, exactly where the mail client the user came from puts it. */
.thread-card-clip {
  display: inline-flex;
  align-items: center;
  color: #5f6368;
  flex-shrink: 0;
}

.thread-card-clip svg {
  width: 14px;
  height: 14px;
}

/* The files themselves, under an opened card's body. */
.thread-card-attachments {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e8eaed;
}

.thread-card-attachments.is-empty {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.thread-card-att-head {
  font-size: 12px;
  font-weight: 600;
  color: #5f6368;
  margin-bottom: 8px;
}

.thread-card-att-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.thread-card-att-loading {
  font-size: 13px;
  color: #5f6368;
}

/* Expanding a row hides its snippet - the full body replaces it. */
.thread-card.open .thread-card-snippet {
  display: none;
}

.thread-card.open .thread-card-from {
  max-width: 100%;
}

.thread-card-body {
  display: none;
  padding: 4px 8px 16px 52px;
  background: transparent;
}

.thread-card.open .thread-card-body {
  display: block;
}

/* Gmail's "N older messages" control: a full-width clickable row with the
   count on the left and a rule running across. Previously this was just the
   circle, so clicking anywhere to the right of the number did nothing. */
.thread-collapsed-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 6px 8px;
  margin: 2px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
}

.thread-collapsed-row:hover {
  background: #f5f6f7;
}

.thread-collapsed-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #dadce0;
  background: #f1f3f4;
  color: #3c4043;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.thread-collapsed-row:hover .thread-collapsed-bubble {
  background: #e8eaed;
}

.thread-collapsed-rule {
  flex: 1;
  height: 1px;
  background: #e8eaed;
}

/* The conversation list sits directly above the opened message, so the open
   mail reads as the last, expanded item of the same thread. */
.email-body-container {
  margin-top: 0;
}

/* It starts at its floor and grows to the mail once loaded (email_detail.js,
   fitMessageFrame). Without a height the browser's default 150px applied, and
   a fit only grows - so a short mail could never come down to its own size. */
.thread-card-iframe {
  width: 100%;
  height: 60px;
  min-height: 60px;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  display: block;
  background: #ffffff;
  overflow: hidden;
}

/* Message bodies always sit on white, whether they came through as HTML (an
   iframe) or as plain text. They used to differ - HTML white, plain text dark -
   so the same thread mixed black and white panels. */
.thread-card-text {
  margin: 0;
  padding: 16px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.6;
  color: #202124;
  font-family: inherit;
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
}

/* The open message, when it is one of several, takes the shape of the others -
   Gmail's thread, where every body starts under its sender's name and ends at
   one right edge. It kept the full-width reading card, so the message before it
   stood 52px to its right and its text began elsewhere again. 52px is the row's
   8px padding + 32px avatar + 12px gap, which is also where the open message's
   own sender name starts (40px avatar + 12px). email_detail.js sets .in-thread
   when the body arrives with other messages; a lone mail keeps the card. */
.email-body-container.in-thread {
  margin: 0 8px 16px 52px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.email-body-container.in-thread .email-body-html {
  border: 1px solid #e8eaed;
  border-radius: 8px;
  overflow: hidden;
}

/* Sized to what it says, like the earlier messages. The iframe carries the lone
   mail's 500px floor inline, hence the !important. */
.email-body-container.in-thread .email-body-html iframe {
  min-height: 60px !important;
}

.email-body-container.in-thread .email-body-text {
  padding: 16px;
  color: #202124;
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
}

.email-body-container.in-thread ~ #email-attachments,
.email-body-container.in-thread ~ #email-attachments-loading,
.email-body-container.in-thread ~ #email-attachment-note {
  padding-left: 52px;
  padding-right: 8px;
}

/* Toolbar row like Gmail message toolbar */
.email-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

/* ========================================
   ULTRA-SPECIFIC BUTTON FIX (NUCLEAR)
   ======================================== */


/* Clean up icon-btn to have no background initially, just text and border */
.email-detail-page .email-toolbar .toolbar-actions .icon-btn,
.email-toolbar .icon-btn,
.icon-btn {
  all: initial;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 22px;
  line-height: 1.2;
  outline: none;
  margin: 0;
}

/* Three-dot menu button specifically */
.toolbar-more-btn {
  padding: 8px 12px !important;
  font-size: 18px !important;
  color: #475569 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.toolbar-more-btn:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

.toolbar-more-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: visible;
}

.toolbar-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
  min-width: 190px;
  z-index: 10050;
  padding: 6px 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.toolbar-more-menu.open {
  display: block !important;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.email-detail-page .email-toolbar .icon-btn:hover,
.email-toolbar .icon-btn:hover,
.icon-btn:hover {
  border-color: #93C5FD !important;
  background: rgba(10, 116, 218, 0.12) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(10, 116, 218, 0.16) !important;
}

.email-detail-page .email-toolbar .icon-btn:active,
.email-toolbar .icon-btn:active,
.icon-btn:active {
  transform: translateY(0) scale(0.98) !important;
  background: rgba(10, 116, 218, 0.22) !important;
  border-color: #60A5FA !important;
  box-shadow: 0 2px 8px rgba(10, 116, 218, 0.2) !important;
}

.email-detail-page .email-toolbar .icon-btn:focus-visible,
.email-toolbar .icon-btn:focus-visible,
.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.28), 0 2px 8px rgba(10, 116, 218, 0.2) !important;
  border-color: #60A5FA !important;
}

.email-detail-page .email-toolbar .icon-btn.is-loading,
.email-toolbar .icon-btn.is-loading,
.icon-btn.is-loading {
  opacity: 0.9;
  cursor: wait !important;
  pointer-events: none;
  background: rgba(10, 116, 218, 0.2) !important;
  border-color: #60A5FA !important;
  color: #0F172A !important;
}

.email-detail-page .email-toolbar .icon-btn.is-loading .btn-icon,
.email-toolbar .icon-btn.is-loading .btn-icon,
.icon-btn.is-loading .btn-icon {
  animation: toolbarSpin 0.9s linear infinite;
}

@keyframes toolbarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* PRIMARY BUTTONS */
.email-detail-page .email-toolbar .icon-btn.primary,
.email-toolbar .icon-btn.primary,
.icon-btn.primary {
  border-color: #0A74DA !important;
  background: rgba(10, 116, 218, 0.15) !important;
}

.email-detail-page .email-toolbar .icon-btn.primary:hover,
.email-toolbar .icon-btn.primary:hover,
.icon-btn.primary:hover {
  background: rgba(10, 116, 218, 0.25) !important;
  border-color: #0854a0 !important;
}

/* DANGER BUTTONS */
.email-detail-page .email-toolbar .icon-btn.danger,
.email-toolbar .icon-btn.danger,
.ai-btn-row .icon-btn.danger {
  background: #FFFFFF !important;
  color: #101114 !important;
}

.email-detail-page .email-toolbar .icon-btn.danger:hover,
.email-toolbar .icon-btn.danger:hover,
.ai-btn-row .icon-btn.danger:hover {
  border-color: #93C5FD !important;
  background: rgba(10, 116, 218, 0.12) !important;
  box-shadow: 0 6px 14px rgba(10, 116, 218, 0.16) !important;
}

.toolbar-more-item.danger-text {
  color: #EF4444 !important;
}

.toolbar-more-item.danger-text:hover {
  background: #FEF2F2 !important;
}

.toolbar-more-item:hover {
  background: rgba(10, 116, 218, 0.12) !important;
  color: #0F172A !important;
}

.toolbar-more-item:not(:last-child) {
  border-bottom: 1px solid #F1F5F9;
}

/* Desktop spacing */
.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

/* Label-tab detail page: keep full toolbar actions in one compact row */
.email-detail-page.label-tab-page .toolbar-actions {
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 2px;
  margin-top: -2px;
}

.email-detail-page.label-tab-page .email-toolbar .toolbar-actions .icon-btn,
.email-detail-page.label-tab-page .email-toolbar .icon-btn,
.email-detail-page.label-tab-page .icon-btn {
  padding: 8px 14px;
  font-size: 14px;
  min-height: 22px;
  gap: 8px;
  flex-shrink: 0;
}

.email-detail-page.label-tab-page .toolbar-actions .btn-text {
  font-size: 14px;
}

.email-detail-page.label-tab-page .email-toolbar .toolbar-actions .icon-btn:hover,
.email-detail-page.label-tab-page .email-toolbar .icon-btn:hover,
.email-detail-page.label-tab-page .icon-btn:hover {
  transform: none !important;
}

/* Email title/subject */
.email-detail-page .title {
  font-size: 24px;
  font-weight: 600;
  margin: 16px 0 12px 0;
  color: var(--text);
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.4;
}

/* Email meta (from/date) */
.email-meta {
  margin: 6px 0 14px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Summary box styling */
.summary-box {
  background-color: #EEF2FF;
  border: 1px solid #C7D2FE;
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.08);
}

.summary-box h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #4338CA;
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-box p {
  margin: 0;
  color: #4338CA;
  line-height: 1.6;
  word-wrap: break-word;
}

/* Summary section - Add to Notes button (purple/indigo hover) */
.btn-summary-notes:hover {
  background-color: #EEF2FF !important;
  color: #4338CA !important;
  border-color: #818CF8 !important;
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.2);
  transform: translateY(-1px);
}

.btn-summary-notify {
  background-color: #FFFFFF !important;
  color: #0F766E !important;
  border: 1px solid #99F6E4 !important;
  padding: 6px 14px !important;
  border-radius: 18px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

.btn-summary-notify:hover {
  background-color: #CCFBF1 !important;
  color: #0F766E !important;
  border-color: #5EEAD4 !important;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.16) !important;
  transform: translateY(-1px);
}

/* Idle state shown before the user asks for a summary or a draft.
   AI generation is click-triggered, so these sections start empty. */
.analysis-empty-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.75;
}

.analysis-empty-btn {
  background: #fff;
  color: #4338CA;
  border: 1px solid #C7D2FE;
  padding: 5px 13px;
  border-radius: 18px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.analysis-empty-btn:hover {
  background: #EEF2FF;
  border-color: #A5B4FC;
  transform: translateY(-1px);
}

.analysis-empty-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.btn-summary-notify:focus,
.btn-summary-notify:active {
  background-color: #CCFBF1 !important;
  color: #0F766E !important;
  border-color: #5EEAD4 !important;
}

.btn-summary-notify:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.summary-box,
.response-box {
  scroll-margin-top: 80px;
}

/* Response box styling */
.response-box {
  background-color: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.08);
  /* matched to green theme */
}

.response-box h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #047857;
  display: flex;
  align-items: center;
  gap: 8px;
}

.response-box p,
.response-box pre,
.response-box div {
  margin: 0;
  color: #047857;
  line-height: 1.6;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-family: inherit;
}

/* Response Actions & Revise UI */
.response-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #A7F3D0;
}

.btn-send-response,
.btn-revise {
  background-color: rgb(255, 255, 255);
  color: rgb(4, 120, 87);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  /* ✅ Centers vertically */
  justify-content: center;
  /* ✅ Centers horizontally */
  border: 1px solid rgb(167, 243, 208);
  padding: 10px 16px;
  /* ✅ Tighter padding */
  border-radius: 8px;
  transition: all 0.2s ease;
  gap: 4px;
  /* ✅ Smaller gap */
  min-height: 44px;
  /* ✅ Fixed height */
  line-height: 1.2;
  /* ✅ Tight line height */
  white-space: nowrap;
  /* ✅ No text wrap */
}

.btn-send-response:hover,
.btn-revise:hover {
  background-color: #D1FAE5;
  box-shadow: 0 2px 6px rgba(4, 120, 87, 0.15);
  transform: translateY(-1px);
}

.btn-send-response.is-sending {
  background-color: #D1FAE5;
  border-color: #6EE7B7;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.2);
  color: #065F46;
}

.btn-send-response.is-sending .icon,
.btn-send-response.is-sending .agent-spinner-sm {
  animation: sendBtnPulse 0.7s ease-in-out infinite;
}

@keyframes sendBtnPulse {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.14);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.85;
  }
}

#note-section .btn-send-response,
#note-section .btn-revise {
  background-color: #FFFFFF;
  color: #5B21B6;
  border-color: #C4B5FD;
}

#note-section .btn-send-response:hover,
#note-section .btn-revise:hover {
  background-color: #EDE9FE;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.16);
}

#notify-section .btn-send-response,
#notify-section .btn-revise {
  background-color: #FFFFFF;
  color: #0E7490;
  border-color: #67E8F9;
}

#notify-section .btn-send-response:hover,
#notify-section .btn-revise:hover {
  background-color: #CFFAFE;
  box-shadow: 0 2px 6px rgba(14, 116, 144, 0.16);
}

#include-doc-section .btn-send-response,
#include-doc-section .btn-revise {
  background-color: #FFFFFF;
  color: #BE123C;
  border-color: #FDA4AF;
}

#include-doc-section .btn-send-response:hover,
#include-doc-section .btn-revise:hover {
  background-color: #FFE4E6;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.16);
}

.schedule-send-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: #fff;
  text-align: left;
  padding: 7px 12px;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
  margin: 0;
  min-height: 0;
  line-height: 1.2;
  white-space: nowrap;
}

#schedule-send-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

.schedule-send-item:hover {
  background: #f1f5f9;
}

.revise-container {
  display: none;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.6);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #A7F3D0;
}

.revise-container input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #A7F3D0;
  border-radius: 6px;
  margin-bottom: 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  background-color: #ffffff;
  color: #047857;
}

.revise-container input:focus {
  border-color: #047857;
}


/* Attachments */
.attachments-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: rgba(10, 116, 218, 0.04);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.attachment-pill:hover {
  border-color: var(--blue);
  background: rgba(10, 116, 218, 0.08);
}

/* ========== INBOX GMAIL ACTIONS ========== */
.gmail-inbox {
  width: 100%;
  max-width: none;
  margin: 0;
}

.inbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.bulk-toolbar {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Old .email-row rule removed — using compact Gmail-style rule below */

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 16px;
  flex-shrink: 0;
  padding: 4px;
}

.checkbox-label input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 6px;
  position: relative;
  transition: all 0.15s;
}

.checkbox-label input[type="checkbox"]:checked+.checkmark {
  background: var(--blue);
  border-color: var(--blue);
}

.checkbox-label input[type="checkbox"]:checked+.checkmark::after {
  content: '✔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.bulk-btn {
  padding: 12px 18px;
  border: 2px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.bulk-btn:hover {
  background: rgba(10, 116, 218, 0.08);
  border-color: var(--blue);
}

.bulk-btn.primary {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

.bulk-btn.primary:hover {
  background: #0854a0;
}

.bulk-more-wrapper {
  position: relative;
  display: inline-flex;
}

.bulk-more-toggle {
  min-width: 42px;
  padding: 12px 14px;
  font-size: 18px;
  line-height: 1;
}

.bulk-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 80;
  padding: 6px 0;
  display: none;
}

.bulk-more-menu.open {
  display: block;
}

.bulk-more-item {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  padding: 10px 14px;
  font-size: 14px;
}

.bulk-more-item:hover {
  background: rgba(10, 116, 218, 0.1);
}

.bulk-more-separator {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}

.bulk-toolbar.bulk-toolbar-simple .bulk-btn {
  padding: 10px 14px;
  font-size: 13px;
}

/* EXTRA SMALL SCREENS: back LEFT, 4 actions SINGLE tight row */
@media (max-width: 600px) {

  /* TOOLBAR: space-between = back LEFT, actions RIGHT group */
  .email-toolbar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* BACK LEFT, ACTIONS RIGHT */
    flex-wrap: nowrap !important;
    /* NO wrapping */
    padding: 8px !important;
    gap: 16px !important;
  }


  /* ACTIONS: center group, flex-wrap to allow 7 buttons */
  .toolbar-actions {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    /* allow multiple rows */
    gap: 5px !important;
    /* ultra tight */
    flex: 1 !important;
    /* take remaining space */
  }

  /* BUTTONS: 40% SMALLER to fit 4 perfectly */
  .email-detail-page .email-toolbar .icon-btn,
  .email-toolbar .icon-btn,
  .icon-btn .bulk-btn,
  .toolbar-actions .btn {
    /* catch all action btns */
    padding: 6px 8px !important;
    /* tiny */
    font-size: 11px !important;
    /* small text */
    min-height: 32px !important;
    /* short */
    min-width: 36px !important;
    /* narrow */
    margin: 0 !important;
    /* no margins */
  }

  /* ICONS even smaller */
  .email-toolbar .icon-btn i,
  .toolbar-actions .icon-btn i {
    font-size: 14px !important;
    /* tiny icons */
  }

  .gmail-inbox {
    padding: 0 8px !important;
  }

  .inbox-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
}


/* =========================================================
   ADD ONLY THIS: HAMBURGER + MOBILE SLIDE-IN SIDEBAR (APPEND)
   Does NOT touch your existing button/bulk styles.
   ========================================================= */

/* Hide hamburger by default (desktop) */
.hamburger-btn {
  display: none;
}

/* Desktop: sidebar stays normal left, nothing changes */
@media (min-width: 901px) {
  .hamburger-container {
    display: flex !important;
    position: fixed !important;
    top: 0;
    left: 260px;
    right: 0;
    height: 70px;
    z-index: 4000;
    background: var(--card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0 24px;
    align-items: center;
    justify-content: space-between;
  }

  .hamburger-btn {
    display: none !important;
  }

  .sidebar-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Hidden */

  .sidebar {
    position: fixed;
    top: 0;
    /* Sticks to top of its container */
    height: 100vh;
    padding-top: 8px;
    width: 260px;
    margin-top: 0;
    /* No extra margin */
  }

  .gmail-layout {
    /* Entire layout shifts down */
    padding-top: 0;
  }

  .summarize-btn {
    height: 46px;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: #EEF2FF;
    color: #312E81;
    /* Darkened for better contrast */
    font-weight: 500;
    border: 1px solid #C7D2FE;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  }

  .summarize-btn:hover {
    background-color: #E0E7FF;

    box-shadow: 0 2px 6px rgba(67, 56, 202, 0.15);
  }

  .btn-generate {
    height: 46px;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .btn-generate:hover {
    background-color: #D1FAE5;
    box-shadow: 0 2px 6px rgba(4, 120, 87, 0.15);
  }

  /* Add to Notes - Header button (warm purple/violet theme - distinct from Summarize) */
  .btn-notes {
    height: 46px;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: #F3E8FF;
    color: #7C3AED;
    border: 1px solid #DDD6FE;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .btn-notes:hover {
    background-color: #DDD6FE;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
    transform: translateY(-1px);
  }

  .btn-notify {
    height: 46px;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: #ECFEFF;
    color: #0E7490;
    border: 1px solid #A5F3FC;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .btn-notify:hover {
    background-color: #CFFAFE;
    box-shadow: 0 2px 6px rgba(14, 116, 144, 0.2);
    transform: translateY(-1px);
  }

  /* Book Schedule - Header button (amber/orange theme) */
  .btn-calendar {
    height: 46px;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: #FFFBEB;
    color: #D97706;
    border: 1px solid #FDE68A;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .btn-calendar:hover {
    background-color: #FEF3C7;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
    transform: translateY(-1px);
  }

  /* Include in Doc - Header button (rose theme, non-purple) */
  .btn-include-doc-head {
    height: 46px;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .btn-include-doc-head:hover {
    background-color: #ffe4e6;
    box-shadow: 0 2px 6px rgba(190, 18, 60, 0.2);
    transform: translateY(-1px);
  }

  .inbox {
    padding: 66px 20px 20px 280px;
    /* Flush below 70px fixed header */
  }

  body.sidebar-collapsed .sidebar {
    width: 86px;
    padding-left: 12px !important;
    padding-right: 10px !important;
  }

  body.sidebar-collapsed .logo {
    margin-bottom: 12px;
  }

  body.sidebar-collapsed .logo-main {
    justify-content: center;
  }

  body.sidebar-collapsed .logo-text {
    display: none;
  }

  body.sidebar-collapsed .sidebar-brand-logo {
    margin-top: 0;
  }

  body.sidebar-collapsed .sidebar .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px;
    padding: 0 !important;
    margin: 0 auto 6px auto;
    border-radius: 12px;
    box-sizing: border-box;
  }

  body.sidebar-collapsed .sidebar .tab-icon {
    width: auto;
    margin: 0;
    text-align: center;
  }

  body.sidebar-collapsed .sidebar .tab-label {
    display: none;
  }

  body.sidebar-collapsed .sidebar .tab-unread-badge {
    display: none !important;
  }

  body.sidebar-collapsed .sidebar-labels-divider {
    display: none !important;
  }

  body.sidebar-collapsed .hamburger-container {
    left: 86px !important;
  }

  body.sidebar-collapsed .inbox {
    padding-left: 106px;
  }
}

@media (max-width:900px) {
  .hamburger-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    background: var(--card);
    z-index: 4000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease;
    justify-content: flex-start;
    gap: 10px;
  }

  .hamburger-container .header-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 2px;
  }

  .hamburger-container .header-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
  }

  .hamburger-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 46px;
    border-radius: 12px;
    border: none;
    background: var(--card);
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.25s ease;
    z-index: 4100;
  }

  .hamburger-btn:hover {
    background: rgba(10, 116, 218, 0.08);
    border-color: var(--blue);
  }

  .summarize-btn {
    display: inline-flex !important;
    align-items: center;
    width: auto;
    height: 46px;
    border-radius: 12px;
    border: none;
    background: var(--card);
    color: #312E81;
    /* Darkened for better contrast */
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.25s ease;
    z-index: 4100;
  }

  .summarize-btn .text {
    position: absolute;
    bottom: -38px;
    background: #111;
    color: white;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .summarize-btn:hover .text {
    opacity: 1;
  }

  /* Add to Notes button - mobile */
  .btn-notes {
    display: inline-flex !important;
    align-items: center;
    position: relative;
    width: auto;
    height: 46px;
    border-radius: 12px;
    border: none;
    background: var(--card);
    color: #4338CA;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.25s ease;
    z-index: 4100;
  }

  .btn-notify {
    display: inline-flex !important;
    align-items: center;
    position: relative;
    width: auto;
    height: 46px;
    border-radius: 12px;
    border: none;
    background: var(--card);
    color: #0E7490;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.25s ease;
    z-index: 4100;
  }

  .btn-notify .text {
    position: absolute;
    bottom: -38px;
    background: #111;
    color: white;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .btn-notify:hover .text {
    opacity: 1;
  }

  .btn-notes .text {
    position: absolute;
    bottom: -38px;
    background: #111;
    color: white;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .btn-notes:hover .text {
    opacity: 1;
  }

  /* Book Schedule button - mobile */
  .btn-calendar {
    display: inline-flex !important;
    align-items: center;
    position: relative;
    width: auto;
    height: 46px;
    border-radius: 12px;
    border: none;
    background: var(--card);
    color: #D97706;
    /* amber-600 */
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.25s ease;
    z-index: 4100;
  }

  .btn-calendar .text {
    position: absolute;
    bottom: -38px;
    background: #111;
    color: white;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .btn-include-doc-head {
    display: inline-flex !important;
    align-items: center;
    position: relative;
    width: auto;
    height: 46px;
    border-radius: 12px;
    border: none;
    background: var(--card);
    color: #be123c;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.25s ease;
    z-index: 4100;
  }

  .btn-include-doc-head .text {
    position: absolute;
    bottom: -38px;
    background: #111;
    color: white;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .btn-include-doc-head:hover .text {
    opacity: 1;
  }

  .btn-calendar:hover .text {
    opacity: 1;
  }

  /* Sidebar */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    z-index: 3500;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    background: var(--card);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px;
  }

  body.sidebar-open {
    overflow: hidden;
    /* Locks body scroll completely */
  }

  body.sidebar-open .hamburger-container {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.25s ease;
  }


  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* 🔥 FIXED OVERLAY - ONLY BEHIND SIDEBAR */
  body.sidebar-open::before {
    content: "";
    position: fixed;
    top: 0;
    /* BELOW header */
    left: 0;
    /* AFTER sidebar */
    right: 0;
    bottom: 0;
    background: rgba(16, 17, 20, 0.5);
    z-index: 3400;
    /* BELOW sidebar */
  }

  /* 🔥 HIDE HAMBURGER VISUALLY when open (but clickable) */
  /* 🔥 HIDE HAMBURGER + SHOW CLOSE ICON (FIXED) */
  /* 🔥 SIMPLY HIDE HAMBURGER when sidebar open */

  body.sidebar-open .inbox {
    padding-top: 16px !important;
    /* No more reserved space */
  }

  .inbox {
    width: 100%;
    padding: 90px 16px 16px 16px;
    transition: padding 0.25s ease;
  }

  /* ===== RESPONSIVE EMAIL DETAIL PAGES ===== */
  .email-detail-page {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .email-detail-page .title {
    font-size: 20px !important;
    margin: 12px 0 8px 0 !important;
  }

  .email-meta {
    font-size: 13px !important;
    margin: 4px 0 12px 0 !important;
  }

  .email-body-container {
    padding: 16px !important;
    margin: 12px 0 16px 0 !important;
    border-radius: 10px !important;
  }

  .email-body-html,
  .email-body-text {
    font-size: 14px !important;
  }

  .email-body-html img {
    max-width: 100% !important;
    margin: 8px 0 !important;
  }

  .email-body-html table {
    font-size: 13px !important;
    margin: 8px 0 !important;
  }

  .email-body-html table td,
  .email-body-html table th {
    padding: 8px !important;
    font-size: 12px !important;
  }

  .email-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px !important;
  }

  .toolbar-actions {
    gap: 4px !important;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start !important;
  }

  .email-toolbar .icon-btn {
    padding: 8px 10px !important;
    font-size: 12px !important;
    min-height: auto !important;
  }

  .summary-box {
    padding: 16px !important;
    margin-top: 16px !important;
    font-size: 14px !important;
  }

  .summary-box h3 {
    font-size: 15px !important;
  }

}

.sidebar ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.sidebar ul li {
  list-style: none !important;
  word-wrap: break-word;
  overflow: hidden;
}

.sidebar .tab {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* Desktop view sidebar additional fixes */
@media (min-width: 901px) {
  .sidebar {
    max-height: 100vh;
    padding: 16px 20px;
  }

  .sidebar::-webkit-scrollbar {
    width: 6px;
  }

  /* Compose is in this list too - it moves with the tabs or it looks like a different kind of
     control (static/css/compose.css says why the rest of its hover lives there). */
  .sidebar .tab:hover,
  .sidebar .compose-open-btn:hover {
    transform: translateX(2px);
  }
}

/* ===== ULTRA SMALL SCREENS (Mobile) ===== */
@media (max-width: 480px) {
  .email-detail-page .title {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .email-body-container {
    padding: 12px !important;
    margin: 8px 0 12px 0 !important;
  }

  .email-body-html,
  .email-body-text {
    font-size: 13px !important;
  }

  .email-body-text pre {
    font-size: 11px !important;
    padding: 8px !important;
  }

  .email-toolbar {
    padding: 4px 0 8px 0 !important;
  }

  .toolbar-actions {
    gap: 3px !important;
  }

  .email-toolbar .icon-btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
    min-width: 32px !important;
  }

  .summary-box {
    padding: 12px !important;
  }

  .summary-box h3 {
    font-size: 14px !important;
  }

  .email-body-html table {
    font-size: 11px !important;
  }

  .email-body-html table td,
  .email-body-html table th {
    padding: 6px !important;
  }

  .email-body-html blockquote {
    margin: 8px 0 !important;
    padding: 8px 12px !important;
  }
}

/* ===== SIDEBAR SCROLLBAR STYLING ===== */
.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(10, 116, 218, 0.3);
  border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 116, 218, 0.5);
}

/* Fix for scrollbar on firefox */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 116, 218, 0.3) transparent;
}

/* ===== MOBILE SIDEBAR FIXES ===== */
@media (max-width: 900px) {
  body.sidebar-open .inbox {
    overflow-x: hidden;
    position: relative;
    z-index: 1;
  }

  body.sidebar-open {
    position: fixed;
    width: 100%;
    height: 100vh;
  }

  .sidebar {
    max-height: 100vh;
    padding: 16px 20px;
  }

  .sidebar .tab {
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    white-space: normal;
  }

  .sidebar ul {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
  }
}

/* ===== SCROLL-TO-TOP BUTTON ===== */
.scroll-top-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: var(--accent-solid);
  color: #fff;
  border: none;
  border-radius: 28px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(10, 116, 218, 0.35);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
  letter-spacing: 0.3px;
}

.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top-btn:hover {
  box-shadow: 0 6px 24px rgba(10, 116, 218, 0.5);
  transform: translateY(-2px);
  background: linear-gradient(135deg, #0854a0, #3730A3);
}

/* ===== MOBILE: Generate Response button matches Summarize button ===== */
@media (max-width: 900px) {
  .btn-generate {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 46px;
    border-radius: 12px;
    border: none;
    background: var(--card);
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.25s ease;
    z-index: 4100;
    position: relative;
    padding: 0 12px;
  }

  .btn-generate .text {
    position: absolute;
    bottom: -38px;
    background: #111;
    color: white;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .btn-generate:hover .text {
    opacity: 1;
  }
}

/* ========================================
   MEETING DETECTION POPUP (NEW)
   ======================================== */
.meeting-popup {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  padding: 20px;
  width: 320px;
  z-index: 10000;
  display: none;
  border: 1px solid #e2e8f0;
  animation: slideUpPopup 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes slideUpPopup {
  from {
    transform: translateY(120%) scale(0.9);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.meeting-popup-content h4 {
  margin: 0 0 8px 0;
  color: var(--tab-accent);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.meeting-popup-content p {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}

.meeting-popup-actions {
  display: flex;
  gap: 10px;
}

/* ========================================
   CRM SALES LEAD SECTION
   ======================================== */
.crm-lead-box {
  margin-top: 18px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.08);
}

.crm-lead-title {
  margin: 0 0 10px 0;
  color: #1e3a8a;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1px;
}

#crm-details {
  color: #1f2937;
}

#crm-slack-message {
  border: 1px solid #bfdbfe !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn-crm-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 16px;
  border: 1px solid #93c5fd;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-crm-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.3);
}

.btn-crm-action:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#btn-send-notify,
#btn-send-notify:focus,
#btn-send-notify:active {
  background: #FFFFFF !important;
  color: #0E7490 !important;
  border-color: #67E8F9 !important;
  box-shadow: none !important;
  filter: none !important;
  font-weight: 500 !important;
}

#btn-send-notify:hover {
  background: #CFFAFE !important;
  color: #0E7490 !important;
  border-color: #67E8F9 !important;
  box-shadow: 0 2px 6px rgba(14, 116, 144, 0.16) !important;
  filter: none !important;
  transform: translateY(-1px);
}

.btn-popup-primary {
  background: var(--tab-accent);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  flex: 1;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-popup-primary:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--tab-hover-bg);
}

.btn-popup-secondary {
  background: #f1f5f9;
  color: #475569;
  border: none;
  padding: 10px 16px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-popup-secondary:hover {
  background: #e2e8f0;
  color: #1e293b;
}

/* =====================================================
   GMAIL-STYLE SEARCH BAR (header)
   ===================================================== */
.header-search {
  display: flex;
  align-items: center;
  background: #EAF1FB;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 6px 16px;
  flex: 1;
  max-width: 560px;
  margin: 0 16px;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.header-search:focus-within {
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 2px 8px rgba(10, 116, 218, 0.18);
}

.search-icon {
  flex-shrink: 0;
  margin-right: 10px;
  opacity: 0.6;
}

.search-input {
  all: unset;
  background: transparent;
  flex: 1;
  font-size: 15px;
  color: var(--text);
  line-height: 32px;
}

.search-input::placeholder {
  color: #5F6368;
  font-weight: 400;
}

/* =====================================================
   SEARCH OPTIONS PANEL & SUGGESTIONS (Gmail-like)
   ===================================================== */
.header-search {
  position: relative;
  gap: 8px;
}

.search-options-btn {
  all: unset;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f6368;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.search-options-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #202124;
}

.search-options-btn.active,
.search-options-btn.has-filters {
  color: #1a73e8;
  background: #e8f0fe;
}

.advanced-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  z-index: 200;
}

.advanced-search-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.advanced-search-row label {
  font-size: 14px;
  color: #5f6368;
}

.advanced-search-row input,
.advanced-search-row select {
  width: 100%;
  border: none;
  border-bottom: 1px solid #cbd5e1;
  padding: 6px 2px;
  font-size: 14px;
  outline: none;
  background: transparent;
  color: #0f172a;
}

.advanced-search-row input:focus,
.advanced-search-row select:focus {
  border-bottom-color: #1a73e8;
}

.advanced-search-size-row {
  align-items: flex-start;
}

.advanced-size-controls {
  display: grid;
  grid-template-columns: 180px 1fr 90px;
  gap: 10px;
}

.advanced-size-controls-single {
  grid-template-columns: 180px;
}

.advanced-search-checks {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 2px;
}

.advanced-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #334155;
}

.advanced-check input {
  width: 16px;
  height: 16px;
}

/* "Your labels": the list is server-rendered from what the page already had, so it opens
   with no request. Clicking an option toggles it in the field beside it. */
.advanced-label-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.advanced-label-field > input {
  flex: 1 1 140px;
  min-width: 0;
}

.advanced-label-btn {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.advanced-label-btn:hover,
.advanced-label-btn[aria-expanded="true"] {
  border-color: #1a73e8;
  color: #1a73e8;
}

.advanced-label-list {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 132px;
  margin-top: 2px;
  overflow-y: auto;
}

.advanced-label-list[hidden] {
  display: none;
}

.advanced-label-option {
  padding: 3px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.advanced-label-option.is-system {
  color: #64748b;
  border-style: dashed;
}

.advanced-label-option:hover {
  border-color: #1a73e8;
  color: #1a73e8;
}

.advanced-label-option.is-on {
  border-color: #1a73e8;
  background: #1a73e8;
  color: #fff;
}

/* The panel is a builder: this line shows the query it is about to run, so the syntax is
   learnable by using the form rather than by reading documentation. */
.advanced-search-hint {
  min-height: 16px;
  margin: 12px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
  overflow-wrap: anywhere;
}

.advanced-search-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.advanced-clear-btn,
.advanced-apply-btn {
  all: unset;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.advanced-clear-btn {
  color: #64748b;
}

.advanced-clear-btn:hover {
  background: #f1f5f9;
}

.advanced-apply-btn {
  color: #fff;
  background: #1a73e8;
}

.advanced-apply-btn:hover {
  background: #0f5fcc;
}

/* ── Search results header ────────────────────────────────────────────────
   Only what a search does that nothing else on the page says: a notice when message
   text could not be read, and the offer to read it. The count line, the "Clear" link
   and the per-clause chips were removed - the box shows the query, the toolbar shows
   the filter, and the pagination shows the range. */
.search-results-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: var(--card, #fff);
}

.search-results-notice {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, #64748b);
}

.search-deepen {
  margin-top: 8px;
  padding: 5px 12px;
  border: 1px solid #1a73e8;
  border-radius: 999px;
  background: transparent;
  color: #1a73e8;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.search-deepen:hover {
  background: rgba(26, 115, 232, 0.08);
}

.search-deepen:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Search suggestions dropdown */
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 210;
  max-height: 260px;
  overflow-y: auto;
}

.search-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}

.search-suggestion:hover {
  background: rgba(10, 116, 218, 0.06);
}

.search-suggestion:last-child {
  border-radius: 0 0 16px 16px;
}

.suggestion-icon {
  font-size: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.suggestion-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================================
   GMAIL-STYLE COMPACT INBOX TABLE
   ===================================================== */

/* Toolbar above email list */
.inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 4px 4px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  position: sticky;
  top: -4px;
  margin-top: -4px;
  z-index: 50;
}

.inbox-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Select-all wrapper with dropdown */
.select-all-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 8px;
}

.select-dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 4px;
  margin-left: -2px;
}

.select-dropdown-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.select-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 8px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  min-width: 130px;
  z-index: 100;
  padding: 6px 0;
}

.select-dropdown-menu.open {
  display: block;
}

.select-dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  color: #202124;
  cursor: pointer;
  font-family: inherit;
}

.select-dropdown-menu button:hover {
  background: #f1f3f4;
}

.inbox-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Gmail-style pagination */
.gmail-pagination {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.gmail-pagination .pagination-range {
  font-size: 13px;
  color: #5F6368;
  margin-right: 8px;
  font-weight: 400;
}

.gmail-pagination .pagination-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #5F6368;
  text-decoration: none;
  transition: background 0.15s;
}

.gmail-pagination .pagination-arrow:hover:not(.disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: #202124;
}

.gmail-pagination .pagination-arrow.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

.email-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* All / Unread toggle */
.filter-toggle {
  display: flex;
  align-items: center;
  background: #F1F3F4;
  border-radius: 20px;
  padding: 2px;
  gap: 2px;
}

.filter-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 500;
  color: #5F6368;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.filter-btn:hover {
  background: rgba(10, 116, 218, 0.08);
  color: var(--text);
}

.filter-btn.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  font-weight: 600;
}

/* Compact email table */
.email-table {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

/* Single email row — Gmail compact style */
.email-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s ease, box-shadow 0.1s ease;
  min-height: 40px;
  position: relative;
  cursor: pointer;
}

.email-row:hover {
  background: #ffffff;
  box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  z-index: 2;
}

/* UNREAD ROW — Bold text and bright background */
.email-row.unread {
  background: #FFFFFF;
}

.email-row.unread .row-from,
.email-row.unread .row-subject {
  color: #202124;
  font-weight: 700;
}

/* READ ROW — slightly tinted background, normal weight */
.email-row:not(.unread) {
  background: #F2F6FC;
}

/* Default weights */
.email-row .row-from,
.email-row .row-subject,
.email-row .row-date {
  font-weight: 400;
}

/* Checkbox in row */
.row-checkbox {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
  padding: 0 4px 0 12px;
}

.toolbar-checkbox {
  padding: 0;
}

.row-star-left {
  all: unset;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  color: #9ca3af;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}

.row-star-left:hover {
  background: rgba(251, 191, 36, 0.15);
  color: #d97706;
}

.email-row.is-starred .row-star-left {
  color: #f59e0b;
}

/* Row link (covers from + subject + snippet + date) */
.email-row-link {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  padding: 8px 12px 8px 0;
  gap: 0;
}

/* From column (fixed width like Gmail) */
.row-from {
  flex-shrink: 0;
  width: clamp(180px, 14vw, 240px);
  font-size: 13px;
  font-weight: 400;
  color: #5F6368;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 16px;
}

/* Thread count badge (Gmail-style small number next to senders) */
.thread-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #5F6368;
  margin-left: 4px;
  vertical-align: middle;
}

/* Subject + snippet (takes remaining space) */
.row-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.5;
}

@media (min-width: 1100px) {
  .inbox {
    padding-left: clamp(12px, 1.4vw, 24px);
    padding-right: clamp(12px, 1.4vw, 24px);
  }

  .gmail-inbox {
    max-width: min(1500px, calc(100vw - 292px));
  }
}

.row-subject {
  color: #202124;
  font-weight: 400;
}

.row-label-badges {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.row-label-badge {
  display: inline-flex;
  align-items: center;
  max-width: 160px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #1e40af;
  background: rgba(59, 130, 246, 0.1);
}

.row-label-badge.badge-color-0 {
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #1e40af;
  background: rgba(59, 130, 246, 0.1);
}

.row-label-badge.badge-color-1 {
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: #9a3412;
  background: rgba(249, 115, 22, 0.1);
}

.row-label-badge.badge-color-2 {
  border: 1px solid rgba(147, 51, 234, 0.35);
  color: #6b21a8;
  background: rgba(147, 51, 234, 0.1);
}

.row-label-badge.badge-color-3 {
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #166534;
  background: rgba(34, 197, 94, 0.1);
}

.row-label-badge.label-hidden-by-pref {
  display: none;
}

/* Server-computed rule chips (utils/category_engine, detection_events) - same
   metrics as .row-label-badge so a category chip, a "Detected:" chip and a label
   badge line up on the row. Hidden entirely for the unmatched (informational)
   fallback: the template only emits the chip when category_matched is true.

   The category chip sits BEFORE the subject in the list (see _inbox_rows.html), so its
   margin is on the right; the detect chip keeps its left margin because the only place it
   is still drawn is the email page, after the subject. */
.row-category-chip,
.row-detect-chip {
  display: inline-flex;
  align-items: center;
  max-width: 160px;
  margin-left: 8px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.row-category-chip {
  border: 1px solid rgba(100, 116, 139, 0.35);
  color: #334155;
  background: rgba(100, 116, 139, 0.12);
  text-transform: capitalize;
}

/* In the list the chips lead the subject: category first, then any Gmail label. Their
   margins move to the right-hand side so the run of chips sits against the subject rather
   than against the sender. */
.row-content > .row-category-chip,
.row-content > .row-label-badges {
  margin-left: 0;
  margin-right: 8px;
}

.row-detect-chip {
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #166534;
  background: rgba(34, 197, 94, 0.12);
}

.row-category-chip + .row-detect-chip,
.row-detect-chip + .row-detect-chip {
  margin-left: 4px;
}

.row-snippet {
  color: #5F6368;
  font-weight: 400;
}

/* Date + attachments (right side) */
.row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 12px;
  margin-left: auto;
}

.row-quick-actions {
  display: none;
  align-items: center;
  gap: 4px;
  padding-right: 10px;
  padding-left: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.email-row:hover .row-quick-actions {
  display: inline-flex;
}

.email-row:hover .row-date {
  display: none;
}

.row-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #5f6368;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0 1px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.row-action-btn:hover {
  background: rgba(32, 33, 36, 0.08);
  color: #202124;
}

.row-action-btn.unsub-pill {
  width: auto;
  height: 24px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
  margin-right: 4px;
}

.row-action-btn.unsub-pill:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #dc2626;
}

.row-date {
  font-size: 12px;
  color: #5F6368;
  white-space: nowrap;
  min-width: 72px;
  text-align: right;
}

.row-attach-list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 360px;
}

.row-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 168px;
  border: 1px solid #dadce0;
  border-radius: 999px;
  background: #f1f3f4;
  color: #3c4043;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 8px;
}

.row-attach-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  border-radius: 6px;
  background: #e8eaed;
  color: #5f6368;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.row-attach-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-attach-chip-more {
  max-width: none;
  font-weight: 600;
  color: #5f6368;
}

.row-attach-chip-fallback {
  max-width: 126px;
}

.email-row:hover .row-attach-chip {
  background: #eceff1;
  border-color: #c8ccd1;
}

/* Bulk toolbar */
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #E8F0FE;
  border-bottom: 1px solid #C0D7F8;
  font-size: 13px;
  font-weight: 500;
  color: #1967D2;
}

.bulk-btn {
  all: unset;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: #444;
  background: #fff;
  border: 1px solid var(--border);
  transition: all 0.15s;
}

.bulk-btn:hover {
  background: #E8F0FE;
  border-color: #1967D2;
  color: #1967D2;
}

.bulk-btn.primary {
  background: #1A73E8;
  color: #fff;
  border-color: #1A73E8;
}

.bulk-btn.primary:hover {
  background: #1557B0;
}

/* Hide old card / inbox-header styles on inbox page */
.gmail-inbox .title,
.gmail-inbox .muted,
.gmail-inbox .inbox-header {
  display: none;
}

.gmail-inbox .card {
  /* override old card styles */
  all: unset;
}

/* Custom checkbox (Gmail-style) */
.checkbox-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* =====================================================
   RESPONSIVE: Mobile compact
   ===================================================== */
@media (max-width: 900px) {
  .header-search {
    max-width: 100%;
    margin: 0 8px;
  }

  .advanced-search-panel {
    left: -8px;
    right: -8px;
    max-height: 70vh;
    overflow-y: auto;
  }

  .advanced-search-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .advanced-size-controls,
  .advanced-size-controls-single {
    grid-template-columns: 1fr;
  }

  .advanced-search-checks {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .row-from {
    width: 120px;
    font-size: 12px;
  }

  .row-content {
    font-size: 12px;
  }

  .row-date {
    font-size: 11px;
    min-width: 50px;
  }

  .row-snippet {
    display: none;
  }

  .filter-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .row-from {
    width: 90px;
  }

  .email-row-link {
    padding: 6px 8px 6px 0;
  }

  .header-search {
    margin: 0 4px;
    padding: 4px 10px;
  }

  .search-input {
    font-size: 13px;
  }
}


/* ============================================================
   LAUNCH AGENT — Premium AI Styling
   ============================================================ */

/* ── Launch Agent Button (Header) ── */
/* The header row's buttons - Cusentra Chat, Launch Agent, Daily Report and the account chip all
   wear this class. It used to be a fixed slate-800 pill in both themes, which is right on the
   dark one and a black slab on the light one. The colours are tokens now: :root is the light
   theme in this file, and the dark block below restores exactly what the pill used to be. */
:root {
  --hdr-btn-bg: #ffffff;
  --hdr-btn-fg: #1f2937;
  --hdr-btn-line: #cbd5e1;
  --hdr-btn-bg-hover: #f1f5f9;
  --hdr-btn-line-hover: #94a3b8;
  --hdr-btn-shadow: 0 1px 2px rgba(16, 17, 20, 0.08);
  --hdr-btn-shadow-hover: 0 2px 8px rgba(16, 17, 20, 0.14);
  /* A button whose panel is open (Cusentra Chat, Daily Report). The open state used to be a
     hard-coded #334155 slab from the days the pill was dark in both themes - on the light theme
     that put the button's dark text on a dark fill and the label vanished. */
  --hdr-btn-bg-open: #e8f2fc;
  --hdr-btn-fg-open: #0a4f94;
  --hdr-btn-line-open: #0A74DA;
}

html[data-theme='dark'] {
  --hdr-btn-bg: #1E293B;
  --hdr-btn-fg: #F8FAFC;
  --hdr-btn-line: #334155;
  --hdr-btn-bg-hover: #334155;
  --hdr-btn-line-hover: #475569;
  --hdr-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  --hdr-btn-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.3);
  --hdr-btn-bg-open: #334155;
  --hdr-btn-fg-open: #F8FAFC;
  --hdr-btn-line-open: #60a5fa;
}

.launch-agent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Every button in the header row is this tall whatever its icon is: the Launch Agent glyph sets a
     ~19px line box, an inline SVG sets 16px, and without this the two sat at different heights. */
  min-height: 38px;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--hdr-btn-bg);
  color: var(--hdr-btn-fg);
  border: 1px solid var(--hdr-btn-line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--hdr-btn-shadow);
}

.launch-agent-btn:hover {
  background-color: var(--hdr-btn-bg-hover);
  border-color: var(--hdr-btn-line-hover);
  box-shadow: var(--hdr-btn-shadow-hover);
}

.launch-agent-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* The account button (templates/base.html): one letter of the name in a circle, the way Gmail
   draws an account without a photo. The button is as tall as the other header buttons (38px) so
   the row keeps one baseline; the circle sits 3px inside it, and that ring of space is where the
   hover halo shows - Gmail's grey disc behind the avatar - so nothing moves under the pointer.
   The letter is aria-hidden: the button carries the whole name as its accessible name. */
.profile-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Each account wears one colour of a Gmail-like palette, chosen from its id on the server
   (template_context.avatar_tone - same colour on every page and device, unchanged by a rename).
   The shades are the deeper Material ones, so a white letter stays readable on every one of
   them, in both themes; the count here must match AVATAR_TONES. */
.profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  background-color: #1976d2;
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  user-select: none;
}

.profile-avatar[data-tone="0"]  { background-color: #d32f2f; } /* red */
.profile-avatar[data-tone="1"]  { background-color: #c2185b; } /* pink */
.profile-avatar[data-tone="2"]  { background-color: #7b1fa2; } /* purple */
.profile-avatar[data-tone="3"]  { background-color: #5e35b1; } /* deep purple */
.profile-avatar[data-tone="4"]  { background-color: #3949ab; } /* indigo */
.profile-avatar[data-tone="5"]  { background-color: #1976d2; } /* blue */
.profile-avatar[data-tone="6"]  { background-color: #0277bd; } /* light blue */
.profile-avatar[data-tone="7"]  { background-color: #00838f; } /* cyan */
.profile-avatar[data-tone="8"]  { background-color: #00796b; } /* teal */
.profile-avatar[data-tone="9"]  { background-color: #2e7d32; } /* green */
.profile-avatar[data-tone="10"] { background-color: #558b2f; } /* light green */
.profile-avatar[data-tone="11"] { background-color: #d84315; } /* deep orange */
.profile-avatar[data-tone="12"] { background-color: #6d4c41; } /* brown */
.profile-avatar[data-tone="13"] { background-color: #546e7a; } /* blue grey */

/* The halo, not the circle, answers the pointer - Gmail's own behaviour. */
.profile-avatar-btn:hover,
.profile-avatar-btn[aria-expanded="true"] {
  background-color: rgba(60, 64, 67, 0.12);
}

.profile-avatar-btn:active {
  background-color: rgba(60, 64, 67, 0.2);
}

html[data-theme='dark'] .profile-avatar-btn:hover,
html[data-theme='dark'] .profile-avatar-btn[aria-expanded="true"] {
  background-color: rgba(232, 234, 237, 0.14);
}

html[data-theme='dark'] .profile-avatar-btn:active {
  background-color: rgba(232, 234, 237, 0.22);
}

.profile-avatar-btn:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

.launch-agent-icon {
  font-size: 16px;
  animation: agentPulse 2s ease-in-out infinite;
}

/* Cusentra Chat's trigger on the inbox: the same shape as Launch Agent beside it, but no pulse -
   one attention-seeking icon in the row is enough. */
.header-chat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.header-chat-icon svg {
  width: 16px;
  height: 16px;
}

.header-chat-btn.is-open,
.header-chat-btn.is-open:hover {
  background-color: var(--hdr-btn-bg-open);
  border-color: var(--hdr-btn-line-open);
  color: var(--hdr-btn-fg-open);
}

/* "Cusentra Chat" and "Launch Agent" spelled out side by side crowd the search box on a narrow
   laptop, so the chat button drops to its icon first - its title and aria-label still say the name.
   Below 600px both buttons are icons anyway (the .launch-agent-text rule further down). */
@media (max-width: 1000px) {
  .header-chat-btn .launch-agent-text {
    display: none;
  }

  .header-chat-btn {
    padding: 8px 12px;
  }
}

@keyframes agentPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.15);
  }
}

/* ── Agent Modal Overlay ── */
.agent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200000;
  animation: agentFadeIn 0.25s ease;
}

@keyframes agentFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.agent-modal {
  background: #fff;
  border-radius: 20px;
  position: relative;
  width: 94%;
  max-width: 780px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: agentSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes agentSlideUp {
  from {
    transform: translateY(40px) scale(0.96);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* ── Modal Header ── */
.agent-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid #e2e8f0;
  background: none;
}



.agent-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.agent-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


.agent-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

.agent-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #94a3b8;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

.agent-close-btn:hover {
  background: #f1f5f9;
  color: #334155;
}

/* ── Step Indicators ──
   A two-step stepper: a numbered circle and a label per step. The current step is filled with
   the accent and ringed; a finished one keeps the accent outline and shows a check instead of its
   number; the line between them fills in once the first is done. It used to be two 12px words
   with an arrow, and a leftover `.completed` rule painted a solid green block behind "Configure"
   (no padding) the moment Review opened - which read as a highlighted selection, not progress.
   Dark-theme values sit with the rest of the agent modal's (html[data-theme='dark'] .step-*). */
.agent-steps-indicator {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-dot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

/* The line between two steps. */
.step-dot + .step-dot::before {
  content: "";
  width: 40px;
  height: 2px;
  margin: 0 6px 0 14px;              /* + the 8px gap after it = 14px either side */
  border-radius: 2px;
  background: #cbd5e1;
  transition: background 0.2s ease;
}

.step-dot.completed + .step-dot::before {
  background: var(--accent-solid, #0A74DA);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.step-dot.active {
  color: #0f172a;
}

.step-dot.active .step-num {
  border-color: transparent;
  background: var(--accent-solid, #0A74DA);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(10, 116, 218, 0.15);
}

.step-dot.completed {
  color: #334155;
}

.step-dot.completed .step-num {
  border-color: var(--accent-solid, #0A74DA);
  background: #e8f2fc;
  color: var(--accent-solid, #0A74DA);
  font-size: 0;
}

.step-dot.completed .step-num::after {
  content: "\2713";
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .step-num,
  .step-dot + .step-dot::before {
    transition: none;
  }
}

/* ── Agent Steps ── */
.agent-step {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.agent-step-title {
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #1e293b;
}

.step-badge {
  width: 28px;
  height: 28px;
  background: var(--accent-solid);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(16, 17, 20, 0.18);
}

/* ── Config Sections ── */
.agent-config-section {
  margin-bottom: 20px;
}

.agent-config-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* ── Toggle Group ── */
.agent-toggle-group {
  display: flex;
  gap: 0;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 3px;
  width: fit-content;
}

.agent-toggle {
  padding: 8px 18px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-toggle.active {
  background: #fff;
  color: #1e293b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

/* The prompt moved this toggle (inbox.js, PROMPT -> TOGGLES): one pulse, and a note by the label. */
.agent-toggle.is-prompt-set {
  animation: agent-prompt-set 1.2s ease-out 1;
}

@keyframes agent-prompt-set {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .agent-toggle.is-prompt-set { animation: none; }
}

.agent-config-hint {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #2563eb;
}

/* ── Label Chips ── */
.agent-label-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  transition: all 0.2s;
}

.agent-chip .agent-icon {
  position: relative;
  top: -0.5px;
}

.agent-chip:hover {
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.agent-chip.selected {
  border-width: 2px;
  font-weight: 600;
}

.agent-chip.urgent {
  border-color: #fca5a5;
}

.agent-chip.urgent.selected {
  background: #fef2f2;
  color: #dc2626;
  border-color: #dc2626;
}

.agent-chip.meeting {
  border-color: #93c5fd;
}

.agent-chip.meeting.selected {
  background: #eff6ff;
  color: #2563eb;
  border-color: #2563eb;
}

.agent-chip.follow_up {
  border-color: #fdba74;
}

.agent-chip.follow_up.selected {
  background: #fff7ed;
  color: #ea580c;
  border-color: #ea580c;
}

.agent-chip.needs_review {
  border-color: #c4b5fd;
}

.agent-chip.needs_review.selected {
  background: #f5f3ff;
  color: #7c3aed;
  border-color: #7c3aed;
}

.agent-chip.transactional {
  border-color: #86efac;
}

.agent-chip.transactional.selected {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #16a34a;
}

.agent-chip.promotional {
  border-color: #fde68a;
}

.agent-chip.promotional.selected {
  background: #fefce8;
  color: #ca8a04;
  border-color: #ca8a04;
}

.agent-chip.informational {
  border-color: #a5b4fc;
}

.agent-chip.informational.selected {
  background: #eef2ff;
  color: #4f46e5;
  border-color: #4f46e5;
}

.agent-chip.social {
  border-color: #f9a8d4;
}

.agent-chip.social.selected {
  background: #fdf2f8;
  color: #db2777;
  border-color: #db2777;
}

.agent-chip.automated {
  border-color: #cbd5e1;
}

.agent-chip.automated.selected {
  background: #f8fafc;
  color: #475569;
  border-color: #475569;
}

/* ── Date Chips ── */
.agent-dates-display {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agent-date-chip {
  padding: 5px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}

.agent-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  background: #f8fafc;
}

.agent-meta-chip--loading {
  border-style: solid;
  color: #94a3b8;
}

.agent-meta-chip--error {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

.agent-skeleton-chip {
  height: 28px;
  width: 130px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  animation: agentSkeletonShimmer 1.2s linear infinite;
  background-size: 400% 100%;
  animation: agentShimmer 1.2s ease-in-out infinite;
}

.agent-skeleton-chip.short {
  width: 92px;
}

.agent-skeleton-chip.date {
  border-radius: 8px;
  width: 110px;
}

@keyframes agentShimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}

.agent-busy-overlay {
  position: absolute;
  inset: 72px 0 0 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.agent-busy-content {
  width: min(420px, 86%);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.agent-busy-title {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

.agent-busy-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

.agent-busy-skeletons {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-busy-row {
  height: 11px;
  border-radius: 7px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 240% 100%;
  animation: agentSkeletonShimmer 1.2s linear infinite;
}

.agent-busy-row.short {
  width: 70%;
}

@keyframes agentSkeletonShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -20% 0;
  }
}

/* ── Prompt Input ── */
/* ── Dictation (whisper-tiny.en in the browser; static/js/voice_input.js) ── */
.agent-config-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agent-config-label-row .agent-config-label {
  margin-bottom: 8px;
}

.agent-voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.agent-voice-btn .agent-icon {
  width: 15px;
  height: 15px;
}

.agent-voice-btn:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
}

.agent-voice-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Recording: unmistakable, because an open microphone must never be a surprise. */
.agent-voice-btn.is-recording {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
  animation: agent-voice-pulse 1.4s ease-in-out infinite;
}

@keyframes agent-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
  50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .agent-voice-btn.is-recording { animation: none; }
}

/* The recording banner is the whole interface while dictating: speak, press Done. */
.agent-voice-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px 8px 14px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
}

.agent-voice-banner[hidden] {
  display: none;
}

.agent-voice-banner-text {
  flex: 1 1 auto;
}

.agent-voice-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dc2626;
  animation: agent-voice-blink 1.2s ease-in-out infinite;
}

@keyframes agent-voice-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.agent-voice-timer {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  opacity: 0.8;
}

.agent-voice-done {
  flex: 0 0 auto;
  padding: 4px 14px;
  border: none;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.agent-voice-done:hover {
  background: #b91c1c;
}

.agent-voice-dismiss {
  flex: 0 0 auto;
  padding: 0 4px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
}

.agent-voice-dismiss:hover {
  opacity: 1;
}

/* Working: the model is loading and/or the audio is being transcribed. One state, because
   which of the two it is happens to be none of the user's business. */
.agent-voice-banner.is-working {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1e40af;
}

.agent-voice-banner.is-working .agent-voice-dot {
  background: var(--accent-solid);
  animation: agent-voice-spin 0.9s linear infinite;
  border-radius: 2px;
}

@keyframes agent-voice-spin {
  to { transform: rotate(360deg); }
}

.agent-voice-banner.is-error {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #b45309;
  font-weight: 500;
}

.agent-voice-banner.is-error .agent-voice-dot {
  background: #f59e0b;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .agent-voice-dot { animation: none !important; }
}

.agent-prompt-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: all 0.2s;
  background: #fafbfc;
  color: #1e293b;
  line-height: 1.5;
}

.agent-prompt-input:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 116, 218, 0.12);
}

.agent-prompt-input::placeholder {
  color: #94a3b8;
}

/* ── Prompt guide ── the "What can I write here?" disclosure under the prompt box. A native
   <details>, so opening it costs no script; the examples inside are buttons that append
   themselves to the prompt (static/js/inbox.js). Colours are literal here like the rest of the
   agent modal, with a dark override further down rather than tokens the modal does not use. */
.agent-prompt-guide {
  margin-top: 10px;
}

.agent-prompt-guide-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
}

.agent-prompt-guide-summary::-webkit-details-marker {
  display: none;
}

/* A border triangle, not a glyph: U+25B8 fell back to tofu in the modal's font stack. */
.agent-prompt-guide-summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}

.agent-prompt-guide[open] .agent-prompt-guide-summary::before {
  transform: rotate(90deg);
}

.agent-prompt-guide-summary:hover {
  text-decoration: underline;
}

.agent-prompt-guide-body {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafbfc;
}

.agent-prompt-guide-lead {
  margin: 0 0 11px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #64748b;
}

.agent-prompt-guide-foot {
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid #eef2f7;
  font-size: 12.5px;
  line-height: 1.55;
  color: #64748b;
}

.agent-prompt-guide-egs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* One whole prompt per row: left-aligned and allowed to wrap, so a long example stays readable
   on a narrow dialog instead of being clipped into a pill. */
.agent-prompt-eg {
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.agent-prompt-eg:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* ── Step Actions ── */
.agent-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

/* ── Agent Buttons ── */
.agent-btn {
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agent-btn.primary {
  background: var(--accent-solid);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 17, 20, 0.16);
}

.agent-btn.primary:hover {
  background: var(--accent-solid-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(10, 116, 218, 0.24);
}

.agent-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.agent-btn.secondary {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.agent-btn.secondary:hover {
  background: #e2e8f0;
}

.agent-btn.secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.agent-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Agent Spinner ── */
.agent-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e2e8f0;
  border-top: 3px solid var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.agent-spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── Step 2: Email List Preview ── */
.agent-list-info {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 14px;
}

.agent-filter-summary {
  display: none;
  margin: 8px 0 12px 0;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.45;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

/* ── Step 2 summary ── what this run covers, in parts. Built by
   static/js/inbox.js: renderAgentFilterSummary(). */
.agent-summary-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agent-summary-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
}

.agent-summary-fact-key {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
}

.agent-summary-fact-val {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}

/* The prompt, as the user typed it - quoted rather than prefixed with "prompt=". */
.agent-summary-prompt {
  margin: 9px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #334155;
  font-style: italic;
}

.agent-summary-plan {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #e8edf3;
}

.agent-summary-plan-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin-bottom: 5px;
}

/* One row per step: a four-step run is four lines, not one paragraph. */
.agent-summary-step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}

.agent-summary-step-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e6f5f4;
  color: #0f766e;
  font-size: 10.5px;
  font-weight: 700;
}

.agent-summary-step-text {
  font-size: 12.5px;
  color: #334155;
}

.agent-summary-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #b45309;
}

.agent-list-count {
  font-weight: 700;
  color: var(--blue);
}

.agent-inline-loading {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.agent-inline-loading::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--accent-solid);
  box-shadow: 0 0 0 4px rgba(10, 116, 218, 0.14);
  animation: agentPulseDot 1s ease-in-out infinite;
}

.agent-selection-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 10px;
  padding: 0 2px 8px;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  background: none;
}

.agent-selection-count {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.agent-selection-actions {
  display: inline-flex;
  align-items: center;
  /* 8px was the gap between two pills, which had their own edges. Two plain words need the
     space to read as two things you can press rather than one long phrase. */
  gap: 18px;
}

/* These have to read as buttons while sitting ON a panel: same-colour-as-the-panel is what made
   them look like bare text. So the surface is always a step away from the toolbar's, the label
   keeps a full-strength text colour, and the pill shape matches the other chips in the dialog. */
.agent-select-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-solid);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

.agent-select-btn:hover {
  text-decoration: underline;
}

.agent-select-btn.is-active {
  color: #1e3a8a;
  text-decoration: underline;
}

@keyframes agentPulseDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.75);
    opacity: 0.7;
  }
}

.agent-email-list {
  max-height: 45vh;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.agent-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
}

.agent-list-item.selected {
  background: #eef2ff;
}

/* Step header inside the preview list: the server plan's sequence, made visible. */
/* Sticky, so it must be OPAQUE: a translucent background here let every row that scrolled under
   it show through the text, which is exactly what it looked like. The shadow separates it from
   the row currently sliding underneath. */
.agent-list-step {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f766e;
  background: #e6f5f4;
  border-bottom: 1px solid #cbe9e5;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
}

.agent-list-step-count {
  font-weight: 500;
  color: #475569;
}

.agent-list-item:last-child {
  border-bottom: none;
}

.agent-list-item:hover {
  background: #f8fafc;
}

.agent-list-item.selected:hover {
  background: #dbeafe;
}

.agent-list-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.agent-list-checkbox-input {
  display: none;
}

.agent-list-checkbox-mark {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid #cbd5e1;
  background: #fff;
  position: relative;
  transition: all 0.15s;
}

.agent-list-checkbox-input:checked + .agent-list-checkbox-mark {
  background: var(--accent-solid);
  border-color: transparent;
}

.agent-list-checkbox-input:checked + .agent-list-checkbox-mark::after {
  content: '✔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -57%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.agent-list-num {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #eff6ff, #eef2ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  flex-shrink: 0;
}

.agent-list-content {
  flex: 1;
  min-width: 0;
}

.agent-list-subject {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.agent-list-from {
  font-weight: 700;
  color: #334155;
}

.agent-list-date {
  color: #64748b;
}

.agent-list-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Agent Label Badge ── */
.agent-label-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  flex-shrink: 0;
}

.agent-label-badge.urgent {
  background: #fef2f2;
  color: #dc2626;
}

.agent-label-badge.responded {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #10b981;
}

.agent-label-badge.meeting {
  background: #eff6ff;
  color: #2563eb;
}

.agent-label-badge.follow_up {
  background: #fff7ed;
  color: #ea580c;
}

.agent-label-badge.needs_review {
  background: #f5f3ff;
  color: #7c3aed;
}

.agent-label-badge.transactional {
  background: #f0fdf4;
  color: #16a34a;
}

.agent-label-badge.promotional {
  background: #fefce8;
  color: #ca8a04;
}

.agent-label-badge.informational {
  background: #eef2ff;
  color: #4f46e5;
}

.agent-label-badge.social {
  background: #fdf2f8;
  color: #db2777;
}

.agent-label-badge.automated {
  background: #f8fafc;
  color: #475569;
}

.agent-label-badge.spam {
  background: #fef2f2;
  color: #b91c1c;
}

/* ── Step 3: Processing View ── */
#agentStep3 {
  flex-direction: column;
  padding: 0;
}

.agent-progress-bar {
  height: 4px;
  background: #e2e8f0;
  overflow: hidden;
}

.agent-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0A74DA, #3B82F6, #0A74DA);
  background-size: 200% 100%;
  animation: agentProgressAnim 2s ease infinite;
  transition: width 0.5s ease;
  border-radius: 0 4px 4px 0;
}

@keyframes agentProgressAnim {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 0%;
  }

  100% {
    background-position: 0% 0%;
  }
}

.agent-progress-text {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  padding: 10px 24px 4px;
}

.agent-email-detail {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.agent-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
  color: var(--blue);
  font-weight: 500;
}

/* ── Agent Email Content ── */
.agent-email-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.agent-email-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-solid);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.agent-email-header-info {
  flex: 1;
  min-width: 0;
}

.agent-email-subject {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
  word-wrap: break-word;
}

.agent-email-from {
  font-size: 13px;
  color: #64748b;
}

.agent-email-date {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

.agent-email-body {
  background: #fafbfc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
  max-height: 300px;
  overflow-y: auto;
}

/* ── AI Sections ── */
.agent-ai-section {
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.agent-ai-section.summary {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}

.agent-ai-section.response {
  background: #f0fdf4;
  border: 1px solid #a7f3d0;
}

.agent-ai-section.calendar {
  background: #eff6ff;
  border: 1px solid #93c5fd;
}

.agent-ai-section.crm {
  background: #fff7ed;
  border: 1px solid #fdba74;
}

.agent-ai-header {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-ai-icon {
  font-size: 16px;
}

.agent-ai-text {
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 10px 0;
}

.agent-ai-response-body {
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1fae5;
  background: #fff;
  min-height: 50px;
  margin-bottom: 10px;
  outline: none;
  transition: box-shadow 0.2s;
}

.agent-ai-response-body:focus {
  box-shadow: 0 0 0 2px #10B981;
}

.agent-ai-actions {
  display: flex;
  gap: 8px;
}

.agent-action-btn {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.agent-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.agent-action-btn.notes:hover {
  background: #eef2ff;
  border-color: #818cf8;
  color: #4338ca;
}

.agent-action-btn.send:hover {
  background: #f0fdf4;
  border-color: #34d399;
  color: #059669;
}

.agent-action-btn.calendar:hover {
  background: #eff6ff;
  border-color: #60a5fa;
  color: #2563eb;
}

.agent-action-btn.slack:hover {
  background: #f0fdf4;
  border-color: #2EB67D;
  color: #065F46;
}

/* ── Footer ── */
.agent-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid #e2e8f0;
  background: #fafbfc;
}

.agent-footer-info {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
}

/* ── Toast Notifications ── */
.agent-toast-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
  width: min(420px, calc(100vw - 24px));
}

.agent-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  animation: agentToastIn 0.3s ease;
}

.agent-toast.success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}

.agent-toast.error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.agent-toast.warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.agent-toast.info {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1e40af;
}

.agent-toast-msg {
  flex: 1;
  line-height: 1.4;
}

.agent-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: inherit;
  opacity: 0.6;
  padding: 2px 4px;
  border-radius: 4px;
  transition: opacity 0.15s;
}

.agent-toast-close:hover {
  opacity: 1;
}

@keyframes agentToastIn {
  from {
    transform: translateX(40px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes agentToastOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(40px);
    opacity: 0;
  }
}

/* ── Mobile Responsive ── */
@media (max-width: 800px) {
  .email-toolbar {
    flex-wrap: nowrap !important;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  .toolbar-actions {
    gap: 4px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }

  /* Hide non-primary buttons and their wrappers on mobile */
  .email-toolbar .icon-btn.btn-print,
  .email-toolbar .icon-btn.btn-spam,
  .email-toolbar .icon-btn.btn-trash,
  .email-toolbar .icon-btn.btn-block,
  .email-toolbar .icon-btn.btn-next-desktop,
  .email-toolbar .move-to-wrap {
    display: none !important;
  }

  .email-toolbar .icon-btn .btn-text {
    display: none;
  }

  .email-toolbar .icon-btn {
    padding: 8px 12px !important;
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
    border-radius: 8px !important;
    font-size: 18px !important;
  }

  .toolbar-more-wrap {
    margin-left: auto !important;
    display: inline-flex !important;
    flex-shrink: 0;
    position: relative;
    z-index: 10060;
  }

  .toolbar-more-menu {
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    max-width: 78vw;
    max-height: 55vh;
    overflow-y: auto;
  }
}

/* Move To Menu CSS */
.move-to-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  padding: 8px 0;
}

.move-to-item,
.toolbar-more-item {
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
  color: #334155;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  box-sizing: border-box;
}

.move-to-item:hover,
.toolbar-more-item:hover {
  background: rgba(10, 116, 218, 0.12) !important;
  color: #0F172A !important;
}

/* Unified hover for email toolbar buttons */
.email-detail-page .email-toolbar .toolbar-actions .icon-btn:hover {
  background: rgba(10, 116, 218, 0.12) !important;
  border-color: #93C5FD !important;
  box-shadow: 0 6px 14px rgba(10, 116, 218, 0.16) !important;
  transform: translateY(-1px) !important;
}

.email-detail-page .email-toolbar .icon-btn.btn-email-nav {
  min-width: 36px !important;
  width: 36px;
  padding: 8px 0 !important;
  gap: 0 !important;
}

.email-detail-page .email-toolbar .icon-btn.btn-email-nav .btn-icon {
  margin: 0;
}

.email-detail-page .email-toolbar .icon-btn.btn-email-nav.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* Desktop spacing */
@media (min-width: 801px) {
  .toolbar-more-wrap {
    display: inline-flex !important;
  }

  .toolbar-more-item.mobile-overflow-only {
    display: none !important;
  }

  /* Hide mobile-only Next button on desktop */
  .email-toolbar .icon-btn.btn-next-mobile {
    display: none !important;
  }
}

@media (max-width: 800px) {
  .toolbar-more-item.mobile-overflow-only {
    display: flex !important;
  }
}


@media (max-width: 600px) {
  .launch-agent-btn {
    padding: 7px 12px;
    font-size: 12px;
    gap: 5px;
    border-radius: 10px;
  }

  .launch-agent-text {
    display: none;
  }

  .agent-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .agent-steps-indicator {
    display: none;
  }

  .agent-step {
    padding: 16px;
  }

  .agent-email-list {
    max-height: 35vh;
  }

  .agent-toast-container {
    left: 12px;
    right: 12px;
    top: 12px;
    transform: none;
    max-width: none;
    width: auto;
  }
}

/* Fold / narrow-tablet width fix: keep toolbar in one row */
@media (min-width: 801px) and (max-width: 900px) {
  .email-toolbar {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .toolbar-actions {
    flex: 1 1 auto !important;
    min-width: 0;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    justify-content: flex-start !important;
  }

  .toolbar-more-wrap {
    margin-left: auto !important;
    flex-shrink: 0;
  }

  .email-toolbar .icon-btn.btn-print,
  .email-toolbar .icon-btn.btn-spam,
  .email-toolbar .icon-btn.btn-trash,
  .email-toolbar .icon-btn.btn-block {
    display: none !important;
  }

  .toolbar-more-item.mobile-overflow-only {
    display: flex !important;
  }
}

/* Tablet / narrow desktop detail-toolbar stabilization */
@media (max-width: 1200px) {
  .email-detail-page .email-toolbar {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .email-detail-page .toolbar-actions {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    gap: 6px !important;
  }

  .email-detail-page .toolbar-more-wrap {
    margin-left: auto !important;
    flex-shrink: 0;
  }

  .email-detail-page .email-toolbar .icon-btn.btn-print,
  .email-detail-page .email-toolbar .icon-btn.btn-spam,
  .email-detail-page .email-toolbar .icon-btn.btn-trash,
  .email-detail-page .email-toolbar .icon-btn.btn-block {
    display: none !important;
  }

  .email-detail-page .toolbar-more-item.mobile-overflow-only {
    display: flex !important;
  }
}

/* Fold/tablet compact-desktop mode: show full action buttons with slightly smaller sizing */
@media (min-width: 801px) and (max-width: 980px) {
  .hamburger-container .header-left {
    gap: 6px;
  }

  .hamburger-container .summarize-btn,
  .hamburger-container .btn-generate,
  .hamburger-container .btn-notes,
  .hamburger-container .btn-calendar,
  .hamburger-container .btn-notify {
    height: 34px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    gap: 5px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  }

  .hamburger-container .summarize-btn {
    background: #EEF2FF !important;
    color: #312E81 !important;
    border: 1px solid #C7D2FE !important;
  }

  .hamburger-container .btn-generate {
    background: #ECFDF5 !important;
    color: #047857 !important;
    border: 1px solid #A7F3D0 !important;
  }

  .hamburger-container .btn-notes {
    background: #F3E8FF !important;
    color: #7C3AED !important;
    border: 1px solid #DDD6FE !important;
  }

  .hamburger-container .btn-calendar {
    background: #FFFBEB !important;
    color: #D97706 !important;
    border: 1px solid #FDE68A !important;
  }

  .hamburger-container .btn-notify {
    background: #ECFEFF !important;
    color: #0E7490 !important;
    border: 1px solid #A5F3FC !important;
  }

  .hamburger-container .summarize-btn .icon,
  .hamburger-container .btn-generate .icon,
  .hamburger-container .btn-notes .icon,
  .hamburger-container .btn-calendar .icon,
  .hamburger-container .btn-notify .icon {
    font-size: 12px !important;
    line-height: 1;
  }

  .hamburger-container .summarize-btn .text,
  .hamburger-container .btn-generate .text,
  .hamburger-container .btn-notes .text,
  .hamburger-container .btn-calendar .text,
  .hamburger-container .btn-notify .text {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border-radius: 0 !important;
    bottom: auto !important;
    white-space: nowrap;
    font-size: 12px !important;
  }

  .email-detail-page .email-toolbar {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  .email-detail-page .toolbar-actions {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow-x: auto;
  }

  .email-detail-page .email-toolbar .icon-btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
    min-height: 30px !important;
    border-radius: 7px !important;
    gap: 5px !important;
    white-space: nowrap;
  }

  .email-detail-page .email-toolbar .icon-btn .btn-text {
    display: inline !important;
    font-size: 11px !important;
  }

  .email-detail-page .email-toolbar .icon-btn.btn-print,
  .email-detail-page .email-toolbar .icon-btn.btn-spam,
  .email-detail-page .email-toolbar .icon-btn.btn-trash,
  .email-detail-page .email-toolbar .icon-btn.btn-block {
    display: inline-flex !important;
  }

  .email-detail-page .toolbar-more-wrap {
    margin-left: 0 !important;
    flex-shrink: 0;
  }

  .email-detail-page .toolbar-more-item.mobile-overflow-only {
    display: none !important;
  }
}

/* Final desktop/tablet header lock (prevents responsive conflicts) */
@media (min-width: 901px) {
  .hamburger-container {
    position: fixed !important;
    top: 0 !important;
    left: 260px !important;
    right: 0 !important;
    z-index: 4000 !important;
  }

  .inbox {
    padding-top: 72px !important;
  }

  body.sidebar-collapsed .hamburger-container {
    left: 86px !important;
  }

  body.sidebar-collapsed .inbox {
    padding-left: 106px !important;
  }
}

/* Keep top action buttons on one line for narrow desktop/tablet widths */
@media (min-width: 901px) and (max-width: 1200px) {
  .hamburger-container {
    gap: 10px;
  }

  .hamburger-container .header-left {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hamburger-container .header-right {
    flex-shrink: 0;
    margin-left: 8px;
  }

  .hamburger-container .summarize-btn,
  .hamburger-container .btn-generate,
  .hamburger-container .btn-notes,
  .hamburger-container .btn-calendar,
  .hamburger-container .btn-notify {
    height: 38px;
    padding: 8px 10px;
    font-size: 13px;
    gap: 6px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Final Gmail-style desktop shell */
@media (min-width: 901px) {
  .hamburger-container {
    left: 260px !important;
    right: 0 !important;
    justify-content: flex-start !important;
    gap: 10px;
  }

  .hamburger-container .header-search {
    margin: 0 8px 0 0;
    flex: 0 1 560px;
  }

  .hamburger-container .launch-agent-btn {
    margin-right: 6px;
  }

  .hamburger-container .header-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
  }

  .inbox {
    margin-left: 260px !important;
    width: calc(100% - 260px) !important;
    padding: 72px 16px 24px 16px !important;
  }

  /* Email detail needs a tighter top gap below the fixed header. */
  .inbox:has(.email-detail-page) {
    padding-top: 58px !important;
  }

  .gmail-inbox {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.sidebar-collapsed .hamburger-container {
    left: 86px !important;
  }

  body.sidebar-collapsed .inbox {
    margin-left: 86px !important;
    width: calc(100% - 86px) !important;
    padding-left: 16px !important;
  }
}

/* ===== Plan limits (webapp/services/plan_service; js/base.js window.showPlanLimit) ===== */
.plan-limit-banner {
  position: fixed;
  top: 72px;
  left: 50%;
  z-index: 12000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 640px);
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.4;
  transform: translate(-50%, -16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.plan-limit-banner.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.plan-limit-text {
  flex: 1 1 auto;
  min-width: 0;
}

.plan-limit-link {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.plan-limit-close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
}

/* The "context-aware" chip next to a Pro / Max summary (templates/email_detail_content.html). */
.summary-mode-chip {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--tab-bg-subtle);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.summary-mode-chip[hidden] {
  display: none;
}

/* A stored summary whose conversation has moved on (migration 015). The words are
   still shown - the user asked for them and paid for them - with the thread's own
   news beside them. "Summarize again" is the only thing here that spends a credit. */
.summary-stale-note {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--tab-bg-subtle);
  color: var(--text-muted);
  font-size: 12.5px;
}

.summary-stale-note[hidden] {
  display: none;
}

.summary-stale-refresh {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.summary-stale-refresh:hover {
  border-color: var(--blue);
}

/* A provider chip the plan does not include (templates/settings.html, plan_locks()). */
.settings-chip.is-locked {
  opacity: 0.62;
  cursor: not-allowed;
}

.plan-lock-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--set-accent-soft, var(--tab-bg-subtle));
  color: var(--set-accent, var(--blue));
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* The slot counter next to "+ Add category" / "+ Add detection" (static/js/settings.js). */
.rule-slot-count {
  margin-left: 10px;
  font-size: 12px;
  color: var(--set-muted, var(--muted));
  vertical-align: middle;
}

.rule-slot-count.is-full {
  color: var(--set-warn, #b45309);
  font-weight: 700;
}

/* "Jump to": the list of every category / detection card, and the ring on the one you pick
   (static/js/settings.js). Forty cards is a long page to scroll looking for one rule. */
.rule-jump {
  position: relative;
  display: inline-flex;
}

.rule-jump-btn {
  color: var(--set-text-soft, var(--muted));
}

/* The same chevron as the order arrows and the row expander, painted through a mask so it takes
   `currentColor` and needs no second copy for the dark theme. The token is declared once, in the
   settings section of this file (`--set-chevron-mask`). */
.rule-jump-caret {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  vertical-align: -2px;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: var(--set-chevron-mask) center / 12px 12px no-repeat;
  mask: var(--set-chevron-mask) center / 12px 12px no-repeat;
}

.rule-jump-menu {
  position: absolute;
  top: calc(100% + 6px);
  /* Anchored to the button's right edge so it opens inwards: the tools row sits at the card's
     right, and a 340px menu hung off the left edge would run past it. */
  right: 0;
  z-index: 40;
  min-width: 260px;
  max-width: 340px;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  background: var(--set-panel, #fff);
  border: 1px solid var(--set-line, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

/* `display` beats the `hidden` attribute the markup ships with, so it is spelled out here. */
.rule-jump-menu[hidden] {
  display: none;
}

.rule-jump-filter {
  width: 100%;
  margin-bottom: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--set-text, #0f172a);
  background: var(--set-panel-soft, #f8fafc);
  border: 1px solid var(--set-line, #e2e8f0);
  border-radius: 8px;
}

.rule-jump-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rule-jump-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--set-text, #0f172a);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.rule-jump-item:hover,
.rule-jump-item:focus-visible {
  background: var(--set-accent-soft, #eef2ff);
  color: var(--set-accent, #0A74DA);
}

.rule-jump-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rule-jump-item-tag {
  flex: 0 0 auto;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--set-warn, #b45309);
  background: var(--set-warn-soft, #fef3c7);
  border-radius: 999px;
}

.rule-jump-item-tag.is-muted {
  color: var(--set-muted, var(--muted));
  background: var(--set-panel-soft, #f1f5f9);
}

.rule-jump-empty {
  padding: 10px;
  font-size: 12.5px;
  color: var(--set-muted, var(--muted));
}

/* Landing in the middle of a page of near-identical cards does not say which one you landed on. */
.rule-card-located {
  animation: ruleCardLocated 1.6s ease-out;
}

@keyframes ruleCardLocated {
  0%, 55% {
    border-color: var(--set-accent, #0A74DA);
    box-shadow: 0 0 0 3px var(--set-accent-soft, #eef2ff);
  }
  100% {
    border-color: var(--set-line, #e2e8f0);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rule-card-located {
    animation: none;
    border-color: var(--set-accent, #0A74DA);
  }
}

/* The "+N hidden" note in the Launch Agent modal (static/js/inbox.js). */
.agent-limit-hint {
  color: var(--blue);
  font-weight: 600;
}

.agent-limit-hint a {
  color: inherit;
  text-decoration: underline;
}

/* ===== Global Theme Modes ===== */
html[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0b1220;
  --card: #111827;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: #334155;
  --blue: #60a5fa;
  --blue-accent: #3b82f6;
  --brand-ink: #5EA9F2;
  --panel-head-bg: #1A2436;
  --panel-head-border: rgba(148, 163, 184, 0.22);
  --panel-head-text: #E5E7EB;
  --panel-head-sub: #94A3B8;
  --panel-head-btn: #CBD5E1;
  --panel-head-btn-hover: rgba(226, 232, 240, 0.14);
  --shadow: 0 10px 24px rgba(2, 6, 23, 0.45);
}

/* The tab palette at the top of this file is light-only: every one of its eighteen
   variants sets --tab-bg-subtle to a pale blue, and the dark block above never
   redefined it. Anything painting that colour under var(--text) therefore drew
   near-white on near-white in dark mode - the Follow up box's "Understood as" line,
   the follow-ups strip, the "your plan is now X" notice, and every button whose
   hover fills with it.

   Declared on `body`, not on `html` above, on purpose: the per-tab palettes are
   `body[data-tab="..."]` rules, so a value set one level up would be shadowed by
   them on every page that names a tab. `html[data-theme='dark'] body` outranks
   them and applies whatever tab is open. */
html[data-theme='dark'] body {
  --tab-bg-subtle: #1b2536;
}

html[data-theme='dark'] body,
html[data-theme='dark'] .gmail-layout,
html[data-theme='dark'] .inbox {
  background: var(--bg);
  color: var(--text);
}

html[data-theme='dark'] .sidebar,
html[data-theme='dark'] .hamburger-container,
html[data-theme='dark'] .advanced-search-panel,
html[data-theme='dark'] .search-suggestions,
html[data-theme='dark'] .email-table,
html[data-theme='dark'] .bulk-toolbar,
html[data-theme='dark'] .email-body-container,
html[data-theme='dark'] .response-box,
html[data-theme='dark'] .label-modal,
html[data-theme='dark'] .meeting-popup-content,
html[data-theme='dark'] .agent-modal-content,
html[data-theme='dark'] .remove-label-modal {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.45);
}


/* Dictation button in dark mode. */
html[data-theme='dark'] .agent-voice-btn {
  border-color: #475569;
  color: #cbd5e1;
}

html[data-theme='dark'] .agent-voice-btn:hover:not(:disabled) {
  border-color: #93c5fd;
  color: #93c5fd;
}

html[data-theme='dark'] .agent-voice-btn.is-recording {
  border-color: #f87171;
  background: rgba(220, 38, 38, 0.14);
  color: #fca5a5;
}

html[data-theme='dark'] .agent-voice-banner {
  border-color: #7f1d1d;
  background: rgba(220, 38, 38, 0.12);
  color: #fca5a5;
}

html[data-theme='dark'] .agent-voice-banner.is-working {
  border-color: #1e3a8a;
  background: rgba(10, 116, 218, 0.16);
  color: #bfdbfe;
}

html[data-theme='dark'] .agent-voice-banner.is-error {
  border-color: #78350f;
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

/* Search panel: the label picker and the query preview in dark mode. */
html[data-theme='dark'] .advanced-label-btn,
html[data-theme='dark'] .advanced-label-option {
  border-color: #475569;
  color: #cbd5e1;
}

html[data-theme='dark'] .advanced-label-option.is-system {
  color: #94a3b8;
}

html[data-theme='dark'] .advanced-label-btn:hover,
html[data-theme='dark'] .advanced-label-btn[aria-expanded="true"],
html[data-theme='dark'] .advanced-label-option:hover {
  border-color: #60a5fa;
  color: #60a5fa;
}

html[data-theme='dark'] .advanced-label-option.is-on {
  border-color: #60a5fa;
  background: #1d4ed8;
  color: #f8fafc;
}

html[data-theme='dark'] .advanced-search-hint {
  color: #94a3b8;
}

/* Label modal dark theme text visibility */
html[data-theme='dark'] .label-modal h3 {
  color: #f8fafc !important;
}

html[data-theme='dark'] .label-modal label {
  color: #cbd5e1 !important;
}

html[data-theme='dark'] .label-modal input[type="text"] {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #60a5fa !important;
}

html[data-theme='dark'] .label-modal input[type="text"]:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15) !important;
}

html[data-theme='dark'] .label-modal-actions .label-modal-create {
  color: #60a5fa !important;
}

html[data-theme='dark'] .label-modal-actions .label-modal-create:hover {
  background: rgba(96, 165, 250, 0.08) !important;
}

html[data-theme='dark'] .label-modal-actions .label-modal-cancel {
  color: #60a5fa !important;
}

html[data-theme='dark'] .remove-label-modal h3 {
  color: #f8fafc !important;
}

html[data-theme='dark'] .remove-label-modal-text {
  color: #cbd5e1 !important;
}

html[data-theme='dark'] .remove-label-modal-delete {
  background: #2563eb;
  color: #f8fafc;
}

html[data-theme='dark'] .remove-label-modal-delete:hover {
  background: #1d4ed8;
}

html[data-theme='dark'] .sublabel-input {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #60a5fa !important;
}

html[data-theme='dark'] .sublabel-input:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15) !important;
}

html[data-theme='dark'] .sidebar-label-settings-btn {
  color: #94a3b8;
}

html[data-theme='dark'] .sidebar-label-settings-btn:hover {
  background: rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
}

html[data-theme='dark'] .sidebar-label-settings-btn.is-opening,
html[data-theme='dark'] .sidebar-label-settings-btn.is-open {
  background: rgba(96, 165, 250, 0.2);
  color: #bfdbfe;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4);
}

html[data-theme='dark'] .sidebar-user-label-item.sidebar-user-sublabel-item::before {
  background: rgba(148, 163, 184, 0.34);
}

html[data-theme='dark'] .sidebar-user-label-item.sidebar-user-sublabel-item .tab-user-label::before {
  background: rgba(203, 213, 225, 0.56);
}

html[data-theme='dark'] .sidebar-label-expander {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.34);
}

html[data-theme='dark'] .sidebar-label-expander:hover {
  background: rgba(148, 163, 184, 0.34);
  color: #f8fafc;
}

html[data-theme='dark'] .sidebar-user-label-item.has-sublabel-children .tab-user-label.active .sidebar-label-expander {
  background: rgba(96, 165, 250, 0.24);
  color: #dbeafe;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.42);
}

html[data-theme='dark'] .label-settings-table-wrap {
  border-color: #37475e;
  background: #0b1220;
}

html[data-theme='dark'] .label-settings-table thead th {
  background: linear-gradient(180deg, #0f172a 0%, #101c31 100%);
  color: #cbd5e1;
  border-bottom-color: #334155;
}

html[data-theme='dark'] .label-settings-table td {
  border-bottom-color: #1f2a3a;
}

html[data-theme='dark'] .label-settings-table tbody tr:hover {
  background: rgba(96, 165, 250, 0.12);
}

html[data-theme='dark'] .label-settings-name {
  color: #f1f5f9;
}

html[data-theme='dark'] .label-settings-empty {
  color: #94a3b8;
}

html[data-theme='dark'] .label-settings-select {
  background-color: #0f172a;
  color: #e2e8f0;
  border-color: #475569;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%2394a3b8' d='M5.25 7.75L10 12.5l4.75-4.75 1.5 1.5-6.25 6.25L3.75 9.25z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

html[data-theme='dark'] .label-settings-select:hover {
  border-color: #64748b;
}

html[data-theme='dark'] .label-settings-select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

html[data-theme='dark'] .label-settings-modal .remove-label-modal-text {
  color: #9fb0c7 !important;
}

html[data-theme='dark'] .label-settings-sync-status {
  border-color: #334155;
  background: #0f172a;
  color: #cbd5e1;
}

html[data-theme='dark'] .label-settings-sync-status.is-available {
  border-color: #166534;
  background: rgba(22, 101, 52, 0.2);
  color: #86efac;
}

html[data-theme='dark'] .label-settings-sync-status.is-locked {
  border-color: #854d0e;
  background: rgba(133, 77, 14, 0.22);
  color: #fcd34d;
}

html[data-theme='dark'] .inbox-toolbar {
  background: #0f172a !important;
  border-bottom-color: #334155 !important;
}

html[data-theme='dark'] .email-row:not(.unread) {
  background: #0f172a;
}

html[data-theme='dark'] .email-row.unread {
  background: #141f36;
}

html[data-theme='dark'] .email-row:hover {
  background: #1e293b !important;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12), inset -1px 0 0 rgba(255, 255, 255, 0.12), 0 1px 4px 0 rgba(0, 0, 0, 0.6) !important;
  border-bottom-color: transparent !important;
  z-index: 2;
}

html[data-theme='dark'] .row-action-btn {
  color: #94a3b8;
  background: transparent;
}

html[data-theme='dark'] .row-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

html[data-theme='dark'] .row-category-chip {
  border-color: rgba(148, 163, 184, 0.45);
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.18);
}

html[data-theme='dark'] .row-detect-chip {
  border-color: rgba(74, 222, 128, 0.45);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.2);
}

html[data-theme='dark'] .email-row.unread .row-from,
html[data-theme='dark'] .email-row.unread .row-subject,
html[data-theme='dark'] .email-row.unread .row-date {
  color: #f8fafc !important;
  font-weight: 700;
}

html[data-theme='dark'] .email-row.unread .row-snippet {
  color: #cbd5e1 !important;
}

html[data-theme='dark'] .email-row .row-from,
html[data-theme='dark'] .email-row .row-subject,
html[data-theme='dark'] .email-row .row-date,
html[data-theme='dark'] .row-snippet,
html[data-theme='dark'] .meta,
html[data-theme='dark'] .muted,
html[data-theme='dark'] .email-count,
html[data-theme='dark'] .pagination-range,
html[data-theme='dark'] .sidebar .tab,
html[data-theme='dark'] .sidebar-labels-divider,
html[data-theme='dark'] .search-input {
  color: #cbd5e1 !important;
}

html[data-theme='dark'] .email-detail-page .email-meta-header {
  border-bottom-color: #334155 !important;
}

html[data-theme='dark'] .email-detail-page .email-from-name {
  color: #f8fafc !important;
}

html[data-theme='dark'] .email-detail-page .email-from-address {
  color: #93c5fd !important;
}

html[data-theme='dark'] .email-detail-page .email-date-text {
  color: #cbd5e1 !important;
}

html[data-theme='dark'] .email-detail-page .email-attachments-indicator {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html[data-theme='dark'] .email-detail-page .thread-title {
  color: #94a3b8 !important;
}

html[data-theme='dark'] .email-detail-page .thread-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #2a3444 !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .email-detail-page .thread-card:last-child {
  border-bottom: none !important;
}

html[data-theme='dark'] .email-detail-page .thread-card-header {
  background: transparent !important;
  border-bottom: none !important;
}

html[data-theme='dark'] .email-detail-page .thread-card-header:hover {
  background: #1b2433 !important;
  box-shadow: inset 1px 0 0 #2a3444, inset -1px 0 0 #2a3444 !important;
}

html[data-theme='dark'] .email-detail-page .thread-card-from {
  color: #e8eaed !important;
}

html[data-theme='dark'] .email-detail-page .thread-card-snippet,
html[data-theme='dark'] .email-detail-page .thread-card-date,
html[data-theme='dark'] .email-detail-page .thread-card-clip,
html[data-theme='dark'] .email-detail-page .thread-card-att-head,
html[data-theme='dark'] .email-detail-page .thread-card-att-loading {
  color: #9aa0a6 !important;
}

html[data-theme='dark'] .email-detail-page .thread-card-attachments {
  border-top-color: #2a3444 !important;
}

html[data-theme='dark'] .email-detail-page .thread-collapsed-row:hover {
  background: #1b2433 !important;
}

html[data-theme='dark'] .email-detail-page .thread-collapsed-bubble {
  background: #1b2433 !important;
  border-color: #2a3444 !important;
  color: #cbd5e1 !important;
}

html[data-theme='dark'] .email-detail-page .thread-collapsed-row:hover .thread-collapsed-bubble {
  background: #243044 !important;
}

html[data-theme='dark'] .email-detail-page .thread-collapsed-rule {
  background: #2a3444 !important;
}

html[data-theme='dark'] .email-detail-page .thread-card-body {
  background: transparent !important;
}

/* Email content keeps its own white page in dark mode - the same choice the
   main reading pane already makes - so a thread never mixes white HTML panels
   with dark plain-text ones. Only the chrome around it follows the theme. */
html[data-theme='dark'] .email-detail-page .thread-card-iframe {
  background: #ffffff !important;
  border-color: #2a3444 !important;
}

html[data-theme='dark'] .email-detail-page .thread-card-text {
  background: #ffffff !important;
  border-color: #2a3444 !important;
  color: #202124 !important;
}

/* The open message in a conversation drops the reading card's dark fill (the
   rule above that paints every .email-body-container carries !important) and
   borders its page like the earlier messages do. */
html[data-theme='dark'] .email-detail-page .email-body-container.in-thread {
  background: transparent !important;
  box-shadow: none;
}

html[data-theme='dark'] .email-detail-page .email-body-container.in-thread .email-body-html,
html[data-theme='dark'] .email-detail-page .email-body-container.in-thread .email-body-text {
  border-color: #2a3444;
}

html[data-theme='dark'] input,
html[data-theme='dark'] textarea,
html[data-theme='dark'] select,
html[data-theme='dark'] .search-input,
html[data-theme='dark'] [contenteditable='true'] {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}

html[data-theme='dark'] .agent-modal {
  background: #111827 !important;
  border: 1px solid #334155 !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
  box-shadow: 0 22px 56px rgba(2, 6, 23, 0.58);
}

html[data-theme='dark'] .agent-modal-header {
  background: none;
  border-bottom: 1px solid #334155;
}

html[data-theme='dark'] .step-dot {
  color: #94a3b8;
}

html[data-theme='dark'] .step-dot + .step-dot::before {
  background: #334155;
}

html[data-theme='dark'] .step-dot.completed + .step-dot::before {
  background: #60a5fa;
}

html[data-theme='dark'] .step-num {
  border-color: #475569;
  background: #0f172a;
  color: #94a3b8;
}

html[data-theme='dark'] .step-dot.active {
  color: #f1f5f9;
}

html[data-theme='dark'] .step-dot.active .step-num {
  border-color: transparent;
  background: var(--accent-solid, #0A74DA);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
}

html[data-theme='dark'] .step-dot.completed {
  color: #cbd5e1;
}

html[data-theme='dark'] .step-dot.completed .step-num {
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.14);
  color: #93c5fd;
}

html[data-theme='dark'] .agent-close-btn {
  border: 0;
  background: none;
  color: #94a3b8;
}

html[data-theme='dark'] .agent-close-btn:hover {
  background: rgba(148, 163, 184, 0.16);
  color: #e2e8f0;
}

html[data-theme='dark'] .agent-toggle-group {
  background: #0f172a;
  border: 1px solid #334155;
}

html[data-theme='dark'] .agent-toggle {
  color: #94a3b8;
}

html[data-theme='dark'] .agent-toggle:hover {
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.12);
}

html[data-theme='dark'] .agent-toggle.active {
  background: rgba(96, 165, 250, 0.22);
  color: #eaf2ff;
  border: 1px solid #60a5fa;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.3);
}

html[data-theme='dark'] .agent-chip {
  background: #0f172a;
  border-color: #475569;
  color: #cbd5e1;
}

html[data-theme='dark'] .agent-chip:hover {
  border-color: #64748b;
}

html[data-theme='dark'] .agent-busy-overlay {
  background: rgba(15, 23, 42, 0.7);
}

html[data-theme='dark'] .agent-busy-content {
  background: #111827;
  border-color: #334155;
  box-shadow: 0 14px 36px rgba(2, 6, 23, 0.48);
}

html[data-theme='dark'] .agent-config-label,
html[data-theme='dark'] .agent-step-title,
html[data-theme='dark'] .agent-title,
html[data-theme='dark'] .agent-busy-title,
html[data-theme='dark'] .agent-busy-subtitle {
  color: #e5e7eb !important;
}

html[data-theme='dark'] .agent-config-hint {
  color: #93c5fd !important;
}

html[data-theme='dark'] .agent-filter-summary {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

html[data-theme='dark'] .agent-summary-fact {
  background: #1e293b;
  border-color: #475569;
}

html[data-theme='dark'] .agent-summary-fact-key,
html[data-theme='dark'] .agent-summary-plan-title {
  color: #94a3b8;
}

html[data-theme='dark'] .agent-summary-fact-val,
html[data-theme='dark'] .agent-summary-prompt,
html[data-theme='dark'] .agent-summary-step-text {
  color: #e2e8f0;
}

html[data-theme='dark'] .agent-summary-plan {
  border-top-color: #1e293b;
}

html[data-theme='dark'] .agent-summary-step-badge {
  background: #10312e;
  color: #5eead4;
}

html[data-theme='dark'] .agent-summary-note {
  color: #fcd34d;
}

html[data-theme='dark'] .agent-list-info,
html[data-theme='dark'] .agent-inline-loading {
  color: #cbd5e1;
}

html[data-theme='dark'] .agent-busy-row,
html[data-theme='dark'] .agent-skeleton-chip {
  background: linear-gradient(90deg, #243244 22%, #3b4f67 48%, #243244 74%);
  background-size: 240% 100%;
  animation: agentSkeletonShimmer 1.15s linear infinite;
}

html[data-theme='dark'] .agent-email-list {
  background: #0f172a;
  border-color: #475569;
}

html[data-theme='dark'] .agent-selection-toolbar {
  background: none;
  border-bottom-color: #334155;
}

html[data-theme='dark'] .agent-selection-count {
  color: #e2e8f0;
}

html[data-theme='dark'] .agent-select-btn {
  background: none;
  border: 0;
  color: #93c5fd;
  box-shadow: none;
}

html[data-theme='dark'] .agent-select-btn:hover {
  background: none;
  text-decoration: underline;
}

html[data-theme='dark'] .agent-select-btn.is-active {
  background: none;
  color: #dbeafe;
  text-decoration: underline;
}

html[data-theme='dark'] .agent-list-item {
  border-bottom-color: rgba(148, 163, 184, 0.26);
}

html[data-theme='dark'] .agent-list-item.selected {
  background: rgba(59, 130, 246, 0.22);
}

/* Opaque, not rgba: this header is sticky and rows pass behind it. #10312e is that old
   rgba(15,118,110,0.28) flattened onto the list's own background. */
html[data-theme='dark'] .agent-list-step {
  color: #5eead4;
  background: #10312e;
  border-bottom-color: rgba(94, 234, 212, 0.25);
  box-shadow: 0 2px 8px rgba(2, 6, 23, 0.55);
}

html[data-theme='dark'] .agent-list-step-count {
  color: #94a3b8;
}

html[data-theme='dark'] .agent-list-item:hover {
  background: rgba(148, 163, 184, 0.08);
}

html[data-theme='dark'] .agent-list-item.selected:hover {
  background: rgba(59, 130, 246, 0.32);
}

html[data-theme='dark'] .agent-list-num {
  background: rgba(59, 130, 246, 0.2);
  color: #bfdbfe;
}

html[data-theme='dark'] .agent-list-subject {
  color: #f8fafc;
}

html[data-theme='dark'] .agent-list-meta,
html[data-theme='dark'] .agent-list-date {
  color: #cbd5e1;
}

html[data-theme='dark'] .agent-list-from {
  color: #e2e8f0;
}

html[data-theme='dark'] .agent-btn.secondary {
  background: #e5e7eb;
  color: #475569;
  border-color: #cbd5e1;
}

html[data-theme='dark'] .agent-btn.secondary:hover {
  background: #cbd5e1;
}

html[data-theme='dark'] .agent-prompt-input {
  background: #0f172a !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc;
  caret-color: #93c5fd;
  border-color: #475569 !important;
}

html[data-theme='dark'] .agent-prompt-input::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8;
}

html[data-theme='dark'] .agent-prompt-input:focus {
  background: #111827 !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
}

html[data-theme='dark'] .agent-prompt-guide-summary {
  color: #93c5fd;
}

html[data-theme='dark'] .agent-prompt-guide-body {
  background: #0f172a;
  border-color: #334155;
}

html[data-theme='dark'] .agent-prompt-guide-lead,
html[data-theme='dark'] .agent-prompt-guide-foot {
  color: #94a3b8;
}

html[data-theme='dark'] .agent-prompt-guide-foot {
  border-top-color: #1e293b;
}

html[data-theme='dark'] .agent-prompt-eg {
  background: #1e293b;
  border-color: #475569;
  color: #e2e8f0;
}

html[data-theme='dark'] .agent-prompt-eg:hover {
  border-color: #93c5fd;
  color: #93c5fd;
}

html[data-theme='dark'] .filter-toggle,
html[data-theme='dark'] .gmail-pagination .pagination-arrow:hover:not(.disabled),
html[data-theme='dark'] .sidebar .tab:hover,
html[data-theme='dark'] .sidebar-label-menu-item:hover {
  background: rgba(148, 163, 184, 0.12) !important;
}

html[data-theme='dark'] .filter-btn.active {
  background: #1e293b;
  color: #e5e7eb;
}

/* Category filter chips. Both states, both themes, all of it here: static/js/inbox.js only
   toggles .is-active, so a Light/Dark switch repaints the panel without it being re-rendered. */
.category-filter-chip {
  padding: 6px 14px;
  border: 1px solid #d1d9e6;
  border-radius: 16px;
  background: #eef2f7;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.category-filter-chip.is-active {
  border: 2px solid #3b82f6;
  background: #ffffff;
  color: #1e40af;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}

html[data-theme='dark'] .category-filter-chip.is-active {
  border: 2px solid #93c5fd;
  background: #1e293b;
  color: #dbeafe;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.25);
}

#categoriesPanel {
  background: linear-gradient(180deg, #f8fbff 0%, #edf2f8 100%);
  border-bottom: 1px solid #d6deea;
}

html[data-theme='dark'] #categoriesPanel {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-bottom: 1px solid #334155;
}

html[data-theme='dark'] .category-filter-chip {
  border: 1px solid #475569;
  background: #334155;
  color: #e2e8f0;
}

.category-filter-chip:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.category-filter-chip:active {
  transform: scale(0.98);
}

html[data-theme='dark'] .search-options-btn,
html[data-theme='dark'] .select-dropdown-btn,
html[data-theme='dark'] .row-action-btn,
html[data-theme='dark'] .cmp-icon {
  color: #cbd5e1;
}

html[data-theme='dark'] .header-search {
  background: #1e293b;
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
}

html[data-theme='dark'] .header-search:focus-within {
  background: #0f172a;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

html[data-theme='dark'] .search-input::placeholder {
  color: #94a3b8;
}

html[data-theme='dark'] .header-search .search-input {
  background: transparent;
}

html[data-theme='dark'] .search-options-btn:hover {
  background: rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
}

html[data-theme='dark'] .search-options-btn.active,
html[data-theme='dark'] .search-options-btn.has-filters {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}

html[data-theme='dark'] .sidebar-label-color-swatch {
  border-color: rgba(148, 163, 184, 0.45);
}

html[data-theme='dark'] .sidebar-label-color-swatch.selected {
  box-shadow: 0 0 0 2px #111827, 0 0 0 4px #60a5fa;
}

html[data-theme='dark'] .label-color-preview-label,
html[data-theme='dark'] .label-color-input-grid label {
  color: #cbd5e1;
}

html[data-theme='dark'] .label-color-input-grid input[type="color"] {
  border-color: #475569;
  background: #0f172a;
}

html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-actions .icon-btn,
html[data-theme='dark'] .email-detail-page .email-toolbar .icon-btn {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.45);
}

html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-actions .icon-btn:hover,
html[data-theme='dark'] .email-detail-page .email-toolbar .icon-btn:hover {
  background: rgba(96, 165, 250, 0.2) !important;
  border-color: #60a5fa !important;
  color: #f8fafc !important;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.45) !important;
}

html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-more-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-more-btn:hover {
  background: rgba(96, 165, 250, 0.2) !important;
  border-color: #60a5fa !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-more-menu {
  background: #111827;
  border-color: #334155;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.5);
}

html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-more-item {
  color: #e2e8f0;
}

html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-more-item:hover {
  background: rgba(96, 165, 250, 0.2) !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .sidebar-create-label-tab {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #93c5fd !important;
}

html[data-theme='dark'] .sidebar-create-label-tab:hover {
  background: #273449 !important;
  border-color: #475569 !important;
  color: #bfdbfe !important;
}

html[data-theme='dark'] a {
  color: #93c5fd;
}

html[data-theme='dark'] .writing-assistant-tooltip {
  background: #020617;
  border-color: rgba(71, 85, 105, 0.65);
}

/* Settings: AI Writing Style panel dark-mode contrast fixes */
html[data-theme='dark'] #ai-settings-tab > p {
  color: #cbd5e1 !important;
}

html[data-theme='dark'] #ai-settings-tab > div {
  background: linear-gradient(145deg, #0f172a, #111827) !important;
  border-color: #334155 !important;
  box-shadow: 0 14px 30px -20px rgba(2, 6, 23, 0.75) !important;
}

html[data-theme='dark'] #ai-settings-tab strong,
html[data-theme='dark'] #ai-settings-tab p,
html[data-theme='dark'] #status-ai-style {
  color: #e2e8f0 !important;
}

html[data-theme='dark'] #ai-style-profile-editor {
  background: #020617 !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
  box-shadow: inset 0 1px 2px rgba(2, 6, 23, 0.75) !important;
}

/* Email detail: dark-mode fixes for response + notes panels */
html[data-theme='dark'] .response-box h3,
html[data-theme='dark'] .response-box p,
html[data-theme='dark'] .response-box pre,
html[data-theme='dark'] .response-box div {
  color: #e2e8f0 !important;
}

html[data-theme='dark'] #response-content,
html[data-theme='dark'] #forward-content,
html[data-theme='dark'] #note-content {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}

html[data-theme='dark'] #response-content:focus,
html[data-theme='dark'] #forward-content:focus,
html[data-theme='dark'] #note-content:focus {
  background: #0b1f1a !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35) !important;
}

html[data-theme='dark'] #note-section {
  background: #111827 !important;
  border-color: #4c1d95 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.45) !important;
}

html[data-theme='dark'] #note-section h3 {
  color: #c4b5fd !important;
}

html[data-theme='dark'] #note-title,
html[data-theme='dark'] #note-revise-instruction {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

html[data-theme='dark'] #note-title::placeholder,
html[data-theme='dark'] #note-revise-instruction::placeholder,
html[data-theme='dark'] #revise-instruction::placeholder {
  color: #94a3b8 !important;
}

html[data-theme='dark'] #note-section #btn-generate-note,
html[data-theme='dark'] #note-section .btn-send-response,
html[data-theme='dark'] #note-section .btn-revise {
  background: #1f1a3a !important;
  color: #ddd6fe !important;
  border-color: #6d28d9 !important;
}

html[data-theme='dark'] #note-section #btn-generate-note:hover,
html[data-theme='dark'] #note-section .btn-send-response:hover,
html[data-theme='dark'] #note-section .btn-revise:hover {
  background: #2e2260 !important;
}

/* Email detail: dark-mode fixes for summary + notification panels */
html[data-theme='dark'] #summary-section {
  background: #111827 !important;
  border-color: #4c1d95 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.45) !important;
}

html[data-theme='dark'] #summary-section h3,
html[data-theme='dark'] #summary-section p,
html[data-theme='dark'] #summary-section #summary-text {
  color: #ddd6fe !important;
}

html[data-theme='dark'] #summary-section .btn-summary-notes {
  background: #1f1a3a !important;
  color: #ddd6fe !important;
  border-color: #6d28d9 !important;
}

html[data-theme='dark'] #summary-section .btn-summary-notes:hover {
  background: #2e2260 !important;
  border-color: #8b5cf6 !important;
}

html[data-theme='dark'] #summary-section .btn-summary-notify {
  background: #082f35 !important;
  color: #a5f3fc !important;
  border-color: #0e7490 !important;
}

html[data-theme='dark'] #summary-section .btn-summary-notify:hover,
html[data-theme='dark'] #summary-section .btn-summary-notify:focus,
html[data-theme='dark'] #summary-section .btn-summary-notify:active {
  background: #0f3f48 !important;
  border-color: #0891b2 !important;
  color: #cffafe !important;
}

html[data-theme='dark'] #notify-section {
  background: #111827 !important;
  border-color: #0e7490 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.45) !important;
}

html[data-theme='dark'] #notify-section h3,
html[data-theme='dark'] #notify-section label,
html[data-theme='dark'] #notify-section #notify-loading,
html[data-theme='dark'] #notify-section #notify-content,
html[data-theme='dark'] #notify-section #notify-content div {
  color: #a5f3fc !important;
}

html[data-theme='dark'] #notify-section #notify-revise-instruction,
html[data-theme='dark'] #notify-section #notify-message {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}

html[data-theme='dark'] #notify-section #notify-revise-instruction::placeholder {
  color: #94a3b8 !important;
}

html[data-theme='dark'] #notify-section #notify-message:focus {
  border-color: #0ea5b7 !important;
  box-shadow: 0 0 0 2px rgba(14, 165, 183, 0.35) !important;
}

html[data-theme='dark'] #notify-section #btn-generate-notify,
html[data-theme='dark'] #notify-section #btn-send-notify,
html[data-theme='dark'] #notify-section .btn-send-response,
html[data-theme='dark'] #notify-section .btn-revise {
  background: #082f35 !important;
  color: #a5f3fc !important;
  border-color: #0e7490 !important;
}

html[data-theme='dark'] #notify-section #btn-generate-notify:hover,
html[data-theme='dark'] #notify-section #btn-send-notify:hover,
html[data-theme='dark'] #notify-section .btn-send-response:hover,
html[data-theme='dark'] #notify-section .btn-revise:hover {
  background: #0f3f48 !important;
  border-color: #0891b2 !important;
}

/* Premium unified action bars: executive minimal with emerald + gold accents */
:root {
  --premium-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --premium-surface: #ffffff;
  --premium-surface-soft: #f8faf8;
  --premium-border: #d9e6de;
  --premium-text: #1b2b22;
  --premium-muted: #4f655a;
  --premium-emerald: #0f766e;
  --premium-emerald-soft: #e6f6f2;
  --premium-gold: #b07a1a;
  --premium-gold-soft: #fff7e6;
  --premium-focus: rgba(15, 118, 110, 0.22);
  --premium-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
}

.action-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
}

.email-detail-page .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hamburger-container .header-left .summarize-btn,
.hamburger-container .header-left .btn-generate,
.hamburger-container .header-left .btn-generate-more,
.hamburger-container .header-left .btn-notes,
.hamburger-container .header-left .btn-calendar,
.hamburger-container .header-left .btn-notify,
.hamburger-container .header-left .btn-include-doc-head {
  height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 14px !important;
  border: 1px solid var(--premium-border) !important;
  background: linear-gradient(180deg, var(--premium-surface), var(--premium-surface-soft)) !important;
  color: var(--premium-text) !important;
  font-family: var(--premium-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 6px rgba(15, 23, 42, 0.05) !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.hamburger-container .header-left .summarize-btn:hover,
.hamburger-container .header-left .btn-generate:hover,
.hamburger-container .header-left .btn-notes:hover,
.hamburger-container .header-left .btn-calendar:hover,
.hamburger-container .header-left .btn-notify:hover,
.hamburger-container .header-left .btn-include-doc-head:hover {
  transform: translateY(-1px) !important;
  border-color: #c4d7cc !important;
  background: linear-gradient(180deg, #ffffff, #f2f7f4) !important;
  box-shadow: var(--premium-shadow) !important;
}

.hamburger-container .header-left .summarize-btn .icon,
.hamburger-container .header-left .btn-generate .icon,
.hamburger-container .header-left .btn-notes .icon,
.hamburger-container .header-left .btn-calendar .icon,
.hamburger-container .header-left .btn-notify .icon,
.hamburger-container .header-left .btn-include-doc-head .icon {
  color: var(--premium-muted) !important;
  display: inline-flex !important;
}

.hamburger-container .header-left .btn-generate .icon {
  color: #2d6b60 !important;
}

.hamburger-container .header-left .btn-calendar .icon {
  color: #8f6b1f !important;
}

.hamburger-container .header-left .btn-notify .icon,
.hamburger-container .header-left .btn-notes .icon,
.hamburger-container .header-left .summarize-btn .icon {
  color: #3f5b4f !important;
}

.hamburger-container .header-left .summarize-btn:focus-visible,
.hamburger-container .header-left .btn-generate:focus-visible,
.hamburger-container .header-left .btn-notes:focus-visible,
.hamburger-container .header-left .btn-calendar:focus-visible,
.hamburger-container .header-left .btn-notify:focus-visible,
.hamburger-container .header-left .btn-include-doc-head:focus-visible,
.email-detail-page .email-toolbar .toolbar-actions .icon-btn:focus-visible,
.email-detail-page .email-toolbar .toolbar-more-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--premium-focus) !important;
}

.email-detail-page .email-toolbar {
  border-bottom: 1px solid #dde8e1 !important;
  padding: 10px 0 14px 0 !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

.email-detail-page .email-toolbar .toolbar-actions {
  gap: 10px !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
}

.email-detail-page .email-toolbar .toolbar-more-wrap {
  margin-left: auto !important;
  gap: 6px;
}

.email-detail-page .email-toolbar .toolbar-actions .icon-btn,
.email-detail-page .email-toolbar .icon-btn {
  all: unset;
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--premium-border);
  background: linear-gradient(180deg, var(--premium-surface), var(--premium-surface-soft));
  color: var(--premium-text);
  font-family: var(--premium-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 2px 6px rgba(15, 23, 42, 0.05);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.email-detail-page .email-toolbar .toolbar-actions .icon-btn .btn-icon,
.email-detail-page .email-toolbar .icon-btn .btn-icon {
  color: var(--premium-muted);
}

.email-detail-page .email-toolbar .toolbar-actions .icon-btn:hover,
.email-detail-page .email-toolbar .icon-btn:hover {
  background: linear-gradient(180deg, #ffffff, #f2f7f4) !important;
  border-color: #c4d7cc !important;
  box-shadow: var(--premium-shadow) !important;
  transform: translateY(-1px) !important;
}

.email-detail-page .email-toolbar .toolbar-more-btn {
  border: 1px solid var(--premium-border) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, var(--premium-surface), var(--premium-surface-soft)) !important;
  color: var(--premium-text) !important;
}

.email-detail-page .email-toolbar .toolbar-more-menu {
  border: 1px solid #d5e2d9 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14) !important;
}

.email-detail-page .email-toolbar .toolbar-more-item:hover {
  background: #f3f6f8 !important;
  color: var(--premium-text) !important;
}

.email-detail-page .email-toolbar .toolbar-actions .btn-spam,
.email-detail-page .email-toolbar .toolbar-actions .btn-trash,
.email-detail-page .email-toolbar .toolbar-actions .btn-block,
.email-detail-page .email-toolbar .toolbar-actions .btn-spam .btn-text,
.email-detail-page .email-toolbar .toolbar-actions .btn-trash .btn-text,
.email-detail-page .email-toolbar .toolbar-actions .btn-block .btn-text {
  color: var(--premium-text) !important;
}

.email-detail-page .email-toolbar .toolbar-actions .btn-spam .btn-icon,
.email-detail-page .email-toolbar .toolbar-actions .btn-trash .btn-icon,
.email-detail-page .email-toolbar .toolbar-actions .btn-block .btn-icon {
  color: var(--premium-muted) !important;
}

.email-detail-page .email-toolbar .toolbar-more-item .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--premium-muted);
}

.email-detail-page .email-toolbar .toolbar-more-item .menu-item-label {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (min-width: 901px) and (max-width: 1200px) {
  .hamburger-container .header-left .summarize-btn,
  .hamburger-container .header-left .btn-generate,
  .hamburger-container .header-left .btn-notes,
  .hamburger-container .header-left .btn-calendar,
  .hamburger-container .header-left .btn-notify,
  .hamburger-container .header-left .btn-include-doc-head {
    height: 38px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 900px) {
  .hamburger-container .header-left .summarize-btn,
  .hamburger-container .header-left .btn-generate,
  .hamburger-container .header-left .btn-notes,
  .hamburger-container .header-left .btn-calendar,
  .hamburger-container .header-left .btn-notify,
  .hamburger-container .header-left .btn-include-doc-head {
    height: 40px !important;
    min-width: 40px;
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }

  .hamburger-container .header-left .summarize-btn .text,
  .hamburger-container .header-left .btn-generate .text,
  .hamburger-container .header-left .btn-notes .text,
  .hamburger-container .header-left .btn-calendar .text,
  .hamburger-container .header-left .btn-notify .text,
  .hamburger-container .header-left .btn-include-doc-head .text {
    display: none !important;
  }

  .email-detail-page .email-toolbar .toolbar-actions {
    gap: 6px !important;
  }

  .email-detail-page .email-toolbar .toolbar-actions .icon-btn {
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }
}

html[data-theme='dark'] .hamburger-container .header-left .summarize-btn,
html[data-theme='dark'] .hamburger-container .header-left .btn-generate,
html[data-theme='dark'] .hamburger-container .header-left .btn-generate-more,
html[data-theme='dark'] .hamburger-container .header-left .btn-notes,
html[data-theme='dark'] .hamburger-container .header-left .btn-calendar,
html[data-theme='dark'] .hamburger-container .header-left .btn-notify,
html[data-theme='dark'] .hamburger-container .header-left .btn-include-doc-head,
html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-actions .icon-btn,
html[data-theme='dark'] .email-detail-page .email-toolbar .icon-btn,
html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-more-btn {
  background: linear-gradient(180deg, #1a2534, #111b29) !important;
  border-color: #30455a !important;
  color: #e2ece6 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 12px rgba(2, 6, 23, 0.35) !important;
}

html[data-theme='dark'] .hamburger-container .header-left .btn-generate .icon,
html[data-theme='dark'] .email-detail-page .email-toolbar .btn-next .btn-icon,
html[data-theme='dark'] .email-detail-page .email-toolbar .btn-archive .btn-icon,
html[data-theme='dark'] .email-detail-page .email-toolbar .btn-back .btn-icon,
html[data-theme='dark'] .email-detail-page .email-toolbar .btn-unread .btn-icon {
  color: #9fd8c9 !important;
}

html[data-theme='dark'] .hamburger-container .header-left .btn-calendar .icon,
html[data-theme='dark'] .email-detail-page .email-toolbar .btn-spam .btn-icon,
html[data-theme='dark'] .email-detail-page .email-toolbar .btn-trash .btn-icon,
html[data-theme='dark'] .email-detail-page .email-toolbar .btn-block .btn-icon {
  color: #9fd8c9 !important;
}

html[data-theme='dark'] .hamburger-container .header-left .summarize-btn .icon,
html[data-theme='dark'] .hamburger-container .header-left .btn-notes .icon,
html[data-theme='dark'] .hamburger-container .header-left .btn-notify .icon,
html[data-theme='dark'] .hamburger-container .header-left .summarize-btn .action-icon,
html[data-theme='dark'] .hamburger-container .header-left .btn-notes .action-icon,
html[data-theme='dark'] .hamburger-container .header-left .btn-notify .action-icon {
  color: #9fd8c9 !important;
}

html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-more-menu {
  background: #101a28 !important;
  border-color: #30455a !important;
}

html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-more-item:hover {
  background: rgba(148, 163, 184, 0.2) !important;
  color: #e2ece6 !important;
}

html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-more-item .btn-icon {
  color: #9fd8c9;
}

/* Dark mode readability guardrails for detail action buttons */
html[data-theme='dark'] .email-detail-page .email-toolbar .icon-btn,
html[data-theme='dark'] .email-detail-page .email-toolbar .icon-btn .btn-text,
html[data-theme='dark'] .email-detail-page .email-toolbar .icon-btn .btn-icon,
html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-more-btn,
html[data-theme='dark'] .hamburger-container .header-left .summarize-btn,
html[data-theme='dark'] .hamburger-container .header-left .btn-generate,
html[data-theme='dark'] .hamburger-container .header-left .btn-generate-more,
html[data-theme='dark'] .hamburger-container .header-left .btn-notes,
html[data-theme='dark'] .hamburger-container .header-left .btn-calendar,
html[data-theme='dark'] .hamburger-container .header-left .btn-notify,
html[data-theme='dark'] .hamburger-container .header-left .btn-include-doc-head {
  color: #e7eef8 !important;
  -webkit-text-fill-color: #e7eef8 !important;
}

html[data-theme='dark'] .email-detail-page .email-toolbar .icon-btn .btn-icon,
html[data-theme='dark'] .email-detail-page .email-toolbar .icon-btn .action-icon {
  color: #c9d8eb !important;
}

html[data-theme='dark'] .email-detail-page .email-toolbar .icon-btn:disabled,
html[data-theme='dark'] .email-detail-page .email-toolbar .toolbar-more-btn:disabled,
html[data-theme='dark'] .hamburger-container .header-left .summarize-btn:disabled,
html[data-theme='dark'] .hamburger-container .header-left .btn-generate:disabled,
html[data-theme='dark'] .hamburger-container .header-left .btn-notes:disabled,
html[data-theme='dark'] .hamburger-container .header-left .btn-calendar:disabled,
html[data-theme='dark'] .hamburger-container .header-left .btn-notify:disabled,
html[data-theme='dark'] .hamburger-container .header-left .btn-include-doc-head:disabled {
  background: linear-gradient(180deg, #172235, #0f1828) !important;
  border-color: #2b3f55 !important;
  color: #b6c6da !important;
  -webkit-text-fill-color: #b6c6da !important;
  opacity: 0.92 !important;
}

html[data-theme='dark'] .email-detail-page .email-toolbar .icon-btn:disabled .btn-icon,
html[data-theme='dark'] .email-detail-page .email-toolbar .icon-btn:disabled .action-icon {
  color: #9fb3cc !important;
}
/* ---------------------------------------------------------------------------
   In-place tab switching: brief feedback while the new list is fetched.
   Kept deliberately subtle - the swap is usually served from cache and lands
   in a few milliseconds, so a spinner would flash more than it would inform.
   --------------------------------------------------------------------------- */
body.inbox-swapping #emailTable {
  opacity: 0.55;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}

body.inbox-swapping .gmail-pagination {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  body.inbox-swapping #emailTable {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Gmail's "trimmed content" control. An expanded thread message shows only
   what that person wrote; the quoted reply chain sits behind this button.
   --------------------------------------------------------------------------- */
.thread-quote-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 18px;
  padding: 0 8px;
  margin: 8px 0 4px 0;
  border: none;
  border-radius: 9px;
  background: #e8eaed;
  cursor: pointer;
  transition: background 0.15s ease;
  vertical-align: middle;
}

.thread-quote-toggle:hover {
  background: #dadce0;
}

.thread-quote-toggle span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #5f6368;
  display: block;
}

.thread-quote-toggle.open {
  background: #d2e3fc;
}

.thread-quoted {
  margin-top: 4px;
  border-left: 2px solid #dadce0;
  padding-left: 12px;
}

.thread-quoted-text {
  color: #5f6368 !important;
  background: #ffffff !important;
  padding: 14px 16px !important;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  max-height: none !important;
  overflow: visible !important;
}

html[data-theme='dark'] .email-detail-page .thread-quote-toggle {
  background: #2a3444 !important;
}

html[data-theme='dark'] .email-detail-page .thread-quote-toggle:hover {
  background: #35415a !important;
}

html[data-theme='dark'] .email-detail-page .thread-quote-toggle span {
  background: #9aa0a6 !important;
}

html[data-theme='dark'] .email-detail-page .thread-quote-toggle.open {
  background: #1f3a5f !important;
}

html[data-theme='dark'] .email-detail-page .thread-quoted {
  border-left-color: #2a3444 !important;
}

/* Quoted history keeps the same white page as every other message body.
   A duplicate of this rule used to set `background: transparent`, and being
   later in the file it won - which is why some expanded quotes were black. */
html[data-theme='dark'] .email-detail-page .thread-quoted-text {
  color: #5f6368 !important;
  background: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   Gmail-style attachment cards: a grid of preview tiles with a file-type badge,
   the name, size, and hover actions - rather than a row of text pills.
   --------------------------------------------------------------------------- */
.email-download-attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
}

.email-att-card {
  position: relative;
  width: 200px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.email-att-card:hover {
  border-color: #c6c9cd;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px rgba(60, 64, 67, 0.15);
}

/* Preview area. Gmail renders the first page here and so do we, for the two kinds a browser
   can draw: an image is itself, a PDF is its first page (static/js/attachment_thumbs.js).
   Everything else keeps the tinted sheet below, which is what used to be a flat word. */
.email-att-card-preview {
  width: 100%;
  height: 132px;
  border: none;
  border-bottom: 1px solid #e8eaed;
  background: #f8f9fa;
  cursor: pointer;
  display: block;
  padding: 0;
  overflow: hidden;
}

.email-att-card-preview:hover {
  background: #f1f3f4;
}

.email-att-thumb {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* The real picture, once it is painted. It sits at the TOP of the box, the way a page
   thumbnail does - a document is read from its first line, not from its middle. */
.email-att-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #ffffff;
}

/* An image thumbnail is the whole picture, not a crop: a photo cropped to a letterbox is
   usually unrecognisable, while a page cropped to its top is exactly what you want. */
.email-att-card.is-image .email-att-thumb-img {
  object-fit: contain;
  object-position: center;
  background: #f8f9fa;
}

/* Once a real preview is in, the glyph underneath it goes. */
.email-att-thumb.has-thumb .email-att-glyph {
  opacity: 0;
}

.email-att-glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #9aa0a6;
  transition: opacity 0.2s ease;
}

.email-att-glyph svg {
  width: 40px;
  height: 50px;
}

.email-att-glyph-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: inherit;
}

.email-att-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #ffffff;
  min-height: 40px;
}

.email-att-card-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background: #5f6368;
  border-radius: 3px;
  padding: 4px 5px;
  letter-spacing: 0.03em;
}

.email-att-card-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.email-att-card-name {
  font-size: 12.5px;
  color: #202124;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-att-card-size {
  font-size: 11px;
  color: #5f6368;
}

/* Actions stay out of the way until the card is hovered, like Gmail - and they sit ON the
   preview rather than in the foot. Sharing that row with the filename is what squeezed a
   name down to "MU…": two 34px buttons out of a 172px card left the name about 60px. */
.email-att-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 1;
}

.email-att-card:hover .email-att-card-actions,
.email-att-card:focus-within .email-att-card-actions {
  opacity: 1;
}

.email-att-card .email-att-action-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(60, 64, 67, 0.16);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.22);
  color: #3c4043;
  backdrop-filter: blur(2px);
}

.email-att-card .email-att-action-btn:hover {
  background: #ffffff;
  border-color: rgba(60, 64, 67, 0.3);
}

/* The foot is the filename's now, so it gets the full width of the card. */
.email-att-card-foot .email-att-card-meta {
  overflow: hidden;
}

/* File-type colours, matching the convention Gmail uses. */
.email-att-card-badge.is-pdf   { background: #ea4335; }
.email-att-card-badge.is-doc   { background: #4285f4; }
.email-att-card-badge.is-sheet { background: #34a853; }
.email-att-card-badge.is-slide { background: #fbbc04; color: #3c4043; }
.email-att-card-badge.is-image { background: #a142f4; }
.email-att-card-badge.is-zip   { background: #5f6368; }

.email-att-card.is-pdf   .email-att-glyph { color: #ea4335; }
.email-att-card.is-doc   .email-att-glyph { color: #4285f4; }
.email-att-card.is-sheet .email-att-glyph { color: #34a853; }
.email-att-card.is-slide .email-att-glyph { color: #f9ab00; }
.email-att-card.is-image .email-att-glyph { color: #a142f4; }
.email-att-card.is-zip   .email-att-glyph { color: #5f6368; }

/* The card face stays light in dark mode, matching the message bodies. */
html[data-theme='dark'] .email-detail-page .email-att-card {
  border-color: #2a3444 !important;
  background: #ffffff !important;
}

html[data-theme='dark'] .email-detail-page .email-att-card-foot {
  background: #ffffff !important;
}

html[data-theme='dark'] .email-detail-page .email-att-card-name {
  color: #202124 !important;
}

/* Loading state: only shown when the mail really has attachments, and shaped
   like the cards that are coming so the wait does not look like a dead end. */
#email-attachments-loading {
  margin: 8px 0 12px 0;
}

.email-att-skeleton-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #5f6368;
  margin-bottom: 8px;
}

.email-att-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid #dadce0;
  border-top-color: #5f6368;
  border-radius: 50%;
  animation: attSpin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes attSpin { to { transform: rotate(360deg); } }

.email-att-skeleton-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.email-att-skeleton-card {
  width: 172px;
  height: 136px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Top block stands in for the preview, the bar for the filename row. */
.email-att-skeleton-card > span:first-child {
  height: 96px;
  border-bottom: 1px solid #e8eaed;
}

.email-att-skeleton-card > span:last-child {
  height: 12px;
  margin: 13px 10px;
  border-radius: 3px;
}

.email-att-skeleton-card > span {
  display: block;
  background: linear-gradient(90deg, #f1f3f4 25%, #e8eaed 37%, #f1f3f4 63%);
  background-size: 400% 100%;
  animation: attShimmer 1.3s ease-in-out infinite;
}

@keyframes attShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .email-att-spinner,
  .email-att-skeleton-card > span { animation: none; }
}

html[data-theme='dark'] .email-detail-page .email-att-skeleton-card {
  background: #ffffff !important;
  border-color: #2a3444 !important;
}

html[data-theme='dark'] .email-detail-page .email-att-skeleton-head {
  color: #9aa0a6 !important;
}

/* ============================================================================
   SETTINGS PAGE - templates/settings.html + static/js/settings.js
   ----------------------------------------------------------------------------
   Every colour here comes from a --set-* token declared once for light and once
   for dark. That is the whole dark-mode story for this page: no !important, no
   [style*="color:#0f172a"] rescue selectors, no per-element overrides. Add a
   colour by adding a token, never by hard-coding a hex in a rule below.
   ========================================================================== */

/* The tokens hang off .settings-shell, the outermost element of every page in this
   area (Settings, Connections, Shortcuts, Profile), so a new page in it needs no new
   selector here - just the class. */
.settings-shell {
  --set-page: transparent;
  --set-panel: #ffffff;
  --set-panel-soft: #f8fafc;
  --set-line: #e2e8f0;
  --set-line-strong: #cbd5e1;
  --set-text: #0f172a;
  --set-text-soft: #475569;
  --set-muted: #64748b;
  --set-accent: #0A74DA;
  --set-accent-hover: #0866C2;
  --set-accent-soft: #eef2ff;
  --set-accent-line: #c7d2fe;
  --set-on-accent: #ffffff;
  --set-danger: #b91c1c;
  --set-danger-soft: #fef2f2;
  --set-danger-line: #fecaca;
  --set-ok: #047857;
  --set-warn: #b45309;
  --set-warn-soft: #fef3c7;
  --set-shadow: 0 10px 30px -24px rgba(15, 23, 42, 0.55);
  --set-radius: 14px;
  --set-radius-sm: 10px;

  /* One chevron for every arrow on these pages: the order buttons, the row expander, the
     "Jump to" caret, the guide toggles and the dropdowns. It replaced the font's solid
     triangles (U+25B2 and friends), which sat at a different height and weight in every font
     and read as a different icon set beside the app's stroked SVG icons.

     Two forms of the same path, because a caret and a <select> need different things:
       --set-chevron-mask  painted through `mask`, so it takes currentColor and needs no
                           second copy for the dark theme. Use it on anything that can be
                           given a colour.
       --set-chevron-bg    a background-image, for a <select>, whose arrow cannot be masked
                           without masking its text too. Its stroke colour is baked in, so the
                           dark block below restates it. */
  --set-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --set-chevron-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* The rendered Writing Style document (static/js/settings.js initAiEditor). It is built
     once on load, so its colours have to be tokens: read from the theme at build time they
     stayed frozen in whichever theme the page loaded in, and a Light/Dark switch left the
     panel unreadable until a reload. */
  --set-doc-text: #1e293b;
  --set-doc-strong: #0f172a;
  --set-doc-line: #e2e8f0;
  --set-doc-accent: #0A74DA;
  /* Accent text small enough to sit ON --set-doc-accent-bg. The plain accent is 4.17:1 there,
     under the 4.5:1 AA floor for the heading number; this reads 5.12:1. */
  --set-doc-accent-strong: #0866C2;
  --set-doc-accent-bg: rgba(10, 116, 218, 0.08);
  --set-doc-accent-line: rgba(10, 116, 218, 0.2);
  --set-doc-chip-line: rgba(10, 116, 218, 0.25);
  --set-doc-head-bg: #f1f5f9;
  --set-doc-crit: #b45309;
  --set-doc-crit-bg: #fef3c7;
  --set-doc-crit-line: #fde68a;
  --set-doc-th-bg: #f1f5f9;
  --set-doc-row-alt: rgba(0, 0, 0, 0.015);
  --set-doc-bullet: #94a3b8;
}

html[data-theme='dark'] .settings-shell {
  --set-panel: #111827;
  --set-panel-soft: #0f172a;
  --set-line: #334155;
  --set-line-strong: #475569;
  --set-text: #e5e7eb;
  --set-text-soft: #cbd5e1;
  --set-muted: #94a3b8;
  --set-accent: #a5b4fc;
  --set-accent-hover: #c7d2fe;
  --set-accent-soft: #1c233d;
  --set-accent-line: #3d4770;
  --set-on-accent: #0b1220;
  --set-danger: #fca5a5;
  --set-danger-soft: #2a1517;
  --set-danger-line: #7f1d1d;
  --set-ok: #34d399;
  --set-warn: #fbbf24;
  --set-warn-soft: #3a2a06;
  --set-shadow: 0 18px 40px rgba(2, 6, 23, 0.5);

  /* The masked chevron takes currentColor, so only the <select> one needs restating here. */
  --set-chevron-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  --set-doc-text: #e2e8f0;
  --set-doc-strong: #f8fafc;
  --set-doc-line: rgba(148, 163, 184, 0.15);
  --set-doc-accent: #a5b4fc;
  --set-doc-accent-strong: #a5b4fc;      /* already 7.31:1 on the dark chip */
  --set-doc-accent-bg: rgba(99, 102, 241, 0.18);
  --set-doc-accent-line: rgba(99, 102, 241, 0.25);
  --set-doc-chip-line: rgba(99, 102, 241, 0.3);
  --set-doc-head-bg: rgba(99, 102, 241, 0.08);
  --set-doc-crit: #fbbf24;
  --set-doc-crit-bg: rgba(245, 158, 11, 0.12);
  --set-doc-crit-line: rgba(245, 158, 11, 0.3);
  --set-doc-th-bg: rgba(15, 23, 42, 0.8);
  --set-doc-row-alt: rgba(255, 255, 255, 0.02);
  --set-doc-bullet: #64748b;
}

/* ---------------------------------------------------------------- the shell */
.settings-shell {
  max-width: 1000px;
  margin: 0 auto 48px;
  color: var(--set-text);
  font-size: 14px;
}

.settings-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}

.settings-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--set-text);
}

.settings-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--set-muted);
  max-width: 62ch;
}

.settings-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--set-line);
  border-radius: 999px;
  background: var(--set-panel);
  color: var(--set-text-soft);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.settings-back:hover {
  background: var(--set-accent-soft);
  border-color: var(--set-accent-line);
  color: var(--set-accent);
}

/* ------------------------------------------------- in-page section switcher */
/* Visible on narrow screens; on desktop the sidebar rail owns the navigation. */
.settings-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--set-line);
}

.settings-tabs::-webkit-scrollbar {
  display: none;
}

.settings-tab-btn {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 10px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--set-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s, border-color 0.18s;
}

.settings-tab-btn:hover {
  color: var(--set-text-soft);
}

.settings-tab-btn.active-tab {
  color: var(--set-accent);
  border-bottom-color: var(--set-accent);
}

.settings-tab-content {
  display: none;
}

.settings-tab-content.is-active {
  display: block;
}

/* ---------------------------------------------------------------- the cards */
.settings-card {
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius);
  background: var(--set-panel);
  box-shadow: var(--set-shadow);
}

.settings-card:last-child {
  margin-bottom: 0;
}

/* A section whose card only WRAPPED other boxes (the Writing Style editor, the category and
   detection rule cards, the Daily report fieldsets, the automation cards, the privacy fieldsets)
   drew a box around a box. This is that card with its own frame taken away:
   the content lines up with the page title instead of being inset by 20px, and every box you can
   see is a real one. The token values are untouched, so both themes follow.
   Integrations keeps its frames on purpose - there the cards are four sibling provider groups,
   not a wrapper, and each one IS the only box around its own controls. */
.settings-card.is-bare {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.settings-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-card-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--set-text);
}

.settings-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  opacity: 0.8;
}

.settings-card-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-card-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--set-muted);
}

/* ---------------------------------------------- the Gmail app-password guide */
/* Shared between Connections and Signup (templates/_gmail_app_password_guide.html);
   folded open by default since a first-time Gmail connect needs every step. */
.gmail-guide {
  margin: 10px 0 0;
  padding: 4px 16px;
  border: 1px solid var(--set-line);
  border-left: 3px solid var(--set-accent-line);
  border-radius: var(--set-radius-sm);
  background: var(--set-panel-soft);
}

.gmail-guide summary {
  padding: 10px 0;
  color: var(--set-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.gmail-guide summary::-webkit-details-marker {
  display: none;
}

.gmail-guide summary::after {
  content: " ▾";
  font-size: 10px;
}

.gmail-guide[open] summary::after {
  content: " ▴";
}

.gmail-guide ol {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--set-text-soft);
}

.gmail-guide ol li + li {
  margin-top: 6px;
}

/* ------------------------------------------------- the "how this works" list */
/* The old version stacked five 12.5px sentences inside one box, which read as a
   wall. Term and explanation now sit in their own columns with a rule between
   the rows, so the eye can scan the left edge - and the whole thing is folded
   away behind a disclosure, so the rule cards are what the page opens on. */
.settings-guide-toggle {
  margin-top: 10px;
}

.settings-guide-toggle > summary {
  display: inline-block;
  padding: 2px 0;
  color: var(--set-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.settings-guide-toggle > summary::-webkit-details-marker {
  display: none;
}

.settings-guide-toggle > summary:focus:not(:focus-visible) {
  outline: none;                 /* a mouse click left a focus box that read as an input */
}

.settings-guide-toggle > summary:focus-visible {
  outline: 2px solid var(--set-accent-line);
  outline-offset: 3px;
  border-radius: 6px;
}

/* The same chevron as everything else on the page, turned over when the guide is open. */
.settings-guide-toggle > summary::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 5px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: var(--set-chevron-mask) center / 11px 11px no-repeat;
  mask: var(--set-chevron-mask) center / 11px 11px no-repeat;
  transition: transform 0.18s ease;
}

.settings-guide-toggle[open] > summary::after {
  transform: rotate(180deg);
}

/* A plain two-column list, no panel: the boxed, accent-barred version read as a
   callout and outweighed the rule cards it explains. */
.settings-guide {
  margin: 8px 0 0;
  max-width: 640px;
}

.settings-guide-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2px 12px;
  padding: 3px 0;
}

.settings-guide dt {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--set-text);
}

.settings-guide dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--set-muted);
}

.settings-guide-foot {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--set-muted);
}

/* No detections saved: one line and the button that puts the built-ins back. */
.detection-empty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 14px 0;
}

.detection-empty .settings-card-note {
  margin: 0;
}

/* ------------------------------------------------- a read-only list of facts */
.settings-facts {
  margin: 14px 0 0;
}

.settings-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--set-line);
}

.settings-fact:first-child {
  border-top: none;
}

.settings-fact dt {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--set-text-soft);
}

.settings-fact dd {
  margin: 0;
  font-size: 14px;
  color: var(--set-text);
  text-align: right;
  word-break: break-word;
}

/* ------------------------------------ plans page (templates/plans.html + js/plans.js) */
/* Three stacked cards and one comparison table. Same rule as the rest of the shell: every colour
   is a --set-* token, so the dark theme comes for free. No card is tinted or ribboned - they are
   deliberately identical chrome, so the eye compares the numbers rather than the decoration. */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.plans-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 18px 18px;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius);
  background: var(--set-panel);
  box-shadow: var(--set-shadow);
  color: var(--set-text);
}

.plans-card.is-current {
  border-color: var(--set-accent);
  box-shadow: 0 0 0 2px var(--set-accent-soft);
}

.plans-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.plans-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.plans-price-amount {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plans-price-period {
  font-size: 13px;
  color: var(--set-muted);
}

.plans-pitch {
  margin: 0;
  min-height: 2.6em;
  font-size: 13px;
  color: var(--set-text-soft);
}

/* "Everything in Free, and:" - the line that lets a card list only its differences. */
.plans-inherits {
  margin: 2px 0 -2px;
  padding-top: 10px;
  border-top: 1px solid var(--set-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--set-text);
}

.plans-highlights {
  margin: 0;
  padding: 0 0 0 18px;
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.5;
  color: var(--set-text);
}

.plans-highlights li + li {
  margin-top: 4px;
}

.plans-current-badge {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--set-accent-line);
  background: var(--set-panel-soft);
  color: var(--set-accent);
  font-size: 12px;
  font-weight: 700;
}

.plans-cta {
  align-self: stretch;
  text-align: center;
}

.plans-change-panel {
  margin: 4px 0 12px;
  border-color: var(--set-accent);
}

.plans-change-line {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--set-text);
}

.plans-change-line strong {
  font-weight: 700;
}

.plans-change-confirm {
  background: var(--set-accent);
  color: #fff;
  border-color: var(--set-accent);
}

.plans-payments-note {
  margin-top: 10px;
}

/* ── The compare table ── `.usage-table` / `.usage-table-wrap` had NO rules at all, so this
   rendered with browser defaults: centred <th>s over left-aligned values, no rules between rows
   and no padding, which is what made a 20-row matrix unreadable. Everything here is left-aligned,
   every row has a hairline, and alternate rows are tinted so the eye can track one feature across
   four columns. Only plans.html uses these classes. */
.usage-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius-sm);
  -webkit-overflow-scrolling: touch;
}

.usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.45;
}

.usage-table thead th {
  padding: 10px 14px;
  text-align: left;
  vertical-align: bottom;
  background: var(--set-panel-soft);
  border-bottom: 1px solid var(--set-line);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--set-muted);
  white-space: nowrap;
}

.usage-table tbody th,
.usage-table tbody td {
  padding: 9px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--set-line);
}

.usage-table tbody tr:last-child th,
.usage-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Zebra, so a wrapped label (they run to two lines) stays tied to its own row of values. */
.usage-table tbody tr:nth-child(2n) th,
.usage-table tbody tr:nth-child(2n) td {
  background: var(--set-panel-soft);
}

.plans-matrix th[scope="row"] {
  width: 38%;
  min-width: 220px;
  font-weight: 500;
  color: var(--set-text);
  white-space: normal;
}

.plans-matrix td {
  white-space: normal;
}

/* The three plan columns split what is left equally: without this, a long Free value ("One a day
   for your first 14 days") made its column half again as wide as Pro's and the numbers stopped
   lining up down the table. */
.plans-matrix thead th:not(:first-child) {
  width: 20.6%;
}

/* After the zebra rule on purpose: same specificity, so the later one wins and the column for
   the plan you are on stays highlighted the whole way down. */
.usage-table thead th.is-current,
.usage-table tbody th.is-current,
.usage-table tbody td.is-current,
.usage-table tbody tr:nth-child(2n) td.is-current {
  background: var(--set-accent-soft);
}

.usage-table thead th.is-current {
  color: var(--set-text);
}

.plans-weights {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--set-text);
}

.plans-weights strong {
  display: inline-block;
  min-width: 2ch;
  color: var(--set-accent);
}

.plans-notice.is-ok {
  border-color: var(--set-accent-line);
  background: var(--set-accent-soft);
  color: var(--set-text);
}

@media (max-width: 900px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------- form parts */
.settings-field {
  display: block;
  margin-top: 14px;
  min-width: 0;
}

.settings-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--set-text-soft);
}

.settings-input,
.settings-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--set-line-strong);
  border-radius: var(--set-radius-sm);
  background: var(--set-panel);
  color: var(--set-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.settings-textarea {
  min-height: 76px;
  resize: vertical;
}

/* Every dropdown in the settings AREA - Settings, Connections, Plans, Profile, Review, Shortcuts
   and Admin all share `.settings-shell` - wears the page's own chevron instead of the platform's
   arrow, which is a different shape on Windows, macOS and Android and ignores the dark theme on
   some of them. `appearance: none` drops the native one; the right padding is the room the
   chevron sits in.

   Deliberately OUTSIDE the "2026-09-19 restyle" block at the end of this file. That block is
   fenced to `#settings-root` by tests/test_settings_restyle.py precisely so it cannot reach the
   other pages - this rule is meant to, so it does not belong behind that fence. Scoped to
   `.settings-shell` all the same, so the mail UI's own selects keep the native control. */
.settings-shell select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 30px;
  background-image: var(--set-chevron-bg);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px 14px;
}

/* An inline slot inside an automation sentence is small and already coloured; a smaller chevron
   and tighter room keep the sentence reading as a sentence. */
.settings-shell select.automation-slot {
  padding-right: 20px;
  background-position: right 4px center;
  background-size: 11px 11px;
}

/* An open list box has no closed state to point at, and an arrow on one reads as a text field. */
.settings-shell select[multiple] {
  background-image: none;
  padding-right: 10px;
}

/* A validation sentence beside its field (profile, forms that re-render with errors). */
.settings-field-error {
  margin: 6px 0 0;
  color: var(--set-danger);
  font-size: 13px;
  line-height: 1.45;
}

/* Profile: "how a reply will end" - the sign-off lines exactly as a draft writes them. */
.settings-input::placeholder,
.settings-textarea::placeholder {
  color: var(--set-muted);
}

.settings-input:focus,
.settings-textarea:focus,
.settings-select:focus {
  border-color: var(--set-accent);
  box-shadow: 0 0 0 3px var(--set-accent-soft);
}

.settings-input-wrap {
  position: relative;
}

.settings-input-wrap .settings-input {
  padding-right: 42px;
}

.settings-reveal-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--set-muted);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.settings-reveal-btn:hover {
  background: var(--set-accent-soft);
  color: var(--set-accent);
}

/* Checkbox / radio rows (privacy tab) and provider chips (integrations tab). */
.settings-choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--set-text-soft);
}

.settings-choice input {
  margin: 3px 0 0;
  accent-color: var(--set-accent);
  flex-shrink: 0;
}

.settings-choice strong {
  color: var(--set-text);
}

.settings-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid var(--set-line-strong);
  border-radius: 999px;
  background: var(--set-panel-soft);
  color: var(--set-text-soft);
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.settings-chip:hover {
  background: var(--set-accent-soft);
  border-color: var(--set-accent-line);
  color: var(--set-accent);
}

.settings-chip input {
  accent-color: var(--set-accent);
}

.settings-chip:has(input:checked) {
  background: var(--set-accent-soft);
  border-color: var(--set-accent);
  color: var(--set-accent);
  font-weight: 600;
}

.settings-fieldset {
  margin: 0;
  padding: 14px 18px 16px;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius-sm);
  background: var(--set-panel-soft);
}

.settings-fieldset legend {
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--set-text);
}

.settings-inline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--set-text-soft);
}

.settings-inline-row .settings-input {
  width: auto;
  flex: 1 1 160px;
  min-width: 120px;
}

.settings-inline-row .settings-input.settings-input-narrow {
  width: 96px;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ buttons */
.settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--set-line-strong);
  border-radius: var(--set-radius-sm);
  background: var(--set-panel);
  color: var(--set-text-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.1s;
}

.settings-btn:hover {
  background: var(--set-accent-soft);
  border-color: var(--set-accent-line);
  color: var(--set-accent);
}

.settings-btn:active {
  transform: translateY(1px);
}

/* Buttons the page turns off (Force full sync without Gmail, a request in
   flight) must not keep offering the hover affordance. */
.settings-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.settings-btn:disabled:hover {
  background: var(--set-panel);
  border-color: var(--set-line-strong);
  color: var(--set-text-soft);
}

.settings-btn-primary {
  border-color: transparent;
  background: var(--accent-solid);
  color: #ffffff;
  padding: 10px 22px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(16, 17, 20, 0.16);
}

.settings-btn-primary:hover {
  background: var(--accent-solid-hover);
  border-color: transparent;
  color: #ffffff;
}

.settings-btn-ghost {
  border-style: dashed;
  border-color: var(--set-accent-line);
  background: var(--set-panel-soft);
  color: var(--set-accent);
}

/* Quiet until you reach for it. One Delete per rule card put a column of filled red down a page
   of forty categories, which reads as a page full of warnings; the colour belongs to the moment
   the pointer is on the button, not to the resting page. */
.settings-btn-danger {
  border-color: var(--set-line);
  background: var(--set-panel);
  color: var(--set-danger);
}

.settings-btn-danger:hover,
.settings-btn-danger:focus-visible {
  border-color: var(--set-danger);
  background: var(--set-danger-soft);
  color: var(--set-danger);
}

.settings-btn-sm {
  padding: 7px 12px;
  font-size: 12px;
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--set-line);
}

.settings-status {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--set-muted);
}

/* -------------------------------------------------- callouts / setup guides */
.settings-callout {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--set-accent-line);
  border-radius: var(--set-radius-sm);
  background: var(--set-accent-soft);
  color: var(--set-text-soft);
  font-size: 13px;
  line-height: 1.6;
}

.settings-callout-title {
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--set-accent);
}

.settings-callout ul,
.settings-callout ol {
  margin: 0;
  padding-left: 18px;
}

/* The step that says "open this page" is a real link, the way the signup guide's is.
   #0866C2 rather than --set-accent (#0A74DA): on the callout's own #eef2ff background the
   accent measures 4.15:1, under the 4.5:1 AA minimum, where this reads 5.09:1.
   Underlined, always: the link is only 1.6:1 against the body text around it, so colour on
   its own would not mark it (WCAG 1.4.1 Use of Color). */
.settings-callout-link {
  color: #0866C2;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.settings-callout-link:hover,
.settings-callout-link:focus-visible {
  text-decoration-thickness: 2px;
}

/* An external link opens in a new tab, so say so rather than surprising anyone. */
.settings-callout-link::after {
  content: " ↗";
  font-weight: 400;
  text-decoration: none;
  display: inline-block;
}

/* Where a provider has no page to send you to (Teams, Discord - both make webhooks inside
   their own app), this is the honest footnote under the steps. */
.settings-callout-note {
  margin: 8px 0 0;
  font-size: 12px;
  opacity: 0.85;
}

.settings-callout-note + ol,
.settings-callout ol + ol {
  margin-top: 6px;
}

/* A Google field's first line: "Connect Google", or who it is connected as. Not a
   .settings-actions row - that one carries the form footer's rule and would cut the field
   in half. */
.settings-google-connect {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 2px 0 0;
  color: var(--set-text-soft);
  font-size: 13px;
  line-height: 1.55;
}

.settings-google-connect .settings-btn {
  text-decoration: none;
}

/* One line under a field ("One Google token works for both..."): quieter than a card note. */
.settings-field-note {
  margin: 6px 0 0;
  color: var(--set-text-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

/* A link to another page of this app: underlined like the callout links, but no "opens in a
   new tab" arrow, because it does not. */
.settings-inline-link {
  color: var(--set-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.settings-paste-toggle > .settings-input-wrap,
.settings-paste-toggle > .settings-input {
  margin-top: 8px;
}

html[data-theme='dark'] .settings-callout-link {
  color: #a5b4fc;                 /* 7.8:1 on the dark callout background */
}

.settings-callout code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--set-panel);
  font-size: 12px;
  /* A Google scope is one 50-character "word"; on a phone it would run out of the box. */
  overflow-wrap: anywhere;
}

.settings-callout-sm {
  font-size: 12.5px;
  padding: 10px 12px;
  border-style: dashed;
}

.settings-alert {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--set-danger-line);
  border-radius: var(--set-radius-sm);
  background: var(--set-danger-soft);
  color: var(--set-danger);
  font-size: 13px;
  line-height: 1.55;
}

/* JS shows and hides provider fields and setup guides with el.hidden, so the
   page never carries a decorative inline style. */
.settings-shell [hidden] {
  display: none !important;
}

/* ==========================================================================
   CONNECTIONS PAGE - templates/connections.html + static/js/connections.js
   --------------------------------------------------------------------------
   Reuses the settings shell and the --set-* tokens it declares. Only the pieces the
   settings page has no equivalent for live here: the provider status list, the
   status pill and the delete-account zone. Same rule as above: colours come
   from tokens, never from a hex in a rule or an inline style in the template.
   ========================================================================== */

/* An action row that follows content which already reads as finished, so unlike
   .settings-actions it carries no rule above it. */
.conn-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.conn-actions:empty,
.conn-actions:has(> .settings-status:empty:only-child) {
  margin-top: 0;
}

/* The Gmail credential row: three fields that collapse to one column on phones. */
.conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.conn-grid .settings-field {
  margin-top: 0;
}

/* ------------------------------------------------- the provider status list */
.conn-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius-sm);
  overflow: hidden;
}

.conn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-top: 1px solid var(--set-line);
  background: var(--set-panel);
}

.conn-row:first-child {
  border-top: none;
}

.conn-row.is-connected {
  background: var(--set-panel-soft);
}

.conn-row-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1 1 260px;
}

.conn-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--set-line-strong);
}

.conn-row.is-connected .conn-dot {
  background: var(--set-ok);
}

.conn-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--set-text);
}

.conn-blurb {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--set-muted);
}

.conn-warn {
  color: var(--set-warn);
}

.conn-row-side {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.conn-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--set-line);
  border-radius: 999px;
  background: var(--set-panel-soft);
  color: var(--set-muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.conn-pill.is-on {
  border-color: var(--set-ok);
  background: var(--set-panel);
  color: var(--set-ok);
}

/* --------------------------------------------------- delete-account zone */
.conn-danger {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--set-line);
}

.conn-danger-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--set-danger);
}

.conn-delete-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.conn-delete-form .settings-input {
  max-width: 280px;
}

/* connections.js writes its status lines with the same .settings-status.is-ok /
   .is-error classes settings.js uses; those rules live in the settings section. */

/* --------------------------------------------------- category / detection UI */
.settings-rules {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.category-rule-card,
.detection-rule-card {
  padding: 16px;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius);
  background: var(--set-panel-soft);
}

.rule-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--set-line);
}

/* The two order chevrons per row are gone: a rule is picked up by its grip now
   (.rule-grip below). Forty rows meant eighty buttons, and sending a rule from the bottom
   to the top was thirty-nine clicks. */

.rule-card-head > .rule-toggle {
  margin-right: auto;
}

.rule-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--set-text-soft);
  cursor: pointer;
}

.rule-toggle input {
  accent-color: var(--set-accent);
}

.rule-toggle-state {
  color: var(--set-muted);
}

.rule-toggle-state.is-on {
  color: var(--set-ok);
}

/* "Built-in" as written, not BUILT-IN: it is a note about the card, not a warning. */
.rule-badge {
  padding: 3px 9px;
  border: 1px solid var(--set-line);
  border-radius: 6px;
  background: var(--set-panel-soft);
  color: var(--set-muted);
  font-size: 11.5px;
  font-weight: 600;
}

/* Two columns on wide screens: short fields pair up, prose spans the row. */
.rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.rule-grid .settings-field {
  min-width: 0;
}

.rule-field-full {
  grid-column: 1 / -1;
}

.rule-card-error {
  border-color: var(--set-danger);
  box-shadow: 0 0 0 3px var(--set-danger-soft);
}

.rule-card-error-text {
  display: none;
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--set-danger);
}

.rule-card-error .rule-card-error-text {
  display: block;
}

/* "Understood as" - the compiled reading of the rule. */
/* Solid and quiet: the dashed accent box read as an unfinished placeholder, and this is the
   part of the card that earns trust - what the parser actually made of the rule. */
/* Deliberately plain: this panel is the BUILT-IN PARSER's reading of the rule, not a model's.
   It used to carry an accent stripe down its left edge, which in this app is the mark of
   something a model wrote - so it claimed a cost that does not exist. The accent now appears
   on exactly one thing in a rule card: the "Sharpen this rule" pill, which really does spend. */
.rule-understood {
  margin-top: 16px;
  padding: 11px 13px;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius-sm);
  background: var(--set-panel-soft);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--set-text-soft);
}

.rule-understood-title {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--set-muted);
}

.rule-understood-line {
  display: block;
}

.rule-understood-warning {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  color: var(--set-warn);
}

.rule-understood-footer {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--set-muted);
}

/* "Also match?" - wordings the assist offered. They match nothing until accepted, so
   they read as an offer (dotted, quiet) rather than as part of the rule. */
.rule-suggested {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.rule-suggested-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--set-muted);
}

.rule-suggested-chip {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px dashed var(--set-line-strong);
  border-radius: 999px;
  background: var(--set-panel-soft);
}

.rule-suggested-add,
.rule-suggested-drop {
  border: none;
  background: none;
  color: var(--set-text-soft);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.rule-suggested-add {
  padding: 4px 4px 4px 12px;
}

.rule-suggested-add::before {
  content: "+ ";
  color: var(--set-accent);
  font-weight: 700;
}

.rule-suggested-add:hover {
  color: var(--set-accent);
}

.rule-suggested-drop {
  padding: 4px 10px 4px 6px;
  color: var(--set-muted);
  line-height: 1.2;
}

.rule-suggested-drop:hover {
  color: var(--set-danger);
}

/* A chip "Improve with AI" typed: a sender lands in Senders (solid ring), an exclude word in
   Exclude words (minus sign); anything else is a phrase and keeps the plain offer look. */
.rule-suggested-chip.is-sender {
  border-style: solid;
  border-color: var(--set-accent-line);
}

.rule-suggested-chip.is-exclude .rule-suggested-add::before {
  content: "\2212 ";
  color: var(--set-warn);
}

/* "Improve with AI" - one model call about this card, on request. Sits between
   "Understood as" and the chips it produces; the suggested wording is an offer, so it takes
   the same dashed treatment as a chip. */
.rule-assist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.rule-assist-btn {
  padding: 5px 12px;
  border: 1px solid var(--set-accent-line);
  border-radius: 999px;
  background: var(--set-accent-soft);
  color: var(--set-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.rule-assist-btn::before {
  content: "\2726 ";
}

.rule-assist-btn:hover {
  border-color: var(--set-accent);
}

.rule-assist-btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

.rule-assist-status {
  font-size: 12px;
  line-height: 1.5;
  color: var(--set-muted);
}

.rule-assist-status.is-done {
  color: var(--set-text-soft);
}

.rule-assist-status.is-error,
.rule-assist-status.is-quota {
  color: var(--set-warn);
}

.rule-rewrite {
  flex: 1 1 100%;
  padding: 10px 14px;
  border: 1px dashed var(--set-line-strong);
  border-radius: var(--set-radius-sm);
  background: var(--set-panel-soft);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--set-text-soft);
}

.rule-rewrite-title {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--set-muted);
}

.rule-rewrite-text {
  margin: 0 0 8px;
}

.rule-rewrite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rule-rewrite-note {
  font-weight: 600;
}

.rule-rewrite-undo {
  margin-left: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--set-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* "Would this catch it?" - the rule tried against one real email. */
/* One row for both ways of asking "is this rule right?": the accent "Sharpen this rule" pill
   (a model call, and the only thing in the card that spends) and the quiet "Would this catch
   it?" toggle (the same engines the sync uses - deterministic and free). The test PANEL is a
   sibling below this row, never inside it, so opening it cannot squeeze itself into the width
   of its own button. */
.rule-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
}

/* Both were free-standing blocks with their own top margin before they shared a row. */
.rule-actions > .rule-assist {
  margin-top: 0;
}

.rule-test-toggle {
  padding: 0;
  border: none;
  background: none;
  color: var(--set-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.rule-test-toggle::after {
  content: " ▾";
  font-size: 10px;
}

.rule-test-toggle[aria-expanded="true"]::after {
  content: " ▴";
}

/* A sibling of the actions row now, not a child of it, so it carries its own separation. */
.rule-test-panel {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius-sm);
  background: var(--set-panel-soft);
}

.rule-test-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rule-test-row .settings-input {
  flex: 1 1 160px;
  min-width: 0;
  margin: 0;
}

.rule-test-row .rule-test-run {
  flex: 0 0 auto;
}

.rule-test-verdict {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--set-muted);
}

.rule-test-verdict:empty {
  display: none;
}

.rule-test-headline {
  display: block;
  font-weight: 600;
  color: var(--set-text-soft);
}

.rule-test-verdict.is-hit .rule-test-headline {
  color: var(--set-ok);
}

.rule-test-verdict.is-miss .rule-test-headline {
  color: var(--set-warn);
}

.rule-test-fix {
  display: block;
  margin-top: 3px;
  color: var(--set-muted);
}

/* ------------------------------------------------------- writing-style tab */
.settings-style-editor {
  min-height: 300px;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--set-line-strong);
  border-radius: var(--set-radius);
  background: var(--set-panel);
  color: var(--set-text);
  font-size: 14.5px;
  line-height: 1.8;
  white-space: pre-wrap;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.settings-style-editor:focus {
  border-color: var(--set-accent);
  box-shadow: 0 0 0 3px var(--set-accent-soft);
}

/* The blocks static/js/settings.js renders the stored writing-style document into. One rule
   per block, colour from a token: the renderer emits the class and nothing else, so the
   whole document follows a Light/Dark switch without being rebuilt (and without losing the
   caret or an unsaved edit, which a rebuild would).

   It is a document, so it is set like one: no badge, no icons, no coloured rails. The
   version with an amber CRITICAL bar and a blue one beside every other heading read as a
   generated poster rather than as what it is - the user's own instructions. */
.settings-style-editor .md-placeholder {
  color: var(--set-muted);
  font-style: italic;
}

.settings-style-editor .md-blank {
  height: 8px;
}

.settings-style-editor .md-rule {
  border: none;
  border-top: 1px solid var(--set-doc-line);
  margin: 18px 0;
  opacity: 0.6;
}

.settings-style-editor .md-para {
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--set-doc-text);
}

/* The document's own title line: stored, round-tripped, never shown (the card header is the
   title). `hidden` does the hiding; this keeps it hidden if that attribute is ever lost. */
.settings-style-editor .md-doc-title {
  display: none;
}

/* A section heading: the document's structure. Not editable, so it takes the default cursor,
   and it stands apart by weight and a hairline rather than by a colour rail. */
/* A section heading has to be findable at a glance - the document is long and the draft
   writer reads it by section. It used to be plain bold text in the SAME colour and weight as
   the prose beneath it, over a full-width hairline, so nothing marked where one section ended
   and the next began. Colour is the whole signal now: the accent, uppercase and tracked, with
   the number as a chip. No rule under it and none trailing off it - a line across the page was
   the thing that made the document look machine-set rather than written. */
/* 2026-09-28: small uppercase accent-blue text read as a label smaller than the prose it heads.
   It is a heading now - body ink, a step larger than the text, sentence case - and the number
   chip alone carries the accent. */
.settings-style-editor .md-heading {
  display: flex;
  align-items: center;
  margin: 24px 0 8px;
  color: var(--set-text);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.005em;
  cursor: default;
}

/* The stored title is upper case ("SYSTEM DIRECTIVE"); show it in sentence case. */
.settings-style-editor .md-heading-text {
  display: inline-block;
  text-transform: lowercase;
}

.settings-style-editor .md-heading-text::first-letter {
  text-transform: uppercase;
}

/* The leading "1." / "2." of a numbered section. It lives INSIDE [data-md-body], so
   inlineToMarkdown walks it straight back to "1." and the document round-trips on save. */
.settings-style-editor .md-heading-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  margin-right: 8px;
  padding: 0 6px;
  border: 1px solid var(--set-doc-chip-line);
  border-radius: 6px;
  background: var(--set-doc-accent-bg);
  color: var(--set-doc-accent-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 1px;
}

.settings-style-editor .md-heading:first-child {
  margin-top: 0;
}

/* The gap above section 1: the hidden title line is the first child, so :first-child never
   matched the heading, and the blank line(s) stored after the title rendered as empty space on
   top of the heading's own margin. Blanks directly after the title take no room, and the first
   heading after them sits at the top of the box. Still in the DOM, so Save round-trips them. */
.settings-style-editor .md-doc-title + .md-blank,
.settings-style-editor .md-doc-title + .md-blank + .md-blank {
  display: none;
}

.settings-style-editor .md-doc-title + .md-heading,
.settings-style-editor .md-doc-title + .md-blank + .md-heading,
.settings-style-editor .md-doc-title + .md-blank + .md-blank + .md-heading {
  margin-top: 0;
}

.settings-style-editor .md-bullet {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 6px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--set-doc-text);
}

/* Drawn, not stored: the marker is never a character in the document, so it cannot be
   selected, copied into a rule, or saved back into the text. */
.settings-style-editor .md-bullet::before {
  content: "\2022";
  flex-shrink: 0;
  margin-top: -1px;
  color: var(--set-doc-bullet);
}

.settings-style-editor .md-code {
  display: inline-block;
  margin: 1px;
  padding: 1px 6px;
  border: 1px solid var(--set-doc-accent-line);
  border-radius: 5px;
  background: var(--set-doc-accent-bg);
  color: var(--set-doc-accent);
  font-family: Consolas, Monaco, monospace;
  font-size: 12.5px;
}

.settings-style-editor .md-strong {
  color: var(--set-doc-strong);
  font-weight: 600;
}

.settings-style-editor .md-em {
  color: var(--set-muted);
  font-style: italic;
}

.settings-style-editor .md-table-wrap {
  overflow-x: auto;
  margin: 12px 0;
  border: 1px solid var(--set-doc-line);
  border-radius: 8px;
}

.settings-style-editor .md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}

.settings-style-editor .md-table tr {
  border-bottom: 1px solid var(--set-doc-line);
}

.settings-style-editor .md-table tr.is-head {
  border-bottom-width: 2px;
  background: var(--set-doc-th-bg);
  font-weight: 600;
}

.settings-style-editor .md-table tr.is-alt {
  background: var(--set-doc-row-alt);
}

.settings-style-editor .md-table td {
  padding: 10px 14px;
  vertical-align: top;
  color: var(--set-doc-text);
}

.settings-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius-sm);
  background: var(--set-panel-soft);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--set-text-soft);
}

.settings-banner svg {
  flex-shrink: 0;
}

.settings-banner.is-busy {
  border-color: var(--set-accent-line);
  background: var(--set-accent-soft);
  color: var(--set-accent);
}

.settings-banner.is-ok {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.1);
  color: var(--set-ok);
}

.settings-banner.is-error {
  border-color: var(--set-danger-line);
  background: var(--set-danger-soft);
  color: var(--set-danger);
}

/* Status text next to a Save/Test button. */
.settings-status.is-ok {
  color: var(--set-ok);
}

.settings-status.is-error {
  color: var(--set-danger);
}

.settings-status.is-fading {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ------------------------------------------------------- channel list rows */
.settings-stack {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-row .settings-input {
  flex: 1;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 720px) {
  .rule-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-guide-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .settings-card {
    padding: 16px;
  }

  .settings-title {
    font-size: 22px;
  }
}

/* ============================================================================
   SETTINGS NAVIGATION IN THE SIDEBAR
   The mail folders (Primary, Promotions, ...) are not navigable state while the
   settings page is open, so base.html swaps them for these section links and
   the in-page tab strip above is hidden on desktop.
   ========================================================================== */
.sidebar-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.settings-nav-heading {
  padding: 16px 16px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 12px);
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

/* No transform: a menu row that slides under the pointer is a flourish, not a signal. */
.settings-nav-item:hover {
  background: var(--tab-hover-bg);
  color: var(--text);
}

/* The selected row: a tint of the app's OWN blue and nothing else.
   It used to be an indigo wash (rgba(129,140,248,.18)) with a 2px indigo bar down its left edge -
   a colour that appears nowhere else in the product, next to a blue wordmark, plus a stray mark
   that read as decoration rather than as "you are here". The filled row already says that, so the
   bar is gone and the tint is `--brand-ink`, the same blue as the logo and the account avatar. */
.settings-nav-item.is-active {
  background: rgba(10, 116, 218, 0.12);
  color: var(--text);
  font-weight: 600;
}

.settings-nav-item.is-active .settings-nav-icon {
  color: var(--brand-ink);
}

/* A rail row is a row whether it is a <button> (the tabs) or an <a> (Profile, Plans, Connections,
   Shortcuts, Back to inbox). `html[data-theme='dark'] a` is more specific than `.settings-nav-item`,
   so the links came out link-blue in a column of grey menu items and the rail read as two lists
   that happened to be stacked. Same colour for both; the selected row is the only coloured one. */
a.settings-nav-item,
html[data-theme='dark'] a.settings-nav-item {
  color: var(--muted);
}

a.settings-nav-item:hover,
a.settings-nav-item.is-active,
html[data-theme='dark'] a.settings-nav-item:hover,
html[data-theme='dark'] a.settings-nav-item.is-active {
  color: var(--text);
}

html[data-theme='dark'] .settings-nav-item.is-active {
  background: rgba(94, 169, 242, 0.16);
}

.settings-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
}

.settings-nav-icon svg {
  width: 17px;
  height: 17px;
  opacity: 0.85;
}

.settings-nav-item.is-active .settings-nav-icon svg {
  opacity: 1;
}

.settings-nav-divider {
  height: 1px;
  margin: 10px 16px 6px 0;
  background: var(--border);
}

/* Desktop: the rail is the navigation, so the in-page strip is redundant. */
@media (min-width: 901px) {
  body.settings-page .settings-tabs {
    display: none;
  }

  body.settings-page .settings-back {
    display: none;
  }
}

/* Collapsed rail: icons only, same geometry as the mail tabs. */
body.sidebar-collapsed .settings-nav-item {
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0 auto 6px auto;
  justify-content: center;
}

body.sidebar-collapsed .settings-nav-label,
body.sidebar-collapsed .settings-nav-heading,
body.sidebar-collapsed .settings-nav-divider {
  display: none;
}

/* ---------------------------------------------------------------- plan change notice
   "Your plan is now Pro" - rendered hidden at the top of <main> on every page by
   templates/base.html and unhidden by base.js (see plan_service.plan_notice). */
.plan-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--tab-bg-subtle);
  color: var(--text);
  font-size: 14px;
}

.plan-notice[hidden] {
  display: none;
}

/* The mailbox cannot be read: the one alert on the inbox that is a fault rather than news, so it
   is the one that borrows the danger colour. No dismiss - it goes when the credentials work. */
.sync-auth-alert {
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid var(--set-danger-line, #fecaca);
  border-radius: 10px;
  background: var(--set-danger-soft, #fef2f2);
  color: var(--set-danger, #b91c1c);
  font-size: 14px;
  line-height: 1.55;
}

.sync-auth-alert a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* ── The claim banner ── an admin offered this account a plan (migration 024). It borrows the
   plan notice's shape above but is a different thing: that one announces something already done
   and hides itself after one page load, this one is an action and stays until it is taken. So no
   dismiss button, and no hidden-first - it renders on the server and is simply there. */
.plan-offer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--tab-bg-subtle);
  color: var(--text);
  font-size: 14px;
}

.plan-offer-icon {
  font-size: 18px;
  line-height: 1;
}

.plan-offer-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 260px;
}

.plan-offer-detail {
  color: var(--muted);
  font-size: 13px;
}

.plan-offer-claim {
  padding: 7px 14px;
  border: 1px solid var(--brand-ink);
  border-radius: 8px;
  background: var(--brand-ink);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.plan-offer-claim:hover:not(:disabled) {
  filter: brightness(1.08);
}

.plan-offer-claim:disabled {
  opacity: 0.7;
  cursor: default;
}

.plan-offer-status {
  font-size: 13px;
  color: var(--muted);
}

.plan-offer-status.is-ok {
  color: var(--set-ok, #16a34a);
}

.plan-offer-status.is-error {
  color: var(--set-danger, #b91c1c);
}

html[data-theme='dark'] .plan-offer-claim {
  color: #0b1220;
}

.plan-notice-icon {
  font-size: 18px;
  line-height: 1;
}

.plan-notice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 240px;
}

.plan-notice-detail {
  color: var(--muted);
  font-size: 13px;
}

.plan-notice-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.plan-notice-link:hover {
  text-decoration: underline;
}

.plan-notice-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
}

.plan-notice-close:hover {
  background: var(--tab-hover-bg);
  color: var(--text);
}

/* A term that ran out is not a celebration. */
.plan-notice.is-ended {
  border-color: #b45309;
  background: #fffbeb;
}

html[data-theme='dark'] .plan-notice {
  background: rgba(96, 165, 250, 0.10);
}

html[data-theme='dark'] .plan-notice.is-ended {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

/* ---------------------------------------------------------------- dictation outside the agent
   The mic in Compose and in the reply box shares voice_input.js with the Launch Agent prompt, so
   it gets the same "recording" treatment - an open microphone must never be a surprise, whichever
   button opened it. The banners reuse .agent-voice-* and only need placing. */
.compose-icon.is-recording,
.cmp-icon.is-recording {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
  animation: agent-voice-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .compose-icon.is-recording,
  .cmp-icon.is-recording { animation: none; }
}

.compose-voice-banner {
  margin: 0 0 8px;
}

.reply-voice-banner {
  margin: 10px 0 0;
}

/* The Disconnect button is a POST form (it changes state), so it needs a CSRF field - and
   that form must not break the actions row it sits in. */
.conn-inline-form {
  display: inline-flex;
  margin: 0;
}

/* ── Daily Report (header button + panel, static/js/daily_report.js) ──────────
   The button sits beside Launch Agent and wears the same clothes; the panel is a
   popover anchored under it, themed with the shared tokens so it follows dark mode. */
.daily-report-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.daily-report-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.daily-report-icon svg {
  width: 16px;
  height: 16px;
}

/* Same open look as Cusentra Chat's button - the tokens sit with the header buttons' own. */
.daily-report-btn[aria-expanded="true"],
.daily-report-btn[aria-expanded="true"]:hover {
  background-color: var(--hdr-btn-bg-open);
  border-color: var(--hdr-btn-line-open);
  color: var(--hdr-btn-fg-open);
}

.daily-report-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100050;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 14px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  text-align: left;
}

.daily-report-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.daily-report-head strong {
  font-size: 14px;
}

.daily-report-head span {
  font-size: 12px;
  color: var(--muted);
}

.daily-report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.daily-report-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.daily-report-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.daily-report-summary {
  margin: 10px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.daily-report-actions {
  display: flex;
  gap: 8px;
}

.daily-report-download,
.daily-report-secondary {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.daily-report-download {
  flex: 1 1 auto;
  background: #1E293B;
  color: #F8FAFC;
  border: 1px solid #334155;
}

.daily-report-download:hover:not(:disabled) {
  background: #334155;
}

.daily-report-download:disabled {
  opacity: 0.65;
  cursor: default;
}

.daily-report-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.daily-report-secondary:hover {
  background: var(--tab-hover-bg);
}

.daily-report-auto {
  margin: 10px 0 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

.daily-report-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}

.daily-report-link:hover {
  text-decoration: underline;
}

/* The end-of-day save reports itself here: a save that needs one click to reach the
   chosen folder carries the button that gives it one. */
.daily-report-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100200;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 14px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.32);
}

.daily-report-toast-btn {
  flex: 0 0 auto;
  border: none;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}

.daily-report-toast-close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* Narrow screens: the header already drops button labels, and the panel becomes a
   sheet pinned to the right edge rather than something wider than the viewport. */
@media (max-width: 1000px) {
  .daily-report-btn .launch-agent-text {
    display: none;
  }

  .daily-report-btn {
    padding: 8px 12px;
  }
}

@media (max-width: 560px) {
  .daily-report-panel {
    position: fixed;
    top: auto;
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }
}

/* ── Daily report settings card (Settings → Daily report) ── */
.daily-report-folder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.daily-report-folder-name {
  font-size: 13px;
  color: var(--muted);
}

.daily-report-delivery {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.daily-report-delivery-title {
  font-size: 13px;
  color: var(--muted);
}

/* Emailing needs no folder: the section stays readable but plainly does not apply. */
#dailyReportWhere:disabled {
  opacity: 0.55;
}


/* ===== Generate Response: the caret, and the "in my own words" popover =====
   The button next to it drafts a reply on its own; this one asks the user how they want it
   written and sends that to the same draft path (analyze?instruction=...), which reaches
   response_agent as its revision_instruction. Styles live here, not in css/email_detail.css,
   because the button is rendered by base.html's header and must be styled wherever that shows. */
.gen-prompt-wrap {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  /* position, so the .sr-only label below is contained by THIS box. It is position:absolute
     with no offsets, and with no positioned ancestor its containing block was the viewport -
     not main.inbox, which is the scroller. An absolutely positioned box that escapes the
     scroller is not clipped by it, so the copy of this control inside the reply panel sat at
     the page's own coordinates near the bottom of the mail and gave the DOCUMENT ~80px of
     scroll of its own. Clicking Reply then scrolled both the panel and the document, the shell
     slid up, and a strip of empty background appeared under the app - the void below the reply
     box. Contained here, the label cannot lengthen anything. */
  position: relative;
}

/* The two halves meet flush so the pair reads as ONE button: the left keeps its rounded left
   edge, the caret keeps the rounded right edge, and the seam between them is a single hairline.
   NOTE the selectors. The header styles its action buttons through
   `.hamburger-container .header-left .btn-generate` - three classes and !important. Matching
   only `!important` is not enough; a two-class selector still loses on specificity and the
   corners stay round, which is what left a visible gap between the halves. These carry the same
   three-class prefix plus .gen-prompt-wrap so they actually win. */
.hamburger-container .header-left .gen-prompt-wrap .btn-generate,
.gen-prompt-wrap .btn-generate {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
  margin-right: 0 !important;
}

/* Height, border, background and colour come from the shared header-button rules above - in
   BOTH themes. Listing the caret there rather than restating colours here is what stops it
   rendering as a white pill beside its own dark sibling. Only the geometry that welds the two
   halves into one control lives here. */
.hamburger-container .header-left .gen-prompt-wrap .btn-generate-more,
.gen-prompt-wrap .btn-generate-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  margin-left: 0 !important;
  cursor: pointer;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid rgba(148, 163, 184, 0.28) !important;
  transition: filter 0.18s ease;
}

/* One control, so it lights up as one. */
.gen-prompt-wrap:hover .btn-generate,
.gen-prompt-wrap:hover .btn-generate-more {
  filter: brightness(1.06);
}

html[data-theme='dark'] .hamburger-container .header-left .gen-prompt-wrap .btn-generate-more {
  border-left-color: rgba(148, 163, 184, 0.22) !important;
}

.btn-generate-more .action-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}

.btn-generate-more:hover {
  filter: brightness(0.97);
}

.btn-generate-more[aria-expanded="true"] .action-icon {
  transform: rotate(180deg);
}

/* Visible to a screen reader, not to the eye: the caret's own label. */
.gen-prompt-wrap .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ===== The reply box you can type in ======================================
   #response-content used to be display:none and contenteditable="false" until the model had
   written something, so there was no way to answer an email by hand. It is now always on
   screen and always writable, which means it has to LOOK like a box when it is empty: a border
   in both themes (dark already had one below) and a placeholder. */
#response-content {
  background: #ffffff;
  border: 1px solid #A7F3D0;
  /* Nothing set a size, so this inherited the page's 16px and read a size larger than the panel
     it sits in. 14px is the Compose drawer's editor. It goes on the ELEMENT, not on ::before:
     sizing only the placeholder would make the text jump the moment somebody typed a letter. */
  font-size: 14px;
}

#response-content:empty::before {
  content: attr(data-placeholder);
  color: #6B7280;
  opacity: 0.85;
  pointer-events: none;
}

html[data-theme='dark'] #response-content:empty::before {
  color: #94a3b8;
}

/* The idle row ("No draft yet." + the Generate Response pair) sat flush on the editor below:
   zero gap, and the editor's focus ring - a 2px box-shadow drawn OUTSIDE its border - then
   painted across the bottom of the pill, so the two read as one overlapping control. The row
   gets its own breathing room. Scoped to the reply box: #summary-empty is followed by a row
   that already carries margin-top, and spacing it twice would only open a gap there. */
#response-empty {
  margin-bottom: 10px;
}

/* The skeleton while a draft is on its way. `.response-box div` sets `white-space: pre-wrap` for
   the reply text, and it reached these bars too: Chrome then renders the template's line breaks
   between them as blank lines, so four 11px bars stood ~70px apart down an empty green panel. */
.response-box .agent-busy-skeletons,
.response-box .agent-busy-skeletons div {
  white-space: normal;
}

/* A summary or a draft being typed out (email_detail.js `_streamPush`): a caret at the end of the
   text, the cue every chat product uses for "still writing". It goes when the final text lands. */
#summary-text.is-streaming::after,
#response-content.is-streaming::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.55;
  animation: streamCaretBlink 1s steps(1, end) infinite;
}

@keyframes streamCaretBlink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #summary-text.is-streaming::after,
  #response-content.is-streaming::after {
    animation: none;
  }
}

/* The same two-halves-one-button pair as the header's, for the Generate Response inside the
   reply box. The header's halves are .btn-generate/.btn-generate-more and carry header geometry
   that has no business in a panel, so the geometry is restated for this section's own flatter
   buttons - but NOT the colour.

   BOTH halves wear .analysis-empty-btn, so background, text and border come from the one
   declaration up at "Idle state shown before the user asks" and cannot drift apart. The caret
   used to set its own colours plus a dark-theme override while .analysis-empty-btn has none, so
   in dark mode the button stayed a white chip and the caret beside it went slate - two pills
   that were meant to read as one button. Anything that recolours these buttons must recolour
   both, which is exactly what sharing the class buys. */
.reply-gen-wrap .analysis-empty-btn:not(.analysis-empty-more) {
  border-radius: 18px 0 0 18px;
  border-right: 0;
}

.reply-gen-wrap .analysis-empty-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: 0 18px 18px 0;
  border-left-color: rgba(99, 102, 241, 0.35);
}

/* One control, so it lights up as one - and neither half lifts on its own
   (.analysis-empty-btn:hover translates, which would shear the pair in two). */
.reply-gen-wrap:hover .analysis-empty-btn {
  background: #EEF2FF;
  border-color: #A5B4FC;
}

/* The seam again: the hover rule above is one pseudo-class more specific and would otherwise
   repaint the divider with the outer border colour. */
.reply-gen-wrap:hover .analysis-empty-more {
  border-left-color: rgba(99, 102, 241, 0.35);
}

.reply-gen-wrap .analysis-empty-btn:hover {
  transform: none;
}

.reply-gen-wrap .analysis-empty-more .action-icon {
  width: 15px;
  height: 15px;
  transition: transform 0.18s ease;
}

.reply-gen-wrap .analysis-empty-more[aria-expanded="true"] .action-icon {
  transform: rotate(180deg);
}

/* position: FIXED, placed from the button's own rect by email_detail.js.
   An ancestor clips it otherwise: .hamburger-container .header-left is `overflow-x: auto`
   between 901px and 1200px, which crops anything drawn below the button - the box opened
   correctly and simply could not be seen. Fixed positioning is not clipped by an ancestor's
   overflow, so this holds whatever the header does at any width. */
.gen-prompt-popover {
  position: fixed;
  z-index: 5200;
  width: min(340px, calc(100vw - 32px));
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--set-line, #e2e8f0);
  background: var(--set-panel, #ffffff);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.22);
  text-align: left;
}

.gen-prompt-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--set-text, #0f172a);
}

/* The label and the Speak button share one row; both lose their own bottom margin to it,
   so the box is no taller than it was before dictation was offered here. */
.gen-prompt-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.gen-prompt-label-row .gen-prompt-label,
.gen-prompt-label-row .gen-prompt-voice-btn {
  margin-bottom: 0;
}

.gen-prompt-voice-btn {
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: 11px;
}

/* In a 340px popover the banner wraps rather than pushing Done off the edge. */
.gen-prompt-voice-banner {
  margin: 0 0 8px;
  flex-wrap: wrap;
}

.gen-prompt-input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--set-line, #cbd5e1);
  background: var(--set-panel-soft, #f8fafc);
  color: var(--set-text, #0f172a);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.gen-prompt-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10, 116, 218, 0.18);
}

.gen-prompt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.gen-prompt-hint {
  margin-right: auto;
  font-size: 11px;
  color: var(--set-muted, #64748b);
}

.gen-prompt-cancel,
.gen-prompt-go {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--set-line, #cbd5e1);
  background: transparent;
  color: var(--set-text, #0f172a);
}

.gen-prompt-go {
  border-color: transparent;
  background: linear-gradient(135deg, #0854a0, #3730A3);
  color: #fff;
}

.gen-prompt-go:disabled {
  opacity: 0.6;
  cursor: default;
}

html[data-theme='dark'] .gen-prompt-popover {
  border-color: #2a3444;
  background: #131c2b;
}

html[data-theme='dark'] .gen-prompt-label {
  color: #e8eaed;
}

html[data-theme='dark'] .gen-prompt-input {
  border-color: #2a3444;
  background: #0f1722;
  color: #e8eaed;
}

html[data-theme='dark'] .gen-prompt-cancel {
  border-color: #2a3444;
  color: #cbd5e1;
}

/* ---------------------------------------------------------------- follow-ups
   The strip above the inbox list, the panel it opens and the nudge editor.
   Borrowed wholesale from .plan-notice above: the app already has one way of
   saying "here is something you should know about", and a second visual
   language for a second such message would just be noise. */

/* The strip belongs to the list rather than sitting on top of it.
   It used to be the generic callout shape - rounded corners, a border on all four
   sides, a drop shadow, a tinted fill, a big emoji and a pill button - stacked above
   a dense flat list of 40px rows separated by hairlines. Next to that, it read as
   something bolted on. It now has the geometry of a row (flat, square, one hairline,
   the same height) and is told apart by three quiet things instead: a 2px accent rule
   down its left edge, an icon drawn in the same 1.9 stroke as every other icon in the
   app, and an action that is plain text. */
.followups-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 8px 0 12px;
  min-height: 40px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid var(--blue);
  border-radius: 0;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
}

.followups-strip[hidden] { display: none; }

.followups-strip-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--blue);
}
.followups-strip-icon svg { width: 16px; height: 16px; display: block; }

/* One line, ellipsised: a band that grows a second line pushes the mail down. */
.followups-strip-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.followups-strip-text strong { font-weight: 600; }
.followups-strip-detail {
  font-size: 12px;
  color: var(--muted);
  margin-left: 8px;
}

.followups-strip-link {
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
}
.followups-strip-link:hover { text-decoration: underline; }

.followups-strip-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex: 0 0 auto;
}
.followups-strip-close:hover { color: var(--text); }

/* --- the review panel --- */
.followups-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 200000;
  display: flex;
  justify-content: flex-end;
}
.followups-panel-overlay[hidden] { display: none; }

.followups-panel {
  width: min(460px, 100%);
  height: 100%;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.followups-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.followups-panel-head h3 { margin: 0; font-size: 16px; }

.followups-panel-close {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}
.followups-panel-close:hover { opacity: 1; }

.followups-panel-body { padding: 8px 16px 24px; overflow-y: auto; flex: 1 1 auto; }

.followups-group { margin: 16px 0 0; }
.followups-group[hidden] { display: none; }
.followups-group-title {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
}

.followups-list { list-style: none; margin: 0; padding: 0; }

.followups-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.followups-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.followups-item-title {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.followups-item-subject {
  font-size: 12px;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.followups-item-meta { font-size: 12px; opacity: 0.7; }
.followups-item-meta.is-due { color: #b45309; opacity: 1; font-weight: 600; }

.followups-item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.followups-item-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.followups-item-btn:hover { background: var(--tab-bg-subtle); }
.followups-item-btn:disabled { opacity: 0.5; cursor: default; }

.followups-capped { font-size: 12px; opacity: 0.8; margin: 10px 0 0; }
.followups-capped-link { color: var(--blue); font-weight: 600; }
.followups-empty { font-size: 13px; opacity: 0.7; margin: 24px 0; }

/* --- the nudge editor: drafted, edited, and only then sent --- */
.nudge-modal {
  width: min(560px, 100%);
  margin: auto;
  background: var(--card);
  color: var(--text);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 0 18px 18px;
  max-height: 92vh;
  overflow-y: auto;
}
.nudge-to { font-size: 13px; opacity: 0.75; margin: 12px 0 4px; }
.nudge-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin: 12px 0 4px;
}
.nudge-subject,
.nudge-body {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
}
.nudge-body { resize: vertical; line-height: 1.5; }
.nudge-hint { font-size: 12px; opacity: 0.65; margin: 10px 0 0; }
.nudge-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.nudge-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
}
.nudge-btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 600;
}
.nudge-btn:disabled { opacity: 0.55; cursor: default; }

html[data-theme='dark'] .followups-strip { background: rgba(96, 165, 250, 0.10); }
html[data-theme='dark'] .followups-item-meta.is-due { color: #fbbf24; }

@media (max-width: 640px) {
  .followups-panel { width: 100%; }
  .followups-strip { font-size: 13px; }
}

/* ==========================================================================
   Follow-ups everywhere, Automations, "While you were away" (2026-09-10)
   ========================================================================== */

/* --- the "While you were away" strip: the follow-ups strip with its own accent --- */
/* Only the accent differs: two bands stacked over the list have to be the same object
   in two colours, not two different designs. */
.followups-strip.is-away {
  border-left-color: #7c3aed;
}
.followups-strip.is-away .followups-strip-icon,
.followups-strip.is-away .followups-strip-link {
  color: #7c3aed;
}

.away-run { padding: 10px 0; border-bottom: 1px solid var(--border); }
.away-run-head { font-size: 13px; font-weight: 600; }
.away-run-sub { font-size: 12px; opacity: 0.7; margin-top: 2px; }
/* Why a run stopped short, in words: read at full strength, not as the dimmed meta line. */
.away-run-sub.away-run-why { opacity: 0.9; }
.away-digest {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.5;
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--tab-bg-subtle);
  color: var(--text);
}
/* A post or a note that did not go out: the same line, marked as the problem it is. */
.away-digest.is-failed { border-left: 3px solid #dc2626; }
.followups-item-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.followups-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}
html[data-theme='dark'] .followups-badge { background: #14532d; color: #bbf7d0; }

/* --- the Follow up popover --- */
.followup-popover { width: min(520px, 100%); }
.fp-subject {
  font-size: 13px;
  opacity: 0.75;
  margin: 12px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.fp-preset {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}
.fp-preset:hover,
.fp-preset.is-active {
  background: var(--tab-bg-subtle);
  border-color: var(--blue);
  color: var(--blue);
}
.fp-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin: 12px 0 4px;
}
.fp-label small { text-transform: none; letter-spacing: 0; }

/* "When" and its Speak button share one row: the label keeps its own top margin so the
   spacing above is unchanged, and the button is pulled to the end. */
.fp-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fp-label-row .fp-label {
  margin-bottom: 0;
}

.fp-voice-btn {
  flex-shrink: 0;
  align-self: center;
  margin-bottom: 0;
  padding: 3px 10px;
  font-size: 11px;
}

/* Inside a modal this narrow the banner wraps rather than pushing Done off the edge. */
.fp-voice-banner {
  margin: 0 0 6px;
  flex-wrap: wrap;
}
.fp-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  padding: 9px 11px;
  font-size: 14px;
  box-sizing: border-box;
}
.fp-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  margin: 12px 0 0;
  cursor: pointer;
}
.fp-check small { display: block; opacity: 0.7; }
.fp-understood {
  font-size: 13px;
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--tab-bg-subtle);
  /* Stated, never inherited: this line is the answer the whole dialog exists to give,
     and it is the one thing the user checks before pressing Set reminder. */
  color: var(--text);
  border: 1px solid var(--border);
}
.fp-understood:empty { display: none; }
.fp-understood.is-error { color: #b45309; }
.fp-error { color: #b91c1c; font-size: 13px; margin: 8px 0 0; }
.fp-error[hidden] { display: none; }

/* --- the reply editor's "remind me if no reply" toggle --- */
.reply-remind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.85;
  margin-right: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.reply-remind-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  padding: 2px 4px;
}

/* --- the prepared-draft banner on the email page --- */
.prepared-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid #7c3aed;
  border-left-width: 4px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.06);
  font-size: 13px;
}
.prepared-banner-text { flex: 1 1 240px; }
.prepared-banner-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.prepared-banner-btn:hover { background: var(--tab-bg-subtle); }

/* --- Settings: automations --- */
.automations-list { margin: 8px 0 16px; }
.automation-rule { padding: 12px 0; border-bottom: 1px solid var(--border); }
.automation-rule.is-paused { opacity: 0.7; }
.automation-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.automation-rule-state {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  white-space: nowrap;
}
.automation-rule-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 8px;
  font-size: 13px;
  /* A rule names addresses and domains - one unbroken word as wide as the card - and a phone
     screen used to scroll sideways to show it. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.automation-rule-head strong { min-width: 0; overflow-wrap: anywhere; }
.automation-rule-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.automation-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.automation-example {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.automation-example:hover { border-color: var(--blue); color: var(--blue); }
/* The automations guide ("What can I automate?"). It opens on the picker - finished
   automations whose variable parts are real controls - and keeps the vocabulary it used to lead
   with folded underneath, where the heading column down the left still lets the eye scan it.
   One border - the callout's - not three. */
.automation-guide { margin-bottom: 16px; }

.automation-guide-lede { margin: 0 0 12px; }

/* ── the picker ──────────────────────────────────────────────────────── */
.automation-recipes {
  display: grid;
  /* min(320px, 100%) and not a bare 320px: below a 320px viewport the track has to be allowed
     to shrink, or one card is wider than the page and the whole settings column scrolls
     sideways. Same reason .rule-grid uses minmax(0, 1fr). */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 10px;
}

.automation-recipe {
  display: flex;
  flex-direction: column;
  min-width: 0;                    /* a grid item defaults to min-width:auto - the same leak */
  padding: 11px 13px 10px;
  border: 1px solid var(--set-line);
  border-radius: var(--set-radius-sm);
  background: var(--set-panel);
}

/* A card this plan cannot run. It stays legible and its controls stay reachable - the button
   carries aria-describedby to whichever line is holding the reason, so focusing it reads that
   reason out rather than leaving a control that silently ignores the press. */
.automation-recipe.is-locked { opacity: 0.72; }
.automation-recipe.is-locked .automation-recipe-use { cursor: not-allowed; }

/* Pressing a locked button says nothing new - the reason is already on the card - so the card
   flinches instead, which is the only feedback a repeat press has to give. */
.automation-recipe.is-flash { animation: automation-recipe-flash 0.45s ease-out; }

@keyframes automation-recipe-flash {
  0% { border-color: var(--set-accent); }
  100% { border-color: var(--set-line); }
}

@media (prefers-reduced-motion: reduce) {
  .automation-recipe.is-flash { animation: none; }
}

.automation-recipe-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.automation-recipe-title {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 700;
  color: var(--set-text);
}

/* No nowrap: the card is narrow whenever the grid is two columns, which is not a viewport the
   old max-width:720px override could see. It already sits in a wrapping row, so let it wrap. */
.automation-recipe-cost {
  font-size: 11.5px;
  color: var(--set-muted);
}

/* A card that has to say where something ELSE belongs - the arrival card pointing words at a
   Category rule. Quieter than the sentence, above the button, so it reads as a note rather than
   as part of the rule being built. */
.automation-recipe-hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--set-muted);
}

/* --- Automations: the review queue (templates/automations_review.html) ---
   One row per drafted reply: the tick, the original mail, the draft beside it. The draft is a
   real textarea because a reply you cannot fix is a reply you will not send. */
.automation-rule-review { display: block; font-weight: 600; }
/* "Paused: Slack was disconnected. Switch it back on, then resume." - the system's reason, in
   place of a bare "Paused." */
.automation-rule-paused-why { display: block; font-weight: 600; color: var(--set-danger); }
/* A picker blank that only goes with one value of another (Discord's channel): settings.js
   hides it while the other says otherwise. A class, not [hidden], because .automation-slot
   sets its own display. */
.automation-slot.is-hidden { display: none; }
/* The clock and the "at" before it (see settings.html): one group, hidden together beside an
   hourly frequency, which names no time of day. */
.automation-slot-group { display: inline; }
.automation-slot-group.is-hidden { display: none; }
.review-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 10px 0 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.review-check, .review-spacing { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.review-spacing select { padding: 4px 6px; }
.review-progress {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--tab-bg-subtle);
  font-size: 13px;
}
.review-rule { padding: 6px 0 2px; }
.review-rule-title {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--set-muted);
}
.review-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.review-item.is-in-flight { opacity: 0.65; }
.review-item.is-dirty .review-draft-body { border-color: var(--blue); }
.review-pick { padding-top: 4px; }
.review-pick input { width: 16px; height: 16px; }
.review-original { min-width: 0; font-size: 13px; }
.review-who { overflow-wrap: anywhere; }
.review-address, .review-meta { font-size: 12px; color: var(--set-muted); }
.review-subject { margin-top: 4px; font-weight: 600; overflow-wrap: anywhere; }
.review-snippet {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--set-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-snippet.is-muted, .review-flag.is-muted { font-style: italic; }
.review-flag { margin-top: 6px; font-size: 12px; font-weight: 600; }
.review-flag.is-flight { color: var(--blue); }
.review-flag.is-failed { color: #e0705a; }
.review-draft { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.review-draft-subject { width: 100%; font-size: 13px; }
.review-draft-body { width: 100%; min-height: 110px; font-size: 13px; line-height: 1.45; resize: vertical; }
.review-actions { display: flex; gap: 8px; }
@media (max-width: 760px) {
  .review-item { grid-template-columns: auto minmax(0, 1fr); }
  .review-draft { grid-column: 1 / -1; }
}

/* The sentence is the form: every blank in it is the control that fills it, sitting exactly
   where the words it stands for would be. line-height leaves room for the controls' boxes. */
.automation-recipe-sentence {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 2.1;
  overflow-wrap: anywhere;
  color: var(--set-text-soft);
}

.automation-slot {
  font: inherit;
  font-weight: 600;
  color: var(--set-accent);
  background: var(--set-accent-soft);
  border: 1px solid var(--set-accent-line);
  border-radius: 7px;
  padding: 2px 6px;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  vertical-align: baseline;
}

.automation-slot:hover { border-color: var(--set-accent); }

/* A ring that can be seen: the soft halo alone was a pale tint on a pale control, and a keyboard
   user could not tell which blank of the sentence they were in. */
.automation-slot:focus-visible {
  outline: 2px solid var(--set-accent);
  outline-offset: 1px;
  border-color: var(--set-accent);
  box-shadow: 0 0 0 3px var(--set-accent-soft);
}

.automation-slot.is-error {
  border-color: var(--set-danger-line);
  color: var(--set-danger);
  background: var(--set-danger-soft);
}

.automation-slot-number { width: 4.5em; }
.automation-slot-text { width: 15em; min-width: 0; max-width: 100%; }

.automation-recipe-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
  margin-top: auto;
  padding-top: 9px;
}

.automation-recipe-error,
.automation-recipe-lock {
  flex: 1 1 12em;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.automation-recipe-error { color: var(--set-danger); }
.automation-recipe-lock { color: var(--set-muted); }

.automation-guide-gate {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--set-danger);
}

.automation-guide-never {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--set-text-soft);
}

.automation-guide-more { margin-top: 10px; }

.automation-words { margin-top: 2px; }

.automation-guide-also {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}

.automation-guide-row {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 4px 18px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--set-accent-line);
}

.automation-guide-heading {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--set-text);
}

.automation-guide-list { margin: 0; padding-left: 16px; }
.automation-guide-list li { margin: 3px 0; break-inside: avoid; }

/* Nineteen schedule forms in one column made the panel twice as tall as the card. */
@media (min-width: 1100px) {
  .automation-guide-list.is-columns { columns: 2; column-gap: 26px; }
}
.automation-guide-list code { font-size: 12px; }
.automation-guide .automation-examples { margin: 0; }
.automation-guide-note { margin: 10px 0 0; font-size: 12.5px; opacity: 0.85; }

@media (max-width: 720px) {
  .automation-guide-row { grid-template-columns: minmax(0, 1fr); }
  .automation-recipes { grid-template-columns: minmax(0, 1fr); }
}



/* ============================================================================
   SETTINGS PAGE - 2026-09-19 restyle.

   Scoped to #settings-root, which ONLY templates/settings.html carries. Nine
   templates share the .settings-* classes (Connections, Plans, Profile, the two
   Admin pages, Review, Shortcuts, base.html) and none of them may move, so every
   rule below is written against that id and nothing here is a bare class.

   What it changes and why: the page read as generated because everything on it was
   the same size and weight - forty identical bordered cards, each holding a bordered
   box, every field stretched to the full width of a 1400px screen, 14px radii, 44px
   inputs and an emoji beside every title. This is the same page with a reading column,
   one hairline per rule instead of a frame, fields at a size you can scan, and a rule
   you open when you want it.

   Tokens are redefined here rather than at .settings-shell, so a value only applies
   inside this page - the shared block keeps its own numbers for everyone else.
   ============================================================================ */

#settings-root {
  --set-radius: 8px;
  --set-radius-sm: 6px;
  /* A form field is read, not admired: past ~860px the eye loses the line it is on,
     and a one-line input stretched to 1400px looks like a placeholder for something. */
  max-width: 860px;
}

/* --- the page header and its sections --- */

#settings-root .settings-title {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

#settings-root .settings-card {
  margin-bottom: 28px;
}

#settings-root .settings-card-head {
  align-items: baseline;
  gap: 12px;
}

#settings-root .settings-card-title {
  gap: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

#settings-root .settings-card-note {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

#settings-root .settings-actions {
  margin-top: 20px;
  padding-top: 14px;
}

/* --- controls --- */

#settings-root .settings-input,
#settings-root .settings-textarea,
#settings-root .settings-select {
  padding: 7px 10px;
  font-size: 13.5px;
}


#settings-root .settings-textarea {
  min-height: 62px;
}

#settings-root .settings-input:focus,
#settings-root .settings-textarea:focus,
#settings-root .settings-select:focus {
  box-shadow: 0 0 0 2px var(--set-accent-soft);
}

#settings-root .settings-btn {
  padding: 6px 12px;
  font-size: 13px;
  box-shadow: none;
}

#settings-root .settings-field {
  margin-top: 12px;
}

/* The caption over a field: small, quiet, and clearly not part of the sentence in the
   box under it. */
#settings-root .settings-field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--set-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- a rule: a row, not a card --- */

#settings-root .settings-rules {
  /* A grid item's min-width is `auto`, so a row that cannot shrink sets the width of the
     whole list: the head is one nowrap line, and on a phone that made every row 622px wide
     inside a 390px screen. minmax(0, 1fr) + min-width on the row is the fence. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 10px;
  border-top: 1px solid var(--set-line);
}

#settings-root .category-rule-card,
#settings-root .detection-rule-card {
  min-width: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--set-line);
  border-radius: 0;
  background: none;
}

#settings-root .rule-card-head {
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 0;
  flex-wrap: nowrap;
  cursor: pointer;
}

/* The head is the row: name, then the first words of the Detail, then the controls. */
#settings-root .rule-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
}

#settings-root .rule-summary-name {
  flex-shrink: 0;
  color: var(--set-text);
  font-size: 13.5px;
  font-weight: 600;
}

#settings-root .rule-summary-detail {
  overflow: hidden;
  color: var(--set-muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The row's open/shut control. A bordered chip rather than a bare glyph, so it reads as the
   button it is; the one chevron inside is turned over when the row is open, which is also the
   only thing that says which way it will go. */
#settings-root .rule-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--set-line);
  border-radius: 7px;
  background: var(--set-panel);
  color: var(--set-text-soft);
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s, color 0.16s, background 0.16s;
}

#settings-root .rule-expand svg {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform 0.18s ease;
}

#settings-root .rule-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

#settings-root .rule-expand:hover {
  border-color: var(--set-accent);
  background: var(--set-accent-soft);
  color: var(--set-accent);
}

/* Everything except the head - the fields, "Understood as", the trust blocks - belongs
   to the open state. Hidden, never removed: the collectors read these inputs with
   querySelector and a display:none field answers exactly as a visible one does. */
#settings-root .category-rule-card.is-collapsed > *:not(.rule-card-head),
#settings-root .detection-rule-card.is-collapsed > *:not(.rule-card-head) {
  display: none;
}

#settings-root .rule-toggle {
  margin-right: 0;
  flex-shrink: 0;
}

#settings-root .rule-badge {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

/* One column: Name and Keywords side by side put two unrelated questions on one line and
   made both of them 640px wide. */
#settings-root .rule-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 2px 2px 16px;
}

/* "Understood as" - the line that earns trust. It was a panel inside a card inside a
   card; it is a line under the fields it describes. */
#settings-root .rule-understood {
  margin: 0 2px 16px;
  padding: 10px 12px;
  border: 0;
  border-left: 2px solid var(--set-line-strong);
  border-radius: 0;
  background: none;
}

#settings-root .settings-guide-toggle {
  margin-top: 10px;
  font-size: 13px;
}

/* The plan's rule allowance. It sat in the button row as a third thing to read before you
   could press either button; it belongs with the sentence that describes the section. */
#settings-root .rule-slot-count {
  margin-left: 6px;
  color: var(--set-muted);
  font-size: 13px;
}

#settings-root .rule-slot-count.is-full {
  color: var(--set-danger);
}

/* Every row said "Active" in the affirmative colour, so seven rows shouted the one thing they
   all agreed on. On is the quiet default; only OFF is worth a colour. */
#settings-root .rule-toggle-state {
  font-size: 12.5px;
}

#settings-root .rule-toggle-state.is-on {
  color: var(--set-muted);
  font-weight: 400;
}

#settings-root .rule-toggle input[type="checkbox"] {
  width: 13px;
  height: 13px;
}

/* --- picking a rule up --------------------------------------------------------------
   The grip is the whole drag surface, and deliberately the only one: a draggable ROW on a
   phone cannot be told apart from a scroll, so the page would stop scrolling over the
   list. `touch-action: none` is what lets a finger drag it without the page moving too. */

#settings-root .rule-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 26px;
  margin-left: -4px;
  padding: 0;
  border: 0;
  border-radius: var(--set-radius-sm);
  background: none;
  color: var(--set-line-strong);
  cursor: grab;
  touch-action: none;
}

#settings-root .rule-grip svg {
  display: block;
  width: 15px;
  height: 15px;
}

#settings-root .rule-grip:hover {
  color: var(--set-text-soft);
}

#settings-root .rule-grip:active {
  cursor: grabbing;
}

/* The row in the air: lifted off the list, above its neighbours, and never animating its
   own position - it is following a finger, and a transition would lag behind it. */
#settings-root .category-rule-card.is-dragging,
#settings-root .detection-rule-card.is-dragging {
  position: relative;
  z-index: 2;
  border-radius: var(--set-radius-sm);
  background: var(--set-panel-soft);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  cursor: grabbing;
}

#settings-root .category-rule-card.is-dragging .rule-grip,
#settings-root .detection-rule-card.is-dragging .rule-grip {
  color: var(--set-accent);
}

/* While a row is in the air the pointer is a tool, not a caret: without this, dragging
   selects every label it passes over. */
#settings-root.is-reordering,
#settings-root.is-reordering * {
  user-select: none;
  -webkit-user-select: none;
}

#settings-root.is-reordering .rule-expand {
  pointer-events: none;
}

/* ============================================================================
   THE SETTINGS DIALOG (2026-09-21)

   Settings, Profile, Plans, Connections, Shortcuts, Review and Admin are one area, and that
   area is a dialog: a panel centred on a dimmed backdrop, with its own section rail down the
   left and one scrolling column on the right.

   It is still a PAGE - `settings_layout` in base.html wraps the rail and the content in
   `.settings-dialog` and style.css does the rest - so the URL, the back button, refresh,
   deep links and every bookmark work exactly as they did. What goes away is the app's own
   chrome: the top bar (search, Launch Agent, Daily Report, the avatar and the theme menu)
   and the brand block over the rail. None of it belongs to settings, and all of it was
   noise around a dialog.

   Below the 900px rail pivot the panel is the whole screen - a dialog inside a phone is a
   page with wasted edges - and that rule lives in static/css/responsive.css.
   ============================================================================ */

body.settings-page {
  background: var(--set-scrim, rgba(15, 23, 42, 0.45));
}

/* The app header, hidden only where the dialog exists. Below the 900px pivot it stays: the
   hamburger in it is the only way to the section rail at that width (static/css/responsive.css
   dissolves the panel there), and a settings page you cannot navigate is worse than one with a
   header on it. Hidden rather than removed from the template because it carries the profile
   menu and the theme popup, which every other page needs.
   `!important` because the rule it overrides has it (`@media (min-width: 901px)` pins the
   header with `display: flex !important`) - the one case CLAUDE.md allows it. */
@media (min-width: 901px) {
  body.settings-page .hamburger-container {
    display: none !important;
  }
}

body.settings-page .gmail-layout {
  display: block;
  min-height: 100vh;
  padding: 4vh 20px;
  box-sizing: border-box;
}

.settings-dialog {
  position: relative;
  display: flex;
  width: min(1120px, 100%);
  height: min(880px, 92vh);
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.28);
  overflow: hidden;
}

/* The rail is fixed to the viewport on the mail pages; inside the dialog it is a column of it. */
body.settings-page .settings-dialog .sidebar {
  position: static;
  width: 244px;
  height: auto;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--set-panel-soft, var(--card));
  padding: 18px 14px !important;
}

/* On the mail pages the content column is pushed clear of the FIXED rail (`margin-left: 260px`
   and a 72px top padding for the header, both `!important`). Inside the dialog the rail is a
   sibling column and the header is gone, so both come off - with `!important`, because that is
   what they were set with. */
body.settings-page .settings-dialog main.inbox {
  flex: 1;
  min-width: 0;
  height: auto;
  margin-left: 0 !important;
  width: auto !important;
  padding: 26px 34px 34px !important;
  overflow-y: auto;
}

.settings-dialog-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--muted, #94a3b8);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.16s, color 0.16s;
}

.settings-dialog-close:hover {
  background: var(--set-panel-soft, rgba(148, 163, 184, 0.16));
  color: var(--text);
}

html[data-theme='dark'] body.settings-page {
  background: rgba(2, 6, 23, 0.62);
}

html[data-theme='dark'] .settings-dialog {
  box-shadow: 0 26px 80px rgba(2, 6, 23, 0.6);
}

/* ============================================================================
   CATEGORY COLOURS (2026-09-30)

   Every category chip used to be the same grey, so "Urgent" looked exactly like "Job" down a
   list. A category now carries a palette KEY (utils/rules_core.CATEGORY_COLORS) and the element
   that shows it carries `data-cat-color="<key>"`: the inbox row chip, the Categories bar, the
   email page's badge, and the swatches and row dot in Settings. Each key sets four tokens here,
   once per theme, and every one of those elements reads the tokens - so no script ever writes
   a colour, and a Light/Dark switch recolours everything at once.

     --cat-bg    the pill's fill          --cat-fg   its text
     --cat-line  the pill's border        --cat-dot  a solid dot or swatch

   `grey` is the look every chip had before, and what a category of your own starts in.
   ============================================================================ */

[data-cat-color="red"] { --cat-bg: #fee2e2; --cat-fg: #b91c1c; --cat-line: #fca5a5; --cat-dot: #dc2626; }
[data-cat-color="orange"] { --cat-bg: #ffedd5; --cat-fg: #c2410c; --cat-line: #fdba74; --cat-dot: #ea580c; }
[data-cat-color="amber"] { --cat-bg: #fef3c7; --cat-fg: #b45309; --cat-line: #fcd34d; --cat-dot: #d97706; }
[data-cat-color="green"] { --cat-bg: #dcfce7; --cat-fg: #15803d; --cat-line: #86efac; --cat-dot: #16a34a; }
[data-cat-color="teal"] { --cat-bg: #ccfbf1; --cat-fg: #0f766e; --cat-line: #5eead4; --cat-dot: #0d9488; }
[data-cat-color="blue"] { --cat-bg: #dbeafe; --cat-fg: #1d4ed8; --cat-line: #93c5fd; --cat-dot: #2563eb; }
[data-cat-color="indigo"] { --cat-bg: #e0e7ff; --cat-fg: #4338ca; --cat-line: #a5b4fc; --cat-dot: #4f46e5; }
[data-cat-color="purple"] { --cat-bg: #f3e8ff; --cat-fg: #7e22ce; --cat-line: #d8b4fe; --cat-dot: #9333ea; }
[data-cat-color="pink"] { --cat-bg: #fce7f3; --cat-fg: #be185d; --cat-line: #f9a8d4; --cat-dot: #db2777; }
[data-cat-color="grey"] { --cat-bg: rgba(100, 116, 139, 0.12); --cat-fg: #334155; --cat-line: rgba(100, 116, 139, 0.35); --cat-dot: #64748b; }

html[data-theme='dark'] [data-cat-color="red"] { --cat-bg: rgba(248, 113, 113, 0.18); --cat-fg: #fecaca; --cat-line: rgba(248, 113, 113, 0.45); --cat-dot: #f87171; }
html[data-theme='dark'] [data-cat-color="orange"] { --cat-bg: rgba(251, 146, 60, 0.18); --cat-fg: #fed7aa; --cat-line: rgba(251, 146, 60, 0.45); --cat-dot: #fb923c; }
html[data-theme='dark'] [data-cat-color="amber"] { --cat-bg: rgba(251, 191, 36, 0.16); --cat-fg: #fde68a; --cat-line: rgba(251, 191, 36, 0.42); --cat-dot: #fbbf24; }
html[data-theme='dark'] [data-cat-color="green"] { --cat-bg: rgba(74, 222, 128, 0.16); --cat-fg: #bbf7d0; --cat-line: rgba(74, 222, 128, 0.42); --cat-dot: #4ade80; }
html[data-theme='dark'] [data-cat-color="teal"] { --cat-bg: rgba(45, 212, 191, 0.16); --cat-fg: #99f6e4; --cat-line: rgba(45, 212, 191, 0.42); --cat-dot: #2dd4bf; }
html[data-theme='dark'] [data-cat-color="blue"] { --cat-bg: rgba(96, 165, 250, 0.18); --cat-fg: #bfdbfe; --cat-line: rgba(96, 165, 250, 0.45); --cat-dot: #60a5fa; }
html[data-theme='dark'] [data-cat-color="indigo"] { --cat-bg: rgba(129, 140, 248, 0.2); --cat-fg: #c7d2fe; --cat-line: rgba(129, 140, 248, 0.45); --cat-dot: #818cf8; }
html[data-theme='dark'] [data-cat-color="purple"] { --cat-bg: rgba(192, 132, 252, 0.18); --cat-fg: #e9d5ff; --cat-line: rgba(192, 132, 252, 0.45); --cat-dot: #c084fc; }
html[data-theme='dark'] [data-cat-color="pink"] { --cat-bg: rgba(244, 114, 182, 0.18); --cat-fg: #fbcfe8; --cat-line: rgba(244, 114, 182, 0.45); --cat-dot: #f472b6; }
html[data-theme='dark'] [data-cat-color="grey"] { --cat-bg: rgba(148, 163, 184, 0.18); --cat-fg: #e2e8f0; --cat-line: rgba(148, 163, 184, 0.45); --cat-dot: #94a3b8; }

/* The inbox row chip. The dark selector is needed as well as the light one: the plain
   `html[data-theme='dark'] .row-category-chip` rule (and responsive.css's phone rules) would
   otherwise outrank the colour. */
.row-category-chip[data-cat-color] {
  border-color: var(--cat-line);
  color: var(--cat-fg);
  background: var(--cat-bg);
}

html[data-theme='dark'] .row-category-chip[data-cat-color] {
  border-color: var(--cat-line);
  color: var(--cat-fg);
  background: var(--cat-bg);
}

/* The Categories bar: a dot in the category's colour ahead of its name. The chip itself keeps
   its own is-active look, so which filter is on still reads the same way. */
.category-filter-chip[data-cat-color]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--cat-dot);
  vertical-align: 1px;
}

/* The email page: the box under the header and its badge. These were inline styles, which kept
   the box light in dark mode and outranked any colour the badge could be given. */
.classification-display {
  margin: -8px 0 12px 0;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

html[data-theme='dark'] .classification-display {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
}

.classification-badge {
  padding: 4px 10px;
  border: 1px solid var(--cat-line);
  border-radius: 6px;
  background: var(--cat-bg);
  color: var(--cat-fg);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.classification-dismiss {
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
}

html[data-theme='dark'] .classification-dismiss {
  border-color: #475569;
  background: #1e293b;
  color: #94a3b8;
}

/* Settings: the picker on every category card, and the dot on a closed row. Scoped to the
   Settings page like the rest of its rules (tests/test_settings_restyle.py). The swatches are
   real radio buttons, laid over their dots and made transparent, so a click, a tap and the arrow
   keys all land on the input itself. */
#settings-root .cat-color-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

#settings-root .cat-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#settings-root .cat-swatch {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

#settings-root .cat-swatch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#settings-root .cat-swatch-dot {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cat-dot);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
  transition: box-shadow 0.15s;
}

#settings-root .cat-swatch input:checked + .cat-swatch-dot {
  box-shadow: 0 0 0 2px var(--set-panel, #ffffff), 0 0 0 4px var(--cat-dot);
}

#settings-root .cat-swatch input:focus-visible + .cat-swatch-dot {
  outline: 2px solid var(--cat-dot);
  outline-offset: 5px;
}

#settings-root .cat-color-preview {
  margin: 0;
  max-width: 220px;
}

#settings-root .rule-summary-dot {
  flex: none;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cat-dot);
}

#settings-root .rule-summary-dot[hidden] {
  display: none;
}

/* ============================================================================
   SETTINGS - THE PRIVACY TAB (2026-10-04)

   Short and simple, by the owner's call, after Claude's own Privacy page: a group title, a
   one-line lede, then rows - what it is and one line about it on the left, its control on the
   right - divided by hairlines instead of boxed in fieldsets. Scoped to #settings-root like the
   restyle above (nine templates share the .settings-* names), and drawn from the --set-* tokens,
   so both themes follow. Below 600px, responsive.css lets a wide control (the picker, the
   provider chips) drop under its words; a switch never does.
   ============================================================================ */

#settings-root .set-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#settings-root .set-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#settings-root .set-group-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--set-text);
}

#settings-root .set-group-lede {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--set-muted);
}

#settings-root .set-group-lede a {
  color: var(--set-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#settings-root .set-list {
  display: flex;
  flex-direction: column;
}

#settings-root .set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--set-line);
  color: var(--set-text);
  text-decoration: none;
}

#settings-root .set-row:last-child {
  border-bottom: 0;
}

/* A switch row is one control: its words are the switch's label, and the switch never wraps under
   them. A link row is the same - its arrow belongs at the end of its line, not under it. */
#settings-root .set-row.is-toggle,
#settings-root .set-row-link {
  flex-wrap: nowrap;
}

#settings-root .set-row.is-toggle {
  cursor: pointer;
}

/* A button that is a link (Export data, Manage) reads as a button, not as underlined text. */
#settings-root .set-row a.settings-btn {
  text-decoration: none;
}

#settings-root .set-row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 300px;
  min-width: 0;
}

#settings-root .set-row.is-toggle .set-row-text,
#settings-root .set-row-link .set-row-text {
  flex: 1 1 auto;
}

#settings-root .set-row-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--set-text);
}

#settings-root .set-row-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--set-muted);
}

#settings-root .set-row-link:hover .set-row-title {
  color: var(--set-accent);
}

#settings-root .set-row-link:focus-visible {
  outline: 2px solid var(--set-accent);
  outline-offset: 2px;
  border-radius: var(--set-radius-sm);
}

#settings-root .set-row-chevron {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--set-muted);
}

#settings-root .set-row-control {
  flex-shrink: 0;
}

/* The room the shared select chevron sits in (`.settings-shell select`), which the page's own
   `#settings-root .settings-input` padding would otherwise take back. */
#settings-root .set-row .set-row-select {
  width: auto;
  min-width: 190px;
  flex: 0 0 auto;
  padding-right: 30px;
}

/* The switch: a real checkbox laid over a drawn track - it takes focus, and a screen reader reads
   it as a switch (role="switch") - so a tap anywhere on it is a tap on the checkbox. */
#settings-root .set-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

#settings-root .set-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#settings-root .set-switch-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--set-line-strong);
  transition: background-color 0.18s ease;
}

#settings-root .set-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 17, 20, 0.3);
  transition: transform 0.18s ease;
}

#settings-root .set-switch input:checked + .set-switch-track {
  background: var(--accent-solid);
}

#settings-root .set-switch input:checked + .set-switch-track::after {
  transform: translateX(18px);
}

#settings-root .set-switch input:focus-visible + .set-switch-track {
  outline: 2px solid var(--set-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #settings-root .set-switch-track,
  #settings-root .set-switch-track::after {
    transition: none;
  }
}