@import url('colors_and_type.css');

/* ============================================================
   PULSIUM RECEPTION AGENT — CLIENT DASHBOARD
   Shared styles for both variations.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; border: 0; background: transparent; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* The visitor's own arrow, everywhere (owner decision, 6 Aug 2026): no
   hand on clickables and no I-beam over labels — the cursor never
   changes. Fields where the caret matters keep the text cursor. */
* { cursor: default; }
input, textarea, [contenteditable="true"] { cursor: text; }

/* ─────────────────────────────────────────────────────────────
   Shared atoms
   ───────────────────────────────────────────────────────────── */

.dot {
  width: 7px; height: 7px; border-radius: 999px;
  display: inline-block; flex-shrink: 0;
}
.dot--live { background: var(--status-success); }
.dot--idle { background: var(--fg-5); }

.pulse-dot {
  position: relative; width: 8px; height: 8px;
  border-radius: 999px; background: var(--status-success); flex-shrink: 0;
}
.pulse-dot::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 999px; background: var(--status-success);
  opacity: 0.4; animation: pul-pulse 1.6s var(--ease-out) infinite;
}
@keyframes pul-pulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

.eyebrow {
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600;
  color: var(--fg-4);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 600;
  color: var(--fg-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.chip svg { width: 13px; height: 13px; }
.chip--live {
  color: var(--status-success);
  background: var(--status-success-soft);
  border-color: transparent;
}

/* Segmented switch (house pattern): a white rounded pill holding the options.
   Unselected = white/transparent with black text; hover turns the text (and
   icon) brand blue; the selected option is a solid #1A73E8 pill with white
   text. */
.seg {
  display: inline-flex;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg__b {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  padding: 6px 13px;
  border-radius: 999px;
  color: var(--fg-1);
  background: transparent;
  transition: all var(--dur-fast) var(--ease-out);
}
.seg__b svg { width: 14px; height: 14px; }
.seg__b:hover:not(.is-on) { color: var(--accent); }
.seg__b:hover:not(.is-on) svg { color: var(--accent); }
.seg__b.is-on {
  background: var(--accent);
  color: #fff;
}
.seg__b.is-on svg { color: #fff; }
/* Full-width segmented bar — segments stretch to fill the row. */
.seg--wide { display: flex; width: 100%; }
.seg--wide .seg__b { flex: 1 1 0; justify-content: center; padding: 10px 13px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  color: var(--fg-3);
  transition: all var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover { background: var(--bg-muted); color: var(--fg-1); }
.btn-ghost svg { width: 14px; height: 14px; }

.icon-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  color: var(--fg-3);
  transition: all var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--bg-muted); color: var(--fg-1); }
.icon-btn svg { width: 16px; height: 16px; }

.avatar-grad {
  background: var(--gradient-pulse);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Outcome pill (booked / captured / answered) */
.outc {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.outc--booked   { color: var(--status-success); background: var(--status-success-soft); }
.outc--captured { color: var(--pul-violet); background: var(--pul-violet-tint); }
.outc--answered { color: var(--accent); background: var(--accent-soft); }
.outc--missed   { color: var(--status-danger); background: var(--status-danger-soft); }
.outc--review   { color: var(--status-warning); background: var(--status-warning-soft); }
.outc__dot { width: 5px; height: 5px; border-radius: 999px; }
.outc--booked   .outc__dot { background: var(--status-success); }
.outc--captured .outc__dot { background: var(--pul-violet); }
.outc--answered .outc__dot { background: var(--accent); }
.outc--missed   .outc__dot { background: var(--status-danger); }
.outc--review   .outc__dot { background: var(--status-warning); }

/* Products build-tracker (admin) */
.prod-bar { height: 6px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; width: 100%; }
.prod-bar__fill { height: 100%; border-radius: 999px; background: var(--status-success); transition: width .3s var(--ease-out, ease); }
.prod-seg { display: inline-flex; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); overflow: hidden; }
.prod-seg__btn { padding: 4px 11px; font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.4; border: 0; background: transparent; color: var(--fg-3); white-space: nowrap; }
.prod-seg__btn + .prod-seg__btn { border-left: 1px solid var(--border-subtle); }
.prod-seg__btn:hover:not(.is-on) { background: var(--bg-subtle); }
.prod-seg__btn:disabled { opacity: .5; cursor: default; }
.prod-seg__btn.is-on--done  { background: var(--status-success-soft); color: var(--status-success); }
.prod-seg__btn.is-on--partial { background: var(--status-warning-soft); color: var(--status-warning); }
.prod-seg__btn.is-on--todo  { background: var(--bg-muted); color: var(--fg-2); }

/* Mini sparkline (svg) — the one restrained accent */
.spark { color: var(--accent); display: block; }

/* Soft hairline */
.hr { height: 1px; background: var(--border-subtle); border: 0; }

/* ─────────────────────────────────────────────────────────────
   VARIATION A — "Editorial sidebar"
   Generous whitespace, asymmetric grid, big primary number.
   ───────────────────────────────────────────────────────────── */

/* Root column: the sidebar + main grid fills the full viewport. */
.vroot {
  width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.va {
  width: 100%; flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: minmax(0, 1fr);
  background: var(--bg-page);
  font-family: var(--font-body);
  color: var(--fg-1);
  overflow: hidden;
}

/* Fixed rail — the sidebar is always open at its full 232px, so every nav
   label is readable without hovering. It never collapses and never overlays
   the content: the grid column and the sidebar are the same width. */
.va__side {
  position: relative; z-index: 40;
  width: 232px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  padding: 24px 18px;
  display: flex; flex-direction: column; gap: 28px;
  white-space: nowrap;
}
/* Pin the glyph and the avatar to a fixed basis so a long label never
   squeezes them; the label itself keeps its full width. */
.va__nav-i svg { flex: 0 0 16px; }
.va__foot-av { flex-shrink: 0; }
/* Brand block — sphere on the left, business name beside it on the
   right (outside the sphere), mirroring the Pulsium master-brand
   lockup. No tenant switcher: the SPA only shows the signed-in
   client's own account. */
.va__brand {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px;
}
.va__brand-sphere {
  width: 28px; height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}
.va__brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--pul-charcoal);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.va__nav {
  display: flex; flex-direction: column; gap: 2px;
}
.va__nav-h {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-5);
  padding: 0 10px 6px;
}
.va__nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-caption);
  font-size: 10px; font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  min-width: 18px; text-align: center;
}
/* Live-call indicator on the Conversations nav item — a pulsing green dot +
   "Live" label, right-aligned like the badge. Present only while a call is on
   the wire (window.LIVE_CALL); clicking the item jumps straight into it. */
.va__nav-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
}
.va__nav-live-t {
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600;
  color: var(--status-success);
}
.va__nav-i {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--fg-3);
  font-weight: 500;
  font-family: var(--font-display);
  transition: all var(--dur-fast) var(--ease-out);
}
.va__nav-i:hover { background: var(--accent-soft-2); color: var(--fg-1); }
.va__nav-i.is-on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.va__nav-i.is-on svg { color: var(--accent); }
/* Reference active cue — a short accent bar flush with the sidebar's left edge. */
.va__nav-i.is-on::before {
  content: ""; position: absolute; left: -18px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.va__nav-i svg { width: 16px; height: 16px; }
/* Right-aligned chips on a nav item: a completeness % tag (Company Brain),
   or a faint sublabel ("workflow") flagging a forthcoming capability (Tasks). */
.va__nav-tag {
  margin-left: auto;
  font-family: var(--font-caption);
  font-size: 10px; font-weight: 600;
  color: var(--accent-ink); background: var(--accent-soft);
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.va__nav-cond {
  margin-left: auto;
  font-family: var(--font-caption);
  font-size: 9px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--fg-5);
}

.va__side-foot {
  position: relative;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: row; align-items: center; gap: 10px;
}
/* Owner identity (avatar + full name + role). Clicking it toggles the account
   menu (theme toggle / Settings / Sign out) that floats above. */
.va__foot-user {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 6px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  font: inherit;
  text-align: left;
  transition: all var(--dur-fast) var(--ease-out);
}
.va__foot-user:hover { background: var(--accent-soft-2); }
.va__foot-av {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600; font-size: 12px;
}
.va__foot-meta { min-width: 0; }
.va__foot-nm {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.va__foot-sub { font-size: 11px; color: var(--fg-4); }
.va__foot-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  color: var(--fg-3);
  transition: all var(--dur-fast) var(--ease-out);
}
.va__foot-ic:hover { background: var(--bg-subtle); color: var(--fg-1); }
.va__foot-ic svg { width: 18px; height: 18px; }

.va__main {
  padding: 32px 56px 40px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 28px;
}
.va__main--scroll { gap: 24px; }
.va__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.va__title-eye {
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 500;
  color: var(--fg-4);
  margin-bottom: 4px;
}
.va__title {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
/* margin-right reserves the top-right gutter for the fixed notification
   bell (see .notif) so header buttons never sit under it. */
/* Reserve the top-right gutter for the fixed bell + labeled theme pill so
   header controls (range segment, sub-tabs) never sit under them. */
.va__top-r { display: flex; align-items: center; gap: 12px; margin-right: 156px; }
@media (max-width: 720px) {
  .va__top-r { margin-right: 92px; }
}

/* Conversations, Action Required & Bookings headers align to the fixed bell
   exactly like the Home tab: the content's right edge meets the bell
   (right:32px), the range segment sits 14px to the bell's left (54px = bell
   width 40 + 14 gap), and the content top-pads to 22px so the segment's
   vertical centre lines up with the bell (top:20px) — the default .va__main
   32px top-pad sat the segment ~10px low. */
.convo-screen,
.actreq-screen,
.bookings-screen { padding-top: 22px; padding-right: 32px; }
.convo-screen .va__top,
.actreq-screen .va__top,
.bookings-screen .va__top { padding-bottom: 18px; }
.convo-screen .va__top-r,
.actreq-screen .va__top-r,
.bookings-screen .va__top-r { margin-right: 54px; }

/* Hero strip — primary metric on left, live call on right */
.va__hero {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 28px;
  align-items: stretch;
}

.va__primary {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 32px 36px;
  display: flex; flex-direction: column; gap: 20px;
  position: relative; overflow: hidden;
}
.va__primary::before {
  content: ''; position: absolute;
  right: -120px; top: -120px;
  width: 360px; height: 360px;
  background: var(--gradient-pulse-soft);
  border-radius: 999px;
  opacity: 0.55;
  pointer-events: none;
}
.va__primary-h {
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
}
.va__primary-l {
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.va__primary-num {
  font-family: var(--font-display);
  font-size: 96px; font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--fg-1);
  position: relative;
  font-feature-settings: "tnum" on;
}
.va__primary-sub {
  display: flex; align-items: baseline; gap: 16px;
  position: relative;
}
.va__primary-delta {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: var(--status-success);
  display: inline-flex; align-items: center; gap: 4px;
}
.va__primary-delta svg { width: 14px; height: 14px; }
.va__primary-vs {
  font-size: 13px; color: var(--fg-4);
}
.va__primary-spark { position: relative; margin-top: 6px; }

/* Live call card */
.va__live {
  background: var(--fg-1);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 24px 26px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
}
.va__live::before {
  content: ''; position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(91,208,238,0.18), transparent 50%),
              radial-gradient(circle at 10% 100%, rgba(94,61,174,0.22), transparent 55%);
  pointer-events: none;
}
.va__live-h {
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
}
.va__live-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600;
  color: #C9EEFB;
}
.va__live-time {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}
.va__live-caller {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
}
.va__live-name {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
}
.va__live-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}
.va__live-trans {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  flex: 1;
  min-height: 130px;
}
.va__t-row {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
}
.va__t-who {
  font-family: var(--font-caption);
  font-size: 10px; font-weight: 600;
  color: rgba(201,238,251,0.85);
  min-width: 56px;
  padding-top: 2px;
}
.va__t-who--cust { color: rgba(255,255,255,0.5); }
.va__t-text { color: rgba(255,255,255,0.92); flex: 1; }
.va__t-text--cust { color: rgba(255,255,255,0.7); }
.va__live-foot {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.va__live-foot b {
  font-family: var(--font-display);
  font-weight: 600;
  color: #C9EEFB;
}

/* Stats row — secondary metrics */
.va__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.va__stat {
  padding: 24px 26px;
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 8px;
}
.va__stat:last-child { border-right: 0; }
.va__stat--btn { text-align: left; transition: background var(--dur-fast) var(--ease-out); }
.va__stat--btn:hover { background: var(--bg-subtle); }
.va__stat-l {
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 500;
  color: var(--fg-4);
}
.va__stat-v {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  line-height: 1;
  font-feature-settings: "tnum" on;
}
.va__stat-v small {
  font-size: 18px; font-weight: 500;
  color: var(--fg-3); margin-left: 4px;
  letter-spacing: -0.01em;
}
.va__stat-d {
  font-size: 12px; color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 4px;
}
.va__stat-d b {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--status-success);
}
.va__stat-d.is-info b { color: var(--accent); }

/* Bottom strip: recent calls + reasons */
.va__bottom {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: stretch;
}

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px 22px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.panel__h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.panel__t {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.panel__sub {
  font-family: var(--font-caption);
  font-size: 12px; color: var(--fg-4);
  margin-top: 2px;
}

.calls {
  display: flex; flex-direction: column;
  margin: 0 -10px;
}
.call-row {
  display: grid;
  grid-template-columns: 56px 40px 1fr auto auto 38px;
  align-items: center;
  gap: 18px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  border-top: 1px solid var(--border-subtle);
  /* Explicit properties only (not `all`) so rapid row-to-row hover doesn't
     animate layout and feel jumpy. */
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.call-row:first-child { border-top: 0; }
.call-row:hover {
  background: var(--bg-subtle);
  border-top-color: transparent;
}
.call-row:hover + .call-row { border-top-color: transparent; }

.call-row__time {
  font-family: var(--font-display);
  font-feature-settings: "tnum" on;
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  text-align: left;
  line-height: 1.2;
}
.call-row__avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--pul-blue-tint), var(--pul-cyan-tint));
  color: var(--pul-violet);
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.call-row__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.call-row__name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 14px;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.call-row__reason {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.4;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.call-row__sep { color: var(--pul-grey-300); font-weight: 400; }
.call-row__reason small {
  font-family: var(--font-caption);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-4);
}
.call-row__dur {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" on;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
  white-space: nowrap;
}
.call-row__dur svg { width: 13px; height: 13px; color: var(--fg-5); }
.call-row__play {
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--pul-blue);
  border: 1px solid var(--border-subtle);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.call-row__play:hover {
  background: var(--pul-blue);
  border-color: var(--pul-blue);
  color: #fff;
}
.call-row__play:active { transform: scale(0.96); }
.call-row__play svg { width: 14px; height: 14px; margin-left: 1px; }

/* Reasons (top reasons people called) */
.reasons {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 4px;
}
.reason {
  display: flex; flex-direction: column; gap: 6px;
}
.reason__h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
  font-family: var(--font-display);
}
.reason__h b { font-weight: 600; color: var(--fg-1); }
.reason__h span {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}
.reason__bar {
  height: 6px; border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden; position: relative;
}
.reason__fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--gradient-pulse);
  transition: width var(--dur-slow) var(--ease-out);
}
.reason--mute .reason__fill {
  background: var(--pul-grey-300);
}

/* ─────────────────────────────────────────────────────────────
   DASHBOARD HERO V2 — minimalist single-card overview
   One viewport, no scroll. Replaces the old va__hero / va__stats /
   va__bottom layout. Other screens still use the va__* classes.
   ───────────────────────────────────────────────────────────── */

.va2-stage {
  /* The va parent grid gives us the column; this fills it and centers
     the card vertically + horizontally. The whole pane is one
     viewport — overflow hidden so the layout never scrolls. */
  padding: 36px 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-page);
}

.va2-card {
  position: relative;
  width: 100%;
  max-width: 880px;
  background: var(--bg-surface);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-subtle);
  padding: 36px 44px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
.va2-card::before {
  /* A whisper of the brand gradient in the top-right corner. Subtle
     enough that it reads as luxury, not theatre. */
  content: '';
  position: absolute;
  top: -180px; right: -180px;
  width: 420px; height: 420px;
  background: var(--gradient-pulse-soft);
  border-radius: 999px;
  opacity: 0.55;
  pointer-events: none;
}
.va2-card > * { position: relative; }

/* When we're live, swap the corner glow for a calmer, deeper accent
   so the dark live transcript reads as the focal point. */
.va2-card[data-state="live"]::before {
  background: radial-gradient(circle at 80% 20%, var(--pul-violet-tint) 0%, transparent 65%);
  opacity: 0.8;
}

/* Top: status pill + date */
.va2-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  min-height: 24px;
}
.va2-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-caption);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.va2-status b {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: 0;
  font-size: 13px;
}
.va2-status--live b { color: var(--status-success); }
.va2-status-sep { color: var(--pul-grey-300); }
.va2-status-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
}
.va2-date {
  font-family: var(--font-caption);
  font-size: 12px;
  color: var(--fg-4);
  letter-spacing: 0.02em;
}

/* Greeting */
.va2-greet {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin-top: 4px;
}
.va2-tagline {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-3);
  line-height: 1.5;
  margin: 0;
}
.va2-tagline b {
  color: var(--fg-1);
  font-weight: 600;
}

/* Body — fills the remaining card height; either standby or live. */
.va2-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 8px 0;
}

/* ── Standby body ───────────────────────────────────────────────── */

.va2-standby {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.va2-today {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 0 6px;
  border-top: 1px solid var(--border-subtle);
}
.va2-today-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fg-1);
  font-feature-settings: "tnum" on;
  min-width: 1ch;
}
.va2-today-cap {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 8px;
}
.va2-today-l {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--fg-2);
  letter-spacing: -0.01em;
}
.va2-today-mini {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-caption);
  font-size: 13px;
  color: var(--fg-3);
}
.va2-today-mini b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  font-feature-settings: "tnum" on;
}
.va2-today-sep {
  width: 3px; height: 3px; border-radius: 999px;
  background: var(--pul-grey-300);
  display: inline-block;
}

/* Active line panel */
.va2-line {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 22px;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}
.va2-line-divider {
  background: var(--border-subtle);
  width: 1px;
  align-self: stretch;
}
.va2-line-eye {
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600;
  color: var(--fg-4);
  margin-bottom: 4px;
}
.va2-line-v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" on;
}
.va2-line-s {
  font-family: var(--font-caption);
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 2px;
}

/* ── Live body ──────────────────────────────────────────────────── */

.va2-live {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: var(--fg-1);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.va2-live::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(91,208,238,0.16), transparent 50%),
              radial-gradient(circle at 10% 100%, rgba(94,61,174,0.20), transparent 55%);
  pointer-events: none;
}
.va2-live > * { position: relative; }
.va2-live-h {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.va2-live-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.015em;
}
.va2-live-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  margin-top: 2px;
}
.va2-live-intent { text-align: right; }
.va2-live-eye {
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600;
  color: rgba(201,238,251,0.8);
}
.va2-live-vint {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: #C9EEFB;
  margin-top: 2px;
}
.va2-live-transcript {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 110px;
}
.va2-live-empty {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-style: italic;
}
.va2-live-row {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.5;
}
.va2-live-who {
  font-family: var(--font-caption);
  font-size: 10px; font-weight: 600;
  color: rgba(201,238,251,0.8);
  min-width: 56px;
  padding-top: 2px;
}
.va2-live-row--cust .va2-live-who { color: rgba(255,255,255,0.5); }
.va2-live-text { color: rgba(255,255,255,0.92); flex: 1; }
.va2-live-row--cust .va2-live-text { color: rgba(255,255,255,0.7); }

/* Actions footer */
.va2-actions {
  display: flex; align-items: center; gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 4px;
}
.va2-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--accent-on);
  background: var(--accent);
  transition: background var(--dur-fast) var(--ease-out);
}
.va2-cta:hover {
  background: var(--accent-hover);
}
.va2-cta:active { transform: scale(0.99); }
.va2-cta:disabled {
  background: var(--bg-muted);
  color: var(--fg-4);

  transform: none;
}
.va2-cta svg { width: 16px; height: 16px; }
.va2-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-2);
  transition: all var(--dur-fast) var(--ease-out);
}
.va2-link:hover {
  background: var(--bg-muted);
  color: var(--fg-1);
}
.va2-link svg { width: 14px; height: 14px; }
.va2-link--quiet { color: var(--fg-3); margin-left: auto; }

/* ─────────────────────────────────────────────────────────────
   SUPPORT CONCIERGE
   Single-section AI chat that triages tenant questions and
   packages them as tickets in platform/support/tickets.
   ───────────────────────────────────────────────────────────── */

.sup-chat {
  position: relative;
  flex: 0 0 auto;     /* prevent flex-column parent from squashing the panel */
  width: 100%;
  max-width: 760px;
  margin: 12px auto 28px;
  padding: 22px 24px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--pul-blue) 14%, transparent), transparent 55%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--pul-blue) 8%, transparent), transparent 50%),
    var(--surface-2);
  min-height: 560px;
  display: flex;
  flex-direction: column;
}
.sup-chat::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--pul-blue) 70%, transparent) 30%,
    color-mix(in srgb, var(--pul-blue) 70%, transparent) 70%,
    transparent 100%);
  opacity: 0.6;
  pointer-events: none;
}

/* Split layout — chat panel + info rail. The panel drops the decorative
   gradient wash and centering of the old hero design; it sits flush-left
   in a two-column grid with the rail. */
.sup2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: 1160px;
  margin: 4px auto 24px;
}
.sup2__sub {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--fg-3);
}
.sup-chat--split {
  max-width: none;
  margin: 0;
  background: var(--bg-surface);
  box-shadow: none;
}
.sup-chat--split::before { display: none; }

.sup-chat__chips {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.sup-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.sup-chip:hover {
  border-color: var(--pul-blue);
  color: var(--pul-blue);
}
.sup-chip svg { width: 14px; height: 14px; color: var(--pul-blue); }

/* Info rail — requests and human contact. Scrolls with the page; its top
   stays level with the chat panel's top. */
.suprail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.suprail__card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: 16px 18px;
}
.suprail__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.suprail__t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}
.suprail__rows { display: flex; flex-direction: column; }
.suprail__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 600;
}
.suprail__empty {
  padding: 8px 0 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-4);
}
/* Each request is a row that expands in place to its detail (thread,
   reply composer) — the rail is the one and only request list. */
.suprail__tk + .suprail__tk { border-top: 1px solid var(--border-subtle); }
.suprail__req {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: transparent;
  text-align: left;
}
/* Status pills line up as one column: equal minimum width, centered text,
   never wrapping onto two lines. */
.suprail__req .outc {
  flex: 0 0 auto;
  justify-content: center;
  min-width: 76px;
  white-space: nowrap;
}
.suprail__req-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.suprail__req-subj {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suprail__req:hover .suprail__req-subj { color: var(--pul-blue); }
.suprail__req-meta { font-size: 11.5px; color: var(--fg-4); }
/* Expand affordance — a small chevron that rotates when the row is open. */
.suprail__chev {
  flex: 0 0 auto;
  color: var(--fg-4);
  transition: transform 0.15s ease;
}
.suprail__chev.is-open { transform: rotate(90deg); }
.suprail__tkbody { padding: 2px 0 12px; }
.suprail__tktext {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-2);
  white-space: pre-wrap;
  margin-bottom: 10px;
}
.suprail__tkbody .sup-thread { margin-bottom: 10px; }
.suprail__tkbody .sup-thmsg { max-width: 100%; }

/* Ticket-created card — rendered inside the thread once a ticket is
   submitted. Muted fill, no border: it sits inside the bordered panel. */
.sup-ticketcard {
  margin: 2px 0 4px 37px;   /* aligns with assistant bubbles (avatar + gap) */
  max-width: 540px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-subtle);
  animation: sup-pop 0.32s var(--ease-out, ease-out);
}
.sup-ticketcard__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}
.sup-ticketcard__head svg { color: var(--pul-blue); }
.sup-ticketcard__subj {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fg-1);
}
.sup-ticketcard__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.sup-ticketcard__note { font-size: 12px; color: var(--fg-4); }
@keyframes sup-pop {
  0% { transform: scale(0.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 1080px) {
  .sup2 { grid-template-columns: 1fr; }
  .suprail { position: static; }
}

.sup-chat__head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 14px;
}
.sup-chat__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.sup-chat__head-text { flex: 1 1 auto; min-width: 0; }
.sup-chat__head-t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.sup-chat__head-s {
  font-size: 12.5px;
  color: var(--fg-3);
  margin-top: 1px;
}
.sup-chat__pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--status-success) 14%, transparent);
  color: var(--status-success);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.sup-chat__pulse {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--status-success, #1f9d62);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-success, #1f9d62) 55%, transparent);
  animation: sup-pulse 1.3s cubic-bezier(0.35, 0, 0.35, 1) infinite;
}
@keyframes sup-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--status-success, #1f9d62) 55%, transparent); }
  60%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-success, #1f9d62) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--status-success, #1f9d62) 0%,  transparent); }
}

.sup-chat__scroll {
  flex: 1 1 auto;
  min-height: 360px;
  max-height: 540px;
  overflow-y: auto;
  padding: 4px 2px 6px;
  scrollbar-width: thin;
}
.sup-chat__feed {
  display: flex; flex-direction: column; gap: 14px;
}

.sup-msg {
  display: flex; align-items: flex-end; gap: 9px;
  max-width: 100%;
}
.sup-msg--assistant { justify-content: flex-start; }
.sup-msg--user      { justify-content: flex-end; }

.sup-msg__avatar {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 2px;
}

.sup-msg__bubble {
  max-width: 540px;
  padding: 11px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.sup-msg--assistant .sup-msg__bubble {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--fg-1);
  border-top-left-radius: 6px;
}
.sup-msg--user .sup-msg__bubble {
  background: color-mix(in srgb, var(--pul-blue) 14%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--pul-blue) 22%, transparent);
  color: var(--fg-1);
  border-top-right-radius: 6px;
}

.sup-msg__bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 13px 16px;
}
.sup-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fg-3);
  animation: sup-bounce 1.2s ease-in-out infinite;
}
.sup-dot:nth-child(2) { animation-delay: 0.15s; }
.sup-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes sup-bounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.5; }
  40%           { transform: translateY(-4px); opacity: 1;   }
}

.sup-chat__err {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 8px 12px;
  margin-top: 4px;
  border-radius: 10px;
  background: var(--status-danger-soft);
  border: 1px solid var(--status-danger-soft);
  color: var(--status-danger);
  font-size: 12.5px;
}
.sup-chat__err svg { width: 14px; height: 14px; }

.sup-chat__compose {
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.sup-chat__ready {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pul-blue) 8%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--pul-blue) 22%, transparent);
  color: var(--fg-1);
  font-size: 13px;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.sup-chat__ready:hover { background: color-mix(in srgb, var(--pul-blue) 14%, var(--bg-surface)); }
.sup-chat__ready svg { width: 16px; height: 16px; color: var(--pul-blue); flex: 0 0 auto; }
.sup-chat__ready b { font-weight: 600; color: var(--pul-blue); }

.sup-chat__input-wrap {
  position: relative;
  display: flex; align-items: flex-end; gap: 0;
  padding: 6px 8px;
  border-radius: 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sup-chat__input-wrap:hover,
.sup-chat__input-wrap:focus-within {
  border-color: var(--pul-blue);
}
.sup-chat__input {
  flex: 1 1 auto;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
  padding: 8px 6px;
  max-height: 160px;
  overflow-y: auto;
}
.sup-chat__input::placeholder { color: var(--fg-3); }

/* Icon-only send — transparent so it reads as part of the field, with the
   accent paper-plane gliding up-and-away on hover (matches onboarding). */
.sup-chat__send {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 34px;
  padding: 0; border: 0; border-radius: 999px;
  background: transparent;
  color: var(--accent);
  transition: color var(--dur-fast) var(--ease-out);
}
.sup-chat__send:hover:not(:disabled) { color: var(--accent-hover); }
.sup-chat__send:hover:not(:disabled) svg { transform: translate(2px, -2px); }
.sup-chat__send:disabled { color: var(--fg-4); opacity: 0.5; }
.sup-chat__send svg { width: 18px; height: 18px; transition: transform 300ms var(--ease-out); }

.sup-chat__attached {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.sup-chat__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 6px 8px 6px 6px;
  border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}
.sup-chat__chip-thumb {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-surface);
}
.sup-chat__chip-thumb--file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
}
.sup-chat__chip-thumb--file svg { width: 16px; height: 16px; }
.sup-chat__chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
}
.sup-chat__chip-name {
  font-weight: 500;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sup-chat__chip-size {
  color: var(--fg-4);
  font-size: 11px;
}
.sup-chat__chip-rm {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--fg-3);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sup-chat__chip-rm:hover:not(:disabled) {
  background: var(--bg-muted, rgba(0,0,0,0.06));
  color: var(--fg-1);
}
.sup-chat__chip-rm svg { width: 12px; height: 12px; }
.sup-chat__chip-rm:disabled { opacity: 0.5; }

.sup-chat__file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}
.sup-chat__attach {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 34px;
  color: var(--fg-3);
  background: transparent;
  transition: color var(--dur-fast) var(--ease-out);
}
/* No hover circle — the clip just turns blue. */
.sup-chat__attach:hover:not(:disabled) { color: var(--accent); }
.sup-chat__attach:disabled { color: var(--fg-4); }
.sup-chat__attach svg { width: 18px; height: 18px; }

/* Preview card (replaces the input area once the AI has packaged a ticket) */
.sup-preview {
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 12px;
}
.sup-preview__head {
  display: flex; align-items: center; gap: 12px;
}
.sup-preview__head svg { width: 18px; height: 18px; color: var(--pul-blue); flex: 0 0 auto; }
.sup-preview__head > div { flex: 1 1 auto; min-width: 0; }
.sup-preview__t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fg-1);
}
.sup-preview__s {
  font-size: 12.5px;
  color: var(--fg-3);
  margin-top: 1px;
}

.sup-cat {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.sup-cat--bug      { background: color-mix(in srgb, var(--status-danger) 14%, transparent); color: var(--status-danger); }
.sup-cat--feature  { background: color-mix(in srgb, var(--pul-blue) 14%, transparent); color: var(--pul-blue); }
.sup-cat--help     { background: color-mix(in srgb, var(--status-success) 14%, transparent); color: var(--status-success); }
.sup-cat--billing  { background: color-mix(in srgb, #C77A00 14%, transparent); color: #9A5F00; }
.sup-cat--other    { background: var(--bg-muted); color: var(--fg-2); }

.sup-preview__field { display: flex; flex-direction: column; gap: 6px; }
.sup-preview__l {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
}
.sup-preview__input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sup-preview__input:focus {
  border-color: var(--pul-blue);
}
.sup-preview__input--body {
  resize: vertical;
  min-height: 200px;
  max-height: 480px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  line-height: 1.55;
}
.sup-preview__actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 4px;
}

.sup-preview--sending { align-items: center; justify-content: center; }
.sup-preview__sending {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--fg-2);
  font-size: 13px;
}

/* Call-report ticket extras: a "Call report" tag, a deep link to the call,
   an in-app message thread, and an inline reply composer (all render
   inside the rail's expanded request rows). */
.sup-cat--report { background: color-mix(in srgb, var(--pul-violet) 14%, transparent); color: var(--pul-violet); }
.sup-tk__viewcall {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px; padding: 6px 11px;
  border: 1px solid var(--border-subtle); border-radius: 9px;
  background: var(--bg-surface); color: var(--fg-2);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500; 
}
.sup-tk__viewcall:hover { border-color: var(--pul-blue); color: var(--pul-blue); }
.sup-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sup-thmsg {
  display: flex; flex-direction: column; gap: 3px;
  max-width: 88%; padding: 8px 11px; border-radius: 11px;
}
.sup-thmsg--client { align-self: flex-end; background: var(--accent-soft); }
.sup-thmsg--admin  { align-self: flex-start; background: var(--bg-muted); }
.sup-thmsg__who { font-size: 11px; font-weight: 600; color: var(--fg-3); }
.sup-thmsg__txt { font-size: 13px; line-height: 1.5; color: var(--fg-1); white-space: pre-wrap; }
.sup-reply { display: flex; gap: 8px; align-items: flex-end; }
.sup-reply__ta {
  flex: 1; box-sizing: border-box; resize: none;
  padding: 8px 11px; border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-surface); color: var(--fg-1);
  font-family: var(--font-body); font-size: 13px;
}
.sup-reply__ta:focus { outline: none; border-color: var(--accent); }
.sup-reply__send {
  flex: none; height: 34px; padding: 0 14px; border-radius: 10px;
  border: 0; background: var(--accent); color: var(--accent-on);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; 
}
.sup-reply__send:disabled { opacity: 0.5; }
.sup-tk__closed { font-size: 12.5px; color: var(--fg-3); }

@media (max-width: 720px) {
  .sup-chat { padding: 18px 16px 14px; min-height: 480px; }
  .sup-msg__bubble { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   TEST CALL MODAL
   Reuses /static/media-handler.js for mic/camera/screen capture;
   talks to /api/portal/test-call/ws/{token} for Gemini Live.
   ───────────────────────────────────────────────────────────── */

.tcm-scrim {
  position: fixed; inset: 0;
  z-index: 1100;
  background: rgba(20, 18, 24, 0.55);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: tcm-fade-in 200ms var(--ease-out);
}
@keyframes tcm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tcm {
  width: 100%;
  max-width: 1080px;
  /* Definite height so ``grid-template-rows: auto minmax(0, 1fr)``
     actually divides space instead of auto-sizing the body row.
     Without a definite height, the ``1fr`` fell back to content-
     intrinsic, and the modal slowly grew as transcript messages
     accumulated — operators reported this as "the popup keeps
     getting bigger and bigger". */
  height: min(720px, calc(100vh - 48px));
  background: var(--bg-surface);
  border-radius: var(--radius-2xl);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  animation: tcm-pop-in 240ms var(--ease-out);
}
@keyframes tcm-pop-in {
  from { transform: translateY(8px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0)   scale(1);     opacity: 1; }
}

.tcm-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--border-subtle);
}
.tcm-h-t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0;
}
.tcm-h-r {
  display: inline-flex; align-items: center; gap: 10px;
}
/* Call timer — a clean black pill with tabular-figure digits (so the
   width never jitters as the seconds tick) and a soft pulsing "live" dot,
   the convention for an in-progress call in modern call UIs. */
