/* ==========================================================================
   Ola — le tableau de bord, and the staff console, which shares this file.

   Rebuilt from the owner's Stitch designs (stitch/dashboards/): the landing
   page's tokens, Plus Jakarta Sans, a sidebar on a wide screen and a scrolling
   strip of sections on a phone. The designs are a look, not a feature list:
   every number and button on these screens comes from a route the API has.

   Every byte is paid for by an operator on an expensive connection, so the
   budget test measures brotli bytes. The font is shared with the landing page
   and cached for a year, so it costs nothing after the first visit.

   It still follows the phone's theme: somebody working a salon at nine in the
   evening should not be handed a white rectangle.
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #faf8ff;
  --card: #ffffff;
  --low: #f2f3ff;
  --mid: #eaedff;
  --high: #e2e7ff;
  --ink: #131b2e;
  --ink-2: #3d4946;
  --muted: #6d7a77;
  --line: rgba(189, 201, 197, 0.45);
  --line-2: rgba(189, 201, 197, 0.8);
  --primary: #00685d;
  --primary-2: #008376;
  --primary-soft: rgba(0, 104, 93, 0.1);
  --primary-fixed: #8ff4e3;
  --on-fixed: #00201c;
  --gold: #904d00;
  --gold-2: #fe932c;
  --gold-soft: #ffdcc3;
  --on-gold: #2f1500;
  --rust: #bc5800;
  --live: #25d366;
  --danger: #ba1a1a;
  --danger-soft: #ffdad6;
  --warn: #904d00;
  --warn-soft: #ffdcc3;
  --ok: #00685d;
  --ok-soft: #d6f5ee;
  --out: #e8f5e9;
  --out-line: #c8e6c9;
  --dark: #283044;
  --on-dark: #eef0ff;
  --radius: 1rem;
  --radius-sm: 0.5rem;
  --ring: 0 0 0 3px rgba(37, 211, 102, 0.35);
  --lift-1: 0 1px 3px rgba(15, 23, 42, 0.06);
  --lift-2: 0 4px 12px rgba(18, 140, 126, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --lift-3: 0 12px 32px rgba(15, 23, 42, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 0.18s var(--ease);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  /* Kept for the console's inline styles. */
  --accent: var(--primary);
  --sunk: var(--low);
  --brand-2: var(--primary);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1419;
    --card: #151c24;
    --low: #1a222c;
    --mid: #202a35;
    --high: #273240;
    --ink: #e6edf5;
    --ink-2: #b6c3c1;
    --muted: #8a9896;
    --line: rgba(255, 255, 255, 0.07);
    --line-2: rgba(255, 255, 255, 0.14);
    --primary: #4fd1bf;
    --primary-2: #72d8c8;
    --primary-soft: rgba(79, 209, 191, 0.12);
    --primary-fixed: #1d4a44;
    --on-fixed: #b9f6ec;
    --gold: #ffb77d;
    --gold-2: #fe932c;
    --gold-soft: #3a2614;
    --on-gold: #ffdcc3;
    --danger: #ff8a80;
    --danger-soft: #3a1a1a;
    --warn: #ffb77d;
    --warn-soft: #3a2614;
    --ok: #4fd1bf;
    --ok-soft: #133530;
    --out: #16302a;
    --out-line: #24483f;
    --dark: #0a0f14;
    --lift-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --lift-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 24px -10px rgba(0, 0, 0, 0.7);
    --lift-3: 0 20px 50px -20px rgba(0, 0, 0, 0.85);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 15px/1.5 var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; }
