/* ============================================================
   EzyBot — interface styles
   Palette and radius come from the theme settings (see layout head).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --primary: #128C7E;
  --accent: #25D366;
  --sidebar: #0B141A;
  --header: #075E54;
  --bubble-out: #DCF8C6;
  --radius: 12px;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-lg: calc(var(--radius) + 4px);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sp: 4px;
  --topbar-h: 58px;
  --side-w: 244px;
  --side-w-narrow: 62px;

  --bg: #F0F2F5;
  --panel: #FFFFFF;
  --panel-2: #F7F8FA;
  --ink: #111B21;
  --ink-2: #54656F;
  --ink-3: #8696A0;
  --line: #E4E7EA;
  --bubble-in: #FFFFFF;
  --canvas-bg: #EDF1F4;
  --canvas-dot: rgba(11,20,26,.13);
  --node-bg: #FFFFFF;
  --node-line: #D3DBE0;
  --node-line-strong: #B7C3CA;
  --shadow: 0 1px 1px rgba(11,20,26,.04), 0 2px 10px rgba(11,20,26,.045);
  --shadow-lg: 0 12px 34px rgba(11,20,26,.13);
  --ok: #1DA363;
  --warn: #B98900;
  --bad: #DC3545;
  --info: #0B84C4;
  --blue-tick: #53BDEB;
}

[data-theme="dark"] {
  --bg: #0B141A;
  --panel: #111B21;
  --panel-2: #182229;
  --ink: #E9EDEF;
  --ink-2: #AEBAC1;
  --ink-3: #8696A0;
  --line: #222E35;
  --bubble-in: #202C33;
  --bubble-out: #005C4B;
  --shadow: 0 1px 2px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.5);
  /* The canvas sits darker than the cards on it, so the cards read as objects
     lying on a surface. Reusing panel and panel-2 here left the two within a
     few per cent of each other and the steps nearly vanished. */
  --canvas-bg: #060B0E;          /* darker than any panel, so cards sit on top of it */
  --canvas-dot: rgba(233,237,239,.11);
  --node-bg: #2A3842;            /* 1.64:1 against the canvas — cards read as objects */
  --node-line: #445764;          /* 1.6:1 against the card, so the edge is visible */
  --node-line-strong: #5E7382;
}

html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink);
  font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: 1.55rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; }
p { margin: 0 0 1rem; }
small, .small { font-size: .82rem; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------ shell */
.shell { display: flex; min-height: 100dvh; }

.sidebar {
  width: var(--side-w); flex: 0 0 var(--side-w); background: var(--sidebar); color: #D5DDE3;
  display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 60;
  transition: transform .22s ease;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.07); min-height: 72px;
}
.sidebar-brand img { max-height: 40px; max-width: 150px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; background: var(--accent);
  display: grid; place-items: center; color: #08231a; font-weight: 700; flex: none;
}
.brand-name { font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
.sidebar-scroll {
  overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 24px;
  flex: 1 1 auto; min-height: 0;      /* without this a long menu overflows instead of scrolling */

  /* Firefox. Its two properties are all it offers, and it ignores the
     ::-webkit- rules below entirely, so both have to be written. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}

/* The scrollbar itself, on Chrome, Edge and Safari.
   The default is drawn for a light page: a grey track and a chunky thumb, which
   against a near-black sidebar reads as a bright stripe down the middle of the
   window. This is the same control, sized and coloured for where it actually
   sits. */
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 3px;
  /* Fades in when there is a reason to look at it. Not display:none — a menu
     that can scroll with nothing to say so is worse than a visible bar. */
  transition: background .18s ease;
}
.sidebar-scroll:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.26); }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.38); }
.sidebar-scroll:hover { scrollbar-color: rgba(255,255,255,.26) transparent; }

/* The rail is 62px wide; a 6px bar inside it is a tenth of the width. It is
   hidden there and the menu still scrolls by wheel and by touch. */
body.side-narrow .sidebar:not(:hover) .sidebar-scroll { scrollbar-width: none; }
body.side-narrow .sidebar:not(:hover) .sidebar-scroll::-webkit-scrollbar { width: 0; }

/* Everything else that scrolls inside a panel, so one thin bar is not
   surrounded by half a dozen fat ones.

   This list was built by searching the stylesheet for the selectors that
   actually declare overflow-y, not from memory — two earlier attempts named
   panes that do not exist (.chat-scroll, .thread), which silently style
   nothing at all. A rule for a class no element carries is invisible in both
   directions: it never fires and it never complains. */
.conv-scroll,
.chat-body,
.contact-panel-body,
.modal-body,
.palette-list,
.canned-picker,
.help-nav,
.inspector-form,
.test-thread,
.doc-piece-body,
.suggestion-body,
.table-wrap {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink-3) 45%, transparent) transparent;
}
.conv-scroll::-webkit-scrollbar,
.chat-body::-webkit-scrollbar,
.contact-panel-body::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.palette-list::-webkit-scrollbar,
.canned-picker::-webkit-scrollbar,
.help-nav::-webkit-scrollbar,
.inspector-form::-webkit-scrollbar,
.test-thread::-webkit-scrollbar,
.doc-piece-body::-webkit-scrollbar,
.suggestion-body::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  width: 7px; height: 7px;
}
.conv-scroll::-webkit-scrollbar-track,
.chat-body::-webkit-scrollbar-track,
.contact-panel-body::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.palette-list::-webkit-scrollbar-track,
.canned-picker::-webkit-scrollbar-track,
.help-nav::-webkit-scrollbar-track,
.inspector-form::-webkit-scrollbar-track,
.test-thread::-webkit-scrollbar-track,
.doc-piece-body::-webkit-scrollbar-track,
.suggestion-body::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.conv-scroll::-webkit-scrollbar-thumb,
.chat-body::-webkit-scrollbar-thumb,
.contact-panel-body::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.palette-list::-webkit-scrollbar-thumb,
.canned-picker::-webkit-scrollbar-thumb,
.help-nav::-webkit-scrollbar-thumb,
.inspector-form::-webkit-scrollbar-thumb,
.test-thread::-webkit-scrollbar-thumb,
.doc-piece-body::-webkit-scrollbar-thumb,
.suggestion-body::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-3) 40%, transparent);
  border-radius: 4px;
  transition: background .18s ease;
}
.conv-scroll::-webkit-scrollbar-thumb:hover,
.chat-body::-webkit-scrollbar-thumb:hover,
.contact-panel-body::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.palette-list::-webkit-scrollbar-thumb:hover,
.canned-picker::-webkit-scrollbar-thumb:hover,
.help-nav::-webkit-scrollbar-thumb:hover,
.inspector-form::-webkit-scrollbar-thumb:hover,
.test-thread::-webkit-scrollbar-thumb:hover,
.doc-piece-body::-webkit-scrollbar-thumb:hover,
.suggestion-body::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink-3) 70%, transparent);
}

/* On a touch screen the bar is drawn over the content and disappears on its
   own, so widening it only steals reading width. Left alone there. */
@media (hover: none) {
  .sidebar-scroll::-webkit-scrollbar { width: 0; }
  .sidebar-scroll { scrollbar-width: none; }
}
.nav-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: #64757F; padding: 16px 10px 6px; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  color: #C9D3D9; margin-bottom: 2px; font-size: .92rem; position: relative;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-item.active {
  background: color-mix(in srgb, var(--primary) 34%, transparent); color: #fff; font-weight: 600;
}
.nav-item.active::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-item i { width: 17px; text-align: center; font-size: .95rem; opacity: .95; }
.nav-item .count {
  margin-left: auto; background: var(--accent); color: #06281d; border-radius: 20px;
  padding: 1px 7px; font-size: .7rem; font-weight: 700;
}
.sidebar-foot { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.07); font-size: .74rem; color: #64757F; }

.main { flex: 1; min-width: 0; margin-left: var(--side-w); display: flex; flex-direction: column; }

/* Drawer backdrop, only on small screens */
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(11,20,26,.5); z-index: 55;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

.topbar {
  height: var(--topbar-h); background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; padding: 0 18px; position: sticky; top: 0; z-index: 40;
}
.topbar h1 {
  font-size: 1.02rem; margin: 0; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.topbar .spacer { flex: 1; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; font-size: 1rem;
}
.icon-btn:hover { background: var(--panel-2); color: var(--ink); }
.burger { display: none; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 600; font-size: .78rem; flex: none; overflow: hidden; background: var(--primary);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 46px; height: 46px; font-size: .95rem; }

.content { padding: 24px 26px 40px; flex: 1; max-width: 1440px; width: 100%; }
.page-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head h1 { font-size: 1.4rem; margin: 0; }
.page-head .spacer { flex: 1; }
.page-head p { margin: 2px 0 0; color: var(--ink-2); font-size: .9rem; }

/* ------------------------------------------------------------ cards */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden;
}
.card-head {
  padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px;
}
.card-head h3 { margin: 0; font-size: .95rem; letter-spacing: -.005em; }
.card-head .spacer { flex: 1; }
.card-body { padding: 20px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }

.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto auto;
  column-gap: 13px; align-items: center;
}
.stat .label {
  grid-column: 2; color: var(--ink-2); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 600;
}
.stat .value { grid-column: 2; font-size: 1.7rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.stat .foot { grid-column: 2; font-size: .78rem; color: var(--ink-3); }
.stat .ico, .stat .stat-ico {
  grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; align-self: center;
  background: color-mix(in srgb, var(--primary) 11%, transparent); color: var(--primary); font-size: .95rem;
}

/* ------------------------------------------------------------ forms */
label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field { margin-bottom: 14px; }
.hint { font-size: .78rem; color: var(--ink-3); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=url], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  max-width: 100%;
  background: var(--panel); color: var(--ink); font: inherit; font-size: .92rem; transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
input[type=color] { width: 52px; height: 38px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.check { display: flex; align-items: center; gap: 9px; font-weight: 500; color: var(--ink); margin-bottom: 10px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--primary); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 200px; min-width: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--primary);
  color: #fff; font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(11,20,26,.12); transition: filter .15s, transform .08s, background .15s;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); filter: brightness(.96); }
.btn-accent { background: var(--accent); color: #06281d; }
.btn-ghost { background: var(--panel); border-color: var(--line); color: var(--ink); box-shadow: none; }
.btn-ghost:hover { background: var(--panel-2); color: var(--ink); }
.btn-danger { background: var(--bad); }
.btn-sm { padding: 6px 11px; font-size: .82rem; border-radius: 8px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th {
  text-align: left; padding: 11px 16px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); border-bottom: 1px solid var(--line); background: var(--panel-2); font-weight: 600; white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--panel-2); }
.cell-main { font-weight: 600; }
.cell-sub { font-size: .8rem; color: var(--ink-3); }
.actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.actions form { display: contents; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pill-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.pill-bad { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.pill-info { background: color-mix(in srgb, var(--info) 13%, transparent); color: var(--info); }
.pill-muted { background: var(--panel-2); color: var(--ink-3); }

.empty { text-align: center; padding: 46px 20px; color: var(--ink-2); }
.empty i { font-size: 2.1rem; color: var(--ink-3); display: block; margin-bottom: 12px; }
.empty h3 { color: var(--ink); }

/* ------------------------------------------------------------ alerts */
.alert {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 15px; border-radius: 10px;
  margin-bottom: 16px; font-size: .9rem; border: 1px solid transparent;
}
.alert i { margin-top: 2px; }
.alert-success { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.alert-error { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.alert-info { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.alert-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }

/* ------------------------------------------------------------ modal */
.modal-back {
  position: fixed; inset: 0; background: rgba(11,20,26,.55); backdrop-filter: blur(2px);
  display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto;
}
.modal-back.open { display: flex; }
.modal {
  background: var(--panel); border-radius: 14px; width: 100%; max-width: 560px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: pop .18s ease;
  display: flex; flex-direction: column; max-height: 92vh;   /* head and foot stay put, the body scrolls */
}
.modal.wide { max-width: 860px; }
@keyframes pop { from { transform: translateY(-10px) scale(.985); opacity: 0; } }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; flex: none;
}
.modal-head h3 { margin: 0; }
.modal-head .icon-btn { margin-left: auto; }
.modal-body {
  padding: 20px; overflow-y: auto; overscroll-behavior: contain;
  min-height: 0; max-height: min(70vh, 620px);   /* a long dialog scrolls rather than running off the screen */
}
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex: none;
}

/* ------------------------------------------------------------ tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tab {
  padding: 10px 15px; border-bottom: 2px solid transparent; color: var(--ink-2);
  font-weight: 600; font-size: .89rem; cursor: pointer; white-space: nowrap; background: none; border-top: 0; border-left: 0; border-right: 0; font-family: inherit;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ------------------------------------------------------------ chat */
.chat-shell {
  display: grid; grid-template-columns: 336px 1fr; flex: 1 1 auto; min-height: 0;
  background: var(--panel); border-top: 1px solid var(--line);
  /* Anchors the sliding chat pane below. Without it the pane's `inset: 0` is
     measured against the viewport and the thread rides up under the top bar. */
  position: relative;
}
/* Full-bleed pages (the inbox) never scroll the page itself */
html:has(body.no-scroll) { overflow: hidden; }
body.no-scroll { overflow: hidden; overscroll-behavior: none; }
body.no-scroll .shell { height: 100dvh; min-height: 0; overflow: hidden; }
body.no-scroll .main { height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
body.no-scroll .content { min-height: 0; display: flex; flex-direction: column; }
/* Nothing scrolls behind it, so the bar does not need to stick — and cannot overlap */
body.no-scroll .topbar { position: relative; flex: none; }
body.no-scroll .main > .alert { flex: none; margin: 8px 12px 0; }
.chat-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); }
/* The search box and the filter row never shrink.
   .chat-list is a flex column, and a flex child shrinks by default — so as the
   conversation list grew, these two were squeezed and the list rode up over
   them. The filters lost their bottom half first, which is why "All Unread
   Assigned to me" was sliced through the middle. */
.chat-search { padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
.chat-search input { background: var(--panel-2); border-radius: 20px; padding: 8px 14px; font-size: .88rem; }
.chat-filters {
  display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
  flex: none;
}
.chat-filters::-webkit-scrollbar { display: none; }
.chip {
  padding: 5px 12px; border-radius: 20px; background: var(--panel-2); color: var(--ink-2);
  font-size: .78rem; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  white-space: nowrap; flex: none; line-height: 1.4;
}
.chip.active { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.conv-scroll { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.conv {
  display: flex; gap: 12px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--line); align-items: center;
}
.conv:hover { background: var(--panel-2); }
.conv.active { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.conv-body { min-width: 0; flex: 1; }
.conv-top { display: flex; align-items: baseline; gap: 8px; }
.conv-name { font-weight: 600; font-size: .93rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-time { font-size: .72rem; color: var(--ink-3); flex: none; }
.conv-last { font-size: .82rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-badge { background: var(--accent); color: #06281d; font-size: .7rem; font-weight: 700; border-radius: 20px; padding: 1px 7px; }

.chat-main {
  /* The two heights are measured in JS and written back as variables, because a
     phone keyboard changes them and no CSS unit reports that reliably. */
  --head-h: 60px;
  --composer-h: 64px;
  min-width: 0; min-height: 0; position: relative; overflow: hidden;
  background: var(--panel);
}
.chat-main > .chat-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
}
.chat-main > .chat-body {
  position: absolute; top: var(--head-h); bottom: var(--composer-h); left: 0; right: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.chat-main > #composerBox {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--panel-2);
}
.chat-main > .chat-empty { position: absolute; inset: 0; }
.chat-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--line); background: var(--panel); min-height: 60px;
}
/* The name may shorten; nothing else may. A header that wraps to three lines
   eats the conversation it is meant to label. */
.chat-head .who {
  font-weight: 600; line-height: 1.25; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.chat-head .status {
  font-size: .78rem; color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* The name gets whatever space is left, and at least enough to be worth
   reading. It was being squeezed to "+917409…" because the buttons beside it
   took their width first. */
.chat-who { min-width: 0; flex: 1 1 auto; }
@media (max-width: 560px) {
  .chat-head { gap: 6px; }
  .chat-head .icon-btn { width: 32px; height: 32px; }
}
.chat-head #backBtn { display: none; }   /* only needed when the panes stack */
.chat-head .pill { flex: none; white-space: nowrap; }
.chat-head .assign-select {
  flex: none; max-width: 150px; padding: 5px 26px 5px 9px; font-size: .82rem;
}

@media (max-width: 900px) {
  .chat-head { gap: 8px; padding: 8px 10px; }
  /* On a narrow screen the number and channel are already known from the list
     you tapped, so the name and the reply window are what remain. */
  .chat-head .status { display: none; }
  .chat-head .assign-select { max-width: 108px; }
}
@media (max-width: 620px) {
  .chat-head .assign-select { display: none; }
}

/* The doodle wallpaper: a quiet repeating field, like WhatsApp's own */
.chat-body {
  padding: 18px max(4%, 14px) 10px; background-color: #EFE7DE;
  display: flex; flex-direction: column; align-items: flex-start;
  overscroll-behavior: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='1.4'%3E%3Ccircle cx='22' cy='26' r='7'/%3E%3Cpath d='M60 14l7 7-7 7-7-7z'/%3E%3Cpath d='M92 30c4-6 10-6 13 0'/%3E%3Cpath d='M14 70h14M21 63v14'/%3E%3Ccircle cx='58' cy='74' r='9'/%3E%3Cpath d='M96 68l9 9m0-9l-9 9'/%3E%3Cpath d='M32 104c5-8 12-8 17 0'/%3E%3Cpath d='M78 100h16v12H78z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] .chat-body { background-color: #0B141A; }
.chat-day { text-align: center; margin: 14px 0; align-self: center; }
.chat-day span {
  background: rgba(255,255,255,.9); color: #54656F; font-size: .72rem; font-weight: 600;
  padding: 4px 11px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
[data-theme="dark"] .chat-day span { background: #182229; color: var(--ink-3); }

.bubble {
  width: fit-content; max-width: min(72%, 560px); min-width: 96px;
  padding: 6px 10px 18px; border-radius: 9px; position: relative;
  margin-bottom: 4px; box-shadow: 0 1px .5px rgba(11,20,26,.13);
  font-size: .93rem; overflow-wrap: anywhere;
}
.bubble.in { background: var(--bubble-in); align-self: flex-start; border-top-left-radius: 0; }
.bubble.out {
  background: var(--bubble-out); color: var(--bubble-out-ink, #111B21);
  align-self: flex-end; border-top-right-radius: 0;
}
.bubble.in { color: #111B21; }
/* A little air between a run of incoming and a run of outgoing messages */
.bubble.in + .bubble.out, .bubble.out + .bubble.in { margin-top: 8px; }
[data-theme="dark"] .bubble.in,
[data-theme="dark"] .bubble.out { color: var(--ink); }
[data-theme="dark"] .bubble .doc { background: rgba(255,255,255,.08); }
.bubble .meta {
  position: absolute; right: 9px; bottom: 4px; font-size: .67rem; color: rgba(17,27,33,.45);
  display: flex; align-items: center; gap: 3px;
}
[data-theme="dark"] .bubble .meta { color: rgba(233,237,239,.5); }
.bubble .tick.read { color: var(--blue-tick); }
.bubble img, .bubble video { max-width: 100%; border-radius: 7px; display: block; margin-bottom: 5px; }
.msg-img {
  max-height: 320px; max-width: 100%; width: auto; height: auto; cursor: zoom-in;
  background: rgba(0,0,0,.05); object-fit: contain;
}
.msg-video { max-height: 320px; max-width: 100%; background: #000; }
.msg-audio { width: 240px; max-width: 100%; margin-bottom: 4px; }
.bubble .doc {
  display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.06);
  padding: 10px 12px; border-radius: 8px; margin-bottom: 4px; color: inherit; max-width: 260px;
}
.bubble .doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble .doc i { font-size: 1.1rem; color: var(--primary); flex: none; }

/* Full-size image viewer */
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(11,20,26,.92);
  display: grid; place-items: center; padding: 24px; animation: fade .15s ease;
}
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; }
.lightbox .icon-btn { position: absolute; top: 16px; right: 16px; color: #fff; font-size: 1.3rem; }
.lightbox .icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
@keyframes fade { from { opacity: 0; } }
.bubble .tpl-tag {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 3px;
}
.bubble.failed { border: 1px solid var(--bad); }
.bubble .err { color: var(--bad); font-size: .74rem; margin-top: 4px; }

.composer {
  flex: 0 0 auto;                  /* always visible, never squeezed out */
  border-top: 1px solid var(--line); background: var(--panel-2); display: flex; gap: 10px; align-items: flex-end;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.composer textarea {
  flex: 1; min-width: 0; min-height: 44px; max-height: 130px; border-radius: 22px;
  padding: 11px 16px; resize: none; background: var(--panel); line-height: 1.4; overflow-y: auto;
}
/* A long placeholder wrapped to a second line the box was not tall enough to
   show, so it appeared cut in half. It now stays on one line and trails off. */
.composer textarea::placeholder { white-space: nowrap; text-overflow: ellipsis; }
.composer .send { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: #fff; border: 0; cursor: pointer; flex: none; }
.window-note {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn);
  border-top: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); font-size: .85rem;
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
}
.window-note > div:first-of-type { flex: 1 1 220px; min-width: 0; }
.window-note .btn { flex: 0 0 auto; }
@media (max-width: 760px) {
  .window-note { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); font-size: .82rem; }
  .window-note .btn { width: 100%; }   /* full width beats being pushed off the edge */
}
.chat-empty { display: grid; place-items: center; min-height: 0; text-align: center; color: var(--ink-2); background: var(--panel-2); padding: 30px; }

/* 24-hour window ring — how long you can still reply freely */
.window-ring { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .6rem; font-weight: 700; color: var(--ok);
  background: conic-gradient(var(--ok) var(--pct, 100%), var(--line) 0); }
.window-ring span { width: 23px; height: 23px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; }

/* ------------------------------------------------------------ template preview card */
.phone-preview {
  background: #EFE7DE; border-radius: 16px; padding: 16px; border: 1px solid var(--line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.05'%3E%3Ccircle cx='18' cy='20' r='6'/%3E%3Cpath d='M50 12l6 6-6 6-6-6z'/%3E%3Cpath d='M10 56h12M16 50v12'/%3E%3C/g%3E%3C/svg%3E");
}
.preview-bubble {
  background: #fff; border-radius: 9px; border-top-left-radius: 0; padding: 9px 11px; box-shadow: 0 1px .5px rgba(11,20,26,.13);
  font-size: .9rem; color: #111B21; max-width: 320px;
}
.preview-bubble .hdr { font-weight: 700; margin-bottom: 5px; }
.preview-bubble .ftr { color: #667781; font-size: .76rem; margin-top: 6px; }
.preview-btn {
  border-top: 1px solid #E9EDEF; margin: 7px -11px -9px; padding: 8px; text-align: center;
  color: #027EB5; font-size: .85rem; font-weight: 500;
}

/* ------------------------------------------------------------ misc */
.progress { height: 7px; background: var(--panel-2); border-radius: 20px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); border-radius: 20px; transition: width .4s; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--ink-2); }
.copy-box {
  display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px dashed var(--line);
  border-radius: 9px; padding: 9px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; word-break: break-all;
}
.copy-box button { margin-left: auto; }
.paginate { display: flex; gap: 6px; padding: 14px 18px; align-items: center; }
.paginate a, .paginate span { padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); }
.paginate .on { background: var(--primary); color: #fff; border-color: var(--primary); }
.toast-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 10px; font-size: .88rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: slide .2s ease;
}
.toast.bad { background: var(--bad); }
@keyframes slide { from { transform: translateY(12px); opacity: 0; } }

/* ------------------------------------------------------------ auth + public */
.auth-wrap { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr; }
.auth-side {
  background: linear-gradient(160deg, var(--header), var(--primary) 60%, #0d6d61);
  color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
}
.auth-side::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='1.5'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3Cpath d='M80 22l9 9-9 9-9-9z'/%3E%3Cpath d='M24 96h18M33 87v18'/%3E%3Ccircle cx='95' cy='95' r='13'/%3E%3C/g%3E%3C/svg%3E");
}
.auth-side > * { position: relative; z-index: 1; }
.auth-side h2 { font-size: 2rem; max-width: 15ch; }
.auth-side ul { list-style: none; padding: 0; margin: 24px 0 0; }
.auth-side li { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; opacity: .93; }
.auth-side li i { color: var(--accent); }
.auth-main { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }

/* The public nav and hero are defined with the rest of the public site, near
   the end of this file. Only the pricing cards remain here. */
.price-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.price-card.feature { border-color: var(--primary); box-shadow: 0 10px 40px color-mix(in srgb, var(--primary) 18%, transparent); }
.price-card .amount { font-size: 2.1rem; font-weight: 650; letter-spacing: -.02em; }
.price-card ul { list-style: none; padding: 0; margin: 14px 0 0; font-size: .9rem; }
.price-card li { padding: 5px 0; display: flex; gap: 8px; }
.price-card li i { color: var(--accent); }

/* ------------------------------------------------------------ responsive
   Three steps: desk (>1100), tablet (<=1100), phone (<=760). Every fixed width
   above is expressed in tokens so only the layout changes here, not the look.
   ------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  :root { --side-w: 224px; }
  .content { padding: 20px 20px 36px; }
  .chat-shell { grid-template-columns: 300px 1fr; }
}

@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1, .g-1-2, .g3 { grid-template-columns: 1fr; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
}

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); width: 280px; flex-basis: 280px; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .main { margin-left: 0; }
  .burger { display: grid; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .chat-shell { grid-template-columns: 1fr; }
  .chat-shell {
    position: fixed; top: var(--chat-top, 58px); left: 0; right: 0; bottom: 0;
    height: auto; z-index: 20;
  }
  .chat-main {
    position: absolute; inset: 0;                 /* relative to .chat-shell */
    background: var(--panel); z-index: 1;
    transform: translateX(100%); transition: transform .22s ease;
  }
  /* Slightly taller defaults on a phone: the header wraps to three lines and the
     composer clears the home indicator. Used until JS measures the real sizes. */
  .chat-main { --head-h: 76px; --composer-h: 72px; }
  .chat-main.show { transform: none; }
}

@media (max-width: 760px) {
  .content { padding: 14px 14px 32px; }
  .topbar { padding: 0 12px; gap: 6px; }
  .topbar h1 { font-size: .98rem; }

  /* Page headers stack, and their controls become a full-width row */
  .page-head { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 14px; }
  .page-head .spacer { display: none; }
  .page-head h1 { font-size: 1.25rem; }
  .page-head > form, .page-head > .btn, .page-head > a.btn, .page-head > input, .page-head > select {
    width: 100%;
  }
  .page-head > form { display: flex; gap: 8px; }
  .page-head > form > * { flex: 1; }

  /* Two stats side by side reads better than one giant card per row */
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 13px 14px; grid-template-columns: 34px 1fr; column-gap: 10px; }
  .stat .ico, .stat .stat-ico { width: 34px; height: 34px; border-radius: 10px; font-size: .85rem; }
  .stat .value { font-size: 1.35rem; }
  .stat .label { font-size: .68rem; }

  .grid { gap: 12px; }
  .card { border-radius: var(--radius); margin-bottom: 12px; }
  .card-head, .card-body { padding: 14px; }
  .row { gap: 10px; }
  .row > * { flex-basis: 100%; }

  table.data { font-size: .86rem; }
  table.data th, table.data td { padding: 10px 12px; }
  .actions { justify-content: flex-start; }

  /* Modals become bottom sheets — reachable with a thumb */
  .modal-back { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92dvh; display: flex; flex-direction: column; animation: sheet .2s ease;
  }
  .modal-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; max-height: min(70vh, 640px); }
  .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; }
  @keyframes sheet { from { transform: translateY(24px); opacity: .6; } }

  .chat-body { padding: 12px 10px 8px; }
  .bubble { max-width: 84%; font-size: .92rem; }
  .msg-img { max-height: 240px; }
  .chat-head { padding: 8px 10px; gap: 9px; min-height: 54px; }
  .chat-head #backBtn { display: grid; }
  .chat-head .pill { font-size: .68rem; padding: 3px 7px; }
  .chat-head .status { font-size: .72rem; }
  .composer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 6px; }
  .composer .send { width: 42px; height: 42px; }

  /* Two rows on a phone. Five tool buttons and a 42px send button take about
     250px of a 360px screen, which left the message box showing "Type a mes"
     and about four characters of what you had written.
     
     The wrap is forced by the basis rather than by a spacer element: the box
     asks for everything except the send button, so it cannot share a line with
     the tools and takes the two of them down to a row of their own. No markup
     change, and nothing to keep in step if a tool is added later. */
  .composer { flex-wrap: wrap; align-items: center; }
  .composer .icon-btn { order: 1; }
  .composer textarea { order: 2; flex: 1 1 calc(100% - 50px); }
  .composer .send { order: 3; }

  /* The row of tools is now above the box, so the whole thing is taller. JS
     measures it once a conversation is open; this is what is used until then,
     and getting it wrong shows as the last message hidden behind the box. */
  .chat-main { --composer-h: 116px; }
  .chat-list .chat-search { padding: 8px 10px; }

  /* Top bar: keep the account chip readable and shrink the rest */
  .topbar .pill { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .btn-sm { padding: 5px 9px; font-size: .76rem; }
  .topbar .icon-btn { width: 34px; height: 34px; }
  .tabs { gap: 0; }
  .tab { padding: 10px 12px; font-size: .85rem; }
  .toast-wrap { left: 12px; right: 12px; bottom: 12px; }
  .hero { padding: 48px 6% 40px; }
  .section { padding: 40px 6%; }
}

/* Installed app: keep content clear of the status bar and home indicator */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
  .sidebar-brand { padding-top: calc(16px + env(safe-area-inset-top)); }
  [data-install-app] { display: none !important; }
}

@media (max-width: 560px) {
  [data-install-app] .install-label { display: none; }
  /* On a narrow bar the account chip carries more meaning than the page title */
  .topbar h1 { display: none; }
}

@media (max-width: 420px) {
  .g4 { grid-template-columns: 1fr; }
  .btn { padding: 9px 13px; }
}

@media print {
  .sidebar, .topbar, .actions, .btn { display: none !important; }
  .main { margin: 0; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Sidebar hint shown when the platform owner has no workspace open */
.nav-note {
  margin: 6px 12px 10px;
  padding: 10px 12px;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .06);
  border-radius: 10px;
}
.sidebar.light .nav-note { color: var(--muted); background: rgba(0, 0, 0, .04); }

/* The note in the collapsed rail.
   The rail is 62px. Two sentences in it wrapped to one word per line and ran
   off the bottom — the same arithmetic that caught the logo in 3.4.2, and the
   same fix: show the mark, not the words. The full text stays on the title
   attribute, and the rail expands on hover anyway, so nothing is lost. */
.nav-note { display: flex; align-items: flex-start; gap: 9px; }
.nav-note-icon { flex: none; margin-top: 2px; opacity: .75; }
.nav-note-text { min-width: 0; }

@media (min-width: 761px) {
  body.side-narrow .sidebar:not(:hover) .nav-note {
    justify-content: center;
    margin: 6px 8px 10px;
    padding: 9px 0;
  }
  body.side-narrow .sidebar:not(:hover) .nav-note-text { display: none; }
  body.side-narrow .sidebar:not(:hover) .nav-note-icon { margin-top: 0; opacity: .9; }
}

/* Reply and react ---------------------------------------------------------- */
.bubble { }
.bubble-actions {
  /* Beside the bubble, never on top of it: sitting over the corner they covered
     the sender's name in a group and the first words of a short message. */
  position: absolute; top: 2px; display: none; gap: 2px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 3px; box-shadow: var(--shadow); z-index: 4;
}
.bubble.in  .bubble-actions { left: calc(100% + 6px); right: auto; }
.bubble.out .bubble-actions { right: calc(100% + 6px); left: auto; }
.bubble:hover .bubble-actions,
.bubble.show-actions .bubble-actions { display: flex; }
.bubble-actions button {
  border: 0; background: none; cursor: pointer; color: var(--ink-2);
  width: 28px; height: 26px; border-radius: 13px; font-size: .8rem;
}
@media (max-width: 760px) {
  /* Tappable, and a touch screen has no hover to reveal them. */
  .bubble-actions button { width: 36px; height: 34px; font-size: .95rem; }
  .bubble-actions { top: -6px; }
}
.bubble-actions button:hover { background: var(--panel-2); color: var(--primary); }

.bubble-reaction {
  position: absolute; bottom: -10px; left: 8px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 1px 6px;
  font-size: .82rem; line-height: 1.4; box-shadow: 0 1px 2px rgba(11,20,26,.12);
}

.emoji-picker {
  /* Fixed to the window, with the position worked out in JS — anchored to the
     bubble it ran off the edge of the screen on short messages. */
  position: fixed; top: 0; left: 0; display: flex; gap: 2px; z-index: 60;
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: 5px 7px; box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none;
}
.emoji-picker::-webkit-scrollbar { display: none; }
.emoji-picker button {
  border: 0; background: none; cursor: pointer; font-size: 1.25rem;
  width: 38px; height: 38px; border-radius: 19px; flex: none;
  line-height: 1; padding: 0;
}
@media (max-width: 760px) {
  /* A comfortable tap target on a phone. */
  .emoji-picker button { width: 44px; height: 44px; font-size: 1.4rem; }
}
.emoji-picker button:hover { background: var(--panel-2); transform: scale(1.15); }

.reply-bar {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 8px 14px; background: var(--panel-2); border-top: 1px solid var(--line);
  border-left: 3px solid var(--primary);
}
.reply-bar .small { max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Carousel and offer previews --------------------------------------------- */
.carousel-strip {
  display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px;
  scrollbar-width: thin;
}
.carousel-card {
  flex: 0 0 150px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; font-size: .82rem;
}
.carousel-img {
  height: 78px; border-radius: 6px; margin-bottom: 6px; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 8px, rgba(0,0,0,.02) 8px 16px);
  color: var(--ink-3); font-size: .72rem;
}
.offer-banner {
  background: linear-gradient(90deg, var(--primary), var(--accent)); color: #fff;
  border-radius: 6px; padding: 6px 10px; font-weight: 600; font-size: .82rem; margin-bottom: 6px;
}
.card-row {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; margin-bottom: 10px; background: var(--panel-2);
}

/* Who is handling this chat */
.assign-select {
  width: auto; min-width: 130px; max-width: 170px; padding: 5px 26px 5px 10px;
  font-size: .8rem; border-radius: 16px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--ink-2); flex: none;
}
.assign-select:focus { border-color: var(--primary); }
@media (max-width: 760px) {
  .assign-select { min-width: 0; max-width: 104px; font-size: .74rem; padding: 4px 20px 4px 8px; }
}

/* Template category tabs and clickable names ------------------------------- */
.chip-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip.active { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); border-color: transparent; }
.chip-count {
  display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px;
  background: rgba(0,0,0,.07); font-size: .72rem; font-weight: 600;
}
.chip.active .chip-count { background: color-mix(in srgb, var(--primary) 22%, transparent); }
[data-theme="dark"] .chip-count { background: rgba(255,255,255,.1); }

.link-name {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--primary); cursor: pointer; text-align: left;
}
.link-name:hover { text-decoration: underline; }

