/* 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: #e9e1d6;
  --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: 1px 0 0 var(--hair);
}
.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; }
.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; border-radius: var(--r-lg);
  background: transparent; transition: background 0.25s, box-shadow 0.25s, backdrop-filter 0.25s;
}
.filter-bar.stuck {
  background: var(--glass-sheen), var(--glass);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 28px -16px rgba(16, 24, 32, 0.35), var(--glass-edge);
}
@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); }
.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 { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.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; padding-right: 44px; font-variant-numeric: tabular-nums; }
.adm-limit span { position: absolute; right: 10px; font-size: 11.5px; color: var(--faint); pointer-events: none; }
.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: 104px; }
/* 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; 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 6px 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: -6px; }

/* 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: 9px; background: none; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.3s; }
.na-gear:hover { background: var(--sunk); color: var(--text); transform: rotate(45deg); }
/* 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); }