.tcm-time {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: #fff;
  padding: 5px 11px 5px 9px;
  border-radius: var(--radius-pill);
  background: var(--fg-1, #1b1b1f);
}
.tcm-time-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #34D399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: tcmTimeDot 1.6s ease-out infinite;
}
@keyframes tcmTimeDot {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
/* Close cross. An icon button states itself in its own stroke — no chip,
   circle or fill materializes behind it on hover — and the color carries
   the meaning: a cross dismisses, so it goes red. */
.tcm-x {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.tcm-x:hover { color: var(--status-danger); }
.tcm-x svg { width: 18px; height: 18px; }

.tcm-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  min-height: 0;
}

.tcm-stage {
  padding: 24px 26px;
  background: var(--bg-subtle);
  display: flex; flex-direction: column;
  gap: 18px;
  border-right: 1px solid var(--border-subtle);
  min-height: 0;
}
.tcm-video {
  position: relative;
  flex: 1;
  min-height: 280px;
  border-radius: var(--radius-lg);
  /* Dashboard card surface (white) so the transparent sphere logo sits on
     the same colour as every other card — not a dark stage. */
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.tcm-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
.tcm-video.is-on video { display: block; }
.tcm-video.is-on .tcm-video-empty { display: none; }
.tcm-video-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; text-align: center;
  padding: 24px;
  color: var(--fg-3);
}
/* The Pulsium sphere — no ring, no border, no container circle; it floats
   straight on the card. --orb-level (0..1) is written every animation
   frame by the modal's rAF loop while the line is live and drives the
   scale + glow; idle (pre-connect / ended) runs the gentle CSS breathe
   instead. */
.tcm-orb {
  --orb-level: 0;
  width: 160px; height: 160px;
  display: grid; place-items: center;
}
.tcm-orb img {
  width: 100%; height: 100%;
  user-select: none;
  animation: tcm-orb-breathe 5s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(76, 91, 224, 0.18));
  will-change: transform, filter;
}
.tcm-orb.is-live img {
  animation: none;
  transform: scale(calc(1 + var(--orb-level) * 0.18));
  filter: drop-shadow(0 0 calc(8px + var(--orb-level) * 30px) rgba(76, 91, 224, calc(0.20 + var(--orb-level) * 0.5)));
}
@keyframes tcm-orb-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
.tcm-video-l {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
  color: var(--fg-3);
  letter-spacing: -0.005em;
  max-width: 320px;
  line-height: 1.5;
}

/* Controls — large soft buttons, primary action emphasised */
.tcm-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.tcm-ctl {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  color: var(--fg-2);
  transition: all var(--dur-fast) var(--ease-out);
}
.tcm-ctl:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.tcm-ctl:active:not(:disabled) { transform: scale(0.98); }
.tcm-ctl:disabled {
  opacity: 0.45; 
}
.tcm-ctl svg {
  width: 20px; height: 20px;
  color: var(--fg-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.tcm-ctl:hover:not(:disabled) svg { color: var(--accent); }
.tcm-ctl.is-on {
  background: var(--pul-violet-tint);
  border-color: var(--pul-violet);
  color: var(--pul-violet);
}
.tcm-ctl.is-on svg { color: var(--pul-violet); }
.tcm-ctl--end {
  background: var(--status-danger-soft);
  border-color: var(--status-danger-soft);
  color: var(--status-danger);
}
.tcm-ctl--end svg { color: var(--status-danger); }
.tcm-ctl--end:hover:not(:disabled) {
  background: var(--status-danger);
  border-color: var(--status-danger);
  color: #fff;
}
.tcm-ctl--end:hover:not(:disabled) svg { color: #fff; }
.tcm-ctl--go {
  background: var(--pul-ink);
  border-color: var(--pul-ink);
  color: #fff;
}
.tcm-ctl--go svg { color: #fff; }
.tcm-ctl--go:hover:not(:disabled) {
  background: #000;
  border-color: #000;
  color: #fff;
}
.tcm-ctl--go:hover:not(:disabled) svg { color: #fff; }

/* Side rail — Live Transcript only */
.tcm-side {
  padding: 24px 26px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0;
}
.tcm-transcript-wrap {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
  min-height: 0;
}
.tcm-transcript-eye {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.tcm-transcript {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: 14px 16px;
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px;
  scrollbar-width: thin;
}
.tcm-transcript-empty {
  color: var(--fg-4);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 24px 8px;
}
.tcm-msg {
  display: flex; flex-direction: column; gap: 3px;
  max-width: 92%;
}
.tcm-msg-who {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0;
  /* Sentence case (only the first letter capital), matching the onboarding
     transcript — never an all-caps eyebrow. The caller ("You") reads as a
     quiet neutral so the agent's brand-blue label leads the exchange. */
  text-transform: none;
  color: #5F6368;
}
/* Agent ("Ella") label in the onboarding accent blue. */
.tcm-msg--agent .tcm-msg-who { color: var(--accent); }
.tcm-msg-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-1);
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bg-subtle);
}
.tcm-msg--cust { align-self: flex-end; align-items: flex-end; }
.tcm-msg--cust .tcm-msg-text {
  background: var(--pul-blue-tint);
  color: var(--fg-1);
}
.tcm-msg--agent .tcm-msg-text {
  background: var(--pul-violet-tint);
}

/* Tool call / response rows — full-width, monospace body so the
   operator can read the model's actual arguments + return payload.
   Differs from caller/agent rows so the eye can pick out tool
   activity without parsing every speaker label. */
.tcm-msg--tool {
  align-self: stretch;
  max-width: 100%;
}
.tcm-msg--tool .tcm-msg-text--code {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--fg-2);
}
.tcm-msg--tool-call .tcm-msg-text--code {
  border-left: 3px solid var(--pul-violet, #7c3aed);
}
.tcm-msg--tool-resp .tcm-msg-text--code {
  border-left: 3px solid var(--pul-blue, #2563eb);
}

/* The send button lives INSIDE the text field, tucked against its right
   edge — same pattern as the onboarding chat composer. The form is the
   positioning context; the input reserves right padding so typed text
   never runs under the button. */
.tcm-compose {
  position: relative;
  display: flex; align-items: center;
  margin-top: 4px;
}
.tcm-compose-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 46px 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--fg-1);
  outline: none;
  min-width: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.tcm-compose-input::placeholder { color: var(--fg-4); }
.tcm-compose-input:hover:not(:disabled) { border-color: var(--accent); }
.tcm-compose-input:focus {
  border-color: var(--accent);
}
.tcm-compose-input:disabled {
  background: var(--bg-subtle);
  color: var(--fg-4);

}
/* Icon-only send button — transparent so it reads as part of the field,
   with the accent paper-plane gliding up-and-away on hover. */
.tcm-compose-send {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--accent);
  transition: color 150ms ease;
}
.tcm-compose-send:hover:not(:disabled) { color: var(--accent-hover); }
.tcm-compose-send:hover:not(:disabled) svg { transform: translate(2px, -2px); }
.tcm-compose-send:disabled { opacity: 0.4; }
.tcm-compose-send svg {
  width: 18px; height: 18px;
  transition: transform 300ms ease;
}

/* Responsive — smaller laptops still get the no-scroll one-card layout */
@media (max-width: 1100px) {
  .va2-stage { padding: 24px 32px; }
  .va2-card { padding: 28px 32px 22px; max-width: 720px; }
  .va2-greet { font-size: 32px; }
  .va2-today-num { font-size: 80px; }
}
@media (max-height: 760px) {
  .va2-stage { padding: 18px 32px; }
  .va2-card { padding: 24px 32px 18px; gap: 12px; }
  .va2-greet { font-size: 30px; }
  .va2-today-num { font-size: 72px; }
  .va2-today { padding: 12px 0 4px; }
}
@media (max-width: 880px) {
  .tcm-body { grid-template-columns: 1fr; }
  .tcm-stage { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
}

/* ─────────────────────────────────────────────────────────────
   VARIATION B — "Single page report"
   No sidebar, centered, editorial spacing.
   ───────────────────────────────────────────────────────────── */

.vb {
  width: 1440px; height: 960px;
  background: var(--bg-page);
  font-family: var(--font-body);
  color: var(--fg-1);
  overflow: hidden;
  position: relative;
}
.vb::before {
  content: ''; position: absolute;
  top: -160px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse at center, var(--pul-cyan-tint) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}

.vb__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 40px 40px;
  display: flex; flex-direction: column;
  height: 100%;
  gap: 32px;
}

.vb__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.vb__top-l {
  display: flex; align-items: center; gap: 14px;
}
.vb__top-l img { width: 32px; height: 32px; }
.vb__top-tline {
  font-family: var(--font-display);
  font-weight: 700; font-size: 16px;
  color: var(--pul-charcoal);
  letter-spacing: -0.015em;
}
.vb__top-sub {
  font-family: var(--font-caption);
  font-size: 12px; color: var(--fg-4);
  margin-top: 1px;
}
.vb__top-r { display: flex; align-items: center; gap: 10px; }

/* Hero number row — the headline */
.vb__hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: end;
  padding: 8px 0 0;
}
.vb__hero-l {
  display: flex; flex-direction: column; gap: 16px;
}
.vb__hero-eye {
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 500;
  color: var(--fg-4);
  letter-spacing: 0.04em;
}
.vb__hero-eye b {
  color: var(--fg-1);
  font-weight: 600;
}
.vb__hero-num {
  font-family: var(--font-display);
  font-size: 132px; font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--fg-1);
  font-feature-settings: "tnum" on;
}
.vb__hero-cap {
  font-family: var(--font-display);
  font-weight: 500; font-size: 18px;
  color: var(--fg-3);
  letter-spacing: -0.01em;
  max-width: 420px;
}
.vb__hero-cap b {
  color: var(--fg-1);
  font-weight: 700;
}

.vb__hero-r {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
}
.vb__qstat {
  padding: 14px 0 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 4px;
}
.vb__qstat-l {
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 500;
  color: var(--fg-4);
}
.vb__qstat-v {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  line-height: 1;
  font-feature-settings: "tnum" on;
  display: flex; align-items: baseline; gap: 8px;
}
.vb__qstat-v small {
  font-size: 16px; font-weight: 500;
  color: var(--fg-3);
  letter-spacing: -0.01em;
}
.vb__qstat-d {
  font-family: var(--font-caption);
  font-size: 12px; color: var(--fg-3);
}
.vb__qstat-d b { color: var(--status-success); font-weight: 600; }

/* Main grid — calls list + side rail */
.vb__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  flex: 1;
  min-height: 0;
}
.vb__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vb__col-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding-bottom: 4px;
}
.vb__col-t {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.015em;
}
.vb__col-sub {
  font-family: var(--font-caption);
  font-size: 12px; color: var(--fg-4);
}

/* Calls list — minimal, no card wrapper */
.vb__calls {
  display: flex; flex-direction: column;
}
.vb__call {
  display: grid;
  grid-template-columns: 50px 1fr 110px 90px 32px;
  align-items: center;
  gap: 16px;
  padding: 16px 6px;
  border-top: 1px solid var(--border-subtle);
  transition: all var(--dur-fast) var(--ease-out);
}
.vb__call:first-child { border-top: 1px solid var(--border-subtle); }
.vb__call:hover { background: rgba(110, 143, 227, 0.03); padding-left: 12px; padding-right: 12px; margin: 0 -6px; }
.vb__call-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-4);
  letter-spacing: 0.02em;
}
.vb__call-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.vb__call-reason {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 2px;
}
.vb__call-dur {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
}
.vb__call-play {
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--fg-3);
  border: 1px solid var(--border-subtle);
  transition: all var(--dur-fast) var(--ease-out);
}
.vb__call-play:hover {
  background: var(--pul-blue);
  color: #fff;
  border-color: var(--pul-blue);
}
.vb__call-play svg { width: 12px; height: 12px; margin-left: 1px; }

/* Side rail */
.vb__side { display: flex; flex-direction: column; gap: 22px; }

/* Live call (slim, light theme) */
.vb__live {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
}
.vb__live::before {
  content: ''; position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(91,208,238,0.08), transparent 30%);
  pointer-events: none;
}
.vb__live-h {
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
}
.vb__live-eye {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600;
  color: var(--status-success);
}
.vb__live-time {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--fg-4);
}
.vb__live-name {
  position: relative;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.vb__live-meta {
  position: relative;
  font-size: 13px; color: var(--fg-3);
}
.vb__live-quote {
  position: relative;
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
  border-left: 2px solid var(--pul-blue);
}
.vb__live-quote span {
  display: block;
  font-family: var(--font-caption);
  font-size: 10px; font-weight: 600;
  color: var(--fg-4);
  margin-bottom: 4px;
}

/* Reasons (vertical stacked bar style) */
.vb__reasons {
  display: flex; flex-direction: column; gap: 14px;
}
.vb__reason-bar {
  display: flex;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-muted);
}
.vb__reason-seg {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-caption);
  font-size: 11px;
  font-weight: 600;
}
.vb__reason-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
.vb__reason-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  font-family: var(--font-caption);
  color: var(--fg-3);
}
.vb__reason-item b {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin-left: auto;
  font-weight: 600;
}
.vb__reason-swatch {
  width: 9px; height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Footer signature */
.vb__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-caption);
  font-size: 11px; color: var(--fg-4);
}
.vb__foot b {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-3);
}


/* ─────────────────────────────────────────────────────────────
   NEW SCREENS — Calls, Bookings, Messages, Settings
   ───────────────────────────────────────────────────────────── */

.screen-grid { display: flex; flex-direction: column; gap: 18px; }

/* Calls page */
.fcall {
  border-top: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out);
}
.fcall:first-of-type { border-top: 0; }
.fcall.is-open { background: var(--bg-subtle); border-radius: var(--radius-md); }
.fcall__row {
  display: grid;
  grid-template-columns: 1fr auto 24px;
  align-items: center;
  gap: 16px;
  padding: 14px 14px;
  width: 100%;
  text-align: left;
  background: transparent;
}
.fcall:not(.is-open) .fcall__row:hover { background: var(--bg-subtle); }
.fcall__primary { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fcall__titlerow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fcall__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* "Live" pill on the in-progress call's row — pulsing dot + label, never
   shrinks so it stays visible next to a long caller name. */
.fcall__live {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none;
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600; color: var(--status-success);
}
/* The tint sits on the whole .fcall container (not just the inner row
   button) so the Listen button and the player strip share one seamless
   surface — no white gutter beside the button. */
.fcall.is-live { background: color-mix(in srgb, var(--status-success) 5%, transparent); border-radius: var(--radius-md); }
.fcall.is-live:not(.is-open) .fcall__row:hover { background: color-mix(in srgb, var(--status-success) 5%, transparent); }

/* Listen button on the live row (sits beside the row button inside
   .fcall__head — a nested button would be invalid markup). White pill
   with a solid green border so it reads as a control on the tinted row. */
.fcall__listen {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none;
  align-self: center;
  margin-right: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 600;
  color: var(--status-success);
  background: var(--bg-surface);
  border: 1px solid var(--status-success);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.fcall__listen:hover {
  background: color-mix(in srgb, var(--status-success) 8%, transparent);
}

/* Live-listen player strip under the live row — transparent so it
   continues the row's tint (one surface, no second panel). */
.llisten {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 14px 12px;
  font-family: var(--font-caption);
  font-size: 13px;
}
.llisten__dot { display: inline-flex; flex: none; }
.llisten__label { color: var(--fg-1); font-weight: 600; }
.llisten__label--err { color: var(--fg-2); font-weight: 500; }
.llisten__time { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.llisten__stop {
  margin-left: auto;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--fg-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.llisten__stop:hover {
  color: var(--fg-1);
  border-color: var(--border-default, var(--border-subtle));
}

/* Open-conversation actions row (Email summary, …) + the email composer. */
.cdetail__actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
.cdetail__actbtn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  color: var(--fg-2); font-family: var(--font-body);
  font-size: 12px; font-weight: var(--fw-medium);
  padding: 6px 12px; border-radius: var(--radius-pill);
 transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cdetail__actbtn:hover { background: var(--bg-subtle); }
.cdetail__actbtn:disabled { opacity: 0.5; }
.cdetail__actbtn svg { width: 14px; height: 14px; color: var(--fg-4); }

.esum-scrim {
  position: fixed; inset: 0; z-index: 970;
  background: rgba(0, 0, 0, 0.42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.esum {
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  background: var(--bg-surface); border-radius: 16px;
  border: 1px solid var(--border-subtle);
  padding: 18px 20px 20px;
}
.esum__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.esum__title { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--fg-1); }
.esum__x {
  display: inline-flex; padding: 6px; background: transparent;
  color: var(--fg-2); 
  transition: color var(--dur-fast) var(--ease-out);
}
.esum__x:hover { color: var(--status-danger); }
.esum__field { display: block; margin-bottom: 14px; }
.esum__lbl { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--fg-3); margin-bottom: 6px; }
.esum__opt { font-weight: 400; color: var(--fg-5); }
.esum__input, .esum__textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-base); color: var(--fg-1);
  font-family: var(--font-body); font-size: 14px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.esum__textarea { resize: none; }
/* The whole email is edited in one box — give it room and let it scroll. */
.esum__textarea--tall { min-height: 240px; max-height: 46vh; overflow-y: auto; resize: vertical; line-height: 1.5; white-space: pre-wrap; }
.esum__input:hover, .esum__textarea:hover,
.esum__input:focus, .esum__textarea:focus { outline: none; border-color: var(--accent); }
.esum__incs { display: flex; flex-wrap: wrap; gap: 8px; }
.esum__inc { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 13.5px; color: var(--fg-2); }
.esum__inc.is-disabled { color: var(--fg-5); }
.esum__hint { margin-top: 7px; font-family: var(--font-body); font-size: 12px; color: var(--fg-4); }
.esum__note { margin: 0 0 14px; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.esum__ai { display: flex; gap: 8px; margin: -6px 0 14px; }
.esum__ai-hint { flex: 1; padding: 7px 11px; font-size: 13px; }
.esum__ai-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 34px; padding: 0 13px; border-radius: 10px;
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  color: var(--fg-2); font-family: var(--font-body); font-size: 13px; font-weight: 600; 
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.esum__ai-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.esum__ai-btn:active:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.esum__ai-btn:disabled { opacity: 0.6; }
.esum__err {
  margin-bottom: 12px; padding: 9px 11px; border-radius: 10px;
  background: var(--status-danger-soft); color: var(--status-danger);
  font-family: var(--font-body); font-size: 13px;
}
.esum__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.esum__cancel, .esum__send {
  height: 38px; padding: 0 18px; border-radius: 10px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; 
}
.esum__cancel { border: 1px solid var(--border-subtle); background: transparent; color: var(--fg-2); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.esum__cancel:hover { border-color: var(--accent); color: var(--accent); }
.esum__cancel:active { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.esum__send { border: 0; background: var(--accent); color: var(--accent-on); }
.esum__send:disabled { opacity: 0.5; }
.esum__done { display: flex; align-items: center; gap: 9px; padding: 18px 4px; color: var(--status-success); font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.fcall__meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--fg-3);
  min-width: 0;
}
.fcall__meta-i {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.fcall__meta-i + .fcall__meta-i::before {
  content: '·';
  margin-right: 10px;
  color: var(--fg-4);
}
.fcall__when {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-3);
  white-space: nowrap;
}
.fcall__when-day { color: var(--fg-2); font-weight: var(--fw-medium); }
.fcall__when-time { font-family: var(--font-mono); color: var(--fg-4); }
.fcall__chev { color: var(--fg-4); display: inline-flex; align-items: center; justify-content: center; }
.fcall__chev svg { width: 16px; height: 16px; }

/* Support tickets reuse .fcall to share the row shell + hover/border
   treatment. They render time/name/body in a different shape, so these
   text classes stay in the file even though Conversations no longer
   uses them. */
.fcall__time { font-family: var(--font-mono); font-size: 12px; color: var(--fg-4); }
.fcall__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcall__name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg-1); }
.fcall__sum  { font-size: 13px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inline pill used on rows AND the detail header. Neutral default; the
   variant suffixes (--existing, --new, --booked, etc.) tint it. */
.fcall__pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-caption);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--bg-muted);
  color: var(--fg-3);
}
.fcall__pill--existing  { background: var(--accent-soft);     color: var(--accent); }
.fcall__pill--new       { background: var(--pul-violet-tint); color: var(--pul-violet); }
.fcall__pill--booked    { background: var(--status-success-soft); color: var(--status-success); }
.fcall__pill--captured  { background: var(--pul-violet-tint); color: var(--pul-violet); }
.fcall__pill--answered  { background: var(--accent-soft);     color: var(--accent); }
.fcall__pill--info_only,
.fcall__pill--enquiry   { background: var(--accent-soft);     color: var(--accent); }
.fcall__pill--missed,
.fcall__pill--dropped,
.fcall__pill--no_answer { background: var(--status-danger-soft);  color: var(--status-danger); }
.fcall__pill--error     { background: var(--status-danger-soft);  color: var(--status-danger); }
.fcall__pill--complaint { background: var(--status-warning-soft); color: var(--status-warning); }
.fcall__pill--escalated { background: var(--status-danger-soft);  color: var(--status-danger); }
.fcall__pill--urgent    { background: var(--status-danger-soft);  color: var(--status-danger); font-weight: 700; }
/* Communication inbox statuses (pending / resolved / dismissed). */
.fcall__pill--pending   { background: var(--status-warning-soft); color: var(--status-warning); }
.fcall__pill--actioned  { background: var(--status-success-soft); color: var(--status-success); }
.fcall__pill--dismissed { background: var(--bg-muted);        color: var(--fg-3); }
/* Needs-action triage: who it's assigned to + a "handled" marker. */
.fcall__pill--assignee  { background: var(--accent-soft-2);   color: var(--accent-ink); }
.fcall__pill--done      { background: var(--status-success-soft); color: var(--status-success); }

/* Quick "Mark done" affordance on a needs-action row — a sibling of the row
   button (buttons can't nest). Icon-only in the narrow Conversations list. */
.fcall__done {
  flex-shrink: 0;
  align-self: center;
  margin-right: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--status-success);
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.fcall__done:hover:not(:disabled) { background: var(--status-success-soft); border-color: var(--status-success); }
.fcall__done:disabled { opacity: 0.5; cursor: default; }

.fcall__expand {
  padding: 0 14px 18px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ── Conversation detail (single-column, inline expand) ─────────── */
.cdetail {
  display: flex; flex-direction: column; gap: 14px;
  /* Fill the open row's full width — the recording, AI summary and transcript
     all stretch edge to edge instead of leaving a wide empty gutter on the
     right (the old 820px reading-column cap). */
  max-width: none;
  padding: 14px 14px 18px;
}
/* The detail opens straight on the quiet facts line — the caller's name leads
   the accordion row above, so it isn't repeated here. */
.cdetail__head { display: flex; flex-direction: column; gap: 8px; }
.cdetail__pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* Quiet inline facts row — replaces the old 280px details rail. */
.cdetail__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 0;
  font-size: 12.5px;
  color: var(--fg-3);
  margin-top: -2px;
}
.cdetail__meta-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cdetail__meta-item svg { color: var(--fg-4); flex: none; }
.cdetail__meta-item + .cdetail__meta-item::before { content: "·"; margin: 0 9px; color: var(--fg-4); }
.cdetail__meta-item--link { color: var(--accent); text-decoration: none; }
.cdetail__meta-item--link:hover { text-decoration: underline; }
.cdetail__meta-item--link svg { color: var(--accent); }
/* Summary / Transcript — segmented control. */
.cdetail__tabs {
  display: inline-flex; gap: 2px;
  align-self: flex-start;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-top: 2px;
}
.cdetail__tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  color: var(--fg-3);
  padding: 6px 14px;
  border: 0; background: transparent;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.cdetail__tab:hover { color: var(--fg-1); }
.cdetail__tab.is-on {
  color: var(--fg-1);
  background: var(--bg-surface);
}
.cdetail__tab-c {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.cdetail__tab.is-on .cdetail__tab-c { background: var(--pul-violet-tint); color: var(--pul-violet); }
.cdetail__body { min-height: 80px; }

/* ── Action Required — CRM action list ──────────────────────────────────
   A single-column queue of what needs a human. Deliberately NOT the call log:
   no transcript, no recording, no inline detail pane — each card says what to
   DO and links out to Conversations for the full call. */
/* ── Action Required ──────────────────────────────────────────────────────
   Three summary cards, a Needs you / Handled / All stage filter, then one
   card per task. Summary cards and task cards share the dashboard's lift +
   blue-border hover (the same treatment the home KPIs use). */
.actq { display: flex; flex-direction: column; gap: 18px; }

/* Summary strip — three even cards on the page surface (no wrapping panel, so
   no nested borders). */
.actq__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.actq__sum {
  display: flex; flex-direction: column; min-width: 0;
  padding: 20px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  transition: border-color var(--dur-base) var(--ease-out);
}
.actq__sum:hover {
  border-color: var(--accent);
}
.actq__sum-lbl { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg-4); }
.actq__sum-num {
  margin-top: 10px; font-family: var(--font-display); font-size: 32px; font-weight: 700;
  line-height: 1.1; color: var(--fg-1);
}
.actq__sum-strong {
  margin-top: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 700;
  line-height: 1.25; color: var(--fg-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.actq__sum-sub { margin-top: 6px; font-size: 13px; color: var(--fg-4); }

/* Stage filter — the house segmented pill (same pattern as .seg): white pill
   container, solid blue selected pill with white text, blue text on hover. */
.actq__filters {
  display: inline-flex; align-self: flex-start; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.actq__filter {
  padding: 7px 16px; border-radius: 999px;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 500;
  color: var(--fg-1); background: transparent; border: 0; 
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.actq__filter:hover:not(.is-on) { color: var(--accent); }
.actq__filter.is-on {
  background: var(--accent); color: var(--fg-on-brand); font-weight: 600;
}

/* Task cards — one row per task: a colored kind-icon, the task and who it's
   about, then the two actions. */
.actq__cards { display: flex; flex-direction: column; gap: 10px; }
.actq__card {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  animation: actqRowIn 0.28s var(--ease-out) backwards;
  transition: border-color var(--dur-base) var(--ease-out);
}
.actq__card:hover {
  border-color: var(--accent);
}
@keyframes actqRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .actq__card { animation: none; } }

/* Kind icon — a bare colored glyph (no box), the fast visual class. */
.actq__ic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
}
.actq__ic svg { width: 21px; height: 21px; }
.actq__ic--danger  { color: var(--status-danger); }
.actq__ic--warning { color: var(--status-warning); }
.actq__ic--accent  { color: var(--accent); }
.actq__ic--success { color: var(--status-success); }

.actq__card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.actq__card-title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--fg-1); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.actq__card-meta {
  font-size: 12.5px; color: var(--fg-3); line-height: 1.45;
  overflow-wrap: break-word;
}

.actq__card-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.actq__act {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 16px; border-radius: 10px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
  transition: filter var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.actq__act svg { width: 15px; height: 15px; flex: none; }
.actq__act:active:not(:disabled) { transform: scale(0.97); }
.actq__act:disabled { opacity: 0.6; cursor: default; }
.actq__act--open { background: var(--bg-surface); color: var(--fg-1); border-color: var(--border-default); }
.actq__act--open:hover:not(:disabled) { background: var(--bg-surface); color: var(--accent); border-color: var(--accent); }
.actq__act--open:active:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--fg-on-brand); }
.actq__act--handled { background: var(--accent); color: var(--fg-on-brand); }
.actq__act--handled:hover:not(:disabled) { filter: brightness(1.06); }
.actq__act--reopen { background: var(--accent); color: var(--fg-on-brand); }
.actq__act--reopen:hover:not(:disabled) { filter: brightness(1.06); }

/* Phone: summary stacks; each card becomes icon + text on the first line
   with a clean 50/50 button row underneath — buttons share one width, sit
   inside the card padding, and hit the 44px touch target. */
@media (max-width: 768px) { /* PHONE */
  .actq__summary { grid-template-columns: 1fr; }
  .actq__card { flex-wrap: wrap; align-items: flex-start; row-gap: 12px; padding: 14px 16px; }
  .actq__ic { margin-top: 1px; }
  .actq__card-body { flex-basis: calc(100% - 48px); }
  .actq__card-actions { width: 100%; display: flex; gap: 8px; }
  .actq__act { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; padding: 0 8px; gap: 6px; font-size: 13px; }
  .actq__act span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .actq__act svg { flex: none; }
}

/* Empty state, still used by the Email inbox reader (mail3) for its
   no-selection pane. */
.convo3__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 380px; gap: 6px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  padding: 40px 24px;
}
.convo3__empty-sphere img { width: 54px; height: 54px; opacity: 0.85; margin-bottom: 6px; }
.convo3__empty-t { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--fg-1); }
.convo3__empty-s { font-size: 13px; color: var(--fg-4); max-width: 320px; line-height: 1.5; }

/* Chevron rotates from ▸ to ▾ as a row opens (admin-app call log). */
.fcall__chev svg { transition: transform var(--dur-fast) var(--ease-out); }
.fcall.is-open .fcall__chev svg { transform: rotate(90deg); }