#deleteModal .preview-bubble { max-height: 180px; overflow: auto; }
#delSubmit:disabled { opacity: .5; cursor: not-allowed; }

/* Formatting toolbar and character counters --------------------------------- */
.format-bar {
  display: flex; align-items: center; gap: 2px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 0; padding: 4px 6px; background: var(--panel-2);
}
.format-bar button {
  min-width: 30px; height: 28px; border: 0; background: none; border-radius: 6px;
  cursor: pointer; color: var(--ink-2); font-size: .86rem; font-family: inherit;
}
.format-bar button:hover { background: var(--panel); color: var(--primary); }
.format-bar button:active { transform: translateY(1px); }
.format-bar code { font-size: .78rem; }
.format-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.format-bar + textarea { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

.field-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px;
}
.field-foot .hint { margin: 0; }
.counter {
  font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.counter.near { color: var(--warn); font-weight: 600; }
.counter.over { color: var(--bad); font-weight: 600; }

.preview-bubble .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(0,0,0,.06); border-radius: 4px; padding: 1px 4px; font-size: .88em;
}

/* Business hours grid -------------------------------------------------------- */
.hours-grid { display: flex; flex-direction: column; gap: 6px; }
.hours-row {
  display: grid; grid-template-columns: 96px 92px 1fr auto 1fr; gap: 10px; align-items: center;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
}
.hours-row.is-closed { background: var(--panel-2); }
.hours-row.is-closed input[type="time"] { opacity: .4; pointer-events: none; }
.hours-day { font-weight: 600; font-size: .9rem; }
.hours-row input[type="time"] { padding: 6px 8px; }
@media (max-width: 760px) {
  .hours-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hours-day { grid-column: 1 / -1; }
}

/* Canned replies -------------------------------------------------------------- */
.shortcut {
  background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
  padding: 2px 7px; border-radius: 6px; font-size: .84rem; font-weight: 600;
}
.canned-picker {
  border-top: 1px solid var(--line); background: var(--panel); max-height: 240px; overflow-y: auto;
  box-shadow: 0 -6px 18px rgba(11,20,26,.08);
}
.canned-picker button {
  display: grid; grid-template-columns: 90px 150px 1fr; gap: 10px; align-items: baseline;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 9px 14px; font: inherit; border-bottom: 1px solid var(--line);
}
.canned-picker button:last-child { border-bottom: 0; }
.canned-picker button.on, .canned-picker button:hover { background: var(--panel-2); }
.canned-picker code { color: var(--primary); font-weight: 600; }
.canned-picker span { font-weight: 600; font-size: .86rem; }
.canned-picker em {
  font-style: normal; color: var(--ink-3); font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 760px) {
  .canned-picker button { grid-template-columns: 80px 1fr; }
  .canned-picker em { display: none; }
}

