/* Velocity TalkDesk — application styles.
   No build step, no framework: one stylesheet, served static.

   Cool slate canvas, white cards on hairline borders, terracotta for action.
   The shell is a light sidebar with grouped sections, a pill search in the
   topbar, and a scrollable content column that collapses to a drawer on
   phones.

   WHY SLATE AND NOT THE OLD CREAM. Agents sit in this for whole shifts. A
   warm tint reads as a surface of its own and competes with the cards on it;
   a near-neutral canvas lets white cards be the thing that advances, and
   leaves the one warm colour in the palette meaning exactly one thing --
   something happened, or something needs you.

   TWO TERRACOTTAS, ON PURPOSE. --brand is the bright one and is never put
   behind white text: at 3.80:1 it fails AA for body copy. It marks things --
   dots, active bars, focus rings, the left edge of a selected row. Anything
   with white text on it uses --brand-dark, which clears AA at 5.57:1. */

:root {
  --bg: #f8fafc;            /* slate-50: the canvas, near-neutral */
  --surface: #ffffff;       /* cards sit above it */
  --surface-2: #f1f5f9;     /* slate-100: inset wells, hovers */
  --border: #e2e8f0;        /* slate-200: hairline, never a heavy rule */
  --border-soft: #f1f5f9;
  --text: #0f172a;          /* slate-900 */
  --muted: #616f81;         /* 4.96:1 on the canvas, 4.73:1 on --surface-2;
                               slate-500 proper was 4.34:1 on the darker of
                               the two, which is where the table headers sit */

  --brand: #e05626;         /* marks things; NOT for white text (3.80:1) */
  --brand-dark: #b93f14;    /* carries white text: 5.57:1 */
  --brand-soft: #fff7ed;    /* selected row, active nav tint */
  --accent: #f97316;
  --accent-soft: #fff7ed;

  /* Semantic accents, each with a tint to sit on and a darker text weight.
     Colour alone never carries the meaning -- every badge has a word in it. */
  --ok: #10b981;            /* emerald: available, live, resolved */
  --ok-text: #047857;
  --ok-soft: #ecfdf5;
  --warn: #f59e0b;          /* amber: waiting, over threshold */
  --warn-text: #b45309;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;
  --info: #0284c7;          /* sky: channels, transfers, system notes */
  --info-bg: #f0f9ff;
  --info-border: #bae6fd;
  --danger: #ef4444;        /* rose: breached, failed, destructive */
  --danger-text: #b91c1c;
  --err-bg: #fef2f2;
  --err-border: #fecaca;

  --sidebar-bg: #ffffff;
  --sidebar-text: #64748b;
  --topbar-bg: #ffffff;
  --scroll-thumb: #cbd5e1;
  --scroll-thumb-hover: #94a3b8;

  /* 8px for things you click, larger for the cards that hold them. */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* Three levels, all whisper-quiet: depth comes from the hairline border,
     the shadow only keeps a white card from dissolving into a white page. */
  --shadow-1: 0 1px 3px 0 rgba(15, 23, 42, .04), 0 1px 2px -1px rgba(15, 23, 42, .02);
  --shadow-2: 0 4px 6px -1px rgba(15, 23, 42, .06), 0 2px 4px -2px rgba(15, 23, 42, .04);
  --shadow-3: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .03);
  --shadow: var(--shadow-1);
  --shadow-lg: var(--shadow-3);
  --ring: 0 0 0 3px rgba(224, 86, 38, .20);

  --sidebar-w: 240px;
  --sidebar-w-sm: 76px;
  --topbar-h: 64px;

  /* Plus Jakarta Sans carries headings and metrics, Inter everything that is
     read rather than glanced at. Self-hosted -- see fonts.css. */
  --font: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Plus Jakarta Sans", Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Light is the default, whatever the operating system prefers. Dark is opt-in
   and only ever arrives as data-theme="dark" -- a company that has not chosen
   dark should never be handed it because someone's laptop is in night mode. */