@keyframes fcall-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Full in-app inbox (Communication → Email) — 3-pane webmail: rail | list | reader */
.mail3 {
  display: grid;
  grid-template-columns: 200px 340px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.mail3__rail { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; }
.mail3__compose { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mail3__compose i { width: 16px; height: 16px; }
.mail3__folders { display: flex; flex-direction: column; gap: 2px; }
.mail3__folder {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 0; background: transparent; border-radius: var(--radius-md, 10px);
  font-size: 13.5px; color: var(--fg-2, #333); text-align: left; width: 100%;
}
.mail3__folder:hover { background: var(--bg-subtle, #f5f5f5); }
.mail3__folder.is-on { background: var(--accent-soft, #eaf0fe); color: var(--accent, #4977e7); font-weight: 600; }
.mail3__count { font-size: 12px; font-weight: 600; color: var(--accent, #4977e7); }
.mail3__rail-sep { font-size: 11px; color: var(--fg-4, #9a9a9a); padding: 8px 10px 2px; }
.mail3__acct { font-size: 11.5px; color: var(--fg-4, #9a9a9a); padding: 8px 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mail3__list { position: sticky; top: 0; max-height: calc(100vh - 200px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mail3__search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-subtle, #f5f5f5); border-radius: var(--radius-md, 10px); margin-bottom: 6px; position: sticky; top: 0; }
.mail3__search i { width: 15px; height: 15px; color: var(--fg-4, #9a9a9a); }
.mail3__search input { border: 0; background: transparent; font: inherit; font-size: 13.5px; flex: 1; outline: none; color: var(--fg-1, #1a1a1a); }
.mail3__row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 0; background: transparent; border-radius: var(--radius-md, 10px); text-align: left; width: 100%; border-bottom: 1px solid var(--border-subtle, #eee); }
.mail3__row:hover { background: var(--bg-subtle, #f5f5f5); }
.mail3__row.is-open { background: var(--accent-soft, #eaf0fe); box-shadow: inset 2px 0 0 var(--accent, #4977e7); }
.mail3__row.is-unread .mail3__row-from, .mail3__row.is-unread .mail3__row-subj { font-weight: 700; color: var(--fg-1, #1a1a1a); }
.mail3__row-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.mail3__row-from { color: var(--fg-1, #1a1a1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail3__row-date { color: var(--fg-4, #9a9a9a); font-size: 12px; flex-shrink: 0; }
.mail3__row-subj { font-size: 13px; color: var(--fg-2, #333); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.mail3__row-n { color: var(--fg-4, #9a9a9a); font-weight: 600; }
.mail3__clip { width: 13px; height: 13px; color: var(--fg-4, #9a9a9a); }
.mail3__row-snip { font-size: 12px; color: var(--fg-4, #9a9a9a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail3__more { margin: 10px auto; padding: 8px 16px; border: 1px solid var(--border-default, #ddd); border-radius: var(--radius-md, 10px); background: transparent; font-size: 13px; color: var(--fg-2, #333); }
.mail3__hint { padding: 24px 12px; color: var(--fg-3, #8a8a8a); font-size: 13px; text-align: center; }

.mail3__reader { min-width: 0; }
.mail3__thread-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mail3__thread-head h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--fg-1, #1a1a1a); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mail3__msg { border: 1px solid var(--border-subtle, #e0e0e0); border-radius: var(--radius-lg, 14px); padding: 12px 14px; margin-bottom: 12px; }
.mail3__msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mail3__msg-email { color: var(--fg-4, #9a9a9a); font-size: 12.5px; }
.mail3__msg-date { color: var(--fg-4, #9a9a9a); font-size: 12px; flex-shrink: 0; }
.mail3__msg-to { color: var(--fg-4, #9a9a9a); font-size: 12px; margin: 2px 0 8px; }
.mail3__frame { width: 100%; border: 0; min-height: 60px; background: var(--bg-surface); border-radius: 8px; }
.mail3__plain { white-space: pre-wrap; word-break: break-word; font: 14px/1.55 inherit; color: var(--fg-1, #1a1a1a); margin: 0; }
.mail3__imgbar { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-3, #8a8a8a); background: var(--bg-subtle, #f5f5f5); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.mail3__atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mail3__att { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--border-subtle, #e0e0e0); border-radius: 8px; color: var(--accent, #4977e7); text-decoration: none; }
.mail3__att i { width: 14px; height: 14px; }

.mail3__composer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.mail3__composer { background: var(--bg-card, #fff); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 14px); padding: 18px; width: min(640px, 100%); max-height: 90vh; overflow: auto; }
.mail3__composer-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.mail3__x { border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--fg-3, #8a8a8a); padding: 0 4px; transition: color var(--dur-fast) var(--ease-out); }
.mail3__x:hover { color: var(--status-danger); }
.mail3__link { border: 0; background: transparent; color: var(--accent, #4977e7); font-size: 12.5px; align-self: flex-start; padding: 0; }

@media (max-width: 1040px) {
  .mail3 { grid-template-columns: 1fr; }
  .mail3__rail { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .mail3__folders { flex-direction: row; flex-wrap: wrap; }
  .mail3__list { position: static; max-height: none; overflow: visible; }
}

@media (max-width: 768px) { /* PHONE */
  /* Drill-in: rail + list are the "list" page, the reader is the "detail"
     page (data-drill on .mail3 hides the inactive side — see the phone
     section). The folder rail scrolls sideways as one chip row. */
  .mail3__rail { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .mail3__folders { flex-wrap: nowrap; }
  .mail3__folder { white-space: nowrap; min-height: 40px; }
  .mail3__acct { display: none; }
  .mail3__row { min-height: 56px; }
  .mail3__att { min-height: 44px; display: inline-flex; align-items: center; }
  .mail3__frame { max-width: 100%; }
  /* Composer + templates ride up as a full-width sheet. */
  .mail3__composer-backdrop { align-items: flex-end; padding: 0; }
  .mail3__composer {
    width: 100%; border-radius: 18px 18px 0 0;
    max-height: 92dvh;
    padding-bottom: calc(16px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
  }
}

/* Recording player — neutral light surface, tighter rhythm. */
.player {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  color: var(--fg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

/* No-recording stand-in: replaces the dead player with an icon + honest
   reason (item 3). Same shell as .player so it sits flush in the panel. */
.player--empty { gap: 12px; }
.player__empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-1, #fff);
  color: var(--fg-3);
  border: 1px solid var(--border-subtle);
}
.player__empty-icon svg { width: 18px; height: 18px; }
.player__empty-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.player__empty-t { font-weight: 600; color: var(--fg-1); font-size: 13px; }
.player__empty-s { color: var(--fg-3); font-size: 12px; }

/* Transcript inside expanded call */
.trscript {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.trscript__h {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.trscript__row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; padding: 4px 0; }
/* Left column: speaker on top, the wall-clock time (HH:MM:SS) beneath it. */
.trscript__meta { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.trscript__who {
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600;
  color: var(--fg-4);
  letter-spacing: 0.04em;
}
.trscript__ts {
  font-family: var(--font-caption);
  font-size: 10.5px; font-weight: 500;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.trscript__row--agent .trscript__who { color: var(--pul-blue); }
.trscript__text { font-size: 14px; color: var(--fg-1); line-height: 1.55; }
.trscript__row--agent .trscript__text { color: var(--fg-2); }
/* In-flight (streaming) live-transcript line — softer until it finalises. */
.trscript__row--partial .trscript__text { color: var(--fg-3); font-style: italic; }
.trscript__row--partial .trscript__text::after {
  content: '…';
  color: var(--fg-4);
}

/* Messages page */
.msg-help {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  background: var(--pul-cyan-tint);
  border: 1px solid color-mix(in srgb, var(--pul-cyan) 38%, var(--border-subtle));
  border-radius: var(--radius-md);
  font-size: 13px; color: var(--fg-2); line-height: 1.5;
}
.msg-help svg { width: 16px; height: 16px; color: var(--pul-blue); flex-shrink: 0; margin-top: 1px; }
.msg-empty {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 64px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.msg-empty__sphere { width: 80px; height: 80px; opacity: 0.85; }
.msg-empty__sphere img { width: 100%; height: 100%; }
.msg-empty__t {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--fg-1); letter-spacing: -0.015em;
}
.msg-empty__s { font-size: 14px; color: var(--fg-3); max-width: 380px; line-height: 1.5; }
/* Nested inside a .panel the empty state already has a bordered container,
   so drop its own border/fill — no redundant inner box line, just the logo
   and text. Standalone .msg-empty (Action queue, Bookings) keeps its card. */
.panel .msg-empty {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.mrow {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  width: 100%;
  padding: 14px 14px;
  border-radius: var(--radius-md);
  text-align: left;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out);
}
.mrow:hover { background: var(--bg-subtle); }
.mrow__avatar {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--gradient-pulse);
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mrow__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mrow__name {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--fg-1); display: inline-flex; align-items: center; gap: 8px;
}
.mrow__dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--pul-blue);
}
.mrow__time { font-family: var(--font-mono); font-size: 12px; color: var(--fg-4); }
.mrow__rel { font-family: var(--font-caption); font-size: 11px; color: var(--fg-4); }
.mrow__prev { font-size: 13px; color: var(--fg-2); margin-top: 2px; line-height: 1.45; }
.mrow.is-unread .mrow__prev { color: var(--fg-1); font-weight: 500; }

/* Reset statistics (Reception Agent → Settings, admin-only go-live control) */
.rstats {
  transition: border-color var(--dur-base) var(--ease-out);
}
.rstats:hover {
  border-color: var(--status-danger, #D93025);
}
.rstats__t { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--fg-1); letter-spacing: -0.01em; }
.rstats__foot { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.rstats__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 18px;
  background: var(--status-danger, #D93025); color: #fff;
  border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.rstats__btn:hover { opacity: 0.9; }
.rstats__btn:disabled { opacity: 0.5; cursor: default; }
.rstats__btn svg, .rstats__btn i { width: 14px; height: 14px; }

/* Reset-statistics confirm dialog — small, centered, branded. Replaces the
   native window.confirm(); Cancel (left) / Reset Statistics (right, red). */
.rdlg-scrim {
  position: fixed; inset: 0; z-index: 980;
  background: rgba(0, 0, 0, 0.42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.rdlg {
  width: 100%; max-width: 380px;
  background: var(--bg-surface); border-radius: 16px;
  border: 1px solid var(--border-subtle);
  padding: 26px 24px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.rdlg__logo { width: 48px; height: 48px; border-radius: 50%; margin-bottom: 14px; }
.rdlg__t { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--fg-1); letter-spacing: -0.01em; }
.rdlg__s { font-size: 13px; color: var(--fg-3); margin-top: 8px; line-height: 1.55; }
.rdlg__foot { display: flex; gap: 10px; margin-top: 20px; width: 100%; }
.rdlg__cancel, .rdlg__confirm {
  flex: 1; height: 40px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.rdlg__cancel { border: 1px solid var(--border-subtle); background: transparent; color: var(--fg-2); }
.rdlg__cancel:hover { background: var(--bg-subtle); }
.rdlg__confirm { border: 0; background: var(--status-danger, #D93025); color: #fff; }
.rdlg__confirm:hover { opacity: 0.9; }

/* Settings */
.set-panel { padding: 24px 26px; gap: 18px; }
.set-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.set-h__t {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  color: var(--fg-1); letter-spacing: -0.015em;
}
.set-h__s { font-size: 13px; color: var(--fg-3); margin-top: 4px; max-width: 540px; line-height: 1.5; }
.set-h__switch { align-self: center; flex: 0 0 auto; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 18px;
  background: var(--accent); color: var(--accent-on);
  border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary svg { width: 14px; height: 14px; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 6px; }
.set-field { display: flex; flex-direction: column; gap: 6px; }
.set-field__l {
  font-family: var(--font-display); font-weight: 500; font-size: 13px;
  color: var(--fg-1);
}
.set-field__h { font-family: var(--font-caption); font-size: 11px; color: var(--fg-4); }
.set-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 14px;
  color: var(--fg-1);
  background: var(--bg-surface);
  outline: none;
  resize: none; /* the drag-corner grip reads as an unfinished control — no textarea in the set-input scale shows it */
  transition: all var(--dur-fast) var(--ease-out);
}
.set-input:hover { border-color: var(--pul-blue); }
.set-input:focus { border-color: var(--pul-blue); box-shadow: none; }

/* Knowledge base */
.kb { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.kb__item {
  display: grid; grid-template-columns: 220px 1fr auto;
  align-items: start; gap: 18px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--dur-fast) var(--ease-out);
}
.kb__item:hover { border-color: var(--pul-blue); }
.kb__q {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--fg-1); letter-spacing: -0.005em;
}
.kb__q svg { width: 14px; height: 14px; color: var(--pul-blue); flex-shrink: 0; }
.kb__a { font-size: 13px; color: var(--fg-3); line-height: 1.55; }
.kb__edit {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  color: var(--fg-3);
  padding: 6px 10px;
  border-radius: 8px;
  transition: all var(--dur-fast) var(--ease-out);
}
.kb__edit svg { width: 12px; height: 12px; }
.kb__edit:hover { background: var(--bg-surface); color: var(--pul-blue); }

/* Knowledge base — write area */
.kbw {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.kbw:focus-within { border-color: var(--fg-1); }
.kbw__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}
.kbw__hint {
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600;
  color: var(--fg-4);
}
.kbw__saved {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-caption);
  font-size: 12px; color: var(--fg-3);
}
.kbw__saved svg { width: 13px; height: 13px; color: var(--accent-success); }
.kbw__area {
  width: 100%;
  min-height: 360px;
  border: 0;
  padding: 18px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-1);
  background: var(--bg-surface);
  resize: vertical;
  outline: none;
}
.kbw__area::placeholder { color: var(--fg-5); }

/* Knowledge base — uploads */
.kbu__drop {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  transition: all var(--dur-fast) var(--ease-out);
}
.kbu__drop:hover {
  border-color: var(--fg-1);
  background: var(--bg-surface);
}
.kbu__drop > svg {
  width: 28px; height: 28px;
  color: var(--fg-3);
  flex-shrink: 0;
}
.kbu__drop-t {
  font-family: var(--font-display);
  font-weight: 600; font-size: 14px;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.kbu__drop-s {
  font-family: var(--font-caption);
  font-size: 12px; color: var(--fg-4);
  margin-top: 2px;
}
.kbu__list {
  display: flex; flex-direction: column;
  margin-top: 12px;
}
.kbu__row {
  display: grid;
  grid-template-columns: 44px 1fr auto 32px;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-top: 1px solid var(--border-subtle);
}
.kbu__row:first-child { border-top: 0; }
.kbu__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--fg-1);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
}
.kbu__icon[data-ext="DOC"] { background: var(--pul-grey-700); }
.kbu__icon[data-ext="TXT"] { background: var(--pul-grey-500); }
.kbu__main { min-width: 0; }
.kbu__name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 14px;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kbu__meta {
  font-family: var(--font-caption);
  font-size: 12px; color: var(--fg-4);
  margin-top: 2px;
  display: inline-flex; align-items: center; gap: 6px;
}
.kbu__meta span { color: var(--pul-grey-300); }
.kbu__status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 500;
  color: var(--fg-3);
}
.kbu__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-success);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-success) 18%, transparent);
}
.kbu__rm {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  color: var(--fg-4);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.kbu__rm svg { width: 14px; height: 14px; }
.kbu__rm:hover { color: var(--accent-danger); background: var(--bg-subtle); }

/* Voices */
.voices {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-top: 4px;
}
.voice {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  padding: 12px 14px;
  text-align: left;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
}
.voice:hover { border-color: var(--accent); }
.voice.is-on {
  border-color: var(--accent);
  background: var(--bg-surface);
}
.voice__avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-pill);
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
}
.voice__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.voice__check {
  width: 20px; height: 20px; flex: none;
  border-radius: var(--radius-pill);
  background: var(--status-success); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.voice__check svg { width: 12px; height: 12px; }
.voice__name {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--fg-1); letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.voice__meta { font-family: var(--font-caption); font-size: 11px; color: var(--fg-4); font-weight: 600; }
.voice__tone { font-size: 13px; color: var(--fg-3); margin-top: 2px; }
/* Circular black play button — no label, filled glyph. Stays black while
   playing; only the glyph swaps play -> pause. */
.voice__playbtn {
  appearance: none; -webkit-appearance: none;
  flex: none;
  width: 42px; height: 42px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--fg-1);
  color: var(--bg-surface, #fff);
  display: inline-flex; align-items: center; justify-content: center;
 position: relative;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.voice__playbtn svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; margin-left: 1px; }
/* While playing, the button keeps its black fill — only the glyph swaps to the
   pause bars (which sit centred, so drop the play triangle's optical nudge). */
.voice__playbtn.is-playing svg { margin-left: 0; }

/* Voice picker — "Choose a voice" label + Female/Male gender toggle. Each
   card gets a gender-coloured left accent so the grid reads at a glance. */
.agentcfg__voice-head { margin-top: 8px; }
.agentcfg__voice-lbl {
  display: block; margin-bottom: 3px;
  font-family: var(--font-display); font-size: 16px;
  font-weight: var(--fw-semibold, 600); color: var(--fg-1);
  letter-spacing: -0.005em;
}
.agentcfg__voice-sub {
  font-family: var(--font-body); font-size: 12.5px; color: var(--fg-3);
  line-height: 1.5; max-width: 560px;
}
.agentcfg__voice-gender { margin-bottom: 14px; }

/* ── Agent config: Channels tab (chtab__*) ───────────────────────────────── */
/* A list of separate cards: every channel sits in its own bordered white box
   (matched to the persona-tab field cards) with a light gap between rows.
   Locked channels (Email / WhatsApp / Socials) grey out with a "Coming soon"
   pill until they ship. Expanding a live row reveals the management panel
   inside the same card. */
.chtab { display: flex; flex-direction: column; gap: 10px; }
.chtab__row {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface, #fff);
}
.chtab__head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
}
.chtab__row.is-expanded {
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.chtab__row.is-locked .chtab__ic { color: var(--fg-3); }
.chtab__row.is-locked .chtab__label { color: var(--fg-3); }
.chtab__soon {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border-subtle);
  font-family: var(--font-caption); font-size: 12px; font-weight: 600;
  color: var(--fg-3);
}
/* Inline management panel revealed under a row's "Manage" button. Flat white
   so the expanded row reads as one clean card, not a tinted well. */
.chtab__panel {
  padding: 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  display: flex; flex-direction: column; gap: 14px;
}
.chtab__panel--widget { padding: 14px 16px; }
/* Active number block — a bordered row (label + Remove) matched to the
   transfer-target rows. */
.chtab__active { display: flex; flex-direction: column; gap: 8px; }
.chtab__active-h {
  font-family: var(--font-display); font-weight: 650; font-size: 14px; color: var(--fg-1);
  letter-spacing: -0.005em;
}
/* Web widget config — website field + embed snippet. */
.widgetcfg { display: flex; flex-direction: column; gap: 18px; }
.widgetcfg__field { display: flex; flex-direction: column; gap: 6px; }
.widgetcfg__field-h { display: flex; align-items: center; gap: 10px; }
.widgetcfg__field-l {
  font-family: var(--font-display); font-weight: 650; font-size: 14px; color: var(--fg-1);
}
.widgetcfg__hint { font-size: 12px; color: var(--fg-3); }
.widgetcfg__saved { font-size: 12px; color: var(--accent); }
.widgetcfg__err { font-size: 12px; color: var(--status-danger); }
/* Hug a domain — a decent width, not the full panel. */
.widgetcfg__site { width: 100%; max-width: 360px; }

/* Embed snippet — one bordered row (matched to the transfer rows): code on the
   left, copy button on the right, no hover lift. */
.widgetsnip {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.widgetsnip__code {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5; color: var(--fg-1);
  white-space: pre-wrap; word-break: break-all;
}
/* Parent-qualified so these beat .btn-secondary (equal-specificity, later in
   file) — otherwise its padding squeezes the icon to zero width. */
.widgetsnip .widgetsnip__copy { flex: none; height: 34px; width: 34px; padding: 0; }
.widgetsnip .widgetsnip__copy svg { width: 14px; height: 14px; }
.chtab__ic {
  flex: none; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pul-blue);
}
.chtab__ic svg { width: 20px; height: 20px; }
.chtab__body { min-width: 0; margin-right: auto; }
.chtab__label {
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg-1);
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.chtab__ctl { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.chtab__manage {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 16px;
  background: var(--bg-surface);
  color: var(--fg-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.chtab__manage:hover { background: var(--bg-surface); border-color: var(--accent); color: var(--accent); }

/* ── Agent config: Knowledge Hub tab (khub__*) ───────────────────────────── */
.khub { display: flex; flex-direction: column; gap: 18px; }
.khub__shared {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--pul-blue-tint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.khub__shared-ic {
  flex: none; width: 38px; height: 38px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-pulse); color: #fff;
}
.khub__shared-ic svg { width: 19px; height: 19px; }
.khub__shared-body { min-width: 0; margin-right: auto; }
.khub__shared-t { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--fg-1); }
.khub__shared-s { margin-top: 3px; font-size: 12.5px; color: var(--fg-3); line-height: 1.45; }
.khub__add-l { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--fg-1); }
.khub__add-s { margin: 4px 0 10px; font-size: 12.5px; color: var(--fg-3); line-height: 1.45; }

/* ── Automation tab (auto__*) — embedded per-clinic automation engine ─────── */
/* Ready state: the iframe fills the whole main pane flush (no padding), so the
   embedded builder reads as a native screen. .va__main is a flex column with a
   height-constrained body, so the iframe just flexes to fill it. */
.auto__main { padding: 0; gap: 0; overflow: hidden; }
.auto__frame {
  flex: 1 1 auto; width: 100%; min-height: 0; border: 0; display: block;
  background: var(--bg-surface);
}
.auto__sub { font-size: 13.5px; color: var(--fg-3); margin-top: 4px; }

/* Loading / provisioning / disabled / error states share one centered card. */
.auto__state { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auto__card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; max-width: 460px; padding: 40px 28px;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.auto__badge {
  width: 52px; height: 52px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-pulse); color: #fff;
}
.auto__badge svg { width: 26px; height: 26px; }
.auto__badge--warn { background: var(--bg-muted); color: var(--fg-2); }
.auto__spin {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--pul-blue);
}
.auto__spin svg { width: 32px; height: 32px; animation: auto-spin 0.9s linear infinite; }
@keyframes auto-spin { to { transform: rotate(360deg); } }
.auto__t { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--fg-1); }
.auto__s { font-size: 13.5px; line-height: 1.55; color: var(--fg-3); }
.auto__retry {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: 13px; font-weight: 600; color: var(--fg-1); 
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  padding: 8px 16px; border-radius: var(--radius-pill);
}
.auto__retry:hover { background: var(--bg-subtle); }
.auto__retry svg { width: 15px; height: 15px; }

/* ============================================================
   Client Portal redesign (May 2026) — net-new component styles
   Conventions inherited from the rest of this file:
     * Single global stylesheet; design tokens live in colors_and_type.css.
     * Honest-zero empty states reuse .msg-empty.
     * Existing primitives — .panel, .va__top, .va__stats, .seg, .outc,
       .fcall, .kbw, .kbu, .set-* — are preferred over net-new classes.
   ============================================================ */

/* ── Dashboard v2 ─────────────────────────────────────────────────── */

.dashv2 {
  padding: 22px 32px 40px;
  /* Home tab pins every blue to Google Blue (#1A73E8): the impact hero, the
     agent/Phoebe/upsell avatars, the activity bars and the accents all read
     as the one brand blue rather than the lighter portal default. */
  --accent: #1A73E8;
  --gradient-brand: linear-gradient(135deg, #1A73E8 0%, #4C90F1 100%);
  --gradient-hero: linear-gradient(125deg, #1565D0 0%, #1A73E8 56%, #2E86F5 100%);
}
.dashv2 .va__top { padding: 0 0 18px; }
/* Dark mode keeps its own tuned palette — the Google-blue pin above is a
   light-mode treatment. Restore the dark tokens so the hero and avatars don't
   render bright-blue against the dark surface. */
[data-theme="dark"] .dashv2 {
  --accent: #4F8DF9;
  --gradient-brand: linear-gradient(135deg, #3B82F6, #7A5CF0);
  --gradient-hero: radial-gradient(120% 150% at 82% -10%, #21345c 0%, #141d30 50%, #0a0f1a 100%);
}

/* Greeting header — single dark heading; no accent on the name. */
.dashv2__top { align-items: center; }
.dashv2__greet {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
}
/* The range segment sits flush beside the fixed notification bell, both
   right-aligned. margin-right = bell width (40) + a 14px gap, so the segment
   lands exactly 14px to the left of the bell. */
.dashv2__top-r { gap: 14px; margin-right: 54px; }

/* ── KPI row — editorial numbers + sparkline (the impact strip) ──────────
   Replaces the old blue-gradient hero: clean white tiles, big tabular
   numbers, a delta, and a restrained accent sparkline where a real
   series exists. The numbers carry the screen; nothing competes. */
.dashv2__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 6px 0 26px;
}
.dashv2__kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
  /* clickable: each tile deep-links into its detail screen */
  text-align: left;
  font: inherit;
  -webkit-appearance: none; appearance: none;
}
.dashv2__kpi-l {
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 500;
  color: var(--fg-4);
}
.dashv2__kpi-v {
  font-family: var(--font-display);
  font-size: var(--fs-metric-sm);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.dashv2__kpi-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto; min-height: 18px;
}
.dashv2__kpi-d {
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 500;
  color: var(--fg-4);
}
.dashv2__kpi-d--up { color: var(--status-success); }
.dashv2__kpi-d--down { color: var(--status-danger); }
.dashv2__kpi-spark { color: var(--accent); display: block; flex-shrink: 0; }
@media (max-width: 880px) {
  .dashv2__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dashv2__kpis { grid-template-columns: 1fr; }
}

/* ── Website-style interactive lift ─────────────────────────────────────────
   A blue hairline border, a gentle rise and a soft shadow on hover — the
   same treatment the marketing site uses on .stat / .cap-card. Applied to
   every box on Home so the whole surface feels alive and clickable. */
.dashv2__kpi,
.dashv2__agent,
.dashv2__chartcard,
.dashv2__phoebe-card,
.bookv__kpi {
  transition: border-color var(--dur-base) var(--ease-out);
}
.dashv2__kpi:hover,
.dashv2__agent:hover,
.dashv2__chartcard:hover,
.dashv2__phoebe-card:hover,
.bookv__kpi:hover {
  border-color: var(--accent);
}
.dashv2__kpi:focus-visible,
.dashv2__agent:focus-visible {
  border-color: var(--accent);
}

/* ── Your agents — the live roster ───────────────────────────────────── */
.dashv2__agents { margin-bottom: 26px; }
.dashv2__agents-eye {
  display: block; margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em; text-transform: none;
  color: var(--fg-3);
}
.dashv2__agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.dashv2__agent {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px 22px;
  text-align: left;
  width: 100%;
  font: inherit;
}
.dashv2__agent-id { display: flex; align-items: center; gap: 12px; }
.dashv2__agent-av {
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  font-size: 17px;
}
.dashv2__agent-meta { min-width: 0; margin-right: auto; }
.dashv2__agent-nm {
  font-family: var(--font-display);
  font-size: 16px; font-weight: var(--fw-bold);
  color: var(--fg-1);
  line-height: 1.2;
}
.dashv2__agent-rl {
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 600;
  letter-spacing: -0.005em; text-transform: none;
  color: var(--fg-4);
  margin-top: 3px;
}
.dashv2__agent-status { margin-left: 0; }
.dashv2__agent-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-top: 1px solid var(--border-subtle);
}
.dashv2__agent-kpi { padding-top: 12px; }
.dashv2__agent-kpi-v {
  font-family: var(--font-display);
  font-size: 22px; font-weight: var(--fw-bold);
  color: var(--fg-1);
  line-height: 1.1;
}
.dashv2__agent-kpi-l {
  font-family: var(--font-body);
  font-size: 12px; color: var(--fg-3);
  margin-top: 2px;
}

/* ── Website-style CTA pill ──────────────────────────────────────────────────
   Mirrors the marketing site's primary button: a blue pill with an arrow that
   glides forward on hover. Used for "Open Phoebe Intelligence" and any other
   on-surface call to action. */
.dashv2__cta-pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em;
  color: #fff;
  background: #1A73E8;
  border: none;
  transition: background-color .25s ease, transform .25s ease;
}
.dashv2__cta-pill:hover {
  background: #1666D0;
}
.dashv2__cta-pill .cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .36s cubic-bezier(.22, .61, .36, 1);
}
.dashv2__cta-pill .cta-arrow svg { width: 16px; height: 16px; }
.dashv2__cta-pill:hover .cta-arrow { transform: translateX(5px); }

/* ── Home: Outcomes · Conversion · Phoebe (three across) ─────────────────── */
.dashv2__three {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin: 0 0 26px;
  align-items: stretch;
}
/* Two-up, then single-column as width drops. The Phoebe card spans the full
   row once it wraps so it never sits lonely at half width. */
@media (max-width: 1100px) {
  .dashv2__three { grid-template-columns: 1fr 1fr; }
  .dashv2__three .dashv2__phoebe-card { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .dashv2__three { grid-template-columns: 1fr; }
  .dashv2__three .dashv2__phoebe-card { grid-column: auto; }
}
.dashv2__chartcard { display: flex; flex-direction: column; }
.dashv2__panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.dashv2__panel-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg-1); }
.dashv2__panel-s { font-size: 12px; color: var(--fg-4); }

/* ── Home charts (Outcomes composition + Conversion funnel) ──────────────── */
.hchart { display: flex; flex-direction: column; }

/* Outcomes — one composition bar over a clean legend. */
.hchart--outcomes { gap: 22px; }
.hchart__bar {
  display: flex; width: 100%; height: 12px;
  border-radius: 999px; overflow: hidden;
  background: var(--bg-muted);
}
.hchart__seg { height: 100%; transition: width var(--dur-slow) var(--ease-out); }
/* Hairline gap between adjacent segments, in the surface colour so it reads
   as a crisp separation in both themes. */
.hchart__seg + .hchart__seg { box-shadow: inset 1.5px 0 0 var(--bg-surface); }
.hchart__seg--booked   { background: var(--chart-blue-700); }
.hchart__seg--answered { background: var(--chart-blue-500); }
.hchart__seg--callback { background: var(--chart-blue-300); }
.hchart__seg--missed   { background: var(--chart-blue-muted); }

.hchart__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hchart__leg { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; column-gap: 10px; }
.hchart__dot { width: 10px; height: 10px; border-radius: 3px; }
.hchart__dot--booked   { background: var(--chart-blue-700); }
.hchart__dot--answered { background: var(--chart-blue-500); }
.hchart__dot--callback { background: var(--chart-blue-300); }
.hchart__dot--missed   { background: var(--chart-blue-muted); }
.hchart__leg-l { font-family: var(--font-body); font-size: 13.5px; color: var(--fg-2); }
.hchart__leg-v { font-family: var(--font-display); font-size: 14.5px; font-weight: var(--fw-bold); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.hchart__leg-p { font-size: 12.5px; color: var(--fg-4); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }

/* Funnel — headline conversion % over three tapering stages. */
.hchart--funnel { gap: 22px; }
.hchart__hero { display: flex; align-items: baseline; gap: 8px; }
.hchart__hero-v {
  font-family: var(--font-display); font-weight: 600; font-size: 32px;
  letter-spacing: -0.02em; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.hchart__hero-c { font-size: 13px; color: var(--fg-4); }
.hchart__stages { display: flex; flex-direction: column; gap: 15px; }
.hchart__stage-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.hchart__stage-l { font-family: var(--font-body); font-size: 13px; color: var(--fg-2); }
.hchart__stage-v { font-family: var(--font-display); font-size: 13.5px; font-weight: var(--fw-bold); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.hchart__stage-v em { font-style: normal; font-weight: 400; color: var(--fg-4); }
.hchart__track { width: 100%; height: 10px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.hchart__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width var(--dur-slow) var(--ease-out); }

/* ── Phoebe's Insights (plain-English highlights) ────────────────────────── */
.phoebe-ins { padding: 18px 20px; }
.phoebe-ins__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.phoebe-ins__head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dashv2__phoebe-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  color: var(--accent);
}
.dashv2__phoebe-icon svg { width: 17px; height: 17px; }
.phoebe-ins__t {
  font-family: var(--font-display);
  font-size: 16px; font-weight: var(--fw-bold); color: var(--fg-1);
}
.phoebe-ins__sub { font-size: 12.5px; color: var(--fg-4); }
.phoebe-ins__empty { font-size: 14px; color: var(--fg-3); line-height: 1.5; }
.phoebe-ins__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px; margin: 0; padding: 0; list-style: none;
}
@media (max-width: 760px) { .phoebe-ins__list { grid-template-columns: 1fr; } }
.phoebe-ins__list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-body);
  font-size: 14px; color: var(--fg-1); line-height: 1.5;
}
.phoebe-ins__list li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* The Home Phoebe card stacks header → insights → CTA, with the pill pinned
   to the bottom. Its insight list reads as a single column in the narrow
   right rail. */
.dashv2__phoebe-card { display: flex; flex-direction: column; }
.dashv2__phoebe-card .phoebe-ins__list { grid-template-columns: 1fr; gap: 10px; }
.dashv2__phoebe-card .dashv2__cta-pill { margin-top: auto; align-self: flex-start; }
.dashv2__phoebe-card .phoebe-ins__list,
.dashv2__phoebe-card .phoebe-ins__empty { margin-bottom: 18px; }

/* ============================================================
   CLIENT PORTAL — reference-design components (June 2026)
   Net-new classes that recreate the Pulsium reference mockup:
   the gradient impact hero, agent cards, the workforce upsell,
   finishing-setup row, activity-by-hour chart, the highlighted
   Phoebe Intelligence card, and the shared subnav / KPI tile /
   filter / list / note primitives used across Conversations,
   Tasks and Bookings. Section eyebrows are small title-case
   labels in the quiet fg-5.
   ============================================================ */

/* Section eyebrow — a small title-case label in the quiet fg-5. Lives in a
   flex-gap column (.va__main), so a small negative bottom margin pulls its
   content up to read as a label attached to the block below it. */
.dashv2__eye, .p-eye {
  display: block; margin: 2px 0 -10px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-5);
}

/* .va__main is a flex column with overflow-y:auto; its children shrink by
   default, which compresses tall sections (the hero) instead of scrolling.
   Pin them so they keep their natural height and the page scrolls. */
.dashv2__impact, .dashv2__acards, .dashv2__upsell, .dashv2__setupmini,
.dashv2__twocol, .dashv2__eye, .p-eye, .pkpis, .psubnav, .plist {
  flex-shrink: 0;
}

/* ── Impact ledger — one calm surface card, four divided stat cells ──────
   Quiet-confidence treatment: a white (theme-surface) card with a hairline
   header row and hairline column dividers, in place of the old full-bleed
   blue gradient slab. Everything reads from theme tokens so both light and
   dark themes just work. */
.dashv2__impact {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out);
}
.dashv2__impact:hover {
  border-color: var(--accent);
}
.dashv2__impact-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border-subtle);
}
.dashv2__impact-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3;
  color: var(--fg-1);
}
.dashv2__impact-sub { font-size: 13px; color: var(--fg-3); margin-top: 4px; }
.dashv2__impact-period {
  font-size: 12.5px; color: var(--accent-ink, var(--accent));
  background: var(--accent-soft);
  border-radius: 999px; padding: 7px 14px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dashv2__impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.dashv2__itile { padding: 24px 28px 22px; position: relative; }
.dashv2__itile + .dashv2__itile::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px;
  background: var(--border-subtle);
}
.dashv2__itile-l { font-size: 12.5px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 5px; }
.dashv2__itile-v {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--fg-1); font-variant-numeric: tabular-nums;
  margin-top: 8px;
}
.dashv2__itile-v.is-pending { color: var(--fg-3); }
.dashv2__itile-hint { font-size: 11.5px; color: var(--fg-3); margin-top: 14px; min-height: 34px; }
.dashv2__itile-spark { display: block; width: 100%; height: 34px; margin-top: 14px; }
.dashv2__itile-spark-line { stroke: var(--accent); }
.dashv2__itile-spark-area { fill: var(--accent); opacity: .08; }
.dashv2__itile-spark-base { stroke: var(--border-subtle); }
/* Per-tile sparkline tones — Conversations keeps the brand blue; the other
   ledger cells each take their own tone so the four figures read apart. */
.dashv2__itile-spark--bookings .dashv2__itile-spark-line { stroke: #137333; }
.dashv2__itile-spark--bookings .dashv2__itile-spark-area { fill: #137333; }
.dashv2__itile-spark--tasks .dashv2__itile-spark-line { stroke: #E8710A; }
.dashv2__itile-spark--tasks .dashv2__itile-spark-area { fill: #E8710A; }
.dashv2__itile-spark--value .dashv2__itile-spark-line { stroke: #9334E6; }
.dashv2__itile-spark--value .dashv2__itile-spark-area { fill: #9334E6; }
/* Info affordance on the estimate cells — appears only while the cell reads "—".
   The tooltip bubble itself (.dashv2__tip) is portaled to <body>, so it lives
   outside this card's overflow:hidden. */
.dashv2__itile-info {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3); cursor: default;
}
.dashv2__itile-info svg { width: 13px; height: 13px; display: block; }
.dashv2__itile-info:hover, .dashv2__itile-info:focus-visible { color: var(--fg-1); outline: none; }
/* Portaled tooltip bubble — fixed-positioned from the icon's rect (see InfoTip).
   Readable card on both themes; sits above all dashboard chrome. */
.dashv2__tip {
  position: fixed; transform: translate(-50%, -100%);
  width: 240px;
  background: var(--bg-surface); color: var(--fg-1);
  border: 1px solid var(--border-subtle);
  padding: 11px 13px; border-radius: 10px;
  font-family: var(--font-body); font-size: 12px; line-height: 1.5; font-weight: 400;
  letter-spacing: 0; text-align: left;
  box-shadow: var(--shadow-xs);
  z-index: 4000; pointer-events: none;
}
.dashv2__tip--below { transform: translate(-50%, 0); }
@media (max-width: 760px) {
  .dashv2__impact-grid { grid-template-columns: 1fr 1fr; }
  /* In the two-column layout, odd cells start a row — no left divider. */
  .dashv2__itile:nth-child(odd)::before { display: none; }
}

/* ── Agent cards (Home + Agents roster) ──────────────────────────────────── */
.dashv2__acards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 360px)); gap: 16px;
  margin-bottom: 6px;
}
@media (max-width: 680px)  { .dashv2__acards { grid-template-columns: 1fr; } }
.dashv2__acard {
  border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: 18px; background: var(--bg-surface);
 text-align: left;
  width: 100%; font: inherit;
  transition: border-color var(--dur-base) var(--ease-out);
}
.dashv2__acard:hover { border-color: var(--accent); }
.dashv2__acard-h { display: flex; align-items: center; gap: 13px; }
.dashv2__acard-av {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px;
  background: var(--gradient-brand);
}
/* Portrait variant — the initial span keeps the brand gradient. */
img.dashv2__acard-av { object-fit: cover; box-shadow: none; }
.dashv2__acard-meta { min-width: 0; }
.dashv2__acard-nm { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg-1); }
.dashv2__acard-ro { font-size: 11px; color: var(--fg-4); font-weight: 600; margin-top: 2px; }
.dashv2__pill {
  margin-left: auto; align-self: flex-start;
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill);
  color: var(--fg-4); background: var(--bg-muted);
}
.dashv2__acard-stats { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.dashv2__acard-stat-n { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--fg-1); }
.dashv2__acard-stat-l { font-size: 11px; color: var(--fg-4); margin-top: 1px; }
.dashv2__acard-desc { font-size: 13px; color: var(--fg-3); margin-top: 11px; line-height: 1.5; }

/* ── Finishing setup ─────────────────────────────────────────────────────── */
.dashv2__setupmini {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: 14px 18px;
}
.dashv2__setup-av {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px;
  background: var(--gradient-brand);
}
.dashv2__setup-body { flex: 1; min-width: 0; }
.dashv2__setup-t { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--fg-1); }
.dashv2__setup-t span { font-weight: 400; color: var(--fg-4); }
.dashv2__bar { height: 9px; border-radius: var(--radius-pill); background: var(--bg-muted); overflow: hidden; margin-top: 10px; max-width: 420px; }
.dashv2__bar-fill { display: block; height: 100%; background: var(--gradient-brand); border-radius: var(--radius-pill); }
.dashv2__setup-cta {
  white-space: nowrap; font-family: var(--font-display); font-size: 13.5px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; border: 0; 
  transition: background var(--dur-fast) var(--ease-out);
}
.dashv2__setup-cta:hover { background: var(--accent-hover); }

/* ── Grow-the-workforce upsell — white panel, headline + paragraph ───────── */
.dashv2__upsell {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 24px; border-radius: 14px;
  background: var(--bg-surface); color: var(--fg-1);
  border: 1px solid var(--border-subtle);
  /* The whole card is clickable, so it carries the pointer across its full
     area (not just the pill). Border-only hover, matching the agent card. */
  transition: border-color var(--dur-base) var(--ease-out);
}
.dashv2__upsell:hover {
  border-color: var(--accent);
}
.dashv2__upsell-head { display: flex; align-items: center; gap: 16px; }
.dashv2__upsell-av {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  object-fit: cover;
}
.dashv2__upsell-body { flex: 1; }
.dashv2__upsell-t { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-1); }
.dashv2__upsell-s { font-size: 12.5px; color: var(--fg-4); margin-top: 3px; line-height: 1.5; max-width: 70ch; }
@media (max-width: 860px) {
  .dashv2__upsell-head { flex-wrap: wrap; }
}

/* ── Activity (by hour) + highlighted Phoebe Intelligence (two-up) ───────── */
.dashv2__twocol { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 6px; }
@media (max-width: 900px) { .dashv2__twocol { grid-template-columns: 1fr; } }
/* Same lift-on-hover as the agent card (.dashv2__acard) — the Activity panel
   and the Phoebe Intelligence card both rise on hover. */
.dashv2__twocol .panel {
  transition: border-color var(--dur-base) var(--ease-out);
}
.dashv2__twocol .panel:hover {
  border-color: var(--accent);
}
/* Activity card — "Calls handled" over the selected range. One clear metric: a
   headline total, then a bar per bucket (calls). Quiet buckets render no bar
   (just the baseline), so sparse months read as sparse instead of a confusing
   dotted line; the axis anchors first / middle / last so labels never truncate. */
.dashv2__act-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dashv2__act-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg-1); }
.dashv2__act-range { font-size: 12px; color: var(--fg-4); }
.dashv2__act-total { display: flex; align-items: baseline; gap: 7px; margin: 6px 0 12px; }
.dashv2__act-total-n {
  font-family: var(--font-display); font-size: 27px; font-weight: 700;
  line-height: 1; letter-spacing: -0.02em; color: var(--fg-1); font-variant-numeric: tabular-nums;
}
.dashv2__act-total-l { font-size: 12.5px; color: var(--fg-4); }
/* flex: 1 → the chart grows to fill the card so the bars use the full height
   and the panel bottoms align with the Phoebe card (min-height keeps it
   readable when the row is short). */
.dashv2__act-chart {
  flex: 1; min-height: 92px; display: flex; align-items: flex-end; gap: 6px;
  padding: 0 2px; border-bottom: 1px solid var(--border-default);
}
/* Each bucket is a full-height column so its bar grows from the baseline;
   hovering the column reveals an instant tooltip anchored above the bar (a
   custom element, not the native `title` — that has a ~0.5s browser delay).
   Empty buckets have no bar at all. Busiest bucket at full opacity. */
.dashv2__act-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.dashv2__act-bar {
  width: 100%; background: var(--gradient-brand); border-radius: 4px 4px 0 0;
  opacity: .80; min-height: 3px; transition: opacity var(--dur-fast) var(--ease-out);
}
.dashv2__act-bar.is-peak { opacity: 1; }
.dashv2__act-col:hover .dashv2__act-bar { opacity: 1; }
/* Instant hover readout — appears the moment the column is hovered (no native
   tooltip delay). Anchored to the bar's top via an inline `bottom: <height>%`. */
.dashv2__act-tip {
  position: absolute; left: 50%; transform: translateX(-50%); margin-bottom: 7px;
  background: var(--bg-surface); color: var(--fg-1);
  border: 1px solid var(--border-subtle);
  padding: 4px 9px; border-radius: 7px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .08);
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 60ms var(--ease-out);
  z-index: 30;
}
.dashv2__act-col:hover .dashv2__act-tip { opacity: 1; visibility: visible; }
.dashv2__act-x { display: flex; justify-content: space-between; margin-top: 9px; }
.dashv2__act-xl { font-size: 11px; color: var(--fg-4); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Phoebe Intelligence card — a light ice surface with #1A73E8 accents and an
   animated white AI sparkle avatar. Fixed colours (not theme vars) — the card
   looks identical in light and dark themes by design. */
.dashv2__pcard {
  position: relative;
  display: flex; flex-direction: column;
  /* Whole card is clickable → pointer + lift read across the full card. */
  overflow: hidden;
  background: linear-gradient(160deg, #FFFFFF 0%, #F2F7FE 100%);
  border-color: #D5E4FA;
}
/* Corner glow — decorative only, never intercepts the card click. */
.dashv2__pcard::after {
  content: ""; position: absolute; width: 300px; height: 300px; right: -110px; top: -120px;
  background: radial-gradient(circle, rgba(26,115,232,.14), transparent 65%);
  pointer-events: none;
}
[data-theme="dark"] .dashv2__pcard { border-color: #D5E4FA; }
.dashv2__twocol .dashv2__pcard:hover { border-color: #1A73E8; }
.dashv2__pcard-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.dashv2__pcard-av {
  position: relative;
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Bare glyph, no tinted circle behind it — the twinkle is rotation + scale
   only, so it never reads as dimming to grey mid-animation. */
.dashv2__pcard-spark {
  width: 19px; height: 19px;
  animation: pcardSparkTwinkle 2.6s ease-in-out infinite;
  transform-origin: center;
}
.dashv2__pcard-spark path { fill: #1A73E8; }
@keyframes pcardSparkTwinkle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(90deg) scale(.84); }
}
.dashv2__pcard-t { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #0F2E5C; }
.dashv2__newpill {
  margin-left: auto; font-family: var(--font-caption);
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill);
  color: var(--accent-ink); background: var(--accent-soft);
}
/* Button drops to the bottom of the card; the insight rows fill the space
   above it, so the card stays as tall as the Activity card beside it. The
   pill itself is the plain site-wide CTA pill — no rim, streak, or inner
   highlight. */
.dashv2__pcard .dashv2__cta-pill { margin-top: auto; align-self: flex-start; }
/* Fixed-colour overrides for the shared insight-row + empty-state styles —
   the card ignores theme vars, so its text must too. */
.dashv2__pcard .dashv2__insight { border-bottom-color: rgba(26,115,232,.12); }
.dashv2__pcard .dashv2__insight-t { color: #122B52; }
.dashv2__pcard .dashv2__insight-rec { color: #5A6E8C; }
.dashv2__pcard .dashv2__insight-b { background: #1A73E8; }
.dashv2__pcard .phoebe-ins__empty { color: #5A6E8C; }
/* Urgent-flag chip — fixed colours like the rest of the card (theme-immune). */
.dashv2__pcard-urgent {
  align-self: flex-start; margin: 2px 0 8px;
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  color: var(--status-danger); background: #FCE8E6;
}
.dashv2__insights { margin: 2px 0 10px; }
/* Reshuffling home-card list — rows glide to their new slots (FLIP sets the
   inverted transform inline, this transition releases it). */
.dashv2__insights--live .dashv2__insight {
  transition: transform 1.1s cubic-bezier(.3, 0, .12, 1);
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .dashv2__insights--live .dashv2__insight { transition: none; }
}

/* Insight rows (Phoebe card + Phoebe Overview) */
.dashv2__insight { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); }
.dashv2__insight:last-child { border-bottom: 0; }
.dashv2__insight-b { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--gradient-brand); margin-top: 6px; }
.dashv2__insight-t { font-size: 14px; color: var(--fg-1); font-weight: 600; line-height: 1.45; }
.dashv2__insight-rec { font-size: 12.5px; color: var(--fg-3); margin-top: 3px; line-height: 1.45; }

/* ── Shared screen primitives: subnav · KPI tiles · filters · list · note ── */
.psubnav {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px;
  background: var(--bg-muted); padding: 4px; border-radius: var(--radius-pill);
  width: fit-content; max-width: 100%;
}
.psubnav__b {
  border: 0; background: none; 
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  padding: 9px 15px; border-radius: var(--radius-pill); color: var(--fg-4);
  transition: all var(--dur-fast) var(--ease-out);
}
.psubnav__b:hover:not(.is-on) { color: var(--fg-2); }
.psubnav__b.is-on { background: var(--bg-surface); color: var(--accent-ink); box-shadow: var(--shadow-card); }

.pkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 6px; }
@media (max-width: 1000px) { .pkpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .pkpis { grid-template-columns: repeat(2, 1fr); } }
.pkpi {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: 16px 18px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.pkpi:hover { border-color: var(--accent); }
.pkpi-k { font-family: var(--font-caption); font-size: 11.5px; font-weight: 600; color: var(--fg-4); }
.pkpi-v { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-top: 10px; letter-spacing: -0.02em; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.pkpi-s { font-size: 11.5px; color: var(--fg-5); margin-top: 2px; }

/* Bookings uses five tiles (Upcoming leftmost) — one row on wide screens,
   degrading gracefully. Declared after .pkpis so it wins on equal specificity. */
.pkpis--five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1180px) { .pkpis--five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .pkpis--five { grid-template-columns: repeat(2, 1fr); } }

/* Bookings list — day-grouped cards under the KPI strip. Each booking is its
   own rounded card, matching the Action required card idiom. */
.bklist { margin-top: 14px; }
.bookings-screen__viewseg { margin-top: 22px; display: inline-flex; align-self: flex-start; width: fit-content; }
.bksec { margin-bottom: 4px; }
.bksec__h { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg-3); padding: 14px 2px 6px; }
/* Each booking is a standalone card — the Action required card idiom
   (bg-surface pill, subtle border, entry animation, accent-lift on hover). */
.bkrow {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; margin-bottom: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  animation: actqRowIn 0.28s var(--ease-out) backwards;
  transition: border-color var(--dur-base) var(--ease-out);
}
.bkrow:hover {
  border-color: var(--accent);
}
@media (prefers-reduced-motion: reduce) { .bkrow { animation: none; } }
.bkrow__main { flex: 1 1 auto; min-width: 0; }
.bkrow__name { font-size: 14px; font-weight: var(--fw-medium, 500); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkrow__meta { font-size: 12px; color: var(--fg-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkrow__side { flex-shrink: 0; }
.bkempty { padding: 28px 6px; color: var(--fg-4); font-size: 13px; }

/* Status pill — mirrors the call-outcome pill (.outc), coloured per booking
   status; "past" is a muted neutral. */
.bkpill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-caption); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); }
.bkpill__dot { width: 5px; height: 5px; border-radius: 999px; }
.bkpill--upcoming    { color: var(--accent); background: var(--accent-soft); }
.bkpill--upcoming    .bkpill__dot { background: var(--accent); }
.bkpill--rescheduled { color: var(--status-warning); background: var(--status-warning-soft); }
.bkpill--rescheduled .bkpill__dot { background: var(--status-warning); }
.bkpill--cancelled   { color: var(--status-danger); background: var(--status-danger-soft); }
.bkpill--cancelled   .bkpill__dot { background: var(--status-danger); }
.bkpill--past        { color: var(--fg-4); background: var(--bg-muted); }
.bkpill--past        .bkpill__dot { background: var(--fg-4); }

.ptagrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; align-items: center; }
.ptagrow-l { font-family: var(--font-caption); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--fg-5); }
.ptagrow-sep { width: 1px; height: 22px; background: var(--border-subtle); margin: 0 4px; }
.pfilter {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 500;
  padding: 7px 13px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--fg-4);
 transition: all var(--dur-fast) var(--ease-out);
}
.pfilter:hover { border-color: var(--border-default); color: var(--fg-2); }
.pfilter.is-on { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.pfilter--agent { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

.psearch {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-surface); padding: 11px 13px; color: var(--fg-4);
  font-size: 14px; margin-bottom: 16px;
}

.plist { border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; background: var(--bg-surface); }
.pli { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); transition: background var(--dur-fast) var(--ease-out); }
.pli:last-child { border-bottom: 0; }
.pli:hover { background: var(--accent-soft-2); }
.pli-ic {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--accent-ink); background: var(--accent-soft);
}
.pli-ic--good { color: var(--status-success); background: var(--status-success-soft); }
.pli-ic--warn { color: var(--status-warning); background: var(--status-warning-soft); }
.pli-body { min-width: 0; }
.pli-t { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg-1); }
.pli-meta { font-size: 12px; color: var(--fg-4); margin-top: 1px; }
.pli-when { margin-left: auto; font-size: 12px; color: var(--fg-5); text-align: right; white-space: nowrap; }

.pnote {
  font-size: 12.5px; color: var(--fg-3); line-height: 1.5;
  background: var(--accent-soft-2); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-left: 3px solid var(--accent); border-radius: 8px; padding: 11px 13px; margin-top: 16px;
}

/* ── Billing usage tracker (minutes used vs allowance) ───────────────────── */
.usage {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.usage__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.usage__l { display: flex; align-items: baseline; gap: 10px; }
.usage__title { font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-bold); color: var(--fg-1); }
.usage__period { font-size: 12px; color: var(--fg-4); }
.usage__num { font-family: var(--font-display); font-size: 16px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.usage__num b { font-size: 22px; color: var(--fg-1); }
.usage__den { color: var(--fg-4); }
.usage__bar { height: 10px; border-radius: 999px; background: var(--pul-grey-100); overflow: hidden; }
.usage__bar-fill {
  height: 100%; border-radius: 999px; background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.usage__bar-fill.is-high { background: var(--status-warning); }
.usage__bar-fill.is-over { background: var(--status-danger); }
.usage__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.usage__cap { font-size: 12px; color: var(--fg-3); }
.usage__side { font-size: 12px; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.usage__side--over { color: var(--status-danger); font-weight: 600; }

/* ── Time zone picker (Agent Configuration → Time Zone) ─────────────────── */
/* A single control (the picker) plus a quiet auto-save status line, rendered
   directly in the pane under its heading — no nested box around the picker. The
   pane's own gap + left padding sit the picker just below the subheading and
   align it with the heading. */
.bh { display: flex; flex-direction: column; }

/* The tab holds a single control — the time-zone picker — placed directly in
   the pane, under the heading and subheading that render in the pane header. */
.bh__solo { padding-top: 2px; }
.bh__row-s { font-size: 12.5px; color: var(--fg-4); margin-top: 8px; line-height: 1.5; }

/* Selects — native arrow suppressed for a crisp custom chevron. */
.bh-sel {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--fg-1);
  background-color: var(--bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6770' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 10px 38px 10px 14px;
  min-width: 116px; 
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.bh-sel:hover { border-color: var(--accent); }
.bh-sel:focus { outline: none; border-color: var(--accent); }
.bh-sel--tz { min-width: 320px; max-width: 100%; }
/* Muted text while the picker still shows the "Select" placeholder. */
.bh-sel--ph { color: var(--fg-3); }

/* Auto-save status — replaces the Save button. Sits quietly under the picker;
   no divider line, so the tab stays clean when idle. */
.bh__foot {
  display: flex; align-items: center; justify-content: flex-start;
  min-height: 22px; margin-top: 14px;
}
.bh__save {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  padding: 4px 11px; border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.bh__save svg { width: 14px; height: 14px; flex: none; }
.bh__save--on  { color: var(--fg-3); background: var(--bg-muted); }
.bh__save--ok  { color: var(--status-success); background: var(--status-success-soft); border-color: var(--status-success-soft); }
.bh__save--err { color: var(--status-danger); background: var(--status-danger-soft); border-color: var(--status-danger-soft); }
.bh__spin { animation: bh-spin 0.7s linear infinite; transform-origin: center; }
@keyframes bh-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .bh-sel--tz { min-width: 0; width: 100%; }
}

/* ── Upgrade teaser (Starter-tier stand-in for gated features) ───────────── */
.upsell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 22px 24px;
  border: 1px dashed var(--accent);
  background: linear-gradient(135deg, var(--pul-blue-tint) 0%, var(--bg-surface) 72%);
}
.upsell__badge {
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft); padding: 3px 10px; border-radius: var(--radius-pill);
}
.upsell__t {
  font-family: var(--font-display);
  font-size: 17px; font-weight: var(--fw-bold); color: var(--fg-1);
}
.upsell__s { font-family: var(--font-body); font-size: 14px; color: var(--fg-3); line-height: 1.55; max-width: 660px; }
.upsell__cta { margin-top: 6px; }

/* ── Conversations ─────────────────────────────────────────────────── */

.convo__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px 0;
}
.chip-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-medium);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip-btn:hover { border-color: var(--pul-blue); color: var(--pul-blue); }
.chip-btn:active:not(:disabled) {
  background: var(--pul-blue);
  border-color: var(--pul-blue);
  color: var(--fg-on-brand);
}
.chip-btn.is-on {
  background: var(--pul-blue);
  border-color: var(--pul-blue);
  color: var(--fg-on-brand);
}
.chip-btn.is-disabled,
.chip-btn[disabled] {
  opacity: 0.5;

}

/* Status + Type axes — kept visually separate, each with a quiet label. */
.convo__axis { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.convo__axis-l {
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: none; color: var(--fg-4);
}
.convo__axis-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Row subtitle (the call topic) under the caller's name. */
.fcall__sub {
  font-size: 12.5px; color: var(--fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
/* The single status badge on each row. */
.fcall__status {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
}
.fcall__status--action  { background: #FCEEE2; color: #B4530A; }
.fcall__status--handled { background: var(--status-success-soft); color: var(--status-success); }
/* Bypassed call — neutral tone; forwarded rows never need action. */
.fcall__status--fwd     { background: var(--bg-subtle); color: var(--fg-3); }
/* Handled rows carry no badge — keep the grid column, drop all the chrome so
   the cell collapses to nothing. */
.fcall__status--none { background: none; padding: 0; }

/* Detail panel: slim amber reason strip, transcript section. (The facts line
   is the .cdetail__meta row above.) */
.cdetail__reason-strip {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: #FCEEE2;
  color: #B4530A;
  border: 1px solid #F6D9BE;
  font-size: 13px; font-weight: 600;
}

/* Dim, hairline divider — strongest in the middle, fading to the background at
   both ends (a touch of breathing room at each edge, per the design note). */
.cdetail__rule {
  border: 0;
  height: 1px;
  margin: 2px 0;
  background: linear-gradient(to right,
    transparent 4%, var(--border-default) 50%, transparent 96%);
}

/* Transcript disclosure — collapsed by default; the chevron rotates as it opens. */
.cdetail__transcript { display: flex; flex-direction: column; gap: 12px; }
.cdetail__trhead {
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.cdetail__trtoggle {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--fg-2);
  font-family: var(--font-caption);
  font-size: 12.5px; font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cdetail__trtoggle:hover { background: var(--bg-subtle); border-color: var(--border-default); color: var(--fg-1); }
.cdetail__trtoggle svg { transition: transform var(--dur-fast) var(--ease-out); color: var(--fg-4); }
.cdetail__trtoggle.is-open svg { transform: rotate(90deg); }
.cdetail__trtoggle.is-open { color: var(--fg-1); }
.cdetail__trbody { animation: fcall-reveal var(--dur-base) var(--ease-out); }
/* Centered, animated placeholder while the event timeline streams in (it's
   prefetched on open, so this is usually only a blink). */
.trscript__loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 12px;
  font-size: 13px; color: var(--fg-3);
}
.trscript__loading svg { width: 15px; height: 15px; }

/* AI summary — a clean, single surface: sentence-case heading, one paragraph,
   and any knowledge-base suggestions below a faded rule. */
.aisum {
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #F8F6FE 0%, var(--bg-surface) 62%);
}
[data-theme="dark"] .aisum { background: var(--bg-subtle); }
.aisum__h {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 8px;
  font-family: var(--font-caption);
  font-size: 12.5px; font-weight: 600; color: var(--pul-violet);
}
.aisum__h svg { width: 14px; height: 14px; }
.aisum__body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-1); }
.aisum__pending { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.aisum__loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 0; font-size: 13px; color: var(--fg-3);
}
.aisum__loading svg { width: 15px; height: 15px; }

/* Shared spinner: a steadily rotating loader icon. */
.spin { animation: cdspin 0.8s linear infinite; transform-origin: center; }
@keyframes cdspin { to { transform: rotate(360deg); } }
.aisum__err { font-size: 13px; color: var(--status-danger); }
/* Transcript disclosure folded into the bottom of the summary box — the two
   read as one surface. The faded rule sits below the toggle (above the
   transcript body), per the design note. */
.aisum__tr { margin-top: 14px; }
.aisum__recs { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.aisum__recs-h { font-family: var(--font-caption); font-size: 12px; font-weight: 600; color: var(--fg-3); }
.aisum__rec {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  /* No border — nested inside the bordered .aisum surface, a second outline
     read as a redundant box-in-box. A muted fill keeps each suggestion
     delineated without the line. */
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
.aisum__rec-main { min-width: 0; flex: 1; }
.aisum__rec-t { font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.aisum__rec-r { margin-top: 3px; font-size: 12.5px; color: var(--fg-3); line-height: 1.45; }
.aisum__rec-err { margin-top: 6px; font-size: 12px; color: var(--status-danger); }
.aisum__rec-btn {
  flex-shrink: 0; white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--fg-2);
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.aisum__rec-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.aisum__rec-btn:active:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--fg-on-brand); }
.aisum__rec-btn:disabled { opacity: 0.6; cursor: default; }

/* Responsive collapse for the simple row: stack date underneath on narrow */
@media (max-width: 720px) {
  .fcall__row {
    grid-template-columns: 1fr 24px;
    gap: 10px;
  }
  .fcall__when {
    grid-column: 1 / -1;
    align-items: flex-start;
    flex-direction: row;
    gap: 6px;
  }
  .fcall__when-day::after { content: ' ·'; color: var(--fg-4); }
}
.sent {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-medium);
}
.sent--positive { background: rgba(31, 158, 110, 0.12); color: var(--status-success); }
.sent--neutral  { background: var(--bg-muted); color: var(--fg-3); }
.sent--negative { background: rgba(217, 48, 37, 0.12); color: var(--status-danger); }

/* Retention radio group + announcement switch (Phase 1 disabled) */
.convo__radio {
  display: flex;
  gap: 6px;
  margin: 4px 0 6px;
}
.convo__radio-i {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
}
.convo__radio-i input { appearance: none; -webkit-appearance: none; display: none; }
.convo__radio-i {
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.convo__radio-i:hover:not(.is-on) {
  background: var(--bg-surface);
  border-color: var(--pul-blue);
  color: var(--pul-blue);
}
.convo__radio-i.is-on {
  background: var(--pul-blue);
  border-color: var(--pul-blue);
  color: var(--fg-on-brand);
}

/* ── Thinking Level — reasoning-depth radio cards ─────────────────────────── */
.tl-panel { gap: 16px; }
.tl-grid { display: flex; flex-direction: column; gap: 10px; }
.tl-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.tl-card:hover { border-color: var(--border-default); background: var(--bg-subtle); }
.tl-card input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.tl-card.is-on {
  border-color: var(--pul-blue);
  background: var(--pul-blue-tint);
}
.tl-card.is-saving { opacity: 0.55; pointer-events: none; }
.tl-card input:focus-visible ~ .tl-card__dot { border-color: var(--pul-blue); }

/* custom radio dot */
.tl-card__dot {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--border-default);
  background: var(--bg-surface);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.tl-card.is-on .tl-card__dot {
  border-color: var(--pul-blue);
  background: radial-gradient(circle, var(--pul-blue) 0 4.5px, #fff 5.5px);
}

.tl-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tl-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--fg-1);
}
.tl-card__token {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--fg-3);
  background: var(--bg-muted);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
}
.tl-card.is-on .tl-card__token { background: rgba(255, 255, 255, 0.7); }
.tl-card__badge {
  font-family: var(--font-caption);
  font-size: 10px;
  font-weight: 700;
  color: var(--pul-blue);
  background: var(--pul-blue-tint);
  border: 1px solid var(--pul-blue);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}
.tl-card.is-on .tl-card__badge { background: #fff; }  /* white badge on the selected (brand-filled) card */
.tl-card__badge--ovr {
  color: var(--status-success);
  border-color: var(--status-success);
  background: var(--bg-surface);
}
.tl-card__desc { font-size: 12.5px; line-height: 1.5; color: var(--fg-3); }

/* Pulsium-specific caution (not part of Google's copy) */
.tl-caution {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  /* Sits inside the settings .panel — the amber fill + icon carry the warning,
     so drop the outline to avoid a nested box line. */
  border: 1px solid transparent;
  background: #FEF7E6;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.tl-caution__i { flex: 0 0 auto; margin-top: 1px; color: var(--status-warning); }

.tl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tl-foot__note { font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.convo__switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.convo__switch input { appearance: none; -webkit-appearance: none; display: none; }
.convo__switch-track {
  width: 36px;
  height: 20px;
  background: var(--pul-grey-300);
  border-radius: 999px;
  position: relative;
  transition: background var(--dur-fast) var(--ease-out);
}
.convo__switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;  /* white knob — reads on both the grey (off) and blue (on) track in either theme */
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: left var(--dur-fast) var(--ease-out);
}
.convo__switch input:checked + .convo__switch-track {
  background: var(--pul-blue);
}
.convo__switch input:checked + .convo__switch-track .convo__switch-thumb {
  left: 18px;
}
.convo__switch-l {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-3);
}
.convo__switch.is-disabled { opacity: 0.55; }

/* ── Bookings v2 ───────────────────────────────────────────────────── */

/* Headline KPIs as separate cards — same surface + blue hairline hover
   lift as Home's .dashv2__kpi (the hover treatment is shared below). They
   auto-fit into one row on wide screens and wrap on narrow ones. */
.bookv__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.bookv__kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.bookv__kpi-l {
  font-family: var(--font-caption);
  font-size: 12px; font-weight: 500;
  color: var(--fg-4);
}
.bookv__kpi-v {
  font-family: var(--font-display);
  font-size: var(--fs-metric-sm);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.bookv__kpi-d {
  font-size: 12px; color: var(--fg-3);
  margin-top: auto;
}

/* Phoebe's KPI strip also carries five metrics. */
.va__stats.phoebe-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .va__stats.phoebe-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .va__stats.phoebe-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Knowledge Base ────────────────────────────────────────────────── */

.kbtab {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 880px) {
  .kbtab { grid-template-columns: 1fr; }
  .kbtab__nav {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px; background: var(--bg-surface);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  }
  .kbtab__nav-i { width: auto; }
}
.kbtab__nav {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: flex-start;
  position: sticky;
  top: 24px;
}
.kbtab__nav-i {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kbtab__nav-i:hover { background: var(--bg-subtle); }
.kbtab__nav-i svg { width: 16px; height: 16px; opacity: 0.7; }
.kbtab__nav-i.is-on {
  background: var(--bg-muted);
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
}
.kbtab__nav-i.is-on svg { color: var(--accent); opacity: 1; }
.kbtab__pane {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kbtab__pane-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.kbtab__pane-t {
  font-family: var(--font-display);
  font-size: 18px; font-weight: var(--fw-bold);
  color: var(--fg-1);
}
.kbtab__pane-s {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-3);
  margin-top: 2px;
  max-width: 560px;
}
.kbtab__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--pul-violet-tint);
  color: var(--pul-violet);
  font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-medium);
  white-space: nowrap;
}
.kbtab__pill svg { width: 12px; height: 12px; }
.kbtab__actions {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px;
}

/* ── Agent Configuration tab ───────────────────────────────────────── */
/* The Agent tab is the redesigned single source of truth for the
   receptionist's behaviour (AI Instructions / First Message / Tools /
   Knowledge Base / Voice). The grid + side-nav inherit .kbtab; the
   classes below are net-new for the sub-section UIs. */

/* The config surface shares the app's right gutter with the notification bell.
   The tall back chip below drops the title/Test row clear of the bell, so the
   Test button can right-align to the box edge instead of reserving the bell
   gutter. */
.agentcfg-screen .va__top-r { margin-right: 0; }

.agentcfg .kbtab { gap: 16px; }
.agentcfg .kbtab__nav {
  min-height: 0;
  padding: 10px;
  gap: 3px;
  /* Match the pane's height instead of hugging the tab list — the two columns
     read as one block. (Overrides the sticky, top-aligned Knowledge Base nav.) */
  align-self: stretch;
  position: static;
  top: auto;
}
.agentcfg .kbtab__nav-i { padding: 10px 12px; font-size: 13.5px; }
/* Active tab reads as the brand accent (echoes the Agents roster), not a grey
   fill. */
.agentcfg .kbtab__nav-i.is-on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--fw-semibold);
}
.agentcfg .kbtab__nav-i.is-on svg { color: var(--accent); opacity: 1; }
.agentcfg .kbtab__pane {
  gap: 16px;
  padding: 22px 24px 20px;
}

/* Heading row — title on the left; the Test button right-aligns to the box
   edge. */
.agentcfg__top { align-items: center; }
.agentcfg__heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.agentcfg__testcall { flex: none; align-self: center; white-space: nowrap; }
/* A phone glyph that sits still, then gives one soft, smooth swing when the
   button is hovered — a single gentle rock to signal that Test places a live
   phone call, not a looping ring. */
.agentcfg__testcall-phone {
  width: 17px; height: 17px;
  transform-origin: center;
}
.agentcfg__testcall:hover .agentcfg__testcall-phone {
  animation: testcallRing 0.9s ease-in-out 1;
}
@keyframes testcallRing {
  0%   { transform: rotate(0); }
  30%  { transform: rotate(-9deg); }
  65%  { transform: rotate(7deg); }
  100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .agentcfg__testcall:hover .agentcfg__testcall-phone { animation: none; }
}

/* Back control — a quiet round arrow chip + label. On hover the glyph glides
   left and turns blue, and the chip gains the same accent border + soft glow
   ring our buttons use — the white surface stays white. */
.agent-crumb { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agent-crumb--cfg { justify-content: flex-start; }
.agent-crumb__back {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--fg-2);
  transition: color var(--dur-fast, .15s) var(--ease-out);
}
.agent-crumb__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-pill, 999px);
  background: var(--bg-surface); color: var(--fg-1);
  border: 1px solid var(--border-subtle);
  transition: background-color var(--dur-fast, .15s) var(--ease-out),
              border-color var(--dur-fast, .15s) var(--ease-out),
              color var(--dur-fast, .15s) var(--ease-out);
}
.agent-crumb__ic svg { width: 18px; height: 18px; transition: transform var(--dur-base, .36s) var(--ease-out); }
.agent-crumb__back:hover { color: var(--fg-1); }
.agent-crumb__back:hover .agent-crumb__ic {
  background: var(--bg-surface);
  border-color: var(--accent);
  color: var(--accent);
}
.agent-crumb__back:hover .agent-crumb__ic svg { transform: translateX(-3px); }
.agent-crumb__back:focus-visible { outline: none; }
.agent-crumb__back:focus-visible .agent-crumb__ic { border-color: var(--accent); }

/* First Message — paired textareas */
.agentcfg__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.agentcfg__field {
  display: flex; flex-direction: column; gap: 8px;
}
.agentcfg__field-l { display: flex; flex-direction: column; gap: 2px; }
.agentcfg__field-t {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 14px;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.agentcfg__field-s {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-3);
}
.agentcfg__opener {
  min-height: 96px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  resize: none;
}
.agentcfg__opener:focus-within { border-color: var(--fg-1); }

/* Agent Instructions — the per-client instructions editor. No resize grip
   (the box grows with the pane; the drag handle is removed). */
.agentcfg__instr { min-height: 300px; resize: none; }

/* Voice — Agent name, shown as a tidy labelled card above the voice
   catalogue: title + description on the left, input + quiet save status on the
   right. Collapses to a stack on narrow screens. */
.agentcfg__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface, #fff);
}
/* White cards inside the config pane — a flat white fill with a hairline
   border. No lift/shadow: these are plain form fields, not hoverable cards. */
.agentcfg .kbtab__pane .agentcfg__name {
  border-color: var(--border-subtle);
  background: var(--bg-surface, #fff);
}
.agentcfg__name-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agentcfg__name-t {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 14px;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.agentcfg__name-s {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.5;
}
.agentcfg__name-ctl { display: flex; align-items: center; gap: 12px; }
.agentcfg__name-input { width: 220px; max-width: 100%; }
.agentcfg__name-select { width: 220px; max-width: 100%; }
/* Persona header Save — staged persona edits apply only when this is pressed. */
.agentcfg__persona-save { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.agentcfg__persona-save-btn:disabled { opacity: 0.45; cursor: default; }
.agentcfg__name-status { display: inline-flex; align-items: center; min-height: 20px; }

@media (max-width: 640px) {
  .agentcfg__name { flex-direction: column; align-items: stretch; }
  .agentcfg__name-ctl { width: 100%; }
  .agentcfg__name-input { flex: 1 1 auto; width: auto; }
  .agentcfg__name-select { flex: 1 1 auto; width: auto; }
}

/* Knowledge Base — text area + documents stacked */
.agentcfg__kbtext {
  min-height: 280px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.agentcfg__kbtext:focus-within { border-color: var(--fg-1); }
.agentcfg__docs {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.agentcfg__docs-h { display: flex; flex-direction: column; gap: 2px; }
.agentcfg__docs-t {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 15px; color: var(--fg-1);
  letter-spacing: -0.005em;
}
.agentcfg__docs-s {
  font-family: var(--font-body);
  font-size: 12px; color: var(--fg-3);
  max-width: 560px;
}

/* Tools — toggle list */
.agentcfg__tools {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
}
.agentcfg__tool {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out);
}
.agentcfg__tool:last-child { border-bottom: 0; }
.agentcfg__tool:hover { background: var(--bg-subtle); }
.agentcfg__tool.is-locked { opacity: 0.7; }
.agentcfg__tool.is-locked:hover { background: transparent; }
.agentcfg__tool-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agentcfg__tool-t {
  font-family: var(--font-body);
  font-size: 14px; font-weight: var(--fw-medium);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.agentcfg__tool-s {
  font-family: var(--font-caption);
  font-size: 12px; color: var(--fg-3);
  line-height: 1.5;
}

/* Empty state inside a pane (Tools, Voice). */
.agentcfg__empty {
  display: flex; align-items: center; gap: 14px;
  padding: 22px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}
.agentcfg__empty > svg, .agentcfg__empty > i { width: 24px; height: 24px; color: var(--fg-3); }
.agentcfg__empty-t {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 14px; color: var(--fg-1);
}
.agentcfg__empty-s {
  font-family: var(--font-body);
  font-size: 12px; color: var(--fg-3);
  margin-top: 2px;
}

/* Voice grid — reuses .voice / .voices primitives. The wrapper here
   re-grids them into a 3-column layout that breathes inside the pane. */
.agentcfg__voices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .agentcfg__voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .agentcfg__voices { grid-template-columns: 1fr; }
}
.agentcfg__voice-pick {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 0;
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  text-align: left; 
  flex: 1 1 auto; min-width: 0;
}
.agentcfg__voice-pick:disabled { opacity: 0.6; }

/* ── Team v2 ──────────────────────────────────────────────────────── */
/* Redesigned Team screen. Two panels — Members + Invite — with a roomy
   row layout, role pills that distinguish staff / admin / Pulsium admin,
   and a single inviting form. Notification settings + the breadcrumb
   eyebrow were retired in this pass. */

.teamv2 .va__top { padding-bottom: 4px; }

.teamv2__panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px 24px 18px;
  margin-bottom: 16px;
}

.teamv2__panel-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.teamv2__panel-t {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 17px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.teamv2__panel-s {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-3);
  margin-top: 4px;
  max-width: 520px;
  line-height: 1.5;
}
.teamv2__count {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  white-space: nowrap;
}

/* ── Account / Settings screen ──────────────────────────────────────────── */
/* Two-column settings rows: section title + description on the left, the
   form on the right, so the card fills the content width instead of
   leaving the right half of the page empty. */
.acctv .va__top { padding-bottom: 4px; }
.acctv__panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 560px);
  column-gap: 48px;
  align-items: start;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
}
.acctv__panel-h { margin-bottom: 0; }
.acctv__panel-t {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 17px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.acctv__panel-s {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-3);
  margin-top: 4px;
  line-height: 1.5;
  max-width: 46ch;
}
.acctv__form { display: flex; flex-direction: column; gap: 16px; }
.acctv__field { display: flex; flex-direction: column; gap: 6px; }
.acctv__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .acctv__row { grid-template-columns: 1fr; } }
.acctv__label {
  font-family: var(--font-display);
  font-size: 13px; font-weight: var(--fw-semibold, 600);
  color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.acctv__opt {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  color: var(--fg-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}
.acctv__input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.acctv__input::placeholder { color: var(--fg-4); }
.acctv__input:hover:not(:disabled),
.acctv__input:focus {
  outline: none;
  border-color: var(--pul-blue);
}
.acctv__input:disabled {
  background: var(--bg-subtle);
  color: var(--fg-3);

}
.acctv__hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-4);
  line-height: 1.45;
}
.acctv__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; row-gap: 10px; }
.acctv__save {
  height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  border: 0;
  background: var(--pul-blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 14px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.acctv__save:hover:not(:disabled) { background: var(--accent-hover); }
.acctv__save:disabled { opacity: 0.45; }
.acctv__msg {
  font-family: var(--font-body);
  font-size: 13px;
  border-radius: var(--radius-md);
  padding: 9px 12px;
}
.acctv__msg.is-ok  { background: var(--status-success-soft); color: var(--status-success); }
.acctv__msg.is-err { background: var(--status-danger-soft);  color: var(--status-danger); }

/* Delete Account panel + confirmation modal */
.acctv__panel--danger { border-color: color-mix(in oklch, var(--status-danger) 30%, var(--border-subtle)); }
.acctv__danger-body { display: flex; flex-direction: column; gap: 16px; }
.acctv__delete {
  appearance: none;
  -webkit-appearance: none;
  height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--status-danger);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 14px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.acctv__delete:hover:not(:disabled) { border-color: var(--status-danger); background: var(--status-danger-soft); }
.acctv__delete:active:not(:disabled) { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
.acctv__delete:disabled { opacity: 0.45; }

.modal__card.acctdel { max-width: 460px; }
.acctdel__close {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; background: transparent;
  color: var(--fg-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.acctdel__close svg, .acctdel__close i { width: 16px; height: 16px; }
.acctdel__close:hover:not(:disabled) { color: var(--status-danger); }
.acctdel__close:disabled { opacity: 0.45; }
.acctdel__lead {
  font-family: var(--font-body);
  font-size: 13px; font-weight: var(--fw-semibold, 600);
  color: var(--fg-1);
  margin: 0 0 8px;
}
.acctdel__list {
  margin: 0 0 12px;
  padding-left: 18px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.6;
}
.acctdel__keep {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-4);
  line-height: 1.5;
  margin: 0 0 16px;
}
.acctdel__ack {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.45;
  margin-bottom: 4px;
}
.acctdel__ack input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--status-danger);
  width: 16px; height: 16px;
  flex: 0 0 auto;
}
.acctdel__cancel {
  appearance: none; -webkit-appearance: none;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--fg-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 13px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.acctdel__cancel:hover:not(:disabled) { border-color: var(--pul-blue); color: var(--pul-blue); }
.acctdel__cancel:disabled { opacity: 0.45; }
.acctdel__confirm {
  appearance: none; -webkit-appearance: none;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--status-danger);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 13px;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.acctdel__confirm:hover:not(:disabled) { border-color: var(--status-danger); background: var(--status-danger-soft); }
.acctdel__confirm:active:not(:disabled) { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
.acctdel__confirm:disabled { opacity: 0.45; }

/* Member / invite list */
.teamv2__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.teamv2__row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-top: 1px solid var(--border-subtle);
}
.teamv2__row:first-child { border-top: 0; }
/* Members render as <li.teamv2__item> (row + optional inline access
   editor); the separator moves to the item so the editor sits inside it. */
.teamv2__item + .teamv2__item { border-top: 1px solid var(--border-subtle); }
.teamv2__acts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}
.teamv2__row--invite { background: linear-gradient(180deg, var(--bg-subtle) 0%, transparent 100%); border-radius: var(--radius-md); padding-left: 10px; padding-right: 10px; }

.teamv2__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gradient-pulse, linear-gradient(135deg, #6E8FE3 0%, #5E3DAE 100%));
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold, 700);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #fff;
  user-select: none;
}
.teamv2__avatar--pending {
  background: var(--bg-subtle);
  color: var(--fg-3);
  box-shadow: none;
  border: 1px dashed var(--border-strong);
}
.teamv2__avatar--pending svg { width: 18px; height: 18px; }

.teamv2__main { min-width: 0; }
.teamv2__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 15px;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teamv2__youtag {
  font-family: var(--font-caption);
  font-size: 11px;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.01em;
  color: var(--pul-blue);
  background: var(--pul-blue-tint);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}
.teamv2__email {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Role pills — three variants so admins read at a glance */
.teamv2__rolepill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-medium, 500);
  letter-spacing: 0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.teamv2__rolepill--staff {
  background: var(--bg-subtle);
  color: var(--fg-2);
  border-color: var(--border-subtle);
}
.teamv2__rolepill--admin {
  background: var(--pul-blue);
  color: var(--fg-on-brand);
  border-color: var(--pul-blue);
}
.teamv2__rolepill--pulsium {
  background: var(--pul-violet-tint, #F1ECFB);
  color: var(--pul-violet, #5E3DAE);
  border-color: color-mix(in oklch, var(--pul-violet, #5E3DAE) 22%, transparent);
}

.teamv2__rm {
  appearance: none; -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-4);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.teamv2__rm:hover { background: color-mix(in oklch, var(--status-danger) 10%, transparent); color: var(--status-danger); }
.teamv2__rm:active:not(:disabled) { background: var(--status-danger); color: #fff; }
.teamv2__rm:disabled { opacity: 0.4; }
.teamv2__rm svg { width: 15px; height: 15px; }
.teamv2__rm-placeholder { width: 32px; height: 32px; display: inline-block; }

/* Self-service name edit (the signed-in user's own row) */
.teamv2__iconbtn {
  appearance: none; -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-4);
  width: 32px; height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.teamv2__iconbtn:hover { background: var(--bg-subtle); color: var(--pul-blue); }
.teamv2__iconbtn:disabled { opacity: 0.4; }
.teamv2__iconbtn svg { width: 15px; height: 15px; }
.teamv2__iconbtn--save:hover { background: var(--pul-blue-tint); color: var(--pul-blue); }
.teamv2__edit { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.teamv2__edit-input { flex: 1 1 auto; min-width: 0; padding: 7px 10px; font-size: 14px; line-height: 1.2; }

/* Empty state */
.teamv2__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 24px 14px;
  gap: 4px;
}
.teamv2__empty-i {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.teamv2__empty-i svg { width: 20px; height: 20px; }
.teamv2__empty-t {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 15px;
  color: var(--fg-1);
}
.teamv2__empty-s {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-3);
  max-width: 360px;
}

/* Locked notice (non-admin attempting to invite) */
.teamv2__locked {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
}
.teamv2__locked svg { width: 16px; height: 16px; color: var(--fg-3); }

/* Invite form */
.teamv2__invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 820px) {
  .teamv2__invite {
    grid-template-columns: 1fr;
  }
}
.teamv2__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.teamv2__field-l {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-3);
}
.teamv2__input {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.teamv2__input::placeholder { color: var(--fg-4); }
.teamv2__input:hover:not(:disabled) { border-color: var(--pul-blue); }
.teamv2__input:focus {
  outline: none;
  border-color: var(--pul-blue);
}
.teamv2__input:disabled {
  background: var(--bg-subtle);
  color: var(--fg-3);

}
.teamv2__select-wrap { position: relative; }
.teamv2__select {
  padding-right: 36px;
  background-image: none;
}
.teamv2__select-chev {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--fg-3);
  pointer-events: none;
}

.teamv2__send {
  appearance: none; -webkit-appearance: none;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  border: 0;
  background: var(--pul-blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 14px;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  transition: background var(--dur-fast) var(--ease-out);
}
.teamv2__send svg { width: 15px; height: 15px; }
.teamv2__send:hover:not(:disabled) {
  background: var(--accent-hover);
}
.teamv2__send:disabled {
  background: var(--pul-blue);
  opacity: 0.45;

}

/* Inline banners */
.teamv2__banner {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.teamv2__banner svg { width: 15px; height: 15px; }
.teamv2__banner--err {
  background: #FCE8E6;
  color: var(--status-danger);
  border: 1px solid #F4C7C3;
}
.teamv2__banner--ok {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

/* Pending invites section header */
.teamv2__pending-h {
  margin-top: 22px;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-semibold, 600);
  color: var(--fg-3);
}
.teamv2__list--invites .teamv2__row:first-child { border-top: 0; }

/* ── Access chips + inline editor ─────────────────────────────────── */
/* Summary chips under a member's email; the same chip becomes a toggle
   inside the access editor / invite picker. */
.teamv2__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.teamv2__chip {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
  line-height: 1.5;
}
.teamv2__chip--toggle {
  padding: 4px 11px;
  background: var(--bg-surface);
  border-color: var(--border-default);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.teamv2__chip--toggle:hover:not(:disabled):not(.is-on) {
  background: var(--bg-surface);
  border-color: var(--pul-blue);
  color: var(--pul-blue);
}
.teamv2__chip--toggle.is-on {
  color: var(--fg-on-brand);
  background: var(--pul-blue);
  border-color: var(--pul-blue);
}
.teamv2__chip--toggle:disabled { opacity: 0.55; }

/* Inline access editor (expands under a member row) + the invite form's
   access block — a proper white card, matching the boxes elsewhere. */
.teamv2__editor,
.teamv2__invite-access {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.teamv2__editor { margin: 0 0 12px; }
.teamv2__invite-access { margin-top: 14px; }
.teamv2__editor-row { display: flex; align-items: center; gap: 10px; }
.teamv2__preset { display: inline-flex; gap: 4px; }
.teamv2__access { display: flex; flex-direction: column; gap: 8px; }
.teamv2__access-grp { display: flex; align-items: flex-start; gap: 10px; }
.teamv2__access-l {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-semibold, 600);
  color: var(--fg-3);
  min-width: 62px;
  padding-top: 4px;
  white-space: nowrap;
}
.teamv2__access-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.teamv2__access-hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-4);
  line-height: 1.45;
}
.teamv2__editor-acts { display: flex; align-items: center; gap: 8px; }
.teamv2__send--sm { height: 34px; padding: 0 14px; font-size: 13px; }
.teamv2__ghost {
  appearance: none; -webkit-appearance: none;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--fg-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 13px;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.teamv2__ghost:hover:not(:disabled) { border-color: var(--pul-blue); color: var(--pul-blue); }
.teamv2__ghost:active:not(:disabled) { background: var(--pul-blue); border-color: var(--pul-blue); color: #fff; }
.teamv2__ghost:disabled { opacity: 0.45; }
.teamv2__iconbtn.is-on { background: var(--pul-blue-tint); color: var(--pul-blue); }

@media (max-width: 640px) {
  .teamv2__access-grp { flex-direction: column; gap: 6px; }
  .teamv2__access-l { padding-top: 0; }
}

/* Chip brand variant kept for legacy callers (was used elsewhere) */
.chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-medium);
}
.chip--brand {
  background: var(--pul-blue-tint);
  color: var(--pul-blue);
}
.chip--success {
  background: #F0FDF4;
  color: #16A34A;
}

/* ── Billing ──────────────────────────────────────────────────────── */

/* Stat cards — four informational boxes (Current Plan / Status / Next
   Invoice / Estimated Total). The cards themselves aren't clickable — only
   the Manage button inside Next Invoice is — so they're static containers
   and carry no hover treatment (per house style, hover belongs to
   interactive elements, not static info panels). */
.billv__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 22px 0 0;
  width: 100%;
}
@media (max-width: 1100px) {
  .billv__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .billv__stats { grid-template-columns: 1fr; }
}
.bill-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
}
.bill-stat__l {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
}
.bill-stat__v {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg-1);
  font-feature-settings: "tnum" on;
}
/* Quiet sub-line under a stat value (included minutes, overage note). */
.bill-stat__s {
  font-size: 12px;
  color: var(--fg-4);
  line-height: 1.4;
}
.bill-stat__s--over { color: var(--status-danger); font-weight: 600; }
/* The Next-Invoice card carries the billing-management entry point inline. */
.bill-stat__manage {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 13px;
  padding: 6px 14px;
}

.billv__section {
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.billv__section-h { display: flex; flex-direction: column; gap: 4px; }
.billv__section-t {
  font-family: var(--font-display);
  font-weight: 700; font-size: 18px;
  color: var(--fg-1); letter-spacing: -0.015em;
}
.billv__section-s {
  font-size: 13px; color: var(--fg-3); line-height: 1.55;
  max-width: 720px;
}

/* Plan cards — full visual parity with the pricing section on pulsium.ai:
   white rounded cards on the page background, the Growth tier as a dark
   navy "Popular" card lifted above its neighbors, an italic "Let's Talk"
   Enterprise price, and full-width blue pill CTAs. Only the CTA semantics
   are portal-specific (Switch / Current plan / Contact sales). The card
   itself isn't a click target — only the CTA button is — so it carries no
   hover treatment; the button owns its own hover state. */
.billv__plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}
@media (max-width: 980px) {
  .billv__plans { grid-template-columns: 1fr; gap: var(--space-4); }
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  padding: 30px 28px;
}
/* The Growth card: deep navy, no border — the website's "Popular"
   treatment. Fixed colors on the navy surface (not theme variables) so it
   reads identically in light and dark mode. Sized up (not scaled) so it
   still reads as the featured plan without a transform overshoot. */
.plan-card--dark {
  background: linear-gradient(180deg, #0E2246 0%, #0A1834 100%);
  border-color: transparent;
  z-index: 1;
}
@media (min-width: 981px) {
  .plan-card--dark { padding: 34px 32px; }
}

/* Top row: quiet tier label on the left, pill badge on the right. */
.plan-card__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: 26px;
  margin-bottom: 14px;
}
.plan-card__tier {
  font-family: var(--font-body);
  font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.plan-card--dark .plan-card__tier { color: rgba(255, 255, 255, 0.75); }
.plan-card__badge {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px; font-weight: var(--fw-semibold);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.plan-card__price {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.plan-card__price-amount {
  font-family: var(--font-display);
  font-size: 46px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  line-height: 1;
}
/* Enterprise's "Let's talk" price — same weight and family as the numeric
   prices, only a touch smaller so the two words sit on one line. */
.plan-card__price-amount--talk { font-size: 42px; }
.plan-card--dark .plan-card__price-amount { color: #fff; }
.plan-card__price-period {
  font-size: var(--fs-body-sm);
  color: var(--fg-4);
}
.plan-card--dark .plan-card__price-period { color: rgba(255, 255, 255, 0.6); }
.plan-card__tag {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  margin: 0;
  line-height: var(--lh-relaxed);
  min-height: 44px;
}
.plan-card--dark .plan-card__tag { color: rgba(255, 255, 255, 0.78); }
.plan-card__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 18px 0;
}
.plan-card--dark .plan-card__divider { background: rgba(255, 255, 255, 0.16); }
.plan-card__features {
  list-style: none;
  padding: 0; margin: 0 0 var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.plan-card__features li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}
.plan-card--dark .plan-card__features li { color: rgba(255, 255, 255, 0.88); }
.plan-card__features li::before {
  content: "✓";
  flex: 0 0 auto;
  font-weight: var(--fw-bold);
  color: var(--accent);
  line-height: inherit;
}
.plan-card--dark .plan-card__features li::before { color: #8AB4FF; }

/* Rounded pill CTA — the website's bright-blue button, sized to hug its
   label (not full-width) and left-aligned in the card, with the gliding
   forward arrow shared with the onboarding CTAs. */
.plan-card__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px; font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out);
}
.plan-card__cta:hover:not(:disabled) {
  background: var(--accent-hover);
}
.plan-card__cta:disabled { cursor: default; }
/* The plan the client is already on: a solid green pill, inert. Green now
   carries the "current plan" cue that the badge used to. */
.plan-card__cta--current {
  background: var(--status-success);
  color: #fff;
  border: 0;
}
.plan-card--dark .plan-card__cta--current {
  color: #fff;
  border: 0;
}
.plan-card__cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px;
  transition: transform 360ms var(--ease-out);
}
.plan-card__cta-arrow svg { width: 15px; height: 15px; }
.plan-card__cta:hover .plan-card__cta-arrow { transform: translateX(5px); }

.billv__overage {
  margin-top: 22px;
  padding: 22px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.55;
}
.billv__overage b {
  font-weight: 700;
  color: var(--fg-1);
}

/* Catalog subscription lines — one row per Stripe line item, role titles
   grouped under their band line, then discount + total rows. */
.sublines {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 8px 24px;
}
.subln {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border-subtle);
}
.subln:first-child { border-top: 0; }
.subln__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.subln__name { font-size: 14px; font-weight: 600; color: var(--fg-1); }
.subln__roles { font-size: 12.5px; color: var(--fg-4); line-height: 1.45; }
.subln__amt {
  font-size: 14px;
  color: var(--fg-2);
  white-space: nowrap;
  font-feature-settings: "tnum" on;
}
.subln--discount .subln__name,
.subln--discount .subln__amt { color: var(--status-success); font-weight: 600; }
.subln--total .subln__name { font-weight: 700; }
.subln--total .subln__amt {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
}

.billv__error {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--status-danger-soft);
  border: 1px solid var(--status-danger-soft);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--status-danger);
}

/* ── Support ──────────────────────────────────────────────────────── */

.acc {
  padding: 4px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acc__row {
  border-bottom: 1px solid var(--border-subtle);
}
.acc__row:last-child { border-bottom: 0; }
.acc__h {
  width: 100%;
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  align-items: center;
  gap: 12px;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  text-align: left;
}
.acc__h:hover { color: var(--pul-blue); }
.acc__h-icon { color: var(--pul-blue); opacity: 0.7; }
.acc__h-chev { color: var(--fg-4); }
.acc__h-icon svg,
.acc__h-chev svg { width: 16px; height: 16px; }
.acc__body {
  padding: 0 0 14px 34px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.6;
}
.supportv__form {
  display: flex; flex-direction: column; gap: 14px;
  padding: 0 22px 14px;
}


/* ── QA Test tab ─────────────────────────────────────────────────────────── */

.qa-tab {
  display: flex; flex-direction: column; gap: 20px;
  padding: 0 22px 24px;
}

.qa-error {
  background: #FCE8E6; border: 1px solid #F4C7C3; color: var(--status-danger);
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
}
.qa-error--banner { margin-bottom: 4px; }

.qa-empty {
  padding: 28px 22px; color: var(--fg-3); font-size: 14px;
}

/* Idle state cards */
.qa-idle {
  display: flex; flex-direction: column; gap: 18px;
}
.qa-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px;
}
.qa-card__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: 13px; color: var(--fg-2);
  margin: 0 0 12px;
}
.qa-card__body { color: var(--fg-2); font-size: 14px; line-height: 1.55; }
.qa-card__body--empty { color: var(--fg-3); }
.qa-card--summary { }
.qa-card--go-live { }

.qa-summary__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.qa-summary__when { color: var(--fg-3); font-size: 13px; }
.qa-summary__mode {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-muted); color: var(--fg-3);
}
.qa-summary__counts {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--fg-3);
  margin: 8px 0 10px;
}
.qa-summary__counts span:not(:last-child)::after {
  content: '·'; margin-left: 14px; color: var(--fg-5);
}
.qa-summary__text { margin: 6px 0 0; color: var(--fg-2); }
.qa-summary__text--empty { color: var(--fg-3); font-style: italic; }

.qa-go-live { margin: 0; font-size: 14px; }
.qa-go-live--ok { color: var(--status-success); }
.qa-go-live--blocked { color: var(--status-danger); }

/* Buttons */
.qa-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 8px;
}
.qa-btn {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid transparent; 
  transition: background 120ms ease, border-color 120ms ease;
}
.qa-btn[disabled] { opacity: 0.55; }
.qa-btn--primary {
  background: var(--accent); color: var(--accent-on); border-color: var(--accent);
}
.qa-btn--primary:hover:not([disabled]) { background: var(--accent-hover); border-color: var(--accent-hover); }
.qa-btn--primary:active:not([disabled]) { background: var(--accent-press); }
.qa-btn--danger {
  background: var(--bg-surface); color: var(--status-danger); border-color: var(--status-danger-soft);
}
.qa-btn--danger:hover:not([disabled]) { background: var(--status-danger-soft); }
.qa-btn--ghost {
  background: #FFFFFF; color: var(--fg-1); border-color: transparent;
}
.qa-btn--ghost:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.qa-btn--sm { padding: 4px 10px; font-size: 12px; }

/* History table */
.qa-history { }
.qa-history__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: 13px; color: var(--fg-2);
  margin: 0 0 10px;
}
.qa-history__empty { color: var(--fg-3); font-size: 13px; padding: 4px 0; }
.qa-history__table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.qa-history__table th {
  text-align: left; font-weight: 500; color: var(--fg-3);
  padding: 8px 10px; border-bottom: 1px solid var(--border-subtle);
}
.qa-history__table td {
  padding: 10px; color: var(--fg-2);
  border-bottom: 1px solid var(--border-subtle);
}

/* Status pills */
.qa-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.qa-pill--neutral { background: var(--bg-muted); color: var(--fg-3); }
.qa-pill--running { background: var(--accent-soft); color: var(--accent); }
.qa-pill--ok      { background: var(--status-success-soft); color: var(--status-success); }
.qa-pill--warn    { background: var(--status-warning-soft); color: var(--status-warning); }
.qa-pill--err     { background: var(--status-danger-soft); color: var(--status-danger); }

/* Run detail */
.qa-run-detail {
  display: flex; flex-direction: column; gap: 18px;
}
.qa-run-detail__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.qa-run-detail__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: 14px; color: var(--fg-1);
}
.qa-run-detail__mode { color: var(--fg-3); font-weight: 400; }
.qa-run-detail__when { color: var(--fg-3); font-size: 13px; margin-left: auto; }

/* Pending operator actions */
.qa-pending {
  background: var(--status-warning-soft); border: 1px solid var(--status-warning-soft); border-radius: 12px;
  padding: 16px 18px;
}
.qa-pending__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: 13px; color: #9a3412;
  margin: 0 0 12px;
}
.qa-checkpoint {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 10px; padding: 14px 16px;
  margin-bottom: 10px;
}
.qa-checkpoint:last-child { margin-bottom: 0; }
.qa-checkpoint__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: 13px; color: var(--fg-1);
  margin-bottom: 6px;
}
.qa-checkpoint__prompt {
  margin: 0 0 12px; color: var(--fg-2); font-size: 13px; line-height: 1.55;
  white-space: pre-wrap;
}
.qa-checkpoint__paylink {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-subtle); padding: 8px 12px;
  border-radius: 8px; margin: 0 0 12px;
  font-size: 12px; flex-wrap: wrap;
}
.qa-checkpoint__paylink-l { color: var(--fg-3); font-weight: 500; }
.qa-checkpoint__paylink a {
  color: var(--accent); text-decoration: none;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  word-break: break-all;
}
.qa-checkpoint__paylink a:hover { text-decoration: underline; }
.qa-checkpoint__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* Step list */
.qa-steps {
  display: flex; flex-direction: column; gap: 6px;
}
.qa-steps__empty { color: var(--fg-3); font-size: 13px; padding: 12px 0; }
.qa-step {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 10px; overflow: hidden;
}
.qa-step.is-open { border-color: var(--border-default); }
.qa-step__head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; background: transparent; border: 0; 
  padding: 12px 16px; text-align: left;
}
.qa-step__head:hover { background: var(--bg-subtle); }
.qa-step__idx {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px; color: var(--fg-3); min-width: 22px;
}
.qa-step__name { font-size: 13px; color: var(--fg-1); font-weight: 500; flex: 1; min-width: 0; }
.qa-step__kind {
  font-size: 11px; color: var(--fg-3);
  padding: 2px 8px; background: var(--bg-muted); border-radius: 999px;
}
.qa-step__dur { font-size: 12px; color: var(--fg-3); min-width: 50px; text-align: right; }
.qa-step__body {
  padding: 0 16px 14px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px; color: var(--fg-2);
}
.qa-step__rationale { margin: 12px 0 8px; line-height: 1.55; }
.qa-step__call {
  background: var(--bg-subtle); padding: 10px 12px; border-radius: 8px;
  margin: 8px 0;
}
.qa-step__call-meta {
  font-size: 12px; color: var(--fg-3); margin-bottom: 6px;
}
.qa-step__call-meta code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px; color: var(--fg-2);
}
.qa-step__audio { width: 100%; height: 32px; }
.qa-step__checks {
  margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--fg-3);
}
.qa-step__checks li { margin-bottom: 4px; }
.qa-step__judges { margin-top: 10px; }
.qa-step__judges-t {
  font-weight: 600; font-size: 12px; color: var(--fg-2); margin-bottom: 4px;
}
.qa-step__judges ul {
  margin: 0; padding-left: 18px; color: var(--fg-3); font-size: 12px;
}

/* Recommendations */
.qa-recs {
  background: var(--bg-subtle); padding: 14px 18px; border-radius: 10px;
}
.qa-recs__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: 13px; color: var(--fg-2);
  margin: 0 0 8px;
}
.qa-recs ul { margin: 0; padding-left: 18px; color: var(--fg-2); font-size: 13px; }
.qa-recs li { margin-bottom: 4px; line-height: 1.5; }

.qa-tab__back { margin-top: 4px; }

/* ──────────────────────────────────────────────────────────────────────────
   Tools tab — packs + custom-tool authoring
   ────────────────────────────────────────────────────────────────────────── */
.agentcfg__section-h {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 8px;
}
.agentcfg__section-t {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 15px; color: var(--fg-1);
}
.agentcfg__section-s {
  font-family: var(--font-body);
  font-size: 12px; color: var(--fg-3);
  flex: 1 1 240px;
}
.agentcfg__packs { display: flex; flex-direction: column; gap: 10px; }
.agentcfg__pack {
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-lg, 10px);
  padding: 12px;
  background: var(--bg-surface, #FFFFFF);
}
.agentcfg__pack-h {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.agentcfg__pack-toggle {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
 font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600); font-size: 14px;
  color: var(--fg-1);
}
.agentcfg__pack-toggle svg, .agentcfg__pack-toggle i { width: 16px; height: 16px; }
.agentcfg__pack-t { font-family: var(--font-display); font-weight: var(--fw-semibold, 600); }
.agentcfg__pack-meta {
  font-family: var(--font-caption); font-size: 12px; color: var(--fg-3);
}
.agentcfg__pack-desc {
  margin-top: 6px;
  font-family: var(--font-body); font-size: 13px; color: var(--fg-2);
}

/* Secondary + link buttons (the existing .btn-primary is sufficient for CTAs;
   these complement it for "browse", "add", "edit", and "cancel" affordances). */
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 18px;
  background: var(--bg-surface);
  color: var(--fg-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--pul-blue); color: var(--pul-blue); }
.btn-secondary:hover:not(:disabled) svg, .btn-secondary:hover:not(:disabled) i { color: var(--pul-blue); }
.btn-secondary:active:not(:disabled) { background: var(--pul-blue); border-color: var(--pul-blue); color: var(--accent-on, #fff); }
.btn-secondary:active:not(:disabled) svg, .btn-secondary:active:not(:disabled) i { color: var(--accent-on, #fff); }
.btn-secondary svg, .btn-secondary i { width: 14px; height: 14px; }

.btn-link {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 0;
  color: var(--pul-blue, #3B82F6);
  font-family: var(--font-display); font-weight: 500; font-size: 13px;
}
.btn-link:hover { text-decoration: underline; }

/* Modal — simple centered dialog used by pack install, custom-tool form, and
   the pack catalog browser. No animation; the action is direct enough that a
   flash on open would be more distracting than helpful. */
.modal__backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.modal__card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
}
.modal__h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
  font-family: var(--font-display); font-weight: var(--fw-semibold, 600);
  font-size: 15px; color: var(--fg-1);
}
.modal__body {
  padding: 16px 18px;
  overflow: auto;
  flex: 1 1 auto;
}
.modal__actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle, #E5E7EB);
}

/* ── Notification bell (global, fixed top-right; see notifications.jsx) ──── */
/* Floats in the .va__main right-padding gutter so it clears each screen's
   header content. z-index sits below the modal backdrop (1000). */
.notif {
  position: fixed;
  /* Vertically centered on the header's range segment. Both the bell and the
     segment top-anchor to the 22px content padding, but the bell (40px) is
     taller than the segment (35.5px) — top-aligning would leave the bell ~2px
     low. top = 22 - (40 - 35.5) / 2 ≈ 20px lines up their centers. */
  top: 20px;
  /* Right edge sits flush with the dashboard content gutter (.dashv2 has 32px
     side padding) so the bell aligns with the cards/header below instead of
     poking past them. The header right-cluster reserves room for it. */
  right: 32px;
  z-index: 950;
}
.notif__bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill, 999px);
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-subtle, #E5E7EB);
  color: var(--fg-1, #1b1b1f);
  transition: border-color .12s ease, color .12s ease;
}
.notif__bell:hover {
  /* Background stays white; only the glyph and border turn brand blue. */
  background: var(--bg-surface, #fff);
  border-color: var(--accent, #1A73E8);
  color: var(--accent, #1A73E8);
}
.notif__bell svg { transform-origin: 50% 4px; }
.notif__bell:hover svg { animation: bell-ring .9s ease-in-out both; }
@keyframes bell-ring {
  0% { transform: rotate(0); }
  15% { transform: rotate(15deg); }
  30% { transform: rotate(-13deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}

/* ── Sidebar account menu (footer "full name" → popover) ────────────────── */
/* The light/dark toggle, Settings and Sign out live here now (relocated out of
   the old fixed top-right pill). The popover floats above the footer button. */
.va__usermenu {
  position: absolute;
  left: 6px; right: 6px;
  bottom: calc(100% + 8px);
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: 12px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 60;
}
.va__usermenu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0; background: transparent;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  color: var(--fg-2);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.va__usermenu-item:hover { background: var(--accent-soft-2); color: var(--fg-1); }
.va__usermenu-item svg { width: 16px; height: 16px; flex: 0 0 16px; }
.va__usermenu-item--danger { color: var(--status-danger, #D93025); }
.va__usermenu-item--danger:hover { background: rgba(217, 48, 37, 0.10); color: var(--status-danger, #D93025); }
.va__usermenu-sep {
  height: 1px; margin: 4px 6px;
  background: var(--border-subtle);
}
.va__foot-user.is-open { background: var(--accent-soft-2); }
.va__foot-caret {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-4);
  flex: 0 0 auto;
}
.va__foot-caret svg { width: 15px; height: 15px; }

.notif__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--status-danger); color: #fff;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg-page, #fff);
}
.notif__panel {
  position: absolute; top: 50px; right: 0;
  width: 360px; max-height: 70vh; overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: 14px;
}
.notif__head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: 14px 14px 0 0;
}
.notif__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; color: var(--fg-1);
}
.notif__markall {
  background: none; border: 0; padding: 0;
  color: var(--accent, #6E8FE3); font-size: 12px; font-weight: 600;
}
.notif__markall:hover { color: var(--accent-press, #4A6FCB); }
.notif__actions { display: inline-flex; align-items: center; gap: 6px; }
.notif__action {
  background: none; border: 0; padding: 4px 8px; border-radius: 7px;
  color: var(--accent, #6E8FE3); font-size: 12px; font-weight: 600;
 white-space: nowrap;
  transition: background var(--dur-fast, 120ms) var(--ease-out), color var(--dur-fast, 120ms) var(--ease-out);
}
.notif__action:hover { background: var(--accent-soft, #EAF1FE); color: var(--accent-press, #4A6FCB); }
.notif__action:disabled { color: var(--fg-4); cursor: default; background: none; }
.notif__action--danger { color: var(--fg-3); }
.notif__action--danger:hover {
  background: color-mix(in srgb, var(--status-danger, #d93025) 12%, transparent);
  color: var(--status-danger, #d93025);
}
.notif__empty {
  padding: 30px 16px; text-align: center;
  color: var(--fg-3, #6B6770); font-size: 13px;
}
.notif__list { list-style: none; margin: 0; padding: 0; }
.notif__row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px; 
  border-bottom: 1px solid var(--border-subtle, #F2F0F4);
}
.notif__row:last-child { border-bottom: 0; }
.notif__row:hover { background: var(--bg-muted, #F8F7F9); }
.notif__row.is-unread { background: var(--pul-blue-tint, #EEF2FB); }
.notif__row.is-unread:hover { background: #E4EBFA; }
.notif__dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 5px; flex: 0 0 auto; background: var(--fg-4, #9a9aa0);
}
.notif__dot--info    { background: var(--accent, #6E8FE3); }
.notif__dot--success { background: #2E9E5B; }
.notif__dot--warning { background: #C4791F; }
.notif__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif__row-title {
  font-size: 13px; font-weight: 600; color: var(--fg-1); line-height: 1.35;
}
.notif__row-text {
  font-size: 12px; color: var(--fg-2, #4a4a4a); line-height: 1.4;
}
.notif__row-when {
  font-size: 11px; color: var(--fg-3, #6B6770); margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────
   TOOLS TAB — System tools / Connections / Custom tools
   Minimalist card layout. Toggles reuse .convo__switch; buttons
   reuse .btn-primary / .btn-secondary / .btn-link.
   ───────────────────────────────────────────────────────────── */
.toolz { display: flex; flex-direction: column; gap: 16px; }

.toolz__banner {
  padding: 10px 14px; border-radius: 12px; font-size: 13px;
  border: 1px solid transparent;
}
.toolz__banner.is-ok {
  background: color-mix(in srgb, var(--status-success) 10%, var(--bg-surface));
  color: var(--status-success); border-color: color-mix(in srgb, var(--status-success) 24%, transparent);
}
.toolz__banner.is-err { background: var(--status-danger-soft); color: var(--status-danger); border-color: var(--status-danger-soft); }

.toolz__card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 16px);
  padding: 18px 20px;
}
/* On the Agent → Tools tab these sections render inside the bordered
   .kbtab__pane, so each card's own border doubled the pane's outline. Flatten
   them to header-delineated blocks — the pane is the only box. */
.kbtab__pane .toolz__card {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.toolz__card-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.toolz__ic {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--fg-2, #3b3f46);
}
.toolz__ic svg { width: 16px; height: 16px; }
.toolz__card-hx { flex: 1 1 auto; min-width: 0; }
.toolz__card-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg-1); letter-spacing: -0.01em; }
.toolz__card-s { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; line-height: 1.5; }
.toolz__browse { flex: 0 0 auto; align-self: center; }

.toolz__empty { font-size: 13px; color: var(--fg-3); padding: 10px 2px 2px; }

.toolz__rows { display: flex; flex-direction: column; }
.toolz__row {
  display: flex; align-items: center; gap: 12px; padding: 12px 8px;
  transition: background var(--dur-fast, .15s) var(--ease-out, ease);
}
.toolz__row + .toolz__row { border-top: 1px solid var(--border-subtle); }
.toolz__row:hover { background: var(--bg-subtle, #F7F8FA); }
.toolz__row.is-locked { opacity: .7; }
.toolz__row-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.toolz__row-t { font-size: 13.5px; font-weight: 500; color: var(--fg-1); }
.toolz__row-s { font-size: 12.5px; color: var(--fg-3); line-height: 1.5; }
.toolz__row-code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11.5px; color: var(--fg-4, #9aa0a6); }
.toolz__row-actions { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.toolz__conns { display: flex; flex-direction: column; gap: 10px; }
.toolz__conn {
  border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden;
  transition: border-color var(--dur-fast, .15s) var(--ease-out, ease);
}
.toolz__conn.is-open { border-color: var(--accent, #1A73E8); }
.toolz__conn-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.toolz__conn-toggle {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0; text-align: left;
  background: transparent; border: 0; padding: 0;
}
.toolz__av {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-subtle, #EFF1F4); color: var(--fg-2, #3b3f46);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
.toolz__conn-x { flex: 1 1 auto; min-width: 0; }
.toolz__conn-t { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg-1); }
.toolz__conn-meta { font-size: 11.5px; color: var(--fg-3); margin-top: 1px; }
.toolz__conn-right { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.toolz__chev { color: var(--fg-3); flex: 0 0 auto; }

.toolz__pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: var(--radius-pill, 999px);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.toolz__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.toolz__pill--ok  { background: color-mix(in srgb, var(--status-success) 14%, transparent); color: var(--status-success); }
.toolz__pill--ok::before  { background: var(--status-success); }
.toolz__pill--off { background: var(--bg-muted, #EEF0F3); color: var(--fg-3); }
.toolz__pill--off::before { background: var(--fg-4, #b3b8bf); }

.toolz__connect { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 14px 14px; }
.toolz__key {
  flex: 1 1 240px; min-width: 200px;
  padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  font-size: 13px; color: var(--fg-1); outline: none;
  transition: border-color var(--dur-fast, .15s) var(--ease-out, ease), box-shadow var(--dur-fast, .15s) var(--ease-out, ease);
}
.toolz__key:focus {
  border-color: var(--accent, #1A73E8);
}
.toolz__hint { font-size: 12.5px; color: var(--fg-3); padding: 0 14px 14px; }

/* External Software panel (admin-only) — industry + software selectors that
   live inside the Tools tab's External Software card. */
.extsw { display: flex; flex-direction: column; gap: 16px; max-width: 640px; padding: 4px 2px 10px; }
.extsw__field { display: flex; flex-direction: column; gap: 6px; }
.extsw__label { font-size: 13px; font-weight: 500; color: var(--fg-2, #4b5563); }
.extsw__hint { font-size: 12px; color: var(--fg-3, #8a8a8a); }

.toolz__danger { color: var(--status-danger) !important; }

.toolz__save { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 2px; }

/* ─────────────────────────────────────────────────────────────────────────
   Call-logging / observability — needs-attention badge, quality chip,
   telemetry panel, event timeline, search box, analytics. Reuses existing
   tokens (--fg-*, --bg-muted, --border-subtle, --radius-*, --font-mono,
   --pul-blue/--pul-violet). All additive — nothing above is modified.
   ───────────────────────────────────────────────────────────────────────── */

/* Operational "needs attention" pill — deep amber, distinct from the red
   --urgent (caller sentiment) and amber --complaint. */
.fcall__pill--attn { background: #FCEEE2; color: #B4530A; font-weight: 700; }

/* Per-row quality chip (0..100), banded by score. */
.fcall__quality {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 2px 6px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.fcall__quality--good { background: var(--status-success-soft); color: var(--status-success); }
.fcall__quality--ok   { background: var(--accent-soft); color: var(--accent); }
.fcall__quality--poor { background: var(--status-danger-soft); color: var(--status-danger); }
.fcall__quality--na   { background: var(--bg-muted); color: var(--fg-4); }

/* Calls toolbar — the Status and Type axes, grouped left and kept separate. */
.convo__bar { display: flex; align-items: center; justify-content: flex-start; column-gap: 22px; row-gap: 10px; flex-wrap: wrap; }

/* Server transcript-search results — a floating dropdown anchored to the
   .cx-search field (its positioning context). */
.convo__search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface);
  box-shadow: var(--shadow-md); max-height: 360px; overflow-y: auto;
}
.convo__search-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; background: transparent; 
  border-bottom: 1px solid var(--border-subtle); color: var(--fg-2); font-size: 13px;
}
.convo__search-row:last-child { border-bottom: 0; }
.convo__search-row:hover { background: var(--bg-muted); }
.convo__search-snip { flex: 1 1 auto; }
.convo__search-snip mark { background: #FFF1C2; color: inherit; padding: 0 1px; border-radius: 2px; }
.convo__search-empty { padding: 12px; color: var(--fg-4); font-size: 13px; }

/* ── Conversations Overview — cross-channel digest ──────────────────────── */
.cvov { display: flex; flex-direction: column; gap: 16px; }

/* KPI strip — four clickable tiles that hand off to a filtered call list. */
.cvov__kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.cvov__kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 16px; text-align: left; 
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color .12s ease;
}
.cvov__kpi:hover { border-color: var(--accent); }
.cvov__kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  color: var(--accent); margin-bottom: 4px;
}
.cvov__kpi-icon svg { width: 16px; height: 16px; }
.cvov__kpi-v { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--fg-1); line-height: 1; }
.cvov__kpi-l { font-size: 12.5px; color: var(--fg-3); }

/* Two cards: needs-attention + recent-across-channels. */
.cvov__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cvov__card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 6px 6px 8px;
}
.cvov__card-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px;
}
.cvov__card-t { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg-1); }
.cvov__link {
  border: 0; background: transparent; 
  color: var(--accent); font-size: 12.5px; font-weight: 600;
}
.cvov__link:hover { text-decoration: underline; }

.cvov__list { list-style: none; margin: 0; padding: 0; }
.cvov__list li { border-top: 1px solid var(--border-subtle); }
.cvov__list li:first-child { border-top: 0; }
.cvov__row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; background: transparent; 
  border-radius: var(--radius-md);
}
.cvov__row:hover { background: var(--bg-muted); }
.cvov__row-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--fg-3);
}
.cvov__row-icon svg { width: 15px; height: 15px; }
.cvov__row-icon--attn { color: var(--status-warning); }
.cvov__row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cvov__row-t {
  font-size: 13.5px; font-weight: 500; color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cvov__row-s {
  font-size: 12px; color: var(--fg-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cvov__row-when { flex: 0 0 auto; font-size: 11.5px; color: var(--fg-4); }
.cvov__empty {
  display: flex; align-items: center; gap: 8px;
  padding: 20px 14px; color: var(--fg-4); font-size: 13px;
}
.cvov__empty svg { width: 17px; height: 17px; }

@media (max-width: 980px) {
  .cvov__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cvov__cols { grid-template-columns: 1fr; }
}

/* Attention banner above the call detail. */
.cdetail__attn {
  border: 1px solid var(--status-warning); background: var(--status-warning-soft);
  border-radius: var(--radius-lg); padding: 12px 14px; margin: 0 0 12px;
}
.cdetail__attn-h {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--status-warning); font-size: 13px;
}
.cdetail__attn-list { margin: 8px 0 10px; padding-left: 22px; color: var(--fg-2); font-size: 13px; }
.cdetail__attn-list li { margin: 2px 0; }
.cdetail__fault {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
}
.cdetail__fault--core     { background: var(--status-danger-soft); color: var(--status-danger); }
.cdetail__fault--industry { background: var(--status-warning-soft); color: var(--status-warning); }
.cdetail__fault--tenant   { background: var(--accent-soft); color: var(--accent); }
.cdetail__fault--unknown  { background: var(--bg-muted); color: var(--fg-3); }
.cdetail__fault-why { margin-top: 7px; color: var(--fg-3); font-size: 12px; }

/* Event timeline. */
.timeline { padding: 2px 0; }
.timeline__row {
  display: grid; grid-template-columns: 22px 64px 1fr; gap: 10px;
  align-items: start; padding: 5px 0; position: relative;
}
.timeline__rail { color: var(--fg-4); display: inline-flex; padding-top: 1px; }
.timeline__row--error .timeline__rail,
.timeline__row--disconnect .timeline__rail { color: #D93025; }
.timeline__row--tool_response .timeline__rail,
.timeline__row--tool_call .timeline__rail { color: var(--pul-violet); }
.timeline__ts { color: var(--fg-4); font-family: var(--font-mono); font-size: 11px; padding-top: 2px; }
.timeline__main { min-width: 0; }
.timeline__kind { display: block; font-size: 11px; font-weight: 700; color: var(--fg-3); }
.timeline__txt { color: var(--fg-2); font-size: 13px; }
.timeline__kv  { color: var(--fg-2); font-size: 13px; font-family: var(--font-mono); }
.timeline__det summary { color: var(--pul-blue); font-size: 13px; }
.timeline__json {
  margin: 6px 0 0; padding: 8px 10px; background: var(--bg-muted);
  border-radius: var(--radius-md); font-family: var(--font-mono);
  font-size: 11px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto;
}
.timeline__more { margin-top: 10px; }

/* ── Communication Bin (admin-only multi-select → soft-delete) ───────────── */
/* Bulk action bar shown when ≥1 row is selected in Calls / Messages / Bin. */
.binbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin: 0 0 10px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--radius-md, 10px);
}
/* Inside a .panel (Archive / Communication Bin) the bulk bar's own outline
   doubled the panel border — drop it and lean on a muted fill so the strip
   still reads without the nested box line. */
.panel .binbar { border-color: transparent; background: var(--bg-muted); }
.binbar__count { font-size: 13px; font-weight: 600; color: var(--fg-1, #1A1A1A); }
.binbar__spacer { flex: 1 1 auto; }
.binbar__danger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-medium, 500);
  padding: 6px 12px;
  border-radius: var(--radius-pill, 999px);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.binbar__danger svg { width: 14px; height: 14px; }
.binbar__danger:hover:not(:disabled) { border-color: var(--status-danger); color: var(--status-danger); }
.binbar__danger:active:not(:disabled) { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
.binbar__danger[disabled] { opacity: 0.5; }

.binbar__cancel { margin-left: 4px; }

/* Admin Archive / Select tools — right-aligned within the Status·Type bar, so
   they sit in line with the Type chips. */
.convo__bar-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

/* Conversations list toolbar — holds the bulk action bar (its own full-width
   row) once selection mode is on, just above the call list. */
.convo__tools { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.convo__tools .binbar { flex: 1 1 auto; margin: 0; }
/* Toolbar buttons on the right of the filter row — same look as the Status /
   Type chips (chip-btn), including the solid brand fill when toggled on. */
.convo__select-btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--fg-2);
  font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-medium);
  padding: 6px 12px; border-radius: var(--radius-pill); 
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.convo__select-btn:hover { border-color: var(--pul-blue); color: var(--pul-blue); }
.convo__select-btn:hover svg { color: var(--pul-blue); }
.convo__select-btn:active { background: var(--pul-blue); border-color: var(--pul-blue); color: var(--fg-on-brand); }
.convo__select-btn:active svg { color: var(--fg-on-brand); }
.convo__select-btn svg { width: 14px; height: 14px; color: var(--fg-4); }
/* Assigned-to-me / Archived toggles while active. */
.convo__select-btn.is-on {
  background: var(--pul-blue);
  border-color: var(--pul-blue);
  color: var(--fg-on-brand);
}
.convo__select-btn.is-on svg { color: var(--fg-on-brand); }

/* Resolved pill on the conversation header + list rows. */
.fcall__pill--resolved { background: var(--status-ok-bg, #E7F6EC); color: var(--status-ok, #2E9E5B); }

/* Selection affordances on the live Calls / Messages rows. */
.convo-sel input { width: 16px; height: 16px; accent-color: var(--pul-blue, #1A73E8); }
.fcall.is-selected { background: color-mix(in oklch, var(--pul-blue, #1A73E8) 7%, transparent); }
.mrow.is-selected { background: color-mix(in oklch, var(--pul-blue, #1A73E8) 7%, transparent); }
/* The Messages row is a 2-col grid (avatar + main); the checkbox adds a
   leading column only when an admin can select. */
.mrow--selectable { grid-template-columns: auto 40px 1fr; }

/* Bin sub-tab. */
.binhead {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 4px 2px 12px;
}
/* Non-destructive bulk actions (Add note / Assign / Create task / Email /
   Archive) — same chip look as the Status / Type filters and the call-detail
   action buttons, so every button on the screen matches. */
.binbar__action {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  color: var(--fg-2); font-family: var(--font-body);
  font-size: 12px; font-weight: var(--fw-medium); 
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.binbar__action svg { width: 14px; height: 14px; color: var(--fg-4); }
.binbar__action:hover:not(:disabled) { border-color: var(--pul-blue); color: var(--pul-blue); }
.binbar__action:hover:not(:disabled) svg { color: var(--pul-blue); }
.binbar__action:active:not(:disabled) { background: var(--pul-blue); border-color: var(--pul-blue); color: var(--fg-on-brand); }
.binbar__action:active:not(:disabled) svg { color: var(--fg-on-brand); }
.binbar__action:disabled { opacity: 0.5; }
.binsec__h {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3, #6B7280);
  padding: 12px 2px 6px;
}
.binrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
}
.binrow:last-child { border-bottom: none; }
.binrow.is-selected { background: color-mix(in oklch, var(--pul-blue, #1A73E8) 7%, transparent); }
.binrow__main { flex: 1 1 auto; min-width: 0; }
.binrow__title {
  font-size: 14px; font-weight: var(--fw-medium, 500); color: var(--fg-1, #1A1A1A);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.binrow__meta { font-size: 12px; color: var(--fg-3, #6B7280); margin-top: 2px; }
.binrow__purge { font-size: 12px; color: var(--status-danger, #D93025); white-space: nowrap; flex-shrink: 0; }
.binrow__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Quality tab (quality-tab.jsx) ──────────────────────────────────── */
@keyframes qat-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   Agents tab (wf__*) — the AI workforce: three call-taking agent cards, an
   Intelligence panel (Phoebe + Clara), and a Coming Soon rail, in the
   dashboard's token system.
   ══════════════════════════════════════════════════════════════════════════ */

.wf__sub { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--fg-3); max-width: 620px; }

/* A titled block (Intelligence, Coming soon) — the eyebrow + its content
   grouped, so the parent .va__main flex gap only spaces whole blocks. */
.wf__block { display: block; }
.wf__label { font-size: 12px; font-weight: 700; letter-spacing: .01em; color: var(--fg-4); }
.wf__label-sub { margin-top: 3px; font-size: 13px; color: var(--fg-3); }

.wf__grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}
.wf__label + .wf__grid--soon { margin-top: 14px; }
/* auto-fill (not -fit) so the lone Coming Soon card keeps a card's width
   instead of stretching across the whole row. */
.wf__grid--soon { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Card — shared shell for the agent cards and the Coming Soon rail. */
.wf__card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 16px);
  background: var(--bg-surface, #fff); padding: 24px;
  transition: border-color var(--dur-base) var(--ease-out);
}
/* Configurable agent cards are the way into that agent's configuration.
   Static cards — the Coming Soon rail, and the roster's request-to-add cards
   (Grace / Leo, .wf__card--static) where only the inner button is
   clickable — get no pointer and no hover lift. */
.wf__grid:not(.wf__grid--soon) .wf__card:not(.wf__card--static) { }
/* Every clickable card lifts with a blue hairline border on hover — the same
   website-style treatment Home gives every card (.dashv2__* / .bookv__kpi). */
.wf__grid:not(.wf__grid--soon) .wf__card:not(.wf__card--static):hover {
  border-color: var(--accent);
}
.wf__card:focus-visible { border-color: var(--accent); }
/* Coming Soon workers are a quieter fill — static, no hover. */
.wf__card--soon { background: var(--bg-muted, rgba(8,23,79,.02)); }

/* Card header — avatar + name/role, status badge pinned right. */
.wf__head { display: flex; align-items: center; gap: 12px; }
.wf__av { position: relative; flex: 0 0 44px; width: 44px; height: 44px; }
.wf__av img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
/* Live presence pip on the reception avatar. */
.wf__dot {
  position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--status-success, #1F9E6E); border: 2px solid var(--bg-surface, #fff);
}
/* Bare glyph, no chip/tile behind it (house style: no icon backgrounds). */
.wf__soon-av {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-4);
}
.wf__soon-av svg { width: 20px; height: 20px; }

/* Phoebe sparkle mark — identical brand gradient + white twinkle used on the
   home card and the Phoebe Intelligence page (same look everywhere). */
.wf__spark-av {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.wf__spark { width: 24px; height: 24px; transform-origin: center; animation: pcardSparkTwinkle 2.6s ease-in-out infinite; }

.wf__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.wf__nm { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--fg-1); }
.wf__rl { font-size: 12.5px; font-weight: 600; color: var(--fg-4); }

/* Status badge (Live / Active / Not added / Coming soon). */
.wf__badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill, 999px);
}
.wf__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wf__badge--live { color: var(--status-success, #1F9E6E); background: var(--status-success-soft, #E6F5EF); }
.wf__badge--off, .wf__badge--soon { color: var(--fg-4); background: var(--bg-muted, rgba(8,23,79,.05)); }
[data-theme="dark"] .wf__badge--off, [data-theme="dark"] .wf__badge--soon { background: rgba(255,255,255,.06); }

/* Description — always keep a comfortable gap above the (bottom-pinned) button. */
.wf__sum { margin: 14px 0 20px; font-size: 13.5px; line-height: 1.55; color: var(--fg-3); }

/* Buttons — full-width block on the cards, left-aligned pill on Intelligence. */
.wf__btn {
  margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; line-height: 1;
  border-radius: 10px; border: 1px solid transparent; 
  transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.wf__btn svg { width: 15px; height: 15px; }
.wf__btn--block { width: 100%; padding: 11px 16px; margin-top: auto; }
.wf__btn--pill { align-self: flex-start; margin-top: auto; padding: 8px 16px; border-radius: var(--radius-pill, 999px); }
/* Fixed brand blue + white in both themes — the same primary CTA as the home
   card's "Open Phoebe Intelligence" pill (.dashv2__cta-pill). */
.wf__btn--primary { background: var(--pul-blue); color: #fff; }
.wf__btn--primary:hover { background: var(--accent-hover); }
.wf__btn--ghost { background: #FFFFFF; border-color: transparent; color: var(--fg-2, var(--fg-1)); }
.wf__btn--ghost:hover { border-color: var(--pul-blue); color: var(--pul-blue); }
.wf__btn--ghost:active { background: var(--pul-blue); border-color: var(--pul-blue); color: var(--accent-on, #fff); }
/* "You're on the List" — confirmed opt-in; still a toggle, click to opt back out. */
.wf__btn--ghost.is-done { color: var(--status-success, #1F9E6E); border-color: var(--status-success-soft, #E6F5EF); }
.wf__btn--ghost.is-done:hover { border-color: var(--status-success, #1F9E6E); color: var(--status-success, #1F9E6E); }
.wf__btn:disabled { cursor: default; }
/* Arrow nudges right on hover — the same motion as the home CTA (.dashv2__cta-pill). */
.wf__btn .wf__cta-arrow { display: inline-flex; align-items: center; justify-content: center; transition: transform .36s cubic-bezier(.22, .61, .36, 1); }
.wf__btn:hover .wf__cta-arrow { transform: translateX(5px); }

/* Intelligence panel — two cards flush inside one tinted container. Inner
   cards carry no border of their own (no nested box outlines). */
.wf__intel {
  margin-top: 14px; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 16px;
  border: 1px solid rgba(26,115,232,.16); border-radius: var(--radius-xl, 20px);
  background: linear-gradient(160deg, rgba(26,115,232,.06), rgba(26,115,232,.02));
}
[data-theme="dark"] .wf__intel { border-color: rgba(91,157,255,.18); background: linear-gradient(160deg, rgba(91,157,255,.08), rgba(91,157,255,.02)); }
.wf__icard {
  display: flex; flex-direction: column;
  border: 1px solid transparent;   /* flush inside the panel at rest; blue hairline on hover only */
  border-radius: var(--radius-lg, 16px); background: var(--bg-surface, #fff); padding: 24px;
  transition: border-color var(--dur-base) var(--ease-out);
}
/* Only the clickable card (Phoebe) hovers — Clara's card is a static panel
   (just a Notify Me button inside), so it gets no hover treatment at all. */
.wf__icard--link { }
.wf__icard--link:hover {
  border-color: var(--accent);
}
.wf__icard--link:focus-visible { border-color: var(--accent); }

/* Phoebe's card echoes the home Phoebe Intelligence banner (.dashv2__pcard):
   a blue→white gradient, a soft top-right corner glow, and a navy title.
   Fixed brand colours in both themes, exactly like the home banner. */
.wf__icard--phoebe {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #FFFFFF 0%, #F2F7FE 100%);
  border-color: transparent;
}
.wf__icard--phoebe::after {
  content: ""; position: absolute; width: 300px; height: 300px; right: -110px; top: -120px;
  background: radial-gradient(circle, rgba(26,115,232,.14), transparent 65%);
  pointer-events: none;
}
.wf__icard--phoebe .wf__nm { color: #0F2E5C; }
.wf__icard--phoebe .wf__rl { color: #5A6E8C; }
.wf__icard--phoebe .wf__sum { color: #3D5273; }
/* Header, title and CTA must sit above the corner glow. */
.wf__icard--phoebe > * { position: relative; }

@media (max-width: 560px) {
  .wf__grid, .wf__intel { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Connected Apps (cnx__*) — the Nango-brokered integrations directory: a
   logo grid of app cards with Connect / Connected / Needs attention states,
   on the same card recipe as the Agents tab (wf__*).
   ══════════════════════════════════════════════════════════════════════════ */

.cnx__sub { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--fg-3); max-width: 620px; }

.cnx__grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: stretch;
}

.cnx__card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 16px);
  background: var(--bg-surface, #fff); padding: 24px;
}

.cnx__head { display: flex; align-items: center; gap: 12px; }
/* App logo — the provider's own mark, or a bare glyph fallback (house style:
   no chip/tile behind an icon). */
.cnx__logo { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.cnx__logo img { width: 36px; height: 36px; object-fit: contain; display: block; }
.cnx__logo--glyph { color: var(--fg-4); }

.cnx__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.cnx__nm { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--fg-1); }
.cnx__cat { font-size: 12px; font-weight: 600; color: var(--fg-4); }

.cnx__badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill, 999px);
}
.cnx__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cnx__badge--on { color: var(--status-success, #1F9E6E); background: var(--status-success-soft, #E6F5EF); }
.cnx__badge--err { color: var(--status-danger); background: var(--status-danger-soft); }

.cnx__sum { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--fg-3); }
.cnx__acct { margin: 8px 0 0; font-size: 12.5px; color: var(--fg-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnx__error { margin: 8px 0 0; font-size: 12.5px; color: var(--status-danger); }
.cnx__hint { margin: 14px 0 0; padding-top: 4px; font-size: 12.5px; color: var(--fg-4); margin-top: auto; }

.cnx__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 16px; }
.cnx__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; line-height: 1;
  padding: 8px 16px; border-radius: 10px; border: 1px solid transparent; 
  transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.cnx__btn:disabled { opacity: .6; cursor: default; }
.cnx__btn svg { width: 15px; height: 15px; }
/* Primary routes through the accent tokens so dark mode adapts (#5B9DFF). */
.cnx__btn--primary { background: var(--pul-blue); color: #fff; flex: 1; }
.cnx__btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.cnx__btn--ghost { background: #FFFFFF; border-color: transparent; color: var(--fg-2, var(--fg-1)); }
.cnx__btn--ghost:hover:not(:disabled) { border-color: var(--pul-blue); color: var(--pul-blue); }
.cnx__btn--danger:hover:not(:disabled) { border-color: var(--status-danger); color: var(--status-danger); }
.cnx__btn--danger:active:not(:disabled) { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }

/* Agent tools — per-tool on/off for a connected app that ships first-class
   agent tools (e.g. Semble). A flush disclosure under the card summary: a
   divider, a list of toggle rows, no nested box (house style). */
.cnx__tools { margin-top: 14px; border-top: 1px solid var(--border-subtle); }
.cnx__tools-tgl {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 12px 0 4px; border: 0; background: transparent; 
  font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg-2);
  text-align: left; transition: color .2s ease;
}
.cnx__tools-tgl:hover { color: var(--pul-blue); }
.cnx__tools-tgl svg { flex: none; color: var(--fg-4); }
.cnx__tools-body { display: flex; flex-direction: column; padding-bottom: 4px; }
.cnx__tools-note { font-size: 12.5px; color: var(--fg-4); padding: 6px 0; }
.cnx__tool { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.cnx__tool:first-child { border-top: 0; }
.cnx__tool-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.cnx__tool-nm { font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
/* Raw tool identifier — platform-admin only. Arial per house style (no mono),
   muted, wraps rather than overflows the card. */
.cnx__tool-id { font-family: var(--font-display); font-size: 11px; color: var(--fg-4); word-break: break-word; }
.cnx__tool-ds {
  font-size: 12px; line-height: 1.45; color: var(--fg-4);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cnx__tool-sw { flex: none; margin-top: 1px; }

/* Honest empty / not-configured states. */
.cnx__empty { font-size: 14px; color: var(--fg-3); }
.cnx__empty-block { padding: 40px 40px; text-align: center; }
.cnx__empty-block .cnx__empty { margin-top: 10px; }
.cnx__empty-glyph { color: var(--fg-4); }

@media (max-width: 560px) {
  .cnx__grid { grid-template-columns: 1fr; gap: 12px; }
  .cnx__card { padding: 16px; }
  /* Let the status badge drop below the name rather than crowd it on a narrow
     card (long provider names + "Connected"). */
  .cnx__head { flex-wrap: wrap; row-gap: 8px; }
  /* Full-width, comfortably tappable actions on phones. */
  .cnx__actions { flex-direction: column; }
  .cnx__btn { width: 100%; padding: 12px 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phoebe Intelligence (phin__*) — insight cards, VoC theme cards, severity
   chips on the .outc recipe, narrative band echoing the website ph-bubble.
   ══════════════════════════════════════════════════════════════════════════ */

.phin__stamp { margin: 0; font-size: 11.5px; color: var(--fg-4); }
.phin__grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.phin__sec-t { margin: 20px 2px 0; font-size: 13px; font-weight: 600; color: var(--fg-2); }

.phin__card { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 16px); background: var(--bg-surface, #fff); padding: 14px 16px; }
.phin__card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.phin__sev { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; padding: 2px 9px; border-radius: 999px; }
.phin__card--risk .phin__sev { color: var(--status-danger); background: var(--status-danger-soft); }
.phin__card--opp  .phin__sev { color: var(--status-success); background: var(--status-success-soft); }
.phin__card--info .phin__sev { color: var(--pul-blue); background: var(--pul-blue-tint); }
.phin__delta { font-size: 12px; font-weight: 600; }
.phin__delta.is-up { color: var(--status-success); }
.phin__delta.is-down { color: var(--status-danger); }
.phin__head { font-size: 14.5px; font-weight: 600; color: var(--fg-1); line-height: 1.35; }
.phin__detail { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.phin__evidence { margin-top: 10px; font-size: 12px; color: var(--fg-4); display: flex; gap: 8px; align-items: center; }
.phin__evidence a { color: var(--pul-blue); font-weight: 600; }

.phin__voc { border: 1px solid var(--border-subtle); border-radius: 16px 16px 16px 4px; background: var(--bg-surface); padding: 13px 16px; }
.phin__voc-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.phin__voc-t { font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.35; }
.phin__voc-n { font-size: 12px; font-weight: 700; color: var(--fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.phin__voc-foot { margin-top: 8px; display: flex; gap: 10px; align-items: center; }
.phin__voc-link { font-size: 12px; color: var(--pul-blue); font-weight: 600; }

.phin__sent { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.phin__sent--pos { color: var(--status-success); background: var(--status-success-soft); }
.phin__sent--neu { color: var(--fg-3); background: var(--bg-muted); }
.phin__sent--neg { color: var(--status-danger); background: var(--status-danger-soft); }
.phin__sentbar { margin-top: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.phin__sentbar-n { font-size: 12px; color: var(--fg-4); }

/* Dismiss control on a recommendation card (top-right, ghost icon button). */
.phin__card-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--fg-4); border-radius: var(--radius-md, 8px); transition: color var(--dur-base) var(--ease-out); }
.phin__card-x:hover { color: var(--status-danger); }
.phin__card-x:disabled { opacity: .5; cursor: default; }
.phin__card-x svg { width: 15px; height: 15px; }

.phin__panel { padding: 14px 16px; }
.phin__panel-t { font-size: 13px; font-weight: 600; color: var(--fg-2); margin-bottom: 8px; }
.phin__chart-t { font-size: 13px; font-weight: 600; color: var(--fg-2); margin-bottom: 12px; }
.phin__svc { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; color: var(--fg-2); border-top: 1px solid var(--border-subtle); }
.phin__svc:first-of-type { border-top: 0; }
.phin__svc-n { font-weight: 600; color: var(--fg-1); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.phin__empty { margin-top: 18px; padding: 44px 20px; text-align: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 16px); background: var(--bg-surface); }
.phin__empty-t { font-size: 15px; font-weight: 600; color: var(--fg-2); }
.phin__empty-s { margin: 8px auto 0; font-size: 13px; color: var(--fg-4); max-width: 480px; line-height: 1.5; }
.phin__empty-cta { margin-top: 16px; }

/* Phoebe header aligns to the fixed bell exactly like the Home tab: the content
   right-pads to 32px (the bell's right:32px gutter) and top-pads to 22px so the
   range segment's vertical centre lines up with the bell (top:20px). The range
   segment's margin-right = bell width (40) + 14px gap = 54px, so it lands
   exactly 14px to the bell's left. */
.phin.va__main { padding-top: 22px; padding-right: 32px; }
.phin .va__top-r { margin-right: 54px; }

/* Section headers — one page, four titled sections. The negative bottom margin
   pulls the section body back inside the .va__main--scroll 24px flex gap so
   the header reads attached to its content. */
.phin__sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 2px -8px; }
.phin__sec-ht { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--fg-1); letter-spacing: -0.01em; }

/* Market Watch — evidence source links, per-card curation actions, the
   "watching for next run" chip row, and the add-competitor inline form. */
.phin__mw-src { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.phin__mw-src a { color: var(--pul-blue); font-weight: 600; }
.phin__mw-acts { display: inline-flex; gap: 4px; }
.phin__mw-act { border: 1px solid transparent; background: #FFFFFF; padding: 2px 6px; border-radius: var(--radius-md, 8px); font-size: 11.5px; font-weight: 600; color: var(--fg-4); transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.phin__mw-act:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.phin__mw-act--danger:hover:not(:disabled) { border-color: var(--status-danger); color: var(--status-danger); }
.phin__mw-act:disabled { opacity: .5; cursor: default; }
.phin__mw-changes { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.phin__mw-watch { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.phin__mw-watch-l { font-size: 12px; color: var(--fg-4); }
.phin__mw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--bg-muted); font-size: 12px; font-weight: 600; color: var(--fg-2); }
.phin__mw-chip button { border: 0; background: transparent; padding: 0; font-size: 13px; line-height: 1; color: var(--fg-4); }
.phin__mw-chip button:hover:not(:disabled) { color: var(--status-danger); }

/* Pill group in a card head (severity pill + tier/confidence chip). */
.phin__pills { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Neutral secondary chip — competitor research tiers and briefing-action
   confidence ride the same recipe. */
.phin__tier { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; padding: 2px 8px; border-radius: 999px; color: var(--fg-3); background: var(--bg-muted); white-space: nowrap; }
/* Tier suffix inside a "watching" curation chip — plain muted text, never a
   pill-in-a-pill. */
.phin__mw-chip-tier { font-weight: 500; font-size: 11px; color: var(--fg-4); }
/* Pricing comparison rows — the competitor name reads muted before the item. */
.phin__price-c { color: var(--fg-4); }
/* Mined-signal count chip (sits on the muted panel, so surface fill). */
.phin__mined-n { flex: none; align-self: center; font-size: 11px; font-weight: 700; color: var(--fg-2); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 1px 8px; margin-left: 10px; }
/* Subsection head variant with a right-aligned stamp (the weekly research
   date rides the first Market Intelligence subsection). */
.phin__sec-t--row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

/* ── Urgent This Week — red-left-border rows, hidden entirely when empty ── */
.phin__urgent { flex: 0 0 auto; }
.phin__urgent-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.phin__urgent-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 16px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 3px solid var(--status-danger); border-radius: var(--radius-lg, 16px); }
.phin__urgent-t { font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.35; }
.phin__urgent-b { margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.phin__urgent-d { flex: none; font-size: 11.5px; color: var(--fg-4); white-space: nowrap; }

/* ── Weekly Briefing centerpiece (phin__wb) ─────────────────────────────────
   A plain section (heading on the page background, like Suggested Actions);
   the content renders as white floating cards —
   action cards and recap rows drop their own borders onto a muted fill
   (house rule: no box-in-box). */
.phin__wb { flex: 0 0 auto; }
.phin__wb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 2px 0; }
.phin__wb-head-l { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.phin__wb-sel { display: inline-flex; align-items: center; gap: 8px; }
.phin__wb-sel-l { font-size: 12px; color: var(--fg-4); }
.phin__wb-select { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--fg-2); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px); padding: 6px 10px; outline: none; max-width: 240px; }
.phin__wb-select:hover, .phin__wb-select:focus { border-color: var(--accent); }
.phin__wb-headline { margin-top: 14px; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg-1); line-height: 1.3; }
.phin__wb-para { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--fg-2); max-width: 72ch; }
.phin__wb .phin__card { border-color: var(--border-subtle); background: var(--bg-surface); }
.phin__wb .phin__mined-n, .phin__wb .phin__tier { background: var(--bg-muted); border-color: transparent; }
.phin__wb .phin__empty { border: 1px solid var(--border-subtle); background: var(--bg-surface); margin-top: 14px; }
.phin__wb .phin__urgent-row { border: 1px solid var(--border-subtle); border-left: 3px solid var(--status-danger); background: var(--bg-surface); border-radius: var(--radius-md, 8px); }
.phin__wb-act--dismissed { opacity: .55; }
.phin__wb-mods { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .phin__wb-mods { grid-template-columns: 1fr; } }
.phin__wb-mod { border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.phin__wb-mod-t { font-size: 12px; font-weight: 700; color: var(--fg-3); }
.phin__wb-mod-h { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--fg-1); line-height: 1.4; }
.phin__wb-mod-pts { margin: 8px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.55; color: var(--fg-3); }
.phin__wb-mod-pts li + li { margin-top: 4px; }
.phin__wb-mod-empty { margin-top: 8px; font-size: 12.5px; color: var(--fg-4); }
.phin__wb-note { display: block; margin-top: 18px; }

/* ── Weekly briefing banner ──────────────────────────────────────────────────
   The homepage "impact ledger" treatment (white card, soft shadow, hairline
   header, column-divided outcome tiles) carrying Phoebe's cross-function
   briefing narrative. Absorbs the old gradient hero band + "Phoebe's read". */
/* Phoebe briefing banner — the home-screen Phoebe card treatment: a fixed
   white→light-blue brand gradient with a soft corner glow and an animated
   sparkle avatar. Fixed colours (not theme vars) — the banner reads identically
   in light and dark by design, matching .dashv2__pcard. */
.phin__brief {
  position: relative;
  flex: 0 0 auto;              /* the scroll column is flex; overflow:hidden lets it shrink to 0 without this */
  border: 1px solid #D5E4FA;
  border-radius: var(--radius-xl, 20px);
  background: linear-gradient(160deg, #FFFFFF 0%, #F2F7FE 100%);
  overflow: hidden;
}
/* Corner glow — decorative only, never intercepts a click. */
.phin__brief-glow {
  content: ""; position: absolute; width: 300px; height: 300px; right: -110px; top: -120px;
  background: radial-gradient(circle, rgba(26, 115, 232, .14), transparent 65%);
  pointer-events: none;
}
.phin__brief-head {
  position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 24px; border-bottom: 1px solid rgba(26, 115, 232, .14);
}
.phin__brief-mark { display: flex; align-items: center; gap: 12px; }
.phin__brief-av {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4D95F2, #1A73E8);
  box-shadow: 0 4px 12px rgba(26, 115, 232, .35);
}
/* Sparkle stays full-opacity white — twinkle is rotation + scale only, reusing
   the home card's keyframes so both animate in step. */
.phin__brief-spark { width: 20px; height: 20px; transform-origin: center; animation: pcardSparkTwinkle 2.6s ease-in-out infinite; }
.phin__brief-h { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: #0F2E5C; line-height: 1.2; }
.phin__brief-sub { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: #5A6E8C; }
.phin__brief-stamp { margin-top: 1px; font-size: 11px; color: #7E93B4; }
.phin__brief-period {
  font-size: 12.5px; color: #1A73E8; background: rgba(26, 115, 232, .10);
  border-radius: 999px; padding: 6px 13px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.phin__brief-body { position: relative; padding: 16px 24px 6px; font-size: 14.5px; line-height: 1.62; color: #25406A; }
.phin__brief-body--muted { color: #7E93B4; }
.phin__brief-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 0 6px; }
.phin__brief-tile { padding: 12px 24px 14px; position: relative; }
.phin__brief-tile + .phin__brief-tile::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(26, 115, 232, .14);
}
.phin__brief-v { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: #0F2E5C; font-variant-numeric: tabular-nums; }
.phin__brief-v.is-pending { color: #9DB4D4; }
.phin__brief-l { margin-top: 6px; font-size: 12.5px; font-weight: 500; color: #5A6E8C; }
@media (max-width: 760px) { .phin__brief-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Switchable analytics box + view switch ──────────────────────────────────
   One bordered surface. A segmented control (iOS-style track) heads it; the
   active view's neutral panels sit flush on the surface — no box-in-box. */
.phin__box {
  flex: 0 0 auto;             /* same flex-column shrink guard as .phin__brief */
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl, 20px);
  background: var(--bg-surface);
  overflow: hidden;
}
.phin__viewtabs {
  display: inline-flex; gap: 2px; max-width: 100%; overflow-x: auto;
  margin: 16px 20px 4px; padding: 3px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 999px;
}
.phin__view-b {
  flex: none; border: 0; background: transparent; 
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--fg-1);
  padding: 8px 18px; border-radius: 999px; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.phin__view-b:hover:not(.is-on) { color: var(--accent); }
.phin__view-b.is-on { color: #fff; background: var(--accent); }
.phin__box-body { padding: 8px 20px 22px; }
/* Panels and cards sit flush on the box surface — no concentric outline, no
   drop shadow (house rule: no box-in-box). The shared blue-hairline hover
   lift stays live on all of them. */
.phin__box-body .panel,
.phin__box-body .phin__card { border-color: transparent; background: var(--bg-subtle); }
/* The first section head inside the box hugs the tabs. */
.phin__box-body > .phin__sec-h:first-child { margin-top: 8px; }

/* Suggested actions — exactly three across on wide screens. */
.phin__grid--actions { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .phin__grid--actions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .phin__grid--actions { grid-template-columns: 1fr; } }

/* ── Home-dashboard treatment for every Phoebe box ──────────────────────────
   The same white-card surface + blue-hairline hover lift the Home screen uses
   on .dashv2__kpi etc., applied across the Phoebe surface so the whole screen
   feels alive and consistent. */
.phin .phin__card,
.phin .phin__voc {
  transition: border-color var(--dur-base) var(--ease-out);
}
.phin .phin__card:hover,
.phin .phin__voc:hover {
  border-color: var(--accent);
}

/* KPI strip (Business Analyst + Marketing) → separate Home-style KPI cards
   instead of one connected panel, so the boxes read clearly and pick up the
   hover lift. Labels drop the all-caps treatment to match the Home tiles. */
.phin .va__stats.phoebe-stats {
  background: transparent; border: 0; border-radius: 0; overflow: visible; gap: 14px;
}
.phin .phoebe-stats .va__stat {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: 16px 18px;
  gap: 10px;
}
.phin .phoebe-stats .va__stat-l {
  font-size: 12px; font-weight: 500; color: var(--fg-4);
}

/* ══════════════════════════════════════════════════════════════════════════
   Pulsium Brain (brain__*) — the living knowledge workspace: pill tabs on top
   (All Knowledge · Activity · Sources · Archived) over a single pane. Compact
   knowledge rows, the Activity change feed, and the Sources cards.
   ══════════════════════════════════════════════════════════════════════════ */

.brain__flash { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--pul-blue-tint); color: var(--pul-blue); font-size: 13.5px; }

.brain__verify { margin-top: 12px; padding: 9px 14px; border-radius: 10px; font-size: 13px; background: var(--status-warning-soft); color: var(--status-warning); border: 1px solid var(--status-warning); }
.brain__verify--ok { background: var(--status-success-soft); color: var(--status-success); border-color: var(--status-success); }

/* ── Two-pane workspace ───────────────────────────────────────────────── */
.brain__pane { margin-top: 16px; min-width: 0; }
.brain__pane-inner { display: block; }

/* Tab row — pill tabs left, knowledge search right, one baseline. */
.brain__topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; flex-wrap: wrap;
}

/* Knowledge search — a quiet pill that matches the tab track's height and
   radius. Hover and focus share the same solid brand-blue border (no glow
   halo); focus just adds a little more room. */
.brain__search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; width: 210px;
  padding: 0 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.brain__search:hover { border-color: var(--pul-blue); }
.brain__search:focus-within,
.brain__search.has-q {
  width: 280px;
  border-color: var(--pul-blue);
}
.brain__search-icon { flex-shrink: 0; color: var(--fg-4); pointer-events: none; }
.brain__search:focus-within .brain__search-icon { color: var(--pul-blue); }
.brain__search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.3; color: var(--fg-1);
}
.brain__search input::placeholder { color: var(--fg-4); }
.brain__search-x {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--fg-3); 
  transition: color var(--dur-fast) var(--ease-out);
}
.brain__search-x:hover { color: var(--status-danger); }

/* Top pill tabs — the Conversations segmented-track shape (.cx-pillbar / .cx-pill),
   with a Brain-specific palette: white track, hover just tints the text blue
   (no background fill), and the active pill is a solid blue fill. */
.brain__tabs.cx-pillbar { align-self: flex-start; background: var(--bg-surface); }
.brain__tabs .cx-pill { display: inline-flex; align-items: center; gap: 7px; }
.brain__tabs .cx-pill svg { width: 14px; height: 14px; }
.brain__tabs .cx-pill:hover:not(.is-on) { color: var(--pul-blue); background: transparent; }
.brain__tabs .cx-pill.is-on { background: var(--pul-blue); color: var(--fg-on-brand); box-shadow: none; }
/* Review-count badge inside the pill; translucent white on the active (blue-filled) pill. */
.brain__tab-n { margin-left: 2px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5; background: var(--pul-blue); color: #fff; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.brain__tabs .cx-pill.is-on .brain__tab-n { background: rgba(255, 255, 255, .22); color: var(--fg-on-brand); }

/* ── Review (inbox) ───────────────────────────────────────────────────── */
.brain__needs { margin: 4px 0 24px; }
.brain__needs-h { font-size: 15px; font-weight: 650; color: var(--fg-1); display: flex; align-items: center; gap: 8px; }
.brain__needs-s { margin-top: 3px; font-size: 12.5px; color: var(--fg-3); }
.brain__gap { background: var(--bg-surface, #fff); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 16px 18px; margin-top: 14px; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.brain__gap:hover { border-color: var(--pul-blue); }
.brain__gap-q { font-size: 14px; font-weight: 600; color: var(--fg-1); }
.brain__gap-meta { margin-top: 4px; font-size: 12px; color: var(--fg-4); display: flex; gap: 8px; align-items: baseline; }
.brain__gap-row { margin-top: 9px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Answer field with the send button tucked inside its right edge (the
   onboarding chat pattern). The wrapper is the positioning context; the
   input reserves padding so typed text never runs under the icon. */
.brain__gap-inputwrap { position: relative; flex: 1; min-width: 200px; display: flex; align-items: center; }
.brain__gap-input { flex: 1; min-width: 0; padding-right: 46px; }
/* Placeholder and the idle send icon share one token so they always match. */
.brain__gap-input::placeholder { color: var(--fg-4); opacity: 1; }
.brain__gap-send {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--fg-4); 
  transition: color .15s var(--ease-out, ease-out);
}
.brain__gap-send:disabled { color: var(--fg-4); cursor: default; }
.brain__gap-send:not(:disabled) { color: var(--brain-blue, #1A73E8); }
.brain__gap-send svg { transition: transform .3s var(--ease-out, ease-out); }
.brain__gap-send:not(:disabled):hover { color: var(--brain-blue-press, #1666D0); }
.brain__gap-send:not(:disabled):hover svg { transform: translate(2px, -2px); }
.brain__gap-send:focus-visible { outline: none; color: var(--brain-blue-press, #1666D0); }
/* The answer box: the same solid blue border on hover and focus — no glow
   halo (the border alone is the focus treatment). */
.brain__gap-input:hover { border-color: var(--brain-blue, #1A73E8); }
.brain__gap-input:focus { border-color: var(--brain-blue, #1A73E8); box-shadow: none; }

/* Weekly-review suggestions — the same card shell as gaps, with a kind
   label and a before/after preview (fills only, no inner borders). */
.brain__sugg-kind { font-size: 11px; font-weight: 650; color: var(--pul-blue); margin-bottom: 3px; }
.brain__sugg-prev { margin-top: 8px; display: grid; gap: 6px; }
.brain__sugg-old { font-size: 12.5px; line-height: 1.45; color: var(--fg-4); background: var(--bg-muted, #F6F7F9); border-radius: 8px; padding: 6px 9px; white-space: pre-wrap; text-decoration: line-through; }
.brain__sugg-old--plain { text-decoration: none; }
.brain__sugg-new { font-size: 12.5px; line-height: 1.45; color: var(--fg-1); background: var(--pul-blue-tint, #DCE6FB); border-radius: 8px; padding: 6px 9px; white-space: pre-wrap; }
.brain__sugg-new-t { font-weight: 600; }
.brain__sugg-edittitle, .brain__sugg-editbody { width: 100%; }

/* ── Bulk bar ─────────────────────────────────────────────────────────── */
.brain__bulkbar { position: sticky; top: 8px; z-index: 2; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 14px; border: 1px solid var(--border-subtle); background: var(--bg-surface, #fff); border-radius: 12px; box-shadow: var(--shadow-xs); }
.brain__bulkbar-n { font-size: 13px; font-weight: 600; color: var(--pul-blue); margin-right: auto; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
/* Destructive bulk action — the white button goes red on hover, not blue. */
.brain__btn--danger:hover:not(:disabled) { border-color: var(--status-danger); color: var(--status-danger); }
.brain__btn--danger:active:not(:disabled) { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }

/* ── All Knowledge — overview grid + compact rows ─────────────────────── */
/* List header: the round-chip back control (agent-crumb) + the Select toggle. */
.brain__listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.brain__listhead--end { justify-content: flex-end; }

/* Stat strip — one unified bar with hairline dividers between columns,
   not separate tiles (avoids box-in-box against the catgrid cards below). */
.brain__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.brain__stat {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; background: var(--bg-surface, #fff);
  border: 1px solid var(--border-subtle); border-radius: 14px; text-align: left;
}
.brain__stat > svg { color: var(--accent); margin-bottom: 8px; }
.brain__stat--warn > svg { color: var(--status-warning); }
.brain__stat-n { font-size: 24px; font-weight: 700; color: var(--fg-1); line-height: 1.15; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.brain__stat-l { font-size: 12px; color: var(--fg-3); }
button.brain__stat { font-family: inherit; }
/* All four stats share the home-KPI lift + blue-border hover (.dashv2__kpi). */
.brain__stat {
  transition: border-color var(--dur-base) var(--ease-out);
}
.brain__stat:hover, .brain__stat:focus-visible {
  border-color: var(--accent);
}
.brain__stat-go {
  position: absolute; top: 14px; right: 14px; display: inline-flex; color: var(--accent);
  opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease;
}
.brain__stat--link:hover .brain__stat-go, .brain__stat--link:focus-visible .brain__stat-go { opacity: 1; transform: none; }

/* Category overview cards (grid variant). */
.brain__catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.brain__catcard {
  display: flex; flex-direction: column; gap: 8px; text-align: left; 
  border: 1px solid var(--border-subtle); border-radius: 14px;
  background: var(--bg-surface, #fff); padding: 14px 16px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.brain__catcard:hover { border-color: var(--pul-blue); }
.brain__catcard:focus-visible { border-color: var(--pul-blue); }
.brain__catcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brain__catcard-name { font-size: 14.5px; font-weight: 650; color: var(--fg-1); }
.brain__catcard-preview { display: flex; flex-direction: column; gap: 3px; min-height: 34px; }
.brain__catcard-line { font-size: 12.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brain__catcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--fg-4); }

/* Compact rows — one bordered list container, hairline separators inside
   (rows themselves are borderless: no box-in-box). */
.brain__rows { background: var(--bg-surface, #fff); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; }
.brain__row-wrap + .brain__row-wrap, .brain__rows-h + .brain__row-wrap { border-top: 1px solid var(--border-subtle); }
.brain__row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.brain__row:hover { background: var(--bg-muted); }
.brain__row.is-selected { background: var(--pul-blue-tint, #EAF1FE); }
.brain__row-wrap.is-expanded .brain__row { background: var(--bg-muted); }
.brain__row--editing { cursor: default; }
.brain__row--editing:hover { background: transparent; }
.brain__row-editbox { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.brain__row-check { flex-shrink: 0; accent-color: var(--pul-blue); }
.brain__row-t { flex-shrink: 0; max-width: 36%; font-size: 13.5px; font-weight: 600; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brain__row-b { flex: 1; min-width: 0; font-size: 13px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brain__row-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.brain__row-chip { font-size: 11px; font-weight: 600; color: var(--fg-4); background: var(--bg-muted); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.brain__row-cat { font-size: 11px; font-weight: 650; color: var(--pul-violet); background: var(--pul-violet-tint); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.brain__row-flag { font-size: 11px; font-weight: 600; color: var(--status-warning); background: var(--status-warning-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.brain__row-when { font-size: 11.5px; color: var(--fg-4); white-space: nowrap; min-width: 58px; text-align: right; }
.brain__row-tools { display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-fast, .12s) ease; flex-shrink: 0; }
.brain__row:hover .brain__row-tools { opacity: 1; }

/* Chevron toggle — always visible (unlike the hover-only edit/archive
   tools) so it's clear every row expands. Rotates to point up when open. */
.brain__row-chevron { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; background: transparent; color: var(--fg-4); border-radius: 6px; transition: transform var(--dur-fast, .18s) ease, background .12s ease, color .12s ease; }
.brain__row-chevron:hover { background: var(--bg-surface, #fff); color: var(--fg-2); }
.brain__row-wrap.is-expanded .brain__row-chevron { transform: rotate(180deg); color: var(--pul-blue); }

/* Inline detail accordion — expands directly under the clicked row using
   the grid-rows trick (0fr → 1fr) so the height animates smoothly without
   knowing the content's size up front. Padding lives on the inner div, not
   the grid track, so the collapsed state clips to exactly zero. */
.brain__row-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.brain__row-wrap.is-expanded .brain__row-detail { grid-template-rows: 1fr; }
.brain__row-detail-inner { min-height: 0; overflow: hidden; }
.brain__row-detail-body { padding: 2px 14px 14px 14px; font-size: 13px; line-height: 1.55; color: var(--fg-2); white-space: pre-wrap; }
.brain__row-detail-prov { padding: 0 14px 14px 14px; }

/* ── Entry cards ──────────────────────────────────────────────────────── */
.brain__group-n { font-size: 11px; font-weight: 700; color: var(--fg-4); background: var(--bg-muted); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.brain__cat { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--pul-violet); background: var(--pul-violet-tint); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
/* Icon buttons render the glyph bare — no tinted chip behind it; hover just
   turns the stroke brand blue. */
.brain__iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: none; border-radius: 7px; color: var(--fg-4); transition: color var(--dur-fast, .12s) ease; }
.brain__iconbtn:hover { background: none; color: var(--pul-blue); }
.brain__iconbtn svg { width: 15px; height: 15px; }
.brain__btn { font-size: 12.5px; padding: 5px 14px; }

.brain__edit-title { width: 100%; font-weight: 600; }
.brain__edit-body { width: 100%; margin-top: 8px; }
.brain__edit-row { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.brain__edit-actions { margin-left: auto; display: flex; gap: 8px; }

.brain__src { font-size: 11.5px; color: var(--fg-4); display: inline-flex; gap: 8px; align-items: center; }
.brain__src--call { color: var(--pul-blue); }
.brain__src--web { color: var(--status-success); }
.brain__src--doc { color: var(--pul-violet); }
.brain__src-link { font-weight: 600; text-decoration: none; color: var(--brain-blue, #1A73E8); }
.brain__src-link:hover { font-weight: 700; }
.brain__add { margin: 0 0 14px; padding: 14px 16px; }
.brain__add-body { margin-top: 8px; width: 100%; }
.brain__add-actions { margin-top: 10px; display: flex; gap: 8px; }
.brain__err { margin-top: 8px; font-size: 12.5px; color: var(--status-danger); }

/* ── Sources ──────────────────────────────────────────────────────────────
   Three separate cards (Website · Documents · Email History), each a
   full-width row with a bare icon, a title + status line, and its action on
   the right. Content inside a card stays borderless — no nested outlines. */
.brain__sources { display: grid; gap: 18px; }
.brain__srclist { display: grid; gap: 14px; }
.brain__srccard { border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--bg-surface, #fff); }
.brain__srcrow { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.brain__srcrow-i { width: 18px; height: 18px; color: var(--pul-blue); margin-top: 2px; flex-shrink: 0; }
.brain__srcrow-m { flex: 1; min-width: 0; display: grid; gap: 3px; }
.brain__srcrow-t { font-size: 14.5px; font-weight: 650; color: var(--fg-1); }
.brain__srcrow-s { font-size: 12.5px; color: var(--fg-3); }
.brain__srcrow-s a { color: var(--pul-blue); font-weight: 600; overflow-wrap: anywhere; }
.brain__srcrow-conn { margin-left: 8px; font-weight: 600; color: var(--fg-2); }
.brain__srcrow-meta { font-size: 12px; color: var(--fg-4); }
.brain__srcrow-off { align-self: center; font-size: 12.5px; color: var(--fg-4); white-space: nowrap; }
.brain__srcrow > .btn-secondary { align-self: center; flex-shrink: 0; white-space: nowrap; }
.brain__srcrow .convo__switch { align-self: center; flex-shrink: 0; }
.brain__src-running { color: var(--pul-blue); font-weight: 600; }
.brain__src-urledit { display: flex; align-items: center; gap: 8px; margin: 4px 0; max-width: 100%; flex-wrap: wrap; }
.brain__src-urledit .set-input { width: 340px; max-width: 100%; }

/* "Not connected" tooltip — hover (or keyboard focus) says where to connect. */
.brain__srcrow-off--tip { position: relative; cursor: default; outline: none; }
.brain__tip { display: none; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 30; width: max-content; max-width: 260px; padding: 8px 14px; border-radius: 999px; background: #fff; color: #1a1a1a; font-size: 12px; font-weight: 500; line-height: 1.45; text-align: center; white-space: normal; box-shadow: 0 8px 20px rgba(8, 23, 79, .18), 0 0 0 1px rgba(8, 23, 79, .06); }
.brain__srcrow-off--tip:hover .brain__tip,
.brain__srcrow-off--tip:focus-visible .brain__tip { display: block; }

/* Uploaded documents — a tile per file with its type icon (Word / PDF / …);
   the full name rides the tile tooltip. Muted fill, no nested outline. */
.brain__doctiles { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 20px 18px 52px; }
.brain__doctile { display: grid; justify-items: center; gap: 4px; width: 108px; padding: 4px 8px 0; }
.brain__doctile-name { max-width: 100%; font-size: 12px; color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain__doctile-meta { font-size: 11px; color: var(--fg-4); white-space: nowrap; }
.brain__doctile .brain__doc-act { visibility: hidden; }
.brain__doctile:hover .brain__doc-act,
.brain__doctile .brain__doc-act:focus-visible { visibility: visible; }

/* Archived document rows — flush rows in the Documents card. */
.brain__srcdocs { display: grid; gap: 6px; padding: 0 20px 16px 52px; }
.brain__doc { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-radius: 10px; }
.brain__doc svg { flex-shrink: 0; }
.brain__doc.is-selectable { }
.brain__doc.is-selectable:hover { background: var(--bg-muted); }
.brain__doc.is-selected { background: var(--pul-blue-tint, #EAF1FE); }
.brain__doc-name { font-size: 13px; color: var(--fg-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain__doc-meta { font-size: 11.5px; color: var(--fg-4); white-space: nowrap; }
.brain__doc-act { border: 0; background: none; padding: 2px 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--fg-1); white-space: nowrap; }
.brain__doc-act:hover:not(:disabled) { color: var(--status-danger); }
.brain__doc-act--restore:hover:not(:disabled) { color: var(--pul-blue); }
.brain__doc-act:disabled { opacity: .55; }
/* Delete-forever is an icon button — black at rest, red only on hover. */
.brain__doc-icon { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 4px; border-radius: 8px; color: var(--fg-1); }
.brain__doc-icon--danger:hover:not(:disabled) { color: var(--status-danger); }
.brain__doc-icon:disabled { opacity: .55; }

/* Archived documents — its own top-level tab, so the list is the card's
   whole content (full padding, no icon-column indent). */
.brain__srcdocs--arch { padding: 20px; }
.brain__srcdocs--arch .brain__doc-name { color: var(--fg-3); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .brain__tabs { max-width: 100%; overflow-x: auto; }
  .brain__tabs .cx-pill { flex-shrink: 0; white-space: nowrap; }
  /* Source rows: the action drops under the text instead of squeezing it. */
  .brain__srcrow { flex-wrap: wrap; }
  .brain__srcrow-m { flex-basis: calc(100% - 32px); }
  .brain__srcrow > .btn-secondary,
  .brain__srcrow .convo__switch,
  .brain__srcrow-off { margin-left: 32px; }
  .brain__srcdocs:not(.brain__srcdocs--arch),
  .brain__doctiles { padding-left: 20px; }
  /* Search drops under the tabs and takes the full row. */
  .brain__search,
  .brain__search:focus-within,
  .brain__search.has-q { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   Brain tab — marketing-homepage look (scoped to `.brain` only)
   Pill controls, hairline cards with a soft lift. Type rides the brand
   Arial stack like the rest of the portal (no separate display/serif face).
   Colours ride the portal's themed tokens so light AND dark stay legible.
   Nothing here leaks into other portal tabs — every selector is under `.brain`.
   ════════════════════════════════════════════════════════════════════════ */
.brain {
  --brain-display: var(--font-display);
  --brain-blue: var(--pul-blue);
  --brain-blue-press: var(--accent-press);
  font-family: var(--font-body);
}

/* Headings ride the brand Arial stack, tight homepage tracking. */
.brain .va__title { font-family: var(--brain-display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; }

/* Cards → 16px radius, hairline border. */
.brain .panel { border-radius: 16px; }

/* Controls → homepage pill buttons */
.brain .btn-primary,
.brain .btn-secondary { border-radius: 999px; font-family: var(--brain-display); }
.brain .btn-primary { background: var(--brain-blue); border: 0; box-shadow: none; }
.brain .btn-primary:hover { background: var(--brain-blue-press); box-shadow: none; }

/* ── Brain 2.0 — graph shell, confirm strip, change feed, node slide-over ──
   All colors ride existing tokens (fg/bg/accent/border) so dark mode comes
   free. The confirm bar mirrors brain__banner's accent treatment with a left
   accent border; rows inside it stay borderless (no nested outlines). */


.brain__feed { display: grid; gap: 14px; }
/* Run cards share the gap-card design: clear white box, blue-border hover. */
.brain__run { border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--bg-surface, #fff); padding: 16px 18px; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.brain__run:hover { border-color: var(--pul-blue); }
.brain__run-head { display: flex; align-items: center; gap: 9px; padding-bottom: 4px; }
.brain__run-i { color: var(--accent); flex-shrink: 0; }
.brain__run-actor { font-size: 13.5px; font-weight: 650; color: var(--fg-1); }
.brain__run-time { font-size: 12px; color: var(--fg-4); }
/* Change rows inside the bordered run card — separated by hairlines, no
   second box outline. */
.brain__change { padding: 9px 0; border-top: 1px solid var(--border-subtle); }
.brain__change-head { display: flex; align-items: center; gap: 9px; }
.brain__change-op { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--bg-muted); color: var(--fg-3); white-space: nowrap; }
.brain__change-op--added { background: var(--accent-soft); color: var(--accent-ink); }
.brain__change-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain__change-t:hover { color: var(--accent); }
.brain__change-rev { font-size: 11px; font-weight: 600; color: var(--fg-4); background: var(--bg-muted); border-radius: 999px; padding: 1px 8px; }
.brain__change-actions { display: flex; gap: 4px; align-items: center; }
.brain__change-s { margin-top: 3px; font-size: 12.5px; color: var(--fg-3); }
.brain__change--reverted .brain__change-t,
.brain__change--reverted .brain__change-s { text-decoration: line-through; color: var(--fg-4); }
.brain__chev { transition: transform var(--dur-fast, .12s) ease; }
.brain__chev.is-open { transform: rotate(90deg); }
.brain__change-diff { margin-top: 8px; display: grid; gap: 6px; }
.brain__diff-old { font-size: 12.5px; line-height: 1.5; color: var(--fg-4); text-decoration: line-through; background: var(--bg-muted); border-radius: 8px; padding: 8px 10px; }
.brain__diff-new { font-size: 12.5px; line-height: 1.5; color: var(--fg-1); background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; }

.brain__node { position: fixed; right: 0; top: 0; height: 100%; width: min(560px, 100vw); background: var(--bg-surface); border-left: 1px solid var(--border-subtle); z-index: 60; padding: 22px 24px; overflow-y: auto; }
.brain__node-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.brain__node-t { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; color: var(--fg-1); }
.brain__node-close { flex-shrink: 0; align-self: flex-start; }
.brain__node-body { font-size: 13.5px; line-height: 1.6; color: var(--fg-2); white-space: pre-wrap; }
.brain__node-prov { margin-top: 12px; }
.brain__node-placeholder { padding: 18px 0; font-size: 13px; color: var(--fg-4); }
.brain__lazyload { justify-self: center; font-size: 13px; }


/* Email-history backfill (PR D5) — the Sources "Email History" card body,
   the All Knowledge takeover banner, and the proof-of-learning strip. Stat
   tiles are borderless (the takeover panel is the one outline — no nested
   boxes). */
.brain__backfill-note { font-size: 12.5px; color: var(--fg-4); }
.brain__backfill-takeover { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 16px); background: var(--bg-surface); padding: 24px; }
.brain__backfill-kicker { font-size: 13px; font-weight: 650; color: var(--fg-3); margin-bottom: 14px; }
.brain__backfill-count { font-size: 44px; font-weight: 700; line-height: 1.05; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.brain__backfill-count-l { font-size: 13px; color: var(--fg-3); margin-top: 4px; }
.brain__backfill-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 18px; }
.brain__backfill-tile-v { font-size: 20px; font-weight: 600; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.brain__backfill-tile-l { font-size: 13px; color: var(--fg-4); margin-top: 2px; }
.brain__quiz { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: var(--bg-muted); color: var(--fg-2); font-size: 13px; }
.brain__quiz svg { color: var(--accent); flex-shrink: 0; }
.brain__quiz strong { font-weight: 700; color: var(--fg-1); }

/* ── Tasks (the clinic task board) ───────────────────────────────────────── */
.tasks__head { align-items: flex-start; }
/* Reserve the fixed notification-bell gutter so the action button clears it. */
.tasks__new { margin-right: 56px; }
.tasks__new svg { width: 14px; height: 14px; }

/* New-task form */
.tasks__form { padding: 16px 18px; margin: 0 0 16px 0; display: flex; flex-direction: column; gap: 12px; }
.tasks__form-row { display: flex; }
.tasks__form-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.tasks__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tasks__field-l {
  font-family: var(--font-caption); font-size: 11px; font-weight: 600; color: var(--fg-4);
}
.tasks__input, .tasks__select, .tasks__textarea {
  width: 100%;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--fg-1);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 13px;
  padding: 9px 12px;
}
.tasks__input--title { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.tasks__textarea { resize: vertical; line-height: 1.45; }
.tasks__select { }
.tasks__input:focus, .tasks__select:focus, .tasks__textarea:focus {
  outline: none; border-color: var(--accent);
}
.tasks__form-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Filter bar — chips on the left, dropdowns pushed right */
.tasks__filters { align-items: center; }
.tasks__filters-sp { flex: 1 1 auto; }
.tasks__select--sm {
  width: auto; padding: 5px 10px; font-size: 12px;
  border-radius: var(--radius-pill); border-color: var(--border-subtle);
}

/* List + rows */
.tasks__list { padding: 6px 10px; }
.tasks__row {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  padding: 14px 10px;
  border-bottom: 1px solid var(--border-subtle);
  border-left: 3px solid transparent;
}
.tasks__row:last-child { border-bottom: none; }
.tasks__row:hover { background: var(--bg-subtle); }
.tasks__row.is-overdue { border-left-color: var(--status-danger); }
.tasks__row--done, .tasks__row--dismissed { opacity: 0.7; }
.tasks__avatar {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--gradient-pulse); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tasks__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tasks__top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tasks__title {
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg-1);
}
.tasks__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  font-family: var(--font-caption); font-size: 12px; color: var(--fg-4);
}
.tasks__due { font-weight: 600; }
.tasks__due--over { color: var(--status-danger); }
.tasks__when { color: var(--fg-4); }
.tasks__link {
  appearance: none; background: none; border: none; padding: 0; 
  font-family: var(--font-caption); font-size: 12px; font-weight: 600; color: var(--accent);
}
.tasks__link:hover { text-decoration: underline; }
.tasks__detail { font-size: 13px; color: var(--fg-2); line-height: 1.45; }
.tasks__note { font-size: 12px; color: var(--fg-3); font-style: italic; }

/* Pills */
.tasks__pill, .tasks__pri, .tasks__src {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-caption); font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
}
.tasks__pill--open        { background: var(--status-warning-soft); color: var(--status-warning); }
.tasks__pill--in_progress { background: var(--accent-soft);         color: var(--accent); }
.tasks__pill--done        { background: var(--status-success-soft); color: var(--status-success); }
.tasks__pill--dismissed   { background: var(--bg-muted);            color: var(--fg-3); }
.tasks__pri--high { background: var(--status-danger-soft); color: var(--status-danger); }
.tasks__pri--low  { background: var(--bg-muted);           color: var(--fg-3); }
.tasks__src--agent  { background: var(--pul-violet-tint); color: var(--pul-violet); }
.tasks__src--manual { background: var(--bg-muted);         color: var(--fg-3); }

/* Inline per-row controls */
.tasks__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.tasks__ctl-f { display: inline-flex; align-items: center; gap: 6px; }
.tasks__ctl-f > span {
  font-family: var(--font-caption); font-size: 11px; font-weight: 600; color: var(--fg-4);
}
.tasks__ctl-sp { flex: 1 1 auto; }
.chip-btn--go { background: var(--status-success-soft); border-color: transparent; color: var(--status-success); }
.chip-btn--go:hover { background: var(--status-success-soft); filter: brightness(0.97); }

@media (max-width: 760px) {
  .tasks__form-grid { grid-template-columns: 1fr; }
  .tasks__ctl-sp { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Phone layout — native app + narrow web
   The 232px sidebar collapses in favour of a fixed bottom-tab bar
   (MobileTabBar in variation-a.tsx); content reflows to a single column and
   clears the bar + the home indicator via the safe-area insets — read as
   var(--safe-area-inset-*, env(safe-area-inset-*)): the Capacitor 8 Android
   shell injects the real values as --safe-area-inset-* inline variables
   (env() is unreliable in the Android WebView); iOS + browsers fall back to
   env(). Everything is gated to phones (or the native shell), so desktop web
   is unchanged.
   ══════════════════════════════════════════════════════════════════════════ */

/* Bottom-tab bar — desktop-hidden by default; the phone query below shows it.
   The child styles are global but only render inside the hidden bar on
   desktop, so they can't affect the desktop layout. */
.mtabbar { display: none; }
.mtab {
  flex: 1 1 0; min-width: 0; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 4px 2px;
  background: transparent; border: 0; 
  font-family: var(--font-body); font-size: 11px; color: var(--fg-4);
}
.mtab[data-on="true"] { color: var(--accent); }
.mtab-ic { position: relative; display: inline-flex; }
.mtab-ic svg { width: 22px; height: 22px; }
.mtab-lb { line-height: 1; white-space: nowrap; }
.mtab-badge {
  position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--status-danger);
  color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
/* Live-call dot on the Conversations phone tab — pulsing green, ringed against
   the bar so it reads on any icon. */
.mtab-live {
  position: absolute; top: -2px; right: -5px;
  width: 9px; height: 9px; border-radius: 999px; background: #1F9E6E;
  box-shadow: 0 0 0 2px var(--bg-surface);
}
.mtab-live::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: #1F9E6E; opacity: 0.4; animation: pul-pulse 1.6s var(--ease-out) infinite;
}

/* "More" bottom sheet (secondary destinations). Portaled to <body>; only ever
   opened from the bottom bar, so it never appears on desktop. */
.msheet-scrim {
  position: fixed; inset: 0; z-index: 960;
  background: rgba(0, 0, 0, 0.42);
  display: flex; align-items: flex-end;
}
.msheet {
  width: 100%; max-height: 82vh; overflow-y: auto;
  background: var(--bg-surface);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  padding: 8px 14px calc(16px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.22);
}
.msheet-grip {
  width: 40px; height: 4px; border-radius: 999px; background: var(--border-subtle);
  margin: 8px auto 10px;
}
.msheet-grp { margin-bottom: 8px; }
.msheet-h {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  color: var(--fg-4); padding: 8px 6px 4px;
}
.msheet-item {
  width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px;
  padding: 0 6px; background: transparent; border: 0; 
  font-family: var(--font-body); font-size: 15px; color: var(--fg-2); text-align: left;
}
.msheet-item.is-on { color: var(--accent); font-weight: 600; }
.msheet-item--danger { color: var(--status-danger); }
.msheet-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Narrow viewports: stack each settings row back to a single column. */
@media (max-width: 860px) {
  .acctv__panel { grid-template-columns: 1fr; row-gap: 18px; }
}

/* Phone drill-in back bar (PhoneBackBar) — hidden until the phone query. */
.pbb { display: none; }

@media (max-width: 768px) { /* PHONE — the canonical portal phone breakpoint (PHONE_BP in src/lib/mobile.ts) */
  /* Collapse the shell to one column; hide the sidebar. The .va.va--full
     inline rule in index.html has equal specificity but later source order,
     so these need !important to win. */
  .va,
  .va.va--full { grid-template-columns: 1fr !important; }
  .va__side { display: none !important; }

  /* Reclaim the notch + clear the fixed bottom bar. */
  .va__main {
    padding-left: 16px; padding-right: 16px;
    padding-bottom: calc(72px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
  }
  .va__top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .va__top-r { margin-right: 0; flex-wrap: wrap; }
  .va__title { font-size: 24px; }

  /* Wide two-column shells → single column. */
  .va__hero { grid-template-columns: 1fr !important; }

  /* The bell used to sit beside the (now hidden) sidebar — move it to the
     content's top-right, clear of the notch. */
  .notif { top: calc(12px + var(--safe-area-inset-top, env(safe-area-inset-top))); right: 14px; }

  /* Show + lay out the bottom tab bar. */
  .mtabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 940;
    justify-content: space-around; align-items: stretch;
    background: var(--bg-surface); border-top: 1px solid var(--border-subtle);
    padding: 6px 4px calc(6px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
  }
  /* The on-screen keyboard shrinks the viewport and floats the fixed bar over
     whatever the user is typing into — hide it while an input has focus
     (the shell stamps body.kb-open on focusin/focusout). */
  body.kb-open .mtabbar { display: none; }

  /* ── Drill-in panes ──────────────────────────────────────────────────────
     A split view carries data-drill="list" | "detail"; the inactive pane is
     hidden (both stay mounted, so live polling keeps running). Desktop never
     reads data-drill. */
  [data-drill="detail"] > .drill-list { display: none !important; }
  [data-drill="list"] > .drill-detail { display: none !important; }

  /* Drill-in back bar — sticky over the detail pane. */
  .pbb {
    display: flex; align-items: center; gap: 4px;
    position: sticky; top: 0; z-index: 20;
    margin: 0 -16px 10px; padding: 6px 8px;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-subtle);
  }
  body.is-native .pbb { padding-top: calc(6px + var(--safe-area-inset-top, env(safe-area-inset-top))); }
  .pbb__back {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    background: transparent; border: 0; color: var(--fg-2);
  }
  .pbb__back svg { width: 22px; height: 22px; }
  .pbb__title {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--font-display); font-size: 16px; font-weight: 600;
    color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pbb__actions { display: flex; align-items: center; gap: 8px; }

  /* ── Modals → bottom sheets ──────────────────────────────────────────────
     Existing dialogs opt in with the sheet-on-phone class on the panel and
     sheet-scrim-on-phone on their scrim; desktop rendering is untouched. */
  .sheet-scrim-on-phone {
    align-items: flex-end !important; justify-content: stretch !important;
    padding: 0 !important;
  }
  .sheet-on-phone {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 88dvh; overflow-y: auto;
    padding-bottom: calc(16px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom))) !important;
  }
  .sheet-on-phone::before {
    content: ''; display: block;
    width: 40px; height: 4px; border-radius: 999px;
    background: var(--border-subtle); margin: 2px auto 12px;
  }

  /* Utility: hide long-form label fragments on phones ("Open Conversation"
     → "Open"). */
  .phone-hide { display: none !important; }

  /* ── Touch ergonomics (scoped under .va — admin.html shares this file) ── */
  .va .btn-primary, .va .btn-secondary { min-height: 44px; }
  .va .chip-btn { min-height: 38px; }
  .va .set-input, .va input[type="text"], .va input[type="email"],
  .va input[type="tel"], .va input[type="search"], .va input[type="password"],
  .va input[type="number"], .va select, .va textarea {
    font-size: 16px; /* <16px makes iOS Safari zoom the page on focus */
  }
  /* Panels and cards lose a little padding on a 375px canvas. */
  .va .panel { padding-left: 16px; padding-right: 16px; }

  /* Notification panel: the anchored dropdown becomes a bottom sheet. */
  .notif__panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: 100%;
    max-height: 80dvh; overflow-y: auto;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(12px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.22);
    z-index: 970;
  }
  .notif__row { min-height: 48px; }

  /* Conversation dialogs (email call / report / bulk actions) ride up from
     the bottom as sheets. Portal-only classes — safe unscoped. */
  .esum-scrim { align-items: flex-end; padding: 0; }
  .esum {
    width: 100%; max-width: 100%; margin: 0;
    border-radius: 18px 18px 0 0;
    max-height: 88dvh; overflow-y: auto;
    padding-bottom: calc(16px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
  }
  .esum::before {
    content: ''; display: block;
    width: 40px; height: 4px; border-radius: 999px;
    background: var(--border-subtle); margin: 2px auto 12px;
  }

  /* Test-call modal fills the phone screen (an opt-in class — .tcm is shared
     with the admin app, which gets its own overlay stylesheet). */
  .tcm-scrim--phone-full { padding: 0; place-items: stretch; }
  .tcm--phone-full {
    height: 100dvh; max-width: 100%; border-radius: 0;
    padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
  }
  body.is-native .tcm--phone-full .tcm-h { padding-top: calc(18px + var(--safe-area-inset-top, env(safe-area-inset-top))); }

  /* ── Per-screen reflow ──────────────────────────────────────────────────
     Pill/tab bars scroll sideways in one row instead of wrapping into a
     block — the native segmented-control feel. */
  .cx-pillbar { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .cx-pillbar .cx-pill { flex: 0 0 auto; white-space: nowrap; }

  /* Every horizontal chip/tab scroller hides its scrollbar on touch — the
     clipped trailing chip is the affordance. */
  .cx-pillbar::-webkit-scrollbar, .phin__viewtabs::-webkit-scrollbar,
  .brain__tabs::-webkit-scrollbar, .mail3__rail::-webkit-scrollbar,
  .kbtab__nav::-webkit-scrollbar, .convo__bar::-webkit-scrollbar { display: none; }
  .phin__viewtabs, .brain__tabs, .mail3__rail, .kbtab__nav { scrollbar-width: none; }

  /* Agent config: the section rail (kbtab) is already a wrap-row under
     880px — on phone it pins under the top edge and scrolls sideways. */
  .kbtab__nav {
    flex-direction: row; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    position: sticky; top: 0; z-index: 15;
  }
  .kbtab__nav-i { flex: 0 0 auto; white-space: nowrap; }

  /* Tools list: the switch/controls drop under the tool text instead of
     squeezing it into an unreadable sliver. */
  .toolz__row { flex-wrap: wrap; }
  .toolz__row-l { flex-basis: 100%; }
  .toolz__row-actions { margin-left: auto; }

  /* Team: avatar + name on the first line, chips/actions flow underneath. */
  .teamv2__row { grid-template-columns: 44px minmax(0, 1fr); row-gap: 8px; }
  .teamv2__row > :nth-child(n+3) { grid-column: 2; justify-self: start; }
  .teamv2__acts { justify-self: start; }

  /* Bookings rows: let the status pill wrap under long names. */
  .bkrow { flex-wrap: wrap; }

  /* Workforce cards stack (base grid collapses only at 560px). */
  .wf__grid, .wf__intel { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .va__main { padding-left: 14px; padding-right: 14px; }
  .mtab-lb { font-size: 10px; }
}

/* Native shell: pad content under the status bar (also on wider native
   viewports) and keep the bell below it. */
body.is-native .va__main { padding-top: calc(16px + var(--safe-area-inset-top, env(safe-area-inset-top))); }
body.is-native .notif { top: calc(12px + var(--safe-area-inset-top, env(safe-area-inset-top))); }

/* ── Call forwarding tab (Reception Agent → Call forwarding) ──────────────
   Bypass rules: caller → destination rows reuse the agentcfg tool-list
   shell; this block covers the add form, status chips and row controls. */
.fwd__form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px; max-width: 640px; margin-bottom: 10px;
}
.fwd__field { display: flex; flex-direction: column; gap: 6px; }
.fwd__field-t { font-family: var(--font-display); font-weight: 500; font-size: 13px; color: var(--fg-1); }
.fwd__optional { font-weight: 400; color: var(--fg-3); }
.fwd__field-s { font-size: 12px; color: var(--fg-3); line-height: 1.5; max-width: 640px; margin-bottom: 18px; }
.fwd__addrow { display: flex; gap: 10px; }
.fwd__addrow .set-input { flex: 1; min-width: 0; }
.fwd__addrow .btn-primary {
  transition: background var(--dur-fast) var(--ease-out);
}
.fwd__addrow .btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}
/* Remove button: background stays white, text + border turn red on hover. */
.fwd__remove {
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-secondary.fwd__remove:hover:not(:disabled) {
  background: var(--bg-surface);
  border-color: var(--status-danger);
  color: var(--status-danger);
}
.fwd__error { font-size: 12px; color: var(--status-danger); margin-bottom: 10px; }
.fwd__muted { font-size: 13px; color: var(--fg-3); }
.fwd__intro { font-size: 13px; color: var(--fg-3); margin: 0 0 20px; max-width: 720px; }
.fwd__desc { font-size: 13px; color: var(--fg-3); margin: 0 0 14px; max-width: 720px; }
.fwd__empty { margin-top: 4px; }
.fwd__list { margin-top: 4px; }
/* Rows aren't clickable toggles like the Tools list — drop the affordances. */
.fwd__row { cursor: default; }
.fwd__row:hover { background: none; }
.fwd__arrow { color: var(--fg-3); }
.fwd__rowctl {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: flex-end;
}
.fwd__rowctl .set-input { width: auto; padding: 6px 10px; font-size: 13px; }
.fwd__rowctl .btn-primary, .fwd__rowctl .btn-secondary { height: 32px; padding: 0 12px; font-size: 13px; }
.fwd__edit-input { max-width: 150px; }
.fwd__chip {
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: var(--radius-pill); white-space: nowrap;
}
.fwd__chip--active { background: var(--status-success-soft); color: var(--status-success); }
.fwd__chip--expired { background: var(--bg-subtle); color: var(--fg-3); }
/* Destination provably diverts back to Pulsium — calls can never ring it. */
.fwd__loopwarn {
  font-size: 12px; color: var(--status-danger);
  line-height: 1.5; max-width: 560px; margin-top: 4px;
}
@media (max-width: 640px) {
  .fwd__form { grid-template-columns: 1fr; }
}

/* Call transfer — the first section of the Transfer/Forwarding tab. Reuses
   the fwd__ form/list shells; no divider (it leads the pane). */
.xfer__section { margin-top: 4px; }
/* Call forwarding — the second section, set off from Call transfer above it
   by a divider. */
.fwd__bypass {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--border-subtle, #E5E7EB);
}

/* Forward facts in the call detail — the bypassed-call line and the
   failed-handoff note above a normal agent call. */
.cdetail__fwd {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--fg-2);
  padding: 10px 0;
}
.cdetail__fwd svg { color: var(--fg-3); flex: none; }
.cdetail__fwd--note { font-size: 12px; color: var(--fg-3); padding: 0 0 6px; }


/* ── Conversations v2 — split view ─────────────────────────────────────────
   The Conversations screen's two-column layout: channel pillbar, search,
   always-on row checkboxes with a bulk bar, the day-grouped list on the left
   and the open conversation's detail pane on the right. Both columns share
   one viewport-derived height so they always bottom-align (the AI summary
   stretches to fill the detail pane — no dead white space under it). */

/* Channel pillbar — one soft track, the active channel pops as a white pill. */
/* Day navigator — lives in the Conversations header (which stays fixed while
   the day's list scrolls in its own box), steps by day (‹ ›) and week (« »)
   and opens a native date picker. Mirrors the .cx-pillbar track recipe so the
   header controls read the same. */
.cx-datenav {
  display: inline-flex; align-items: center; gap: 2px;
  /* White pill container, same recipe as .cx-pillbar — the "Today" pick
     carries its own solid-blue fill as the selected segment. */
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.cx-datenav-b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; background: transparent;
  border-radius: var(--radius-pill);
  color: var(--fg-2); 
  transition: color var(--dur-fast) var(--ease-out);
}
.cx-datenav-b:hover:not(:disabled) { color: var(--pul-blue); }
.cx-datenav-b:disabled { color: var(--fg-4); opacity: 0.5; }
.cx-datenav-b svg { width: 16px; height: 16px; }
/* The friendly date label doubles as the picker trigger: the native date input
   sits invisibly on top, so a click/tap opens the calendar ("search by date").
   It's the selected segment of the track, so it takes the same solid-blue
   fill as an active .cx-pill. */
.cx-datenav-pick {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 118px; justify-content: center;
  padding: 0 12px; height: 30px;
  border-radius: var(--radius-pill);
  background: var(--pul-blue);
  color: var(--fg-on-brand); 
}
.cx-datenav-pick svg { width: 14px; height: 14px; color: var(--fg-on-brand); flex: none; }
.cx-datenav-label { font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.cx-datenav-pick input[type="date"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; 
  border: 0; padding: 0; margin: 0;
}
.cx-datenav-today {
  margin-left: 2px;
  border: 0; background: transparent;
  border-radius: var(--radius-pill);
  padding: 0 12px; height: 30px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  color: var(--pul-blue); 
  transition: color var(--dur-fast) var(--ease-out);
}
.cx-datenav-today:hover { color: var(--pul-blue); }

.cx-pillbar {
  display: inline-flex; align-items: center;
  /* White pill container per the segmented-switch pattern — the selected
     option carries its own solid-blue fill, so the track itself stays white. */
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px; gap: 2px;
}
.cx-pill {
  border: 0; background: transparent;
  border-radius: var(--radius-pill);
  padding: 7px 18px;
  font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--fg-2); 
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cx-pill:hover:not(.is-on):not(.is-locked) { color: var(--pul-blue); }
.cx-pill.is-on {
  background: var(--pul-blue);
  color: var(--fg-on-brand);
}
.cx-pill.is-locked { color: var(--fg-4); }

/* Archived / Bin back bar — the off-list views are distinct places, so they
   open with an explicit way back plus a title instead of relying on the
   toggle that opened them. */
.cx-backbar {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
}
/* Icon-only round back chip — mirrors the onboarding wizard's quiet back
   arrow (light surface, hairline border, dark glyph) that glides left on
   hover, so the way out of Archived/Bin reads the same across surfaces. */
.cx-back {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--fg-1);
  border-radius: var(--radius-pill); 
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cx-back:hover { border-color: var(--pul-blue); color: var(--pul-blue); }
.cx-back:hover svg { transform: translateX(-3px); }
.cx-back svg { width: 18px; height: 18px; color: currentColor; transition: transform var(--dur-slow) var(--ease-out); }

/* Search — full-width rounded field; the results dropdown (server transcript
   search) floats below it, anchored to this wrapper. */
.cx-search {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 10px;
}
.cx-search:hover,
.cx-search:focus-within {
  border-color: var(--pul-blue);
}
.cx-search-icon { display: inline-flex; color: var(--fg-4); pointer-events: none; }
.cx-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.3; color: var(--fg-1);
}
.cx-search input::placeholder { color: var(--fg-4); }

/* Bulk action bar — appears the moment any row is checked. */
.cx-bulk {
  display: flex; align-items: center; flex-wrap: wrap;
  row-gap: 6px; gap: 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 8px 12px;
  margin: 0 0 10px;
}
.cx-bulk-n {
  font-size: 12.5px; font-weight: 600; line-height: 1;
  color: var(--fg-1);
  margin-right: 6px; white-space: nowrap;
}
/* Cancel — exits select mode entirely (clears the selection too). Reuses the
   .cx-act secondary-button look, pushed to the bar's right edge. */
.cx-bulk-cancel { margin-left: auto; }

/* Shared action button — bulk bar + the open conversation's action row. */
.cx-act {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--fg-2);
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12.5px; font-weight: 500; line-height: 1;
 white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cx-act:hover { border-color: var(--pul-blue); color: var(--pul-blue); }
.cx-act:active:not(:disabled) { background: var(--pul-blue); border-color: var(--pul-blue); color: var(--fg-on-brand); }
.cx-act:disabled { opacity: 0.55; }
.cx-act svg { flex: none; }
/* Destructive actions (Archive / Bin) — white at rest like every .cx-act,
   red text + border on hover, solid red while pressed. */
.cx-act--danger:hover { border-color: var(--status-danger); color: var(--status-danger); }
.cx-act--danger:active:not(:disabled) { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
[data-theme="dark"] .cx-act--danger:hover { border-color: #F28B82; color: #F28B82; }
[data-theme="dark"] .cx-act--danger:active:not(:disabled) { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }

/* The two columns. Left: the list. Right: the detail pane. One shared height
   (viewport minus the header/pillbar/search/filter stack) so they always
   bottom-align. */
.cx-cols {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 14px; align-items: stretch; min-height: 0;
}
.cx-cols > * { min-width: 0; }
@media (max-width: 1080px) {
  .cx-cols { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); }
}
@media (max-width: 768px) { /* PHONE */
  /* The filter bar flattens into ONE horizontally-scrolling chip row —
     axis labels drop, Status/Type chips and the Assigned/Archived tools all
     ride the same line, edge to edge. Wrapping pill groups ate half the
     screen before the list started. */
  .convo__bar {
    flex-wrap: nowrap; column-gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-left: -16px; margin-right: -16px;
    padding: 2px 16px 6px;
    scrollbar-width: none;
  }
  .convo__bar::-webkit-scrollbar { display: none; }
  .convo__axis, .convo__axis-chips, .convo__bar-tools { display: contents; }
  .convo__axis-l { display: none; }
  .convo__bar .chip-btn, .convo__select-btn { flex: 0 0 auto; white-space: nowrap; }

  /* Drill-in: one full-screen pane at a time (data-drill hides the other —
     see the phone section). Both panes scroll with the page, so the list can
     run long and the back bar in the detail stays sticky. */
  .cx-cols { grid-template-columns: minmax(0, 1fr); }
  .cx-list, .cx-detail { height: auto; max-height: none; min-height: 0; }
  .cx-detail { padding: 0 16px 16px; }
  .cx-detail .pbb { margin: 0 -16px 12px; }
  .cx-rowwrap .cx-row { min-height: 56px; }
  /* Drilled in, the list chrome above the panes disappears — the open
     conversation (or email thread) is its own full-screen page with just the
     back bar on top. */
  .convo-screen.is-drilled .va__top,
  .convo-screen.is-drilled .cx-pillbar,
  .convo-screen.is-drilled .cx-search,
  .convo-screen.is-drilled .convo__bar { display: none; }
  .convo-screen.is-drilled .cx-detail,
  .convo-screen.is-drilled .mail3__reader { border: 0; border-radius: 0; }
}

/* Conversation list column. */
.cx-list {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden auto;
  height: calc(100vh - 300px);
  min-height: 320px;
}
.cx-listhead {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  position: sticky; top: 0; z-index: 3;
  font-size: 12px; font-weight: 500; line-height: 1;
  color: var(--fg-3);
}
.cx-check {
  width: 15px; height: 15px;
  accent-color: var(--pul-blue);
 flex: none;
}
/* Select/Cancel toggle — selection is opt-in, so checkboxes only appear
   once this is clicked. Reuses the standard chip-btn secondary treatment,
   sized down to sit quietly in the list header. */
.cx-select-btn {
  margin-left: auto;
  padding: 4px 12px;
  font-size: 12px;
}
.cx-rowwrap {
  display: flex; align-items: stretch;
  border-left: 2px solid transparent;
}
.cx-rowwrap:hover { background: var(--bg-muted); }
.cx-rowwrap.is-open {
  background: color-mix(in srgb, var(--pul-blue) 6%, transparent);
  border-left-color: var(--pul-blue);
}
.cx-rowsel { display: flex; align-items: center; padding-left: 14px; }
.cx-row {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0; padding: 9px 14px 9px 10px;
  border: 0; background: transparent;
 text-align: left;
}
.cx-av {
  flex: none; width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--bg-subtle); color: var(--fg-2);
  font-size: 11px; font-weight: 600; line-height: 1;
}
.cx-rowwrap.is-open .cx-av { background: var(--pul-blue); color: #fff; }
.cx-rowmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-name {
  font-size: 13px; font-weight: 600; line-height: 1.25;
  color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-sub {
  font-size: 12px; line-height: 1.3; color: var(--fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Quiet meta line under the reason: channel · dd/mm · time. */
.cx-meta {
  font-size: 11px; line-height: 1.3; color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-rowside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cx-time {
  font-size: 11px; font-weight: 500; line-height: 1;
  color: var(--fg-4); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Amber "still needs a human" pill — the row-level Action required cue.
   A labeled pill, not a bare dot, so the row says what the amber means. */
.cx-action {
  display: inline-flex; align-items: center; gap: 5px;
  flex: none;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--status-warning-soft);
  font-family: var(--font-caption);
  font-size: 11px; font-weight: 600; line-height: 1.4;
  color: var(--status-warning);
  white-space: nowrap;
}
.cx-action__dot {
  width: 5px; height: 5px; flex: none;
  border-radius: var(--radius-pill);
  background: #E8A23D;
}
.cx-empty {
  padding: 48px 16px; text-align: center;
  color: var(--fg-3); font-size: 13px; line-height: 1.5;
}

/* Detail pane column. The .cdetail body inside stretches, and the AI summary
   takes the leftover height — that's what keeps both columns bottom-aligned. */
.cx-detail {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px 18px;
  height: calc(100vh - 300px);
  min-height: 320px;
  overflow: auto;
  display: flex; flex-direction: column;
}
.cx-detail .cdetail { flex: 1 0 auto; padding: 0; max-width: none; }
/* Content stacks top-down (AI summary → recording → actions per the card
   spec); the summary takes its natural height rather than stretching to fill,
   so the recording and actions sit directly beneath it. */
.cx-detail .aisum { flex: 0 0 auto; }
.cx-detail .player, .cx-detail .player--empty { flex: none; background: var(--bg-surface); }

/* Detail header: avatar · name · facts line. */
.cx-dhead {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.cx-dhead-av {
  flex: none; width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--bg-subtle); color: var(--fg-2);
  font-size: 14px; font-weight: 600; line-height: 1;
}
.cx-dhead-main { flex: 1; min-width: 0; }
.cx-dhead-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 650; line-height: 1.2;
  color: var(--fg-1);
  overflow-wrap: anywhere;
}
.cx-dhead-meta {
  display: flex; flex-wrap: wrap; gap: 6px; row-gap: 2px; align-items: center;
  font-size: 12px; line-height: 1.3; color: var(--fg-3);
  margin-top: 3px;
}
.cx-dhead-meta span + span::before { content: '·'; margin: 0 6px; color: var(--fg-4); }

/* Live view header row inside the detail pane. */
.cx-livehead { display: flex; align-items: center; gap: 9px; }

/* Action-required strip — why this call still needs a human. */
.cx-reason {
  display: flex; align-items: flex-start; gap: 11px;
  background: linear-gradient(180deg, #FFF8EC, #FFF4E0);
  border: 1px solid #F3DCB1;
  border-radius: 12px;
  padding: 11px 13px;
}
.cx-reason-ic {
  flex: none; width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  background: #F6E3BE; color: #8A5A00;
  display: grid; place-items: center;
}
.cx-reason-t {
  font-size: 11px; font-weight: 650; line-height: 1;
  letter-spacing: 0.02em;
  color: #8A5A00; margin-bottom: 3px;
}
.cx-reason-s { font-size: 13px; line-height: 1.45; color: #5C4A1E; text-wrap: pretty; }
[data-theme="dark"] .cx-reason { background: rgba(232, 162, 61, 0.10); border-color: rgba(232, 162, 61, 0.35); }
[data-theme="dark"] .cx-reason-ic { background: rgba(232, 162, 61, 0.22); color: #F0C078; }
[data-theme="dark"] .cx-reason-t { color: #F0C078; }
[data-theme="dark"] .cx-reason-s { color: #E4CDA4; }

/* Compact recording player. */
.cx-player {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 14px;
}
.cx-play {
  flex: none; width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--fg-1); color: var(--bg-surface);
  display: grid; place-items: center;
}
.cx-play:disabled { opacity: 0.6; cursor: default; }
.cx-track {
  flex: 1; min-width: 120px; height: 5px;
  border-radius: var(--radius-pill);
  background: var(--border-subtle);
  position: relative; 
}
.cx-track-fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: var(--radius-pill);
  background: var(--fg-1);
}
.cx-ptime {
  font-size: 11.5px; font-weight: 500; line-height: 1;
  color: var(--fg-3); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cx-ptime--err { color: var(--status-danger, var(--status-danger)); }
.cx-rate {
  flex: none; min-width: 44px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface); color: var(--fg-2);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cx-rate:hover { border-color: var(--pul-blue); color: var(--pul-blue); }

/* Detail action row. */
.cx-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Live transcript box + transcript rows (shared with the live view). */
.cx-sum {
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 13px 15px;
}
.cx-sum--fill { flex: 1 0 auto; }
.cx-sum-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 650; line-height: 1;
  letter-spacing: 0.02em;
  color: var(--fg-3); margin-bottom: 8px;
}
.cx-sum-b { font-size: 13px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.cx-sum--live { background: #F4FBF7; border-color: #CBE8D6; }
.cx-sum--live .cx-sum-h { color: #1F7E55; }
[data-theme="dark"] .cx-sum--live { background: rgba(31, 158, 110, 0.10); border-color: rgba(31, 158, 110, 0.35); }
[data-theme="dark"] .cx-sum--live .cx-sum-h { color: #5BD69B; }
.cx-trrow { display: flex; gap: 12px; padding: 7px 0; }
.cx-trwho {
  flex: none; width: 74px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  color: var(--fg-3); text-align: right;
}
.cx-trrow.is-caller .cx-trwho { color: var(--pul-blue); }
.cx-trtext { flex: 1; font-size: 13px; line-height: 1.5; color: var(--fg-2); }

/* Empty detail pane — nothing selected yet. */
.cx-noopen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 40px 28px; text-align: center;
  flex: 1; min-height: 220px;
}
.cx-noopen img { width: 58px; height: 58px; margin-bottom: 8px; }
.cx-noopen-t { font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--fg-1); }
.cx-noopen-s {
  font-size: 12.5px; line-height: 1.55; color: var(--fg-3);
  max-width: 280px; text-wrap: pretty;
}

/* Confirmation toast. */
.cx-flash {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--fg-1); color: var(--bg-surface);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px; font-weight: 500; line-height: 1;
  z-index: 70;
  box-shadow: 0 10px 30px rgba(18, 16, 24, 0.3);
}

/* ── Clara (QA agent) screen ───────────────────────────────────────────────
   Reached from Clara's card on the Agents screen. Stacked panels: scorecards,
   review queue, weekly report + coaching, quality trend. House rules: honest
   em-dash zeros, brand blue #1A73E8 only, bare glyphs, no nested borders
   (cards inside panels use fills, never a second outline). */

.clara { display: flex; flex-direction: column; gap: 18px; }
.clara__head { display: flex; align-items: center; gap: 16px; }
.clara__portrait { flex: 0 0 52px; width: 52px; height: 52px; }
.clara__portrait img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; }
.clara__sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--fg-3); max-width: 62ch; }

.clara__panel { gap: 0; }
.clara__panel + .clara__panel { margin-top: 2px; }
.clara__panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.clara__eyebrow { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fg-1); letter-spacing: -0.01em; }
.clara__panel-sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-4); max-width: 68ch; }
.clara__label { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg-1); margin-bottom: 6px; }
.clara__empty { padding: 22px 4px 14px; font-size: 13.5px; color: var(--fg-4); }

/* Scorecards — quiet fills inside the panel (no second outline). */
.clara__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.clara__card { background: var(--bg-muted, rgba(8,23,79,.03)); border-radius: var(--radius-lg, 16px); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.clara__card-head { display: flex; align-items: center; gap: 10px; }
.clara__av { flex: 0 0 38px; width: 38px; height: 38px; }
.clara__av img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; }
.clara__av--glyph { display: inline-flex; align-items: center; justify-content: center; color: var(--fg-4); }
.clara__card-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.clara__card-nm { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--fg-1); }
.clara__card-rl { font-size: 12px; font-weight: 600; color: var(--fg-4); }
.clara__score { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.clara__score-n { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--fg-1); line-height: 1.05; }
.clara__score[data-good] .clara__score-n { color: var(--status-success, #1F9E6E); }
.clara__score-l { font-size: 10.5px; font-weight: 600; color: var(--fg-4); }
.clara__card-stats { display: flex; gap: 12px; font-size: 12.5px; color: var(--fg-3); }
.clara__card-open { color: var(--status-danger); font-weight: 600; }
.clara__card-worst { font-size: 12px; color: var(--fg-4); }
.clara__card-worst--clean { color: var(--status-success, #1F9E6E); }

/* Queue tabs — quiet pills, active takes the brand blue. */
.clara__tabs { display: inline-flex; gap: 4px; background: var(--bg-surface, #fff); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill, 999px); padding: 3px; }
.clara__tab { border: 0; background: transparent; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--fg-3); padding: 6px 14px; border-radius: var(--radius-pill, 999px); transition: background .2s ease, color .2s ease; }
.clara__tab:hover { color: var(--accent); }
.clara__tab.is-on, .clara__tab.is-on:hover { background: var(--accent); color: #fff; }

/* Queue rows. */
.clara__queue { display: flex; flex-direction: column; }
.clara__qrow { display: flex; align-items: flex-start; gap: 14px; padding: 14px 2px; border-top: 1px solid var(--border-subtle); }
.clara__qrow:first-child { border-top: 0; }
.clara__qmain { flex: 1; min-width: 0; }
.clara__qtop { display: flex; align-items: baseline; gap: 10px; }
.clara__qhead { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.clara__qmain:hover .clara__qhead { color: var(--accent); }
.clara__qwhen { margin-left: auto; flex: none; font-size: 11.5px; color: var(--fg-4); }
.clara__qmeta { display: flex; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--fg-4); }
.clara__qcheck { margin-top: 7px; font-size: 12.5px; line-height: 1.5; }
.clara__qcheck-l { font-weight: 600; color: var(--status-danger); margin-right: 8px; }
.clara__qcheck-e { color: var(--fg-3); font-style: italic; }
.clara__qdone { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--fg-4); }
.clara__sev { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill, 999px); }
.clara__sev--high { color: var(--status-danger); background: rgba(217, 48, 37,.08); }
.clara__sev--medium { color: #92400E; background: rgba(217,119,6,.10); }
.clara__sev--low, .clara__sev--none { color: var(--fg-4); background: var(--bg-muted, rgba(8,23,79,.05)); }
[data-theme="dark"] .clara__sev--high { background: rgba(217, 48, 37,.22); }
[data-theme="dark"] .clara__sev--medium { background: rgba(217,119,6,.20); }
.clara__qactions { display: flex; flex-direction: column; gap: 8px; flex: none; }

/* Buttons — the two sanctioned styles: solid blue, and outline-that-blues. */
.clara__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; line-height: 1; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-surface, #fff); color: var(--fg-2); transition: border-color .2s ease, color .2s ease, background .2s ease; }
.clara__btn:hover { border-color: var(--accent); color: var(--accent); }
.clara__btn:active:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.clara__btn:disabled { opacity: .55; cursor: default; }
.clara__btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.clara__btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.clara__btn--primary:active:not(:disabled) { background: var(--accent-press); border-color: var(--accent-press); }

/* Weekly report. */
.clara__select { flex: none; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--fg-2); background: var(--bg-surface, #fff); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 7px 10px; transition: border-color .2s ease; }
.clara__select:hover, .clara__select:focus { border-color: var(--accent); outline: none; box-shadow: none; }
.clara__wr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; }
.clara__wr-stat { background: var(--bg-muted, rgba(8,23,79,.03)); border-radius: var(--radius-lg, 16px); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.clara__wr-n { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--fg-1); }
.clara__wr-l { font-size: 11.5px; font-weight: 600; color: var(--fg-4); }
.clara__wr-issues { margin: 6px 0 14px; }
.clara__issue { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 13px; border-top: 1px solid var(--border-subtle); }
.clara__issue:first-of-type { border-top: 0; }
.clara__issue-n { flex: none; font-weight: 700; color: var(--status-danger); }
.clara__issue-l { font-weight: 600; color: var(--fg-2); }
.clara__issue-e { color: var(--fg-4); font-style: italic; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clara__wr-coaching { margin-top: 4px; }
.clara__coach { background: var(--bg-muted, rgba(8,23,79,.03)); border-radius: var(--radius-lg, 16px); padding: 14px 16px; margin-top: 10px; }
.clara__coach-t { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.clara__coach-r { margin-top: 4px; font-size: 12.5px; color: var(--fg-3); line-height: 1.5; }
.clara__coach-s { margin-top: 10px; padding: 10px 12px; background: var(--bg-surface, #fff); border-radius: 10px; font-size: 12.5px; line-height: 1.55; color: var(--fg-2); white-space: pre-wrap; }
[data-theme="dark"] .clara__coach-s { background: rgba(255,255,255,.05); }

/* Trend. */
.clara__trend-wrap { padding: 4px 2px 2px; }
.clara__trend { width: 100%; height: auto; display: block; }
.clara__trend path { stroke: var(--accent); }
.clara__trend circle { fill: var(--accent); }
.clara__trend-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--fg-4); }

@media (max-width: 760px) {
  .clara__panel-head { flex-direction: column; }
  .clara__qrow { flex-direction: column; }
  .clara__qactions { flex-direction: row; }
}