/* Internal notes -------------------------------------------------------------- */
.note {
  align-self: center; max-width: min(78%, 520px); width: 100%;
  background: #FFF8E1; border: 1px solid #F2E2B0; border-left: 3px solid #E5B93C;
  border-radius: 8px; padding: 8px 11px; margin: 6px 0; font-size: .88rem; color: #6B5A22;
}
.note-head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; font-size: .78rem; }
.note-head .muted { margin-left: auto; }
.note-del { width: 22px; height: 22px; font-size: .72rem; color: #A08A45; }
[data-theme="dark"] .note { background: #2A2418; border-color: #4A3F22; color: #E8DCB8; }

/* Media library ------------------------------------------------------------- */
.media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px;
}
.media-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.media-thumb {
  height: 130px; display: grid; place-items: center; background: var(--panel-2);
  color: var(--ink-3); font-size: 1.8rem; overflow: hidden;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-body { padding: 10px 12px; }
.media-actions { display: flex; gap: 4px; margin-top: 8px; }
.media-actions form { display: contents; }

/* Segment rules -------------------------------------------------------------- */
.rule-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; gap: 8px; align-items: center;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); margin-bottom: 8px;
}
.rule-row select, .rule-row input { margin: 0; }
.rule-value { display: block; }
.rule-summary { font-size: .88rem; line-height: 1.9; margin-bottom: 8px; }
.rule-summary code {
  background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
  padding: 1px 6px; border-radius: 5px;
}
.segment-preview {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: .9rem;
  display: flex; align-items: center; gap: 10px;
}
.segment-preview.empty-match { background: color-mix(in srgb, var(--warn) 16%, transparent); }
@media (max-width: 760px) { .rule-row { grid-template-columns: 1fr 1fr; } }

/* Sequence steps ------------------------------------------------------------- */
.card.is-open { border-color: var(--primary); }
.step-list { display: flex; flex-direction: column; gap: 0; }
.step-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 4px;
  border-bottom: 1px solid var(--line); position: relative;
}
.step-row:last-child { border-bottom: 0; }
.step-num {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary);
  font-weight: 700; font-size: .85rem;
}
.step-body { flex: 1; min-width: 0; }
.step-row + .step-row .step-num::before {
  content: ""; position: absolute; left: 15px; top: -12px; height: 12px; width: 1px; background: var(--line);
}

/* Setup checklist ----------------------------------------------------------- */
.setup-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.setup-steps > li {
  position: relative; padding: 0 0 20px 40px; counter-increment: step;
  border-left: 2px solid var(--line); margin-left: 12px;
}
.setup-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.setup-steps > li::before {
  content: counter(step); position: absolute; left: -15px; top: -2px;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2);
  font-size: .8rem; font-weight: 700;
}
.setup-steps > li.done::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  background: var(--accent); border-color: transparent; color: #06281d;
}
.setup-steps > li strong { display: block; margin-bottom: 2px; }
[data-push-toggle].is-on { color: var(--primary); border-color: var(--primary); }

/* Groups inside the inbox ---------------------------------------------------- */
.avatar-group { color: #fff; font-size: .95rem; }
.tag-group {
  flex: none; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary);
  padding: 1px 6px; border-radius: 5px;
}
.conv.is-group .conv-name { font-weight: 650; }
.bubble-sender {
  font-size: .78rem; font-weight: 700; margin-bottom: 2px; line-height: 1.3;
}

/* Group cards ---------------------------------------------------------------- */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.group-card { display: flex; flex-direction: column; }
.group-seats { display: flex; gap: 3px; margin: 10px 0 4px; }
.group-seat {
  flex: 1; height: 5px; border-radius: 3px; background: var(--line);
}
.group-seat.filled { background: var(--accent); }
.group-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; }
.group-actions form { display: contents; }

/* Log viewer ----------------------------------------------------------------- */
.log-list { display: flex; flex-direction: column; }
.log-file {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line); color: inherit;
}
.log-file:last-child { border-bottom: 0; }
.log-file:hover { background: var(--panel-2); text-decoration: none; }
.log-file.active { background: color-mix(in srgb, var(--primary) 8%, transparent); box-shadow: inset 3px 0 0 var(--primary); }

.log-view {
  margin: 0; padding: 12px 16px 18px; max-height: 60vh; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
  background: var(--panel);
}
.log-line { display: block; padding: 2px 6px; border-radius: 4px; color: var(--ink-2); }
.log-line:not(.bad):not(.warn) { color: var(--ink-3); }   /* routine lines recede */
.log-line.bad { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); }
.log-line.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.log-line:hover { background: var(--panel-2); }
@media (max-width: 760px) { .log-view { max-height: 46vh; font-size: .72rem; } }

/* Group members -------------------------------------------------------------- */
.member-list { margin-top: 10px; border-top: 1px solid var(--line); }
.member {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.member:last-child { border-bottom: 0; }
.avatar.sm { width: 28px; height: 28px; font-size: .72rem; flex: none; }
.member .icon-btn { width: 28px; height: 28px; font-size: .78rem; }
.member .icon-btn:hover { color: var(--bad); }

/* Webhook events ------------------------------------------------------------- */
.event-list { display: flex; flex-direction: column; }
.event { border-bottom: 1px solid var(--line); }
.event:last-child { border-bottom: 0; }
.event > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; cursor: pointer; list-style: none;
}
.event > summary::-webkit-details-marker { display: none; }
.event > summary:hover { background: var(--panel-2); }
.event[open] > summary { background: var(--panel-2); }
.event-line { flex: 1; min-width: 160px; font-size: .89rem; }
.event-meta { font-size: .76rem; color: var(--ink-3); white-space: nowrap; }
.event-body { padding: 0 16px 14px; }
.event-body pre {
  margin: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--panel-2);
  border: 1px solid var(--line); max-height: 340px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
@media (max-width: 760px) { .event-meta { width: 100%; } }

/* "New messages" pill, shown when the agent has scrolled up ------------------ */
.new-messages {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--composer-h, 64px) + 12px); z-index: 6;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 15px; border: 0; border-radius: 20px; cursor: pointer;
  background: var(--primary); color: #fff; font: inherit; font-size: .82rem; font-weight: 600;
  box-shadow: 0 3px 12px rgba(11,20,26,.25);
  animation: pill-in .18s ease;
}
.new-messages:hover { filter: brightness(1.08); }
@keyframes pill-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* The flow builder ----------------------------------------------------------- */
.builder {
  display: grid; grid-template-columns: 264px 1fr 320px;
  flex: 1; min-height: 0; height: 100%; background: var(--canvas-bg);
}
.builder-palette, .builder-inspector {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border-right: 1px solid var(--line);
}
.builder-inspector { border-right: 0; border-left: 1px solid var(--line); }

.palette-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; }
.palette-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 6px 20px; }
.palette-foot { padding: 10px 14px; border-top: 1px solid var(--line); flex: none; }
.palette-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-sm); cursor: grab; user-select: none;
}
.palette-item:hover { background: var(--panel-2); }
.palette-item:active { cursor: grabbing; }
.palette-item .cell-sub { white-space: normal; line-height: 1.35; font-size: .74rem; }
.palette-icon {
  width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  color: #fff; font-size: .8rem; background: var(--ink-3);
}