:root[data-theme="dark"] {
  --bg: #0f172a; --surface: #1e293b; --surface-2: #334155; --border: #334155;
  --border-soft: #293548; --text: #f1f5f9; --muted: #a8b4c4;
  /* The bright terracotta is legible on dark and the dark one is not, so the
     pair swaps round here rather than being carried over. */
  --brand: #fb7c4a; --brand-dark: #f97316; --brand-soft: #3b2113;
  --accent: #fb923c; --accent-soft: #3b2113;
  --ok-text: #6ee7b7; --ok-soft: #123024;
  --warn-text: #fcd34d; --warn-bg: #3a2c0c; --warn-border: #6b5010;
  --danger-text: #fca5a5; --err-bg: #3a1a1a; --err-border: #7a2e2e;
  --info-bg: #0c2f45; --info-border: #16557d;
  --sidebar-bg: #1e293b; --sidebar-text: #94a3b8;
  --topbar-bg: #1e293b; --scroll-thumb: #475569; --scroll-thumb-hover: #64748b;
  --shadow-1: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px -1px rgba(0,0,0,.3);
  --shadow-2: 0 4px 6px -1px rgba(0,0,0,.45), 0 2px 4px -2px rgba(0,0,0,.3);
  --shadow-3: 0 10px 15px -3px rgba(0,0,0,.55), 0 4px 6px -4px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(251, 124, 74, .28);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* The `hidden` attribute only sets `display: none` at the UA level, so ANY
   display rule on the element beats it. Several components here are flex or
   grid and are toggled with `hidden`, which silently did nothing. This is the
   one place to fix it rather than remembering per component. */
[hidden] { display: none !important; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Headings and metrics in Plus Jakarta Sans; everything read at length stays
   in Inter, whose job here is not to be noticed. */
h1, h2, h3, h4, .page-head h1, .panel-head h2, .sub, .card-value, .brand-text {
  font-family: var(--font-head);
  letter-spacing: -.02em;
}
/* Figures that change while you watch them -- queue depth, wait times -- must
   not jitter sideways as the digits change. */
.card-value, .table td.num, .mono, time { font-variant-numeric: tabular-nums; }
body.public { display: flex; flex-direction: column; }

a { color: var(--brand-dark); }
/* .92em lands at 11.96px inside a 13px parent, which is the one thing the
   12px floor is meant to stop. */
code { font-family: var(--mono); font-size: max(12px, .92em); }
hr.rule { border: 0; border-top: 1px solid var(--border-soft); margin: 26px 0; }

.ic {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------- icon tints */
/* Each icon carries its own hue, softly tinted behind the glyph, so a column
   of nav rows reads at a glance instead of being identical grey strokes. The
   hue is named once, by icon, and every badge picks it up from there. */
[data-icon="grid"]     { --tint: #e05626; }
[data-icon="headset"]  { --tint: #8b5cf6; }
[data-icon="users"]    { --tint: #3b82f6; }
[data-icon="user"]     { --tint: #3b82f6; }
[data-icon="globe"]    { --tint: #0ea5e9; }
[data-icon="settings"] { --tint: #f59e0b; }
[data-icon="list"]     { --tint: #ec4899; }
[data-icon="chat"]     { --tint: #e05626; }
[data-icon="chart"]    { --tint: #10b981; }
[data-icon="key"]      { --tint: #0d9488; }
[data-icon="moon"]     { --tint: #6366f1; }
[data-icon="logout"]   { --tint: #ef4444; }
[data-icon="download"] { --tint: #e05626; }
[data-icon="dot"]      { --tint: #64748b; }

.nav-icon, .card-icon {
  flex: none; display: grid; place-items: center;
  border-radius: 10px;
  color: var(--tint, var(--brand));
  /* Plain first, so a browser without color-mix still gets a legible badge. */
  background: rgba(127, 127, 127, .1);
  background: color-mix(in srgb, var(--tint, var(--brand)) 14%, transparent);
}
.nav-icon { width: 30px; height: 30px; }
.nav-icon .ic { width: 17px; height: 17px; }

/* ----------------------------------------------------------- scrollbars */
/* Thin and quiet. A scrollable panel -- the sidebar, a message thread -- was
   growing the platform's heavy grey slab down its edge, which is the loudest
   thing on the screen in a layout this soft. Firefox takes the standard
   properties; WebKit and Chromium need the pseudo-elements. The thumb is
   inset with a transparent border so it reads as a slim pill, not a bar. */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================ app shell */
body.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; }

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 14px 16px;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  z-index: 60; overflow-y: auto; scrollbar-gutter: stable;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; padding: 0 8px 14px; }

/* ------------------------------------------------------ workspace block */
/* Which tenant this is. Quiet, but never absent. */
.workspace {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 14px;
  min-width: 0;
}
.workspace-name {
  font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workspace-code {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --------------------------------------------------- sidebar foot (you) */
/* margin-top:auto is what pins this to the bottom however short the nav is. */
/* The reference puts the three buttons beside the name. At 240px, with a real
   name rather than a short one, that left the name 48px of the 88 it needed
   and truncated everybody to "Nuw...". They go underneath instead: a name is
   the part you actually have to read. */
.sidebar-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 2px;
}
.who-mini {
  display: flex; align-items: center; gap: 9px; min-width: 0; width: 100%;
  text-decoration: none; padding: 6px; border-radius: var(--radius-sm);
}
.who-mini:hover { background: var(--surface-2); }
.who-mini-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-dark);
  font-weight: 700; font-size: 13px;
}
.who-mini-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.who-mini-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who-mini-sub {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who-mini-actions { display: flex; align-items: center; gap: 2px; padding: 0 6px 2px; }
/* Small enough to sit three-across under a 240px sidebar. */
.who-mini-actions .icon-btn {
  width: 30px; height: 30px; border-radius: var(--radius-xs);
  background: none; border: 0;
}
.who-mini-actions .icon-btn .ic { width: 16px; height: 16px; }
.who-mini-actions .icon-btn:hover { background: var(--surface-2); color: var(--text); }
.who-mini-actions .icon-btn.danger:hover {
  background: var(--err-bg); color: var(--danger-text);
}
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: var(--brand-dark); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}
.brand-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.brand-mark.big {
  width: 54px; height: 54px; border-radius: 17px; margin: 0 auto 14px; font-size: 19px;
}
.brand-mark.big svg { width: 30px; height: 30px; }
.brand-text { font-weight: 700; color: var(--text); letter-spacing: -.02em; font-size: 18px; }

.sidenav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-group { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.nav-group-label {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 6px 10px 4px;
}
/* The sign-out form must not become a row of its own -- only the button in it. */
.nav-form { display: contents; }

.sidenav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--sidebar-text); text-decoration: none;
  font-size: 14px; font-weight: 500; border: 0; background: none;
  cursor: pointer; width: 100%; text-align: left; font-family: inherit;
  position: relative;
}
.sidenav-item:hover { background: var(--surface-2); color: var(--text); }
/* Solid, not a tint. Where you are should be findable in one glance from
   across a desk, and the tint version needed two. --brand-dark carries the
   white text at 5.57:1; the bright terracotta would not. */
.sidenav-item.on {
  background: var(--brand-dark); color: #fff; font-weight: 600;
  box-shadow: var(--shadow-1);
}
.sidenav-item.on:hover { background: var(--brand-dark); color: #fff; }
.sidenav-item.on .ic { stroke-width: 2.2; }
/* The row's accent must not repaint the badge -- the hue is what identifies it. */
.sidenav-item.on .nav-icon { background: rgba(255, 255, 255, .2); }
.sidenav-item.on .nav-badge { background: rgba(255, 255, 255, .22); color: #fff; }

.install-card {
  background: var(--brand-soft); border-radius: var(--radius);
  padding: 16px 14px; text-align: center; margin-top: 8px;
}
.install-mark {
  width: 34px; height: 34px; border-radius: 11px; margin: 0 auto 8px;
  background: var(--brand-dark); color: #fff; display: grid; place-items: center;
}
.install-card strong { display: block; font-size: 13.5px; }
.install-card p { margin: 3px 0 11px; font-size: 12px; color: var(--muted); line-height: 1.4; }

.shell-main {
  min-width: 0; display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
}

.topbar {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 26px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 40;
}
.search {
  display: flex; align-items: center; gap: 9px; flex: 1; max-width: 420px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 12px; height: 38px; color: var(--muted);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.search:focus-within {
  background: var(--surface); border-color: var(--brand); box-shadow: var(--ring);
}
.search input {
  flex: 1; border: 0; background: none; font: inherit; font-size: 14px;
  color: var(--text); outline: none; min-width: 0;
}
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search kbd {
  font: inherit; font-size: 12px; color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; flex: none;
}

.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  text-decoration: none;
}
.icon-btn:hover { color: var(--brand-dark); border-color: var(--brand); }
.who-block {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 99px; padding: 5px 16px 5px 5px;
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--brand-dark); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.who { display: flex; flex-direction: column; line-height: 1.25; }
.who-name { font-weight: 600; font-size: 13.5px; }
.who-company { font-size: 12px; color: var(--muted); }

/* ----------------------------------------------------- the identity menu */
.user-menu { position: relative; }
/* The identity pill is a button now, so it has to shed the button defaults
   rather than inherit a browser's idea of one. */
.who-block { border: 1px solid var(--border); font: inherit; color: inherit; cursor: pointer; }
.who-block:hover { border-color: var(--brand); }
.who-block.on { border-color: var(--brand); background: var(--surface); }
.who-caret { width: 15px; height: 15px; color: var(--muted); transition: transform .15s ease; }
.who-block.on .who-caret { transform: rotate(180deg); }

.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  min-width: 232px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.menu-head {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
  overflow-wrap: anywhere;
}
/* The sign-out form must not become a row of its own -- only its button. */
.menu-form { display: contents; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: var(--radius-xs);
  background: none; font: inherit; font-size: 14px; color: var(--text);
  text-align: left; text-decoration: none; cursor: pointer;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.menu-item .ic { width: 17px; height: 17px; color: var(--muted); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .ic { color: var(--danger); }

@media (prefers-reduced-motion: reduce) { .who-caret { transition: none; } }

.content { flex: 1; padding: 6px 26px 50px; max-width: 1280px; width: 100%; }
.only-mobile { display: none; }
.scrim { position: fixed; inset: 0; background: rgba(28, 18, 10, .45); z-index: 55; }

/* ---------------------------------------------------------- public pages */
.plain-main { flex: 1; }
.hero { background: linear-gradient(165deg, var(--brand-soft), var(--bg) 72%); }
.hero-inner { max-width: 760px; margin: 0 auto; padding: 62px 20px 44px; text-align: center; }
.hero-inner h1 { margin: 0 0 12px; font-size: 34px; letter-spacing: -.035em; line-height: 1.15; }
.hero-sub { margin: 0; color: var(--muted); font-size: 16px; }
.hero-brand {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  font-weight: 700; letter-spacing: -.015em;
}
.hero-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 26px 0 10px;
}

/* ------------------------------------------------------------ auth split */
/* One column by default. The second is an enhancement that only appears when
   there is genuinely room for it, so the small-screen case needs no undoing. */
.auth-split {
  max-width: 470px; margin: 0 auto; padding: 7vh 20px 60px;
}
.auth-aside { display: none; }

@media (min-width: 900px) {
  .auth-split {
    max-width: 940px; padding: 6vh 24px 60px;
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
    gap: 0;
  }
  .auth-aside {
    display: flex; flex-direction: column; justify-content: space-between;
    /* Tight, because the artwork is square and scales to whichever of the two
       axes runs out first. Every pixel spent on gaps here came off the
       picture's WIDTH, not its height: at a 40px gap it drew 264px wide
       inside a 446px box and wasted 182px sideways. */
    gap: 16px; padding: 30px 34px 34px;
    background: linear-gradient(155deg, var(--brand-dark) 0%, #8f3110 55%, #6d250b 100%);
    color: #fff;
    border-radius: var(--radius) 0 0 var(--radius);
  }
  /* Specificity, not source order: .panel is defined further down the sheet
     with the same weight as a bare .auth-panel, and a media query adds none.
     The bare version lost, so the white half kept rounded corners and a border
     on the side that meets the orange -- a notch at each end of the seam with
     the page showing through. Two classes beats one wherever .panel sits. */
  .auth-split .auth-panel {
    border-radius: 0 var(--radius) var(--radius) 0;
    border-left: 0;
    /* The shadow would otherwise be cast into the join from both directions. */
    box-shadow: 4px 0 6px -4px rgba(15, 23, 42, .06);
  }
  /* The two halves are one card, so the shadow under them has to be one
     shadow. It hangs off the aside, which is the left end of that card. */
  .auth-split .auth-aside {
    box-shadow: -4px 0 6px -4px rgba(15, 23, 42, .06);
  }
}
.auth-aside-top { display: flex; align-items: center; gap: 13px; }
.auth-aside .brand-mark { background: rgba(255, 255, 255, .18); color: #fff; }
.auth-aside-name {
  margin: 0; font-family: var(--font-head); font-size: 16px; font-weight: 700;
}
.auth-aside-kicker { margin: 1px 0 0; font-size: 13px; color: rgba(255, 255, 255, .88); }

.auth-aside-foot { display: flex; flex-direction: column; gap: 14px; }
.auth-aside-line {
  margin: 0; font-family: var(--font-head);
  font-size: 30px; font-weight: 700; line-height: 1.22; letter-spacing: -.03em;
}
/* The dots between the words are drawn, not typed, so the markup stays a
   plain list of words and adding a fourth needs no punctuation. */
.auth-aside-tag {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.auth-aside-tag span { display: flex; align-items: center; gap: 10px; }
.auth-aside-tag span + span::before {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .75;
}

/* ---------------------------------------------------------------- the art */
/* One supplied image, already carrying the agent, the icon tiles, the dashed
   arcs and the rings. This panel used to build those in CSS; drawing them
   again on top of a picture that contains them would only have doubled them.

   A background-image rather than an <img>, so a missing file leaves the panel
   composing quietly rather than showing a broken-image icon -- and so the art
   can bleed past the aside's padding without the markup knowing. */
.auth-art {
  flex: 1; min-height: 150px;
  /* Out to the panel edges: the picture fades to nothing at its own rim, so
     letting it run full width is what makes it melt into the gradient rather
     than sit in a box. */
  /* Bleeds past the padding on all four sides. The picture fades to nothing
     at its own rim, so letting it run under the blocks above and below is
     what makes it melt into the gradient instead of sitting in a box -- and
     it buys the square artwork the height it needs to be worth looking at.

     contain, never cover: the icon tiles sit close to the left and right
     edges of the picture and cover would crop them off. */
  margin: -14px -34px -18px;
  background: url('/static/img/login-hero.webp') no-repeat 50% 50%;
  background-size: contain;
}

/* Short viewports: the art is the first thing that should give way, because
   the form beside it must not start scrolling. */
@media (min-width: 900px) and (max-height: 760px) {
  .auth-art { min-height: 0; }
  .auth-aside-line { font-size: 26px; }
}

.panel-wrap { max-width: 760px; margin: 0 auto; padding: 26px 20px 60px; }
.panel-wrap.narrow { max-width: 470px; }
.panel-wrap.tall { padding-top: 7vh; }

/* -------------------------------------------------------- common blocks */
.page-head {
  margin: 12px 0 22px; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.page-head h1 { margin: 0 0 4px; font-size: 30px; letter-spacing: -.035em; font-weight: 700; }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 24px;
}
.panel.flat { box-shadow: none; margin-bottom: 16px; padding: 20px; }
.panel-head { margin-bottom: 20px; }
.panel-head.center { text-align: center; }
.panel-head h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.02em; }
.sub { margin: 0 0 14px; font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mono { font-family: var(--mono); font-size: 13px; }

/* --------------------------------------------------------- accessibility */

/* Present to a screen reader, absent to everyone else. Not display:none,
   which would take it out of the accessibility tree along with everything
   else -- this has to stay readable while staying invisible. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Off-screen until focused, then the first thing on the page. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--surface); color: var(--brand-dark);
  border: 2px solid var(--brand); border-radius: var(--radius-sm);
  padding: 10px 16px; font-weight: 700; text-decoration: none;
  transition: top .12s ease;
}
.skip-link:focus { top: 12px; }
/* A main that is only focusable as a skip target should not draw a box
   around the whole page when it receives that focus. */
.content:focus { outline: none; }

/* One focus ring for everything that did not already have one. Buttons and
   nav links previously fell through to the browser default, which is a
   different shape and colour on every platform and disappears entirely
   against some backgrounds. */
.btn:focus-visible,
.sidenav-item:focus-visible,
.who-block:focus-visible,
.icon-btn:focus-visible,
.tab:focus-visible,
.pager a:focus-visible,
a.brand:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------- notices */

/* What a filter could not understand. Informational, not an error: the page
   still worked, it just answered a slightly different question. */
.notices { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.notice-line {
  display: flex; align-items: flex-start; gap: 9px; margin: 0;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 13px; color: var(--text); line-height: 1.45;
}
.notice-line .ic {
  width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--brand-dark);
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ----------------------------------------------------------------- forms */
.fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.fieldset legend {
  padding: 0; margin-bottom: 12px; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.field { margin-bottom: 16px; flex: 1; min-width: 0; }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row .field { min-width: 200px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.req { color: var(--danger); }
.field input, .field select {
  width: 100%; padding: 0 12px; height: 38px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #94a3b8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
.field input.invalid { border-color: var(--danger); }
.field input.invalid:focus { box-shadow: 0 0 0 3px var(--err-bg); }
.hint { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.hint-ok { color: var(--ok); font-weight: 600; }
.hint-bad { color: var(--danger); font-weight: 600; }
.field-error { margin: 5px 0 0; font-size: 12px; color: var(--danger); }
.note {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 13px 15px; font-size: 13px;
  color: var(--muted); margin: 0;
}
.form-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.form-inline { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-inline .field { margin-bottom: 0; min-width: 170px; }
.field-action { flex: none; }
.inline { display: inline; }

/* ------------------------------------------------------- password reveal */
.pw-wrap { position: relative; display: block; }
/* Room for the button, so a long password never runs underneath it. */
.pw-wrap input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.pw-toggle:hover { color: var(--brand-dark); background: var(--surface-2); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pw-toggle svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The slash is the RESTING state -- crossed out means hidden. Pressing the
   button reveals the password and removes it, which is the way round people
   read it: the eye is what you get, not what you are looking at. */
.pw-toggle.on .pw-slash { display: none; }

/* ------------------------------------------------------- google sign-in */
/* A labelled rule between the password form and the federated button, so the
   two read as alternatives rather than as one long form. */
.or-rule {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 18px; color: var(--muted); font-size: 12.5px;
}
.or-rule::before, .or-rule::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
/* Google renders its own button into this, at its own width. Centring the
   wrapper is all we can style without fighting it. */
.google-signin { display: flex; justify-content: center; min-height: 44px; }

/* ----------------------------------------------------------- signup steps */
.steps-bar {
  display: flex; align-items: center; gap: 10px;
  list-style: none; margin: 0 0 22px; padding: 0;
}
.steps-bar li {
  display: flex; align-items: center; gap: 8px; flex: 1;
  color: var(--muted); font-size: 13px; font-weight: 600;
}
.steps-bar li + li::before {
  content: ''; flex: 1; height: 2px; border-radius: 2px; background: var(--border);
}
.steps-bar li.on { color: var(--brand-dark); }
.steps-bar li.on + li::before, .steps-bar li.done + li::before { background: var(--brand); }
.steps-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--border); color: var(--muted); background: var(--surface);
}
.steps-bar li.on .steps-dot {
  background: var(--brand-dark); border-color: var(--brand-dark); color: #fff;
}
@media (max-width: 420px) {
  .steps-label { display: none; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 0 16px; height: 40px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.3; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:disabled { opacity: .55; cursor: default; }
/* --brand-dark, not --brand: white on the bright terracotta is 3.80:1 and
   fails AA. The bright one is for marking, never for carrying text. */
.btn-primary { background: var(--brand-dark); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover:not(:disabled) { background: #a13611; }
.btn-ghost { background: var(--surface); border-color: var(--border); color: #334155; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-ghost.danger { color: var(--danger-text); border-color: var(--err-border); }
.btn-ghost.danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(.93); }
/* Compact for toolbars and inline row actions; standard for forms. */
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 44px; padding: 0 24px; font-size: 15px; }
.full { width: 100%; }
.select-sm {
  padding: 7px 10px; font: inherit; font-size: 13px; border: 1px solid var(--border);
  border-radius: var(--radius-xs); background: var(--surface); color: var(--text);
}

/* ---------------------------------------------------------------- alerts */
.alert {
  padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 18px;
  font-size: 14px; border: 1px solid;
}
.alert-error { background: var(--err-bg); border-color: var(--err-border); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-border); }
.alert-info { background: var(--info-bg); border-color: var(--info-border); }

/* ----------------------------------------------------------- credentials */
.success-mark {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--brand-dark); color: #fff;
  display: grid; place-items: center; font-size: 25px; margin: 0 auto 14px;
}
.cred-block {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 4px 16px; margin-bottom: 16px;
}
.cred-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-soft);
}
.cred-row:last-child { border-bottom: 0; }
.cred-label { width: 118px; font-size: 13px; color: var(--muted); flex: none; }
.cred-value {
  flex: 1; font-family: var(--mono); font-size: 14px; word-break: break-all;
  user-select: all; min-width: 130px;
}
.cred-password { font-size: 17px; font-weight: 700; letter-spacing: .05em; }
.cred-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.steps { padding-left: 20px; color: var(--muted); font-size: 14px; }
.steps li { margin-bottom: 7px; }

/* ----------------------------------------------------------------- cards */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-1); position: relative; overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.card:hover { box-shadow: var(--shadow-2); }
/* The one card the reference makes the hero of the row. */
.card.feature {
  background: linear-gradient(145deg, var(--brand-dark) 0%, #8f3110 100%);
  border-color: transparent; color: #fff;
  box-shadow: var(--shadow-2);
}
.card.feature .card-label,
.card.feature .card-of,
.card.feature .muted { color: rgba(255, 255, 255, .92); }
.card.feature .card-icon { background: rgba(255, 255, 255, .22); color: #fff; }
.card.feature .card-link { color: #fff; }
.card.feature .card-value.ok, .card.feature .card-value.off { color: #fff; }
.card.feature .meter { background: rgba(255, 255, 255, .28); }
.card.feature .meter > i { background: #fff; }

.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Micro-label: uppercase and tracked, so it reads as a field name rather than
   competing with the figure underneath it. */
.card-label {
  font-size: 12px; color: var(--muted); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.card-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.card-value { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.card-value.sm { font-size: 20px; }
.card-value.ok { color: var(--ok); }
.card-value.off { color: var(--muted); }
.card-of { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 5px; }
.card-link { font-size: 13px; text-decoration: none; margin-top: 2px; font-weight: 600; }

.meter { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.meter.warn > i { background: var(--warn); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }

/* ------------------------------------------------------------- checklist */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  padding: 10px 0; display: flex; align-items: center; gap: 12px; font-size: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li.done { color: var(--muted); }
.tick {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid;
  place-items: center; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--border); color: var(--muted);
}
li.done .tick { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.soon {
  font-size: 12px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: 20px; padding: 2px 10px; margin-left: auto;
}

/* --------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: var(--radius-sm); }
.table thead th:last-child { border-top-right-radius: var(--radius-sm); }
/* Compact rows: the point of this screen is how many you can see at once. */
.table td {
  padding: 12px 14px; border-bottom: 1px solid var(--border-soft);
  vertical-align: middle; height: 48px;
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--bg); }
/* The selected row gets an edge rather than a fill, so it stays legible and
   does not fight the status colours inside it. */
.table tbody tr.on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.row-off { opacity: .55; }
.u-cell { display: flex; align-items: center; gap: 10px; }
.u-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-size: 13px;
}

/* A status is a dot and a word. The dot is the thing you catch at a glance
   down a column; the word is what makes it readable to somebody who does not
   distinguish the hues, and to a screen reader. Never the dot alone. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border);
  color: #475569; text-transform: capitalize; white-space: nowrap;
}
.pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none; opacity: .85;
}
.pill.no-dot::before { display: none; }
.pill-ok { color: var(--ok-text); border-color: transparent; background: var(--ok-soft); }
.pill-warn { background: var(--warn-bg); border-color: transparent; color: var(--warn-text); }
.pill-danger { background: var(--err-bg); border-color: transparent; color: var(--danger-text); }
.pill-info { background: var(--info-bg); border-color: transparent; color: #0369a1; }
.pill-owner { border-color: transparent; color: var(--brand-dark); background: var(--brand-soft); }
.pill-you { background: var(--brand-soft); border-color: transparent; color: var(--brand-dark); }

.footer { padding: 18px 20px; text-align: center; font-size: 12px; color: var(--muted); }

/* Footer: attribution, copyright, deployed version */
.footer.build {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 18px 20px 26px; margin-top: auto;
  font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center;
}
.build-line { display: block; }
.build-version { font-family: var(--mono); font-size: 12px; opacity: .8; cursor: help; }

/* ============================================================== toolkit */
.vt-toasts {
  position: fixed; top: 16px; right: 16px; z-index: 9000;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(380px, calc(100vw - 32px));
}
.vt-toast {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 13px 38px 13px 15px; font-size: 14px; position: relative;
  opacity: 0; transform: translateX(16px);
  transition: opacity .18s ease, transform .18s ease;
}
.vt-toast.in { opacity: 1; transform: translateX(0); }
/* A toast carrying buttons stays until it is answered or dismissed, so it
   needs room the one-line kind does not. */
.vt-toast-action { padding-bottom: 12px; }
.vt-toast-action .toast-title { display: block; font-size: 14px; }
.vt-toast-action .toast-body { margin: 2px 0 0; }
.toast-actions { display: flex; gap: 8px; margin-top: 10px; }

/* A range input inherits almost nothing, so it is styled explicitly rather
   than left as whatever the platform draws. */
.range {
  width: 100%; max-width: 280px; accent-color: var(--brand);
  height: 22px; cursor: pointer;
}
.vt-toast-success { border-left-color: var(--ok); }
.vt-toast-error { border-left-color: var(--danger); }
.vt-toast-info { border-left-color: var(--brand); }
.vt-toast-x {
  position: absolute; top: 7px; right: 9px; background: none; border: 0;
  font-size: 19px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 4px;
}
.vt-toast-x:hover { color: var(--text); }

.vt-overlay {
  position: fixed; inset: 0; z-index: 9100; background: rgba(28, 18, 10, .5);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; transition: opacity .15s ease;
}
.vt-overlay.in { opacity: 1; }
.vt-modal {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 26px; width: 100%; max-width: 430px;
}
.vt-modal.wide { max-width: 640px; }
.vt-modal-title { margin: 0 0 8px; font-size: 18px; letter-spacing: -.02em; }
.vt-modal-body { margin: 0; color: var(--muted); font-size: 14px; }
.vt-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.vt-no-scroll { overflow: hidden; }

.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  animation: vt-spin .6s linear infinite;
}
.btn-ghost.is-busy::after { border-color: rgba(128,128,128,.3); border-top-color: var(--text); }
@keyframes vt-spin { to { transform: rotate(360deg); } }

/* ======================================================= setup screens */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.tabs a {
  padding: 9px 16px; text-decoration: none; color: var(--muted);
  font-size: 13.5px; font-weight: 600; border-radius: 99px;
  border: 1px solid transparent;
}
.tabs a:hover { color: var(--text); background: var(--surface); }
.tabs a.on { color: #fff; background: var(--brand-dark); }

.toggle {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--border-soft); cursor: pointer; font-size: 14px;
}
.toggle:last-of-type { border-bottom: 0; }
.toggle input { margin-top: 2px; width: 17px; height: 17px; flex: none; accent-color: var(--brand); }
.toggle.compact { border: 0; padding: 0; white-space: nowrap; }

.agent-grid { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.skill-set { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 99px; padding: 4px 12px;
  font-size: 12.5px; background: var(--surface);
}
.chip input { accent-color: var(--brand); }
.chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }

/* Agent row save state */
.agent-saved { font-size: 12px; min-width: 96px; }
.agent-saved.pending { color: var(--warn); }
.agent-saved.ok { color: var(--ok); font-weight: 600; }
.agent-saved.bad { color: var(--danger); }

/* ==================================================== agent workspace */
.cc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.cc-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg {
  display: inline-flex; background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 99px; padding: 3px; gap: 2px;
}
.seg button {
  border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px;
  padding: 7px 16px; cursor: pointer; border-radius: 99px; font-weight: 600;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--brand-dark); color: #fff; }

.cc-live { display: flex; align-items: center; gap: 7px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.up { background: var(--ok); }
.dot.down { background: var(--warn); }

.cc-layout {
  display: grid; grid-template-columns: 290px minmax(0, 1fr) 260px; gap: 16px;
  align-items: start;
}
.cc-side { display: flex; flex-direction: column; gap: 14px; }
.cc-list {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); overflow: hidden;
}
.cc-list-head {
  margin: 0; padding: 14px 16px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between;
}
.count {
  background: var(--brand-soft); color: var(--brand-dark); border-radius: 20px;
  padding: 0 9px; font-size: 12px; font-weight: 700;
}
.cc-empty { padding: 18px 16px; margin: 0; }

.cc-card {
  display: flex; gap: 11px; width: 100%; text-align: left; align-items: center;
  padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border-soft);
  background: none; cursor: pointer; font: inherit; color: var(--text);
}
.cc-card:last-child { border-bottom: 0; }
.cc-card:hover { background: var(--surface-2); }
.cc-card.on { background: var(--brand-soft); }
.cc-card.needs-reply { box-shadow: inset 3px 0 0 var(--warn); }
.cc-card.ringing { box-shadow: inset 3px 0 0 var(--danger); }
.cc-card-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid;
  place-items: center; background: var(--accent-soft); color: var(--brand-dark);
  font-weight: 700; font-size: 13px;
}
/* A queue row is a card plus its Take button. The card stays the clickable
   element; the button sits beside it so it is reachable without opening the
   conversation first, and the divider moves to the row so the two do not get
   one each. */
.cc-card-row {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.cc-card-row:last-child { border-bottom: 0; }
.cc-card-row .cc-card { flex: 1; min-width: 0; border-bottom: 0; }
.cc-card-row:hover { background: var(--surface-2); }
.cc-card-take { flex: none; margin-right: 14px; }

.cc-card-body { display: flex; flex-direction: column; min-width: 0; }
.cc-card-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-card-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cc-thread {
  padding: 0; min-height: 560px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.cc-thread-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 60px 20px;
}
.cc-thread-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cc-thread-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap;
}
.cc-who { display: flex; align-items: center; gap: 11px; }
.cc-thread-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cc-messages { flex: 1; overflow-y: auto; padding: 18px; min-height: 320px; max-height: 52vh; }
.cc-msg { display: flex; margin-bottom: 11px; }
/* The width limit belongs on the COLUMN, which is the flex child of the row and
   so has a percentage to resolve against. Left on the bubble it resolved
   against an auto-width parent, and with overflow-wrap:anywhere the whole thing
   collapsed to one character per line. */
.cc-msg-col { max-width: 76%; min-width: 0; }
.cc-bubble {
  max-width: 100%; padding: 10px 14px; border-radius: 16px; line-height: 1.45;
  font-size: 14px; white-space: pre-wrap; overflow-wrap: break-word;
}
.cc-msg-visitor .cc-bubble {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.cc-msg-agent { justify-content: flex-end; }
/* --brand-dark, not --brand. This is the most-read text in the product and
   white on the bright terracotta is 3.80:1; this is 5.57:1. */
.cc-msg-agent .cc-bubble {
  background: var(--brand-dark); color: #fff; border-bottom-right-radius: 4px;
}
.cc-msg-agent .cc-msg-meta { text-align: right; }
.cc-msg-system { justify-content: center; }
.cc-msg-system .cc-msg-col { max-width: 92%; }
.cc-msg-system .cc-bubble {
  background: transparent; color: var(--muted); font-size: 12.5px; text-align: center;
}
.cc-msg-meta { font-size: 12px; color: var(--muted); margin: 3px 4px 0; }

.cc-compose {
  display: flex; gap: 8px; align-items: flex-end; padding: 14px 16px;
  border-top: 1px solid var(--border-soft);
}
.cc-compose textarea {
  flex: 1; resize: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 14px; font: inherit; font-size: 14px; min-height: 44px; max-height: 130px;
  background: var(--surface); color: var(--text);
}
.cc-compose textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cc-call { border-color: var(--border) !important; }
.cc-call:hover { color: var(--brand-dark); }

.cc-context { align-self: start; }
.kv { margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.kv dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 12px; }
.kv dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
/* A definition list carrying a meter needs room the compact thread panel does
   not. Scoped, so the agent workspace keeps its dense version. */
.usage-kv dt { margin-top: 16px; }
.usage-kv dd { font-size: 14px; }
.usage-kv .meter { margin-top: 6px; }

/* Agent call bar */
.cc-callbar {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--border-soft);
  background: var(--surface-2); font-size: 14px;
}
.cc-callbar.ringing { background: var(--warn-bg); }
.cc-callbar.active { background: var(--brand-soft); }
.cc-callbar-icon { display: grid; place-items: center; color: var(--brand-dark); }
.cc-callbar.ringing .cc-callbar-icon { color: #a06a08; animation: cc-ring 1s ease-in-out infinite; }
.cc-callbar-text { flex: 1; font-weight: 600; }
.cc-callbar-actions { display: flex; gap: 8px; }
@keyframes cc-ring {
  0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); }
}

/* ==================================================== conversation history */
.stars { color: var(--brand); letter-spacing: 2px; white-space: nowrap; }

.pager {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex-wrap: wrap; padding: 18px 0 4px;
}
.page-num {
  min-width: 34px; height: 34px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px; border: 1px solid var(--border-soft);
  background: var(--surface); color: var(--text);
  text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.page-num:hover { border-color: var(--brand); color: var(--brand-dark); }
.page-num.on { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
/* An arrow with nowhere to go still occupies its place, so the row does not
   reflow as you page through it. */
.btn.disabled { opacity: .4; pointer-events: none; }

/* A transcript is read, not worked: no queue column, and the thread runs as
   long as it needs to rather than scrolling inside a fixed box. */
.transcript-layout { grid-template-columns: minmax(0, 1fr) 300px; }
.transcript-layout .cc-thread { min-height: 0; }

/* ------------------------------------------------- in-page notification */
/* The fallback for a blocked desktop alert, and the only thing visible while
   the tab is already in front. Deliberately louder than a toast. */
.vtn-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(28, 18, 10, .5);
  display: grid; place-items: start center;
  padding: 10vh 20px 20px;
  opacity: 0; transition: opacity .16s ease;
}
.vtn-overlay.in { opacity: 1; }
.vtn-card {
  position: relative; width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 26px 26px 22px; text-align: center;
  transform: translateY(-10px); transition: transform .16s ease;
}
.vtn-overlay.in .vtn-card { transform: translateY(0); }
.vtn-mark {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 25px;
  background: var(--brand-soft); color: var(--brand-dark);
}
/* A call is the one thing worth interrupting someone for, so it says so. */
.vtn-overlay.urgent .vtn-mark { background: var(--brand-dark); color: #fff; animation: vtn-ring 1s ease-in-out infinite; }
.vtn-title { margin: 0 0 6px; font-size: 19px; letter-spacing: -.02em; }
.vtn-body { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.vtn-actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px;
}
.vtn-x {
  position: absolute; top: 8px; right: 10px; background: none; border: 0;
  font-size: 21px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px;
}
.vtn-x:hover { color: var(--text); }
@keyframes vtn-ring {
  0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vtn-overlay, .vtn-card { transition: none; }
  .vtn-overlay.urgent .vtn-mark { animation: none; }
}

/* ------------------------------------------------- transcript refinements */
/* A system line is a note about the conversation, not a thing anyone said, so
   it reads as a quiet centred line rather than a bubble in the middle. */
.cc-note {
  margin: 14px 0; text-align: center;
  font-size: 12.5px; color: var(--muted);
}

/* Which day, once, rather than a bare time on every line of a transcript that
   may span several. */
.cc-day {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 14px; color: var(--muted); font-size: 12px; font-weight: 600;
}
.cc-day::before, .cc-day::after {
  content: ''; flex: 1; height: 1px; background: var(--border-soft);
}

/* Consecutive messages from one person read as a block: tight between them,
   and only the last carries the name and time. The corner nearest the run is
   squared off so the group reads as one shape. */
.cc-msg + .cc-msg { margin-top: 0; }
.cc-msg { margin-bottom: 2px; }
.cc-msg.ends { margin-bottom: 12px; }
.cc-msg-visitor:not(.starts) .cc-bubble { border-top-left-radius: 6px; }
.cc-msg-visitor:not(.ends) .cc-bubble { border-bottom-left-radius: 6px; }
.cc-msg-agent:not(.starts) .cc-bubble { border-top-right-radius: 6px; }
.cc-msg-agent:not(.ends) .cc-bubble { border-bottom-right-radius: 6px; }

/* A transcript is read rather than worked, so it gets more room than the
   agent's thread and does not scroll inside a box of its own. */
.transcript-layout .cc-messages { padding: 22px 26px; }

/* ============================================================ responsive */
@media (max-width: 1180px) {
  :root { --sidebar-w: var(--sidebar-w-sm); }
  .brand-text, .sidenav-label, .nav-group-label { display: none; }
  .sidenav-item { justify-content: center; padding: 11px; }
  .sidenav-item.on::before { left: -12px; }
  .sidebar { padding: 22px 12px 16px; }
  .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .install-card { display: none; }
  .nav-group { margin-bottom: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
  .nav-group:first-child { border-top: 0; padding-top: 0; }
  .cc-layout { grid-template-columns: 250px minmax(0, 1fr); }
  .transcript-layout { grid-template-columns: minmax(0, 1fr); }
  .cc-context { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  .who { display: none; }
  .who-block { padding: 4px; }
  .only-wide { display: none; }
}

@media (max-width: 760px) {
  body.shell { grid-template-columns: 1fr; }
  :root { --sidebar-w: 240px; }
  .sidebar {
    position: fixed; left: 0; top: 0; width: var(--sidebar-w); padding: 22px 14px;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .brand-text, .sidenav-label { display: inline; }
  .nav-group-label { display: block; }
  .sidenav-item { justify-content: flex-start; padding: 11px 12px; }
  .brand { justify-content: flex-start; }
  .install-card { display: block; }
  .nav-group { border-top: 0; padding-top: 0; margin-bottom: 14px; }
  .only-mobile { display: grid; }
  .topbar { padding: 0 14px; height: 68px; }
  .content { padding: 4px 14px 50px; }
  .search kbd { display: none; }
  .page-head h1 { font-size: 24px; }
  .hero-inner { padding: 40px 18px 32px; }
  .hero-inner h1 { font-size: 26px; }
  .panel-wrap { padding: 20px 14px 50px; }
  .panel { padding: 20px; border-radius: 16px; }
  .cred-label { width: 100%; }
  .table td, .table th { padding: 11px 8px; }
  .cc-layout { grid-template-columns: 1fr; }
  .cc-messages { max-height: none; }
  .vt-toasts { top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; }
  .vt-toast { transform: translateY(16px); }
  .vt-toast.in { transform: translateY(0); }
}

@media (display-mode: standalone) {
  /* Installed as a PWA: respect the phone's safe areas. */
  .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
  .content { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .vt-toast, .vt-overlay, .sidebar, .btn { transition: none; }
  .btn.is-busy::after { animation-duration: 2s; }
  .cc-callbar.ringing .cc-callbar-icon { animation: none; }
}

/* --------------------------------------------------- setup product tabs */
/* Which PRODUCT you are configuring, above the tabs for which part of it.
   Visually distinct from those, or the two rows read as one confusing row of
   seven. */
.product-tabs {
  gap: 0; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.product-tabs a {
  display: flex; align-items: center; gap: 8px;
  border-radius: 0; padding: 10px 16px;
  border: 0; border-bottom: 2px solid transparent;
  font-size: 14px;
}
.product-tabs a:hover { background: none; color: var(--text); }
.product-tabs a.on {
  background: none; color: var(--brand-dark);
  border-bottom-color: var(--brand);
}
.product-tabs .ic { width: 17px; height: 17px; }