h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.012em; }
h3 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
a { color: var(--primary); }
code { font-family: var(--mono); font-size: 0.9em; }
.muted { color: var(--muted); }
.grow { flex: 1; }
[hidden] { display: none !important; }
::selection { background: var(--primary-fixed); color: var(--on-fixed); }
.ic { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

/* ------------------------------------------------------------ controls */
label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); margin: 12px 0 5px; }
input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--card);
  transition: border-color var(--fast), box-shadow var(--fast);
}
textarea { min-height: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
input::placeholder, textarea::placeholder { color: var(--muted); }

button {
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 10px 16px;
  font-weight: 600;
  background: none;
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast), border-color var(--fast), color var(--fast);
}
button:active:not(:disabled) { transform: scale(0.975); }
button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--ring); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary, a.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: #fff; text-decoration: none; font-weight: 700;
  box-shadow: 0 4px 6px -1px rgba(0, 104, 93, 0.25);
}
@media (prefers-color-scheme: dark) { button.primary, a.primary { background: #0f8f80; } }
button.primary:hover:not(:disabled) { background: var(--primary-2); }
button.secondary { background: var(--card); border-color: var(--line-2); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
button.secondary:hover:not(:disabled) { background: var(--low); }
button.soft { background: var(--mid); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
button.soft:hover:not(:disabled) { background: var(--high); }
button.gold { background: var(--gold); color: #fff; display: inline-flex; align-items: center; gap: 6px; }
button.link { border: none; color: var(--primary); padding: 6px; }
button.link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
button.link.danger, button.danger { color: var(--danger); }
button.icon { border: none; font-size: 26px; line-height: 1; padding: 0 8px; }
button .ic { width: 1.1rem; height: 1.1rem; }

.error { color: var(--danger); margin: 10px 0 0; animation: shake 0.36s var(--ease); }
@keyframes shake { 25% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }
.dev { color: var(--warn); font-size: 13px; margin: 10px 0 0; }

/* --------------------------------------------------------------- logo */
/* The owner's logo: a navy tile with the name inside it, so no wordmark is set beside it. The files
   are cut from assets/logo.png by scripts/brand-assets.py. */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.logo picture { display: block; flex: none; width: 36px; height: 36px; }
.logo img { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------- login */
.login { display: grid; place-items: center; min-height: 100dvh; padding: 20px; position: relative; overflow: hidden; }
#login-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
#login-gl[data-ready] { opacity: 0.55; }
.login::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(40rem 26rem at 10% 0%, rgba(143, 244, 227, 0.35), transparent 70%),
    radial-gradient(34rem 26rem at 95% 30%, rgba(255, 220, 195, 0.4), transparent 70%),
    linear-gradient(180deg, transparent 40%, var(--bg) 96%);
}
.login .card { position: relative; z-index: 2; width: 100%; max-width: 400px; padding: 28px; box-shadow: var(--lift-3); animation: rise 0.7s var(--ease) both; }
.login .logo { margin-bottom: 18px; }
.login .logo picture { width: 56px; height: 56px; }
.login h1 { font-size: 1.5rem; margin-bottom: 6px; }
.login button.primary { width: 100%; margin-top: 14px; min-height: 46px; }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } }

/* --------------------------------------------------------------- cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--lift-1);
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head p { font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }
.ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.ico.gold { background: var(--gold-soft); color: var(--gold); }
.ico .ic { width: 22px; height: 22px; }
.title-row { display: flex; align-items: center; gap: 12px; }
.kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.cols { display: grid; gap: 16px; }
.empty { color: var(--muted); text-align: center; padding: 28px 12px; font-size: 0.875rem; }
.note { padding: 12px 14px; border-radius: 12px; background: var(--low); border: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; }
.note .ic { color: var(--primary); width: 18px; height: 18px; margin-top: 1px; }
.note.gold { background: var(--gold-soft); color: var(--on-gold); border-color: transparent; }
.note.gold .ic { color: var(--gold); }
.note.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; background: var(--mid); color: var(--ink-2); }
.pill.active, .pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.grace, .pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.suspended, .pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.trial, .pill.info { background: var(--high); color: var(--primary); }
.pill.fixed { background: var(--primary-fixed); color: var(--on-fixed); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; }
.dot.off { background: var(--muted); }
.dot.warn { background: var(--gold-2); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--card); border: 1px solid var(--line-2); color: var(--ink-2); padding: 5px 12px; font-size: 0.8125rem; border-radius: 999px; font-weight: 600; }
.chip:hover:not(.active) { background: var(--low); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 0.875rem; vertical-align: middle; }
th { color: var(--muted); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--low); }
tbody tr:hover { background: var(--low); }
td input { min-height: 38px; padding: 6px 9px; max-width: 8.5em; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.table-wrap table { min-width: 560px; }
.num { font-weight: 800; font-variant-numeric: tabular-nums; }
.grid { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.grid > button, .grid > .chips { margin-top: 12px; }
.grid > .full { grid-column: 1 / -1; }

.toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--ink); color: var(--card); padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; z-index: 30; box-shadow: var(--lift-3);
  max-width: min(92vw, 480px); text-align: center; animation: toastIn 0.42s var(--ease) both;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.94); } }
.toast.bad { background: var(--danger); color: #fff; }

/* --------------------------------------------------------------- shell */
#app { display: flex; flex-direction: column; height: 100dvh; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--card) 92%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 5;
}
.org-pill { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px; border-radius: 12px; background: var(--high); }
/* Without this the text block keeps its full width and spills out of the pill instead of clipping. */
.org-pill > div { min-width: 0; }
.org-pill strong { display: block; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-pill small { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-pill small.off { color: var(--gold); }
.org-pill select { min-height: 0; padding: 2px 6px; width: auto; max-width: 14rem; background: transparent; border: none; font-weight: 700; font-size: 0.875rem; }
.top-pill { display: none; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 12px; background: var(--low); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.top-pill code { background: var(--card); padding: 2px 7px; border-radius: 6px; font-weight: 700; }
.top-pill.gold { background: var(--gold-soft); color: var(--on-gold); border-color: transparent; }
.live { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; transition: background 0.4s var(--ease); }
/* A pulse rather than a static dot: the connection is alive now, not merely when the page loaded. */
.live.on { background: var(--live); animation: beat 2.6s var(--ease) infinite; }
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } }
.topbar a.link, .topbar button.link { font-size: 0.875rem; font-weight: 600; text-decoration: none; color: var(--ink-2); padding: 6px 8px; white-space: nowrap; }
.topbar a.link:hover, .topbar button.link:hover { color: var(--primary); }
/* A phone has room for the logo, the business, the live dot, the language switch and the way out,
   once each of them gives up a little padding. */
@media (max-width: 640px) {
  .topbar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .topbar .org-pill { padding: 6px 10px; }
  .topbar a.link, .topbar button.link { padding: 6px 4px; }
  .topbar .lang-switch button { padding: 3px 7px; }
}

.frame { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Sections. A strip across the top of a phone, a sidebar on a wide screen: one element either way. */
.side {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 8px 10px; background: var(--card); border-bottom: 1px solid var(--line);
}
.side::-webkit-scrollbar { display: none; }
.side h3 { display: none; }
.side button {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-size: 0.875rem; font-weight: 600;
}
.side button:hover:not(.active) { background: var(--low); }
.side button.active { background: var(--primary-soft); color: var(--primary); }
.side .ic { width: 20px; height: 20px; }
.side .badge { margin-left: auto; }
.side-foot { display: none; }
.badge { background: var(--primary-fixed); color: var(--on-fixed); border-radius: 999px; font-size: 0.6875rem; font-weight: 800; padding: 1px 8px; }
.badge.grey { background: var(--mid); color: var(--muted); }

.tab { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; }
.tab:not([hidden]) { animation: tabIn 0.32s var(--ease) both; }
@keyframes tabIn { from { opacity: 0; transform: translateY(7px); } }
.page { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding-bottom: 32px; }

@media (min-width: 1024px) {
  .frame { flex-direction: row; }
  .side {
    flex-direction: column; width: 256px; flex: none; overflow: auto; gap: 2px;
    padding: 20px 14px; border-bottom: none; border-right: 1px solid var(--line);
  }
  .side h3 { display: block; padding: 0 12px 10px; }
  .side button { padding: 11px 12px; font-size: 0.9375rem; }
  .side-foot { display: block; margin-top: auto; padding: 12px; border-radius: 12px; background: var(--low); font-size: 0.75rem; color: var(--ink-2); }
  .side-foot div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
  .tab { padding: 24px; }
  .top-pill { display: inline-flex; }
}

/* --------------------------------------------------------------- overview */
.hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.hero p { color: var(--ink-2); max-width: 44rem; margin-top: 8px; font-size: 0.9375rem; }
.hero-kick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.75rem; color: var(--muted); }
.hero-ctl { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--low); border: 1px solid var(--line); flex-wrap: wrap; }
.hero-ctl > span { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 700; padding: 0 8px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.kpi { display: flex; flex-direction: column; gap: 12px; transition: transform var(--fast); }
.kpi:hover { transform: translateY(-2px); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8125rem; color: var(--ink-2); font-weight: 600; }
.kpi-val { display: flex; align-items: baseline; gap: 6px; }
.kpi-val strong { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.kpi-val span { font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.kpi small { font-size: 0.75rem; color: var(--muted); }
.kpi.gold .kpi-val strong { color: var(--gold); }

.banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--gold-soft); color: var(--on-gold); flex-wrap: wrap; }
.banner > div { display: flex; align-items: center; gap: 14px; }
.banner .ico { background: var(--gold-2); color: #663500; border-radius: 50%; }
.banner b { display: block; font-size: 0.9375rem; }
.banner p { font-size: 0.8125rem; opacity: 0.85; }
.escs { display: grid; gap: 16px; }
.esc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.esc::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gold-2); }
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--high); color: var(--primary); font-weight: 800; font-size: 0.875rem; flex: none; }
.who b { display: block; }
.who small { display: block; font-size: 0.75rem; color: var(--muted); }
.quote { padding: 12px; border-radius: 12px; background: var(--low); font-size: 0.875rem; display: flex; flex-direction: column; gap: 10px; }
.quote .draft { padding: 10px 12px; border-radius: 10px; background: var(--card); box-shadow: var(--lift-1); }
.quote .draft b { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--primary); margin-bottom: 3px; }
.quote .draft b .ic { width: 15px; height: 15px; }
.quote .draft p { font-style: italic; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.cmds { display: grid; gap: 10px; }
.cmd { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--low); }
.cmd code { display: inline-block; background: var(--card); padding: 3px 9px; border-radius: 6px; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.cmd p { font-size: 0.8125rem; color: var(--ink-2); }
.steps { display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: var(--low); border: 1px solid var(--line); }
.step > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 800; flex: none; }
.step b { display: block; font-size: 0.875rem; }
.step p { font-size: 0.8125rem; color: var(--ink-2); }
.step .pill { margin-top: 4px; }
.rows { display: flex; flex-direction: column; }
.rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.rows > div:last-child { border-bottom: none; }
.rows b { font-weight: 700; }
.bar { height: 8px; border-radius: 999px; background: var(--mid); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 8px; }
.plan-price strong { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

/* ------------------------------------------------------------- inbox */
/* List, thread and customer card. One at a time on a phone, two on a tablet, three on a desktop. */
.two-pane { display: flex; padding: 0; overflow: hidden; }
.pane { overflow: auto; overscroll-behavior: contain; min-height: 0; }
.pane.list { width: 100%; background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.pane.thread { display: none; flex: 1; flex-direction: column; overflow: hidden; background: var(--low); min-width: 0; }
.pane.aside { display: none; }
#thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
body.viewing-thread .pane.list { display: none; }
body.viewing-thread .pane.thread { display: flex; }
@media (min-width: 860px) {
  .pane.list { width: 340px; flex: none; display: flex !important; }
  .pane.thread { display: flex !important; }
  #back-to-list { display: none !important; }
}
@media (min-width: 1360px) {
  .pane.aside { display: block; width: 320px; flex: none; padding: 16px; border-left: 1px solid var(--line); background: var(--bg); }
  .pane.aside .card { margin-bottom: 14px; padding: 16px; }
}
.filters { padding: 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; background: var(--card); }
.filters .chips { margin-top: 10px; }
.conversations, .contacts, .messages, .notes ul, .agenda { list-style: none; margin: 0; padding: 0; }
.conversations { flex: 1; overflow: auto; }
.conversations li {
  display: flex; gap: 12px; padding: 14px 12px; cursor: pointer;
  border-bottom: 1px solid var(--line); border-left: 3px solid transparent;
  transition: background var(--fast), border-left-color var(--fast);
}
.conversations li:hover { background: var(--low); }
.conversations li.active { background: var(--high); border-left-color: var(--primary); }
.conversations .body { flex: 1; min-width: 0; }
.conversations .line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.conversations .name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversations .when { color: var(--muted); font-size: 0.75rem; flex: none; }
.conversations .preview { color: var(--ink-2); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.conversations .tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

.thread-head { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); flex-wrap: wrap; }
.thread-head .who { flex: 1; }
.thread-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.thread-actions select { width: auto; min-height: 36px; padding: 6px 10px; font-size: 0.8125rem; }
.modes { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--low); border: 1px solid var(--line); }
.modes button { padding: 6px 10px; font-size: 0.75rem; border-radius: 8px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.modes button.active { background: var(--card); color: var(--ink); box-shadow: var(--lift-1); }
.modes button.active[data-mode="paused"] { color: var(--gold); }
.modes button.active[data-mode="auto"], .modes button.active[data-default="auto"] { color: var(--primary); }
.warning { background: var(--warn-soft); color: var(--on-gold); margin: 0; padding: 10px 16px; font-size: 0.8125rem; }

.messages { flex: 1; overflow: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.messages li {
  max-width: 78%; padding: 10px 13px; border-radius: 16px; border-top-left-radius: 4px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--lift-1);
  font-size: 0.9375rem; white-space: pre-wrap; overflow-wrap: anywhere;
  animation: inMsg 0.34s var(--ease) both;
}
@keyframes inMsg { from { opacity: 0; transform: translateY(6px) translateX(-6px) scale(0.97); } }
.messages li.out { align-self: flex-end; border-radius: 16px; border-top-right-radius: 4px; background: var(--out); border-color: var(--out-line); animation-name: outMsg; }
@keyframes outMsg { from { opacity: 0; transform: translateY(6px) translateX(6px) scale(0.97); } }
.messages li.out.ai { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.messages .by { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; color: var(--primary); margin-bottom: 3px; white-space: normal; }
.messages .by .ic { width: 14px; height: 14px; }
.messages .meta { display: block; font-size: 0.6875rem; color: var(--muted); margin-top: 5px; white-space: normal; }
/* A draft has reached nobody yet, so it must not look like a sent message. */
.messages li.draft { background: var(--gold-soft); border: 1px dashed var(--gold); align-self: flex-end; color: var(--on-gold); }
.messages li.draft .by { color: var(--gold); }
.draft-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; white-space: normal; }
.draft-actions button { padding: 5px 11px; font-size: 0.8125rem; }
.messages .failed { color: var(--danger); font-weight: 700; }

.notes { border-top: 1px solid var(--line); background: var(--card); padding: 8px 16px; }
.notes summary { cursor: pointer; color: var(--muted); font-size: 0.8125rem; padding: 4px 0; font-weight: 600; }
.notes li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.notes form { display: flex; gap: 8px; margin-top: 8px; }
.reply { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--card); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.reply textarea { resize: none; background: var(--low); }
.reply button { flex: none; min-height: 44px; }
.facts { display: flex; flex-direction: column; gap: 8px; font-size: 0.8125rem; }
.facts div { display: flex; justify-content: space-between; gap: 10px; }
.facts span { color: var(--muted); }
.facts b { text-align: right; }

/* ------------------------------------------------------------- agenda */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.datebox { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--lift-1); }
.datebox input { width: auto; min-height: 38px; border: none; font-weight: 700; background: transparent; }
.datebox button { padding: 8px 10px; }
.strip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 0.875rem; flex-wrap: wrap; }
.strip .ic { color: var(--primary); }
/* The diary as columns, one per chair or staff member, placed by time. On a phone, a list. */
.cal { display: none; }
.cal-grid { position: relative; display: grid; }
.cal-head { position: sticky; top: 0; z-index: 2; display: grid; gap: 8px; margin-bottom: 8px; }
.cal-head div { padding: 10px 12px; border-radius: 12px; background: var(--low); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-head div small { display: block; font-weight: 500; color: var(--muted); }
.cal-body { position: relative; display: grid; gap: 8px; }
.cal-hours { position: relative; }
.cal-hours span { position: absolute; left: 0; right: 0; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-align: center; transform: translateY(-50%); }
.cal-col { position: relative; border-radius: 12px; background: repeating-linear-gradient(180deg, var(--low) 0 1px, transparent 1px var(--hour, 72px)); border: 1px solid var(--line); }
.appt {
  position: absolute; left: 4px; right: 4px; overflow: hidden;
  padding: 7px 9px; border-radius: 10px; font-size: 0.75rem; line-height: 1.3;
  background: var(--primary); color: #fff; box-shadow: var(--lift-2);
}
.appt b { display: block; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt span { opacity: 0.9; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt.booked { background: var(--primary-2); }
.appt.cancelled { background: var(--mid); color: var(--muted); text-decoration: line-through; box-shadow: none; }
.appt.no_show { background: var(--gold-soft); color: var(--on-gold); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; background: var(--primary); }
.legend i.b { background: var(--primary-2); }
.legend i.c { background: var(--mid); }
.agenda li {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--lift-1); border-left: 4px solid var(--primary);
}
.agenda li.off { opacity: 0.55; border-left-color: var(--muted); }
.agenda .at { font-weight: 800; font-variant-numeric: tabular-nums; }
.agenda .what { flex: 1; min-width: 0; }
.agenda .what span { display: block; font-size: 0.8125rem; }
#booking-free:empty { display: none; }
.cal-col { background: repeating-linear-gradient(180deg, var(--line-2) 0 1px, transparent 1px var(--hour, 64px)); }
.agenda-list { margin-top: 16px; }
@media (min-width: 900px) {
  .cal { display: block; overflow-x: auto; padding-bottom: 4px; }
}
.contacts li { list-style: none; }
/* In the dark theme --primary is a light teal, so anything that puts white text on it swaps to a
   darker fill or to dark text; white on #4fd1bf is unreadable in daylight. */
@media (prefers-color-scheme: dark) {
  .appt { background: #0f8f80; }
  .appt.booked { background: #127a6e; }
  .chip.active, .step > span { color: #062a25; }
}

/* ------------------------------------------------------------ campaigns */
.shields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.shield { padding: 14px; border-radius: 12px; background: var(--low); border: 1px solid var(--line); }
.shield b { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--primary); margin-bottom: 6px; }
.shield b .ic { width: 18px; height: 18px; }
.shield p { font-size: 0.8125rem; color: var(--ink-2); }
.phone { border-radius: 28px; border: 6px solid var(--dark); overflow: hidden; background: #efeae2; box-shadow: var(--lift-3); max-width: 360px; margin: 0 auto; }
@media (prefers-color-scheme: dark) { .phone { background: #0b141a; } }
.phone-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #075e54; color: #fff; font-size: 0.8125rem; }
.phone-bar b { display: block; }
.phone-bar small { opacity: 0.8; }
.phone-body { padding: 14px; min-height: 260px; display: flex; flex-direction: column; gap: 8px; }
.bubble { align-self: flex-start; max-width: 88%; padding: 9px 11px; border-radius: 12px; border-top-left-radius: 3px; background: var(--card); font-size: 0.8125rem; white-space: pre-wrap; box-shadow: var(--lift-1); }
.bubble small { display: block; margin-top: 6px; color: var(--muted); font-size: 0.6875rem; }
.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.stats div { padding: 12px; border-radius: 12px; background: var(--low); border: 1px solid var(--line); }
.stats span { display: block; font-size: 0.6875rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stats strong { font-size: 1.375rem; font-weight: 800; }
.progress { margin: 10px 0; }

/* ------------------------------------------------------------- services */
.rule { display: flex; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--danger-soft); color: var(--ink); }
.rule .ic { color: var(--danger); width: 22px; height: 22px; }
.rule b { display: block; font-size: 0.875rem; }
.rule p { font-size: 0.8125rem; color: var(--ink-2); }
.floor-cell { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border-radius: 8px; background: var(--high); }
.dep-cell { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border-radius: 8px; background: var(--gold-soft); }
.channels { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.channel { display: flex; flex-direction: column; gap: 10px; }
.channel .title-row { justify-content: space-between; }
.channel p { font-size: 0.8125rem; color: var(--ink-2); flex: 1; }
.snippet { font-family: var(--mono); font-size: 0.75rem; padding: 10px; border-radius: 10px; background: var(--low); border: 1px solid var(--line); overflow-wrap: anywhere; }
.guarantees { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.guarantees .card { display: flex; flex-direction: column; gap: 10px; }
.guarantees p { font-size: 0.8125rem; color: var(--ink-2); }
.guarantees code { color: var(--danger); font-weight: 700; }

@media (min-width: 1024px) {
  .cols.two { grid-template-columns: 7fr 5fr; }
  .cols.half { grid-template-columns: 1fr 1fr; }
  .cols.cal-side { grid-template-columns: minmax(0, 1fr) 340px; }
  .escs { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 2rem; }
}

/* ----------------------------------------------------- provider keys */
.key-group { margin-top: 18px; }
.key-group:first-child { margin-top: 4px; }
.key { border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 10px; background: var(--card); box-shadow: var(--lift-1); transition: border-color var(--fast), box-shadow var(--fast); }
.key:focus-within { border-color: var(--primary); box-shadow: var(--lift-2); }
.key-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.key-head strong { font-weight: 700; }
.key-head code { font-size: 12px; }
.key p { margin: 6px 0 10px; font-size: 0.8125rem; }
.key-value { font-family: var(--mono); font-size: 13px; }
.key-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.key-actions .primary { padding: 8px 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------- language */
/* Hidden for the moment it takes to swap the French for English, so an English reader never sees
   a French flash. The head script lifts it on a timer even if the swap never happens. */
html.lang-pending body { opacity: 0; }
/* Drawn from currentColor, so the same switch reads on a light card and on the dark top bar. */
.lang-switch { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.lang-switch button { min-height: 0; margin: 0; padding: 3px 9px; border: 0; border-radius: 999px; background: none; color: inherit; opacity: 0.62; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; box-shadow: none; cursor: pointer; }
.lang-switch button:hover { opacity: 0.9; }
.lang-switch button[aria-pressed="true"] { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }
.card > .lang-switch { float: right; }

/* ---------------------------------------------------------------- sign-up */
.signup-cta { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-2); text-align: center; }
.signup-cta .link { padding: 4px; font-weight: 700; }
/* The message to send, big enough to check against what WhatsApp shows before pressing send. */
.signup-code { margin: 12px 0; padding: 14px; border-radius: 12px; background: var(--low); border: 1px dashed var(--line-2); font-family: var(--mono); font-size: 1.375rem; font-weight: 800; letter-spacing: 0.05em; text-align: center; user-select: all; }
#signup-wait .primary { display: flex; width: 100%; min-height: 46px; margin: 4px 0 12px; }
#signup-wait p { font-size: 0.875rem; }
#signup-wait .signup-phone { margin: 2px 0 0; text-align: center; font-size: 1rem; }
#signup .link { display: block; margin: 8px auto 0; }

/* The console's create-a-business form and the per-business number row. */
.create-org { margin-bottom: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.create-org summary { cursor: pointer; font-weight: 700; }
.create-org p { margin: 8px 0 0; }
.number-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; align-items: end; padding: 4px 0 10px; }
.number-form .primary { margin-top: 12px; }