.n-message  .palette-icon, .node.n-message  .node-icon { background: #2F7CF6; }
.n-buttons  .palette-icon, .node.n-buttons  .node-icon { background: #7A5AF8; }
.n-list     .palette-icon, .node.n-list     .node-icon { background: #7A5AF8; }
.n-ask      .palette-icon, .node.n-ask      .node-icon { background: #0FA47F; }
.n-condition .palette-icon, .node.n-condition .node-icon { background: #E5A21A; }
.n-hours    .palette-icon, .node.n-hours    .node-icon { background: #E5A21A; }
.n-delay    .palette-icon, .node.n-delay    .node-icon { background: #8A94A0; }
.n-template .palette-icon, .node.n-template .node-icon { background: #2F7CF6; }
.n-update   .palette-icon, .node.n-update   .node-icon { background: #0FA47F; }
.n-sequence .palette-icon, .node.n-sequence .node-icon { background: #0FA47F; }
.n-webhook  .palette-icon, .node.n-webhook  .node-icon { background: #C0483C; }
.n-ai       .palette-icon, .node.n-ai       .node-icon { background: #7A5AF8; }
.n-handover .palette-icon, .node.n-handover .node-icon { background: #C0483C; }
.n-jump     .palette-icon, .node.n-jump     .node-icon { background: #8A94A0; }
.n-end      .palette-icon, .node.n-end      .node-icon { background: #55606B; }
.node.n-start .node-icon { background: var(--accent); }

.builder-canvas { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.canvas-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--panel); border-bottom: 1px solid var(--line); flex: none;
}
.canvas-tools { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--ink-2); }
.canvas-scroll {
  flex: 1; overflow: auto; position: relative;
  background-color: var(--canvas-bg);
  background-image: radial-gradient(circle, var(--canvas-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}
.canvas-scroll.panning { cursor: grabbing; }
.canvas-inner { position: relative; width: 4000px; height: 3000px; transform-origin: 0 0; }
.canvas-lines { position: absolute; inset: 0; pointer-events: none; }
.line { fill: none; stroke: var(--ink-3); stroke-width: 2; opacity: .6; }
[data-theme="dark"] .line { stroke: #7C919E; opacity: .8; }
.line.lit { stroke: var(--primary); opacity: 1; stroke-width: 2.5; }
.line.drawing { stroke: var(--primary); stroke-dasharray: 5 4; opacity: .9; }

.canvas-help {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  margin: 0; padding: 6px 14px; border-radius: 16px; font-size: .76rem;
  background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--ink-2);
  border: 1px solid var(--line); pointer-events: none; white-space: nowrap;
}

.node {
  position: absolute; width: 220px; background: var(--node-bg);
  border: 1px solid var(--node-line); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(11,20,26,.14), 0 6px 16px rgba(11,20,26,.10);
  cursor: grab; user-select: none;
}
[data-theme="dark"] .node {
  box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.35);
}
.node:hover { border-color: var(--node-line-strong); }
.node.moving { cursor: grabbing; box-shadow: var(--shadow-lg); z-index: 5; }
.node.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent),
              0 8px 22px rgba(11,20,26,.18);
}
[data-theme="dark"] .node.selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent); }
.node-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px 7px;
  border-radius: 11px 11px 0 0;
}
[data-theme="dark"] .node-head { background: rgba(255,255,255,.03); }
.node-icon { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: .7rem; }
.node-title { font-weight: 600; font-size: .84rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-del { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 2px; opacity: 0; }
.node:hover .node-del { opacity: 1; }
.node-del:hover { color: var(--bad); }
.node-body {
  padding: 0 11px 9px; font-size: .78rem; color: var(--ink-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.node-outs { border-top: 1px solid var(--node-line); }
.node-out {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; padding: 5px 12px 5px 10px; font-size: .74rem; color: var(--ink-2);
  border-bottom: 1px solid var(--node-line);
}
.node-out:last-child { border-bottom: 0; }
.out-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.port {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: var(--node-bg); border: 2px solid var(--node-line-strong); cursor: crosshair; z-index: 2;
}
.port:hover { border-color: var(--primary); transform: scale(1.25); }
.port-in { left: -7px; top: 14px; }
.port-out { right: -7px; top: 50%; margin-top: -6px; }
.port-out.joined { background: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .port { box-shadow: 0 0 0 2px rgba(6,11,14,.9); }

.inspector-head {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  border-bottom: 1px solid var(--line); flex: none;   /* stays put while the rest scrolls */
}
/* The panel's contents live in a wrapper, so that wrapper is the flex child and
   the one that needs a height. Without this the form simply grew past the
   bottom of the screen and the fields at the end could not be reached. */
#inspectorBody {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
.inspector-form {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 14px 28px;
}
.inspector-empty { padding: 40px 24px; text-align: center; color: var(--ink-3); flex: none; }
.inspector-empty i { font-size: 1.8rem; margin-bottom: 10px; display: block; }
.choice-row { display: flex; gap: 6px; margin-bottom: 6px; }
.choice-row input { flex: 1; }

.check-summary .check { font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 12px; }
.check.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.check.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.check.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }

.test-thread {
  height: 300px; overflow-y: auto; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #EFE7DE; display: flex; flex-direction: column; gap: 7px;
}
.test-msg { max-width: 78%; padding: 7px 11px; border-radius: 10px; font-size: .86rem; line-height: 1.45; white-space: pre-wrap; }
.test-msg.bot { background: #fff; align-self: flex-start; color: #111B21; }
.test-msg.me { background: #DCF8C6; align-self: flex-end; color: #111B21; }
.test-msg.system {
  align-self: center; background: transparent; color: #5B6770; font-size: .76rem;
  font-style: italic; text-align: center; max-width: 92%;
}
.test-choices { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.test-input { display: flex; gap: 8px; }
.test-input input { flex: 1; }

.starter {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.starter-body { flex: 1; }
.starter h4 { margin: 0 0 4px; font-size: .95rem; }

/* The bar only exists on a phone, where the panels are sheets. */
.builder-bar { display: none; }

@media (max-width: 1100px) {
  /* The canvas keeps the screen; the panels slide up when wanted. Shrinking
     all three to fit made every one of them too small to use. */
  .builder { grid-template-columns: 1fr; grid-template-rows: 1fr auto; position: relative; }

  .builder-bar {
    display: flex; align-items: center; gap: 6px; padding: 8px 10px;
    background: var(--panel); border-top: 1px solid var(--line); z-index: 8;
  }

  .builder-palette, .builder-inspector {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
    max-height: 70vh; border: 0; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(11,20,26,.22);
    transform: translateY(102%); transition: transform .22s ease;
  }
  .builder-palette.open, .builder-inspector.open { transform: none; }

  .palette-head, .palette-foot { display: none; }
  .palette-list { display: block; padding: 4px 8px 20px; }
  .palette-item { width: auto; padding: 11px 10px; }

  .sheet-handle {
    display: block; width: 100%; padding: 9px 0 5px; border: 0; background: none; cursor: pointer;
  }
  .sheet-handle span {
    display: block; width: 42px; height: 4px; margin: 0 auto;
    border-radius: 2px; background: var(--ink-3); opacity: .45;
  }

  .canvas-help { display: none; }
  .canvas-bar { padding: 6px 8px; }
  .canvas-bar .btn span { display: none; }

  /* A finger needs a bigger target than a mouse pointer. */
  .port { width: 18px; height: 18px; }
  .port-in { left: -9px; top: 12px; }
  .port-out { right: -9px; margin-top: -9px; }
  .port::after { content: ""; position: absolute; inset: -10px; }
  .node { width: 240px; }
  .node-out { padding: 9px 14px 9px 10px; }
  .node-del { opacity: 1; font-size: 1.3rem; padding: 0 6px; }
}

.sheet-handle { display: none; }

/* Dragging a step must move the step rather than scrolling the page. The canvas
   itself keeps normal scrolling, since panning is how you get around it. */
.node, .port { touch-action: none; }
.inspector-form, .palette-list, .contact-panel-body { touch-action: pan-y; }

/* A narrower sidebar, on desktop only ----------------------------------------
   Below 861px the sidebar is a slide-over drawer, and narrowing it there makes
   no sense — worse, these rules would fight the drawer's own positioning. So
   the whole feature lives inside a desktop media query and cannot reach mobile
   at all, rather than being applied everywhere and then undone.              */
@media (min-width: 861px) {
  body.side-narrow,
  html.side-narrow-boot body { --side-current: var(--side-w-narrow); }
  body:not(.side-narrow) { --side-current: var(--side-w); }

  .sidebar {
    width: var(--side-current, var(--side-w));
    flex: 0 0 var(--side-current, var(--side-w));
    transition: width .18s ease;
  }
  .main { margin-left: var(--side-current, var(--side-w)); transition: margin-left .18s ease; }

  /* Widen while pointed at, floating over the page rather than shifting it. */
  body.side-narrow .sidebar:hover { width: var(--side-w); box-shadow: 6px 0 24px rgba(11,20,26,.22); }

  body.side-narrow .sidebar .brand-name,
  body.side-narrow .sidebar .nav-item span,
  body.side-narrow .sidebar .nav-label,
  body.side-narrow .sidebar-foot,
  body.side-narrow .sidebar .count,
  html.side-narrow-boot .sidebar .brand-name,
  html.side-narrow-boot .sidebar .nav-item span,
  html.side-narrow-boot .sidebar .nav-label,
  html.side-narrow-boot .sidebar-foot {
    opacity: 0; visibility: hidden; transition: opacity .12s ease;
  }
  body.side-narrow .sidebar:hover .brand-name,
  body.side-narrow .sidebar:hover .nav-item span,
  body.side-narrow .sidebar:hover .nav-label,
  body.side-narrow .sidebar:hover .sidebar-foot,
  body.side-narrow .sidebar:hover .count {
    opacity: 1; visibility: visible;
  }

  /* The name is hidden with opacity, which leaves it taking its full width — so
     the wordmark spilled out past the narrow rail instead of disappearing.
     Collapsed, only the badge should be there.
     
     Written without :has(), which older Safari and Chrome do not support: a
     selector they cannot parse is thrown away whole, which is why the previous
     attempt appeared to do nothing at all. */
  body.side-narrow .sidebar .brand-name,
  html.side-narrow-boot .sidebar .brand-name {
    width: 0; overflow: hidden; margin: 0; flex: 0 0 0;
  }
  body.side-narrow .sidebar:hover .brand-name {
    width: auto; overflow: visible; flex: 0 1 auto;
  }

  /* Nothing may reach past the rail, whatever else goes wrong. */
  body.side-narrow .sidebar,
  html.side-narrow-boot .sidebar { overflow-x: hidden; }
  /* The rail is 62px. The badge is 40px, so 8px of padding each side comes to
     56px and fits with room to spare; at 18px each side it would need 76px and
     the row would push its contents out of the rail, which is what happened
     when the badge was 30px and the padding was never reduced. Padding returns
     with the menu. */
  body.side-narrow .sidebar .sidebar-brand,
  html.side-narrow-boot .sidebar .sidebar-brand {
    gap: 0; justify-content: center; padding-left: 8px; padding-right: 8px;
  }
  body.side-narrow .sidebar:hover .sidebar-brand {
    gap: 10px; justify-content: flex-start; padding-left: 18px; padding-right: 18px;
  }
  body.side-narrow .sidebar .brand-badge { flex: none; }

  /* An uploaded logo of any shape still has to fit the row. */
  body.side-narrow .sidebar .brand-word,
  html.side-narrow-boot .sidebar .brand-word { max-width: 0; }
  body.side-narrow .sidebar:hover .brand-word { max-width: none; }

  body.side-narrow .sidebar .nav-item { white-space: nowrap; overflow: hidden; }
  body.side-narrow:not(:has(.sidebar:hover)) .nav-label { height: 10px; padding: 6px 0 0; }

  /* Unread still matters when the labels are hidden, so it becomes a dot. */
  body.side-narrow .sidebar:not(:hover) .nav-item:has(.count)::after {
    content: ""; position: absolute; top: 7px; right: 9px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--accent);
  }

  .side-toggle {
    border: 0; background: none; color: #7D8B95; cursor: pointer; margin-left: auto;
    width: 28px; height: 28px; border-radius: 8px; flex: none;
  }
  .side-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
  body.side-narrow .sidebar:not(:hover) .side-toggle { display: none; }
}

/* On a phone the drawer behaves exactly as it always did. */
@media (max-width: 860px) {
  .side-toggle { display: none; }
}

/* Choosing a file, and filling a template's blanks --------------------------- */
.file-picker { display: flex; flex-direction: column; gap: 8px; }
.file-current {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2);
}
.file-current.empty { justify-content: center; padding: 14px 8px; }
.file-current img { max-height: 74px; max-width: 100%; border-radius: 6px; }
.file-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.file-actions label { margin: 0; cursor: pointer; }
.file-actions select { flex: 1; min-width: 130px; }

.var-row {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); margin-bottom: 8px;
}
.var-row .hint { margin: 0; }

/* Creating a contact field without leaving the canvas ------------------------ */
.new-field { display: flex; gap: 6px; }
.new-field input { flex: 1; min-width: 0; }
.new-field .btn { flex: none; }

/* Who you are talking to ----------------------------------------------------- */
.contact-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 330px; z-index: 6;
  background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
  transform: translateX(100%); transition: transform .2s ease;
  box-shadow: -8px 0 24px rgba(11,20,26,.10);
}
.contact-panel.open { transform: none; }
.contact-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none;
}
.contact-panel-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 26px;
}

.panel-person { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.panel-section { margin-bottom: 18px; }
.panel-section > label {
  display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); font-weight: 700; margin-bottom: 6px;
}
.panel-field { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.panel-field-label { flex: 0 0 40%; font-size: .82rem; color: var(--ink-2); }
.panel-field input, .panel-field select { flex: 1; min-width: 0; padding: 5px 8px; font-size: .84rem; }

@media (max-width: 760px) {
  /* On a phone it covers the thread rather than squeezing it. */
  .contact-panel { width: 100%; box-shadow: none; }
}

/* Offering notifications where they are missed ------------------------------- */
.push-nudge {
  position: absolute; left: 12px; right: 12px; bottom: calc(var(--composer-h, 64px) + 12px);
  z-index: 7; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; font-size: .86rem;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.push-nudge > i { color: var(--primary); }
@media (max-width: 760px) { .push-nudge { font-size: .8rem; } }

/* Flow cards ----------------------------------------------------------------- */
.flow-figures {
  display: flex; gap: 22px; padding: 4px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.flow-figures > div { display: flex; flex-direction: column; gap: 1px; }
.figure { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.figure-label { font-size: .72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.flow-meta { margin: 0 0 12px; font-size: .8rem; color: var(--ink-3); }

/* Arranging the menu --------------------------------------------------------- */
.menu-group { border-bottom: 1px solid var(--line); }
.menu-group:last-child { border-bottom: 0; }
.menu-group-head {
  padding: 9px 16px; font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); background: var(--panel-2);
}
.menu-items { min-height: 34px; padding: 4px 0; }
.menu-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 14px; cursor: grab;
}
.menu-row:hover { background: var(--panel-2); }
.menu-row.dragging { opacity: .4; }
.menu-row.is-hidden { opacity: .5; }
.menu-row.is-hidden .menu-label { text-decoration: line-through; }
.menu-grip { color: var(--ink-3); font-size: .8rem; flex: none; }
.menu-icon {
  width: 26px; height: 26px; flex: none; border-radius: 7px; display: grid; place-items: center;
  background: var(--panel-2); color: var(--ink-2); font-size: .74rem;
}
.menu-label { flex: 1; min-width: 90px; padding: 4px 8px; font-size: .86rem; }
.menu-route { flex: none; font-size: .7rem; color: var(--ink-3); }
@media (max-width: 760px) { .menu-route { display: none; } }

/* System health -------------------------------------------------------------- */
.verdict {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; margin-bottom: 16px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
}
.verdict > i { font-size: 1.4rem; margin-top: 1px; }
.verdict-ok > i { color: var(--ok); }
.verdict-warn > i { color: var(--warn); }
.verdict-bad > i { color: var(--bad); }
.verdict-ok { border-left: 4px solid var(--ok); }
.verdict-warn { border-left: 4px solid var(--warn); }
.verdict-bad { border-left: 4px solid var(--bad); }
.verdict-counts { font-size: .8rem; color: var(--ink-3); margin-top: 3px; }

.health-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.dot-bad { background: var(--bad); }

.health-row {
  display: flex; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.health-row:last-child { border-bottom: 0; }
.health-row.row-bad { background: color-mix(in srgb, var(--bad) 6%, transparent); }
.health-row.row-warn { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.health-icon { font-size: .85rem; margin-top: 3px; flex: none; }
.icon-ok { color: var(--ok); }
.icon-warn { color: var(--warn); }
.icon-bad { color: var(--bad); }
.icon-unknown { color: var(--ink-3); }
.health-fix {
  margin-top: 6px; font-size: .8rem; line-height: 1.5; color: var(--ink-2);
  padding: 7px 10px; border-radius: var(--radius-sm); background: var(--panel-2);
}
.health-fix i { color: var(--ink-3); margin-right: 4px; }
.code-line { display: flex; align-items: center; gap: 8px; }
.code-line code { flex: 1; overflow-x: auto; padding: 8px 10px; background: var(--panel-2); border-radius: var(--radius-sm); }

/* A word on the dashboard when something needs attention --------------------- */
.health-banner {
  display: flex; align-items: center; gap: 11px; padding: 12px 16px; margin-bottom: 14px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
  color: inherit; font-size: .88rem;
}
.health-banner:hover { text-decoration: none; background: var(--panel-2); }
.health-banner-bad { border-left: 4px solid var(--bad); }
.health-banner-bad > i { color: var(--bad); }
.health-banner-warn { border-left: 4px solid var(--warn); }
.health-banner-warn > i { color: var(--warn); }

/* Meta's own id, shown against a message ------------------------------------- */
.msg-id { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.msg-id code { font-size: .68rem; opacity: .8; }
.msg-id .icon-btn { width: 20px; height: 20px; font-size: .64rem; }

/* Watching a campaign as it sends -------------------------------------------- */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  margin-left: 8px; flex: none; animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  60%      { opacity: .7; box-shadow: 0 0 0 6px transparent; }
}
.progress > div { transition: width .5s ease; }
.figure-changed { animation: figure-bump .7s ease; }
@keyframes figure-bump {
  0%   { color: var(--accent); transform: translateY(-2px); }
  100% { color: inherit; transform: none; }
}

/* Saying what each column in a file is --------------------------------------- */
.import-columns { display: flex; flex-direction: column; }
.import-column {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.import-column:last-child { border-bottom: 0; }
.import-column .cell-sub { white-space: normal; }
.import-choice { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.import-choice select { min-width: 180px; }
.import-choice .new-field-name { max-width: 160px; }
@media (max-width: 760px) {
  .import-column { flex-direction: column; align-items: stretch; gap: 8px; }
  .import-choice { flex-direction: column; align-items: stretch; }
  .import-choice select, .import-choice .new-field-name { max-width: none; width: 100%; }
}

/* Acting on several contacts at once ----------------------------------------- */
.bulk-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px;
  border-radius: var(--radius); background: var(--panel); border: 1px solid var(--primary);
  box-shadow: var(--shadow); font-size: .86rem;
}
.bulk-bar select { max-width: 220px; }
@media (max-width: 760px) { .bulk-bar { flex-wrap: wrap; } .bulk-bar select { flex: 1; } }

/* Moving through a long list ------------------------------------------------- */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line);
}
.pager-count { font-size: .8rem; color: var(--ink-3); }
.pager-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-pages a {
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--ink-2); font-size: .84rem;
}
.pager-pages a:hover { background: var(--panel-2); text-decoration: none; }
.pager-pages a.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.pager-pages a.off { opacity: .4; pointer-events: none; }
.pager-gap { color: var(--ink-3); padding: 0 2px; }

/* Row actions, on one line ---------------------------------------------------- */
.data .actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex-wrap: nowrap;
}
.data .actions form { display: inline-flex; }
.data .actions .btn { padding: 6px 8px; min-width: 32px; justify-content: center; }
/* On a mouse they appear when the row is pointed at, so a long list stays calm. */
@media (hover: hover) {
  .data tbody tr .actions { opacity: 0; transition: opacity .12s ease; }
  .data tbody tr:hover .actions,
  .data tbody tr:focus-within .actions { opacity: 1; }
}
.data tbody tr:hover { background: var(--panel-2); }
.data td { vertical-align: middle; }

@media (max-width: 760px) {
  .pager { justify-content: center; }
  .pager-count { width: 100%; text-align: center; }
}

.number-cell { display: flex; align-items: center; gap: 4px; }
.number-cell .icon-btn { width: 24px; height: 24px; font-size: .7rem; opacity: 0; }
tr:hover .number-cell .icon-btn { opacity: .7; }
.number-cell .icon-btn:hover { opacity: 1; }
@media (hover: none) { .number-cell .icon-btn { opacity: .6; } }

/* Building a campaign, step by step ------------------------------------------ */
.card.step { margin-bottom: 16px; }
.card.step .card-head { gap: 10px; }
.step-number {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
  background: var(--primary); color: #fff;
}

/* Choosing an audience: cards you press, not a dropdown that hides its options */
.audience-choices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.choice {
  display: flex; align-items: flex-start; gap: 9px; margin: 0; cursor: pointer;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); transition: border-color .12s ease, background .12s ease;
}
.choice:hover { background: var(--panel-2); }
.choice.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.choice input { margin-top: 2px; flex: none; }
.choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-title { font-size: .88rem; font-weight: 600; }
.choice-note { font-size: .76rem; color: var(--ink-3); }

/* The preview stays with you while you scroll the form. */
.preview-card { position: sticky; top: 76px; }
.preview-bubble .blank {
  background: color-mix(in srgb, var(--warn) 26%, transparent);
  border-radius: 4px; padding: 0 3px; color: #6b4d00;
}
.preview-summary { margin-top: 14px; }
.preview-summary:empty { display: none; }

@media (max-width: 1100px) {
  .preview-card { position: static; }
}

/* Choosing what goes in a template blank ------------------------------------- */
.blank-field { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.blank-field + .blank-field { margin-top: 10px; }
.blank-context {
  font-size: .8rem; color: var(--ink-3); margin-bottom: 8px; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.blank-context strong { color: var(--warn); }
.chip-row-tight { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.chip-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  border-radius: 14px; padding: 4px 11px; font-size: .78rem; cursor: pointer; font: inherit;
  font-size: .78rem; line-height: 1.5;
}
.chip-btn:hover { border-color: var(--primary); color: var(--primary); }
.chip-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-btn.plain { border-style: dashed; }
.blank-field .hint:empty { display: none; }

/* ===========================================================================
   The public site
   Its own visual language: a dark hero the app never uses, a warmer accent,
   and asymmetric layouts. A marketing page that looks like the settings screen
   convinces nobody.
   ======================================================================== */
.hero {
  background: #08211C;
  background-image:
    radial-gradient(900px 420px at 78% -8%, rgba(37,211,102,.20), transparent 62%),
    radial-gradient(700px 380px at 8% 108%, rgba(47,124,246,.16), transparent 60%);
  color: #EAF3EF; padding: 56px 24px 0; overflow: hidden;
}
.hero-inner {
  max-width: 1140px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr); gap: 48px; align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: #7FE3AE;
  background: rgba(37,211,102,.10); border: 1px solid rgba(37,211,102,.26);
  padding: 6px 13px; border-radius: 999px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #25D366; }

.hero h1 {
  margin: 20px 0 0; font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.06;
  letter-spacing: -.03em; font-weight: 800;
}
.hero h1 em { font-style: normal; color: #7FE3AE; }
.hero .lede { margin: 18px 0 0; font-size: 1.08rem; line-height: 1.65; color: #B6CCC4; max-width: 34em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn-lg { padding: 13px 26px; font-size: .96rem; border-radius: 11px; }
.hero .btn-ghost { border-color: rgba(255,255,255,.24); color: #EAF3EF; background: transparent; }
.hero .btn-ghost:hover { background: rgba(255,255,255,.08); }
.hero-note { margin-top: 18px; font-size: .84rem; color: #7D9A91; max-width: 40em; }

/* The conversation, which is the product */
.demo-phone {
  background: #0F2D26; border: 1px solid rgba(255,255,255,.10); border-radius: 20px;
  padding: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.45); max-width: 340px; margin-left: auto;
}
.demo-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.demo-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #25D366; color: #06231B;
  display: grid; place-items: center; font-weight: 700; font-size: .82rem;
}
.demo-top strong { display: block; font-size: .9rem; }
.demo-top span { font-size: .74rem; color: #7FE3AE; }
.demo-thread { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; }
.demo-msg {
  max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: .86rem; line-height: 1.5;
  animation: demo-rise .5s ease backwards;
}
.demo-msg.in { background: #1B3A33; align-self: flex-start; border-bottom-left-radius: 3px; }
.demo-msg.out { background: #075E54; align-self: flex-end; border-bottom-right-radius: 3px; position: relative; }
.demo-msg.short { align-self: flex-start; }
.demo-msg:nth-child(2) { animation-delay: .15s; }
.demo-msg:nth-child(3) { animation-delay: .4s; }
.demo-msg:nth-child(4) { animation-delay: .7s; }
@keyframes demo-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.demo-buttons { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.demo-buttons span {
  background: rgba(255,255,255,.10); border-radius: 7px; padding: 6px; text-align: center;
  font-size: .8rem; color: #9FE7C4;
}
.demo-ticks { position: absolute; right: 9px; bottom: 4px; font-size: .66rem; color: #53BDEB; }
.demo-typing { display: flex; gap: 4px; padding: 10px 12px; background: #1B3A33; border-radius: 12px; align-self: flex-start; }
.demo-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #6C8F86; animation: demo-blink 1.3s infinite;
}
.demo-typing span:nth-child(2) { animation-delay: .2s; }
.demo-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes demo-blink { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

.hero-figures {
  max-width: 1140px; margin: 52px auto 0; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; border-top: 1px solid rgba(255,255,255,.10); padding: 26px 0 46px;
}
.hero-figures strong { display: block; font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
.hero-figures span { font-size: .82rem; color: #8FAAA1; }

/* Sections */
.section { max-width: 1140px; margin: 0 auto; padding: 76px 24px; }
.section.band { background: var(--panel-2); max-width: none; }
.section.band > * { max-width: 1140px; margin-left: auto; margin-right: auto; }
.section-head { max-width: 40em; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -.02em; margin: 0 0 10px; }
.section-head p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; margin: 0; }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.pillar {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; transition: transform .16s ease, box-shadow .16s ease;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pillar-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tint) 14%, transparent); color: var(--tint); font-size: 1.05rem;
}
.pillar h3 { margin: 16px 0 8px; font-size: 1.06rem; letter-spacing: -.01em; }
.pillar p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.62; }

.steps-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps-row li { position: relative; padding-top: 6px; }
.steps-row span {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .82rem; margin-bottom: 12px;
}
.steps-row h4 { margin: 0 0 6px; font-size: 1rem; }
.steps-row p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feature { background: var(--panel); padding: 22px; }
.feature i { color: var(--primary); font-size: 1rem; }
.feature h4 { margin: 12px 0 6px; font-size: .96rem; }
.feature p { margin: 0; color: var(--ink-2); font-size: .86rem; line-height: 1.6; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.split h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); letter-spacing: -.02em; margin: 18px 0 12px; }
.split .lede { color: var(--ink-2); font-size: 1rem; line-height: 1.68; }
.split .eyebrow { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: color-mix(in srgb, var(--primary) 24%, transparent); }
.split .eyebrow .dot { background: var(--primary); }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; color: var(--accent); font-weight: 700;
}

/* A sketch of the canvas, not a screenshot that will date */
.canvas-sketch {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 0;
  background-image: radial-gradient(circle, var(--canvas-dot) 1px, transparent 1px);
  background-size: 20px 20px;
}
.sketch-node {
  background: var(--node-bg); border: 1px solid var(--node-line); border-radius: 11px;
  padding: 11px 14px; box-shadow: var(--shadow); min-width: 190px; text-align: center;
}
.sketch-node strong { display: block; font-size: .88rem; }
.sketch-node span { font-size: .8rem; color: var(--ink-2); }
.sketch-node.start { border-color: var(--accent); }
.sketch-node.small { min-width: 0; padding: 9px 12px; font-size: .8rem; }
.sketch-node.handover { border-color: #C0483C; }
.sketch-line { width: 2px; height: 26px; background: var(--node-line-strong); }
.sketch-chips { display: flex; gap: 5px; justify-content: center; margin-top: 9px; flex-wrap: wrap; }
.sketch-chips em {
  font-style: normal; font-size: .74rem; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 3px 9px; color: var(--ink-2);
}
.sketch-fork { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; justify-content: center; position: relative; }
.sketch-fork::before {
  content: ""; position: absolute; top: -26px; left: 50%; width: 2px; height: 26px; background: var(--node-line-strong);
}

/* Plans */
.plan-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: start; }
.plan-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; position: relative;
}
.plan-card.featured { border-color: var(--primary); box-shadow: 0 12px 34px rgba(11,20,26,.10); }
.plan-flag {
  position: absolute; top: -11px; left: 26px; background: var(--primary); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
}
.plan-card h3 { margin: 0 0 10px; font-size: 1.02rem; }
.plan-price { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 4px; }
.plan-price span { font-size: 1.2rem; font-weight: 600; }
.plan-price small { font-size: .82rem; font-weight: 500; color: var(--ink-3); }
.plan-card ul { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 9px; }
.plan-card li { font-size: .88rem; color: var(--ink-2); padding-left: 22px; position: relative; }
.plan-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.closer {
  text-align: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 54px 24px;
}
.closer h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.02em; margin: 0 0 10px; }
.closer p { color: var(--ink-2); margin: 0 0 24px; }
.closer .hero-actions { justify-content: center; }

@media (max-width: 900px) {
  .hero { padding-top: 40px; }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .demo-phone { margin: 0 auto; }
  .hero-figures { grid-template-columns: 1fr; gap: 16px; padding-bottom: 34px; }
  .hero-figures > div { display: flex; align-items: baseline; gap: 10px; }
  .hero-figures strong { font-size: 1.4rem; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .section { padding: 52px 20px; }
}

/* Public navigation and footer ----------------------------------------------- */
.public-nav {
  display: flex; align-items: center; gap: 18px; padding: 15px 24px;
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Over the dark hero it starts transparent and only appears once you scroll. */
.public-nav.over-hero {
  position: absolute; left: 0; right: 0; background: transparent;
  backdrop-filter: none; border-bottom-color: transparent; color: #EAF3EF;
}
.public-nav.over-hero .nav-link { color: #B6CCC4; }
.public-nav.over-hero .nav-link:hover { color: #fff; }
.public-brand { display: flex; align-items: center; gap: 10px; color: inherit; }
.public-brand:hover { text-decoration: none; }
.public-brand strong { font-size: 1.02rem; letter-spacing: -.01em; }
.nav-link { font-size: .9rem; color: var(--ink-2); }
.nav-link:hover { color: var(--ink); text-decoration: none; }

.public-foot { border-top: 1px solid var(--line); background: var(--panel); margin-top: 0; }
.foot-inner {
  max-width: 1140px; margin: 0 auto; padding: 46px 24px 30px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start;
}
.foot-inner p { color: var(--ink-3); font-size: .88rem; line-height: 1.6; margin: 12px 0 0; max-width: 40em; }
.foot-inner .brand-mark { vertical-align: middle; margin-right: 8px; }
.foot-links { display: flex; flex-direction: column; gap: 10px; }
.foot-links a { font-size: .9rem; color: var(--ink-2); }
.foot-base {
  max-width: 1140px; margin: 0 auto; padding: 16px 24px 30px;
  border-top: 1px solid var(--line); display: flex; justify-content: space-between;
  font-size: .8rem; color: var(--ink-3); gap: 12px; flex-wrap: wrap;
}
@media (max-width: 760px) {
  .public-nav { padding: 12px 18px; gap: 12px; }
  .public-nav .nav-link { display: none; }
  .foot-inner { grid-template-columns: 1fr; gap: 22px; }
  .foot-links { flex-direction: row; flex-wrap: wrap; gap: 16px; }
}

/* The hero's two halves, and the sketch's question step ---------------------- */
.hero-copy { min-width: 0; }
.hero-demo { min-width: 0; }
.sketch-node.ask { border-color: #7A5AF8; }

/* Who made it ----------------------------------------------------------------- */
.powered-by { display: inline-flex; align-items: center; gap: 8px; }
.powered-by img { height: 22px; width: auto; display: block; opacity: .85; transition: opacity .15s ease; }
.powered-by a:hover img { opacity: 1; }
[data-theme="dark"] .powered-by img { filter: brightness(1.15); }
.sidebar-by {
  margin-top: 3px; font-size: .72rem; color: #5C6B75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-by a { color: #7D8B95; }
.sidebar-by a:hover { color: #B8C4CC; }
body.side-narrow .sidebar:not(:hover) .sidebar-by { display: none; }

/* The logo, sized for each place it appears -------------------------------- */
/* 40px, not 30px. The number that constrains this is the collapsed rail, which
   is 62px wide with 8px of padding each side once narrowed — so the badge may
   be up to 46px and no more. At 30px it was sitting in a 62px rail looking
   apologetic. Change --side-w-narrow and this has to be recomputed. */
.brand-badge { width: 40px; height: 40px; flex: none; display: block; }
.brand-word { height: 19px; width: auto; max-height: 40px; display: block; object-fit: contain; }
.brand-logo { max-height: 32px; width: auto; display: block; }

/* In the menu the name is artwork, so the wrapper must not squash it. */
.sidebar-brand .brand-name { display: flex; align-items: center; min-width: 0; }
.sidebar-brand .brand-word { height: 22px; }

/* Only in the menu. The same mark appears on the sign-in card and in the
   footer at its old size, and enlarging it there was not what was asked for. */
.sidebar-brand .brand-mark { width: 40px; height: 40px; border-radius: 11px; font-size: 1.06rem; }

/* On the public site the badge is a little larger, and the name is lighter
   over the dark hero — a navy wordmark on that ground is invisible. */
.public-brand .brand-badge { width: 34px; height: 34px; }
.public-brand .brand-word { height: 21px; }
@media (max-width: 760px) {
  .public-brand .brand-word { height: 18px; }
  .public-brand .brand-badge { width: 30px; height: 30px; }
}

/* The lockup at the top of the public page ---------------------------------- */
.hero-logo { width: 190px; height: auto; display: block; margin-bottom: 22px; }
@media (max-width: 900px) { .hero-logo { width: 150px; margin: 0 auto 18px; } }

/* The top bar, at every width ------------------------------------------------ */
/* A long account name was running past the edge of its pill and being cut off
   mid-word. It now shortens with an ellipsis and keeps the full name on hover. */
.tenant-pill {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 900px) { .tenant-pill { max-width: 130px; } }
@media (max-width: 560px) { .tenant-pill { max-width: 92px; } }

/* A number somebody has moved away from -------------------------------------- */
.moved-note {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink); border-top-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.moved-note > i { color: var(--accent); }
.moved-note strong { white-space: nowrap; }
.conv.has-moved .conv-name::after {
  content: "moved"; margin-left: 6px; font-size: .66rem; font-weight: 600;
  padding: 1px 6px; border-radius: 8px; background: var(--panel-2); color: var(--ink-3);
}

/* Something WhatsApp told us, rather than something a person said ------------- */
.chat-notice { display: flex; justify-content: center; margin: 10px 0; }
.chat-notice span {
  max-width: 78%; text-align: center; font-size: .78rem; line-height: 1.5;
  color: var(--ink-3); background: color-mix(in srgb, var(--panel) 82%, transparent);
  border-radius: 12px; padding: 6px 12px;
}
.chat-notice i { margin-right: 5px; opacity: .7; }

/* AI ------------------------------------------------------------------------- */
.inspector-note {
  font-size: .82rem; line-height: 1.6; color: var(--ink-2);
  background: var(--panel-2); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px;
}
.ai-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ai-step {
  display: flex; align-items: center; gap: 11px; padding: 13px 15px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.ai-step > span {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); color: var(--ink-3); font-weight: 700; font-size: .82rem;
}
.ai-step.now { border-color: var(--primary); }
.ai-step.now > span { background: var(--primary); color: #fff; }
.ai-step.done > span { background: var(--ok); color: #fff; }
.ai-step strong { display: block; font-size: .88rem; }
.ai-step small { color: var(--ink-3); font-size: .76rem; }

.doc-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); }
.ai-spend { display: flex; align-items: baseline; gap: 8px; }
.ai-spend strong { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.ai-spend span { color: var(--ink-3); font-size: .84rem; }
.test-q { font-size: .86rem; color: var(--ink-2); margin-bottom: 8px; }
.test-a {
  background: #DCF8C6; color: #0B141A; border-radius: 10px; padding: 11px 13px;
  font-size: .9rem; line-height: 1.55;
}
[data-theme="dark"] .test-a { background: #075E54; color: #EAF3EF; }

/* Who sent an outgoing message ------------------------------------------------ */
.sent-by {
  font-size: .68rem; font-weight: 600; letter-spacing: .01em; opacity: .72;
  margin-bottom: 3px; display: flex; align-items: center; gap: 4px;
}
/* A machine reads differently from a colleague, at a glance and without
   having to read the words. */
.sent-by.by-machine { font-style: italic; font-weight: 500; }
.sent-by i { font-size: .62rem; opacity: .8; }

/* A suggested reply, waiting to be used -------------------------------------- */
.suggestion {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, #7A5AF8 7%, var(--panel));
  padding: 11px 14px;
}
.suggestion-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .76rem; font-weight: 600; color: #7A5AF8; margin-bottom: 7px;
}
.suggestion-body {
  font-size: .9rem; line-height: 1.55; color: var(--ink);
  white-space: pre-wrap; max-height: 160px; overflow-y: auto;
}
.suggestion-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* When there is nothing to send, it is a note rather than a draft. */
.suggestion.is-note { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }
.suggestion.is-note .suggestion-head { color: var(--warn); }
.suggestion.is-note .suggestion-body { color: var(--ink-2); font-size: .86rem; }

/* Sending a price from the inbox ---------------------------------------------- */
/* The saved-replies picker is a grid of shortcut, title and body — three fixed
   columns. A price has a name, a figure and a description, which is a different
   shape, and borrowing the grid put "DealerZone.app" in an 80px column where it
   ran straight into the price beside it. So the grid is switched off here and
   the parts are laid out on their own terms: name and figure share a line, the
   description gets the full width underneath. */
.price-picker button,
.price-picker .canned-option {
  display: block;
  padding: 11px 14px;
}
.price-picker .canned-option-top {
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
}
.price-picker strong {
  font-size: .92rem; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.price-picker .price-tag {
  /* Not floated. A float does nothing to a grid or flex item, which is why the
     figure sat on top of the name rather than to the right of it. */
  float: none; flex: none; font-size: .8rem; font-weight: 700; color: var(--primary);
  white-space: nowrap;
}
.price-picker .canned-body {
  display: block; margin-top: 3px; font-weight: 400; font-size: .82rem;
  color: var(--ink-2); line-height: 1.45;
  /* Two lines and then an ellipsis. The whole description belongs in the
     message, not in a menu somebody is scanning. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.price-picker em { display: inline; font-style: normal; color: var(--ink-3); }

/* Looking inside a document ---------------------------------------------------- */
.doc-piece { padding: 12px 16px; border-top: 1px solid var(--line); }
.doc-piece-num {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 5px;
}
.doc-piece-body {
  font-size: .82rem; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap;
  max-height: 130px; overflow-y: auto;
}

/* A note the software wrote, rather than a colleague ------------------------- */
.note.note-system {
  background: color-mix(in srgb, var(--warn) 9%, var(--panel));
  border-color: color-mix(in srgb, var(--warn) 26%, transparent);
}
.note.note-system .note-head strong { color: var(--warn); }
/* Nobody typed it, so there is nothing to take back. */
.note.note-system .note-del { display: none; }

/* Pictures on a product or service --------------------------------------------- */
.item-pics { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.item-pic { position: relative; width: 52px; height: 52px; }
.item-pic img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
}
.item-pic button {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 1;
  border-radius: 50%; border: 0; background: var(--bad); color: #fff; cursor: pointer;
  font-size: .72rem; padding: 0;
}

/* Choosing between two or three things ---------------------------------------- */
.pick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pick { margin: 0; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font-size: .87rem; transition: border-color .12s ease, background .12s ease;
}
.pick span i { font-size: .8rem; color: var(--ink-3); }
.pick:hover span { background: var(--panel-2); }
.pick input:checked + span {
  border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent);
  font-weight: 600;
}
.pick input:checked + span i { color: var(--primary); }
/* Visible when tabbing, since the real control is hidden. */
.pick input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* An exported conversation, made to be printed ------------------------------- */
body.bare { background: #fff; color: #0B141A; }
.sheet { max-width: 780px; margin: 0 auto; padding: 28px 24px 60px; }
.sheet-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line);
}
.sheet-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sheet-head > div { min-width: 0; }
.sheet-head h1 { overflow-wrap: anywhere; }
.sheet-head h1 { margin: 0 0 4px; font-size: 1.5rem; letter-spacing: -.02em; }
.sheet-head p { margin: 0; color: var(--ink-3); font-size: .88rem; }
.sheet-meta { text-align: right; font-size: .8rem; color: var(--ink-3); line-height: 1.7; }
.sheet-facts {
  display: flex; gap: 18px; flex-wrap: wrap; margin: 20px 0;
  padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-2);
}
.sheet-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 20px; margin-bottom: 24px; font-size: .84rem;
}
.sheet-fields span { color: var(--ink-3); margin-right: 6px; }

.sheet-day {
  text-align: center; font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin: 22px 0 12px;
}
.sheet-msg { margin-bottom: 14px; max-width: 84%; }
.sheet-msg.from-us { margin-left: auto; }
.sheet-line { font-size: .72rem; color: var(--ink-3); margin-bottom: 3px; }
.sheet-msg.from-us .sheet-line { text-align: right; }
.sheet-body {
  padding: 9px 12px; border-radius: 10px; font-size: .9rem; line-height: 1.55;
  background: #F2F4F5; border: 1px solid var(--line);
  /* A pasted address with no spaces in it would otherwise push the bubble
     wider than the page. */
  overflow-wrap: anywhere;
}
.sheet-msg.from-us .sheet-body { background: #E7F7E4; }
.sheet-body:empty { display: none; }
.sheet-tpl { font-size: .7rem; color: var(--ink-3); margin-bottom: 3px; }
.sheet-msg.from-us .sheet-tpl { text-align: right; }
.sheet-failed { color: var(--bad); }
.sheet-img { max-width: 220px; border-radius: 8px; margin-top: 6px; display: block; }
.sheet-msg.from-us .sheet-img { margin-left: auto; }
.sheet-file { font-size: .8rem; color: var(--ink-3); margin-top: 5px; }
.sheet-note {
  margin: 14px auto; max-width: 84%; padding: 9px 12px; font-size: .84rem;
  background: #FFF8E6; border: 1px solid #E8D9A8; border-radius: 8px; color: #5A4A1E;
}
.sheet-foot {
  margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--ink-3); text-align: center;
}

@media print {
  /* The margin belongs to the page, not the element. Padding on .sheet is
     applied once at the top of the first page and nowhere else, which is why
     the second page onwards ran into the edge and the right-hand side was cut
     off entirely. */
  @page { margin: 14mm 12mm; size: A4; }

  html, body.bare {
    width: auto; margin: 0; padding: 0;
    background: #fff; font-size: 10.5pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .no-print { display: none !important; }

  .sheet { max-width: none; width: auto; margin: 0; padding: 0; }

  /* Nothing may be wider than the page. A bubble at 84% of a container that is
     itself too wide still runs off the paper. */
  .sheet * { max-width: 100%; box-sizing: border-box; }
  .sheet-msg { max-width: 78%; }
  .sheet-img { max-width: 46mm; }

  /* A message split across a page break is unreadable in a record. */
  .sheet-msg, .sheet-note { break-inside: avoid; page-break-inside: avoid; }
  .sheet-day { break-after: avoid; page-break-after: avoid; }
  .sheet-head, .sheet-facts { break-inside: avoid; }

  a { text-decoration: none; color: inherit; }
}

/* A plan, before it becomes flows --------------------------------------------- */
.plan-flow {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  margin-bottom: 14px; background: var(--panel-2);
}
.plan-keep { margin: 0 0 12px; }
.plan-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.plan-step {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
}
.plan-step em {
  font-style: normal; font-weight: 700; color: var(--primary); font-size: .7rem;
}

/* Asking for a change, beside the flow ---------------------------------------- */
.ask-ai {
  margin: 0 14px 12px; padding: 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, #7A5AF8 8%, var(--panel-2));
  border: 1px solid color-mix(in srgb, #7A5AF8 22%, transparent);
}
.ask-ai textarea { width: 100%; font-size: .84rem; margin-bottom: 8px; resize: vertical; }
.ask-ai .hint { margin-top: 8px; }

/* What a failed attachment actually tried ------------------------------------- */
.err-detail {
  font-size: .7rem; color: var(--ink-3); margin-top: 3px;
  word-break: break-all; opacity: .85;
}

/* The user guide, inside the product ------------------------------------------ */
.help-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }

.help-nav { position: sticky; top: 12px; max-height: calc(100vh - 120px); overflow-y: auto; }
.help-nav input { width: 100%; margin-bottom: 10px; }
.help-nav nav { display: flex; flex-direction: column; gap: 1px; }
.help-nav-link {
  display: block; padding: 5px 9px; border-radius: 7px; font-size: .84rem;
  color: var(--ink-2); text-decoration: none; line-height: 1.35;
}
.help-nav-link:hover { background: var(--panel-2); color: var(--ink); }
.help-nav-link.on { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-weight: 600; }
.help-nav-link.lvl-1 { font-weight: 700; color: var(--ink); margin-top: 10px; }
.help-nav-link.lvl-3 { padding-left: 20px; font-size: .8rem; }

.help-body {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 34px; max-width: 820px; line-height: 1.65; color: var(--ink);
}
.help-body h1 {
  font-size: 1.5rem; margin: 34px 0 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
}
.help-body h1:first-child { margin-top: 0; }
.help-body h2 { font-size: 1.16rem; margin: 30px 0 10px; }
.help-body h3 { font-size: 1rem; margin: 22px 0 8px; }
.help-body p { margin: 0 0 12px; }
.help-body ul, .help-body ol { margin: 0 0 14px; padding-left: 22px; }
.help-body li { margin-bottom: 5px; }
.help-body hr { border: none; border-top: 1px solid var(--line); margin: 26px 0; }
.help-body code {
  background: var(--panel-2); padding: 1px 5px; border-radius: 5px;
  font-size: .86em; color: var(--primary);
}
.help-body blockquote {
  margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border-radius: 0 8px 8px 0;
}
.help-body blockquote p:last-child { margin-bottom: 0; }
.help-body table { width: 100%; }
.help-body .table-wrap { margin: 0 0 16px; }

/* Scrolled to by an in-page link, so a heading must not land under the topbar. */
.help-body h1, .help-body h2, .help-body h3 { scroll-margin-top: 16px; }

@media (max-width: 900px) {
  /* The contents list goes above the guide rather than beside it, and stops
     being sticky — a sticky block that is 40% of a phone screen leaves no room
     for the thing it is a contents list for. */
  .help-layout { grid-template-columns: 1fr; gap: 16px; }
  .help-nav { position: static; max-height: 260px; }
  .help-body { padding: 20px 18px; border-radius: 12px; }
}

@media print {
  /* Printing the guide should give the guide, not the application around it. */
  .sidebar, .topbar, .page-head, .help-nav { display: none !important; }
  .help-body { border: 0; padding: 0; max-width: none; }
  .help-layout { display: block; }
}

/* Choosing which pictures to import with a product ---------------------------- */
.pic-picks { display: flex; flex-wrap: wrap; gap: 10px; }
.pic-pick {
  position: relative; display: block; width: 92px; height: 92px; cursor: pointer;
  border: 2px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--panel-2); transition: border-color .15s ease;
}
.pic-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic-pick input {
  position: absolute; top: 6px; left: 6px; z-index: 2; width: 18px; height: 18px;
  cursor: pointer; accent-color: var(--primary);
}
/* The unticked state is dimmed rather than the ticked one highlighted: with
   nothing ticked to start with, the page should read as "these are available"
   and not as "these are all switched off". */
.pic-pick img { opacity: .55; transition: opacity .15s ease; }
.pic-pick:hover img { opacity: .8; }
.pic-pick:has(input:checked) { border-color: var(--primary); }
.pic-pick:has(input:checked) img { opacity: 1; }

/* :has() is not universal, and a browser that cannot parse a selector discards
   the whole rule — which here would leave every thumbnail dimmed with no way to
   see what was chosen. The checkbox itself is always visible and always
   accurate, so the fallback is simply full opacity for everything. */
@supports not selector(:has(*)) {
  .pic-pick img { opacity: 1; }
}

/* The campaign wizard ---------------------------------------------------------- */
.wiz-steps { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.wiz-step {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
  font-size: .86rem; color: var(--ink-2);
}
.wiz-step span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel-2); font-size: .78rem; font-weight: 700;
}
.wiz-step.on { border-color: var(--primary); color: var(--ink); }
.wiz-step.on span { background: var(--primary); color: #fff; }
.wiz-step.done span { background: var(--accent); color: #06281d; }

.wiz-pane { display: none; }
.wiz-pane.on { display: block; }

/* The template grid. Cards are wide enough for a bubble to read as a message
   rather than as a paragraph in a box. */
.tpl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
  /* Each card as tall as its own message, rather than every card stretched to
     match the longest one in its row. */
  align-items: start;
}
.tpl-card {
  display: block; cursor: pointer; padding: 12px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--panel);
  transition: border-color .15s ease;
}
.tpl-card:hover { border-color: var(--ink-3); }
.tpl-card.on { border-color: var(--primary); }
.tpl-card input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tpl-top strong { font-size: .9rem; }
.tpl-foot { margin-top: 8px; font-size: .78rem; color: var(--ink-3); }

/* The bubble, borrowing the inbox's own colours so what you pick looks like
   what arrives. */
/* No ceiling on a card in the grid.
   It used to stop at 200px with the overflow hidden, so a long template was cut
   mid-sentence with nothing to say it had been — and choosing between templates
   is exactly the moment somebody needs to read the whole thing. Cards in a row
   end up different heights now, which is a fair price. */
.tpl-bubble {
  background: #DCF8C6; color: #111; border-radius: 10px; padding: 9px 11px;
  font-size: .84rem; line-height: 1.45;
}
.tpl-header { font-weight: 700; margin-bottom: 4px; }
.tpl-media {
  background: rgba(0,0,0,.06); border-radius: 6px; padding: 14px; text-align: center;
  margin-bottom: 6px; color: #4a4a4a; font-size: .8rem;
}
.tpl-footer { margin-top: 6px; font-size: .76rem; color: #667781; }
.tpl-buttons { margin-top: 8px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 6px; }
.tpl-buttons span {
  display: block; text-align: center; color: #1c7fd6; font-size: .8rem; padding: 4px;
}

/* One blank per row: the tag, one box, and the fields you can drop into it.
   There is no "fixed or from the contact" control any more — once the box holds
   both, that choice was between the box and the box. */
.var-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.var-row:last-child { border-bottom: 0; }
.var-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.var-tag {
  font-family: ui-monospace, monospace; font-size: .82rem;
  background: var(--panel-2); padding: 3px 8px; border-radius: 6px; color: var(--primary);
}
.var-out { width: 100%; }
.var-chips { margin-top: 7px; }

/* The blanks and the preview side by side. Watching it change as you type is
   the whole point, and that does not work if it is below the fold. */
.wiz-two { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.wiz-preview { position: sticky; top: 12px; }
/* The side preview is one message and can be long. It scrolls rather than
   growing past the screen, because it has to stay beside the blanks it is
   previewing. */
.wiz-preview .tpl-bubble { max-height: 60vh; overflow-y: auto; }

@media (max-width: 600px) {
  .tpl-grid { grid-template-columns: 1fr; }
  .wiz-step { padding: 6px 10px; font-size: .8rem; }
  /* The preview goes under the blanks and stops being sticky: a sticky panel
     taking half a phone screen leaves no room for the thing it previews. */
  .wiz-two { grid-template-columns: 1fr; }
  .wiz-preview { position: static; }
}

/* Named so nothing is styled by accident through a parent selector, and so a
   class that exists in the markup exists in the stylesheet. The var- ones are
   the wizard's own hooks; they inherit their size from .var-row above and are
   listed here so nothing appears in the HTML with no rule of its own. */
.tpl-body { white-space: pre-wrap; word-break: break-word; }


/* Where a blank sits in the message, beside its number. */
.var-where {
  font-size: .8rem; color: var(--ink-3); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.var-where b { color: var(--primary); font-weight: 600; }

/* Fallback values, one small box per field used in a blank. */
.var-fallbacks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fb-row {
  display: flex; align-items: center; gap: 8px; margin: 0;
  background: var(--panel-2); border-radius: 8px; padding: 4px 4px 4px 10px;
}
.fb-name { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.fb-in { width: 150px; padding: 5px 8px; font-size: .84rem; }

/* The one part of a screen that cannot be undone.
   Marked out rather than styled like everything else, so the eye stops before
   the hand does. */
.danger-zone { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.danger-zone .card-head h3 { color: var(--bad); }

/* The one bubble, wherever a template is previewed ------------------------- */
.wa-bubble {
  background: #DCF8C6; color: #111; border-radius: 10px; padding: 9px 11px;
  font-size: .88rem; line-height: 1.5; word-break: break-word;
}
.wa-header { font-weight: 700; margin-bottom: 5px; }
.wa-body { white-space: normal; }
.wa-media {
  background: rgba(0,0,0,.06); border-radius: 6px; padding: 16px; text-align: center;
  margin-bottom: 7px; color: #4a4a4a; font-size: .82rem;
}
.wa-footer { margin-top: 7px; font-size: .78rem; color: #667781; }
.wa-buttons { margin-top: 8px; }
.wa-buttons span {
  display: block; text-align: center; color: #1c7fd6; font-size: .86rem; padding: 7px 4px;
  border-top: 1px solid rgba(0,0,0,.09);
}

/* Why a campaign's messages did not arrive. Under the preview, because the two
   answer one question together: this is what you sent, and this is what
   happened to it. */
.fail-reasons { margin-top: 16px; }
.fail-reasons h4 { margin: 0 0 8px; font-size: .92rem; }
.fail-row {
  display: flex; gap: 10px; align-items: baseline; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: .86rem;
}
.fail-row:last-of-type { border-bottom: 0; }
.fail-n { flex: 0 0 auto; font-weight: 700; color: var(--bad); min-width: 42px; }

/* Closing a message by hand ------------------------------------------------ */
.alert { position: relative; padding-right: 40px; }
.alert-x, .toast-x {
  position: absolute; top: 6px; right: 8px;
  background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 1.35rem; opacity: .5; color: inherit; padding: 2px 6px;
}
.alert-x:hover, .toast-x:hover { opacity: 1; }
.toast { position: relative; padding-right: 38px; }
.toast-text { padding-right: 4px; }


/* The wizard's buttons, always reachable.
   The template grid is as tall as the templates in it, and choosing one meant
   scrolling past all of them to find Next. The bar follows instead. */
.wiz-bar {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--panel); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .06);
}
.wiz-bar .card-body { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* An anchor lands below the header, not behind it.
   The header sits over the page, so scrolling a heading to the very top hid its
   first lines underneath. scroll-margin moves the landing point down by the
   header's height plus a little air. */
.help-body :is(h1, h2, h3, h4) { scroll-margin-top: 92px; }

/* Tags in the contact panel ------------------------------------------------ */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--panel-2); border-radius: 20px; padding: 3px 6px 3px 11px;
  font-size: .78rem; color: var(--ink-2);
}
.tag-chip button {
  background: none; border: 0; cursor: pointer; color: inherit;
  opacity: .5; font-size: 1rem; line-height: 1; padding: 0 3px;
}
.tag-chip button:hover { opacity: 1; }
.panel-sec { margin: 14px 0; }
.panel-sec h4 { margin: 0 0 7px; font-size: .82rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }