/* Soft ceramic theme — no hard outlines. Raised parts use a top highlight and soft
   drop shadows; inputs and tracks are recessed with inner shadows. */

:root {
  --bg: #eceff1;
  --bg-top: #f5f6f7;
  --surface: #f9fafb;
  --sunk: #e8ecef;
  --raised-1: #ffffff;
  --raised-2: #f0f2f4;
  --text: #1d2730;
  --muted: #66727c;
  --faint: #9aa5ae;
  --hair: rgba(16, 24, 32, 0.07);

  --accent: #14181c;
  --accent-1: #2c3238;
  --accent-2: #0b0e11;
  --accent-text: #14181c;
  --accent-soft: #e4e7ea;
  --accent-row: #eceef0;
  /* Status "good" stays green: delivered, read, valid, completed */
  --good: #1fa850;
  --good-text: #0d7f40;
  --good-soft: #e1f6e9;

  --danger: #d13a31;
  --danger-soft: #fde9e7;
  --warn: #8f6200;
  --warn-soft: #fdf1d3;
  --info: #2b67b0;
  --info-soft: #e4eef9;
  --violet: #6b4cc0;
  --violet-soft: #eee8fb;

  --sh-raised: 0 1px 1px rgba(16, 24, 32, 0.06), 0 2px 7px -1px rgba(16, 24, 32, 0.11), inset 0 1px 0 rgba(255, 255, 255, 1);
  --sh-raised-hi: 0 1px 1px rgba(16, 24, 32, 0.07), 0 8px 18px -6px rgba(16, 24, 32, 0.2), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(16, 24, 32, 0.045);
  --sh-pressed: inset 0 1px 3px rgba(16, 24, 32, 0.14), inset 0 0 0 1px rgba(16, 24, 32, 0.025);
  --sh-sunk: inset 0 1px 2.5px rgba(16, 24, 32, 0.09), inset 0 0 0 1px rgba(16, 24, 32, 0.025), 0 1px 0 rgba(255, 255, 255, 0.9);
  --sh-card: 0 1px 2px rgba(16, 24, 32, 0.04), 0 14px 34px -18px rgba(16, 24, 32, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --sh-accent: 0 1px 1px rgba(0, 0, 0, 0.25), 0 6px 14px -5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  --sh-accent-hi: 0 1px 1px rgba(0, 0, 0, 0.25), 0 10px 22px -6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.2);

  /* Toggle */
  --bezel: linear-gradient(180deg, #d3d9de 0%, #fdfdfd 100%);
  --track-off: linear-gradient(180deg, #c9cfd4 0%, #dde1e5 100%);
  --track-on: linear-gradient(180deg, #0b0e11 0%, #3a4148 100%);
  --track-sh: inset 0 2px 4px rgba(16, 24, 32, 0.22), inset 0 0 0 1px rgba(16, 24, 32, 0.06);
  --lbl-off: #87919a;
  --lbl-on: #ffffff;
  --knob: linear-gradient(180deg, #ffffff 0%, #eef0f2 100%);
  --knob-sh: 0 1px 1px rgba(16, 24, 32, 0.12), 0 3px 7px rgba(16, 24, 32, 0.22), 0 0 0 0.5px rgba(16, 24, 32, 0.08), inset 0 -2px 2px rgba(16, 24, 32, 0.05);
  --bezel-sh: inset 0 1px 1px rgba(16, 24, 32, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 5px -2px rgba(16, 24, 32, 0.08);

  --chat: #f5f1eb; /* WhatsApp's light chat background */
  --bubble: #ffffff;
  --field: #f1f3f5;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2366727c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* Frosted glass for floating layers */
  --glass: rgba(249, 250, 251, 0.58);
  --glass-strong: rgba(249, 250, 251, 0.72);
  --glass-blur: blur(22px) saturate(1.8);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08));
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  --toast-glass: rgba(29, 39, 48, 0.72);
  /* Charts: one green that clears 3:1 on the surface (validated) */
  --chart: #14181c;
  --chart-hover: #000000;
  /* Shades for multi-part bars (read → delivered → sent) */
  --chart-2: #6b747c;
  --chart-3: #b9c0c6;
  --chart-grid: rgba(16, 24, 32, 0.08);
  --spark: #b5bec6;
  --meter-track: #e2e5e8;
  --on-accent: #ffffff;
  --ring: rgba(20, 24, 28, 0.28);
  color-scheme: light;
}

:root[data-mode="dark"] {
  --bg: #111518;
  --bg-top: #171c20;
  --surface: #1a1f24;
  --sunk: #12161a;
  --raised-1: #2b323a;
  --raised-2: #232930;
  --text: #e5eaee;
  --muted: #929ea8;
  --faint: #66727c;
  --hair: rgba(255, 255, 255, 0.06);
  --accent-text: #ffffff;
  --accent-soft: #2b3238;
  --accent-row: #22282d;
  --good-text: #4fe08d;
  --good-soft: #173525;
  --danger: #f2817a;
  --danger-soft: #3b1f1d;
  --warn: #f0c45c;
  --warn-soft: #362d15;
  --info: #8ab8f0;
  --info-soft: #1b2a3d;
  --violet: #b8a3f3;
  --violet-soft: #2a2341;
  --sh-raised: 0 1px 1px rgba(0, 0, 0, 0.45), 0 3px 8px -2px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --sh-raised-hi: 0 1px 1px rgba(0, 0, 0, 0.45), 0 10px 22px -6px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --sh-pressed: inset 0 1px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.015);
  --sh-sunk: inset 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 1px 0 rgba(255, 255, 255, 0.04);
  --sh-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 36px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --sh-accent: 0 1px 1px rgba(0, 0, 0, 0.5), 0 6px 16px -6px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --sh-accent-hi: 0 1px 1px rgba(0, 0, 0, 0.5), 0 10px 24px -6px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --bezel: linear-gradient(180deg, #0d1013 0%, #262c32 100%);
  --track-off: linear-gradient(180deg, #0c0f12 0%, #191e23 100%);
  --track-sh: inset 0 2px 5px rgba(0, 0, 0, 0.7);
  --lbl-off: #5c6770;
  --knob: linear-gradient(180deg, #f3f5f6 0%, #cdd3d8 100%);
  --knob-sh: 0 1px 1px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 -2px 2px rgba(0, 0, 0, 0.12);
  --bezel-sh: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.04);
  --chat: #0b141a;
  --bubble: #1f2c34;
  --field: #15191d;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23929ea8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --glass: rgba(26, 31, 36, 0.55);
  --glass-strong: rgba(26, 31, 36, 0.7);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --toast-glass: rgba(229, 234, 238, 0.78);
  --chart: #e5eaee;
  --chart-hover: #ffffff;
  --chart-2: #8f99a2;
  --chart-3: #4b5660;
  --chart-grid: rgba(255, 255, 255, 0.07);
  --spark: #4b5660;
  --meter-track: #2b3238;
  /* Primary flips to white in dark mode */
  --accent: #ffffff;
  --accent-1: #f4f6f7;
  --accent-2: #d2d7db;
  --track-on: linear-gradient(180deg, #d2d7db 0%, #ffffff 100%);
  --lbl-on: #14181c;
  --on-accent: #14181c;
  --ring: rgba(255, 255, 255, 0.35);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { background-color: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-top) 0, var(--bg) 420px);
  color: var(--text);
  font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
code { background: var(--sunk); padding: 1px 6px; border-radius: 5px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
kbd { font: 600 11px Inter, sans-serif; padding: 1px 6px; border-radius: 5px; background: linear-gradient(var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised); }
h1 { font-size: 22px; letter-spacing: -0.02em; margin: 0 0 4px; font-weight: 700; }
h2 { font-size: 15px; letter-spacing: -0.01em; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; font-weight: 600; }
h3 { font-weight: 600; }
.hidden { display: none !important; }
/* The Assistant and AI settings are admin-only for now (app.js sets this from /api/me). */
body.no-ai [data-tab="assistant"], body.no-ai [data-goto="assistant"], body.no-ai .ai-settings, body.no-ai .lead-settings { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.sub { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.opt { color: var(--faint); font-weight: 400; font-size: 12.5px; margin-left: 4px; }
::selection { background: var(--ring); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: 10px; border: 0;
  background: linear-gradient(180deg, var(--raised-1), var(--raised-2));
  box-shadow: var(--sh-raised);
  color: var(--text); font: 600 13.5px Inter, sans-serif; letter-spacing: -0.005em;
  cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none;
  transition: box-shadow 0.15s, transform 0.08s, background 0.15s, color 0.15s;
}
.btn:hover:not(:disabled) { box-shadow: var(--sh-raised-hi); }
.btn:active:not(:disabled) { box-shadow: var(--sh-pressed); background: var(--raised-2); transform: translateY(0.5px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Anything without its own focus style (icon buttons, links) gets the primary colour, not the browser's blue. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:focus-visible, .seg button:focus-visible { outline: 0; box-shadow: var(--sh-raised), 0 0 0 3px var(--ring); }
.toggle input:focus-visible + .track { outline: 3px solid var(--ring); outline-offset: 3px; }

.btn.primary {
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  box-shadow: var(--sh-accent); color: var(--on-accent);
}
.btn.primary:hover:not(:disabled) { box-shadow: var(--sh-accent-hi); }
.btn.primary:active:not(:disabled) { background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35); }

.btn.danger { color: var(--danger); }
.btn.danger-solid { background: linear-gradient(180deg, #ec5a51, #cf352c); color: #fff; box-shadow: 0 1px 1px rgba(120, 20, 10, 0.3), 0 6px 14px -5px rgba(210, 50, 40, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); text-shadow: 0 1px 1px rgba(100, 0, 0, 0.25); }

/* Quiet: tertiary actions, no chrome until hovered */
.btn.quiet, .btn.ghost { background: transparent; box-shadow: none; color: var(--muted); }
.btn.quiet:hover:not(:disabled), .btn.ghost:hover:not(:disabled) { background: var(--sunk); box-shadow: none; color: var(--text); }
.btn.quiet:active:not(:disabled), .btn.ghost:active:not(:disabled) { box-shadow: var(--sh-pressed); }
.btn.quiet.danger { color: var(--danger); }

.btn.secondary { color: var(--accent-text); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn.big { height: 46px; padding: 0 26px; font-size: 15px; }
.btn.file { overflow: hidden; margin: 0; }
.btn.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.icon-btn { border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; }
.icon-btn:hover { background: var(--sunk); color: var(--text); }

/* ---------- Segmented control: recessed track, raised ceramic thumb ---------- */
.seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; flex: none;
  background: var(--sunk); box-shadow: var(--sh-sunk);
}
.seg > button, .seg > span {
  height: 30px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
  font: 500 13px Inter, sans-serif; color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
  display: inline-flex; align-items: center;
}
.seg > span { cursor: default; font-variant-numeric: tabular-nums; }
.seg > button:hover:not(:disabled):not(.active) { color: var(--text); }
.seg > button.active { background: linear-gradient(180deg, var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised); color: var(--text); font-weight: 600; }
.seg > button:disabled { opacity: 0.35; cursor: not-allowed; }
.seg-icons > button { width: 30px; padding: 0; justify-content: center; font-size: 14px; }

/* ---------- Toggle (ceramic switch with ON/OFF) ---------- */
.toggle { position: relative; display: inline-flex; flex: none; padding: 4px; border-radius: 999px; background: var(--bezel); box-shadow: var(--bezel-sh); cursor: pointer; margin: 0; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.toggle .track {
  position: relative; display: block; width: 74px; height: 34px; border-radius: 999px;
  background: var(--track-off); box-shadow: var(--track-sh); overflow: hidden;
  transition: background 0.25s;
}
.toggle .lbl {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  font: 800 13px Inter, sans-serif; letter-spacing: 0.04em; transition: opacity 0.2s;
}
.toggle .lbl.on { left: 12px; color: var(--lbl-on); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 0; }
.toggle .lbl.off { right: 10px; color: var(--lbl-off); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
:root[data-mode="dark"] .toggle .lbl.off { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); }
.toggle .knob {
  position: absolute; top: 2px; left: 2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--knob); box-shadow: var(--knob-sh);
  transition: transform 0.25s cubic-bezier(0.3, 1.3, 0.5, 1), width 0.15s;
}
.toggle input:checked + .track { background: var(--track-on); }
.toggle input:checked + .track .lbl.on { opacity: 1; }
.toggle input:checked + .track .lbl.off { opacity: 0; }
.toggle input:checked + .track .knob { transform: translateX(40px); }
.toggle input:disabled + .track { opacity: 0.5; }
.toggle:active .knob { width: 34px; }
.toggle:active input:checked + .track .knob { transform: translateX(36px); }
/* Compact size for lists */
.toggle.sm { padding: 3px; }
.toggle.sm .track { width: 56px; height: 26px; }
.toggle.sm .lbl { font-size: 10.5px; }
.toggle.sm .lbl.on { left: 9px; }
.toggle.sm .lbl.off { right: 7px; }
.toggle.sm .knob { width: 22px; height: 22px; }
.toggle.sm input:checked + .track .knob { transform: translateX(30px); }
.toggle.sm:active .knob { width: 25px; }
.toggle.sm:active input:checked + .track .knob { transform: translateX(27px); }

/* ---------- Checkbox ---------- */
input.cb {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 18px; height: 18px; border-radius: 6px; cursor: pointer; vertical-align: middle;
  background: var(--field); box-shadow: var(--sh-sunk); border: 0; padding: 0;
  transition: background 0.12s, box-shadow 0.12s;
}
input.cb:checked, input.cb:indeterminate {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(180deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
input.cb:indeterminate {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(180deg, var(--accent-1), var(--accent-2));
}
input.cb:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Fields ---------- */
label, .field-label { display: block; font-weight: 500; font-size: 13px; margin-bottom: 16px; }
.field-label { margin-bottom: 10px; }
label.inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; color: var(--muted); }
label.inline select { width: auto; margin: 0; color: var(--text); }
input:not([type="checkbox"]):not([type="file"]), select, textarea {
  display: block; width: 100%; margin-top: 6px;
  height: 40px; padding: 0 14px; border: 0; border-radius: 10px;
  background-color: var(--field); box-shadow: var(--sh-sunk);
  color: var(--text); font: 400 14px Inter, sans-serif;
  transition: box-shadow 0.15s, background-color 0.15s;
}
textarea { height: auto; padding: 12px 14px; resize: vertical; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0 0 12px; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: 0; box-shadow: var(--sh-sunk), 0 0 0 3px var(--ring); }
input[readonly] { color: var(--muted); }
.row input:not([type="checkbox"]) { margin-top: 0; }
.input-group { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.input-group input { margin: 0 !important; flex: 1; }
.link { display: inline; color: var(--accent-text); font-weight: 600; cursor: pointer; margin: 0; font-size: inherit; }
.link:hover { text-decoration: underline; }

/* ---------- Sidebar ---------- */
:root { --nav-w: 256px; }
body { padding-left: var(--nav-w); }
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: var(--nav-w);
  display: flex; flex-direction: column; gap: 22px; padding: 18px 14px 16px;
  background: color-mix(in srgb, var(--sunk) 55%, var(--bg));
  box-shadow: inset -1px 0 0 var(--hair); /* inside its own edge: the pinned page headers (z 24–25) would otherwise paint over it */
}
.brand { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 4px 8px; }
/* The mark: a chat bubble that winks, with a smile that ends in a delivered tick. */
.logo { width: 28px; height: 28px; flex: none; display: block; color: var(--text); }
.logo-eye { transform-box: fill-box; transform-origin: center; transition: transform 0.18s var(--ease-out); }
.brand:hover .logo-eye { transform: scaleY(0.15); }
.brand-name { font: 600 15px Outfit, Inter, sans-serif; letter-spacing: -0.015em; min-width: 0; margin-right: 6px; overflow: hidden; text-overflow: ellipsis; }
/* The page list is a vertical .seg, so the ceramic thumb slides between pages. */
.side-nav.seg { display: flex; flex-direction: column; gap: 2px; padding: 0; background: none; box-shadow: none; }
.side-nav.seg > button { display: flex; width: 100%; height: 38px; padding: 0 12px; gap: 10px; font-size: 14px; justify-content: flex-start; }
.side-foot { margin-top: auto; padding: 14px 4px 0; box-shadow: 0 -1px 0 var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.badge {
  border: 0; cursor: pointer; font: 700 11px Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  height: 26px; padding: 0 12px; border-radius: 99px; display: inline-flex; align-items: center; gap: 7px;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.demo { background: var(--warn-soft); color: var(--warn); }
.badge.live { background: var(--accent-soft); color: var(--accent-text); }
.badge.live::before { box-shadow: 0 0 0 3px var(--ring); }

.banner {
  max-width: 1544px; margin: 16px auto 0; padding: 10px 16px; border-radius: 11px;
  display: flex; gap: 10px; align-items: center;
  background: var(--warn-soft); color: var(--warn); font-size: 13px;
  width: calc(100% - 56px);
}
.banner .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.banner a { color: inherit; font-weight: 600; }

main { max-width: 1600px; margin: 0 auto; padding: 24px 28px 40px; } /* wide enough to fill the screen with the sidebar open or collapsed; capped so huge monitors stay readable */

/* ---------- Layout ---------- */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.span-2 { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.sticky { position: sticky; top: 24px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.tight { gap: 6px; }
.row > input, .row > label { flex: 1; min-width: 140px; }
.row > label.btn { flex: none; min-width: 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }

.card {
  background: var(--surface); border-radius: 11px; padding: 24px;
  box-shadow: var(--sh-card);
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.card-head h2 { margin: 0; }
.card-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.step {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 700;
}

/* Settings row with toggle */
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 18px; margin-bottom: 18px; box-shadow: 0 1px 0 var(--hair); }
.setting-title { font-weight: 600; }

/* Sender toggles on the Send page */
.toggle-list { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 10px; background: var(--sunk); box-shadow: var(--sh-sunk); }
.toggle-item { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 10px; margin: 0; cursor: pointer; transition: background 0.15s; }
.toggle-item:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.toggle-item .ti-name { font-weight: 600; }
.toggle-item .ti-meta { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.toggle-item .toggle { margin-left: auto; }
.toggle-list .empty-note { padding: 14px; color: var(--muted); font-weight: 400; }

/* ---------- Upload ---------- */
.dropzone {
  border-radius: 11px; padding: 40px 20px; text-align: center;
  background: var(--sunk); box-shadow: var(--sh-sunk);
  transition: background 0.2s, box-shadow 0.2s;
}
.dropzone.over { background: var(--accent-soft); box-shadow: var(--sh-sunk), 0 0 0 3px var(--ring); }
.dz-icon { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-text); background: linear-gradient(180deg, var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised-hi); }
.dz-title { font-weight: 600; font-size: 15px; }

/* ---------- Data table ---------- */
.table-tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.file-info { font-weight: 600; margin-right: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tools-right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.search-wrap { position: relative; }
/* Centred with margins, not a transform, so the hover animation can use transform freely. */
.search-wrap svg { position: absolute; left: 13px; top: 0; bottom: 0; margin: auto 0; color: var(--faint); pointer-events: none; z-index: 1; transition: color 0.2s; }
.search-wrap:focus-within svg { color: var(--text); }
.search { width: 240px; margin: 0 !important; padding-left: 36px !important; }

.sel-bar { display: flex; gap: 4px 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; min-height: 30px; }
.sel-count { font-weight: 600; padding-right: 6px; }
.sel-count b { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.sel-actions { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.hint { margin-left: auto; color: var(--faint); font-size: 12px; }

.table-scroll { overflow: auto; max-height: 560px; border-radius: 10px; background: var(--field); box-shadow: var(--sh-sunk); }
.data-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.data-table th, .data-table td { padding: 9px 12px; white-space: nowrap; text-align: left; }
.data-table tbody td { box-shadow: inset 0 -1px 0 var(--hair); }
.data-table thead th { position: sticky; z-index: 2; background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.data-table thead tr.heads th { top: 0; padding-top: 11px; padding-bottom: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.data-table thead tr.filters th { top: var(--head-h, 36px); padding: 2px 6px 10px; box-shadow: 0 1px 0 var(--hair), 0 6px 10px -8px rgba(16, 24, 32, 0.18); }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--text); }
.data-table th .arrow { display: inline-block; margin-left: 5px; font-size: 10px; opacity: 0.45; }
.data-table th.sorted { color: var(--accent-text); }
.data-table th.sorted .arrow { opacity: 1; }
.data-table .filters input, .data-table .filters select { margin: 0; height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; min-width: 96px; }
.data-table .filters select { padding-right: 28px; background-position: right 9px center; }
.data-table .filters .active { box-shadow: var(--sh-sunk), 0 0 0 2px var(--ring); }
.data-table td.sel, .data-table th.sel { width: 40px; padding-left: 16px; padding-right: 4px; }
.data-table td.idx { color: var(--faint); font-variant-numeric: tabular-nums; width: 1%; font-size: 12px; }
.data-table tbody tr { cursor: pointer; user-select: none; transition: background 0.1s; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--sunk) 70%, transparent); }
.data-table tbody tr.selected { background: var(--accent-row); }
.data-table tbody tr.selected:hover { background: color-mix(in srgb, var(--accent-row) 80%, var(--sunk)); }
.data-table tbody tr.invalid { cursor: not-allowed; color: var(--faint); }
.data-table tbody tr.anchor td.sel { box-shadow: inset 3px 0 0 var(--accent), inset 0 -1px 0 var(--hair); }
.data-table td.empty-cell { color: var(--faint); }
.table-empty { padding: 36px !important; text-align: center !important; color: var(--muted); }
.table-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--muted); }
.table-foot .foot-right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- Personalise ---------- */
.map-row { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; align-items: center; padding: 10px 0; box-shadow: 0 1px 0 var(--hair); }
.map-row:last-child { box-shadow: none; }
.map-row select, .map-row input { margin: 0 !important; }
.map-row .m-input { grid-column: 2; }
.var-key { font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
.var-key small { display: block; font: 400 11.5px Inter, sans-serif; color: var(--faint); }

/* ---------- WhatsApp preview ---------- */
.phone { background: var(--chat); border-radius: 10px; padding: 20px 16px; min-height: 140px; box-shadow: var(--sh-sunk); }
.bubble {
  background: var(--bubble); border-radius: 0 12px 12px 12px; padding: 8px 11px 7px;
  max-width: 92%; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.13); white-space: pre-wrap; word-wrap: break-word; font-size: 14px;
}
.bubble .hdr { font-weight: 700; margin-bottom: 4px; }
/* An uploaded or linked header image keeps its own shape; very tall ones are capped and shown whole. */
.bubble .media-img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; border-radius: 8px; margin-bottom: 6px; }
.bubble .media { background: var(--sunk); border-radius: 8px; height: 120px; display: grid; place-items: center; color: var(--muted); margin-bottom: 6px; font-size: 12px; background-size: cover; background-position: center; }
.bubble .ftr { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.bubble .btns { margin: 7px -11px -7px; box-shadow: 0 -1px 0 var(--hair); }
.bubble .btns div { display: flex; align-items: center; justify-content: center; gap: 7px; color: #0a84ff; padding: 8px; font-weight: 500; box-shadow: 0 -1px 0 var(--hair); }
.bubble .btns svg { flex: none; }
.bubble .var { background: var(--accent-soft); color: var(--accent-text); border-radius: 4px; padding: 0 3px; }
.bubble .var.empty { background: var(--danger-soft); color: var(--danger); }
.phone + .sub { margin-top: 10px; }

/* ---------- Send bar ---------- */
.sendbar {
  position: sticky; bottom: 16px; z-index: 5; margin-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 12px 12px 24px; border-radius: 10px;
  background: var(--glass-sheen), var(--glass);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 18px 40px -14px rgba(16, 24, 32, 0.35), var(--glass-edge);
}
:root[data-mode="dark"] .sendbar { box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.8), var(--glass-edge); }
.send-summary { font-size: 13px; color: var(--muted); line-height: 1.4; }
.send-summary strong { font-size: 17px; color: var(--text); letter-spacing: -0.01em; }
.send-summary .why { color: var(--warn); font-weight: 500; }
.send-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.send-controls input[type="datetime-local"] { width: auto; margin: 0; height: 36px; border-radius: 10px; }

/* ---------- Status pills & progress ---------- */
.pill { display: inline-flex; align-items: center; height: 22px; font-size: 11.5px; font-weight: 600; padding: 0 9px; border-radius: 99px; background: var(--sunk); color: var(--muted); text-transform: capitalize; }
.pill.sent, .pill.running, .pill.queued { background: var(--info-soft); color: var(--info); }
.pill.delivered, .pill.completed, .pill.APPROVED, .pill.valid { background: var(--good-soft); color: var(--good-text); }
.pill.read { background: var(--good); color: #fff; }
.pill.failed, .pill.REJECTED, .pill.invalid { background: var(--danger-soft); color: var(--danger); }
.pill.stopped, .pill.PENDING, .pill.MANUAL, .pill.duplicate, .pill.cancelled, .pill.demo { background: var(--warn-soft); color: var(--warn); }
.pill.scheduled { background: var(--violet-soft); color: var(--violet); }

.progress { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--sunk); margin: 12px 0; box-shadow: var(--sh-sunk); }
.progress span { display: block; height: 100%; transition: width 0.4s; }
.progress .p-read { background: var(--chart); }
.progress .p-delivered { background: var(--chart-2); }
.progress .p-sent { background: var(--chart-3); }
.progress .p-failed { background: linear-gradient(180deg, #ef6b62, #d13a31); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: 20px 0 8px; }
.stat { background: var(--sunk); box-shadow: var(--sh-sunk); border-radius: 11px; padding: 14px 16px; }
.stat b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 12px; }

.list-item { display: block; cursor: pointer; margin-bottom: 14px; transition: box-shadow 0.15s; }
.list-item:hover { box-shadow: var(--sh-card), 0 0 0 2px var(--ring); }
.li-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.li-head h3 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.li-meta { color: var(--muted); font-size: 12.5px; }

table:not(.data-table):not(.sg) { width: 100%; border-collapse: collapse; font-size: 13px; }
table:not(.data-table):not(.sg) th, table:not(.data-table):not(.sg) td { text-align: left; padding: 9px 12px; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--hair); }
table:not(.data-table):not(.sg) th { color: var(--muted); font-weight: 600; font-size: 12px; }
.table-wrap { overflow-x: auto; }
td.err { white-space: normal !important; color: var(--danger); font-size: 12px; max-width: 320px; }

.sender-card .num { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 6px 0 12px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 12.5px; margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: var(--sunk); box-shadow: var(--sh-sunk); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: ui-monospace, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; }

.tpl-body { white-space: pre-wrap; background: var(--sunk); box-shadow: var(--sh-sunk); padding: 12px 14px; border-radius: 10px; font-size: 13px; margin: 12px 0 16px; max-height: 160px; overflow: auto; }

.empty { text-align: center; padding: 56px 20px; color: var(--muted); border-radius: 11px; background: var(--sunk); box-shadow: var(--sh-sunk); grid-column: 1 / -1; }
.empty .btn { margin-top: 16px; }

.guide { padding-left: 20px; }
.guide li { margin-bottom: 8px; }

/* ---------- Modals ---------- */
.modal { position: fixed; inset: 0; background: rgba(12, 18, 24, 0.28); display: grid; place-items: center; z-index: 50; padding: 16px; backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); animation: fade 0.15s; }
.modal-box { background: var(--surface); border-radius: 10px; padding: 26px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5); animation: pop 0.18s cubic-bezier(0.3, 1.2, 0.5, 1); }
/* Keep scrolling inside an open dialog: lock the page behind it and stop the box's scroll from chaining out. */
html:has(.modal:not(.hidden)) { overflow: hidden; }
.modal, .modal-box { overscroll-behavior: contain; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.confirm-box { max-width: 420px; }
.confirm-box h2 { font-size: 17px; margin-bottom: 8px; }
.confirm-msg { color: var(--muted); margin-bottom: 14px; white-space: pre-line; }
.confirm-msg strong { color: var(--text); }
#confirm { z-index: 55; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(0.96); opacity: 0; } }

/* ---------- Toasts ---------- */
#toasts { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--toast-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--surface); padding: 11px 16px; border-radius: 11px; max-width: 380px; font-weight: 500; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.4); animation: slide 0.2s; }
.toast.error { background: var(--danger); color: #fff; }
@keyframes slide { from { transform: translateY(-6px); opacity: 0; } }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .sticky { position: static; }
  main { padding: 16px; }
  .banner { width: calc(100% - 32px); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 18px; }
  .search { width: 100%; }
  .search-wrap, .tools-right { width: 100%; }
  .hint { display: none; }
  .sendbar { position: static; border-radius: 11px; padding: 16px; }
  .send-controls { width: 100%; }
  .send-controls .btn.big { flex: 1; }
  .map-row { grid-template-columns: 1fr; }
  .map-row .m-input { grid-column: 1; }
}

.card > p.sub { margin-bottom: 18px; }
.li-head > label { margin: 0; display: inline-flex; }


/* =================== Overview dashboard =================== */
.grid-ov { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 24px; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kpi { background: var(--surface); border-radius: 11px; padding: 20px 22px 16px; box-shadow: var(--sh-card); display: flex; flex-direction: column; min-height: 150px; }
.kpi-label { font-size: 13px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.kpi-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--sunk); box-shadow: var(--sh-sunk); color: var(--muted); }
.kpi-value { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin: 10px 0 2px; line-height: 1.1; }
.kpi-value small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.kpi-sub { font-size: 12.5px; color: var(--muted); }
.delta { font-weight: 600; }
.delta.good { color: var(--good-text); }
.delta.bad { color: var(--danger); }
.spark { display: block; flex: none; }

/* Column chart */
.chart { position: relative; height: 240px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .grid line { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .tick { fill: var(--faint); font: 500 11px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.chart .bar { fill: var(--chart); transition: fill 0.12s, opacity 0.12s; }
.chart .bar.zero { fill: var(--chart-grid); }
.chart .hit { fill: transparent; cursor: default; outline: none; }
.chart .col.on .bar { fill: var(--chart-hover); }
.chart .col.on .hit { fill: color-mix(in srgb, var(--chart) 7%, transparent); }
.chart .peak { fill: var(--text); font: 600 11.5px Inter, sans-serif; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 13px; padding: 0 20px; }
.chart-empty strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 2px; }

.chart-tip {
  position: fixed; z-index: 70; pointer-events: none; min-width: 150px;
  padding: 10px 12px; border-radius: 10px; font-size: 12.5px;
  background: var(--glass-sheen), var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 30px -10px rgba(16, 24, 32, 0.35), var(--glass-edge);
}
.chart-tip .tt-title { color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.chart-tip .tt-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.chart-tip .tt-row + .tt-row { margin-top: 3px; }
.chart-tip .tt-row span { color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.chart-tip .tt-row b { font-variant-numeric: tabular-nums; }
.chart-tip .key { width: 10px; height: 2px; border-radius: 2px; background: var(--chart); }
.chart-tip .key.none { background: transparent; }

/* Funnel */
.funnel-row { display: grid; grid-template-columns: 82px 1fr; gap: 6px 14px; align-items: center; margin-bottom: 16px; }
.funnel-row:last-child { margin-bottom: 0; }
.funnel-name { font-weight: 500; font-size: 13px; }
.funnel-track { position: relative; height: 22px; border-radius: 6px; background: var(--sunk); box-shadow: var(--sh-sunk); }
.funnel-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--chart); transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); min-width: 4px; }
.funnel-val { grid-column: 2; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: -2px; }
.funnel-val b { color: var(--text); font-variant-numeric: tabular-nums; }
.funnel-note { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: var(--sunk); box-shadow: var(--sh-sunk); font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; }
.funnel-note b { color: var(--text); }

/* Meters (number health) */
.health-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 140px; gap: 8px 18px; align-items: center; padding: 14px 0; box-shadow: 0 1px 0 var(--hair); }
.health-row:last-child, .health-row:has(+ .health-cap) { box-shadow: none; padding-bottom: 0; }
.health-row:first-child { padding-top: 0; }
.health-name { font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.health-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-phone { font-size: 12px; color: var(--muted); }
.meter { height: 8px; border-radius: 99px; background: var(--meter-track); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 99px; background: var(--chart); transition: width 0.5s; }
.meter.warn > span { background: #d99a00; }
.meter.over > span { background: var(--danger); }
.meter-label { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.meter-label b { color: var(--text); font-variant-numeric: tabular-nums; }
.health-total { text-align: right; font-size: 12px; color: var(--muted); white-space: nowrap; }
.health-total b { display: block; font-size: 15px; color: var(--text); }
.q-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.q-dot.GREEN { background: #22c55e; } .q-dot.YELLOW { background: #eab308; } .q-dot.RED { background: #ef4444; } .q-dot.none { background: var(--faint); }

/* Mini lists (recent / upcoming) */
.mini { display: flex; flex-direction: column; }
.mini-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 10px; margin: 0 -10px; border-radius: 10px; cursor: pointer; transition: background 0.12s; }
.mini-item:hover { background: var(--sunk); }
.mini-item + .mini-item { box-shadow: 0 -1px 0 var(--hair); }
.mini-item:hover + .mini-item { box-shadow: none; }
.mini-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-meta { font-size: 12px; color: var(--muted); grid-column: 1; }
.mini-right { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font-size: 12px; color: var(--muted); }
.mini-right b { display: block; font-size: 14px; color: var(--text); }
.mini-progress { grid-column: 1 / -1; height: 4px; border-radius: 99px; background: var(--sunk); overflow: hidden; margin-top: 6px; }
.mini-progress span { display: block; height: 100%; background: var(--chart); }
.when-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 50px; border-radius: 10px; background: var(--violet-soft); color: var(--violet); line-height: 1.1; }
.when-chip b { font-size: 18px; }
.when-chip small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.up-item { grid-template-columns: auto minmax(0, 1fr) auto; }
.up-item .mini-meta { grid-column: 2; }
.up-item .mini-title { grid-column: 2; }
.up-item .when-chip { grid-row: 1 / span 2; }
.up-item .mini-right { grid-column: 3; }

.empty-mini { display: flex; gap: 14px; align-items: center; padding: 6px 0; color: var(--muted); font-size: 13px; }
.empty-mini .ico { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--sunk); box-shadow: var(--sh-sunk); color: var(--faint); }

/* Setup checklist */
.setup { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; margin-bottom: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 70%, var(--surface)), var(--surface) 55%); }
.setup h2 { margin-bottom: 6px; font-size: 17px; }
.setup-progress { height: 8px; border-radius: 99px; background: var(--sunk); box-shadow: var(--sh-sunk); overflow: hidden; margin: 16px 0 6px; }
.setup-progress span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stepc { position: relative; padding: 16px; border-radius: 10px; background: var(--surface); box-shadow: var(--sh-raised); display: flex; flex-direction: column; gap: 6px; }
.stepc.done { background: color-mix(in srgb, var(--sunk) 70%, transparent); box-shadow: none; }
.stepc .chk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--sunk); box-shadow: var(--sh-sunk); color: var(--muted); }
.stepc.done .chk { background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); color: var(--on-accent); }
.stepc .st-title { font-weight: 600; }
.stepc.done .st-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.stepc .st-text { font-size: 12.5px; color: var(--muted); flex: 1; }
.stepc .btn { align-self: flex-start; margin-top: 4px; }

/* Richer empty states */
.empty .empty-ico { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 11px; display: grid; place-items: center; color: var(--accent-text); background: linear-gradient(180deg, var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised-hi); }
.empty h3 { margin: 0 0 6px; color: var(--text); font-size: 16px; }
.empty p { margin: 0 auto; max-width: 420px; }
.empty .row { justify-content: center; margin-top: 18px; }
.empty .row .btn { margin-top: 0; }

/* Number cards: stats strip */
.num-stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.num-stat { padding: 10px 12px; border-radius: 10px; background: var(--sunk); box-shadow: var(--sh-sunk); }
.num-stat b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.num-stat span { font-size: 11.5px; color: var(--muted); }
.num-stat .meter { margin-top: 6px; height: 5px; }

/* Template cards with WhatsApp preview */
.tpl-card { display: flex; flex-direction: column; }
.tpl-chat { background: var(--chat); border-radius: 11px; padding: 14px; margin: 14px 0; box-shadow: var(--sh-sunk); }
#templateList, .tpl-group .cards { align-items: start; }
/* A button that can't be used yet: greyed text (not opacity, so its tooltip stays solid), no hover motion,
   and its reason in a tooltip above it on hover, focus or click. */
.btn.is-off { color: var(--faint); cursor: not-allowed; box-shadow: none; background: var(--sunk); }
.btn.is-off:hover:not(:disabled) { transform: none; box-shadow: none; }
.btn.is-off svg.la, .btn.is-off svg.la * { animation: none !important; }
.btn[data-tip]::before, .btn[data-tip]::after {
  position: absolute; left: 14px; z-index: 20; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity 0.16s, transform 0.16s var(--ease-out);
}
.btn[data-tip]::after {
  content: attr(data-tip); left: 0; bottom: calc(100% + 9px);
  width: max-content; max-width: 230px; padding: 8px 11px; border-radius: 9px;
  background: #1c1f22; color: #fff; font: 500 12.5px/1.45 Inter, sans-serif; white-space: normal; text-align: left;
  box-shadow: 0 8px 24px rgba(16, 24, 32, 0.22);
}
.btn[data-tip]::before { content: ''; bottom: calc(100% + 4px); width: 10px; height: 10px; background: #1c1f22; border-radius: 2px; rotate: 45deg; }
.btn[data-tip]:hover::before, .btn[data-tip]:hover::after, .btn[data-tip]:focus-visible::before, .btn[data-tip]:focus-visible::after,
.btn[data-tip].tip-show::before, .btn[data-tip].tip-show::after { opacity: 1; transform: none; }
/* .tip-end: for buttons at the right edge (like Find in the number form), the tooltip lines up with the button's right side. */
.btn[data-tip].tip-end::after { left: auto; right: 0; }
.btn[data-tip].tip-end::before { left: auto; right: 14px; }
.tpl-chat .bubble { font-size: 13px; max-width: 100%; }
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.var-chip { font: 600 11.5px ui-monospace, Menlo, monospace; padding: 3px 8px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-text); }

/* Campaign list */
.camp-filters { margin-bottom: 18px; }
.camp-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.camp-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.camp-stats .rate { margin-left: auto; }

/* The overview sizes itself by the room it actually has (the sidebar may be open or collapsed),
   not by the window width. */
#tab-overview { container: ov / inline-size; }
@container ov (max-width: 1040px) {
  .setup { grid-template-columns: 1fr; gap: 18px; }
  .setup .setup-progress { max-width: 360px; }
}
@container ov (max-width: 980px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container ov (max-width: 860px) { .grid-ov { grid-template-columns: minmax(0, 1fr); } }
@container ov (max-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container ov (max-width: 460px) { .kpis, .steps { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .health-row { grid-template-columns: minmax(0, 1fr) auto; }
  .health-row .health-meter { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  .num-stats { grid-template-columns: 1fr 1fr; }
  .num-stats .num-stat:first-child { grid-column: 1 / -1; }
}

/* =================== Animated icons ===================
   The icons' own motion is in icons.css (shared with the landing page); here is only how they sit in the app. */
.btn svg.la, .seg > button svg.la { margin-left: -2px; }
.seg > button { gap: 7px; }
.seg-icons > button svg.la { margin: 0; }
.toast { display: flex; align-items: center; gap: 10px; }
h2 > svg.la { color: var(--muted); }
.la-host:hover h2 > svg.la, .card-head:hover h2 > svg.la { color: var(--accent-text); transition: color 0.2s; }
.seg > button.active svg.la { color: var(--accent-text); }

/* =================== Motion =================== */
:root {
  /* One set of curves for the whole app. Out: things arriving or reacting (fast start, soft landing).
     In-out: things moving from one place to another. In: things leaving. Spring: a small overshoot. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.75, 0.3);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}
/* Every hover/press/colour transition eases out instead of the browser's default curve. */
*, *::before, *::after { transition-timing-function: var(--ease-out) !important; }
.seg > .seg-thumb, .ct-az-thumb { transition-timing-function: var(--ease-spring) !important; }
html { scroll-behavior: smooth; }

/* Segmented controls: one ceramic thumb slides to the active option */
.seg { position: relative; isolation: isolate; }
.seg > .seg-thumb {
  position: absolute; left: 0; top: 0; z-index: -1; border-radius: 8px; pointer-events: none;
  background: linear-gradient(180deg, var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised);
  transition: transform 0.42s var(--ease-spring), width 0.42s var(--ease-spring), opacity 0.2s;
}
.seg.has-thumb > button.active { background: transparent; box-shadow: none; }
.seg > button { transition: color 0.25s; }

/* Page and section entrances: fade up, children staggered */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.enter > * { animation: rise 0.55s var(--ease-out) both; }
.enter > *:nth-child(2) { animation-delay: 0.05s; }
.enter > *:nth-child(3) { animation-delay: 0.1s; }
.enter > *:nth-child(4) { animation-delay: 0.15s; }
.enter > *:nth-child(5) { animation-delay: 0.2s; }
.enter > *:nth-child(n + 6) { animation-delay: 0.25s; }
.enter .kpis > *, .enter .cards > *, .enter .grid-ov > *, .enter .grid-2 > *, .enter .steps > * { animation: rise 0.55s var(--ease-out) both; }
.enter .kpis > *:nth-child(2), .enter .cards > *:nth-child(2), .enter .grid-ov > *:nth-child(2), .enter .grid-2 > *:nth-child(2), .enter .steps > *:nth-child(2) { animation-delay: 0.12s; }
.enter .kpis > *:nth-child(3), .enter .cards > *:nth-child(3), .enter .steps > *:nth-child(3) { animation-delay: 0.17s; }
.enter .kpis > *:nth-child(4), .enter .cards > *:nth-child(4), .enter .steps > *:nth-child(4) { animation-delay: 0.22s; }
.enter .cards > *:nth-child(n + 5) { animation-delay: 0.26s; }
.enter .sendbar { animation: rise 0.55s 0.2s var(--ease-out) both; }

/* Bars, meters and progress slide between values (Motion.values sets the width) */
[data-w] { transition: width 0.9s var(--ease-out); }

/* Sparklines draw in the first time a tile appears */
.spark polyline { stroke-dasharray: 1; stroke-dashoffset: 0; }
.spark.draw-in polyline { animation: spark-draw 1.1s 0.2s var(--ease-out) both; }
.spark.draw-in circle { animation: pop-in 0.35s 1.1s var(--ease-spring) both; transform-box: fill-box; transform-origin: center; }
@keyframes spark-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop-in { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }

/* Chart hover */
.chart .bar { transition: fill 0.2s, opacity 0.2s; }
.chart .col:not(.on) .bar { opacity: 1; }
.chart:has(.col.on) .col:not(.on) .bar { opacity: 0.55; }
.chart-tip { transition: opacity 0.15s; }

/* Gentle lift on things you can click into */
.list-item, .kpi, .sender-card, .tpl-card, .stepc:not(.done) { transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.list-item:hover, .sender-card:hover, .tpl-card:hover, .stepc:not(.done):hover { transform: translateY(-3px); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-card), 0 18px 34px -20px rgba(16, 24, 32, 0.35); }
.btn { transition: box-shadow 0.2s, transform 0.18s var(--ease-out), background 0.2s, color 0.2s, filter 0.2s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0.5px) scale(0.98); transition-duration: 0.06s; }
.mini-item { transition: background 0.2s, transform 0.3s var(--ease-out); }
.mini-item:hover { transform: translateX(3px); }

/* Checkbox pop */
input.cb:checked { animation: cb-pop 0.28s var(--ease-spring); }
@keyframes cb-pop { 0% { transform: scale(0.8); } 100% { transform: none; } }

/* Overlays: smooth exit */
.modal.closing { animation: fade-out 0.18s ease both; }
.modal.closing .modal-box { animation: pop-out 0.18s ease both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-out { to { transform: scale(0.97) translateY(6px); opacity: 0; } }
.toast { transition: opacity 0.25s, transform 0.25s var(--ease-out); }
.toast.out { opacity: 0; transform: translateX(16px); }

/* Theme switch cross-fade */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, fill 0.4s ease, stroke 0.4s ease !important;
}

/* Rows and lists fade in when they're re-rendered */
.dropzone, .table-scroll { transition: background 0.25s, box-shadow 0.25s; }

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


/* =================== Corner scale ===================
   Mixed radii: soft rectangles for surfaces and controls, full pills only where
   the shape means something (toggle switches, status chips, progress bars). */
:root { --r-xl: 16px; --r-lg: 14px; --r-md: 10px; --r-sm: 8px; }
.card, .kpi, .dropzone, .empty, .sendbar { border-radius: var(--r-lg); }
.modal-box { border-radius: var(--r-xl); }
.table-scroll, .phone, .toggle-list, .stepc, .tpl-chat, .stat { border-radius: 12px; }
.btn, input:not([type="checkbox"]):not([type="file"]), select, textarea, .kv, .num-stat, .funnel-note, .tpl-body, .mini-item, .toast, .chart-tip, .banner { border-radius: var(--r-md); }
.btn.sm, .data-table .filters input, .data-table .filters select { border-radius: var(--r-sm); }
.seg { border-radius: 12px; }
.seg > button, .seg > span, .seg > .seg-thumb { border-radius: var(--r-sm); }
.empty .empty-ico, .dz-icon { border-radius: var(--r-lg); }
.kpi-icon, .empty-mini .ico { border-radius: var(--r-sm); }
.sendbar { padding: 12px 12px 12px 22px; }
@media (max-width: 900px) { .sendbar { border-radius: var(--r-lg); } }

/* =================== Overview v2: filters, KPI tiles, chart =================== */
.filter-bar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; color: var(--muted); }
.filter-label svg.la { color: var(--muted); }
.filter-bar label.inline select { height: 34px; min-width: 150px; }
.filter-note { color: var(--faint); font-size: 12.5px; margin-left: auto; }
#tab-overview.loading .kpis, #tab-overview.loading .grid-ov { opacity: 0.6; transition: opacity 0.2s; }
.kpis, .grid-ov { transition: opacity 0.25s; }

/* KPI tiles */
.kpi { cursor: pointer; padding: 18px 20px 14px; min-height: 0; gap: 0; outline: none; position: relative; }
.kpi::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.kpi.selected { background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.kpi:focus-visible::after { opacity: 1; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-value { margin: 12px 0 2px; font-size: 30px; display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.kpi-value small { margin-left: 1px; }
.kpi-caption { font-size: 12.5px; color: var(--muted); min-height: 18px; }
.kpi-viz { margin-top: 14px; height: 40px; display: flex; align-items: flex-end; }
.kpi-foot { display: block; margin-top: 10px; padding-top: 10px; font-size: 11.5px; color: var(--faint); box-shadow: 0 -1px 0 var(--hair); }

.delta-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--sunk); color: var(--muted); font-variant-numeric: tabular-nums; }
.delta-chip.good { background: var(--good-soft); color: var(--good-text); }
.delta-chip.bad { background: var(--danger-soft); color: var(--danger); }
.delta-chip svg.la { vertical-align: 0; }

.mini-cols { width: 100%; height: 34px; overflow: visible; }
.mini-col { fill: var(--chart); opacity: 0.38; transition: opacity 0.15s; }
.mini-col.last { opacity: 1; }
.mini-col.zero { fill: var(--spark); opacity: 0.6; }
.mini-col:hover { opacity: 1; }
.mini-cols.grow .mini-col { transform-box: fill-box; transform-origin: bottom; animation: col-grow 0.6s var(--ease-out) both; animation-delay: calc(var(--i) * 18ms + 0.15s); }
@keyframes col-grow { from { transform: scaleY(0); } }

.bullet { width: 100%; }
.bullet-track { position: relative; height: 10px; border-radius: 99px; background: var(--meter-track); }
.bullet-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent-1), var(--accent)); }
.bullet-prev { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); opacity: 0.55; }
.bullet-scale { position: relative; display: flex; justify-content: space-between; margin-top: 7px; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bullet-scale .bp-label { position: absolute; transform: translateX(-50%); color: var(--muted); font-weight: 600; }

/* Chart card */
.chart-card .card-head { margin-bottom: 14px; }
.seg-metric { margin-bottom: 14px; }
.seg-metric > button { height: 28px; padding: 0 12px; font-size: 12.5px; }
.chart { height: 260px; }
.chart.chart-lg { height: min(56vh, 520px); }
.chart .linelayer path.line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .linelayer path.area { fill: var(--chart); opacity: 0.1; stroke: none; }
.chart .linelayer circle { fill: var(--chart); stroke: var(--surface); stroke-width: 2; transition: r 0.15s; }
.chart .linelayer circle.on { r: 7; }
.chart line.crosshair { stroke: var(--muted); stroke-width: 1; opacity: 0; pointer-events: none; shape-rendering: crispEdges; }
.chart .hit { fill: transparent; outline: none; }
.chart .bar.on { fill: var(--chart-hover); }
.chart.hovering .bar:not(.on) { opacity: 0.5; }
.chart:has(.col.on) .col:not(.on) .bar { opacity: 1; }
.chart .peak { fill: var(--text); font: 600 11.5px Inter, sans-serif; pointer-events: none; }
.chart-tip .tt-row.cur b { color: var(--text); }
.chart-tip .tt-row:not(.cur) b { color: var(--muted); font-weight: 600; }
.chart-table { max-height: 320px; overflow: auto; }
.chart-table td, .chart-table th { font-variant-numeric: tabular-nums; }

/* Expanded chart */
.chart-box { max-width: min(1180px, 94vw); width: 94vw; transform-origin: top left; padding: 24px 26px; }
.chart-box .modal-head { align-items: flex-start; }
.chart-box .modal-head h2 { font-size: 19px; margin-bottom: 2px; }
.x-controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin: 6px 0 16px; }
.x-controls .seg-metric { margin: 0; }
.x-table { margin-top: 18px; max-height: 28vh; }
#chartModal { z-index: 52; }

@media (max-width: 900px) {
  .filter-note { margin-left: 0; width: 100%; }
  .chart-box { padding: 18px; }
}

/* Filters stay reachable while scrolling the overview */
.filter-bar {
  position: sticky; top: 0; z-index: 9;
  margin: 0 -12px 18px; padding: 10px 12px;
  background: transparent; transition: background 0.25s, box-shadow 0.25s, backdrop-filter 0.25s;
}
@media (max-width: 900px) { .filter-bar { position: static; } }
.mini-cols { display: block; width: 100%; height: 34px; }
.bullet-scale .gone { visibility: hidden; }
.bullet-scale .bp-label { transform: none; white-space: nowrap; }

/* =================== KPI tiles: gradient area charts =================== */
:root { --kpi-a: var(--chart); --kpi-b: var(--chart); --kpi-c: var(--chart); --pill-bg: #14181c; --pill-fg: #fff; }
:root[data-mode="dark"] { --kpi-a: var(--chart); --kpi-b: var(--chart); --kpi-c: var(--chart); --pill-bg: #f1f4f6; --pill-fg: #14181c; }
.kpi { padding: 18px 20px 12px; overflow: hidden; }
.kpi-viz { display: block; height: auto; margin: 14px -20px 0; }
.kpi-area { position: relative; height: 78px; }
.kpi-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kpi-area .ka-line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.kpi-area.reveal svg { animation: ka-reveal 1.2s 0.15s var(--ease-out) both; }
@keyframes ka-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.kpi-area .ka-now { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--kpi-c); box-shadow: 0 0 0 2.5px var(--surface), 0 2px 6px var(--ring); }
.kpi-area.reveal .ka-now { animation: pop-in 0.35s 1.25s var(--ease-spring) both; }
.kpi-area .ka-cursor { position: absolute; top: -4px; bottom: 0; width: 1.5px; margin-left: -0.75px; background: var(--pill-bg); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.kpi-area .ka-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2.5px var(--pill-bg); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.kpi-area .ka-pill {
  position: absolute; top: -30px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; pointer-events: none;
  background: var(--pill-bg); color: var(--pill-fg); font-size: 12px; white-space: nowrap; display: flex; gap: 6px; align-items: baseline;
  opacity: 0; transition: opacity 0.15s; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45); z-index: 2;
}
.kpi-area .ka-pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-area .ka-pill span { opacity: 0.65; font-size: 11px; }
.kpi-area.hover .ka-cursor, .kpi-area.hover .ka-dot, .kpi-area.hover .ka-pill { opacity: 1; }
.kpi-area.hover .ka-now { opacity: 0.35; }
.ka-x { position: relative; height: 26px; margin: 4px 20px 0; font-size: 11px; color: var(--faint); }
.ka-x span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.ka-x span:first-child { transform: none; }
.ka-x span.now { transform: translateX(-100%); top: 0; padding: 2px 8px; border-radius: 7px; color: var(--text); font-weight: 600; background: var(--surface); box-shadow: var(--sh-raised); }
.kpi-empty { height: 78px; display: grid; place-items: center; color: var(--faint); font-size: 12px; }
.kpi:hover { transform: translateY(-2px); }
.ka-x { margin: 4px 0 0; }
.ka-x span:first-child { margin-left: 20px; }
.ka-x span.now { margin-left: -16px; }

/* Spreadsheet colours (Send page grid) */
:root { --grid-line: rgba(16, 24, 32, 0.09); --sheet-head: #f3f5f7; --sheet-idx: #f0f2f4; }
:root[data-mode="dark"] { --grid-line: rgba(255, 255, 255, 0.07); --sheet-head: #1f252b; --sheet-idx: #1c2227; }

/* =================== Sidebar: icon-only mode (toggle, and by default on the Inbox) =================== */
.side-nav.seg > button { position: relative; }
.nav-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--accent); color: var(--on-accent);
}
@media (min-width: 901px) {
  body { transition: padding-left 0.28s var(--ease-out); }
  .sidebar { transition: width 0.28s var(--ease-out), padding 0.28s var(--ease-out); overflow: hidden; }
  body.nav-mini { --nav-w: 68px; }
  body.nav-mini .sidebar { padding-left: 10px; padding-right: 10px; }
  body.nav-mini .brand { padding: 4px 0; justify-content: center; flex-direction: column; gap: 12px; }
  body.nav-mini .nav-toggle { margin: 0; }
  body.nav-mini .nav-toggle svg.la { transform: scaleX(-1); }
  body.nav-mini .brand-name, body.nav-mini .nav-label { display: none; }
  body.nav-mini .side-nav.seg > button { justify-content: center; padding: 0; }
  body.nav-mini .side-nav.seg > button svg.la { margin: 0; }
  body.nav-mini .nav-badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sunk) 55%, var(--bg)); }
  body.nav-mini .side-foot { flex-direction: column; padding: 12px 0 0; }
  body.nav-mini #themeSeg { flex-direction: column; }
  body.nav-mini .badge { width: 26px; padding: 0; gap: 0; font-size: 0; justify-content: center; }
}

/* =================== Inbox =================== */
:root { --bubble-out: #d9fdd3; --tick-read: #53bdeb; }
:root[data-mode="dark"] { --bubble-out: #144d37; }

body.inbox-open main { max-width: none; padding: 0; }
/* The inbox fills the window exactly: no page scroll, and the banner's margin stays inside the body. */
@media (min-width: 901px) { body.inbox-open { overflow: hidden; display: flow-root; } }
.ib-modal-sub { margin: -4px 0 18px; }
body.inbox-open .banner { max-width: none; width: auto; margin: 12px 16px; }
.inbox { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: 640px; background: var(--surface); }

/* Chat list */
.ib-side { display: flex; flex-direction: column; min-height: 0; background: var(--surface); box-shadow: 1px 0 0 var(--hair); z-index: 1; }
.ib-side-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 14px 12px 20px; }
.ib-side-head h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.ib-side-head .icon-btn { display: grid; place-items: center; width: 36px; height: 36px; }
.ib-tools { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.ib-tools .search { width: 100%; }
.ib-filters { display: flex; gap: 8px; align-items: center; }
.ib-filters .seg > button { height: 28px; padding: 0 11px; font-size: 12.5px; }
.ib-filters select { flex: 1; min-width: 0; width: auto; margin: 0; height: 34px; font-size: 13px; }
.ib-convs { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }
.ib-conv {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.15s;
}
.ib-conv:hover { background: var(--sunk); }
.ib-conv.active { background: var(--accent-soft); }
.ib-av {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: 15px; color: var(--muted);
  background: linear-gradient(180deg, var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised);
}
.ib-conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ib-conv-top, .ib-conv-bot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ib-conv-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14.5px; }
.ib-conv-top time { flex: none; font-size: 11.5px; color: var(--faint); }
.ib-conv.unread time { color: var(--text); font-weight: 600; }
.ib-prev { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 13px; }
.ib-prev > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-conv.unread .ib-prev { color: var(--text); }
.ib-count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--accent); color: var(--on-accent); }
.ib-via { font-size: 11px; color: var(--faint); }
.ib-none { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* Conversation */
.ib-chat { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat); }
.ib-head { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--surface); box-shadow: 0 1px 0 var(--hair); z-index: 2; }
.ib-head .ib-av { width: 40px; height: 40px; font-size: 14px; }
.ib-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ib-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.ib-who span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-window { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ib-window.open { background: var(--good-soft); color: var(--good-text); }
.ib-window.closed { background: var(--warn-soft); color: var(--warn); }
.ib-back { display: none; place-items: center; }

.ib-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px max(16px, 6%) 16px; display: flex; flex-direction: column; gap: 2px; }
.ib-day {
  position: sticky; top: 4px; z-index: 1; align-self: center; margin: 12px 0 6px; padding: 5px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 500; color: var(--muted); background: var(--bubble); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.ib-loading { margin: auto; color: var(--muted); font-size: 13px; }
.ib-row { display: flex; align-items: center; gap: 6px; }
.ib-row.out { flex-direction: row-reverse; }
.ib-row.first { margin-top: 8px; }
.ib-row.reacted { margin-bottom: 16px; }
.ib-bubble {
  position: relative; max-width: min(560px, 78%); padding: 6px 9px 7px; border-radius: 10px;
  background: var(--bubble); color: var(--text); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  font-size: 14.2px; line-height: 1.42; overflow-wrap: anywhere;
}
.ib-row.out .ib-bubble { background: var(--bubble-out); }
/* WhatsApp's tail on the first bubble of each group */
.ib-row.in.first .ib-bubble { border-top-left-radius: 0; }
.ib-row.out.first .ib-bubble { border-top-right-radius: 0; }
.ib-row.first .ib-bubble::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; background: inherit; }
.ib-row.in.first .ib-bubble::before { left: -8px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.ib-row.out.first .ib-bubble::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ib-bubble.sticker { background: none !important; box-shadow: none; }
.ib-bubble.sticker::before { display: none; }

.ib-text { white-space: pre-wrap; }
.ib-text a, .bubble a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; }
.ib-text code, .bubble code { font-family: ui-monospace, Menlo, monospace; font-size: 0.92em; }
.ib-spacer { display: inline-block; width: 52px; height: 1px; }
.ib-spacer.out { width: 72px; }
.ib-unsupported { font-style: italic; color: var(--muted); }
.ib-meta { position: absolute; right: 8px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ib-meta.static { position: static; display: flex; justify-content: flex-end; margin-top: 2px; }
.ib-meta.over { right: 10px; bottom: 9px; padding: 1px 6px; border-radius: 8px; color: #fff; background: rgba(0, 0, 0, 0.35); }
.ib-bubble.location .ib-meta.over, .ib-bubble.document .ib-meta.over, .ib-bubble.audio .ib-meta.over, .ib-bubble.button .ib-meta.over, .ib-bubble.interactive .ib-meta.over { position: static; display: flex; justify-content: flex-end; padding: 0; margin-top: 2px; background: none; color: var(--muted); }
.ib-tick { color: var(--muted); flex: none; }
.ib-meta.over .ib-tick { color: inherit; }
.ib-tick.read { color: var(--tick-read); }
.ib-tick.failed { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; }
.ib-label.ib-demo { color: var(--warn); font-weight: 600; }
.ib-label { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* Campaign template inside a bubble: reuse the template preview without its own box */
.ib-bubble .bubble { background: none; padding: 0; box-shadow: none; border-radius: 0; max-width: none; font-size: inherit; }
.ib-bubble .bubble .var { background: none; color: inherit; padding: 0; }
.ib-bubble .bubble .btns { margin: 7px -9px 0; }
.ib-bubble .bubble .btns div { color: var(--accent-text); }

.ib-media { display: block; margin: -3px -6px 4px; border-radius: 8px; overflow: hidden; max-width: 330px; background: var(--sunk); }
.ib-media img, video.ib-media { display: block; width: 100%; max-height: 380px; object-fit: cover; }
.ib-media.sticker { width: 150px; background: none; }
.ib-media.broken img { display: none; }
.ib-media.broken::after { content: "Media unavailable"; display: block; padding: 34px 40px; text-align: center; font-size: 12px; color: var(--muted); }
.ib-audio { display: block; width: 280px; max-width: 100%; height: 40px; margin-bottom: 2px; }
.ib-doc, .ib-loc {
  display: flex; align-items: center; gap: 10px; min-width: min(260px, 60vw); margin: -1px -4px 2px; padding: 10px; border-radius: 8px;
  color: inherit; text-decoration: none; background: color-mix(in srgb, var(--text) 6%, transparent);
}
.ib-doc > span, .ib-loc > span:last-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ib-doc b, .ib-loc b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ib-doc small, .ib-loc small { color: var(--muted); font-size: 12px; }
.ib-loc-pin { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--surface); color: var(--danger); }

.ib-quote {
  display: flex; flex-direction: column; margin: 0 -4px 5px; padding: 5px 9px; border-radius: 6px; cursor: pointer;
  border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 12.5px;
}
.ib-quote b { font-size: 12.5px; }
.ib-quote span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.ib-reacts { position: absolute; bottom: -15px; padding: 1px 6px; border-radius: 99px; font-size: 13px; line-height: 1.4; background: var(--bubble); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.ib-row.in .ib-reacts { left: 8px; }
.ib-row.out .ib-reacts { right: 8px; }
.ib-reply-btn {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface); color: var(--muted); box-shadow: var(--sh-raised); opacity: 0; transition: opacity 0.15s;
}
.ib-row:hover .ib-reply-btn, .ib-reply-btn:focus-visible { opacity: 1; }
.ib-flash .ib-bubble { animation: ib-flash 1.4s var(--ease-out); }
@keyframes ib-flash { 20%, 60% { box-shadow: 0 0 0 3px var(--ring); } }

/* Composer */
.ib-compose { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 12px; background: var(--surface); box-shadow: 0 -1px 0 var(--hair); }
.ib-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.ib-compose-row .icon-btn { display: grid; place-items: center; width: 42px; height: 42px; flex: none; }
.ib-compose textarea {
  flex: 1; min-height: 42px; max-height: 160px; margin: 0; padding: 10px 16px; border-radius: 21px; resize: none;
  font: 400 14.5px/1.45 Inter, sans-serif;
}
.ib-send {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); color: var(--on-accent); box-shadow: var(--sh-accent);
  transition: opacity 0.15s, transform 0.15s;
}
.ib-send:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.ib-send:not(:disabled):active { transform: scale(0.94); }
.ib-replybar { display: flex; align-items: center; gap: 8px; }
.ib-replybar .ib-quote { flex: 1; min-width: 0; margin: 0; cursor: default; }
.ib-replybar .icon-btn { display: grid; place-items: center; }
.ib-closed { display: flex; align-items: center; gap: 16px; padding: 12px 18px; background: var(--surface); box-shadow: 0 -1px 0 var(--hair); }
.ib-closed > div { flex: 1; display: flex; flex-direction: column; font-size: 13px; line-height: 1.45; }
.ib-closed span { color: var(--muted); }

/* Empty pane */
.ib-empty { flex: 1; display: grid; place-items: center; padding: 40px; text-align: center; background: var(--surface); }
.ib-empty > div { max-width: 430px; }
.ib-empty h3 { margin: 0 0 6px; font-size: 18px; }
.ib-empty p { margin: 0 0 10px; color: var(--muted); line-height: 1.55; }
.ib-empty .ib-hint { font-size: 13px; }
.ib-empty-ico {
  width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; color: var(--muted);
  background: linear-gradient(180deg, var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised);
}

/* Phones: one pane at a time */
@media (max-width: 900px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox.has-chat .ib-side, .inbox:not(.has-chat) .ib-chat { display: none; }
  .ib-back { display: grid; }
  .ib-head { padding: 8px 10px; }
  .ib-window { display: none; }
  .ib-msgs { padding: 10px 12px; }
  .ib-bubble { max-width: 86%; }
  .ib-closed { flex-direction: column; align-items: stretch; }
}

/* Sign-in page (when APP_PASSWORD is set) */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 16px 16px 16px 16px; }
.login-card { width: min(360px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 4px; }
.login-card .brand { padding: 0 0 18px; }
.login-card .btn { width: 100%; justify-content: center; }
.login-error { margin: -8px 0 14px; color: var(--danger); font-size: 13px; }

/* =================== Assistant orb icon =================== */
svg.orb-icon { flex: none; display: block; color: currentColor; }
.seg > button svg.orb-icon, .btn svg.orb-icon { margin-left: -2px; }
.seg > button.active svg.orb-icon { color: var(--accent-text); }
h2 > svg.orb-icon { color: var(--muted); }
body.nav-mini .side-nav.seg > button svg.orb-icon { margin: 0; }

/* =================== Sidebar toggle =================== */
.nav-toggle { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; flex: none; }
.nav-toggle svg.la { transition: transform 0.28s var(--ease-out); }
@media (max-width: 900px) { .nav-toggle { display: none; } }

/* =================== AI assistant (Overview) =================== */
:root { --cmp-streak: rgba(16, 24, 32, 0.22); --as-user: var(--accent); --as-user-text: var(--on-accent); }
:root[data-mode="dark"] { --cmp-streak: rgba(255, 255, 255, 0.5); }

/* The Assistant page fills the window below the banner (height set in assistant.js). */
#tab-assistant:not(.hidden) { display: flex; flex-direction: column; min-height: 420px; }
body.assistant-open { display: flow-root; } /* keeps the banner's margin inside, so the page doesn't scroll */
body.assistant-open main { padding-bottom: 0; }
.assistant { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding-bottom: 7vh; }
.assistant.active { justify-content: flex-start; padding-bottom: 0; }
.as-hero { text-align: center; padding: 0 16px 26px; }
.as-hero-orb { display: block; margin: 0 auto 14px; color: var(--text); }
.as-title { justify-content: center; font-size: 30px; letter-spacing: -0.03em; font-weight: 700; margin: 0 0 6px; }
.as-hero .sub { max-width: 520px; margin: 0 auto; }

/* Prompt box */
.composer {
  position: relative; width: 100%; max-width: 800px; margin: 0 auto; padding: 16px 14px 12px 20px; border-radius: 22px;
  background: var(--surface); box-shadow: var(--sh-card), 0 0 0 1px var(--hair);
  transition: box-shadow 0.2s;
}
/* A faint light streak along the top-left edge. */
.composer::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(100deg, var(--cmp-streak), transparent 32%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.composer:focus-within { box-shadow: var(--sh-card), 0 0 0 1px var(--hair), 0 0 0 4px color-mix(in srgb, var(--ring) 45%, transparent); }
.composer.over { box-shadow: var(--sh-card), 0 0 0 2px var(--accent); }
.composer textarea {
  display: block; width: 100%; min-height: 28px; max-height: 220px; margin: 0; padding: 2px 4px 2px 0; resize: none;
  border: 0; background: none; box-shadow: none !important; color: var(--text); font: 15.5px/1.5 Inter, sans-serif; letter-spacing: -0.01em;
}
.composer textarea::placeholder { color: var(--faint); }
.cmp-files { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 12px -4px; }
.cmp-bar { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 -8px; }
.cmp-icon { width: 38px; height: 38px; margin: 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.cmp-icon:hover { background: var(--sunk); color: var(--text); }
.cmp-chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 0; padding: 0 30px 0 12px;
  border-radius: 99px; color: var(--muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); cursor: pointer;
}
.cmp-chip:hover { color: var(--text); background: color-mix(in srgb, var(--sunk) 60%, transparent); }
.cmp-chip select {
  appearance: none; -webkit-appearance: none; width: auto; max-width: 230px; height: 34px; margin: 0; padding: 0; border: 0;
  background: none; box-shadow: none !important; color: var(--text); font: 500 13.5px Inter, sans-serif; cursor: pointer; text-overflow: ellipsis;
}
.cmp-chev { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); display: grid; pointer-events: none; }
.cmp-hint { margin-left: auto; color: var(--faint); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-send {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); color: var(--on-accent); box-shadow: var(--sh-accent);
  transition: background 0.15s, box-shadow 0.15s, transform 0.08s, color 0.15s;
}
.cmp-send:hover:not(:disabled) { box-shadow: var(--sh-accent-hi); }
.cmp-send:active:not(:disabled) { transform: scale(0.96); }
.cmp-send:disabled { background: var(--sunk); color: var(--faint); box-shadow: inset 0 0 0 1px var(--hair); cursor: default; }
.cmp-send:focus-visible { outline: 0; box-shadow: var(--sh-accent), 0 0 0 3px var(--ring); }
.composer.busy textarea { opacity: 0.7; }

/* File chips (composer, user messages) */
.file-chip {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 7px 8px 7px 11px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised); color: var(--text);
  transition: box-shadow 0.15s;
}
.file-chip:hover { box-shadow: var(--sh-raised-hi); }
.file-chip:focus-visible { outline: 0; box-shadow: var(--sh-raised), 0 0 0 3px var(--ring); }
.file-chip > svg.la { color: var(--good-text); flex: none; }
.fc-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fc-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.fc-meta { font-size: 11.5px; color: var(--muted); }
.warn-text { color: var(--warn); font-weight: 600; }
.fc-x { width: 24px; height: 24px; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; color: var(--muted); cursor: pointer; }
.fc-x:hover { background: var(--sunk); color: var(--text); }

/* Conversation */
.assistant.active .composer { width: 100%; max-width: 900px; margin: 6px auto 18px; flex: none; }
.as-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding-bottom: 10px; }
.as-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.as-name svg.orb-icon { color: var(--text); }
.as-beta { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.as-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 8px 18px; display: flex; flex-direction: column; gap: 22px; scroll-behavior: smooth; }
.as-thread > * { width: 100%; max-width: 900px; margin: 0 auto; }

.msg-user { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mu-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.mu-bubble { max-width: min(78%, 640px); padding: 10px 16px; border-radius: 18px 18px 6px 18px; background: var(--as-user); color: var(--as-user-text); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; box-shadow: var(--sh-accent); }

.msg-ai { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.ai-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: var(--sunk); box-shadow: var(--sh-sunk); }
.ai-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 3px; }
.ai-steps { display: flex; flex-direction: column; gap: 6px; }
.ai-steps:empty { display: none; }
.ai-step { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); animation: fade 0.2s; }
.ai-step.running .st-label {
  color: transparent; background: linear-gradient(90deg, var(--muted) 0%, var(--text) 45%, var(--muted) 90%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; animation: st-shimmer 1.6s linear infinite;
}
@keyframes st-shimmer { to { background-position: -200% 0; } }
.st-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
@media (prefers-reduced-motion: reduce) { .ai-step.running .st-label { animation: none; color: var(--text); background: none; } }
.st-ico { width: 16px; height: 16px; display: grid; place-items: center; flex: none; color: var(--text); }
.ai-step.done .st-ico { color: var(--good-text); }
.st-detail { color: var(--faint); font-size: 12px; }
.st-detail:not(:empty)::before { content: "·"; margin-right: 7px; }
.steps-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; color: var(--muted); font: 500 12.5px Inter, sans-serif; cursor: pointer; }
.steps-toggle:hover { color: var(--text); }
.steps-toggle svg.la { transition: transform 0.2s; transform: rotate(180deg); }
.ai-steps.folded .ai-step { display: none; }
.ai-steps.folded .steps-toggle svg.la { transform: none; }
.ai-body { display: flex; flex-direction: column; gap: 12px; }
.ai-body:empty { display: none; }
.ai-text { font-size: 14.5px; line-height: 1.62; overflow-wrap: anywhere; }
.ai-text p { margin: 0 0 8px; }
.ai-text p:last-child, .ai-text ul:last-child, .ai-text ol:last-child { margin-bottom: 0; }
.ai-text ul, .ai-text ol { margin: 0 0 8px; padding-left: 20px; }
.ai-text li { margin: 2px 0; }
.ai-note { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--info-soft); color: var(--text); font-size: 13.5px; }
.ai-note > svg.la { color: var(--info); flex: none; }
.ai-note > div { flex: 1; }
.ai-note.warn { background: var(--warn-soft); }
.ai-note.warn > svg.la { color: var(--warn); }

/* Question card */
.q-card { padding: 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--sh-card), 0 0 0 1px var(--hair); }
.q-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.q-card.answered .q-head { color: var(--good-text); }
.q-text { margin: 8px 0 12px; font-size: 14.5px; font-weight: 500; }
.q-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.q-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 0; border-radius: 11px; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised); color: var(--text); font: 13.5px Inter, sans-serif;
  transition: box-shadow 0.15s, opacity 0.15s;
}
.q-opt b { font-weight: 600; }
.q-opt span { color: var(--muted); font-size: 12.5px; }
.q-opt:hover:not(:disabled) { box-shadow: var(--sh-raised-hi); }
.q-opt:focus-visible { outline: 0; box-shadow: var(--sh-raised), 0 0 0 3px var(--ring); }
.q-opt:disabled { cursor: default; opacity: 0.5; }
.q-opt.chosen { opacity: 1; box-shadow: var(--sh-raised), 0 0 0 2px var(--accent); }
.q-other { display: flex; gap: 8px; margin-top: 10px; }
.q-other input { margin: 0; flex: 1; height: 36px; }

/* Shared card section labels */
.pc-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }

/* Campaign plan card */
.plan-card { scroll-margin-top: 12px; padding: 22px; border-radius: 16px; background: var(--surface); box-shadow: var(--sh-card), 0 0 0 1px var(--hair); transition: opacity 0.2s; }
.plan-card.saving { opacity: 0.6; pointer-events: none; }
.pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; box-shadow: 0 1px 0 var(--hair); }
.pc-kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 500; }
.pc-kicker .pill { height: 20px; font-size: 10.5px; text-transform: none; }
.pc-head h3 { margin: 4px 0 0; font-size: 18px; letter-spacing: -0.02em; }
.pc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-section { margin-top: 20px; }
.pc-cap { margin-left: 6px; font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); }
.pc-explain { padding: 14px 16px; border-radius: 12px; background: var(--info-soft); }
.pc-explain .pc-label { color: var(--info); margin-bottom: 6px; }
.pc-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.pc-recip { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.pc-big { display: flex; align-items: center; gap: 12px; }
.pc-big b { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.pc-big > span { font-size: 13px; line-height: 1.35; }
.pc-skips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-skip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; }
.pc-skip b { font-variant-numeric: tabular-nums; }
.pc-skip.ok { background: var(--good-soft); color: var(--good-text); }
.pc-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 290px); gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
.pc-sample { scroll-snap-align: start; padding: 10px; border-radius: 13px; background: linear-gradient(180deg, var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised); }
.pc-to { font-size: 12.5px; color: var(--muted); margin: 0 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-to b { color: var(--text); font-weight: 600; margin-right: 4px; }
.pc-sample .phone { min-height: 0; padding: 14px 12px; }
.pc-summary { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); margin: 0; border-radius: 12px; background: var(--field); box-shadow: var(--sh-sunk); }
.pc-summary dt, .pc-summary dd { margin: 0; padding: 11px 16px; box-shadow: 0 1px 0 var(--hair); }
.pc-summary dt { color: var(--muted); font-size: 13px; }
.pc-summary dd { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.pc-summary dt:last-of-type, .pc-summary dd:last-of-type { box-shadow: none; }
.pc-summary .pill { height: 20px; font-size: 10.5px; vertical-align: 1px; }
.pc-maps { display: flex; flex-direction: column; gap: 6px; }
.pc-map { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-var { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 2px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); }
.pc-arrow { color: var(--faint); }
.pc-map select, .pc-map input { width: auto; min-width: 150px; height: 32px; margin: 0; font-size: 13px; }
.pc-senders { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-sender { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 11px 0 8px; border-radius: 99px; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; box-shadow: inset 0 0 0 1px var(--hair); }
.pc-sender.on { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.pc-sender input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.pc-assume { margin: 0; padding-left: 18px; font-size: 13.5px; }
.pc-assume li { margin: 3px 0; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; box-shadow: 0 -1px 0 var(--hair); }
.pc-wait { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.pc-wait svg { color: var(--text); flex: none; }
.pc-buttons { display: flex; gap: 8px; margin-left: auto; }
.pc-done { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.pc-live { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.pc-live > .pc-wait { color: var(--text); font-weight: 500; }
.pc-progress { height: 6px; border-radius: 99px; background: var(--meter-track); overflow: hidden; }
.pc-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--good); transition: width 0.6s var(--ease-out); }
.plan-card.status-declined .pc-section, .plan-card.status-superseded .pc-section { opacity: 0.6; }

/* Stats card */
.stats-card { padding: 18px; border-radius: 16px; background: var(--surface); box-shadow: var(--sh-card), 0 0 0 1px var(--hair); }
.sc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sc-head .pc-label { margin: 0; }
.sc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.sc-tile { padding: 12px 14px; border-radius: 12px; background: var(--field); box-shadow: var(--sh-sunk); }
.sc-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.sc-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 2px 0; }
.sc-sub { font-size: 11.5px; color: var(--faint); }
.sc-recent { display: flex; flex-direction: column; margin-top: 12px; }
.sc-camp { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border: 0; background: none; color: var(--text); font: 13px Inter, sans-serif; text-align: left; cursor: pointer; box-shadow: 0 1px 0 var(--hair); border-radius: 0; }
.sc-camp:last-child { box-shadow: none; }
.sc-camp:hover .sc-camp-name { text-decoration: underline; }
.sc-camp-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.sc-camp .pill { height: 20px; font-size: 10.5px; }
.sc-camp-n { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* File preview window */
.fp-box { max-width: 1120px; display: flex; flex-direction: column; }
.fp-box #fpTitle { display: flex; align-items: center; gap: 8px; }
.fp-box #fpTitle svg.la { color: var(--good-text); }
.fp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fp-tab { height: 30px; padding: 0 12px; border: 0; border-radius: 99px; background: var(--sunk); color: var(--muted); font: 500 12.5px Inter, sans-serif; cursor: pointer; }
.fp-tab.active { background: var(--accent); color: var(--on-accent); }
.fp-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fp-stat { padding: 6px 12px; border-radius: 10px; background: var(--sunk); font-size: 13px; color: var(--muted); }
.fp-stat b { color: var(--text); font-variant-numeric: tabular-nums; margin-right: 2px; }
.fp-stat.good b { color: var(--good-text); }
.fp-stat.bad { background: var(--danger-soft); color: var(--danger); }
.fp-stat.bad b { color: var(--danger); }
.fp-stat.warn { background: var(--warn-soft); color: var(--warn); }
.fp-stat.warn b { color: var(--warn); }
.fp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.fp-tools .seg > button .n { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.fp-tools .search { width: 220px; }
.fp-tools select { height: 34px; }
.fp-table { max-height: 54vh; overflow: auto; border-radius: 10px; background: var(--field); box-shadow: var(--sh-sunk); }
.fp-data thead th { top: 0; font-size: 12px; color: var(--muted); font-weight: 600; box-shadow: 0 1px 0 var(--hair); }
.fp-data thead th.tagged { color: var(--text); }
.fp-data tbody tr { cursor: default; }
.fp-data td.num, .fp-data th.num { color: var(--faint); font-variant-numeric: tabular-nums; width: 1%; font-size: 12px; }
.fp-data td.phone-col { font-variant-numeric: tabular-nums; font-weight: 500; }
.fp-data tbody tr.invalid { color: var(--faint); cursor: default; }
.fp-data tbody tr.invalid td.phone-col { color: var(--danger); }
.fp-data tbody tr.duplicate td.phone-col { color: var(--warn); }
.fp-data .pill { height: 20px; font-size: 10.5px; }
.col-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 600; background: var(--violet-soft); color: var(--violet); vertical-align: 1px; }
.col-tag.is-phone { background: var(--info-soft); color: var(--info); }
.fp-empty { padding: 40px; text-align: center; color: var(--muted); }
#fpNote { margin-top: 10px; }

@media (max-width: 900px) {
  .as-thread { padding: 10px 2px 14px; }
  .assistant.active .composer { margin: 4px 0 12px; }
  .sc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-summary { grid-template-columns: 1fr; }
  .pc-summary dt { padding-bottom: 0; box-shadow: none; }
  .pc-buttons { width: 100%; }
  .pc-buttons .btn { flex: 1; }
  .msg-ai { grid-template-columns: minmax(0, 1fr); }
  .ai-avatar { display: none; }
}
@media (max-width: 560px) {
  .as-title { font-size: 23px; }
  .composer { padding: 14px 10px 10px 16px; border-radius: 18px; }
  .cmp-chip select { max-width: 130px; }
  .cmp-hint { display: none; }
  .cmp-send { margin-left: auto; }
  .mu-bubble { max-width: 88%; }
  .fp-tools .search { width: 100%; }
}

/* AI settings card */
.ai-set-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 28px; align-items: start; }
.ai-set-grid .sub { margin-top: 0; line-height: 1.6; }
.ai-steps-list { margin: 8px 0 12px; font-size: 13px; color: var(--muted); }
.ai-steps-list li { margin-bottom: 4px; }
.ai-provider { display: flex; width: max-content; margin: 6px 0 4px; }
.ai-provider .opt { margin-left: 2px; }
.ai-fields { margin-top: 6px; }
.as-provider { margin-left: 4px; padding: 2px 9px; border-radius: 99px; background: var(--sunk); color: var(--muted); font-size: 11.5px; font-weight: 500; text-decoration: none; }
.as-provider:hover { color: var(--text); }
.as-provider:empty { display: none; }
@media (max-width: 900px) { .ai-set-grid { grid-template-columns: 1fr; } }


/* =================== Send page: spreadsheet workspace =================== */
/* Wide screens: the page fills the window (height set in send.js), the grid scrolls. */
#tab-send:not(.hidden) { display: flex; flex-direction: column; gap: 10px; min-height: 480px; }
@media (min-width: 901px) {
  body.send-open { display: flow-root; }
  body.send-open main { padding-bottom: 0; }
}
.sp-bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.sp-file { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.sp-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
.sp-meta { font-size: 12.5px; color: var(--muted); }
.sp-meta .ok { color: var(--good-text); }
.sp-meta .bad { color: var(--danger); font-weight: 500; }
.sp-tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.tool {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); font: 500 13px Inter, sans-serif; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.tool:hover:not(:disabled) { background: var(--sunk); color: var(--text); }
.tool:disabled { opacity: 0.35; cursor: default; }
.tool:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ring); }
.tool[aria-pressed="true"] { color: var(--text); }
.sp-sep { width: 1px; height: 18px; margin: 0 6px; background: var(--hair); box-shadow: 0 0 0 0.5px var(--hair); }
.sp-phone { margin: 0 4px 0 2px; font-size: 13px; }
.sp-phone select { height: 32px; min-width: 120px; font-size: 13px; }
.sp-panel-btn { box-shadow: var(--sh-raised); }

.sp-find { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: var(--surface); box-shadow: var(--sh-card); }
.sp-find .search { width: 220px; height: 34px; }
.sp-find .sp-rep { width: 200px; height: 34px; margin: 0; }
.sp-find-n { min-width: 70px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.sp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; }
#tab-send.panel-off .sp-body { grid-template-columns: minmax(0, 1fr); }
#tab-send.panel-off .sp-panel { display: none; }
.sp-main { display: flex; flex-direction: column; min-height: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--sh-card); overflow: hidden; transition: box-shadow 0.2s; }
#tab-send.dropping .sp-main { box-shadow: var(--sh-card), 0 0 0 2px var(--accent); }
.sp-grid { flex: 1; min-height: 0; }

.sp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; }
.sp-empty .sub { max-width: 440px; margin: 6px auto 0; }
.sp-empty-actions { justify-content: center; margin-top: 18px; }
.sp-empty-hint { margin-top: 18px !important; font-size: 12.5px; }

/* Sheet tabs, like Excel's */
.sp-tabs { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: var(--sheet-head); box-shadow: inset 0 1px 0 var(--grid-line); overflow-x: auto; scrollbar-width: thin; flex: none; }
.sp-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 9px; border-radius: 8px; flex: none;
  color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.sp-tab:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--text); }
.sp-tab.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--sh-raised); }
.sp-tab input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sp-tab.excluded .sp-tab-name { text-decoration: line-through; text-decoration-color: var(--faint); opacity: 0.65; }
.sp-tab-file { font-size: 11.5px; font-weight: 400; color: var(--faint); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
.sp-tab-n { font-size: 11px; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.sp-tab-x { width: 20px; height: 20px; border: 0; border-radius: 6px; background: none; color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; }
.sp-tab:hover .sp-tab-x, .sp-tab.active .sp-tab-x { opacity: 1; }
.sp-tab-x:hover { background: var(--sunk); color: var(--text); }
.sp-tab-add { width: 30px; height: 30px; margin: 0; border-radius: 8px; display: grid; place-items: center; color: var(--muted); cursor: pointer; flex: none; }
.sp-tab-add:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--text); }

/* Message panel */
.sp-panel { min-height: 0; overflow-y: auto; padding: 4px 18px 8px; border-radius: 14px; background: var(--surface); box-shadow: var(--sh-card); scrollbar-width: thin; }
.sp-sec { padding: 14px 0; box-shadow: 0 1px 0 var(--hair); }
.sp-sec:last-child { box-shadow: none; }
.sp-sec > label:first-child { margin-top: 0; }
.sp-sec .field-label { margin-top: 0; }
.sp-map { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 6px 0; }
.sp-map select, .sp-map input { margin: 0 !important; height: 34px; font-size: 13px; }
.sp-map .m-val { grid-column: 2; }
.sp-map .m-upload-row { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.sp-map .m-upload, .sp-map .m-unupload { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sp-map .m-upload.busy { opacity: 0.6; pointer-events: none; }
.sp-panel .phone { padding: 14px 12px; min-height: 0; }
.sp-panel .toggle-item { padding: 6px 6px 6px 12px; }
.sp-test summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 6px; }
.sp-test summary::-webkit-details-marker { display: none; }
.sp-test summary::before { content: "▸"; font-size: 11px; transition: transform 0.15s; }
.sp-test[open] summary::before { transform: rotate(90deg); }
.sp-test[open] summary { margin-bottom: 10px; color: var(--text); }
.sp-test .row input { margin: 0; }
.sp-notes { font-size: 12.5px; color: var(--muted); margin-left: 6px; }
#tab-send .sendbar { position: static; margin: 0; flex: none; }

@media (max-width: 900px) {
  .sp-body { grid-template-columns: minmax(0, 1fr); }
  .sp-main { height: 62vh; flex: none; }
  .sp-panel { overflow: visible; }
  #tab-send .sendbar { position: sticky; bottom: 12px; }
  .sp-title { max-width: 100%; }
}

/* =================== Spreadsheet grid (sheet.js) =================== */
.sg-root { position: relative; overflow: auto; outline: none; font-size: 13px; background: var(--surface); scrollbar-width: thin; }
.sg { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sg th, .sg td {
  height: 30px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
  box-shadow: inset -1px -1px 0 var(--grid-line); font-weight: 400;
}
.sg td { color: var(--text); cursor: cell; line-height: 29px; }
.sg .sg-fill { box-shadow: inset 0 -1px 0 var(--grid-line); cursor: default; }
.sg thead .sg-fill { background: var(--sheet-head); }
.sg thead th { position: sticky; z-index: 2; background: var(--sheet-head); user-select: none; }
.sg .sg-letters th { top: 0; height: 24px; text-align: center; font: 600 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--faint); letter-spacing: 0.04em; overflow: visible; }
.sg .sg-names th { top: 24px; height: 32px; color: var(--text); font-weight: 600; cursor: pointer; }
.sg thead th.on { background: color-mix(in srgb, var(--info) 14%, var(--sheet-head)); color: var(--info); }
.sg .sg-letters th { position: sticky; }
.sg-menu { position: absolute; right: 3px; top: 2px; width: 20px; height: 19px; border: 0; border-radius: 5px; background: none; color: var(--muted); font-size: 10px; line-height: 1; cursor: pointer; opacity: 0; }
.sg .sg-letters th:hover .sg-menu, .sg .sg-letters th.on .sg-menu { opacity: 1; }
.sg-menu:hover { background: var(--surface); color: var(--text); }
.sg-rz { position: absolute; top: 0; right: -3px; bottom: -32px; width: 7px; cursor: col-resize; z-index: 3; touch-action: none; }
.sg-rz:hover { background: color-mix(in srgb, var(--info) 45%, transparent); }
.sg-tag { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 5px; background: var(--info-soft); color: var(--info); vertical-align: -4px; }
.sg-filtered { margin-left: 6px; color: var(--info); font-size: 12px; }
.sg-hname { vertical-align: middle; }
.sg .sg-corner { position: sticky; left: 0; top: 0; z-index: 4; text-align: center; background: var(--sheet-head); }
.sg .sg-rh {
  position: sticky; left: 0; z-index: 1; background: var(--sheet-idx); text-align: right; padding: 0 10px 0 8px;
  font: 500 11.5px Inter, sans-serif; color: var(--faint); font-variant-numeric: tabular-nums; cursor: pointer; user-select: none;
}
.sg .sg-rh.on { background: color-mix(in srgb, var(--info) 14%, var(--sheet-idx)); color: var(--info); }
.sg input.cb { vertical-align: -3px; }
.sg .sg-rh { line-height: 29px; }
.sg .sg-rh input { float: left; margin-top: 6px; }
.sg .sg-rh input:disabled { cursor: not-allowed; opacity: 0.35; }
.sg td.sel { background: color-mix(in srgb, var(--info) 11%, var(--surface)); }
.sg td.act { box-shadow: inset 0 0 0 2px var(--info); }
.sg tr.off td { color: var(--faint); }
.sg td.ph { font-variant-numeric: tabular-nums; }
.sg td.ph.bad { color: var(--danger); background-image: linear-gradient(var(--danger-soft), var(--danger-soft)); }
.sg td.ph.bad.sel { background-image: linear-gradient(color-mix(in srgb, var(--info) 11%, var(--danger-soft)), color-mix(in srgb, var(--info) 11%, var(--danger-soft))); }
.sg td.ph.dup { color: var(--warn); }
.sg .sg-spacer td { padding: 0; height: auto; box-shadow: none; }
.sg .sg-none { height: auto; padding: 48px 16px; text-align: center; color: var(--muted); box-shadow: none; white-space: normal; }
.sg-edit {
  position: absolute; z-index: 5; margin: 0; padding: 0 8px; border: 0; border-radius: 0; font: 13px Inter, sans-serif;
  background: var(--surface); color: var(--text); box-shadow: 0 0 0 2px var(--info), 0 6px 18px -6px rgba(16, 24, 32, 0.35) !important;
}
.sg-edit:focus { outline: 0; }

/* Menus and the filter panel */
.sg-menu-pop {
  position: fixed; z-index: 70; min-width: 210px; padding: 6px; border-radius: 12px; background: var(--surface);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--hair); animation: pop 0.14s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.sg-menu-pop > button {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; height: 32px; padding: 0 10px;
  border: 0; border-radius: 8px; background: none; color: var(--text); font: 13px Inter, sans-serif; text-align: left; cursor: pointer;
}
.sg-menu-pop > button:hover:not(:disabled), .sg-menu-pop > button:focus-visible { background: var(--sunk); outline: 0; }
.sg-menu-pop > button:disabled { color: var(--faint); cursor: default; }
.sg-menu-pop > button.danger { color: var(--danger); }
.sg-menu-pop kbd { background: none; box-shadow: none; color: var(--faint); font-weight: 500; }
.sg-menu-pop hr { border: 0; height: 1px; margin: 5px 4px; background: var(--hair); }
.sg-pop { width: 290px; padding: 12px; }
.sg-pop-title { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.sg-pop input:not([type="checkbox"]) { height: 34px; margin: 0 0 8px; font-size: 13px; }
.sg-pop-sub { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 4px 0 6px; }
.sg-pop-sub button { border: 0; background: none; padding: 0; color: var(--accent-text); font: 600 12px Inter, sans-serif; cursor: pointer; }
.sg-pop-list { max-height: 220px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.sg-pop-list label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 4px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.sg-pop-list label:hover { background: var(--sunk); }
.sg-pop-list label input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.sg-pop-list label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-pop-list small { color: var(--faint); font-variant-numeric: tabular-nums; }
.sg-pop-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }

.sp-phone-hint { font-size: 12.5px; color: var(--info); border: 0; background: none; padding: 0; cursor: pointer; }

/* Show filter and hints above the grid */
.sp-strip { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 8px 10px; box-shadow: inset 0 -1px 0 var(--grid-line); flex: none; }
.sp-show > button { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.sp-show .n { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.sp-show .st-valid .n { color: var(--good-text); }
.sp-show .st-invalid .n { color: var(--danger); }
.sp-show .st-duplicate .n { color: var(--warn); }
.sp-filtered { font-size: 12.5px; color: var(--muted); }
.sp-filtered .link { font-size: inherit; }
.sp-alert { font-size: 12.5px; color: var(--danger); font-weight: 500; }
.sp-strip .sp-phone-hint { padding: 4px 10px; border-radius: 99px; background: var(--info-soft); font-weight: 500; }

/* File colours: every sheet from the same file shares one (tabs, group label, title dot). */
:root { --file-1: #2b67b0; --file-2: #1f9d55; --file-3: #7a52cc; --file-4: #d2741f; --file-5: #0f8f8a; --file-6: #c2417a; }
:root[data-mode="dark"] { --file-1: #7fb0f0; --file-2: #5fd394; --file-3: #b49cf5; --file-4: #f2a45c; --file-5: #4fd1c9; --file-6: #f08ab5; }
.sp-tab { position: relative; }
.sp-tab::before { content: ""; position: absolute; left: 6px; right: 6px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--tab-c); opacity: 0.55; }
.sp-tab.active::before { opacity: 1; }
.sp-tab input { accent-color: var(--tab-c); }
.sp-tab.excluded::before { opacity: 0.2; }
.sp-group {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 10px; margin-left: 6px; flex: none;
  font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; max-width: 24ch; overflow: hidden; text-overflow: ellipsis;
}
.sp-group:first-child { margin-left: 0; }
.sp-group i, .sp-file-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tab-c); flex: none; }
.sp-file-dot { display: inline-block; margin-right: 6px; vertical-align: 1px; }

.pc-sources { display: flex; flex-direction: column; gap: 4px; }

/* =================== Contacts =================== */
/* Tag colours, shared by chips everywhere (Contacts, Inbox, Send). */
.tag-blue { --tag: var(--file-1); } .tag-green { --tag: var(--file-2); } .tag-violet { --tag: var(--file-3); }
.tag-orange { --tag: var(--file-4); } .tag-teal { --tag: var(--file-5); } .tag-pink { --tag: var(--file-6); } .tag-gray { --tag: var(--muted); }
.tag-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--tag); background: color-mix(in srgb, var(--tag) 14%, transparent); }

.ct-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ct-bar .search { width: 320px; }
.ct-bar select { width: auto; height: 38px; margin: 0; }
.ct-tags, .ct-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ct-pick { margin: 4px 0 12px; }
.ct-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--sunk); color: var(--muted); font: 500 12.5px Inter, sans-serif; transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.ct-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--tag, var(--faint)); }
.ct-tag span { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ct-tag:hover { color: var(--text); }
.ct-tag.active { background: color-mix(in srgb, var(--tag, transparent) 13%, var(--surface)); color: var(--text); font-weight: 600; box-shadow: var(--sh-raised); }
.ct-tag-edit { margin: 0 -4px 0 2px; padding: 0 3px; border-radius: 5px; color: var(--faint); font-weight: 700; opacity: 0; }
.ct-tag:hover .ct-tag-edit { opacity: 1; }
.ct-tag-edit:hover { background: var(--sunk); color: var(--text); }
.ct-tag-new { background: none; box-shadow: none; color: var(--muted); }
.ct-sel { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 10px 8px 16px; border-radius: 12px; background: var(--accent-soft); }
.ct-sel-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ct-card { padding: 0; overflow: clip; } /* clip, not hidden, so sticky headers pin to the window */
.ct-scroll { max-height: calc(100vh - 330px); min-height: 240px; overflow: auto; }
.ct-table td { vertical-align: middle; }
.ct-table tbody tr { cursor: pointer; user-select: auto; }
.ct-table tbody tr.ct-opted td:not(.sel) { color: var(--faint); }
.ct-name { display: flex; flex-direction: column; line-height: 1.3; }
.ct-name span { font-size: 12px; color: var(--muted); }
.ct-chips { display: flex; gap: 4px; flex-wrap: wrap; max-width: 260px; white-space: normal; }
.ct-lead { max-width: 280px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12.5px; }
.ct-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 13px; color: var(--muted); box-shadow: inset 0 1px 0 var(--hair); }
.ct-form .row > label { flex: 1; }
.ct-optout { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 30px !important; }
.ct-leadbox { margin: 6px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--info-soft); font-size: 13.5px; }
.ct-leadbox .pc-label { color: var(--info); margin-bottom: 4px; }
.ct-leadbox p { margin: 0 0 6px; }
.ct-leadbox dl, .ct-extra dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0; }
.ct-leadbox dt, .ct-extra dt { color: var(--muted); }
.ct-leadbox dd, .ct-extra dd { margin: 0; overflow-wrap: anywhere; }
.ct-extra { margin-bottom: 10px; font-size: 13px; }
.ct-extra summary { cursor: pointer; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.tg-colors { display: flex; gap: 8px; margin: 4px 0 14px; }
.tg-color { margin: 0; cursor: pointer; }
.tg-color input { position: absolute; opacity: 0; }
.tg-color i { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--tag); box-shadow: inset 0 0 0 2px var(--surface); }
.tg-color input:checked + i { box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--tag); }
.tg-color input:focus-visible + i { outline: 2px solid var(--ring); outline-offset: 3px; }

/* Import */
.modal-box.ci-box { max-width: 760px; }
.ci-drop { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px; padding: 18px; border-radius: 12px; background: var(--sunk); box-shadow: var(--sh-sunk); color: var(--muted); cursor: pointer; font-weight: 400; }
.ci-drop.over { box-shadow: var(--sh-sunk), 0 0 0 2px var(--accent); }
.ci-drop b { color: var(--text); }
.ci-sheets { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow: auto; }
.ci-sheet { padding: 12px 14px; border-radius: 12px; background: var(--field); box-shadow: var(--sh-sunk); }
.ci-sheet.off { opacity: 0.55; }
.ci-sheet-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ci-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ci-map label { margin: 0; font-size: 12px; color: var(--muted); }
.ci-map select { height: 32px; font-size: 12.5px; margin-top: 3px; }
.ci-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; }
.ci-fix { margin-top: 8px; font-size: 12.5px; color: var(--info); }
.ci-opts { margin-top: 12px; }
.ci-opts #ciNewTags { margin-top: 0; }
.ci-summary { margin-right: auto; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .ci-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-bar .search { width: 100%; } }

/* =================== Inbox: lead assistant =================== */
.ib-headx { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.ib-headx .pill { height: 22px; font-size: 11px; }
.ib-headx + .ib-window { margin-left: 8px; }
.ib-ai-switch { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 0 4px; font-size: 12px; cursor: pointer; color: var(--muted); font: 600 12px Inter, sans-serif; white-space: nowrap; user-select: none; }
.ib-ai-switch.on { color: var(--text); }
.ib-ai-switch .toggle { margin-left: 2px; }
/* The AI orb rides in the knob: grey when off, accent when on. */
.ib-ai-switch .knob { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ib-ai-switch input:checked + .track .knob { color: var(--accent-text); }
.ib-lead { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: baseline; padding: 8px 18px; font-size: 12.5px; color: var(--muted); background: var(--info-soft); box-shadow: inset 0 -1px 0 var(--hair); }
.ib-lead-sum { color: var(--text); font-weight: 500; }
.ib-lead b { color: var(--info); font-weight: 600; margin-right: 3px; }
.ib-ai { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.ib-ai:empty { display: none; }
.ib-ai > :first-child { margin-top: 10px; }
.ib-draft { padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--sh-card), 0 0 0 1px color-mix(in srgb, var(--info) 35%, transparent); }
.ib-draft.busy { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.ib-draft-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--info); }
.ib-draft-head .warn-text { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.ib-draft-text { margin: 6px 0 10px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.ib-draft-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ib-handover { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--text); font-size: 13px; }
.ib-handover > svg.la { color: var(--warn); flex: none; }
.ib-handover div { flex: 1; display: flex; flex-direction: column; }
.ib-handover b { color: var(--warn); }
.ib-ai-ask { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 99px; cursor: pointer; background: var(--surface); color: var(--text); font: 500 13px Inter, sans-serif; box-shadow: var(--sh-raised); }
.ib-ai-ask:hover { box-shadow: var(--sh-raised-hi); }
.ib-ai-err { font-size: 12.5px; color: var(--danger); }
.ib-flag { margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.ib-flag.need { background: var(--warn-soft); color: var(--warn); }
.ib-flag.draft { background: var(--info-soft); color: var(--info); }
.ib-conv-top time { margin-left: auto; }
.lead-toggle { margin-top: 12px; padding-bottom: 0; margin-bottom: 0; box-shadow: none; }

/* =================== Campaigns =================== */
.cp-summary b { color: var(--text); font-variant-numeric: tabular-nums; }
.cp-pinned { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.cp-pin {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(200px, 320px) auto; align-items: center; gap: 16px;
  padding: 12px 14px 12px 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--sh-card); cursor: pointer;
}
.cp-pin.is-live { box-shadow: var(--sh-card), inset 3px 0 0 var(--good); }
.cp-pin-state { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.cp-pin.is-live .cp-pin-state { color: var(--good-text); }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation: cp-pulse 1.6s infinite; }
@keyframes cp-pulse { 70% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .cp-dot { animation: none; } }
.cp-pin-main, .cp-pin-when { display: flex; flex-direction: column; min-width: 0; }
.cp-pin-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pin-main span, .cp-pin-when span, .cp-pin-progress > span { font-size: 12.5px; color: var(--muted); }
.cp-pin-progress { display: flex; flex-direction: column; gap: 5px; }
.cp-tools { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cp-tools .search-wrap { flex: 1 1 260px; min-width: 220px; }
.cp-tools .search { width: 100%; }
.cp-tools .cp-view { margin-left: 0; }
.cp-tools select { height: 34px; }
.cp-card { padding: 0; overflow: hidden; }
.cp-table td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.cp-table th.num, .cp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cp-table tbody tr { cursor: pointer; user-select: auto; }
.cp-name { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.cp-name b { font-weight: 600; }
.cp-name span { font-size: 12px; color: var(--muted); }
.cp-name .pill { height: 18px; font-size: 10.5px; }
.cp-bar { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.cp-bar > span { flex: 1; height: 6px; border-radius: 99px; background: var(--meter-track); overflow: hidden; }
.cp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--chart); }
.cp-bar b { width: 38px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.cp-leads { color: var(--good-text); }
.cp-date { color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) {
  .cp-pin { grid-template-columns: 1fr auto; }
  .cp-pin-state { grid-column: 1 / -1; }
  .cp-pin-progress, .cp-pin-when { grid-column: 1; }
  .cp-table th:nth-child(4), .cp-table td:nth-child(4), .cp-table th:nth-child(7), .cp-table td:nth-child(7) { display: none; }
}

/* Campaign detail */
.cd-head { margin-bottom: 16px; }
.cd-back { margin-left: -8px; margin-bottom: 8px; }
.cd-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; }
.cd-title h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.cd-title h1 .pill { font-size: 11px; }
.cd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cd-more { width: 40px; padding: 0; font-size: 18px; letter-spacing: 1px; }
.cd-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.cd-top { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.cd-msg .phone { min-height: 0; padding: 16px 14px; }
.cd-msg .sub { margin-top: 10px; }
.cd-flip { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.cd-flip .icon-btn { width: 26px; height: 26px; font-size: 16px; }
.cd-steps { display: flex; flex-direction: column; gap: 12px; }
.cd-step-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.cd-step-top span { width: 90px; color: var(--muted); font-size: 13px; }
.cd-step-top b { font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cd-step-top em { font-style: normal; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cd-step-bar { height: 10px; border-radius: 99px; background: var(--meter-track); overflow: hidden; }
.cd-step-bar i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--chart); transition: width 0.6s var(--ease-out); }
.cd-step.s0 .cd-step-bar i { background: var(--chart-3); }
.cd-step.s1 .cd-step-bar i { background: var(--chart-2); }
.cd-step.s3 .cd-step-bar i { background: var(--info); }
.cd-step.s4 .cd-step-bar i { background: var(--good); }
.cd-foot { margin-top: 14px; }
.bad-text { color: var(--danger); font-weight: 500; }
.cd-chart-card { margin-bottom: 16px; }
.cd-chart-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.cd-chart-head .cd-label { margin: 0; }
.cd-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); margin-right: auto; }
.cd-legend span, .cd-tip span { display: inline-flex; align-items: center; gap: 6px; }
.cd-legend i, .cd-tip i { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--hair); }
.cd-chart { position: relative; }
.cd-chart svg { display: block; width: 100%; height: 200px; overflow: visible; }
.cd-grid-line { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cd-axis { font: 11px Inter, sans-serif; fill: var(--faint); }
.cd-end { font: 600 12px Inter, sans-serif; fill: var(--muted); }
.cd-end-v { fill: var(--text); }
.cd-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.cd-tip { position: absolute; top: 8px; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--hair); font-size: 12.5px; pointer-events: none; white-space: nowrap; }
.cd-tip em { font-style: normal; font-weight: 600; margin-left: auto; padding-left: 14px; font-variant-numeric: tabular-nums; }
.cd-ctable { width: 100%; }
.cd-ctable .num { text-align: right; font-variant-numeric: tabular-nums; }
.cd-fail { margin-bottom: 16px; }
.cd-reasons { display: flex; flex-direction: column; }
.cd-reason { display: flex; align-items: center; gap: 14px; padding: 9px 0; box-shadow: 0 1px 0 var(--hair); }
.cd-reason:last-child { box-shadow: none; }
.cd-reason-n { min-width: 44px; font-size: 18px; font-weight: 700; color: var(--danger); font-variant-numeric: tabular-nums; }
.cd-reason-t { flex: 1; font-size: 13.5px; }
.cd-noretry { font-size: 12px; color: var(--faint); }
/* The retry dialog (Follow up → Retry failed messages): the failure reasons as ticked rows, like "Why it failed". */
.confirm-box.wide { max-width: 580px; }
.rt-list { display: flex; flex-direction: column; margin-top: 14px; border-radius: 12px; background: var(--sunk); padding: 4px 14px; }
.rt-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; box-shadow: 0 1px 0 var(--hair); color: var(--text); cursor: pointer; }
.rt-row:last-child { box-shadow: none; }
.rt-row input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--text); cursor: pointer; }
.rt-row .cd-reason-n { min-width: 40px; font-size: 16px; }
.rt-row .cd-reason-t { line-height: 1.45; }
.rt-row.is-off { cursor: default; color: var(--faint); }
.rt-row.is-off .cd-reason-n { color: var(--faint); }
.rt-row.is-off .cd-noretry { flex: none; }
.rt-gap { flex: none; width: 16px; }
.rt-all { font-weight: 600; font-size: 13.5px; }
.rt-all-t { flex: 1; }
.rt-all-n { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500; }
.cd-recips { padding: 0; overflow: hidden; }
.cd-recips-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 18px 12px; }
.cd-recips-head h2 { margin: 0; }
.cd-recips-head .seg > button { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.cd-recips-head .n { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.cd-grid { height: min(520px, 60vh); display: flex; box-shadow: inset 0 1px 0 var(--grid-line); }
.cd-grid-root { flex: 1; min-width: 0; }
.cd-grid-note { margin: 0; padding: 8px 18px 12px; }
.sg td.cd-st-read, .sg td.cd-st-replied { color: var(--good-text); font-weight: 500; }
.sg td.cd-st-delivered { color: var(--text); }
.sg td.cd-st-sent, .sg td.cd-st-pending, .sg td.cd-st-queued { color: var(--muted); }
.sg td.cd-st-failed { color: var(--danger); font-weight: 500; }
@media (max-width: 900px) { .cd-top { grid-template-columns: 1fr; } }

/* Campaign folders (cards view) */
.cp-view { margin-left: auto; }
.cp-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 22px; padding-top: 12px; }
.cp-folder, .cp-folder-new {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 186px; padding: 18px 20px 18px;
  border: 0; border-radius: 22px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
/* A folder in three layers, back to front: its tab (top right, sloped edge), a sheet of paper
   peeking out, then the body in the template's colour. The button itself paints nothing. */
.cp-folder { isolation: isolate; background: none; box-shadow: none; padding-top: 34px; }
.cf-tab, .cf-paper, .cf-body { position: absolute; pointer-events: none; }
.cf-tab {
  z-index: -3; top: 0; right: 0; width: 62%; height: 40px; border-radius: 0 22px 0 0;
  background: color-mix(in srgb, var(--c) 42%, var(--surface)); clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}
.cf-paper { z-index: -2; top: 8px; right: 10px; width: calc(62% - 30px); height: 30px; border-radius: 6px 14px 0 0; background: var(--surface); box-shadow: 0 -1px 2px rgba(16, 24, 32, 0.06); }
.cf-body {
  z-index: -1; inset: 16px 0 0 0; border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, var(--surface)) 0%, color-mix(in srgb, var(--c) 32%, var(--surface)) 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04), 0 16px 30px -18px color-mix(in srgb, var(--c) 70%, transparent);
  transition: box-shadow 0.18s var(--ease-out);
}
.cp-folder:hover, .cp-folder:focus-visible { transform: translateY(-3px); outline: 0; }
.cp-folder:hover .cf-body { box-shadow: 0 1px 2px rgba(16, 24, 32, 0.05), 0 22px 36px -18px color-mix(in srgb, var(--c) 85%, transparent); }
.cp-folder:focus-visible .cf-body { box-shadow: 0 0 0 3px var(--ring), 0 22px 36px -18px color-mix(in srgb, var(--c) 85%, transparent); }
.cp-folder-top { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; margin-top: 6px; }
.cp-folder-top .pill { height: 20px; font-size: 10.5px; background: color-mix(in srgb, var(--surface) 75%, transparent); }
.cp-folder-leads { height: 20px; padding: 0 8px; border-radius: 99px; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; background: var(--good); color: #fff; }
.cp-folder-body { display: flex; flex-direction: column; gap: 3px; }
.cp-folder-body b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-folder-body small { font-size: 12px; color: color-mix(in srgb, var(--text) 55%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Delivery bar: shades of the folder colour, failures in red */
.cf-bar { display: flex; gap: 2px; height: 6px; margin: 14px 0 12px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.cf-bar i { display: block; height: 100%; border-radius: 99px; }
.cf-bar .cf-read { background: color-mix(in srgb, var(--c) 100%, var(--text) 25%); }
.cf-bar .cf-del { background: color-mix(in srgb, var(--c) 70%, var(--surface)); }
.cf-bar .cf-sent { background: color-mix(in srgb, var(--c) 35%, var(--surface)); }
.cf-bar .cf-fail { background: color-mix(in srgb, var(--danger) 75%, var(--surface)); }
/* Three numbers, like the counts on a phone's folder */
.cf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cf-stats > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--text) 55%, transparent); }
.cf-stats b { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.cf-stats > span + span { padding-left: 10px; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--text) 9%, transparent); }
.cf-stats .has b { color: var(--good-text); }
/* "New campaign": a dashed outline with a round plus, like an empty slot. */
.cp-folder-new {
  margin-top: 16px; min-height: 170px; background: transparent; box-shadow: none; outline: 2px dashed color-mix(in srgb, var(--good) 55%, transparent); outline-offset: -2px; justify-content: flex-start;
}
.cp-folder-new b { font-size: 20px; font-weight: 600; color: var(--good-text); letter-spacing: -0.02em; }
.cp-folder-new span { margin-top: 4px; font-size: 13.5px; color: var(--faint); max-width: 14ch; }
.cp-folder-new i { position: absolute; right: 18px; bottom: 18px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--good) 85%, white), var(--good)); box-shadow: 0 8px 18px -8px var(--good); }
.cp-folder-new:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--good) 5%, transparent); }
:root[data-mode="dark"] .cf-body { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, var(--surface)) 0%, color-mix(in srgb, var(--c) 36%, var(--surface)) 100%); }
:root[data-mode="dark"] .cf-tab { background: color-mix(in srgb, var(--c) 48%, var(--surface)); }
:root[data-mode="dark"] .cf-paper { background: color-mix(in srgb, var(--surface) 70%, white); }

/* Morph between the folder grid and the table (campaigns.js → morph). Names only exist while it runs. */
.vt-camp .cp-folder[data-open], .vt-camp .cp-table tr[data-open] { view-transition-name: var(--vt); }
.vt-camp .cp-folder-new { view-transition-name: cp-new; }
html.vt-camp::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
/* Keep each snapshot crisp while its box reshapes: no stretching, the old one fades out quickly. */
html.vt-camp::view-transition-old(*), html.vt-camp::view-transition-new(*) { height: 100%; width: 100%; object-fit: none; object-position: left top; }
html.vt-camp::view-transition-old(*) { animation-duration: 0.22s; }
html.vt-camp::view-transition-group(root) { animation-duration: 0.3s; }

/* ---- Contacts: status cards, cards ↔ table, side panel (contacts.js) ---- */
.ct-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ct-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 14px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  background: var(--surface); box-shadow: var(--sh-raised); color: var(--muted); font: inherit; font-size: 12.5px; transition: box-shadow 0.15s, transform 0.15s;
}
.ct-stat b { font-size: 21px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ct-stat:hover { transform: translateY(-1px); }
.ct-stat:not(.active) { background: var(--sunk); box-shadow: none; }
.ct-stat:not(.active):hover { background: color-mix(in srgb, var(--surface) 60%, var(--sunk)); }
.ct-stat.active { background: color-mix(in srgb, var(--st, transparent) 9%, var(--surface)); box-shadow: var(--sh-raised); color: var(--text); font-weight: 600; }
.ct-stat span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--st, var(--faint)); vertical-align: 1px; }
.ct-stat.st-interested { --st: var(--info); } .ct-stat.st-qualified { --st: var(--violet); } .ct-stat.st-won { --st: var(--good, #1f9d55); }
.ct-stat.st-lost { --st: var(--muted); } .ct-stat.st-optout { --st: var(--danger); } .ct-stat.st-new { --st: var(--faint); }
.ct-stat:first-child span::before { display: none; }

.ct-bar { flex-wrap: nowrap; align-items: center; }
.ct-bar .search-wrap { flex: none; }
.ct-bar .search { width: 280px; }
.ct-bar .ct-tags { flex: 1; min-width: 0; margin: -6px 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px 4px; }
.ct-bar .ct-tag { flex: none; }
.ct-view { flex: none; margin-left: auto; }

.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ct-layout.has-panel { grid-template-columns: minmax(0, 1fr) 360px; }
.has-panel .ct-c-lead, .has-panel .ct-c-co { display: none; }
.ct-scroll { position: relative; max-height: none; min-height: 0; overflow: visible; }
.ct-who { display: flex; align-items: center; gap: 10px; }
.ct-table tr.open td { background: var(--accent-soft); }

/* Avatars */
.ct-av {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 650; font-size: 12.5px;
  color: var(--av); background: color-mix(in srgb, var(--av) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av) 22%, transparent);
}
.ct-av.lg { width: 64px; height: 64px; font-size: 21px; }
.ct-av.xl { width: 84px; height: 84px; font-size: 28px; }
.ct-av svg.la { margin: 0; }

/* Cards: an address book */
.ct-scroll-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 0 12px 16px 18px; }
.ct-letter h3 {
  position: sticky; top: 0; z-index: 2; margin: 0 0 0 -18px; padding: 12px 18px 6px; font-size: 13px; font-weight: 700; color: var(--muted);
  background: linear-gradient(var(--surface) 75%, transparent);
}
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; padding: 4px 0 10px; }
.ct-person {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 14px; border-radius: 16px; cursor: pointer; text-align: center; min-width: 0;
  background: var(--sunk); transition: background 0.15s, box-shadow 0.15s, transform 0.15s; outline: 0;
}
.ct-person:hover { background: var(--surface); box-shadow: var(--sh-raised); transform: translateY(-2px); }
.ct-person:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.ct-person.open { background: var(--surface); box-shadow: var(--sh-raised); }
.ct-person.selected { background: var(--accent-soft); }
.ct-person .ct-av { margin-bottom: 6px; }
.ct-person b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.ct-psub { max-width: 100%; min-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.ct-pmeta { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.ct-pmeta .pill { height: 19px; font-size: 10.5px; padding: 0 7px; }
.ct-pmeta i { width: 8px; height: 8px; border-radius: 50%; background: var(--tag); }
.ct-person.ct-opted b, .ct-person.ct-opted .ct-av { opacity: 0.55; }
.ct-pcheck { position: absolute; top: 9px; left: 10px; opacity: 0; transition: opacity 0.12s; margin: 0; }
.ct-person:hover .ct-pcheck, .ct-person.selected .ct-pcheck, .ct-sel:not(.hidden) ~ .ct-layout .ct-pcheck { opacity: 1; }
.ct-book { min-width: 0; }

/* Side panel */
.ct-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 22px 20px 18px; animation: ct-in 0.22s ease-out; }
@keyframes ct-in { from { opacity: 0; transform: translateX(12px); } }
.ct-pclose { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--sunk); color: var(--muted); cursor: pointer; }
.ct-pclose:hover { color: var(--text); }
.ct-phead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 16px; }
.ct-phead .ct-av { margin-bottom: 8px; }
.ct-phead h2 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.ct-phead p { margin: 0; color: var(--muted); font-size: 13px; }
.ct-pacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.ct-pact {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--sunk); color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 600;
}
.ct-pact span { color: var(--muted); }
.ct-pact:hover:not(:disabled) { background: var(--accent-soft); }
.ct-pact:disabled { opacity: 0.4; cursor: not-allowed; }
.ct-pact[data-pact="delete"] { color: var(--danger); }
.ct-pact svg.la { margin: 0; }
.ct-psec { display: block; margin-bottom: 16px; }
.ct-psec .field-label { margin-bottom: 6px; }
.ct-pstatus { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-poptout { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13.5px; }
.ct-panel .ct-pick { margin: 0; }
.ct-pdl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.ct-pdl dt { color: var(--muted); }
.ct-pdl dd { margin: 0; overflow-wrap: anywhere; }
.ct-pnotes textarea { width: 100%; margin: 0; resize: vertical; }

/* Morph between cards and table (contacts.js → morph) */
.vt-ct .ct-person[data-id], .vt-ct .ct-table tr[data-id] { view-transition-name: var(--vt); }
html.vt-ct::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
html.vt-ct::view-transition-old(*), html.vt-ct::view-transition-new(*) { height: 100%; width: 100%; object-fit: none; object-position: left top; }
html.vt-ct::view-transition-old(*) { animation-duration: 0.2s; }

/* Medium widths: the status tiles stay one row (scrolling if they must) and the tag chips get their own line */
@media (max-width: 1200px) {
  .ct-stats { grid-template-columns: repeat(7, minmax(112px, 1fr)); overflow-x: auto; scrollbar-width: none; margin: -4px -4px 10px; padding: 4px; }
  .ct-bar { flex-wrap: wrap; }
  .ct-bar .ct-tags { order: 3; flex-basis: 100%; margin: 0; padding: 0 0 2px; }
}
@media (max-width: 900px) {
  .ct-layout.has-panel { grid-template-columns: minmax(0, 1fr); }
  .ct-panel { position: fixed; inset: auto 0 0 0; top: 12vh; z-index: 40; max-height: none; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgb(0 0 0 / 0.18); }
  .ct-bar { flex-wrap: wrap; }
  .ct-bar .search-wrap, .ct-bar .search { width: 100%; }
  .ct-bar .ct-tags { order: 3; flex-basis: 100%; }
  .has-panel .ct-c-lead, .has-panel .ct-c-co { display: table-cell; }
}
@media (max-width: 600px) {
  .ct-stats { grid-template-columns: repeat(7, max-content); overflow-x: auto; scrollbar-width: none; }
  .ct-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* The same folder, small, beside each campaign in the table view */
.cp-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cp-ficon { position: relative; isolation: isolate; flex: none; width: 34px; height: 28px; }
.cp-ficon .cf-tab { top: 0; height: 12px; border-radius: 0 6px 0 0; }
.cp-ficon .cf-paper { top: 2px; right: 3px; width: calc(62% - 7px); height: 9px; border-radius: 2px 4px 0 0; }
.cp-ficon .cf-body { inset: 5px 0 0 0; border-radius: 6px; box-shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 4px 8px -4px color-mix(in srgb, var(--c) 70%, transparent); }

/* Contacts empty state: sits inside the list card, no fixed height */
.ct-empty { padding: 14px !important; }
.ct-empty .empty { background: none; box-shadow: none; padding: 44px 20px 48px; }
.ct-empty .empty .row { justify-content: center; }

/* ---- Contacts: A–Z index down the right (tap, or drag along it like a phone) ---- */
.ct-letter { scroll-margin-top: 12px; }
.ct-az {
  /* Square letter slots and one inset on every side, so the circular highlight sits
     exactly inside the track's rounded ends: track radius = slot / 2 + pad. */
  --row: clamp(16px, calc((100vh - 120px) / 27), 22px);
  --pad: 4px;
  position: sticky; top: 16px; align-self: start; z-index: 4; display: flex; flex-direction: column; align-items: center;
  margin-top: 12px; padding: var(--pad); border-radius: calc(var(--row) / 2 + var(--pad)); background: var(--sunk); box-shadow: var(--sh-sunk);
  touch-action: none; user-select: none; cursor: pointer;
}
.ct-az button {
  position: relative; z-index: 1; width: var(--row); height: var(--row); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  font: inherit; font-size: calc(var(--row) * 0.5); font-weight: 700; line-height: 1; color: var(--muted);
  transition: color 0.2s, transform 0.25s;
}
.ct-az button:hover:not(:disabled) { color: var(--text); transform: scale(1.25); }
.ct-az button:disabled { color: var(--faint); opacity: 0.4; font-weight: 500; cursor: pointer; pointer-events: none; }
.ct-az button.on { color: var(--text); }
.ct-az button:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ring); }
.ct-az-thumb {
  position: absolute; top: 0; left: var(--pad); width: var(--row); height: var(--row); border-radius: 50%; pointer-events: none; /* offsetTop already includes the padding */
  background: linear-gradient(180deg, var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised); transition: transform 0.4s;
}
.ct-az-bubble {
  position: absolute; top: 0; right: calc(100% + 10px); width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; font-weight: 700; color: var(--on-accent); pointer-events: none;
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
  opacity: 0; scale: 0.6; transition: transform 0.18s, opacity 0.2s, scale 0.25s;
}
.ct-az.peek .ct-az-bubble { opacity: 1; scale: 1; }
.ct-az.scrub .ct-az-bubble { transition: opacity 0.2s, scale 0.25s; }

/* ---- Contacts motion ---- */
@keyframes ct-rise { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.ct-enter .ct-person, .ct-enter tbody tr[data-id], .ct-enter .ct-empty .empty { animation: ct-rise 0.45s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 16) * 18ms); }
.ct-enter .ct-letter h3 { animation: ct-rise 0.4s var(--ease-out) both; }
.ct-stat, .ct-tag, .ct-person, .ct-pact { transition: background 0.3s, box-shadow 0.3s, color 0.25s, transform 0.3s; }
.ct-stat:active, .ct-tag:active, .ct-pact:active:not(:disabled) { transform: scale(0.97); transition-duration: 0.1s; }
.ct-person:active { transform: translateY(-1px) scale(0.99); transition-duration: 0.1s; }

/* The list makes room for the panel smoothly; the panel slides in and out. */
.ct-layout { grid-template-columns: minmax(0, 1fr) 0px; column-gap: 0; overflow: clip; overflow-clip-margin: 40px; transition: grid-template-columns 0.45s, column-gap 0.45s; }
.ct-layout.has-panel { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 16px; }
.ct-panel { width: 360px; animation: ct-panel-in 0.45s var(--ease-out) both; }
.ct-panel.swap > * { animation: ct-swap 0.35s var(--ease-out) both; }
.ct-panel.leaving { animation: ct-panel-out 0.28s var(--ease-in) both; pointer-events: none; }
@keyframes ct-panel-in { from { opacity: 0; transform: translateX(28px) scale(0.98); } }
@keyframes ct-panel-out { to { opacity: 0; transform: translateX(28px) scale(0.98); } }
@keyframes ct-swap { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 900px) {
  .ct-layout, .ct-layout.has-panel { grid-template-columns: minmax(0, 1fr); column-gap: 0; overflow: visible; }
  .ct-panel { width: auto; animation-name: ct-sheet-in; }
  .ct-panel.leaving { animation-name: ct-sheet-out; }
  @keyframes ct-sheet-in { from { transform: translateY(100%); } }
  @keyframes ct-sheet-out { to { transform: translateY(100%); } }
  .ct-scroll-grid { padding-right: 6px; gap: 6px; }
  .ct-az { --row: clamp(14px, calc((100vh - 140px) / 27), 18px); --pad: 3px; }
  .ct-az-bubble { right: calc(100% + 6px); }
}
@media (prefers-reduced-motion: reduce) { .ct-layout { transition: none; } .ct-panel, .ct-panel.swap > *, .ct-enter * { animation: none !important; } }

/* ---- Bell icon: rings on hover ---- */
svg.la-bell .a-bell { transform-box: view-box; transform-origin: 12px 3px; }
svg.la-bell.on .a-bell { animation: la-bell 0.9s var(--ease-out); }
svg.la-bell.on .a-clap { animation: la-clap 0.9s var(--ease-out); }
@keyframes la-bell { 15% { transform: rotate(14deg); } 35% { transform: rotate(-12deg); } 55% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } 100% { transform: none; } }
@keyframes la-clap { 15% { transform: translateX(-1.5px); } 35% { transform: translateX(1.5px); } 55% { transform: translateX(-1px); } 100% { transform: none; } }

/* ---- Toasts: title, message, and a × to dismiss ---- */
.toast { align-items: flex-start; padding: 11px 8px 11px 14px; min-width: 260px; }
.toast > svg.la { flex: none; margin-top: 2px; }
.toast-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.toast-text b { font-weight: 650; }
.toast-text b + span { opacity: 0.8; font-size: 13px; font-weight: 450; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toast-text span:empty { display: none; }
.toast-x {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: -2px 0 0 4px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; opacity: 0.55; cursor: pointer; transition: opacity 0.2s, background 0.2s;
}
.toast-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }
.toast-x:focus-visible { outline: 0; opacity: 1; box-shadow: 0 0 0 2px currentColor; }
.toast-x svg.la { margin: 0; }
.toast.clickable { cursor: pointer; }
.toast.clickable:hover { transform: translateX(-2px); }
.toast { animation: toast-in 0.4s var(--ease-out) both; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(0.97); } }
.toast.out { opacity: 0; transform: translateX(24px) scale(0.97); transition: opacity 0.26s, transform 0.26s; transition-timing-function: var(--ease-in) !important; }

/* ---- Notifications page ---- */
.nt-bar { margin-bottom: 18px; }
.nt-list { max-width: none; }
/* Notifications read as one centred column (header, filters and list together) instead of rows stretched across a wide screen */
#tab-notifications { max-width: 920px; margin-inline: auto; }
.nt-day { margin-bottom: 22px; }
.nt-day h3 { margin: 0 0 8px 4px; font-size: 13px; font-weight: 650; color: var(--muted); }
.nt-card { padding: 4px; }
.nt-item {
  position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 13px 14px; border-radius: 12px; cursor: pointer;
  transition: background 0.25s, opacity 0.3s, transform 0.3s, height 0.3s, padding 0.3s; outline: 0;
}
.nt-item + .nt-item { box-shadow: inset 0 1px 0 var(--hair); }
.nt-item:hover, .nt-item:focus-visible { background: var(--sunk); box-shadow: none; }
.nt-item:hover + .nt-item { box-shadow: none; }
.nt-item:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.nt-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--t-soft); color: var(--t); }
.nt-ico svg.la { margin: 0; }
.tone-info { --t: var(--info); --t-soft: var(--info-soft); }
.tone-good { --t: var(--good-text); --t-soft: var(--good-soft); }
.tone-danger { --t: var(--danger); --t-soft: var(--danger-soft); }
.tone-warn { --t: var(--warn); --t-soft: var(--warn-soft); }
.tone-violet { --t: var(--violet); --t-soft: var(--violet-soft); }
.tone-muted { --t: var(--muted); --t-soft: var(--sunk); }
.nt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 64px; }
.nt-main b { font-weight: 550; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.nt-item.unread .nt-main b { font-weight: 650; color: var(--text); }
.nt-body { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nt-main time { margin-top: 3px; font-size: 12px; color: var(--faint); }
.nt-dot { position: absolute; top: 19px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--info); transition: opacity 0.2s; }
.nt-acts { position: absolute; top: 10px; right: 10px; display: flex; gap: 2px; opacity: 0; transform: translateX(4px); transition: opacity 0.2s, transform 0.25s; }
.nt-item:hover .nt-acts, .nt-item:focus-within .nt-acts { opacity: 1; transform: none; }
.nt-item:hover .nt-dot, .nt-item:focus-within .nt-dot { opacity: 0; }
.nt-act { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: var(--surface); color: var(--muted); box-shadow: var(--sh-raised); cursor: pointer; }
.nt-act:hover { color: var(--text); }
.nt-act svg.la { margin: 0; }
@media (hover: none) { .nt-acts { opacity: 1; transform: none; } .nt-dot { display: none; } .nt-main { padding-right: 70px; } }
/* Arriving live, filtering, and clearing */
@keyframes nt-in { from { opacity: 0; transform: translateY(-8px); background: var(--accent-soft); } }
@keyframes nt-rise { from { opacity: 0; transform: translateY(8px); } }
.nt-item.fresh { animation: nt-in 0.6s var(--ease-out) both; }
.nt-enter .nt-item { animation: nt-rise 0.4s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 12) * 22ms); }
.nt-item.gone { opacity: 0; transform: translateX(24px); height: 0 !important; padding-top: 0; padding-bottom: 0; overflow: hidden; transition-timing-function: var(--ease-in) !important; }
@media (prefers-reduced-motion: reduce) { .nt-item.fresh, .nt-enter .nt-item, .toast { animation: none; } }

/* ---- Sidebar: Notifications and Settings at the bottom, above the footer ---- */
.side-nav-bottom { margin-top: auto; padding-top: 10px; }
.sidebar .side-foot { margin-top: 10px; }
.theme-cycle { display: none; }
@media (min-width: 901px) {
  body.nav-mini #themeSeg { display: none; }
  body.nav-mini .theme-cycle { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; }
  body.nav-mini .theme-cycle svg.la { margin: 0; }
}

/* Collapsed sidebar: no separate expand button. The logo turns into it on hover (or keyboard focus). */
@media (min-width: 901px) {
  body.nav-mini .brand { position: relative; flex-direction: row; justify-content: center; gap: 0; padding: 4px 0; min-height: 38px; }
  body.nav-mini .brand .logo { transition: opacity 0.2s, transform 0.3s; }
  body.nav-mini .nav-toggle {
    position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; border-radius: 10px;
    opacity: 0; transform: scale(0.85); transition: opacity 0.2s, transform 0.3s, background 0.2s, color 0.2s;
  }
  /* Only keyboard focus counts: a mouse click leaves the toggle focused, which must not hide the logo. */
  body.nav-mini .brand:hover .logo, body.nav-mini .brand:has(.nav-toggle:focus-visible) .logo { opacity: 0; transform: scale(0.85); }
  body.nav-mini .brand:hover .nav-toggle, body.nav-mini .nav-toggle:focus-visible { opacity: 1; transform: none; color: var(--text); background: var(--sunk); }
  body.nav-mini .nav-toggle:focus-visible { box-shadow: 0 0 0 3px var(--ring); outline: 0; }
}

/* Campaign folder colours (campaigns.js → colorOf): lightness and chroma per theme */
:root { --fl: 0.66; --fc: 0.12; }
:root[data-mode="dark"] { --fl: 0.74; --fc: 0.11; }

/* Contacts: Select all, beside the view switcher */
.ct-selall { flex: none; margin-left: auto; gap: 8px; padding: 0 12px; }
.ct-selall .cb { pointer-events: none; margin: 0; }
.ct-selall + .ct-view { margin-left: 0; }

/* Contacts: sorting */
.ct-sortby { flex: none; margin: 0 0 0 auto; gap: 8px; color: var(--muted); font-size: 13px; }
.ct-sortby select { width: auto; height: 36px; margin: 0; }
.ct-sortby + .ct-selall { margin-left: 0; }
.ct-table th.ct-sortable button {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; transition: color 0.2s;
}
.ct-table th.ct-sortable button:hover, .ct-table th.ct-sortable.on button { color: var(--text); }
.ct-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0; transition: transform 0.3s, opacity 0.2s; }
.ct-table th.ct-sortable button:hover .ct-arrow { opacity: 0.35; }
.ct-arrow.asc, .ct-arrow.desc { opacity: 1 !important; }
.ct-arrow.asc { transform: rotate(180deg); }
.ct-letter h3 span { margin-left: 4px; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .ct-sortby { order: 4; margin-left: 0; } }

/* =================== Assistant: minimal, Gemini-like =================== */
.as-head { padding-bottom: 4px; }
.as-name { font-size: 15px; font-weight: 600; color: var(--muted); }
.as-name svg.orb-icon { color: var(--muted); }
.as-beta { font-size: 10px; color: var(--faint); }
.as-provider { background: none; padding: 2px 4px; color: var(--faint); }
.as-provider:hover { color: var(--text); }

/* One readable column, plenty of air */
.as-thread { gap: 30px; padding: 24px 8px 28px; }
.as-thread > * { max-width: 760px; }
.mu-bubble {
  max-width: min(80%, 600px); padding: 12px 20px; border-radius: 24px; box-shadow: none;
  background: color-mix(in srgb, var(--text) 6%, var(--bg)); color: var(--text); font-size: 15px; line-height: 1.55;
}
:root[data-mode="dark"] .mu-bubble { background: color-mix(in srgb, var(--text) 10%, var(--bg)); }

/* Replies: plain text in the column; the orb sits in the left gutter only while it's working */
.msg-ai { display: block; position: relative; }
.ai-avatar { position: absolute; left: -46px; top: -2px; background: none; box-shadow: none; transition: opacity 0.3s; }
.msg-ai.done .ai-avatar { opacity: 0; pointer-events: none; }
.ai-main { gap: 14px; padding-top: 0; }
.ai-step { font-size: 13px; color: var(--faint); }
.ai-steps.quiet { display: none; }
.steps-toggle { color: var(--faint); font-size: 12.5px; }
.ai-text { font-size: 15.5px; line-height: 1.75; letter-spacing: -0.005em; }
.ai-text p { margin: 0 0 14px; }
.ai-text ul, .ai-text ol { margin: 0 0 14px; padding-left: 22px; }
.ai-text li { margin: 6px 0; padding-left: 2px; }
.ai-text strong, .ai-text b { font-weight: 650; }
.ai-text h3, .ai-text h4 { margin: 20px 0 8px; font-size: 16px; }

/* Composer: one pill — attach, text, number, send — with a quiet note underneath */
.assistant.active .composer { max-width: 760px; margin: 4px auto 6px; }
.composer {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "files files files files" "att input pick send";
  align-items: end; column-gap: 6px; max-width: 760px; padding: 8px 8px 8px 8px; border-radius: 30px;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 8px 28px -12px rgba(16, 24, 32, 0.22), 0 0 0 1px var(--hair);
}
.composer::before { display: none; }
.composer:focus-within { box-shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 10px 32px -12px rgba(16, 24, 32, 0.28), 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); }
.cmp-files { grid-area: files; margin: 4px 4px 8px; }
.cmp-files.hidden { display: none; }
/* Spacing as margin, not padding: the auto-resize sets height from content, so padding would clip it. */
.composer textarea { grid-area: input; align-self: center; min-height: 24px; margin: 9px 4px; padding: 0; font-size: 16px; line-height: 24px; }
.cmp-bar { display: contents; }
.cmp-icon { grid-area: att; width: 42px; height: 42px; }
.cmp-chip { grid-area: pick; height: 42px; padding: 0 28px 0 10px; box-shadow: none; color: var(--muted); }
.cmp-chip > svg.la { display: none; }
.cmp-chip select { max-width: 170px; field-sizing: content; font-weight: 500; color: var(--muted); }
.cmp-chip:hover select { color: var(--text); }
.cmp-chev { right: 8px; }
.cmp-send { grid-area: send; width: 42px; height: 42px; }
.cmp-note { margin: 0 auto 14px; max-width: 760px; text-align: center; font-size: 12px; color: var(--faint); min-height: 18px; }
#cmpHint:not(:empty) + .cmp-disclaimer { display: none; }
#cmpHint:not(:empty) { color: var(--muted); }
.assistant:not(.active) .cmp-note { margin-top: 10px; }
@media (max-width: 700px) {
  .composer { grid-template-areas: "files files files files" "input input input input" "att pick . send"; border-radius: 24px; padding: 8px 8px 6px 14px; }
  .composer textarea { margin: 6px 0; }
  .cmp-chip select { max-width: 150px; }
  .ai-avatar { display: none; }
}

/* Assistant: chat history panel, and the composer caret */
.composer textarea { padding: 0 2px; } /* room for the caret at the left edge (horizontal only, so height isn't clipped) */
#tab-assistant:not(.hidden) { position: relative; }
.as-head { justify-content: flex-start; }
.as-head #asNew { margin-left: auto; }
.as-hist-toggle { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-right: 2px; transition: background 0.2s, color 0.2s; }
.as-hist-toggle:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.as-hist-toggle svg.la { margin: 0; }
.as-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 0 minmax(0, 1fr); background: var(--surface); transition: grid-template-columns 0.45s; }
.hist-open .as-layout { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
.as-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.as-main > .assistant { flex: 1; min-height: 0; }

/* Chat list: the same column as the Inbox's */
.as-history { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); box-shadow: 1px 0 0 var(--hair); z-index: 1; opacity: 0; transition: opacity 0.25s; }
.hist-open .as-history { opacity: 1; }
.as-history > * { min-width: 280px; }
.ash-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 14px 12px 20px; }
.ash-head h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.ash-head h1 span { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--sunk); color: var(--muted); font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; letter-spacing: 0; }
.ash-head h1 span:empty { display: none; }
.ash-head .icon-btn { display: grid; place-items: center; width: 36px; height: 36px; }
.ash-head .icon-btn:hover { background: var(--sunk); color: var(--text); }
.ash-head .icon-btn svg.la { margin: 0; }
.ash-tools { margin: 0 14px 8px; }
.ash-tools .search { width: 100%; }
.ash-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 12px; scrollbar-width: thin; }
.ash-group h4 { margin: 14px 12px 6px; font-size: 11px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.ash-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer;
  transition: background 0.2s; outline: 0;
}
.ash-item:hover, .ash-item:focus-visible { background: var(--sunk); }
.ash-item.on { background: var(--accent-soft); }
.ash-item:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.ash-av {
  width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--muted);
  background: linear-gradient(180deg, var(--raised-1), var(--raised-2)); box-shadow: var(--sh-raised);
}
.ash-av svg.la { margin: 0; }
.ash-item.on .ash-av { color: var(--text); }
.ash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ash-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ash-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14.5px; }
.ash-top time { flex: none; font-size: 11.5px; color: var(--faint); transition: opacity 0.15s; }
.ash-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.ash-more {
  position: absolute; top: 50%; right: 10px; margin-top: -14px; width: 28px; height: 28px; border: 0; border-radius: 9px; cursor: pointer; font-weight: 700;
  background: var(--surface); color: var(--muted); box-shadow: var(--sh-raised); opacity: 0; transform: scale(0.9); transition: opacity 0.15s, transform 0.2s;
}
.ash-item:hover .ash-more, .ash-more:focus-visible { opacity: 1; transform: none; }
.ash-item:hover .ash-top time { opacity: 0; }
.ash-more:hover { color: var(--text); }
.ash-empty { margin: 32px 22px; text-align: center; color: var(--faint); font-size: 13px; line-height: 1.5; }
.ash-empty svg.la { margin: 0 auto 8px; display: block; opacity: 0.7; }
.ash-empty p { margin: 0; }

/* Conversation header: a bar like the Inbox's chat header */
/* Header: no bar. It sits on the conversation's own background; messages fade out beneath it. */
.as-main { background: var(--bg); }
.as-main > .as-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 12px 20px 4px 14px; background: transparent; box-shadow: none; }
.as-main > .assistant { background: transparent; padding-left: 16px; padding-right: 16px; }
.as-title-bar { min-width: 0; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); padding: 6px 8px; border-radius: 10px; }
.as-title-bar.muted { color: var(--muted); font-weight: 500; }
.as-main .as-provider { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 99px; background: none; color: var(--faint); font-size: 12.5px; font-weight: 500; text-decoration: none; transition: background 0.2s, color 0.2s; }
.as-main .as-provider::after { content: '›'; font-size: 15px; line-height: 1; }
.as-main .as-provider:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.as-main .as-thread { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); padding-top: 12px; }

/* Full width, filling the window, like the Inbox */
body.assistant-open main { max-width: none; padding: 0; }
body.assistant-open .banner { max-width: none; width: auto; margin: 12px 16px; }
@media (min-width: 901px) { body.assistant-open { overflow: hidden; } }
.file-chip.static { cursor: default; }
@media (max-width: 900px) {
  .as-layout, .hist-open .as-layout { position: relative; grid-template-columns: 0 minmax(0, 1fr); }
  .as-history { position: absolute; z-index: 20; top: 0; left: 0; bottom: 0; width: min(320px, 90vw); transform: translateX(-104%); transition: transform 0.4s, opacity 0.25s; box-shadow: 10px 0 30px -12px rgba(0, 0, 0, 0.3); }
  .hist-open .as-history { transform: none; }
  .as-history > * { min-width: 0; }
}
.hist-open .as-head #asNew { display: none; } /* the chat list has its own new-chat button */

.as-main { grid-column: 2; }
.as-history .ash-tools { width: auto !important; } /* the phone-wide 100% width plus its margin overflowed the panel */

/* ---- Assistant motion: morphs and soft entrances ---- */
/* Only the named parts animate; the rest of the page swaps underneath. */
html.vt-as::view-transition-old(root), html.vt-as::view-transition-new(root) { animation: none; }
.vt-as #composer { view-transition-name: as-composer; }
.vt-as #asThread { view-transition-name: as-thread; }
.vt-as #asHero { view-transition-name: as-hero; }
.vt-as .cmp-note { view-transition-name: as-note; }
html.vt-as::view-transition-group(as-composer), html.vt-as::view-transition-group(as-note) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
html.vt-as::view-transition-group(as-thread) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
html.vt-as::view-transition-old(as-thread) { animation: as-out 0.26s cubic-bezier(0.55, 0, 0.75, 0.3) both; }
html.vt-as::view-transition-new(as-thread) { animation: as-in 0.5s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.vt-as::view-transition-old(as-hero) { animation: as-out 0.3s cubic-bezier(0.55, 0, 0.75, 0.3) both; }
html.vt-as::view-transition-new(as-hero) { animation: as-in 0.55s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes as-out { to { opacity: 0; transform: translateY(-10px) scale(0.99); } }
@keyframes as-in { from { opacity: 0; transform: translateY(14px) scale(0.99); } }

/* New messages rise into place instead of popping in */
@keyframes msg-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.msg-user { animation: msg-rise 0.45s var(--ease-out) both; transform-origin: right bottom; }
.ai-body > *, .ai-step { animation: msg-rise 0.5s var(--ease-out) both; }
.ai-steps .steps-toggle { animation: none; }
.replay .msg-user, .replay .ai-body > *, .replay .ai-step { animation: none; }

/* The chat list highlight slides between chats */
.ash-list { position: relative; }
.ash-hl {
  position: absolute; top: 0; left: 8px; right: 8px; height: 0; border-radius: 12px; background: var(--accent-soft); opacity: 0; pointer-events: none;
  transition: transform 0.5s, height 0.5s, opacity 0.25s; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important;
}
#ashItems { position: relative; z-index: 1; }
.ash-item.on { background: transparent; }
.ash-item.on:hover { background: color-mix(in srgb, var(--sunk) 50%, transparent); }

/* Moving things ease in and out (the global default is ease-out, for things reacting) */
.as-layout { transition: grid-template-columns 0.55s !important; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important; }
@media (max-width: 900px) { .as-history { transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important; } }
@media (prefers-reduced-motion: reduce) { .msg-user, .ai-body > *, .ai-step { animation: none; } .ash-hl, .as-layout { transition: none !important; } }
/* The prompt box moves as one piece: show only its new state while it glides (no ghost of the text you just sent). */
html.vt-as::view-transition-old(as-composer), html.vt-as::view-transition-old(as-note) { animation: none; opacity: 0; }
html.vt-as::view-transition-new(as-composer), html.vt-as::view-transition-new(as-note) { animation: none; }

/* ==== Assistant: Claude-like — quiet header, history on the right, greeting, two-row prompt box ==== */
.as-layout { grid-template-columns: minmax(0, 1fr) 0; }
.hist-open .as-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.as-main { grid-column: 1; grid-row: 1; }
.as-history { grid-column: 2; grid-row: 1; box-shadow: -1px 0 0 var(--hair); }

.as-main > .as-head { padding: 12px 14px 4px 22px; }
.as-head-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.as-head-right .as-provider { margin: 0 6px 0 0; }
.as-head-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--muted); transition: background 0.2s, color 0.2s; }
.as-head-btn:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.as-head-btn svg.la { margin: 0; }
.hist-open .as-hist-toggle { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
#asNew.hidden { display: none; }

/* Empty page: a greeting with the orb beside it */
.as-hero { padding-bottom: 30px; }
.as-title { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 36px; font-weight: 500; letter-spacing: -0.035em; margin: 0; }
.as-title .as-hero-orb { margin: 0; flex: none; }

/* Prompt box: two rows — text on top, tools below */
.composer {
  grid-template-columns: auto 1fr auto auto; grid-template-areas: "files files files files" "input input input input" "att . pick send";
  align-items: center; row-gap: 6px; padding: 14px 12px 10px 16px; border-radius: 22px;
}
.composer textarea { margin: 2px 4px 8px; font-size: 16px; }
.cmp-icon { width: 36px; height: 36px; margin-left: -4px; }
.cmp-send { width: 36px; height: 36px; }
.cmp-chip { height: 36px; }
@media (max-width: 700px) { .composer { grid-template-areas: "files files files files" "input input input input" "att . pick send"; padding: 12px 10px 8px 14px; } }

/* Phones: the list slides in from the right */
@media (max-width: 900px) {
  .as-layout, .hist-open .as-layout { grid-template-columns: minmax(0, 1fr) 0; }
  .as-history { left: auto; right: 0; transform: translateX(104%); box-shadow: -10px 0 30px -12px rgba(0, 0, 0, 0.3); }
  .hist-open .as-history { transform: none; }
}

/* ==== Skeleton loading: shimmering shapes of what's on its way (app.js → Skel) ==== */
:root { --sk-a: color-mix(in srgb, var(--text) 6%, transparent); --sk-b: color-mix(in srgb, var(--text) 12%, transparent); }
.sk {
  display: block; flex: none; border-radius: 8px;
  background: linear-gradient(100deg, var(--sk-a) 30%, var(--sk-b) 50%, var(--sk-a) 70%) 0 0 / 300% 100%;
  animation: sk-shimmer 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-line { height: 12px; border-radius: 6px; }
.sk-line.sm { height: 10px; }
.sk-line.xs { height: 8px; }
.sk-line.big { height: 26px; border-radius: 8px; margin: 8px 0 4px; }
.sk-circle { width: 44px; height: 44px; border-radius: 50%; }
.sk-circle.sm { width: 32px; height: 32px; }
.sk-circle.lg { width: 64px; height: 64px; margin-bottom: 8px; }
.sk-square { width: 38px; height: 38px; border-radius: 12px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; }
.sk-row.tight { padding: 0 0 6px; }
.sk-row.tr { gap: 18px; padding: 14px 6px; box-shadow: inset 0 -1px 0 var(--hair); }
.sk-row.tr > .sk-line { flex: 1; }
.sk-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-pad { padding: 8px 14px; }
.sk-kpi { display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.sk-kpi .sk-block { height: 54px; margin-top: auto; border-radius: 10px; }
.sk-cardbox { display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.sk-folder { position: relative; height: 200px; padding-top: 18px; }
.sk-folder .sk-tab { position: absolute; top: 0; right: 0; width: 55%; height: 30px; border-radius: 0 18px 0 0; opacity: 0.7; }
.sk-folder .sk-body { height: 100%; border-radius: 22px; }
.sk-person { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px 16px; border-radius: 16px; background: var(--sunk); }
.sk-person .sk-line { align-self: center; }
.sk-bubbles { display: flex; flex-direction: column; gap: 12px; padding: 24px max(16px, 6%); }
.sk-bubble { height: 40px; border-radius: 14px; }
.sk-bubble.out { align-self: flex-end; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* The chat list now animates with transforms (assistant.js → setHistoryOpen), not by resizing columns. */
@media (min-width: 901px) {
  .as-layout { position: relative; transition: none !important; }
  .as-history { transition: none !important; }
}

.sk-chart { display: flex; align-items: flex-end; gap: 10px; height: 240px; padding: 16px 4px 4px; }
.sk-chart .sk { flex: 1; border-radius: 6px 6px 3px 3px; }
.sk-bars { display: flex; flex-direction: column; gap: 16px; }
.sk-bars > div { display: flex; flex-direction: column; gap: 8px; }
.sk-bar { height: 22px; border-radius: 8px; }
.sk-lines { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.sk-lines .sk-row { justify-content: space-between; gap: 20px; }
.sk-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 8px; border-radius: 14px; background: var(--sunk); }
.sk-stat .sk-line.big { height: 20px; margin: 6px 0 2px; }

/* In a conversation the prompt box goes back to a single-row pill; the two-row box is for the start page. */
.assistant.active .composer { grid-template-areas: "files files files files" "att input pick send"; row-gap: 0; padding: 8px; border-radius: 30px; }
.assistant.active .composer textarea { margin: 9px 4px; }
.assistant.active .cmp-icon, .assistant.active .cmp-send, .assistant.active .cmp-chip { width: 42px; height: 42px; }
.assistant.active .cmp-chip { width: auto; }
.assistant.active .cmp-icon { margin-left: 0; }
@media (max-width: 700px) { .assistant.active .composer { grid-template-areas: "files files files files" "input input input input" "att . pick send"; border-radius: 24px; padding: 8px 8px 6px 14px; } }

/* Chat rows without icons: just title, time and preview */
.ash-item { padding: 12px 14px; }
.ash-group h4 { margin-left: 14px; }

/* ==== Inbox motion: sliding highlight, chat pane morph, messages rising in ==== */
.ib-convs { position: relative; }
.ib-hl {
  position: absolute; top: 0; left: 8px; right: 8px; height: 0; border-radius: 12px; background: var(--accent-soft); opacity: 0; pointer-events: none;
  transition: transform 0.48s, height 0.48s, opacity 0.25s; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important;
}
#ibConvItems { position: relative; z-index: 1; }
.ib-conv.active { background: transparent; }
.ib-conv.active:hover { background: color-mix(in srgb, var(--sunk) 50%, transparent); }

html.vt-ib::view-transition-old(root), html.vt-ib::view-transition-new(root) { animation: none; }
.vt-ib #ibChat { view-transition-name: ib-chat; }
html.vt-ib::view-transition-group(ib-chat) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
html.vt-ib::view-transition-old(ib-chat) { animation: ib-out 0.24s cubic-bezier(0.55, 0, 0.75, 0.3) both; }
html.vt-ib::view-transition-new(ib-chat) { animation: ib-in 0.46s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes ib-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes ib-in { from { opacity: 0; transform: translateY(12px); } }

@keyframes ib-rise-in { from { opacity: 0; transform: translate(-14px, 8px) scale(0.97); } }
@keyframes ib-rise-out { from { opacity: 0; transform: translate(14px, 8px) scale(0.97); } }
.ib-row.fresh.in { animation: ib-rise-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: left bottom; }
.ib-row.fresh.out { animation: ib-rise-out 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: right bottom; }
@media (prefers-reduced-motion: reduce) { .ib-row.fresh { animation: none; } .ib-hl { transition: none !important; } }

/* Inbox template filter, under the status filters */
.ib-tpl-filter { width: 100%; margin: 0; height: 34px; font-size: 13px; }
/* Assistant prompt box: tighter gap after +, and square text box corners so a selection isn't clipped round */
.composer textarea { border-radius: 0 !important; }
.assistant.active .composer { column-gap: 2px; }
.assistant.active .composer textarea { margin-left: 2px; }
.composer { column-gap: 2px; }

/* One section per day: the sticky date pill stays within its day */
.ib-dayblock { display: flex; flex-direction: column; gap: 2px; }

/* Inbox avatars: a soft pastel per person (app.js → avatarStyle), initials in a deeper shade of it */
.ib-av[style*="--av-h"] {
  color: oklch(0.45 0.11 var(--av-h)); background: oklch(0.92 0.05 var(--av-h));
  box-shadow: inset 0 0 0 1px oklch(0.85 0.06 var(--av-h) / 0.6);
}
:root[data-mode="dark"] .ib-av[style*="--av-h"] { color: oklch(0.85 0.09 var(--av-h)); background: oklch(0.34 0.06 var(--av-h)); box-shadow: inset 0 0 0 1px oklch(0.45 0.07 var(--av-h) / 0.5); }
.ib-av[style*="--av-h"] svg.la { color: inherit; }

/* Assistant start page: a very faint time-of-day sky (assistant.js → sky). Gone once a chat starts. */
.as-main { position: relative; }
.as-main::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1);
  background:
    radial-gradient(110% 70% at 50% 0%, oklch(0.9 var(--sky-c, 0.05) var(--sky-h, 80) / 0.34), transparent 72%),
    radial-gradient(90% 50% at 50% 100%, oklch(0.92 calc(var(--sky-c, 0.05) * 0.6) var(--sky-h, 80) / 0.22), transparent 70%);
}
:root[data-mode="dark"] .as-main::before {
  background:
    radial-gradient(110% 70% at 50% 0%, oklch(0.42 var(--sky-c, 0.05) var(--sky-h, 80) / 0.28), transparent 72%),
    radial-gradient(90% 50% at 50% 100%, oklch(0.38 calc(var(--sky-c, 0.05) * 0.6) var(--sky-h, 80) / 0.22), transparent 70%);
}
.as-main:has(#asPanel:not(.active))::before { opacity: 1; }
.as-main > .assistant { position: relative; z-index: 1; }
#ashItems, #ibConvItems { display: flow-root; }

/* Assistant file preview: Send-page style hints (shifted rows, phone column) */
.fp-hints { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.fp-hint { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 0; border-radius: 99px; background: var(--info-soft); color: var(--info); font: 500 13px Inter, sans-serif; text-align: left; }
button.fp-hint { cursor: pointer; transition: filter 0.2s; }
button.fp-hint:hover { filter: brightness(0.96); }
.fp-hint b { font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.fp-hint svg.la { margin: 0; flex: none; }

/* Send page: Message button always available; panel split into Compose / Preview */
#spTools.no-data > :not(#spPanelBtn) { display: none; }
.sp-panel { display: flex; flex-direction: column; padding-top: 0; }
.sp-panel-head { position: sticky; top: 0; z-index: 2; padding: 14px 0 10px; background: var(--surface); box-shadow: 0 1px 0 var(--hair); }
.sp-pane-seg { display: flex; width: 100%; }
.sp-pane-seg > button { flex: 1; justify-content: center; }
.sp-pane { animation: sp-pane-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sp-pane-in { from { opacity: 0; transform: translateY(6px); } }
.sp-peek { display: block; margin: 8px 0 4px; padding: 0; border: 0; background: none; color: var(--info); font: 500 12.5px Inter, sans-serif; cursor: pointer; }
.sp-peek:hover { text-decoration: underline; }
.sp-prev-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sp-prev-head .field-label { margin: 0; }
.sp-stepper { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-stepper .icon-btn { width: 26px; height: 26px; display: grid; place-items: center; font-size: 16px; border-radius: 8px; }
.sp-stepper .icon-btn:hover { background: var(--sunk); color: var(--text); }
.sp-phone-big { padding: 18px 14px !important; min-height: 220px !important; }

/* Personalise tab: preview on top, variable fields below; the one being edited is highlighted in both */
@media (min-height: 1000px) { .sp-pane[data-pane="preview"] .sp-sec:first-child { position: sticky; top: 58px; z-index: 1; background: var(--surface); } }
.sp-phone-big .media { height: 76px; min-height: 0; }
.sp-phone-big { padding: 12px !important; }
.sp-pane[data-pane="preview"] .sp-sec:first-child { padding-bottom: 8px; }
.sp-phone-big { min-height: 0 !important; }
#preview .var { cursor: pointer; border-radius: 4px; transition: background 0.2s, box-shadow 0.2s; }
#preview .var.focus { background: color-mix(in srgb, var(--info) 22%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--info) 35%, transparent); }
.sp-map { border-radius: 10px; transition: background 0.2s; }
.sp-map.focus { background: color-mix(in srgb, var(--info) 8%, transparent); }

/* Personalise: a wider panel with the preview and the fields side by side */
.sp-body { transition: grid-template-columns 0.45s cubic-bezier(0.65, 0, 0.35, 1); }
#tab-send.pane-wide:not(.panel-off) .sp-body { grid-template-columns: minmax(0, 1fr) min(660px, 48%); }
#tab-send.pane-wide .sp-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
#tab-send.pane-wide .sp-duo-prev { position: sticky; top: 58px; box-shadow: none; }
#tab-send.pane-wide .sp-duo-fields { box-shadow: none; }
#tab-send.pane-wide .sp-phone-big .media { height: 110px; }
#tab-send.pane-wide .sp-map { grid-template-columns: 64px minmax(0, 1fr); padding: 6px; margin: 0 -6px; }
@media (max-width: 1250px) { #tab-send.pane-wide .sp-duo { grid-template-columns: 1fr; } #tab-send.pane-wide .sp-duo-prev { position: static; } }

/* Setup: template preview fills the panel; Next goes to Personalise */
.sp-tpl-sec { box-shadow: none; }
.sp-tpl-phone { padding: 12px !important; min-height: 0 !important; }
.sp-tpl-phone .media { height: 90px; min-height: 0; }
.sp-next { width: 100%; margin-top: 14px; justify-content: center; }
/* Send test: pop-up from the bottom bar */
.sp-testwrap { position: relative; }
.sp-testpop {
  position: absolute; bottom: calc(100% + 12px); right: 0; z-index: 30; width: 340px; padding: 16px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 10px; background: var(--surface); box-shadow: var(--sh-card), 0 0 0 1px var(--hair), 0 18px 40px -16px rgba(0,0,0,0.3);
  animation: sp-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: bottom right;
}
@keyframes sp-pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.sp-testpop .row { flex-wrap: nowrap; }
.sp-testpop input { flex: 1; min-width: 0; margin: 0; }
.sp-testpop .sub { font-size: 12px; }
.sp-next { position: sticky; bottom: 10px; z-index: 2; box-shadow: var(--sh-accent), 0 10px 24px -10px rgba(0,0,0,0.35); }

/* Send page uses the full window width (like the Inbox), with comfortable side margins */
body.send-open main { max-width: none; padding-left: 24px; padding-right: 24px; }
body.send-open .banner { max-width: none; width: auto; margin-left: 24px; margin-right: 24px; }
@media (min-width: 1800px) { #tab-send.pane-wide:not(.panel-off) .sp-body { grid-template-columns: minmax(0, 1fr) 720px; } #tab-send:not(.pane-wide):not(.panel-off) .sp-body { grid-template-columns: minmax(0, 1fr) 400px; } }

/* Lead assistant auto-reply */
.setting-row.dim { opacity: 0.5; }
.ib-label.ib-auto { color: var(--violet); }
.ib-label.ib-auto svg { margin-right: 2px; }
.ib-held { margin-left: auto; font-size: 11.5px; color: var(--warn); font-weight: 500; }

/* Inbox demo: write as the customer */
.ib-sim { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); box-shadow: inset 0 1px 0 var(--hair); }
.ib-sim-tag { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--warn); text-transform: uppercase; letter-spacing: 0.05em; }
.ib-sim-tag svg.la { margin: 0; }
.ib-sim input { flex: 1; min-width: 0; height: 34px; margin: 0; font-size: 13.5px; }
.ib-ai { padding-bottom: 12px; } /* breathing room above the reply box */

/* "AI is typing…" in the chat and the chat list */
.ib-typing { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-right: max(0px, calc(6% - 16px)); animation: ib-rise-out 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ib-typing-bubble { display: inline-flex; gap: 5px; padding: 12px 16px; border-radius: 14px 14px 4px 14px; background: var(--bubble-out); box-shadow: 0 1px 1px rgba(0,0,0,0.08); }
.ib-typing-bubble i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--text) 45%, transparent); animation: ib-dot 1.2s ease-in-out infinite; }
.ib-typing-bubble i:nth-child(2) { animation-delay: 0.15s; }
.ib-typing-bubble i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ib-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.ib-typing-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.ib-typing-label svg { width: 14px; height: 14px; }
.ib-prev-typing { color: var(--good-text); font-weight: 600; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .ib-typing-bubble i { animation: none; } }
.ib-unsupported svg.la { display: inline-block; vertical-align: -2px; margin-right: 5px; }
.sp-prev-test { width: 100%; justify-content: center; margin-top: 12px; }

/* ---- Accounts: sidebar account button, Workspace & team card, sign-in pages ---- */
.acct-btn { display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 0; padding: 8px 10px; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left; color: var(--text); font: inherit; transition: background 0.2s; }
.acct-btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.acct-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--sunk); }
.acct-av[style*="--av-h"] { color: oklch(0.45 0.11 var(--av-h)); background: oklch(0.92 0.05 var(--av-h)); }
:root[data-mode="dark"] .acct-av[style*="--av-h"] { color: oklch(0.85 0.09 var(--av-h)); background: oklch(0.34 0.06 var(--av-h)); }
.acct-av.sm { width: 28px; height: 28px; font-size: 11.5px; }
.acct-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.acct-text b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-text span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.nav-mini .acct-btn { justify-content: center; padding: 6px 0; }
body.nav-mini .acct-text { display: none; }
.acct-card { margin-bottom: 20px; }
.team-list { display: flex; flex-direction: column; gap: 2px; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.team-row:hover { background: var(--sunk); }
.team-row.invited { opacity: 0.8; }
.team-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.team-who b { font-size: 13.5px; font-weight: 600; }
.team-who span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#inviteBox .row input { flex: 1; min-width: 0; margin: 0; }
.invite-out { display: flex; gap: 8px; margin-top: 8px; }
.invite-out input { flex: 1; min-width: 0; margin: 0; font-size: 12.5px; }
.login-title { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.02em; }
.login-sub { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.login-alt { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.login-alt a { color: var(--text); font-weight: 600; }
.login-card { width: min(400px, 100%); }

/* Show/hide password (sign-in pages) */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px; }
.pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.pw-eye:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.pw-eye:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ring); }

/* Provider logos (Gemini, Claude) */
.prov-logo { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; margin-right: 7px; object-fit: contain; }
.ai-provider .prov-logo { margin-right: 6px; }
.prov-label { display: inline-flex; align-items: center; }
.as-main .as-provider .prov-logo { width: 14px; height: 14px; margin-right: 2px; }
.as-main .as-provider span { line-height: 1; }

/* ==== Sign-in / sign-up: two-panel card (tenancy.js → shell) ==== */
.auth-body {
  min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 32px 16px;
  background: radial-gradient(70% 60% at 50% 40%, #ecebff 0%, #f5f4ff 55%, #f7f7fb 100%);
}
:root[data-mode="dark"] .auth-body { background: radial-gradient(70% 60% at 50% 40%, #1d1b33 0%, #141322 60%, #0f0f16 100%); }
.auth-card {
  width: min(1040px, 100%); min-height: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 14px;
  border-radius: 28px; background: var(--surface);
  box-shadow: 0 40px 90px -40px rgba(76, 64, 220, 0.45), 0 2px 6px rgba(16, 24, 32, 0.05);
}
.auth-art {
  position: relative; overflow: hidden; border-radius: 20px; padding: 28px 34px 40px; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  background:
    radial-gradient(60% 55% at 22% 58%, #0b1386 0%, rgba(11, 19, 134, 0) 70%),
    radial-gradient(55% 50% at 38% 34%, #6a3df0 0%, rgba(106, 61, 240, 0) 70%),
    radial-gradient(50% 45% at 90% 8%, #b36bff 0%, rgba(179, 107, 255, 0) 70%),
    radial-gradient(60% 55% at 72% 46%, #bfe6ff 0%, rgba(191, 230, 255, 0) 70%),
    radial-gradient(70% 60% at 10% 4%, #a6e4ff 0%, rgba(166, 228, 255, 0) 70%),
    linear-gradient(180deg, #c9d4ff 0%, #9d8cf2 100%);
}
.auth-art::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(0.5px); background: linear-gradient(180deg, transparent 55%, rgba(30, 20, 120, 0.28)); pointer-events: none; }
.auth-art > * { position: relative; z-index: 1; }
.auth-art-logo { display: flex; align-items: center; gap: 10px; font: 600 16px Outfit, Inter, sans-serif; }
.auth-art-logo .logo { width: 34px; height: 34px; color: #fff; }
.auth-art-text p { margin: 0 0 10px; font-size: 15px; opacity: 0.92; }
.auth-art-text h2 { margin: 0; max-width: 15ch; font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 56px; }
.auth-fields { width: min(380px, 100%); display: flex; flex-direction: column; gap: 2px; }
.auth-mark .logo { width: 30px; height: 30px; color: #4b3cf5; margin-bottom: 10px; }
:root[data-mode="dark"] .auth-mark .logo { color: #9d90ff; }
.auth-fields h1 { margin: 0 0 8px; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
.auth-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.auth-fields label { font-size: 14px; font-weight: 500; color: var(--text); margin-top: 4px; }
.auth-fields input:not([type=hidden]) {
  height: 46px; border-radius: 12px; background: var(--surface); font-size: 14.5px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 16%, transparent); transition: box-shadow 0.2s;
}
.auth-fields input:focus { outline: 0; box-shadow: inset 0 0 0 1.5px #4b3cf5, 0 0 0 4px rgba(75, 60, 245, 0.14); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.auth-btn {
  display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 18px; border: 0; border-radius: 12px; cursor: pointer; text-decoration: none;
  font: 600 15px Inter, sans-serif; color: #fff; background: linear-gradient(180deg, #5747ff, #4433f0);
  box-shadow: 0 12px 26px -10px rgba(68, 51, 240, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: transform 0.15s, box-shadow 0.2s;
}
.auth-btn:hover { box-shadow: 0 16px 32px -10px rgba(68, 51, 240, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.auth-btn:active { transform: scale(0.99); }
.auth-fields .login-error { margin: 10px 0 -6px; }
.auth-fields .login-alt { margin-top: 18px; }
.auth-fields .login-alt a { color: #4b3cf5; }
:root[data-mode="dark"] .auth-fields .login-alt a { color: #9d90ff; }
@media (max-width: 860px) {
  .auth-card { grid-template-columns: 1fr; min-height: 0; }
  .auth-art { min-height: 150px; padding: 20px 22px 22px; }
  .auth-art-text h2 { font-size: 22px; max-width: 22ch; }
  .auth-form { padding: 28px 12px 18px; }
  .auth-row { grid-template-columns: 1fr; }
}

/* Sign-in pages in the app's own palette: graphite, cool grey, WhatsApp green */
.auth-body { background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--good) 7%, var(--bg)) 0%, var(--bg) 70%); }
:root[data-mode="dark"] .auth-body { background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--good) 8%, var(--bg)) 0%, var(--bg) 70%); }
.auth-card { box-shadow: var(--sh-card), 0 40px 90px -45px rgba(16, 24, 32, 0.45); }
.auth-art {
  background:
    radial-gradient(55% 50% at 78% 18%, rgba(37, 211, 102, 0.55) 0%, rgba(37, 211, 102, 0) 70%),
    radial-gradient(50% 45% at 18% 42%, rgba(18, 140, 126, 0.55) 0%, rgba(18, 140, 126, 0) 70%),
    radial-gradient(60% 50% at 70% 70%, rgba(220, 248, 198, 0.28) 0%, rgba(220, 248, 198, 0) 70%),
    radial-gradient(70% 60% at 30% 95%, rgba(7, 94, 84, 0.7) 0%, rgba(7, 94, 84, 0) 70%),
    linear-gradient(160deg, #1f2a30 0%, #0d1417 100%);
}
.auth-art::after { background: linear-gradient(180deg, transparent 50%, rgba(5, 10, 12, 0.45)); }
.auth-mark .logo, :root[data-mode="dark"] .auth-mark .logo { color: var(--text); }
.auth-fields input:focus { box-shadow: inset 0 0 0 1.5px var(--text), 0 0 0 4px var(--ring); }
.auth-btn {
  color: var(--on-accent); background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  box-shadow: var(--sh-accent), 0 12px 24px -12px rgba(16, 24, 32, 0.55);
}
.auth-btn:hover { box-shadow: var(--sh-accent-hi, var(--sh-accent)), 0 16px 30px -12px rgba(16, 24, 32, 0.6); }
.auth-fields .login-alt a, :root[data-mode="dark"] .auth-fields .login-alt a { color: var(--good-text); }
:root[data-mode="dark"] .auth-fields .login-alt a { color: var(--good); }

/* Sign-in panel: monochrome graphite with soft silver light (no green) */
.auth-body, :root[data-mode="dark"] .auth-body { background: var(--bg); }
.auth-art {
  background:
    radial-gradient(45% 40% at 80% 14%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(55% 45% at 16% 40%, rgba(176, 190, 204, 0.22) 0%, rgba(176, 190, 204, 0) 72%),
    radial-gradient(60% 50% at 70% 72%, rgba(120, 136, 152, 0.20) 0%, rgba(120, 136, 152, 0) 70%),
    linear-gradient(155deg, #3a4148 0%, #1e2328 45%, #0c0f12 100%);
}
.auth-art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.auth-art::after { background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35)); }
.auth-art-text p { color: rgba(255, 255, 255, 0.7); }
.auth-fields .login-alt a, :root[data-mode="dark"] .auth-fields .login-alt a { color: var(--text); }

/* GradientASCII in the sign-in panel (public/gradient-ascii.js): the upper part, fading out above the headline */
.gradient-ascii-container { position: relative; overflow: hidden; }
.gradient-ascii-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.auth-ascii { position: absolute !important; left: 0; right: 0; top: 8%; height: 58%; z-index: 0 !important; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); pointer-events: none; }
.auth-art.has-ascii { background: linear-gradient(170deg, #1a1e22 0%, #0b0d10 100%); }
.auth-art.has-ascii::before { display: none; }
.auth-art > :not(.auth-ascii) { z-index: 2; }
.auth-art::after { z-index: 1; }

/* Sign-in and sign-up share one card size on desktop. When the window is short (or zoomed in) the card
   simply grows and the page scrolls, so nothing ever spills out of it. */
@media (min-width: 861px) {
  .auth-card { height: auto; min-height: min(700px, calc(100vh - 64px)); }
  .auth-form { overflow-y: auto; scrollbar-width: thin; }
}
/* Phones: no card, just the page — a short dark banner on top, then the form */
@media (max-width: 860px) {
  .auth-body { display: block; padding: 0; background: var(--surface); }
  :root[data-mode="dark"] .auth-body { background: var(--surface); }
  .auth-card { width: 100%; height: auto; min-height: 100vh; padding: 0; border-radius: 0; box-shadow: none; background: var(--surface); display: flex; flex-direction: column; }
  .auth-art { min-height: 230px; padding: 18px 20px 22px; border-radius: 0 0 24px 24px; }
  .auth-ascii { top: 14%; height: 52%; }
  .auth-art-text h2 { font-size: 24px; max-width: 18ch; }
  .auth-art-text p { margin-bottom: 6px; }
  .auth-form { padding: 26px 20px 32px; align-items: flex-start; }
  .auth-mark { display: none; }
  .auth-fields h1 { font-size: 26px; }
  .auth-sub { margin-bottom: 18px; }
}

/* Account emails: forgot-password link, notices, confirm-email banner */
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.auth-forgot { font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; }
.auth-forgot:hover { color: var(--text); text-decoration: underline; }
.auth-notice { margin: 10px 0 -6px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; background: var(--good-soft); color: var(--good-text); }
.auth-fields b { color: var(--text); }
.verify-banner { background: var(--info-soft); color: var(--text); }
.verify-banner .dot { background: var(--info); }
.verify-banner .btn { margin-left: auto; }

/* Sign-in pages: faint time-of-day sky behind the card (same palette as the Assistant start page) */
.auth-body { position: relative; }
.auth-body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(110% 70% at 50% 0%, oklch(0.9 var(--sky-c, 0.05) var(--sky-h, 80) / 0.38), transparent 72%),
    radial-gradient(90% 50% at 50% 100%, oklch(0.92 calc(var(--sky-c, 0.05) * 0.6) var(--sky-h, 80) / 0.26), transparent 70%);
}
:root[data-mode="dark"] .auth-body::before {
  background:
    radial-gradient(110% 70% at 50% 0%, oklch(0.42 var(--sky-c, 0.05) var(--sky-h, 80) / 0.3), transparent 72%),
    radial-gradient(90% 50% at 50% 100%, oklch(0.38 calc(var(--sky-c, 0.05) * 0.6) var(--sky-h, 80) / 0.22), transparent 70%);
}
.auth-card { position: relative; z-index: 1; }
@media (max-width: 860px) { .auth-body::before { display: none; } }
/* Account: name/email with an Edit button */

/* App logo: a graphite tile (public/brand/logo*.svg) */
img.logo { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(16, 24, 32, 0.2)); }
.auth-art-logo img.logo { width: 36px; height: 36px; border-radius: 9px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
.auth-mark img.logo { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 12px; }
/* The logo appears once, in the dark panel; not again above the form */
.auth-mark { display: none !important; }

/* Confirm dialog: a box to tick (consent) */
.confirm-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--sunk); font-size: 13.5px; color: var(--text); cursor: pointer; }
.confirm-check input { margin-top: 2px; }

/* Admin page (public/admin.html) */
.admin-body { margin: 0; padding: 0 !important; background: var(--bg); color: var(--text); font-family: Inter, sans-serif; }
.admin { max-width: 1320px; margin: 0 auto; padding: 24px 24px 48px; display: flex; flex-direction: column; gap: 14px; }
.admin-head { display: flex; align-items: center; gap: 16px; }
.admin-head .brand { padding: 0; }
.admin-sum { margin-left: auto; color: var(--muted); font-size: 13.5px; }
.admin .search { width: 320px; }
.admin-card { padding: 0; overflow: hidden; }
.admin-limit { width: 120px; height: 34px; margin: 0; }
.admin td.bad { color: var(--danger); font-weight: 600; }

/* Sign-up email code */
.auth-inline { display: flex; gap: 8px; }
.auth-inline input { flex: 1; min-width: 0; }
.auth-send { flex: none; height: 46px; padding: 0 14px; border: 0; border-radius: 12px; cursor: pointer; font: 600 13.5px Inter, sans-serif; color: var(--text); background: var(--sunk); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 12%, transparent); white-space: nowrap; }
.auth-send:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, var(--sunk)); }
.auth-send:disabled { opacity: 0.6; cursor: default; }
.auth-code { letter-spacing: 0.35em; font-variant-numeric: tabular-nums; font-size: 18px !important; }
.auth-link { border: 0; background: none; padding: 0; font: inherit; color: var(--text); text-decoration: underline; cursor: pointer; }
.auth-fields .hidden { display: none; }
.auth-code:placeholder-shown { letter-spacing: normal; font-size: 14.5px !important; }
.auth-inline { align-items: stretch; margin-top: 6px; } .auth-inline input:not([type=hidden]) { margin-top: 0; } .auth-inline .auth-send { height: 46px; }

/* ══ One-time code (public/otp.js, after Bencho's component, MIT) ══════════
   Bencho's tokens mapped to this app's own, on the component's root so
   nothing leaks out: the cells are the app's sunken field colour, the
   digits and caret its ink, the font its UI font. */
.otp {
  --card: var(--sunk);
  --fill-slab: color-mix(in srgb, var(--text) 7%, var(--field, var(--sunk)));
  --ink: var(--text);
  --fill-on: var(--text);
  --font-ui: Inter, system-ui, sans-serif;
}

/* ── the goo's defs hold nothing you can see ────────────────
   An <svg> with no dimensions is a replaced element: the browser
   gives it the default 300x150 and puts it in the flow. Nothing
   inside a <defs> is rendered, so taking the element out of flow
   entirely costs nothing and is what it always wanted. */
.liq-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;}

/* Everything that moves is written inline; what is here is the material. */
.otp {
  position: relative;
  font-family: var(--font-ui);
  display: grid;
  place-items: center;}

.otp-row {
  position: relative;}

.otp-goo {
  position: absolute;
  inset: 0;}

/* one colour under the filter, or the threshold smears two */
.otp-cell {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--fill-slab, var(--card));}

.otp-slot {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none;}

.otp-digit {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fill-on, var(--ink));
  animation: otp-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: color 160ms ease;}

.otp[data-phase="no"] .otp-digit { color: #e5484d; }

.otp-caret {
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 18px;
  margin-top: -9px;
  border-radius: 2px;
  background: var(--fill-on, var(--ink));
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;}

.otp-caret[data-on="true"] {
  opacity: 1;
  animation: otp-breathe 1.1s ease-in-out infinite alternate;}

.otp-ok {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--fill-on, var(--ink));
  pointer-events: none;
  letter-spacing: -0.01em;
  opacity: 0;}

/* the field: over the whole row, there and invisible. 16px so
   iOS does not zoom the page when it takes focus. */
.otp-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px;
  caret-color: transparent;
  cursor: text;
  letter-spacing: -0.01em;}

.otp[data-phase="ok"] .otp-field { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .otp-digit { animation: none; }
  .otp-caret[data-on="true"] { animation: none; }
}

@keyframes otp-in {
  from { transform: translateY(45%) scale(0.86); opacity: 0; filter: blur(3px); }
  to { transform: none; opacity: 1; filter: none; }}

@keyframes otp-breathe {
  from { opacity: 1; }
  to { opacity: 0.25; }}

/* Where the code row sits on the sign-up and confirm pages */
.auth-otp { justify-content: start; margin: 6px 0 2px; }
.auth-otp-label { display: block; font-size: 14px; font-weight: 500; margin: 8px 0 6px; }
.auth-otp-label .opt { font-weight: 400; }

/* Live password checklist under new-password fields (password-rules.js) */
.pw-rules { list-style: none; margin: -6px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--faint); }
.pw-rules li { display: inline-flex; align-items: center; gap: 5px; transition: color 0.2s ease; }
.pw-rules svg { opacity: 0.35; transform: scale(0.85); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pw-rules li.ok { color: var(--text); }
.pw-rules li.ok svg { opacity: 1; transform: none; }
.pw-note { margin: -6px 0 12px; color: var(--danger); font-size: 12.5px; }
.pw-note:empty { display: none; }

/* ---- Sidebar footer: the account button with the Live/Demo badge beside it ---- */
.acct-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; box-shadow: 0 -1px 0 var(--hair); }
.acct-row .acct-btn { flex: 1; min-width: 0; margin: 0; }
.acct-row .badge { flex: none; }
@media (min-width: 901px) {
  .sidebar .side-foot { display: none; }
  body.nav-mini .acct-row { flex-direction: column; }
}

/* ---- The account menu ---- */
.sg-pop.acct-pop { padding: 6px; }
.acct-pop hr { margin: 6px 4px; }
.acct-pop-me { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.acct-pop-label { padding: 4px 10px 2px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.acct-pop .acct-pop-item { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 13px Inter, sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.acct-pop-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-pop-item svg { flex: none; color: var(--muted); }
.acct-pop .acct-pop-item:hover, .acct-pop .acct-pop-item:focus-visible { background: var(--sunk); outline: 0; }
.acct-pop-item:hover svg { color: var(--text); }
.acct-pop-theme { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 2px 10px; font-size: 13px; }
.acct-pop .seg-icons button { width: 30px; height: 28px; }
/* Log out: the arrow nudges back, then steps out of the door */
.logout-arrow { transition: transform 0.25s ease; }
.acct-pop-item.logout:hover .logout-arrow { animation: logout-nudge 0.4s ease forwards; }
@keyframes logout-nudge { 0% { transform: translateX(0); } 45% { transform: translateX(-2px); } 100% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .acct-pop-item.logout:hover .logout-arrow { animation: none; } }
.acct-pop-item svg.la { margin: 0; }

/* Password rules: what's missing turns red when someone tries to submit */
.pw-rules.shout li.miss { color: var(--danger); }
.pw-rules.shout li.miss svg { opacity: 1; transform: none; }
input.pw-bad, input.pw-bad:focus { box-shadow: var(--sh-sunk), 0 0 0 2px color-mix(in srgb, var(--danger) 55%, transparent); }
.modal .pw-rules, .modal .pw-note { margin-top: -4px; }

/* ---- Settings: your account + workspace & team ---- */
/* Same columns as the General / Webhook row below, so the two rows line up: the wide card left, the narrow one right */
.acct-cards { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; margin-bottom: 24px; align-items: stretch; }
.acct-cards .acct-me-card { order: 2; }
.acct-cards .card { margin: 0; }
.acct-me-card { display: flex; flex-direction: column; }
.acct-me { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; }
.acct-me .acct-text { flex: 1; }
.acct-me .acct-text b { font-size: 15px; }
.acct-me .acct-text span { font-size: 13px; }
.acct-av.lg { width: 44px; height: 44px; font-size: 15px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-logout { align-self: flex-start; margin-top: auto; padding-left: 8px; }
.acct-actions { margin-bottom: 18px; }
.acct-logout .logout-ic { margin-right: 2px; }
.acct-logout:hover .logout-arrow { animation: logout-nudge 0.4s ease forwards; }
.acct-lead { margin: -8px 0 18px; }
.acct-inline input { flex: 1; min-width: 0; }
.acct-inline .btn { flex: none; }
.acct-gap { margin-top: 22px; }
.acct-invite { margin-top: 10px; }
#acctCard .team-list { margin: 2px -6px 0; }
#acctCard #inviteNote { margin-top: 8px; }
@media (max-width: 900px) { .acct-cards { grid-template-columns: 1fr; } .acct-cards .acct-me-card { order: 0; } }
.auth-fields input.pw-bad:not([type=hidden]) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 70%, transparent); }
.auth-fields input.pw-bad:focus { box-shadow: inset 0 0 0 1.5px var(--danger), 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent); }

/* ---- Narrow screens: nothing may push the page sideways ---- */
@media (max-width: 900px) {
  /* Inbox: the list takes the full width; filters wrap instead of stretching it */
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .ib-filters { flex-wrap: wrap; }
  .ib-filters select { min-width: 140px; }
  /* Assistant: the chat list slides in from the right, over the chat, and is clipped while closed */
  .as-layout, .hist-open .as-layout { grid-template-columns: minmax(0, 1fr) 0; overflow: hidden; }
  .as-history { left: auto; right: 0; transform: translateX(104%); box-shadow: -10px 0 30px -12px rgba(0, 0, 0, 0.3); }
  .hist-open .as-history { transform: none; }
  /* Filter tabs that don't fit scroll inside themselves */
  .nt-bar .seg, .filter-bar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
}

/* Sign-up email, once confirmed: a green tick inside the box, the Send/Resend button folded away */
.auth-email { position: relative; flex: 1; min-width: 0; display: block; }
.auth-email input:not([type=hidden]) { width: 100%; transition: padding 0.3s, box-shadow 0.2s; }
.auth-tick { position: absolute; right: 13px; top: 50%; width: 22px; height: 22px; translate: 0 -50%; opacity: 0; scale: 0.4; pointer-events: none; transition: opacity 0.25s ease, scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.auth-tick circle { fill: var(--good); }
.auth-tick path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 0.35s ease 0.2s; }
.is-verified .auth-tick { opacity: 1; scale: 1; }
.is-verified .auth-tick path { stroke-dashoffset: 0; }
.is-verified .auth-email input:not([type=hidden]) { padding-right: 46px; cursor: default; }
.is-verified .auth-email input:focus { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 16%, transparent); }
.auth-send { transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1), padding 0.4s cubic-bezier(0.65, 0, 0.35, 1), margin 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s, background 0.2s; overflow: hidden; }
.is-verified .auth-send { width: 0 !important; padding: 0; margin-left: -8px; opacity: 0; pointer-events: none; }
/* the code row folds shut */
#suCodeWrap.folding { overflow: hidden; opacity: 0; transition: height 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease; }
@media (prefers-reduced-motion: reduce) { .auth-tick, .auth-tick path, .auth-send, #suCodeWrap.folding { transition: none; } }
.acct-facts { margin: 0 0 18px; display: flex; flex-direction: column; border-radius: 12px; background: var(--sunk); box-shadow: var(--sh-sunk); padding: 4px 14px; }
.acct-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13px; }
.acct-facts > div + div { box-shadow: 0 -1px 0 var(--hair); }
.acct-facts dt { color: var(--muted); }
.acct-facts dd { margin: 0; font-weight: 500; }
.acct-ok { color: var(--good-text); }
.acct-ok::before { content: "✓ "; }

/* Account deletion request */
.acct-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acct-foot .acct-logout { margin-top: 0; }
.acct-del-link { border: 0; background: none; padding: 4px 0; font: 500 12.5px Inter, sans-serif; color: var(--faint); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
.acct-del-link:hover { color: var(--danger); text-decoration-color: currentColor; }
.acct-del-note { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--danger-soft); }
.acct-del-note b { color: var(--danger); }
.acct-del-note .btn { display: flex; margin-top: 10px; }
.del-what { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--sunk); box-shadow: var(--sh-sunk); font-size: 13px; line-height: 1.5; }
.del-what span { color: var(--muted); }
.del-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.del-reason { position: relative; margin: 0; cursor: pointer; }
.del-reason input { position: absolute; opacity: 0; pointer-events: none; }
.del-reason span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--muted); background: var(--sunk); box-shadow: var(--sh-sunk); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.del-reason:hover span { color: var(--text); }
.del-reason input:checked + span { color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--text); }
.del-reason input:focus-visible + span { box-shadow: 0 0 0 3px var(--ring); }

/* Admin: deletion requests */
.admin-card.admin-del { padding: 20px 22px; }
.admin-del h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.admin-del > .sub { margin: 0 0 12px; }
.del-req { padding: 14px 0; box-shadow: 0 -1px 0 var(--hair); }
.del-req-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.5; }
.del-req blockquote { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--sunk); font-size: 13px; color: var(--text); }
.del-plan { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.del-plan li.delete b { color: var(--danger); }
.del-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#delNote { height: auto; padding: 10px 14px; font: 400 14px/1.5 Inter, sans-serif; resize: vertical; }
.del-req-head .pill { text-transform: none; flex: none; }
/* Centre the form while it fits; once it's taller than the card it starts at the top and scrolls
   (plain align-items: center pushed the heading out of reach above the card) */
.auth-form { align-items: flex-start; }
.auth-form > .auth-fields { margin-block: auto; }

/* Admin table: a long name gets cut with "…" (full name on hover) instead of pushing the columns off-screen */
.admin .table-wrap { overflow-x: auto; }
.admin .ad-ws b { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.team-who b, .acct-pop-me .acct-text b, .acct-me .acct-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Overview: rows that line up. Each row uses the same two columns and its cards share a height. ---- */
#tab-overview .grid-ov { align-items: stretch; }
#tab-overview .grid-ov > .card { display: flex; flex-direction: column; }
/* the funnel's Failed / Waiting box sits at the bottom, level with the chart beside it */
.funnel-card #funnel { flex: 1; display: flex; flex-direction: column; }
.funnel-card .funnel-note { margin-top: auto; }
.funnel-card .funnel-row:last-of-type { margin-bottom: 18px; }
/* Recent campaigns: full width, as a grid of small tiles */
.ov-recent { margin-top: 24px; }
.ov-recent .mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ov-recent .mini-item { margin: 0; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--sunk) 55%, transparent); box-shadow: none !important; }
.ov-recent .mini-item:hover { background: var(--sunk); transform: translateY(-2px); }
#tab-overview .grid-ov > .card > .seg { align-self: flex-start; }
#tab-overview .chart-card #dayChart { flex: 1; }
/* Recent campaigns: the same little folder (and colour) as on the Campaigns page */
.rc-item { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; }
.rc-item .cp-ficon { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.rc-item .mini-title, .rc-item .mini-meta { grid-column: 2; }
.rc-item .mini-right { grid-column: 3; }
.rc-item .mini-progress span { background: var(--c); }

/* Many numbers / long labels */
.sender-card .li-head { flex-wrap: nowrap; }
.sender-card .li-head h3 { min-width: 0; flex: 1; }
.li-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-bar label.inline select { max-width: 220px; }
@media (max-width: 900px) { .filter-bar label.inline { max-width: 100%; } .filter-bar label.inline select { max-width: calc(100vw - 120px); min-width: 0; } }
#senderChecks { max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
.ti-name { overflow-wrap: anywhere; }
/* Single-column grids never grow past the screen because of one long name */
.cards > *, .grid-ov > * { min-width: 0; }

/* ---- Long names already saved (labels, tags, contacts, campaigns, templates): they never push the layout out ---- */
/* Headings and running text break inside a very long word instead of overflowing */
h1, h2, h3, h4, p, li, dd, blockquote, code, .sub { overflow-wrap: anywhere; }
.li-head > h3 { min-width: 0; }
/* Chips stay on one line and end in "…" (full name on hover) */
.tag-chip { display: inline-block; max-width: 180px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.ct-tag .ct-tag-name { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit; color: inherit; font-variant-numeric: normal; vertical-align: bottom; }
/* Inbox: the "via <number>" line and the chat header keep the name visible */
.ib-via { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-headx { flex-wrap: nowrap; min-width: 0; flex-shrink: 1; }
.ib-headx .tag-chip { max-width: 140px; flex-shrink: 1; }
.ib-who { min-width: 90px; }
@media (max-width: 700px) { .ib-headx .tag-chip { display: none; } }
/* Campaigns: the scheduled / sending banner */
.cp-pin-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Settings on phones: the account cards stay inside the screen */
@media (max-width: 900px) { .acct-cards { grid-template-columns: minmax(0, 1fr); } }
.acct-cards > * { min-width: 0; }

/* ---- Team list: names get the room; role and actions in fixed columns that line up ---- */
.team-list { container: team / inline-size; }
.team-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.team-who b { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.team-who b .team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-who b .muted { flex: none; font-weight: 500; }
.team-side { display: grid; grid-template-columns: 74px 186px; align-items: center; }
.team-side .pill { justify-self: start; }
.team-acts { display: flex; justify-content: flex-end; gap: 2px; }
/* Narrow: role and actions drop under the name */
@container team (max-width: 520px) {
  .team-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
  .team-side { grid-column: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .team-acts { margin-left: auto; }
}
/* Admin: long emails are cut with "…" so every column stays in view */
.admin td .ad-person { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.admin .ad-ws b { max-width: 220px; }
.admin td .ad-person { max-width: 220px; }
.admin .data-table th, .admin .data-table td { padding-left: 10px; padding-right: 10px; }
/* The show/hide eye always has its own room: typed text never runs under it (the sign-in pages' input padding used to win) */
.pw-wrap > input:not([type=hidden]), .auth-fields .pw-wrap > input:not([type=hidden]) { padding-right: 46px; }
.pw-wrap > input { margin-top: 0; }
.pw-wrap { margin-top: 6px; }
.auth-fields .pw-wrap { margin-top: 6px; }

/* ---- Sidebar collapse / expand as one smooth morph ----
   The width eases in and out over ~0.45s, the content beside it follows, labels fade and slide away
   (instead of vanishing in one frame) and every icon glides to the centre of the narrow bar. */
@media (min-width: 901px) {
  :root { --nav-ease: cubic-bezier(0.65, 0, 0.35, 1); --nav-dur: 0.45s; }
  body { transition: padding-left var(--nav-dur) var(--nav-ease); }
  .sidebar { transition: width var(--nav-dur) var(--nav-ease), padding var(--nav-dur) var(--nav-ease); }
  .banner { transition: width var(--nav-dur) var(--nav-ease); }

  /* nav buttons: the icon keeps its place on the left and slides to the centre (48px button, 16px icon) */
  .side-nav.seg > button { overflow: hidden; transition: padding var(--nav-dur) var(--nav-ease), background 0.2s, color 0.2s; }
  .side-nav.seg > button svg.la, .side-nav.seg > button svg.orb-icon { flex: none; transition: margin var(--nav-dur) var(--nav-ease); }
  body.nav-mini .side-nav.seg > button { justify-content: flex-start; padding: 0 0 0 16px; }
  .nav-label, .brand-name, .acct-text { white-space: nowrap; transition: opacity 0.22s ease 0.12s, transform var(--nav-dur) var(--nav-ease); }
  body.nav-mini .nav-label, body.nav-mini .brand-name, body.nav-mini .acct-text {
    display: revert; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity 0.14s ease, transform var(--nav-dur) var(--nav-ease);
  }
  body.nav-mini .acct-text { display: flex; }

  /* brand: the logo slides from the left edge to the centre; the name fades */
  .brand { transition: padding var(--nav-dur) var(--nav-ease); overflow: hidden; }
  body.nav-mini .brand { justify-content: flex-start; padding: 4px 0 4px 10px; }
  body.nav-mini .brand-name { position: absolute; left: 48px; }

  /* account button: the avatar glides to the centre, the name fades */
  .acct-btn { overflow: hidden; transition: padding var(--nav-dur) var(--nav-ease), background 0.2s; }
  body.nav-mini .acct-btn { justify-content: flex-start; padding: 6px 0 6px 9px; }
  body.nav-mini .acct-btn .acct-text { position: absolute; left: 50px; }
  .acct-btn { position: relative; }

  /* unread badges: shrink into the corner instead of jumping */
  .nav-badge { transition: transform var(--nav-dur) var(--nav-ease); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  body, .sidebar, .banner, .side-nav.seg > button, .side-nav.seg > button svg, .nav-label, .brand-name, .acct-text, .brand, .acct-btn, .nav-badge { transition: none !important; }
}
@media (min-width: 901px) {
  /* the global ease-out (*, !important) made this snap; moving things ease in and out */
  body, .sidebar, .banner, .side-nav.seg > button, .side-nav.seg > button svg, .brand, .acct-btn, .nav-badge { transition-timing-function: var(--nav-ease) !important; }
  .nav-label, .brand-name, .acct-text { transition-timing-function: ease, var(--nav-ease) !important; }
}

/* Add / edit number: the check with Meta */
.sf-token { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 14px; padding: 8px 8px 8px 14px; border-radius: var(--r-md); background: var(--sunk); box-shadow: var(--sh-sunk); font-size: 13.5px; color: var(--muted); }
.sf-token span { display: inline-flex; align-items: center; gap: 7px; }
.sf-token b { color: var(--text); font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.04em; }
.sf-find { position: relative; display: block; }
.sf-find input { padding-right: 88px; }
.sf-find .btn { position: absolute; right: 5px; bottom: 5px; }
.sf-status { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 12px; padding: 10px 12px; border-radius: var(--r-md); font-size: 13px; line-height: 1.45; }
.sf-status svg { flex: none; margin-top: 1px; }
.sf-status.busy { background: var(--sunk); color: var(--muted); align-items: center; }
.sf-status.ok { background: var(--good-soft); color: var(--good-text); }
.sf-status.bad { background: var(--danger-soft); color: var(--danger); }
.sf-spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sf-spin 0.7s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
.kv-ok { color: var(--good-text); }
/* Templates: how to add one in Meta — four steps on a thin line */
.tg-lead { margin: -4px 0 20px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.tg-steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: tg; }
.tg-steps li { counter-increment: tg; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 18px 40px; min-height: 26px; }
.tg-steps li:last-child { padding-bottom: 0; }
.tg-steps li::before { content: counter(tg); position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--hair), var(--sh-raised); }
.tg-steps li:not(:last-child)::after { content: ""; position: absolute; left: 12.5px; top: 28px; bottom: 2px; width: 1px; background: var(--hair); }
.tg-steps b { font-size: 14px; font-weight: 600; }
.tg-steps span { font-size: 13px; line-height: 1.5; color: var(--muted); }
.tg-steps code, .tg-waba code { font-size: 12px; padding: 1px 6px; border-radius: 5px; background: var(--sunk); color: var(--text); }
.tg-waba { margin: 0 0 4px; padding-top: 14px; box-shadow: 0 -1px 0 var(--hair); font-size: 12.5px; color: var(--faint); }

/* A popup is open: the page behind it doesn't scroll (app.js toggles .modal-open) */
html.modal-open, html.modal-open body { overflow: hidden; }
html.modal-open body { padding-right: var(--sbw, 0px); }
.modal { overscroll-behavior: contain; }

/* ---- Workspaces: list in Settings, the "created / switched" note, the hint on the account button ---- */
.ws-list { display: flex; flex-direction: column; gap: 2px; margin: 2px -6px 0; }
.ws-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 8px 6px; border-radius: 10px; }
.ws-row:hover { background: var(--sunk); }
.ws-row.current { background: color-mix(in srgb, var(--sunk) 70%, transparent); }
.ws-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ws-who b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-who span { font-size: 12px; color: var(--muted); }
#wsNew:disabled { opacity: 0.5; cursor: not-allowed; }
.nw-note { display: flex; gap: 9px; margin: 2px 0 14px; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunk); font-size: 13px; line-height: 1.5; color: var(--muted); }
.nw-note svg { flex: none; margin-top: 2px; }
.nw-note b { color: var(--text); font-weight: 600; }
.ws-notice {
  position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(520px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 14px 16px; border-radius: 14px;
  background: var(--surface); box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--hair);
  animation: ws-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.ws-notice.out { opacity: 0; transform: translate(-50%, 10px); transition: opacity 0.25s, transform 0.25s; }
.ws-notice-ic { color: var(--good-text); margin-top: 1px; }
.ws-notice div { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.45; }
.ws-notice b { font-size: 14px; }
.ws-notice div span { color: var(--muted); }
@keyframes ws-in { from { opacity: 0; transform: translate(-50%, 16px) scale(0.98); } }
body.ws-hint .acct-btn { animation: ws-glow 1.4s ease-in-out 3; }
@keyframes ws-glow { 50% { box-shadow: 0 0 0 3px var(--ring), 0 0 0 7px color-mix(in srgb, var(--ring) 40%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ws-notice, body.ws-hint .acct-btn { animation: none; } }
.pill.ws-here { text-transform: none; }

/* ---- Team: an overlapping stack of faces (each lifts on hover with its name), an Invite circle beside it ---- */
.tm-row { display: flex; align-items: center; gap: 14px; padding: 18px 0 4px; flex-wrap: wrap; }
.tm-stack { display: flex; align-items: center; padding-left: 10px; }
.tm-av { position: relative; border: 0; padding: 0; background: none; cursor: pointer; margin-left: -10px; border-radius: 50%; outline: 0; }
.tm-pic { position: relative; display: block; transition: transform 0.38s cubic-bezier(0.34, 1.7, 0.5, 1); }
.tm-av:hover .tm-pic, .tm-av:focus-visible .tm-pic { transform: translateY(-30%); }
.tm-face { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--sunk); box-shadow: 0 0 0 3px var(--surface); }
.tm-face[style*="--av-h"] { color: oklch(0.45 0.11 var(--av-h)); background: oklch(0.92 0.05 var(--av-h)); }
:root[data-mode="dark"] .tm-face[style*="--av-h"] { color: oklch(0.85 0.09 var(--av-h)); background: oklch(0.34 0.06 var(--av-h)); }
.tm-av:focus-visible .tm-face { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ring); }
.tm-av.invited .tm-face { opacity: 0.55; filter: grayscale(1); }
.tm-badge { position: absolute; right: -2px; bottom: -2px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9px; line-height: 1; color: var(--surface); background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.tm-crown { background: oklch(0.78 0.14 80); color: #3a2a00; }
.tm-more { font-size: 12px; color: var(--text); background: var(--surface); box-shadow: 0 0 0 3px var(--surface), inset 0 0 0 1.5px var(--hair); }
/* name tooltip above the lifted face */
.tm-name { position: absolute; left: 50%; bottom: calc(100% + 18px); transform: translate(-50%, 4px); padding: 4px 8px; border-radius: 7px; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--surface); background: var(--text); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.2s; }
.tm-av:hover .tm-name, .tm-av:focus-visible .tm-name { opacity: 1; transform: translate(-50%, 0); }
/* Invite: a dashed circle that isn't part of the stack */
.tm-add { margin-left: 0; display: inline-flex; align-items: center; gap: 9px; border-radius: 99px; padding-right: 12px; color: var(--muted); }
.tm-add .tm-face { background: none; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--text) 30%, transparent); color: var(--muted); transition: border-color 0.2s, background 0.2s, transform 0.25s; }
.tm-add:hover .tm-face { border-color: var(--text); color: var(--text); background: var(--sunk); transform: rotate(90deg); }
.tm-add:hover .tm-pic { transform: none; }
.tm-add .tm-name { position: static; transform: none; opacity: 1; padding: 0; background: none; color: inherit; font-size: 13px; }
.tm-add:hover .tm-name { color: var(--text); }
/* popovers */
.sg-pop.tm-pop { width: 300px; padding: 14px; }
.tm-card { display: flex; align-items: center; gap: 12px; }
.tm-face.lg { width: 46px; height: 46px; font-size: 15px; box-shadow: none; flex: none; }
.tm-face.sm { width: 32px; height: 32px; font-size: 11.5px; box-shadow: none; flex: none; }
.tm-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; flex: 1; text-align: left; }
.tm-who b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-who span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 12px 0 0; padding-top: 12px; box-shadow: 0 -1px 0 var(--hair); font-size: 12.5px; }
.tm-acts { display: flex; gap: 6px; margin-top: 12px; }
.tm-inv-form { display: flex; flex-direction: column; gap: 8px; }
.tm-inv-form input { margin: 0; }
.tm-role { align-self: flex-start; }
.tm-note { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.tm-out { margin-top: 10px; padding: 10px; border-radius: var(--r-md); background: var(--good-soft); font-size: 12.5px; color: var(--good-text); display: flex; flex-direction: column; gap: 8px; }
.tm-out > span { display: flex; gap: 6px; align-items: flex-start; }
.tm-out input { margin: 0; height: 32px; font-size: 12px; flex: 1; min-width: 0; }
.tm-search { margin: -2px 0 8px; }
.tm-list { max-height: 280px; overflow-y: auto; margin: 0 -6px; scrollbar-width: thin; }
.tm-li { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 6px; border: 0; border-radius: 9px; background: none; cursor: pointer; font: inherit; color: var(--text); }
.tm-li:hover { background: var(--sunk); }
@media (prefers-reduced-motion: reduce) { .tm-pic, .tm-add .tm-face { transition: none; } }
.tm-row { padding-top: 34px; margin-top: -14px; }
.tm-out > span { display: block; }
.tm-out > span svg { vertical-align: -3px; margin-right: 6px; }
.tm-out b { word-break: break-all; }
.tm-row { padding: 16px 0 30px; margin-top: 0; }
.tm-av:not(.tm-add) .tm-name { bottom: auto; top: calc(100% + 6px); transform: translate(-50%, -4px); }
.tm-av:not(.tm-add):hover .tm-name, .tm-av:not(.tm-add):focus-visible .tm-name { transform: translate(-50%, 0); }
.tm-add:hover .tm-name, .tm-add:focus-visible .tm-name { transform: none; opacity: 1; }

/* Team stack, dock-style: JS springs drive each face's scale and lift, so the CSS hover lift and per-face names are off */
.tm-stack { position: relative; padding-left: 14px; }
.tm-stack .tm-av { margin-left: -14px; }
.tm-stack .tm-pic { transition: none; transform-origin: 50% 50%; will-change: transform; }
.tm-stack .tm-av:hover .tm-pic, .tm-stack .tm-av:focus-visible .tm-pic { transform: none; }
.tm-stack .tm-name { display: none; }
.tm-tip {
  position: absolute; left: 0; top: 50%; z-index: 400; pointer-events: none; white-space: nowrap; opacity: 0;
  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--surface); background: var(--text);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45);
}
.tm-tip::after { content: ""; position: absolute; left: calc(50% + var(--tip-shift, 0px)); bottom: -4px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 2px 0; }
.tm-row { padding: 64px 0 18px; margin-top: -40px; }
.tm-row { padding: 34px 0 20px; margin-top: 0; }
.tm-tip { z-index: 3000; }
.tm-row { padding-top: 46px; }

/* Teammate / invite popover: person, details, link, actions — in clear sections */
.sg-pop.tm-pop.tm-member { width: 340px; padding: 16px; }
.tm-member .tm-card .tm-pic { flex: none; }
.tm-state { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--warn) !important; }
.tm-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.tm-sec { margin-top: 14px; padding-top: 14px; box-shadow: 0 -1px 0 var(--hair); display: flex; flex-direction: column; gap: 9px; }
.tm-sec-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.tm-kv { display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: 13px; line-height: 1.4; }
.tm-kv > span { color: var(--muted); }
.tm-kv b { font-weight: 600; display: flex; flex-direction: column; gap: 1px; }
.tm-kv small { font-size: 12px; font-weight: 400; color: var(--muted); }
.tm-linkrow { display: flex; gap: 6px; }
.tm-linkrow input { margin: 0; height: 32px; font: 12px ui-monospace, Menlo, monospace; flex: 1; min-width: 0; }
.tm-member .tm-note { margin: 0; font-size: 11.5px; }
.tm-member .tm-acts { margin-top: 14px; padding-top: 14px; box-shadow: 0 -1px 0 var(--hair); align-items: center; }
.tm-acts .tm-end { margin-left: auto; }
.tm-member .tm-meta { display: none; }

/* Invite: one dashed pill holding the + and the word */
.tm-add { gap: 6px; height: 38px; padding: 0 14px 0 10px; border-radius: 99px; border: 1.5px dashed color-mix(in srgb, var(--text) 28%, transparent); color: var(--muted); transition: border-color 0.2s, background 0.2s, color 0.2s; }
.tm-add .tm-pic { display: grid; place-items: center; }
.tm-add .tm-face { width: 20px; height: 20px; border: 0; background: none; box-shadow: none; color: inherit; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tm-add .tm-face svg { width: 17px; height: 17px; }
.tm-add .tm-name { font-size: 13px; font-weight: 600; }
.tm-add:hover, .tm-add:focus-visible { border-color: var(--text); border-style: dashed; background: var(--sunk); color: var(--text); }
.tm-add:hover .tm-face { border: 0; background: none; transform: rotate(90deg); }
.tm-add:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.tm-row { padding-top: 30px; } .tm-stack { margin-right: 6px; }

/* Default country picker: flag · ISO · name · +code */
.cc-pick { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; margin: 6px 0 14px; padding: 0 12px 0 14px; border: 0; border-radius: var(--r-md); background: var(--field); box-shadow: var(--sh-sunk); color: var(--text); font: 400 14px Inter, sans-serif; cursor: pointer; text-align: left; }
.cc-pick:hover { background: color-mix(in srgb, var(--text) 4%, var(--field)); }
.cc-pick:focus-visible { outline: 0; box-shadow: var(--sh-sunk), 0 0 0 3px var(--ring); }
.cc-pick > svg { margin-left: auto; color: var(--muted); flex: none; }
.cc-flag { flex: none; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.cc-iso { flex: none; min-width: 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.cc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-code { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); }
.cc-pick .cc-code { margin-left: auto; }
.sg-pop.cc-pop { padding: 8px; min-width: 280px; }
.cc-search { margin: 0 0 6px; }
.cc-search .search { width: 100%; }
.cc-list { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.cc-opt { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 13.5px Inter, sans-serif; cursor: pointer; text-align: left; }
.cc-opt .cc-code { margin-left: auto; }
.cc-opt:hover, .cc-opt:focus-visible { background: var(--sunk); outline: 0; }
.cc-opt.on { background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 600; }
.cc-pick > svg { margin-left: 4px; }

/* Settings → General: two fields per row, and the cards beside each other share a height */
.set-row { align-items: flex-start; }
.set-row > * { flex: 1; min-width: 0; }
.set-field .cc-pick { margin: 6px 0 14px; }
.set-help { margin: -4px 0 0; }
#tab-settings .grid-2 { align-items: stretch; }
#tab-settings .grid-2 > .card { display: flex; flex-direction: column; }
#tab-settings .grid-2 > .card > .card-actions { margin-top: auto; padding-top: 16px; }
@media (max-width: 700px) { .set-row { flex-direction: column; gap: 0; } .set-row > * { width: 100%; } }

/* Team faces: a little more room each, and pending invites drawn solid (no see-through overlaps) */
.tm-stack { padding-left: 8px; }
.tm-stack .tm-av { margin-left: -8px; }
.tm-face { box-shadow: 0 0 0 3px var(--surface); }
.tm-av.invited .tm-face { opacity: 1; filter: none; color: var(--faint); background: color-mix(in srgb, var(--sunk) 85%, var(--surface)); box-shadow: 0 0 0 3px var(--surface), inset 0 0 0 1.5px var(--hair); }
.tm-badge { background: var(--muted); }
.tm-crown { background: oklch(0.78 0.14 80); }
.set-field .field-label { margin-bottom: 0; }
.set-field .cc-pick { margin-top: 0; }

/* Team popovers: attached to the face by a small arrow */
.sg-pop.tm-pop { overflow: visible; transform-origin: var(--arrow-x, 50%) top; }
.sg-pop.tm-pop.tm-up { transform-origin: var(--arrow-x, 50%) bottom; }
.tm-pop::before {
  content: ""; position: absolute; top: -6px; left: var(--arrow-x, 50%); width: 12px; height: 12px; margin-left: -6px;
  background: var(--surface); transform: rotate(45deg); border-radius: 3px 0 0 0;
  box-shadow: -1px -1px 0 0 var(--hair);
}
.tm-pop.tm-up::before { top: auto; bottom: -6px; border-radius: 0 0 3px 0; box-shadow: 1px 1px 0 0 var(--hair); }

/* "Invite pending": a crisp dot with a soft pulse, centred on the text */
.tm-state { line-height: 1; }
.tm-state i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: none; }
.tm-state i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: tm-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes tm-ping { 0% { transform: scale(0.5); opacity: 0.55; } 80%, 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tm-state i::after { animation: none; } }

/* The hook glides: --arrow-x is a real length so it can animate (spring-like overshoot) */
@property --arrow-x { syntax: '<length>'; inherits: true; initial-value: 50px; }
.sg-pop.tm-pop { transition: --arrow-x 0.42s cubic-bezier(0.34, 1.45, 0.5, 1); }
.sg-pop.tm-pop.tm-swap { animation: none; }
@media (prefers-reduced-motion: reduce) { .sg-pop.tm-pop { transition: none; } }
.tm-row { padding: 12px 0 6px; gap: 10px; } .tm-stack { margin-right: 4px; }
.tm-stack { margin-right: 9px; }

/* Every dropdown's list (select.js): the same floating card as the country picker */
.sg-pop.ss-pop { padding: 6px; width: auto; max-width: min(420px, calc(100vw - 16px)); }
.ss-search { margin: 2px 2px 6px; }
.ss-search .search { width: 100%; height: 34px; }
.ss-list { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.ss-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 13.5px Inter, sans-serif; text-align: left; cursor: pointer; }
.ss-opt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-opt svg { flex: none; color: var(--text); }
.ss-opt:hover, .ss-opt:focus-visible { background: var(--sunk); outline: 0; }
.ss-opt.on { font-weight: 600; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ss-opt:disabled { color: var(--faint); cursor: default; }
.ss-group { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 9px 10px 5px; border-top: 1px solid var(--hair); background: var(--surface); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ss-group:first-child { margin-top: 0; border-top: 0; }
.ss-group span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-group small { flex: none; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--sunk); color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0; }
.ss-none { margin: 0; padding: 12px; text-align: center; font-size: 13px; color: var(--muted); }

/* Date & time picker (select.js) */
.dt-native { display: none !important; }
.dt-pick { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: var(--field); box-shadow: var(--sh-sunk); color: var(--text); font: 500 13.5px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.dt-pick svg { color: var(--muted); flex: none; }
.dt-pick small { font-size: 12px; color: var(--muted); font-weight: 400; }
.dt-pick:hover { background: color-mix(in srgb, var(--text) 4%, var(--field)); }
.dt-pick:focus-visible { outline: 0; box-shadow: var(--sh-sunk), 0 0 0 3px var(--ring); }
.sg-pop.dt-pop { width: 440px; max-width: calc(100vw - 16px); padding: 12px; }
.dt-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dt-chip { height: 28px; padding: 0 10px; border: 0; border-radius: 99px; background: var(--sunk); color: var(--text); font: 500 12.5px Inter, sans-serif; cursor: pointer; }
.dt-chip:hover { background: color-mix(in srgb, var(--text) 9%, var(--sunk)); }
.dt-main { display: grid; grid-template-columns: 1fr 108px; gap: 12px; }
.dt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13.5px; }
.dt-nav { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.dt-nav:hover:not(:disabled) { background: var(--sunk); }
.dt-nav:disabled { color: var(--faint); cursor: default; }
.dt-week, .dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dt-week span { font-size: 11px; font-weight: 600; color: var(--faint); padding: 4px 0; }
.dt-day { height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 13px Inter, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.dt-day:hover:not(:disabled) { background: var(--sunk); }
.dt-day.today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--hair); }
.dt-day.on { background: var(--text); color: var(--surface); font-weight: 600; }
.dt-day:disabled { color: var(--faint); opacity: 0.5; cursor: default; }
.dt-times { max-height: 252px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-left: 10px; box-shadow: -1px 0 0 var(--hair); scrollbar-width: thin; }
.dt-time { flex: none; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 13px Inter, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.dt-time:hover:not(:disabled) { background: var(--sunk); }
.dt-time.on { background: var(--text); color: var(--surface); font-weight: 600; }
.dt-time:disabled { display: none; }
.dt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; box-shadow: 0 -1px 0 var(--hair); font-size: 12.5px; color: var(--muted); }
.dt-foot b { color: var(--text); font-weight: 600; }
@media (max-width: 480px) { .dt-main { grid-template-columns: 1fr; } .dt-times { flex-direction: row; overflow-x: auto; max-height: none; padding: 8px 0 0; box-shadow: 0 -1px 0 var(--hair); } .dt-time { padding: 0 10px; } }
/* Sheet tabs: the × is always findable (faint until hover); a workbook's name has its own × to remove the file */
.sp-tab-x { opacity: 0.45; }
.sp-group { display: inline-flex; align-items: center; gap: 6px; }
.sp-group-x { opacity: 0.45; margin-left: 2px; }
.sp-group:hover .sp-group-x { opacity: 1; }

/* Assistant: a clean sheet it built */
.sheet-card { margin: 10px 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-card); }
.sheet-card.superseded { opacity: 0.55; }
.sheet-card.superseded .shc-acts { display: none; }
.shc-head { display: flex; align-items: center; gap: 10px; }
.shc-head > svg { color: var(--good-text); flex: none; }
.shc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.shc-title b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shc-title span { font-size: 12.5px; color: var(--muted); }
.shc-old { font-size: 12px; color: var(--muted); white-space: nowrap; }
.shc-sum { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.shc-table { margin-top: 12px; overflow-x: auto; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--hair); }
.shc-table table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.shc-table th, .shc-table td { padding: 7px 10px; text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 -1px 0 var(--hair); }
.shc-table th { font-weight: 600; color: var(--muted); background: var(--sunk); position: sticky; top: 0; }
.shc-table th svg { vertical-align: -1px; margin-right: 4px; }
.shc-more { padding: 7px 10px; font-size: 12px; color: var(--muted); background: var(--sunk); }
.shc-notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.shc-notes span { padding: 3px 9px; border-radius: 99px; background: var(--sunk); font-size: 12px; color: var(--muted); }
.shc-acts { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.fp-hint.ok { color: var(--good-text); background: var(--good-soft); }

/* Clean sheet card: expand to see every row */
.shc-head { position: relative; }
.shc-max { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; order: 3; color: var(--muted); }
.shc-max:hover { color: var(--text); }
.shc-head .shc-old { order: 2; }
.shc-expand { margin-left: auto; }
.modal-box.shv-box { max-width: min(1200px, calc(100vw - 48px)); width: 100%; }
.shv-bar { display: flex; align-items: center; gap: 12px; margin: -4px 0 12px; flex-wrap: wrap; }
.shv-bar .search-wrap { flex: 1; min-width: 220px; }
.shv-bar .search { width: 100%; }
.shv-count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.shv-acts { display: flex; gap: 6px; }
.shv-table { max-height: calc(90vh - 170px); overflow: auto; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--hair); }
.shv-table table { border-collapse: collapse; width: 100%; font-size: 13px; }
.shv-table th, .shv-table td { padding: 8px 12px; text-align: left; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 -1px 0 var(--hair); }
.shv-table th { position: sticky; top: 0; z-index: 1; background: var(--sunk); font-weight: 600; color: var(--muted); }
.shv-table th svg { vertical-align: -1px; margin-right: 4px; }
.shv-table tbody tr:hover td { background: color-mix(in srgb, var(--sunk) 60%, transparent); }
.shv-n { width: 1%; color: var(--faint); font-variant-numeric: tabular-nums; text-align: right !important; }
.shv-none { text-align: center !important; color: var(--muted); padding: 24px !important; }
.cd-why { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font-size: 13px; line-height: 1.5; }
.cd-why svg { flex: none; margin-top: 2px; }
.cd-why div { display: flex; flex-direction: column; gap: 2px; }
.cd-why b { font-weight: 600; }
.cd-why span { color: var(--text); }

/* Campaign detail: message and results side by side, about the same height */
.cd-top { align-items: stretch; }
.cd-msg, .cd-funnel { display: flex; flex-direction: column; }
.cd-msg .phone { position: relative; max-height: 380px; overflow: hidden; }
.cd-msg .phone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(transparent, var(--chat)); border-radius: 0 0 10px 10px; pointer-events: none; }
.cd-msg .phone.open { max-height: none; }
.cd-msg .phone.open::after { display: none; }
.cd-msg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.cd-msg-foot .sub { margin: 0; }
/* the bars spread over the card instead of bunching at the top */
.cd-funnel .cd-steps { flex: 1; justify-content: space-evenly; gap: 14px; }
.cd-funnel .cd-foot { margin-top: 16px; }
.cd-step-bar { height: 12px; }
/* Numbers: the WhatsApp profile photo next to the number. */
.sender-id { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sender-id > label { margin: 0; display: inline-flex; flex: none; }
/* Who customers see: the verified business name (or the label until there is one), the number under it.
   The photo matches the two lines' height. */
.sender-who { display: grid; gap: 1px; min-width: 0; flex: 1; line-height: 1.3; }
.sender-vname { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sender-num { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sender-card .sender-photo { width: 40px; height: 40px; font-size: 16px; }
.sender-photo { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 18px; }
.sender-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sender-photo-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex: none; }
.sender-photo-btn.busy { opacity: 0.6; pointer-events: none; }
.sf-photo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px; background: var(--sunk); }
.sf-photo > div { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13px; }
.sf-photo .sub { margin: 0; font-size: 12.5px; }
/* Profile photo editor: its own popup above Edit number. The square is what's uploaded; the circle is what
   WhatsApp shows. */
#photoModal { z-index: 56; }
.pe-box { max-width: 760px; }
.pe-box .modal-head .icon-btn { display: grid; place-items: center; }
.pe-body { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.pe-stage { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--sunk); touch-action: none; }
.pe-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.pe-stage canvas:active { cursor: grabbing; }
/* Dim everything outside the circle, with a thin ring and a rule-of-thirds guide while working. */
.pe-stage::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 400px rgba(10, 14, 18, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.9); pointer-events: none; }
.pe-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255,255,255,.35) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), rgba(255,255,255,.35) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
  linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255,255,255,.35) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), rgba(255,255,255,.35) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)); }
.pe-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); font-size: 13px; text-align: center; padding: 20px; background: var(--sunk); }
.pe-side { display: grid; gap: 14px; min-width: 0; }
.pe-preview { display: grid; gap: 6px; }
.pe-cap { font-size: 12px; color: var(--muted); }
.pe-small { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.pe-small canvas { width: 100%; height: 100%; display: block; }
/* A WhatsApp chat-list row: photo, name, last message, time. */
.pe-chat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair); }
.pe-chat div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pe-chat b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-chat small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-chat time { align-self: start; font-size: 11.5px; color: var(--muted); }
.pe-ctl { display: grid; gap: 8px; }
.pe-ctl > label { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 13px; color: var(--muted); }
.pe-ctl output { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); padding: 1px 8px; border-radius: 99px; background: var(--sunk); font-size: 12.5px; }

/* Zoom: a slim track that fills as you zoom, a white knob, − and + to step. */
.pe-zoom { display: flex; align-items: center; gap: 10px; }
.pe-step { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--sunk); color: var(--text); font: 600 16px/1 var(--font, inherit); cursor: pointer; display: grid; place-items: center; transition: background 0.15s, transform 0.15s; }
.pe-step:hover { background: var(--hair); }
.pe-step:active { transform: scale(0.92); }
.pe-range { --p: 0%; flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pe-range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(to right, var(--accent) 0 var(--p), var(--hair) var(--p) 100%); }
.pe-range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--hair); }
.pe-range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--accent); }
.pe-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); transition: transform 0.15s, box-shadow 0.15s; }
.pe-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.pe-range:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 7px color-mix(in srgb, var(--accent) 25%, transparent); }
.pe-range:focus-visible { outline: none; }
.pe-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }

/* Straighten: a ruler with a tick per degree, longer ticks every 5°, a mark at 0 and a slim pointer. */
.pe-ruler { width: 100%; height: 34px; margin: 0; -webkit-appearance: none; appearance: none; cursor: ew-resize; border-radius: 8px;
  background:
    linear-gradient(var(--muted), var(--muted)) center bottom / 2px 22px no-repeat,
    repeating-linear-gradient(to right, var(--muted) 0 1px, transparent 1px calc((100% - 1px) / 6)) left bottom / 100% 14px no-repeat,
    repeating-linear-gradient(to right, color-mix(in srgb, var(--muted) 55%, transparent) 0 1px, transparent 1px calc((100% - 1px) / 30)) left bottom / 100% 8px no-repeat,
    var(--sunk); }
.pe-ruler::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.pe-ruler::-moz-range-track { height: 34px; background: transparent; }
.pe-ruler::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 34px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.pe-ruler::-moz-range-thumb { width: 4px; height: 34px; border: 0; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.pe-ruler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pe-ruler-scale { display: flex; justify-content: space-between; margin-top: -2px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pe-ruler-scale span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.pe-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-tools .btn, .pe-choose { display: inline-flex; align-items: center; gap: 6px; }
.pe-choose { justify-self: start; cursor: pointer; }
.pe-hint { margin: 0; font-size: 12.5px; }
.pe-warn { margin: 0; font-size: 12.5px; color: var(--warn, #a15c00); }
@media (max-width: 680px) { .pe-body { grid-template-columns: 1fr; } }
/* The app's general input styling (fill, border, padding) doesn't belong on the editor's sliders. */
#photoModal .pe-range, #photoModal .pe-ruler { border: 0 !important; padding: 0 !important; box-shadow: none !important; min-height: 0; }
#photoModal .pe-range { background: transparent !important; }

/* Template editor: the form on the left, the message as WhatsApp shows it on the right. */
.modal-box.te-box { max-width: 1040px; }
.te { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 8px 28px; align-items: start; }
.te-form { display: grid; gap: 16px; min-width: 0; }
.te-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.te-name .opt { white-space: nowrap; }
.te-row > label, .te-field { margin: 0; display: grid; gap: 6px; }
.te-name input[readonly] { color: var(--muted); }
.te-seg { flex-wrap: wrap; max-width: 100%; justify-self: start; }
.te-sec { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--hair); }
.te-sec-h { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.te-count { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.te-count.warn { color: var(--warn); }
.te-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.te-tools > button { min-width: 32px; height: 30px; padding: 0 9px; border: 0; border-radius: 8px; background: var(--sunk); color: var(--text); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.te-tools > button:hover { background: var(--hair); }
.te-tools code { font-size: 11.5px; }
.te-tools .te-addvar { margin-left: auto; font-weight: 600; color: var(--accent-text); }
.te textarea[name=bodyText] { resize: vertical; min-height: 150px; line-height: 1.5; }
.te-samples { display: grid; gap: 8px; }
.te-samples:empty { display: none; }
.te-cap { font-size: 12px; color: var(--muted); }
.te-sample { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; margin: 0; font-size: 13px; }
.te-sample code { justify-self: start; }
.te-domain { display: grid; gap: 6px; margin: 0; padding-top: 4px; font-size: 13px; }
.te-media { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.te-media .btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.te-media .sub { margin: 0; font-size: 12.5px; }
.te-buttons { display: grid; gap: 8px; }
.te-btn { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 8px; align-items: center; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--sunk); }
.te-btn-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.te-btn input, .te-btn select { margin: 0 !important; height: 34px; font-size: 13px; }
.te-btn .te-wide { grid-column: 2 / 4; }
.te-btn:not(:has([data-bf=url])):not(:has([data-bf=phone])) input[data-bf=text] { grid-column: 2 / 4; }
.te-btn [data-bf=url], .te-btn [data-bf=phone] { grid-column: 3; grid-row: 1; }
.te-btn .te-btn-x { grid-column: 4; grid-row: 1; display: grid; place-items: center; width: 28px; height: 28px; }
.te-addbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.te-addbtns .btn { display: inline-flex; align-items: center; gap: 6px; }
.te-preview { position: sticky; top: 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.te-preview .sub { margin: 0; font-size: 12.5px; }
.te-chat { background: #e9e1d6; border-radius: 14px; padding: 18px 16px; min-height: 200px; display: flex; align-items: flex-start; }
.te-chat .bubble { width: 100%; max-width: none; min-width: 0; overflow-wrap: anywhere; }
.te-actions { grid-column: 1 / -1; }
.tpl-reason { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 12.5px; }
.tpl-reason svg { flex: none; margin-top: 1px; }
@media (max-width: 860px) { .te { grid-template-columns: 1fr; } .te-preview { position: static; } .te-row { grid-template-columns: 1fr; } .te-btn { grid-template-columns: 1fr 28px; } .te-btn > * { grid-column: 1 !important; } .te-btn .te-btn-x { grid-column: 2 !important; } }
.te-hint { font-size: 12px; color: var(--muted); }
.te-empty { color: var(--muted); font-size: 13px; }
/* A PDF header in a message bubble: its icon and the file name customers see. */
.bubble .media.media-doc { height: auto; min-height: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 12px; color: var(--text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.bubble .media.media-doc svg { flex: none; color: var(--danger); }
.sp-map .m-hint { grid-column: 2; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
/* Phone cells with several numbers: a tag that opens the picker. */
/* Pinned to the cell's right edge so long cells don't hide it. */
#spGrid td.multi { position: relative; padding-right: 86px; }
.sp-multi { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 1px 7px; border: 0; border-radius: 99px; background: var(--info-soft); color: var(--info); font: 600 10.5px/1.6 inherit; cursor: pointer; vertical-align: 1px; white-space: nowrap; }
.sp-multi:hover { background: color-mix(in srgb, var(--info) 22%, transparent); }
.sp-multi.chosen { background: var(--accent-soft); color: var(--accent-text); }
.sp-map .m-fb { grid-column: 2; }
/* A PDF header is a link that opens the preview popup. */
a.media.media-doc { text-decoration: none; cursor: pointer; transition: background 0.15s; }
a.media.media-doc:hover { background: var(--hair); }
.media.media-doc span { flex: 1; min-width: 0; }
.media.media-doc small { flex: none; font-weight: 500; color: var(--info); font-size: 12px; white-space: nowrap; }
/* PDF preview popup */
#pdfModal { z-index: 57; }
.pdf-box { max-width: 960px; width: 100%; height: min(88vh, 1100px); display: flex; flex-direction: column; }
.pdf-box .modal-head { gap: 12px; }
.pdf-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pdf-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-name svg { flex: none; color: var(--danger); }
.pdf-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.pdf-actions .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pdf-actions .icon-btn { display: grid; place-items: center; }
.pdf-frame { flex: 1; width: 100%; min-height: 0; border: 0; border-radius: 10px; background: var(--sunk); }
.pdf-note { margin: 8px 0 0; font-size: 12px; }
@media (max-width: 640px) { .pdf-actions .btn { padding: 0 8px; font-size: 0; gap: 0; } .pdf-actions .btn svg { width: 16px; height: 16px; } }
/* A PDF header is one compact row in every preview size (the small previews fix .media's height). */
.bubble .media.media-doc, .sp-phone-big .media.media-doc, #tab-send.pane-wide .sp-phone-big .media.media-doc, .sp-tpl-phone .media.media-doc { height: auto; min-height: 0; overflow-wrap: break-word; }
.media.media-doc span { word-break: normal; }
/* Break file names at spaces only, and drop the "Preview" label where the bubble is narrow (the whole row is still clickable). */
.media.media-doc span { overflow-wrap: normal; word-break: normal; }
.sp-phone-big .media.media-doc small, .sp-tpl-phone .media.media-doc small { display: none; }
/* The AI strip ("Let AI reply", a suggested reply, "AI is typing…") floats over the bottom of the chat with
   nothing behind it; the messages get matching room at the bottom so none hide under it. */
.ib-chat .ib-ai { position: absolute; left: 0; right: 0; bottom: var(--ib-foot, 64px); z-index: 3; padding: 0 16px 12px; background: transparent; pointer-events: none; }
.ib-chat .ib-ai > * { pointer-events: auto; }
.ib-chat .ib-msgs { padding-bottom: calc(16px + var(--ib-ai, 0px)); }
.ib-ai-ask { background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
/* ↓ back to the newest message, shown once you've scrolled up. */
.ib-jump { position: absolute; right: 20px; bottom: calc(var(--ib-foot, 64px) + var(--ib-ai, 0px) + 12px); z-index: 4; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text); background: color-mix(in srgb, var(--surface) 85%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--sh-raised); transition: transform 0.18s, opacity 0.18s; }
.ib-jump:hover { box-shadow: var(--sh-raised-hi); transform: translateY(-1px); }
.ib-jump.hidden { display: grid; opacity: 0; transform: translateY(8px) scale(0.9); pointer-events: none; }

.te-note { margin: 2px 0 0; font-size: 12px; }
/* A link value that's missing https:// or is broken. */
input.bad, .sp-map .m-val.bad { box-shadow: 0 0 0 1.5px var(--danger) inset !important; }
.sp-map .m-err { grid-column: 2; color: var(--danger); font-size: 11.5px; line-height: 1.35; }
/* Website button: Static or Dynamic link, with what each means. */
.te-btn .te-mode { grid-column: 2 / 4; grid-row: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.te-mode .seg > button { height: 26px; padding: 0 12px; font-size: 12px; }
.te-mode small { flex: 1; min-width: 200px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.te-mode small b { color: var(--text); font-weight: 600; }
.te-req { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.te-name input::placeholder { color: var(--faint, #a3acb4); font-style: italic; }
/* "Show the rows": a small pill under the note that jumps to rows with no value. */
.sp-map .m-show { display: flex; width: max-content; align-items: center; gap: 5px; margin-top: 6px; height: 24px; padding: 0 10px; border: 0; border-radius: 99px; background: var(--info-soft); color: var(--info); font: 600 11.5px/1 Inter, sans-serif; cursor: pointer; font-variant-numeric: tabular-nums; transition: background 0.15s; }
.sp-map .m-show:hover { background: color-mix(in srgb, var(--info) 22%, transparent); }
.sp-map .m-show svg { flex: none; }
/* Settings → Workspace: delete it (owners only). */
.ws-danger { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); background: color-mix(in srgb, var(--danger) 5%, transparent); }
.ws-danger > div { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13px; }
.ws-danger span { color: var(--muted); font-size: 12.5px; }
.ws-danger .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
/* Per variable: count placeholders like "N/A" as empty, or send them as written. */
.sp-map .m-keep { grid-column: 2; display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12px; color: var(--text); cursor: pointer; line-height: 1.35; }
.sp-map .m-keep input { width: 14px; height: 14px; margin: 1px 0 0 !important; flex: none; accent-color: var(--accent); }
.sp-map .m-keep i { font-style: normal; color: var(--muted); margin-left: 4px; }
/* Avatars with photos. */
.acct-av.has-photo, .tm-face.has-photo { padding: 0; overflow: hidden; background: var(--sunk); }
.acct-av img, .tm-face img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* Bottom left: the workspace's letter, with your face as a small badge. */
.acct-av.ws-av { position: relative; overflow: visible; }
.acct-av .acct-me-badge { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; font-size: 7.5px; box-shadow: 0 0 0 2px var(--surface); }
/* Your account: the photo with an upload button on it. */
.acct-photo { position: relative; flex: none; }
.acct-photo-btn { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); box-shadow: var(--sh-raised); cursor: pointer; margin: 0; }
.acct-photo-btn:hover { box-shadow: var(--sh-raised-hi); }
/* Settings → Workspace: password protection. */
.ws-protect { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding: 12px 14px; border-radius: 12px; background: var(--sunk); }
.ws-protect > div { flex: 1; min-width: 200px; display: grid; gap: 2px; font-size: 13px; }
.ws-protect span { color: var(--muted); font-size: 12.5px; }
.ws-protect .btn { display: inline-flex; align-items: center; gap: 6px; }
.ws-lock-tag { display: inline-flex; margin-left: 6px; color: var(--muted); vertical-align: -1px; }
/* The screen shown inside a protected workspace until its password is entered. */
.ws-lock { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg, #f3f5f7) 70%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.ws-lock-box { width: min(380px, 100%); display: grid; gap: 12px; justify-items: center; text-align: center; padding: 28px; border-radius: 18px; background: var(--surface); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.35); }
.ws-lock-box h2 { margin: 0; font-size: 18px; }
.ws-lock-box .sub { margin: 0; }
.ws-lock-box input, .ws-lock-box .btn.primary, .ws-lock-box .sf-status { width: 100%; }
.ws-lock-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); }
.ws-lock-alt { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; font-size: 12.5px; color: var(--muted); }
.ws-lock-alt .btn { display: inline-flex; align-items: center; gap: 5px; }
.ws-lock-out { font-size: 12.5px; }

/* Workspace settings popup */
.wss-sec { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--sunk); }
.wss-sec .sub { margin: 0; font-size: 12.5px; }
.wss-head { display: flex; align-items: center; gap: 10px; }
.wss-head > div { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wss-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); flex: none; }
.wss-sec .btn { display: inline-flex; align-items: center; gap: 6px; }
.wss-danger { background: color-mix(in srgb, var(--danger) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent); }
.wss-danger .wss-ic { color: var(--danger); }
/* Templates: the number filter stays compact in the header; with all numbers, one section per number. */
#tplSender { width: auto; min-width: 160px; max-width: 220px; margin: 0; }
.tpl-groups { display: grid; gap: 34px; }
.tpl-group { display: grid; gap: 14px; }
.tpl-group-h { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.tpl-group-h > div { display: grid; gap: 1px; min-width: 0; flex: 1; }
.tpl-group-h b { font-size: 15px; }
.tpl-group-h span { font-size: 12.5px; color: var(--muted); }
.tpl-group-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); color: var(--text); flex: none; }
.tpl-group-n { flex: none; padding: 3px 10px; border-radius: 99px; background: var(--sunk); font-weight: 600; }
.tpl-group-empty { margin: 0; }
#cpSender { width: auto; min-width: 180px; max-width: 260px; margin: 0; }
.cp-head-actions { flex-wrap: nowrap; align-items: center; }
/* Page headers: the title and description take the space left, the actions stay on the right
   (they only drop below on narrow screens). */
.section-head > :first-child { flex: 1 1 320px; min-width: 0; }
.section-head > :last-child:not(:first-child) { flex: none; margin-left: auto; }

/* =================== Narrow screens: a top bar with a menu button; the sidebar slides in as a drawer =================== */
.mbar, .drawer-scrim { display: none; }
@media (max-width: 900px) {
  body { padding-left: 0; padding-top: calc(56px + env(safe-area-inset-top)); }
  .mbar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--hair); }
  .mbar .icon-btn { width: 40px; height: 40px; display: grid; place-items: center; position: relative; flex: none; color: var(--text); }
  .mbar .logo { width: 26px; height: 26px; }
  .mbar-title { flex: 1; min-width: 0; font: 600 16px Outfit, Inter, sans-serif; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar .nav-badge { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; }
  .sidebar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); padding: calc(18px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    overflow-y: auto; background: var(--bg); box-shadow: 0 0 0 1px var(--hair), 20px 0 50px -20px rgba(0, 0, 0, 0.35); transform: translateX(-105%); visibility: hidden; transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.32s; }
  body.drawer-open .sidebar { transform: none; visibility: visible; transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(10, 14, 18, 0.38); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
  body.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }
  .side-nav.seg > button { height: 44px; font-size: 15px; }
  .sidebar .side-foot { margin-top: 10px; }
  .banner { width: calc(100% - 32px); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .sidebar, .drawer-scrim { transition: none !important; } }
.health-cap { margin: 16px 0 0; padding-top: 12px; box-shadow: 0 -1px 0 var(--hair); }


/* Small rectangular status tags (number details: quality, connection) */
.tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11.5px; font-weight: 600; line-height: 1; background: var(--sunk); color: var(--muted); box-shadow: inset 0 0 0 1px var(--hair); vertical-align: middle; }
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.good { background: var(--good-soft); color: var(--good-text); box-shadow: none; }
.tag.warn { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.tag.bad { background: var(--danger-soft); color: var(--danger); box-shadow: none; }
.kv dd .tag, .kv dd .tag-note { font-family: var(--font-ui, Inter, system-ui, sans-serif); }
.tag-note { margin-left: 8px; color: var(--muted); }

/* Emoji reactions */
.ib-row { position: relative; }
.ib-row.picking .ib-reply-btn { opacity: 1; }
.ib-react-mine { display: inline-block; }
.ib-reacts .ib-react-mine:not(:first-child) { margin-left: 2px; }
.ib-react-pick {
  position: fixed; z-index: 60; display: flex; align-items: center; gap: 4px; padding: 6px 8px;
  border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair), 0 8px 28px rgba(0, 0, 0, 0.18);
  animation: ib-pick-in 0.18s var(--ease-out, ease-out); transform-origin: bottom right;
}
.ib-react-pick button[data-emoji] {
  width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent;
  font-size: 27px; line-height: 1; cursor: pointer; transition: transform 0.14s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.12s;
}
.ib-react-pick button[data-emoji]:hover { transform: scale(1.18) translateY(-2px); }
.ib-react-pick button[data-emoji].on { background: var(--sunk); box-shadow: inset 0 0 0 1px var(--hair); }
.ib-react-plus {
  width: 36px; height: 36px; margin-left: 2px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--sunk); color: var(--text); transition: background 0.12s;
}
.ib-react-plus:hover { background: var(--hair); }
/* "+": the full set in a grid */
.ib-react-pick.expanded { border-radius: 16px; padding: 8px; }
.ib-react-grid { display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; max-height: 196px; overflow-y: auto; }
.ib-react-grid button[data-emoji] { width: 36px; height: 36px; font-size: 22px; }
/* The react button itself: a round, filled smiley like WhatsApp's */
.ib-react-btn { width: 32px; height: 32px; }
@keyframes ib-pick-in { from { opacity: 0; transform: translateY(6px) scale(0.9); } }

/* Hover card on a status tag (number quality) */
.kv dd.dd-pop { overflow: visible; }
.tag.has-pop { position: relative; cursor: help; }
.tag.has-pop:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.tag-pop {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: -8px; width: 300px; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border-radius: 10px; background: #1c1f22; color: #e8eaec; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font: 400 12.5px/1.45 var(--font-ui, Inter, system-ui, sans-serif); white-space: normal; text-align: left; cursor: default;
  opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.tag-pop::before { content: ''; position: absolute; top: -5px; left: 18px; width: 10px; height: 10px; background: #1c1f22; border-radius: 2px; rotate: 45deg; }
.tag.has-pop:hover .tag-pop, .tag.has-pop:focus-visible .tag-pop, .tag.has-pop:focus-within .tag-pop { opacity: 1; visibility: visible; transform: none; }
.tag-pop .tp-head { display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.tag-pop .tp-head b { font-size: 13px; color: #fff; white-space: nowrap; }
.tag-pop .tp-head span { font-size: 11px; color: #9aa3ab; white-space: nowrap; }
.tag-pop .tp-sec { display: block; }
.tag-pop .tp-sec i { display: block; font-style: normal; font-weight: 600; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: #9aa3ab; margin-bottom: 1px; }
.tag.has-pop::before { flex: none; }
/* The card with an open hover card sits above its neighbours, so the next card's switch can't show through. */
.sender-card:has(.tag.has-pop:hover), .sender-card:has(.tag.has-pop:focus-within) { position: relative; z-index: 20; }
/* Your reaction: faint until Meta confirms delivery; a red ring if it failed. */
.ib-react-mine.pending { opacity: 0.55; }
.ib-react-mine.failed { border-radius: 50%; box-shadow: 0 0 0 1.5px var(--danger); }

/* Swipe to reply */
.ib-msgs { overscroll-behavior-x: none; }
.ib-row { touch-action: pan-y; }
.ib-row .ib-bubble { position: relative; z-index: 1; }
.ib-row.swiping .ib-bubble { will-change: transform; }
.ib-row.swiping .ib-reply-btn { opacity: 0 !important; pointer-events: none; }
.ib-row.swipe-back .ib-bubble { transition: transform 0.34s cubic-bezier(0.3, 1.45, 0.5, 1); }
.ib-swipe-ico {
  position: absolute; z-index: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface); color: var(--muted); box-shadow: var(--sh-raised); pointer-events: none;
  opacity: var(--swipe, 0); transform: scale(calc(0.4 + var(--swipe, 0) * 0.6));
  transition: background 0.15s, color 0.15s;
}
.ib-row.swipe-armed .ib-swipe-ico { background: var(--good, #25d366); color: #fff; animation: ib-swipe-pop 0.28s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ib-row.swipe-back .ib-swipe-ico { transition: opacity 0.2s, transform 0.2s; }
@keyframes ib-swipe-pop { 0% { transform: scale(0.8); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ib-row.swipe-back .ib-bubble { transition: none; } .ib-row.swipe-armed .ib-swipe-ico { animation: none; } }

/* A message that wasn't delivered: one tidy line under it; the explanation opens with "Details". */
.ib-err { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(78%, 460px); margin: 4px 2px 6px; font-size: 12px; line-height: 1.45; }
.ib-err-line { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--danger); }
.ib-err-ico { width: 15px; height: 15px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--danger); color: #fff; font: 700 10px/1 Inter, sans-serif; }
.ib-err-line b { font-weight: 600; }
.ib-err-more { border: 0; padding: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 2px; cursor: pointer; }
.ib-err-more:hover { color: var(--text); text-decoration-color: currentColor; }
.ib-err .ib-resend { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: var(--surface); color: var(--danger); font: 600 11.5px Inter, sans-serif; cursor: pointer; }
.ib-err .ib-resend:hover { background: var(--danger-soft); }
.ib-err .ib-resend:disabled { opacity: 0.6; cursor: default; }
.ib-err .ib-resent { color: var(--muted); font-weight: 600; }
.ib-err-pop {
  position: fixed; z-index: 70; width: 320px; padding: 12px 14px; border-radius: 10px; background: #1c1f22; color: #e8eaec;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); font: 400 12.5px/1.5 Inter, system-ui, sans-serif; animation: ib-err-pop 0.16s ease-out;
}
.ib-err-pop::after { content: ''; position: absolute; bottom: -5px; left: calc(var(--arrow-x, 50%) - 5px); width: 10px; height: 10px; background: #1c1f22; border-radius: 2px; rotate: 45deg; }
.ib-err-pop.below::after { bottom: auto; top: -5px; }
.ib-err-pop b { display: block; color: #fff; font-size: 13px; margin-bottom: 4px; }
.ib-err-pop p { margin: 0; }
.ib-err-pop p + p { margin-top: 8px; }
.ib-err-pop .ib-err-src { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ib-err-pop .ib-err-raw { margin-top: 4px; color: #9aa3ab; font-size: 11.5px; }
.ib-err-codeline { display: flex; align-items: center; gap: 10px; color: #c9ced3; font-size: 12px; }
.ib-err-codeline code { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); color: #fff; font: 600 12px ui-monospace, Menlo, monospace; }
.ib-err-codeline > span { margin-right: auto; }
.ib-err-copy, .ib-err-codeline a { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0; background: none; color: #9ec5ff; font: 600 11.5px Inter, sans-serif; text-decoration: none; cursor: pointer; }
.ib-err-copy:hover, .ib-err-codeline a:hover { color: #cfe2ff; }
/* The code on the error line itself */
.ib-err-code { padding: 0 6px; height: 18px; display: inline-flex; align-items: center; border-radius: 5px; background: var(--sunk); color: var(--muted); font: 600 11px ui-monospace, Menlo, monospace; cursor: help; }
@keyframes ib-err-pop { from { opacity: 0; transform: translateY(4px); } }
.ib-err-pop b + .ib-err-src { margin-top: 2px; padding-top: 0; border-top: 0; } /* no explanation: no divider */

/* Error codes page */
.ec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.ec-bar .search-wrap { flex: 1 1 260px; min-width: 220px; }
.ec-bar .seg { flex: none; flex-wrap: wrap; max-width: 100%; }
.ec-group { margin-bottom: 22px; }
.ec-group h3 { margin: 0 0 8px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.ec-card { padding: 0; overflow: hidden; }
.ec-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 14px 18px; box-shadow: 0 1px 0 var(--hair); scroll-margin: 90px; }
.ec-row:last-child { box-shadow: none; }
.ec-code { justify-self: start; padding: 2px 8px; border-radius: 6px; background: var(--sunk); color: var(--text); font: 600 13px ui-monospace, Menlo, monospace; }
.ec-main b { display: block; font-size: 14px; margin-bottom: 2px; }
.ec-main p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ec-main .ec-todo { margin-top: 6px; color: var(--text); }
.ec-todo span { margin-right: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.ec-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; white-space: nowrap; }
.ec-search { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); text-decoration: none; }
.ec-search:hover { color: var(--text); }
.ec-row.hl { animation: ec-hl 2.2s ease-out; }
@keyframes ec-hl { 0%, 35% { background: var(--accent-soft, var(--sunk)); } 100% { background: transparent; } }
.ec-empty { padding: 18px 20px; } .ec-empty p { margin: 4px 0 0; color: var(--muted); }
@media (max-width: 640px) {
  .ec-row { grid-template-columns: 1fr; gap: 8px; }
  .ec-side { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Search + filter bar above a list (Templates, Numbers) */
.list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: -8px 0 18px; }
.list-bar .search-wrap { flex: 1 1 240px; }
.list-bar > select:last-child { margin-left: auto; }
.list-bar select { width: auto; margin: 0; }
.list-empty { padding: 18px 20px; grid-column: 1 / -1; }
.list-empty p { margin: 4px 0 0; color: var(--muted); }

/* Filter chips inside a dropdown (e.g. the Send page's template picker) */
.ss-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 6px 8px; }
.ss-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 0; border-radius: 99px; background: var(--sunk); color: var(--muted); font: 600 12px Inter, sans-serif; cursor: pointer; }
.ss-chip span { font-weight: 500; opacity: 0.7; }
.ss-chip:hover { color: var(--text); }
.ss-chip.on { background: var(--text); color: var(--surface); }

.ib-err-pop .ib-err-report { margin-top: 10px; font-size: 11.5px; color: #9aa3ab; }
.ib-err-pop .ib-err-report a { color: #9ec5ff; font-weight: 600; text-decoration: none; }
.ib-err-pop .ib-err-report a:hover { color: #cfe2ff; }

/* Report an issue */
.rp-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 34px; }
.rp-form h2, .rp-mine h2 { margin-top: 0; }
.rp-form textarea { resize: vertical; min-height: 110px; }
.rp-actions { align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-actions .sub { margin: 0; font-size: 12px; }
.rp-mine #rpList { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.rp-item { padding: 10px 12px; border-radius: 10px; background: var(--sunk); }
.rp-item-h { display: flex; align-items: center; gap: 8px; }
.rp-item-h b { font-size: 13px; }
.rp-item-h code { padding: 0 6px; border-radius: 5px; background: var(--surface); font: 600 11.5px ui-monospace, Menlo, monospace; }
.rp-item-h .tag { margin-left: auto; }
.rp-item p { margin: 4px 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rp-meta { font-size: 11.5px; color: var(--muted); }
.ec-head { margin-bottom: 14px; }
.ec-head h2 { margin: 0; }
@media (max-width: 900px) { .rp-grid { grid-template-columns: 1fr; } }
.rp-form select, .rp-form input, .rp-form textarea { margin-bottom: 16px; }
.rp-form textarea { font-family: inherit; font-size: 14px; line-height: 1.5; }
.rp-form textarea::placeholder { font-family: inherit; }

/* Numbers: search in the header, with a quality filter button inside it */
.num-head { align-items: center; flex-wrap: nowrap; }
.num-search { position: relative; width: 320px; }
.num-search .search { padding-right: 46px; }
.num-filter { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 600 12px Inter, sans-serif; cursor: pointer; }
.num-filter:hover { background: var(--surface); color: var(--text); }
.num-filter.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-raised); }
.num-search:has(.num-filter.on) .search { padding-right: 120px; }
.num-filter-lbl { display: inline-flex; align-items: center; gap: 5px; }
.num-filter-lbl .q-dot { width: 7px; height: 7px; }
@media (max-width: 720px) { .num-head { flex-wrap: wrap; width: 100%; } .num-search { width: 100%; } }

/* Report an issue: the header buttons and the pop-ups */
.btn-count { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font: 700 11px/1 Inter, sans-serif; }
.rp-lead { margin: -4px 0 14px; }
.rp-note { margin: 0 0 4px; font-size: 12px; }
.rp-hint { margin: -10px 0 14px; padding: 8px 10px; border-radius: 8px; background: var(--sunk); font-size: 12.5px; color: var(--text); }
.rp-list { display: flex; flex-direction: column; gap: 10px; max-height: min(60vh, 520px); overflow-y: auto; }
/* The filter button's own icon isn't the search box's magnifier: keep it in the button's flow. */
.search-wrap .num-filter svg { position: static; margin: 0; color: currentColor; pointer-events: none; }

/* Your reports page */
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.back-link:hover { color: var(--text); }
.rs-card { padding: 0; overflow: hidden; }
.rs-row { box-shadow: 0 1px 0 var(--hair); }
.rs-row:last-child { box-shadow: none; }
.rs-sum { width: 100%; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto 20px; align-items: center; gap: 14px; padding: 14px 18px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rs-sum:hover { background: var(--sunk); }
.rs-sum .tag { justify-self: start; }
.rs-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rs-title b { flex: none; font-size: 14px; }
.rs-title code, .rs-facts code { flex: none; padding: 1px 6px; border-radius: 5px; background: var(--sunk); font: 600 12px ui-monospace, Menlo, monospace; }
.rs-snip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.rs-when { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.rs-chev { display: grid; place-items: center; color: var(--muted); transition: transform 0.2s; }
.rs-row.open .rs-chev { transform: rotate(180deg); }
.rs-row.open .rs-sum { background: var(--sunk); }
.rs-body { padding: 4px 18px 18px 120px; animation: ib-err-open 0.18s ease-out; }
.rs-msg { margin: 10px 0 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; }
.rs-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 13px; }
.rs-facts dt { color: var(--muted); }
.rs-facts dd { margin: 0; }
.rs-facts .muted { color: var(--muted); }
@media (max-width: 720px) {
  .rs-sum { grid-template-columns: minmax(0, 1fr) 20px; }
  .rs-sum .tag { grid-column: 1; } .rs-when { display: none; }
  .rs-body { padding-left: 18px; }
}
.rs-row.open .rs-title code, .rs-sum:hover .rs-title code { background: var(--surface); }

/* Rates on the Overview: honest gaps and sample size */
.chart .linelayer path.bridge { fill: none; stroke: var(--chart); stroke-width: 1.5; opacity: 0.22; stroke-linecap: round; }
.chart .linelayer circle.few { fill: var(--surface); stroke: var(--chart); stroke-width: 2; }
.tt-note { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--muted); }
.tt-note.few { color: var(--warn); }

/* Contacts: how they were added */
.ct-auto, .ct-ai { display: inline-flex; align-items: center; gap: 3px; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 5px; font: 600 10.5px/1 Inter, sans-serif; vertical-align: 1px; white-space: nowrap; }
.ct-auto { background: var(--sunk); color: var(--muted); box-shadow: inset 0 0 0 1px var(--hair); }
.ct-ai { background: var(--violet-soft); color: var(--violet); }
.ct-ai svg.orb-icon { display: inline-block; }
.ct-pmeta .ct-auto, .ct-pmeta .ct-ai { margin-left: 0; }

/* "Clear all" on top of a stack of toasts */
.toast-clear { align-self: flex-end; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border: 0; border-radius: 99px; background: var(--toast-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--surface); font: 600 12px Inter, sans-serif; cursor: pointer; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35); animation: toast-in 0.3s var(--ease-out) both; transition: opacity 0.2s; }
.toast-clear:hover { filter: brightness(1.15); }
.toast-clear.out { opacity: 0; }

/* A filter button inside a search box (Contacts "Added by"; same look as the Numbers quality filter) */
.search-wrap.has-filter { position: relative; }
.search-wrap.has-filter .search { padding-right: 46px; }
.search-wrap.has-filter:has(.num-filter.on) .search { padding-right: 150px; }
.search-wrap.has-filter .num-filter svg { position: static; margin: 0; color: currentColor; pointer-events: none; }
/* Contacts search keeps one width, filter on or off, so the tag chips don't shift. */
.ct-bar .search-wrap.has-filter { width: 230px; }
.ct-bar .search-wrap.has-filter .search { width: 100%; }
.ct-bar .search-wrap.has-filter:has(.num-filter.on) .search { padding-right: 132px; }
.ct-bar .search-wrap.has-filter .num-filter-lbl { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .ct-bar .search-wrap.has-filter { width: 100%; } }

/* Contacts sort: a compact button instead of "Sort" + a dropdown */
.ct-sortbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 600 13px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.ct-sortbtn span { color: var(--text); }
.ct-sortbtn:hover { background: var(--sunk); }
.ct-sortbtn svg:last-child { opacity: 0.6; }

/* Choice menus: a check column, the chosen item in bold */
.sg-menu-pop.choice > button { justify-content: flex-start; gap: 8px; padding-left: 6px; }
.sg-menu-pop.choice > button > span { flex: 1; }
.sg-menu-pop .mi-check { width: 18px; flex: none; display: grid; place-items: center; color: var(--text); }
.sg-menu-pop > button.on > span { font-weight: 600; }

/* The AI sphere on an auto-added contact's photo */
.ct-av { position: relative; }
.ct-av-ai { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); color: var(--violet); box-shadow: 0 0 0 1.5px var(--surface), 0 1px 3px rgba(0, 0, 0, 0.18); }
.ct-av.lg .ct-av-ai { width: 24px; height: 24px; right: -1px; bottom: -1px; }
.ct-av.xl .ct-av-ai { width: 28px; height: 28px; right: 0; bottom: 0; }
.ct-av-ai svg.orb-icon { display: block; }

/* Inbox: the "via" number's photo on the person's photo */
.ib-av { position: relative; }
.ib-av-via { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(0, 0, 0, 0.2); }
.ib-av-via .sender-photo { width: 100%; height: 100%; font-size: 9.5px; }
.ib-conv.active .ib-av-via { box-shadow: 0 0 0 2px var(--sunk), 0 1px 3px rgba(0, 0, 0, 0.2); }
.ib-head .ib-av-via { width: 18px; height: 18px; }

/* Pictures in dropdowns: a number's photo (or letter) before its name */
.ss-opt.has-av { justify-content: flex-start; gap: 10px; }
.ss-opt.has-av > span:not(.ss-av) { flex: 1; }
.ss-av { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font: 700 11px Inter, sans-serif; }
.ss-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-av:has(svg) { background: var(--sunk); color: var(--muted); }
/* …and on the closed filter: the selected number's photo inside the box */
.sel-pic { position: relative; flex: 1; min-width: 0; display: flex; }
.sel-pic > select { flex: 1; min-width: 0; padding-left: 40px; }
.sel-pic-av { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; pointer-events: none; z-index: 1; display: grid; place-items: center; }
.sel-pic-av .sender-photo { width: 100%; height: 100%; font-size: 10px; }
.sel-pic-av.all { color: var(--muted); }
.ss-count { flex: none; color: var(--faint); font-size: 12px; font-weight: 500; }

/* One look for "selected" in every list: a check in a left column, the chosen item in bold
   (dropdowns, suggestion lists, the workspace switcher, the country picker, the filter menus). */
.ss-opt { justify-content: flex-start; gap: 8px; padding-left: 6px; }
.ss-opt > span:not(.ss-av) { flex: 1; min-width: 0; }
.ss-check { width: 18px; flex: none; display: grid; place-items: center; color: var(--text); }
.ss-check:empty { visibility: hidden; }
.ss-opt.on > span:not(.ss-av), .cc-opt.on .cc-name, .acct-pop-item.ws-item.on > span { font-weight: 600; }
.ss-opt.on { background: none; }
.ss-opt.on:hover, .ss-opt.on:focus-visible { background: var(--sunk); }
.cc-opt { padding-left: 6px; gap: 8px; }
.cc-opt.on { background: none; font-weight: 400; }
.cc-opt.on:hover, .cc-opt.on:focus-visible { background: var(--sunk); }
.acct-pop-item.ws-item { padding-left: 6px; gap: 8px; }
.acct-pop-item.ws-item .ss-check svg { color: var(--text); }

/* The campaign you came back from, briefly highlighted in the list */
.cp-back-hl { animation: cp-back-hl 1.6s ease-out; }
@keyframes cp-back-hl { 0%, 35% { outline: 3px solid var(--ring); outline-offset: 3px; } 100% { outline: 3px solid transparent; outline-offset: 3px; } }
tr.cp-back-hl { animation: cp-back-hl-row 1.6s ease-out; }
@keyframes cp-back-hl-row { 0%, 30% { background: var(--accent-soft); } 100% { background: transparent; } }

/* Scheduled / sending campaigns at the top of Campaigns */
.cp-pinned .cp-pin { grid-template-columns: 52px minmax(0, 1.4fr) minmax(170px, 1fr) minmax(170px, 1fr) auto; gap: 18px; padding: 14px 16px; }
.cp-pin-folder { width: 52px; height: 42px; display: grid; place-items: center; }
.cp-pin-folder svg { width: 52px; height: 42px; overflow: visible; filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--c) 25%, transparent)); }
.cp-pin-folder .f-back { fill: color-mix(in srgb, var(--c) 70%, var(--surface)); }
.cp-pin-folder .f-paper { fill: var(--surface); }
.cp-pin-folder .f-front { fill: color-mix(in srgb, var(--c) 45%, var(--surface)); }
.cp-pinned .cp-pin-main { gap: 3px; }
.cp-pinned .cp-pin-main > b { font-size: 15px; }
.cp-pinned .cp-pin-state { gap: 6px; font-size: 10.5px; }
.cp-pinned .cp-pin-state .pill { height: 18px; font-size: 10px; letter-spacing: 0; text-transform: none; }
.cp-pin-sub { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.cp-pin-sub > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-pin-who { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; row-gap: 4px; min-width: 0; }
.cp-pin-who > b { font-size: 18px; font-variant-numeric: tabular-nums; }
.cp-pin-who > span { font-size: 12.5px; color: var(--muted); }
.cp-pin-faces { grid-column: 1 / -1; display: inline-flex; align-items: center; min-width: 0; font-size: 12px; color: var(--muted); }
.cp-pin-faces .sender-photo { width: 20px; height: 20px; font-size: 9px; box-shadow: 0 0 0 2px var(--surface); }
.cp-pin-faces .sender-photo + .sender-photo { margin-left: -6px; }
.cp-pin-faces > span:last-child { margin-left: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-pinned .cp-pin-when b { font-size: 15px; }
.cp-pin-acts { display: flex; align-items: center; gap: 6px; }
@media (max-width: 1100px) {
  .cp-pinned .cp-pin { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .cp-pinned .cp-pin-who, .cp-pinned .cp-pin-when, .cp-pinned .cp-pin-progress { grid-column: 2; }
  .cp-pinned .cp-pin-acts { grid-column: 3; grid-row: 1; }
}

/* "Send this campaign now?" summary */
.sn-sum { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 12px; border-radius: 12px; background: var(--sunk); }
.sn-sum b { display: block; color: var(--text); font-size: 14.5px; }
.sn-sum span { font-size: 12.5px; color: var(--muted); }
.sn-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 12px; font-size: 13.5px; color: var(--text); }
.sn-facts dt { color: var(--muted); }
.sn-facts dd { margin: 0; }
.sn-facts .muted { color: var(--muted); }
.sn-from { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.sn-from > span { display: inline-flex; align-items: center; gap: 6px; }
.sn-from .sender-photo { width: 20px; height: 20px; font-size: 9px; }
.sn-note { margin: 0; font-size: 12.5px; color: var(--muted); }

/* The sticky date pill stays above the messages scrolling under it (bubbles are layered for swipe-to-reply). */
.ib-msgs .ib-day { z-index: 5; }
/* Scheduled and sending campaign cards: no coloured left edge */
.cp-pinned .cp-pin, .cp-pinned .cp-pin.is-live { box-shadow: var(--sh-card); }

/* Settings → Read receipts */
.rr-row { align-items: center; gap: 16px; flex-wrap: wrap; }
.rr-row > div:first-child { flex: 1 1 220px; min-width: 0; }
.rr-row .seg { flex: none; }

/* Read receipts: animated double ticks (draw in; blue on open, grey → blue on reply, grey when off) */
.rr-title { display: inline-flex; align-items: center; gap: 4px; }
.rr-ticks { display: inline-grid; place-items: center; width: 20px; height: 18px; margin-left: -2px; }
.rr-ticks svg { overflow: visible; }
.rr-ticks path { fill: none; stroke: var(--faint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 0; transition: stroke 0.3s; }
.rr-ticks.play path { animation: rr-draw 0.45s cubic-bezier(0.3, 0.9, 0.4, 1) both; }
.rr-ticks.play .t2 { animation-delay: 0.18s; }
.rr-ticks.mode-open path { stroke: #34b7f1; }
.rr-ticks.mode-open.play path { animation: rr-draw 0.45s cubic-bezier(0.3, 0.9, 0.4, 1) both, rr-pop 0.35s 0.55s ease-out; }
.rr-ticks.mode-reply.play path { animation: rr-draw 0.45s cubic-bezier(0.3, 0.9, 0.4, 1) both, rr-blue 0.4s 1s ease-out forwards; }
.rr-ticks.mode-reply.play .t2 { animation-delay: 0.18s, 1.05s; }
.rr-ticks.mode-off path { stroke: var(--faint); }
@keyframes rr-draw { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
@keyframes rr-blue { to { stroke: #34b7f1; } }
@keyframes rr-pop { 50% { transform: scale(1.12); } }
.rr-ticks.mode-open.play svg { animation: rr-pop 0.35s 0.6s ease-out; transform-origin: center; }
.rr-ticks.mode-open.play path { animation: rr-draw 0.45s cubic-bezier(0.3, 0.9, 0.4, 1) both; }
.rr-ticks.mode-open.play .t2 { animation-delay: 0.18s; }
/* Hovering the setting plays it again */
.rr-row:hover .rr-ticks.mode-reply path { animation: rr-draw 0.45s both, rr-blue 0.4s 0.8s forwards; }
@media (prefers-reduced-motion: reduce) { .rr-ticks path, .rr-ticks svg { animation: none !important; } .rr-ticks.mode-reply path { stroke: #34b7f1; } }

/* Settings → Webhook status */
.wh-status { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 14px; }
.wh-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wh-sub { font-size: 13px; color: var(--muted); }
.wh-evs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wh-ev { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--sunk); }
.wh-ev b { font-size: 13px; font-weight: 600; }
.wh-ev > span:last-child { grid-column: 2; font-size: 12px; color: var(--muted); }
.wh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.wh-dot.on { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.wh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text); }
.wh-steps li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.45; }
.wh-steps li i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--hair); color: #fff; }
.wh-steps li.done i { background: var(--good); box-shadow: none; }
.wh-steps li.done { color: var(--muted); }
@media (max-width: 640px) { .wh-evs { grid-template-columns: 1fr; } }
.wh-steps li > span { flex: 1; min-width: 0; } .wh-steps code { white-space: nowrap; }

/* ⓘ next to a setting: a short explanation on hover or keyboard focus */
.lbl-row { display: inline-flex; align-items: center; gap: 5px; }
.info-tip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; vertical-align: middle; color: var(--faint); cursor: help; border-radius: 50%; font-weight: 400; }
.info-tip:hover, .info-tip:focus-visible { color: var(--text); outline: 0; }
.info-tip:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.tip-card {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: -14px; width: 300px; display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px; border-radius: 10px; background: #1c1f22; color: #c9ced3; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font: 400 12.5px/1.5 var(--font-ui, Inter, system-ui, sans-serif); text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; cursor: default;
  opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; pointer-events: none;
}
.tip-card::before { content: ''; position: absolute; top: -5px; left: 18px; width: 10px; height: 10px; background: #1c1f22; border-radius: 2px; rotate: 45deg; }
.tip-card > b { color: #fff; font-size: 13px; font-weight: 600; }
.tip-card b { color: #fff; font-weight: 600; }
.tip-card code { padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: #fff; font: 600 11.5px ui-monospace, Menlo, monospace; }
.info-tip:hover .tip-card, .info-tip:focus-visible .tip-card, .info-tip:focus .tip-card { opacity: 1; visibility: visible; transform: none; } /* never catches the mouse, so it can't cover the next ⓘ */
/* Tips near the right edge of a card open leftward */
.set-row label:last-child .tip-card, .rr-row .tip-card { left: auto; right: -14px; }
.set-row label:last-child .tip-card::before { left: auto; right: 18px; }

/* Settings: Graph API version close to retirement */
.gv-warn { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.gv-warn.warn { background: var(--warn-soft); color: var(--warn); }
.gv-warn.bad { background: var(--danger-soft); color: var(--danger); }
.gv-warn > span { flex: 1 1 160px; }
.gv-fix { border: 0; padding: 4px 10px; border-radius: 99px; background: var(--surface); color: var(--text); font: 600 12px Inter, sans-serif; cursor: pointer; box-shadow: var(--sh-raised); }

/* Admin: Meta API version */
.gv-admin { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-top: 10px; }
.gv-list { flex: 1 1 360px; display: flex; flex-direction: column; gap: 8px; }
.gv-item { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: var(--sunk); font-size: 13px; }
.gv-item > b { font: 600 13.5px ui-monospace, Menlo, monospace; }
.gv-item .muted { color: var(--muted); }
.gv-names { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.gv-form { display: flex; gap: 8px; }
.gv-form input { width: 100px; margin: 0; }
.gv-item > b .pill { margin-left: 6px; font-family: Inter, sans-serif; vertical-align: 1px; }

/* ================= Admin page ================= */
.adm { max-width: 1360px; gap: 22px; padding: 28px 28px 56px; }
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.adm-title { display: flex; align-items: center; gap: 14px; }
.adm-logo { width: 40px; height: 40px; border-radius: 11px; box-shadow: var(--sh-raised); }
.adm-title h1 { margin: 0; font-size: 24px; letter-spacing: -0.01em; }
.adm-title .sub { margin: 2px 0 0; }
.adm-head .btn svg.la { margin-right: 2px; }

.adm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.adm-kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.adm-kpi-ic { position: absolute; right: 16px; top: 16px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--sunk); color: var(--muted); }
.adm-kpi-l { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.adm-kpi b { margin-top: 6px; font-size: 28px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.adm-kpi-s { font-size: 12.5px; color: var(--muted); }
.adm-kpi.warn .adm-kpi-ic { background: var(--warn-soft); color: var(--warn); }
.adm-kpi.bad .adm-kpi-ic { background: var(--danger-soft); color: var(--danger); }
.adm-kpi.bad b { color: var(--danger); }

.adm-attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; }
.adm-panel { padding: 18px 20px; }
.adm-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.adm-panel-h h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.adm-panel #repList, .adm-panel #delList { max-height: 420px; overflow-y: auto; }

.adm-gv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 14px 18px; }
.adm-gv-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--good-soft); color: var(--good-text); }
.adm-gv-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-gv-main b { font-size: 14.5px; }
.adm-gv-main code, .gv-chip code { padding: 1px 6px; border-radius: 5px; background: var(--sunk); font: 600 12.5px ui-monospace, Menlo, monospace; }
.adm-gv-main .sub { margin: 0; font-size: 12.5px; }
.adm-gv-act .gv-form { display: flex; gap: 6px; }
.adm-gv-act .gv-form input { width: 92px; height: 32px; margin: 0; }
.adm-gv-split { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.gv-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: var(--sunk); font-size: 12.5px; color: var(--muted); }

.adm-ws { display: flex; flex-direction: column; gap: 12px; }
.adm-ws-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adm-ws-h h2 { margin: 0; font-size: 17px; }
.adm-ws-h h2 .opt { font-weight: 500; }
.adm-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm .adm-tools .search { width: 280px; }
.adm-table-card { padding: 0; overflow: hidden; }
.adm-table th { white-space: nowrap; }
.adm-table td { vertical-align: middle; }
.adm-table tr.is-suspended td > * { opacity: 0.55; }
.adm-table tr.is-suspended td.adm-st > * { opacity: 1; }
.adm-wsc { display: flex; align-items: center; gap: 11px; min-width: 0; max-width: 260px; }
.adm-av { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 650; font-size: 14px; color: var(--av); background: color-mix(in srgb, var(--av) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av) 22%, transparent); }
.adm-av.sm { width: 24px; height: 24px; border-radius: 50%; font-size: 10.5px; box-shadow: 0 0 0 2px var(--surface); }
.adm-wsn { display: flex; flex-direction: column; min-width: 0; }
.adm-wsn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.adm-wsn > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.adm-wsn .tag { height: 17px; padding: 0 6px; font-size: 10.5px; }
.adm-wsn .tag::before { display: none; }
.adm-people { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 240px; }
.adm-avs { display: inline-flex; flex: none; }
.adm-avs .adm-av + .adm-av { margin-left: -6px; }
.adm-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.adm-fail { display: grid; grid-template-columns: 54px auto auto; align-items: center; gap: 8px; white-space: nowrap; font-size: 12.5px; }
.adm-fail b { font-variant-numeric: tabular-nums; }
.adm-bar { height: 6px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.adm-bar i { display: block; height: 100%; border-radius: 99px; background: var(--good); }
.adm-fail.warn .adm-bar i { background: #d99a00; } .adm-fail.warn b { color: var(--warn); }
.adm-fail.bad .adm-bar i { background: var(--danger); } .adm-fail.bad b { color: var(--danger); }
.adm-limit { position: relative; display: inline-flex; align-items: center; margin: 0; }
.adm-limit input { width: 116px; height: 32px; margin: 0; font-variant-numeric: tabular-nums; }
.adm-st { text-align: right; white-space: nowrap; }
.adm-st .tag { margin-right: 6px; }
.adm-hint { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 3px; border-radius: 50%; background: var(--sunk); color: var(--muted); font-size: 10px; cursor: help; vertical-align: 1px; }
@media (max-width: 1000px) { .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-attn { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .adm { padding: 18px 16px 40px; } .adm-kpis { grid-template-columns: 1fr; } .adm .adm-tools .search { width: 100%; } .adm-gv { grid-template-columns: auto 1fr; } .adm-gv-act { grid-column: 1 / -1; } }
.adm-table th.num, .adm-table td.num { text-align: right; }
.adm-table th.num + th:not(.num), .adm-table td.num + td:not(.num) { padding-left: 24px; }
.adm-limit input { width: 84px; }
/* Reported issues: compact rows */
.adm-rep { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.adm-rep:first-child { border-top: 0; }
.adm-rep.done { opacity: 0.6; }
.adm-rep-main { flex: 1; min-width: 0; }
.adm-rep-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.adm-rep-t code { padding: 0 6px; border-radius: 5px; background: var(--sunk); font: 600 11.5px ui-monospace, Menlo, monospace; }
.adm-rep-t .muted { font-size: 12.5px; color: var(--muted); }
.adm-rep p { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.adm-rep-act { display: flex; gap: 6px; flex: none; }
.adm-more { margin-top: 8px; border: 0; padding: 0; background: none; color: var(--muted); font: 600 12.5px Inter, sans-serif; cursor: pointer; }
.adm-more:hover { color: var(--text); }

/* Workspace & team merged: the current workspace's row shows its team on the right */
.ws-row.current { background: var(--sunk); }
.ws-team-slot { display: flex; justify-content: flex-end; min-width: 0; }
.ws-team { display: flex; align-items: center; gap: 8px; }
.ws-team-l { display: none; }
.ws-team .tm-row { padding: 0; gap: 8px; flex-wrap: nowrap; }
.ws-team .tm-face { width: 32px; height: 32px; font-size: 11.5px; box-shadow: 0 0 0 2.5px var(--sunk); }
.ws-team .tm-stack { padding-left: 8px; }
.ws-team .tm-av { margin-left: -8px; }
.ws-team .tm-badge { width: 14px; height: 14px; font-size: 7.5px; right: -3px; bottom: -3px; }
/* Invite: a small round + (its label shows as a tooltip) */
.ws-team .tm-add { margin-left: 2px; padding: 0; gap: 0; }
.ws-team .tm-add .tm-face { width: 30px; height: 30px; border-width: 1.5px; }
.ws-team .tm-add .tm-face svg { width: 15px; height: 15px; }
.ws-team .tm-add .tm-name { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); opacity: 0; }
.ws-team .tm-add:hover .tm-name, .ws-team .tm-add:focus-visible .tm-name { opacity: 1; transform: translate(-50%, 0); }
.ws-team .tm-av:hover .tm-pic { transform: translateY(-18%); }
/* "Current" instead of the old "You're here" pill */
.ws-cur { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; color: var(--good-text); font-weight: 600; }
.ws-cur i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent); }
#wsList > .ws-team { display: none; }
.ws-who .ws-cur { color: var(--good-text); font-weight: 600; }
.ws-row.current .ws-team-slot { padding-right: 6px; }
.ws-team .tm-add .tm-face { border-color: color-mix(in srgb, var(--text) 35%, transparent); color: var(--text); }
/* Invite joins the avatar stack: a "+" face tucked under the last teammate, like a group of people plus one */
.ws-team .tm-row { gap: 0; }
.ws-team .tm-add { position: relative; z-index: 0; margin-left: -8px; }
.ws-team .tm-add .tm-face { width: 32px; height: 32px; border: 0; background: var(--surface); color: var(--muted); box-shadow: 0 0 0 2.5px var(--sunk), inset 0 0 0 1px var(--hair); transition: background 0.2s, color 0.2s, transform 0.25s; }
.ws-team .tm-add:hover .tm-face, .ws-team .tm-add:focus-visible .tm-face { background: var(--text); color: var(--surface); box-shadow: 0 0 0 2.5px var(--sunk); }
.ws-team .tm-add:hover .tm-pic { transform: none; }
.ws-team .tm-add:hover .tm-face { transform: scale(1.06); }
/* (overrides for the stacked invite) */
.ws-team .tm-add, .ws-team .tm-add:hover, .ws-team .tm-add:focus-visible { height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
.ws-team .tm-add:focus-visible .tm-face { box-shadow: 0 0 0 2.5px var(--sunk), 0 0 0 4.5px var(--ring); }
.ws-team .tm-stack { position: relative; z-index: 1; }            /* the faces sit over the "+" */
.ws-team .tm-face, .ws-team .tm-face[style*="--av-h"] { box-shadow: 0 0 0 3px var(--sunk); }   /* a clear cut-out between faces */
.ws-team .tm-add .tm-face { box-shadow: 0 0 0 3px var(--sunk), inset 0 0 0 1px var(--hair); }
.ws-team .tm-add:hover .tm-face { box-shadow: 0 0 0 3px var(--sunk); transform: scale(1.06) rotate(90deg); }
/* White rings, like a classic avatar group; "+" overlaps the last face */
.ws-team .tm-face, .ws-team .tm-face[style*="--av-h"] { box-shadow: 0 0 0 2.5px var(--surface); }
.ws-team .tm-add .tm-face { box-shadow: 0 0 0 2.5px var(--surface), inset 0 0 0 1px var(--hair); }
.ws-team .tm-add:hover .tm-face, .ws-team .tm-add:focus-visible .tm-face { box-shadow: 0 0 0 2.5px var(--surface); }
.ws-team .tm-badge { box-shadow: 0 0 0 1.5px var(--surface); }
.ws-team .tm-add { margin-left: -17px; } /* the last face's button is ~9px wider than the face; this nets an 8px overlap */

/* Team window (invite + everyone with their role) */
.modal-box.tmm-box { width: min(460px, calc(100vw - 32px)); }
.tmm-add { display: flex; gap: 8px; margin: 2px 0 6px; }
.tmm-add input { flex: 1; min-width: 0; height: 42px; margin: 0; border-radius: 99px; padding: 0 16px; }
.tmm-addbtn { height: 42px; padding: 0 20px; border-radius: 99px; flex: none; transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s; }
.tmm-addbtn:disabled { opacity: 1; color: var(--faint); cursor: default; }
.tmm-addbtn.ready { background: var(--text); color: var(--surface); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--text) 50%, transparent); }
.tmm-addbtn.ready:active { transform: scale(0.97); }
.tmm-hint { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.tmm-out { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -2px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--good-soft); color: var(--good-text); font-size: 13px; }
.tmm-out > span { flex: 1; }
.tmm-link { flex-basis: 100%; display: flex; gap: 6px; }
.tmm-link input { flex: 1; height: 32px; margin: 0; font-size: 12px; }
.tmm-list { display: flex; flex-direction: column; margin: 0 -8px; max-height: min(52vh, 440px); overflow-y: auto; border-top: 1px solid var(--hair); padding-top: 6px; }
.tmm-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 10px; }
.tmm-row:hover { background: var(--sunk); }
.tmm-row .tm-face { width: 40px; height: 40px; box-shadow: none; font-size: 13px; }
.tmm-row.invited .tm-face { opacity: 0.6; }
.tmm-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tmm-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.tmm-who b .muted { font-weight: 400; color: var(--muted); }
.tmm-who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.tmm-role { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 13px Inter, sans-serif; cursor: pointer; }
.tmm-role:hover, .tmm-role[aria-expanded="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-raised); }
.tmm-role.static { cursor: default; padding-right: 10px; }
.tmm-role.static:hover { background: none; box-shadow: none; color: var(--muted); }
.tmm-row.invited .tmm-role { color: var(--warn); }
/* Team window alignment: one height and shape for the field and the button, edges lined up */
.tmm-add input:not([type="checkbox"]) { height: 44px; margin: 0; padding: 0 16px; border-radius: 12px; }
.tmm-addbtn { height: 44px; min-width: 76px; padding: 0 18px; border-radius: 12px; box-shadow: none; }
.tmm-addbtn:not(.ready) { background: var(--sunk); box-shadow: inset 0 0 0 1px var(--hair); }
.tmm-addbtn.ready { box-shadow: none; }
.tmm-hint { margin: 8px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.tmm-out { margin: 0 0 14px; }
.tmm-list { border-top: 0; padding-top: 0; }
.tmm-role { margin-right: 0; } /* a clear gap to the row's edge (the row has 8px padding) */

/* Edit your account: the profile photo */
.ae-photo { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; padding: 12px; border-radius: 12px; background: var(--sunk); }
.ae-photo .acct-av.lg { width: 56px; height: 56px; font-size: 18px; }
.ae-photo-act { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ae-photo-act .sub { margin: 0 0 6px; font-size: 12px; }
.ae-photo-act label.btn { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* Team window: which numbers a member works with */
.nums-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; height: 22px; padding: 0 7px; border: 0; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); color: var(--muted); font: 500 11.5px Inter, sans-serif; cursor: pointer; }
.nums-chip:hover { color: var(--text); }
.nums-chip.static { cursor: default; background: none; }
.nc-faces { display: inline-flex; }
.nc-faces .sender-photo { width: 15px; height: 15px; font-size: 7px; box-shadow: 0 0 0 1.5px var(--surface); }
.nc-faces .sender-photo + .sender-photo { margin-left: -4px; }
.np-pop { width: 320px; padding: 14px; }
.np { display: flex; flex-direction: column; gap: 10px; }
.np-h b { display: block; font-size: 14px; }
.np-h span { font-size: 12.5px; color: var(--muted); }
.np-mode { align-self: flex-start; }
.np-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; transition: opacity 0.2s; }
.np-list.off { opacity: 0.5; }
.np-row { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-weight: 400; }
.np-row:hover { background: var(--sunk); }
.np-row .sender-photo { width: 28px; height: 28px; font-size: 11px; }
.np-row span { display: flex; flex-direction: column; min-width: 0; }
.np-row b { font-size: 13px; font-weight: 600; }
.np-row small { font-size: 11.5px; color: var(--muted); }
.np-acts { display: flex; justify-content: flex-end; gap: 6px; }

/* A member limited to some numbers: owner-only controls go */
body.limited #addSender, body.limited #addTemplate, body.limited #syncTemplates, body.limited #saveSettings,
body.limited #senderList [data-edit], body.limited #senderList [data-del], body.limited #senderList [data-enable],
body.limited #templateList [data-tedit], body.limited #templateList [data-del], body.limited #setRR,
body.limited .sender-photo-btn { display: none !important; }
body.limited #demoRow .toggle { pointer-events: none; opacity: 0.5; }
.limited-note { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--sunk); color: var(--muted); font-size: 13px; line-height: 1.45; }
.limited-note svg { flex: none; margin-top: 2px; }
body.limited #senderList .sender-card .toggle { display: none !important; }

/* Number card: who can use it + settings */
.na { display: inline-flex; align-items: center; gap: 6px; }
.na-group { display: inline-flex; align-items: center; padding: 2px 4px 2px 8px; border: 0; border-radius: 99px; background: none; cursor: pointer; }
.na-group:hover { background: var(--sunk); }
.na-face { position: relative; margin-left: -8px; display: inline-grid; }
.na-face .tm-face { width: 28px; height: 28px; font-size: 10.5px; box-shadow: 0 0 0 2.5px var(--surface); }
.na-more { width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--sunk); box-shadow: 0 0 0 2.5px var(--surface); font: 600 11px Inter, sans-serif; color: var(--text); z-index: 0; }
.na-gear { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.na-gear svg { transition: transform 0.3s; }
.na-gear:hover { background: var(--sunk); color: var(--text); }
.na-gear:hover svg { transform: rotate(45deg); } /* only the gear turns; the round button stays put */
/* Number settings modal */
.nm-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px; border-radius: 12px; background: var(--sunk); }
.nm-head .sender-photo { width: 40px; height: 40px; }
.nm-head b { display: block; font-size: 14px; } .nm-head span { font-size: 12.5px; color: var(--muted); }
.nm-sec-l { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.nm-list { display: flex; flex-direction: column; margin: 0 -8px 16px; }
.nm-danger { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); }
.nm-danger > div { flex: 1; min-width: 0; }
.nm-danger b { display: block; font-size: 13.5px; color: var(--danger); }
.nm-danger span { font-size: 12px; color: var(--muted); }
.nm-tog { margin: 0; flex: none; }
.kv dd.dd-conn { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; } .kv dd.dd-conn .tag-note { margin-left: 0; overflow: hidden; text-overflow: ellipsis; }
.na-face { margin-left: -5px; } .na-face:first-child { margin-left: 0; } .na-group { padding: 2px 4px; }
.sender-card .row.tight:has(.na) { flex-wrap: nowrap; align-items: center; } .sender-card .na { flex: none; } .na-face .tm-face { width: 26px; height: 26px; font-size: 10px; }
.na-more { width: 26px; height: 26px; font-size: 10.5px; display: inline-grid; place-items: center; }
/* Invite for someone else: the two emails as tidy rows (long addresses shorten with … instead of breaking) */
.inv-who { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--sunk); }
.inv-who > span { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 10px; }
.inv-who small { font-size: 12px; color: var(--muted); }
.inv-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.inv-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.inv-acts .auth-btn { margin: 0; }
.auth-btn.auth-btn-2 { background: none; color: var(--text); box-shadow: inset 0 0 0 1px var(--hair); }
.auth-btn.auth-btn-2:hover { background: var(--sunk); }

/* Sticky page headers and their filter bars (full-bleed background so content scrolls cleanly underneath) */
:root { --stick-top: 0px; }
@media (max-width: 900px) { :root { --stick-top: calc(56px + env(safe-area-inset-top)); } }
.sticky-head {
  position: sticky; top: var(--stick-top); z-index: 25;
  margin-top: calc(-1 * var(--gut-top, 24px)); margin-left: calc(-1 * var(--gut, 28px)); margin-right: calc(-1 * var(--gut, 28px));
  padding: var(--gut-top, 24px) var(--gut, 28px) 16px; margin-bottom: 8px;
  background: var(--bg); transition: box-shadow 0.2s;
}
.sticky-bar {
  position: sticky; top: calc(var(--stick-top) + var(--head-h, 0px)); z-index: 24;
  margin-left: calc(-1 * var(--gut, 28px)) !important; margin-right: calc(-1 * var(--gut, 28px)) !important;
  padding: 8px var(--gut, 28px) 10px !important; background: var(--bg); transition: box-shadow 0.2s;
}
.sticky-head.stuck, .sticky-bar.stuck { box-shadow: 0 1px 0 var(--hair), 0 8px 16px -14px rgba(0, 0, 0, 0.35); }

/* Admin: people in a workspace / deleting an account */
button.adm-people { border: 0; background: none; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
button.adm-people:hover { background: var(--sunk); }
.adm-dlg { width: min(460px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45); }
.adm-dlg::backdrop { background: rgba(10, 12, 14, 0.4); backdrop-filter: blur(3px); }
.adm-dlg-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.adm-dlg-h b { font-size: 16px; }
.adm-dlg-h span { color: var(--muted); font-size: 13px; }
.adm-x { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 20px; cursor: pointer; }
.adm-x:hover { background: var(--sunk); color: var(--text); }
.adm-dlg-list { display: flex; flex-direction: column; margin: 0 -8px; }
.adm-person { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.adm-person:hover { background: var(--sunk); }
.adm-person > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-person b { font-size: 13.5px; font-weight: 600; }
.adm-person > div > span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-note { font-size: 12px; }
.adm-dlg .del-plan { margin: 10px 0 14px; }
.adm-confirm { display: block; font-size: 13px; font-weight: 500; }
.adm-dlg-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.sticky-bar { top: calc(var(--stick-top) + var(--head-h, 0px) - 1px); } /* tucked 1px under the header: no hairline gap */
/* The toolbar's background reaches up behind the header, so no gap between the two pinned rows can show the page
   scrolling underneath, whatever the rounding or browser zoom. (The header paints on top of it.) */
.sticky-bar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; background: var(--bg); pointer-events: none; }
/* Pinned by the stylesheet itself (not only by a class added after drawing), so a page that redraws its header
   (Campaigns refreshes every few seconds) never has a moment where it isn't pinned. */
#tab-overview > .section-head, #tab-contacts > .section-head, #tab-templates > .section-head, #tab-numbers > .section-head,
#tab-notifications > .section-head, #tab-report > .section-head, #tab-reports > .section-head, #campaignList > .section-head, #tab-settings > .section-head {
  position: sticky; top: var(--stick-top); z-index: 25;
  margin-top: calc(-1 * var(--gut-top, 24px)); margin-left: calc(-1 * var(--gut, 28px)); margin-right: calc(-1 * var(--gut, 28px));
  padding: var(--gut-top, 24px) var(--gut, 28px) 16px; margin-bottom: 8px; background: var(--bg);
}
#ovFilters, #tab-contacts .ct-bar, #tplBar, #campaignList .cp-tools, #tab-report .ec-bar, #tab-reports .list-bar, #tab-notifications .nt-bar {
  position: sticky; top: calc(var(--stick-top) + var(--head-h, 0px) - 1px); z-index: 24;
  margin-left: calc(-1 * var(--gut, 28px)) !important; margin-right: calc(-1 * var(--gut, 28px)) !important;
  padding: 8px var(--gut, 28px) 10px !important; background: var(--bg);
}
:is(#ovFilters, #tab-contacts .ct-bar, #tplBar, #campaignList .cp-tools, #tab-report .ec-bar, #tab-reports .list-bar, #tab-notifications .nt-bar)::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; background: var(--bg); pointer-events: none;
}
/* The page's soft top-to-bottom gradient is pinned to the window, and the pinned header and toolbar paint the very
   same gradient, so they blend into the page (no lighter strips beside them) wherever you've scrolled. */
body { background-attachment: fixed; }
.sticky-head, .sticky-bar, .sticky-bar::before,
#tab-overview > .section-head, #tab-contacts > .section-head, #tab-templates > .section-head, #tab-numbers > .section-head,
#tab-notifications > .section-head, #tab-report > .section-head, #tab-reports > .section-head, #campaignList > .section-head, #tab-settings > .section-head,
#ovFilters, #tab-contacts .ct-bar, #tplBar, #campaignList .cp-tools, #tab-report .ec-bar, #tab-reports .list-bar, #tab-notifications .nt-bar,
:is(#ovFilters, #tab-contacts .ct-bar, #tplBar, #campaignList .cp-tools, #tab-report .ec-bar, #tab-reports .list-bar, #tab-notifications .nt-bar)::before {
  background: var(--bg) linear-gradient(180deg, var(--bg-top) 0, var(--bg) 420px) fixed;
}
/* Contacts A–Z bar: pins below the pinned header and toolbar instead of sliding under them */
.ct-az { top: calc(var(--stick-top) + var(--head-h, 0px) + var(--bar-h, 0px) + 12px); }
/* The backing above the toolbar only exists while the toolbar is pinned under the header; at rest it would cover
   whatever sits just above the toolbar (a scheduled campaign card, the contact status tiles). */
.sticky-bar::before,
:is(#ovFilters, #tab-contacts .ct-bar, #tplBar, #campaignList .cp-tools, #tab-report .ec-bar, #tab-reports .list-bar, #tab-notifications .nt-bar)::before { display: none; }
.sticky-bar.pinned::before { display: block; }

/* Inbox: the same pinned-edge shadow as the other pages, under the list's search/filters and the chat header,
   once the list or the messages have scrolled underneath them. */
.ib-tools { position: relative; z-index: 2; transition: box-shadow 0.2s; }
.ib-head { transition: box-shadow 0.2s; }
.ib-tools.stuck, .ib-head.stuck { box-shadow: 0 1px 0 var(--hair), 0 8px 16px -14px rgba(0, 0, 0, 0.35); }

/* Team window: a member's chips (numbers, AI assistant) side by side */
.tmm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chip.on { color: var(--accent-text); background: var(--accent-soft); box-shadow: none; }
.ai-chip.on:hover { color: var(--accent-text); filter: brightness(0.97); }
.ai-chip.static.on { background: var(--accent-soft); }
/* Members given the AI assistant use it; its keys and setup stay with owners */
body.no-ai-manage .ai-settings, body.no-ai-manage .lead-settings { display: none !important; }
/* Admin: the AI switch per workspace (locked on for our own) */
.adm-ai { display: inline-flex; margin: 0; vertical-align: middle; cursor: pointer; } /* (labels get a bottom margin elsewhere) */
.adm-ai:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

/* Inbox: the doodle wallpaper. It sits on the chat panel (which never scrolls), not on the message list, so it
   stays perfectly still while the messages scroll over it, bounce included. A layer of the chat colour on top fades
   it, so it stays behind the messages: --doodle-fade is how much (higher = fainter).
   Light: chat-bg-light.webp, lines a shade darker than the background (#ebe1d5 on #f5f1eb), as in WhatsApp.
   Dark: chat-bg.png (white lines). */
:root { --doodle-fade: 50%; }
:root[data-mode="dark"] { --doodle-fade: 96%; }
.ib-chat {
  --doodle-veil: linear-gradient(color-mix(in srgb, var(--chat) var(--doodle-fade), transparent), color-mix(in srgb, var(--chat) var(--doodle-fade), transparent));
  background-image: var(--doodle-veil), url("chat-bg-light.webp");
}
:root[data-mode="dark"] .ib-chat { background-image: var(--doodle-veil), url("chat-bg.png"); }

/* ---- Inbox on phones: a compact chat header, the details in a bottom sheet, and shorter AI cards ---- */
.ib-sheet { display: none; }
@media (max-width: 900px) {
  /* Header: back, face, name, and only the small AI switch (no label); the rest is in the sheet */
  .ib-head { gap: 8px; }
  .ib-head [data-sheet-open] { cursor: pointer; }
  .ib-who { min-width: 0; }
  .ib-who b { display: flex; align-items: center; gap: 3px; }
  .ib-who b::after { content: ''; flex: none; width: 6px; height: 6px; margin: 0 0 3px 4px; border: solid var(--muted); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); } /* a small ⌄: tap for details */
  .ib-headx { flex: none; gap: 0; }
  .ib-headx > :not(.ib-ai-switch) { display: none !important; }
  .ib-ai-switch { margin: 0; }
  .ib-ai-switch > span:first-child { display: none; }
  .ib-chat > .ib-lead { display: none !important; }

  /* The sheet */
  .ib-sheet { display: block; position: fixed; inset: 0; z-index: 45; pointer-events: none; }
  .ib-sheet.open { pointer-events: auto; }
  .ib-sheet-scrim { position: absolute; inset: 0; background: rgba(10, 14, 18, 0.38); opacity: 0; transition: opacity 0.25s; }
  .ib-sheet.open .ib-sheet-scrim { opacity: 1; }
  .ib-sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
    background: var(--surface); box-shadow: 0 -16px 40px -20px rgba(0, 0, 0, 0.4);
    transform: translateY(105%); transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .ib-sheet.open .ib-sheet-panel { transform: none; }
  .ib-sheet-grab { position: sticky; top: 0; display: grid; place-items: center; height: 26px; margin: 0 -18px 4px; background: var(--surface); touch-action: none; cursor: grab; }
  .ib-sheet-grab i { width: 38px; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--text) 18%, transparent); }
  .ib-sheet-body { display: flex; flex-direction: column; gap: 16px; }
  .ibs-who { display: flex; align-items: center; gap: 12px; }
  .ibs-who .ib-av { width: 52px; height: 52px; font-size: 17px; flex: none; }
  .ibs-who div { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
  .ibs-who b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ibs-who span { font-size: 13px; color: var(--muted); }
  .ibs-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .ibs-chips .ib-window { display: inline-flex; padding: 4px 10px; }
  .ibs-lead { padding: 12px 14px; border-radius: 14px; background: var(--info-soft); font-size: 14px; }
  .ibs-lead p { margin: 0; font-weight: 500; line-height: 1.45; }
  .ibs-lead dl { margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
  .ibs-lead dl div { display: flex; gap: 10px; }
  .ibs-lead dt { flex: none; width: 70px; color: var(--info); font-weight: 600; font-size: 13px; }
  .ibs-lead dd { margin: 0; color: var(--muted); font-size: 13.5px; }
  .ibs-ai { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--sunk); cursor: pointer; margin: 0; }
  .ibs-ai > span:not(.toggle) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
  .ibs-ai .orb-icon { flex: none; }
  .ibs-ai b { font-size: 14px; }
  .ibs-ai small { font-size: 12.5px; color: var(--muted); }
  .ibs-contact { justify-content: center; height: 44px; }

  /* "Needs you": a slim note, two lines (tap to read it all) */
  .ib-ai > *, .ib-handover > div { min-width: 0; }
  .ib-handover { padding: 8px 10px; gap: 8px; font-size: 12.5px; }
  .ib-handover span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  .ib-handover span.full { display: block; }
  /* Suggested reply: a one-line heading, four lines of text (tap for the rest), one row of actions */
  .ib-draft { padding: 10px 12px; }
  .ib-draft-head { flex-wrap: nowrap; min-width: 0; white-space: nowrap; overflow: hidden; }
  .ib-draft-head > span:first-of-type { flex: none; }
  .ib-draft-head .ib-held, .ib-draft-head .warn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; }
  .ib-draft-text { margin: 4px 0 8px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  .ib-draft-text.full { display: block; }
  .ib-draft-actions { flex-wrap: nowrap; }
  .ib-draft-actions .bl { display: none; }
  .ib-draft-actions [data-ai="regen"], .ib-draft-actions [data-ai="dismiss"] { width: 34px; padding: 0; justify-content: center; }
  .ib-draft-actions [data-ai="regen"] { margin-left: auto; }
}
/* Desktop: Regenerate and Dismiss keep their words; the icons sit with them */
.ib-draft-actions [data-ai="regen"] svg, .ib-draft-actions [data-ai="dismiss"] svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .ib-sheet-panel, .ib-sheet-scrim { transition: none; } }
/* Admin: the "?" tooltip */
.adm-tip { position: fixed; z-index: 70; max-width: 260px; padding: 8px 10px; border-radius: 9px; background: #1c1f22; color: #f1f3f5; font-size: 12px; font-weight: 500; line-height: 1.45; white-space: normal; text-transform: none; letter-spacing: 0; pointer-events: none; opacity: 0; transform: translateY(-3px); transition: opacity 0.12s, transform 0.12s; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45); }
.adm-tip.on { opacity: 1; transform: none; }
.adm-hint:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* Admin: room for every column (the AI column made the table wider); smaller screens scroll it sideways */
.admin { max-width: 1480px; }
/* Inbox filters: the Templates filter sits beside the All / Unread / Can reply pills when there's room (one number,
   so no number filter); with the number filter showing, it takes its own row below. */
.ib-filters { flex-wrap: wrap; }
.ib-filters .ib-tpl-filter { flex: 1 1 120px; width: auto; min-width: 120px; }
.ib-filters:has(#ibSenderWrap:not(.hidden)) .ib-tpl-filter { flex-basis: 100%; }