/* ==========================================================================
   Debt Fix CRM — agent workspace
   Tokens mirror the Figma "Debt Fix CRM" variable collection.
   ========================================================================== */

:root {
  --g700: #1F5C31;
  --g600: #2D7C43;
  --g500: #3F9A57;
  --g100: #D7EECD;
  --g050: #F0F7F4;
  --live: #00DA4B;

  --ink900: #0A1832;
  --ink700: #28394F;
  --ink500: #5C6D82;
  --ink300: #93A2B3;

  --page: #F5F8F6;
  --raised: #FFFFFF;
  --sunken: #EDF2EF;
  --line: #E3E8E6;
  --line-strong: #D4DCE0;

  --wait: #B7791F;
  --wait-bg: #FAF0DD;
  --ok-bg: #E4F1E8;
  --rest: #5C6D82;
  --rest-bg: #EDF1F4;
  --crit: #C0453F;
  --crit-bg: #FBEAE9;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow: 0 6px 20px rgba(10, 24, 50, 0.10);
  --shadow-lg: 0 18px 46px rgba(10, 24, 50, 0.20);
  --rail-w: 236px;
  --font: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--ink900);
  background: var(--page);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.01em; }
button { font-family: inherit; }
.muted { color: var(--ink500); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.spacer { flex: 1; }
.green { color: var(--g600); }

.ico {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 9px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; background: var(--raised); color: var(--ink700);
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--g600); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--g500); }
.btn.dark { background: var(--ink900); color: #fff; }
.btn.ghost { background: var(--raised); border-color: var(--line-strong); }
.btn.ghost:hover:not(:disabled) { background: var(--sunken); }
.btn.danger { background: var(--crit); color: #fff; }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn.block { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }
.btn.round {
  width: 38px; height: 38px; padding: 0; border-radius: 999px;
  justify-content: center;
}
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--g600); font-size: 12px; font-weight: 600;
}
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  border: 0; background: transparent; color: var(--ink500); cursor: pointer;
}
.icon-btn:hover { background: var(--sunken); }
.icon-btn.sm { width: 24px; height: 24px; }
.icon-btn.sm .ico { width: 14px; height: 14px; }

/* ---------- shared bits ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--g100); color: var(--g700);
  font-weight: 700; font-size: 12px; flex: none;
  overflow: hidden;
}
.avatar.sm { width: 28px; height: 28px; font-size: 10px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.avatar img { width: 100%; height: 100%; object-fit: contain; }
.avatar.bot { background: #fff; border: 1px solid var(--line); padding: 3px; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--rest-bg); color: var(--rest);
}
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.tag.waiting { background: var(--wait-bg); color: var(--wait); }
.tag.active  { background: var(--ok-bg);   color: var(--g600); }
.tag.bot     { background: var(--g050);    color: var(--g700); }
.tag.crit    { background: var(--crit-bg); color: var(--crit); }

.chip {
  display: inline-flex; align-items: center; padding: 4px 9px;
  border-radius: 999px; background: var(--sunken);
  font-size: 11px; font-weight: 600; color: var(--ink500);
}
.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ink300); display: inline-block; }
.dot.live { background: var(--live); }

.error { color: var(--crit); font-size: 12px; margin: 0; }

/* ==========================================================================
   Sign in
   ========================================================================== */
.auth { display: grid; grid-template-columns: 520px 1fr; min-height: 100vh; }
/* Sign-in is a shared surface, so it wears Craze For AI rather than any one
   customer's colours. Deliberately restrained: a deep plum ground with a
   single soft wash of the brand gradient, not the full spectrum. Everything
   past this panel, inside the CRM itself, keeps the customer's own palette. */
.auth-brand {
  position: relative;
  overflow: hidden;
  background: #0E0918;
  color: #fff;
  padding: 52px 56px; display: flex; flex-direction: column; gap: 28px;
}
.auth-brand::before {
  content: "";
  position: absolute; inset: -30% -20% auto -20%; height: 80%;
  background:
    radial-gradient(58% 58% at 22% 18%, rgba(77, 111, 255, 0.34), transparent 70%),
    radial-gradient(46% 46% at 78% 6%, rgba(255, 61, 154, 0.20), transparent 70%),
    radial-gradient(42% 42% at 58% 44%, rgba(47, 230, 222, 0.14), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand-copy p, .auth-foot { color: #BDB2DC !important; }
.auth-foot .dot.live { background: #2FE6DE; }
/* Scoped to the sign-in card only. Inside the CRM the primary button keeps
   the customer's own colour, which is the point of white labelling. */
.auth-form-side .btn.primary {
  background: linear-gradient(120deg, #4D6FFF, #8B5CF6 55%, #FF3D9A);
  border-color: transparent;
  color: #0B0713;
}
.auth-form-side .btn.primary:hover { filter: brightness(1.07); }
.auth-form-side .linklike { color: #6E5CFF; }
.auth-logo { width: 190px; height: auto; }
.auth-art { flex: 1; display: flex; align-items: center; }
.auth-art svg { width: 100%; max-width: 360px; height: auto; }
.auth-brand-copy h2 { font-size: 32px; line-height: 1.2; font-weight: 800; }
.auth-brand-copy p { color: var(--g100); line-height: 1.6; margin: 12px 0 0; }
.auth-foot { display: flex; align-items: center; gap: 8px; color: var(--g100); font-size: 12px; margin: 0; }

.auth-form-side {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 40px;
}
.auth-card {
  width: 100%; max-width: 420px; background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 36px 40px 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.auth-card h1 { font-size: 26px; font-weight: 800; }
.auth-links { display: flex; justify-content: flex-end; margin-top: -4px; }
.auth-note { margin: 0; font-size: 11px; color: var(--ink500); text-align: center; }
.auth-credit { font-size: 11px; color: var(--ink300); margin: 0; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span:first-child { font-size: 12px; font-weight: 600; color: var(--ink700); }
.input {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--raised); padding: 0 12px;
}
.input:focus-within { border-color: var(--g600); box-shadow: 0 0 0 1px var(--g600); }
.input .ico { width: 16px; height: 16px; color: var(--ink300); }
.input input, .input select, .input textarea {
  flex: 1; border: 0; outline: none; background: transparent;
  padding: 11px 0; font-size: 14px; font-family: inherit; color: var(--ink900);
}
.input-affix {
  border: 0; background: none; cursor: pointer;
  color: var(--g600); font-size: 12px; font-weight: 600;
}

/* ==========================================================================
   App shell
   ========================================================================== */
.app { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  height: 60px; padding: 0 18px; flex: none;
  background: var(--raised); border-bottom: 1px solid var(--line);
}
.topbar-logo { height: 22px; width: auto; }
.topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-mark { width: 26px; height: 26px; flex: none; border-radius: 7px; }
.topbar-workspace { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.topbar-workspace strong {
  font-size: 14px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.workspace-switcher select {
  font: inherit; font-size: 13px; padding: 5px 8px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--sunken); color: inherit; max-width: 200px;
}
.auth-logo-lockup { display: flex; align-items: center; gap: 12px; }
.auth-logo-mark { width: 40px; height: 40px; border-radius: 11px; }
.auth-logo-word { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.topbar-divider { width: 1px; height: 24px; background: var(--line); }
.search {
  display: flex; align-items: center; gap: 9px; flex: 1; max-width: 420px;
  background: var(--sunken); border-radius: var(--r-sm); padding: 0 12px;
  position: relative;
}
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--raised); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); box-shadow: 0 12px 32px rgba(15, 30, 24, .14);
  max-height: 380px; overflow-y: auto; padding: 6px;
}
.search-results .sr-group {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink300); padding: 8px 10px 4px;
}
.search-results .sr-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink900);
}
.search-results .sr-item:hover, .search-results .sr-item:focus { background: var(--sunken); }
.search-results .sr-sub { color: var(--ink500); font-size: 12px; }
.search-results .sr-empty { padding: 12px; color: var(--ink500); font-size: 13px; }
.search .ico { width: 15px; height: 15px; color: var(--ink300); }
.search input {
  flex: 1; border: 0; background: transparent; outline: none;
  padding: 9px 0; font-size: 13px; font-family: inherit;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--crit); color: #fff;
  font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.conn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--sunken); font-size: 11px; font-weight: 600; color: var(--ink500);
}
.conn.online { background: var(--g050); color: var(--g700); }
.conn.online .dot { background: var(--live); }
.conn.offline { background: var(--crit-bg); color: var(--crit); }
.conn.offline .dot { background: var(--crit); }
.user-chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--sunken); border-radius: 999px; padding: 4px 12px 4px 4px;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.user-meta strong { font-size: 12px; }
.user-meta span { font-size: 10px; color: var(--ink500); text-transform: capitalize; }

.body { flex: 1; display: flex; min-height: 0; }

/* ---------- left rail ---------- */
.rail {
  width: var(--rail-w); flex: none; background: var(--raised);
  border-right: 1px solid var(--line);
  padding: 14px 12px; display: flex; flex-direction: column; gap: 3px;
  transition: width .16s ease;
  /* The rail holds twenty entries and Logout sits at the bottom. overflow:
     hidden clipped everything past the fold on a shorter screen with no way
     to reach it -- found on the first visual review, 2026-08-25. Scroll
     vertically; keep the horizontal clip so the collapse animation stays
     tidy. */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.rail-group {
  margin: 12px 10px 4px; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink300);
}
.nav {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink700);
  font-size: 13px; font-weight: 500; cursor: pointer; text-align: left;
}
.nav:hover { background: var(--sunken); }
.nav.active { background: var(--g600); color: #fff; font-weight: 600; }
.nav.active .ico { color: #fff; }
.nav .ico { color: var(--ink500); }
.nav span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav.danger, .nav.danger .ico { color: var(--crit); }
.nav.danger:hover { background: var(--crit-bg); }
.pill-count {
  font-style: normal; font-size: 10px; font-weight: 700;
  background: var(--wait-bg); color: var(--wait);
  padding: 2px 7px; border-radius: 999px;
}
.nav.active .pill-count { background: #fff; color: var(--g700); }
.rail-spacer { flex: 1; }

.app.rail-collapsed .rail { width: 64px; align-items: center; }
.app.rail-collapsed .rail-group { display: none; }
.app.rail-collapsed .nav span,
.app.rail-collapsed .nav .pill-count { display: none; }
.app.rail-collapsed .nav { justify-content: center; padding: 9px; }

/* ---------- content ---------- */
.content { flex: 1; min-width: 0; display: flex; }
.three-panel { flex: 1; display: flex; min-width: 0; }
.page { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.page-head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 26px 14px; flex: none;
}
.page-head h2 { font-size: 24px; font-weight: 800; }
.page-body { flex: 1; overflow: auto; padding: 0 26px 26px; }

.segmented { display: inline-flex; gap: 4px; background: var(--sunken); padding: 4px; border-radius: var(--r-sm); }
.segmented button {
  border: 0; background: transparent; border-radius: 6px;
  padding: 6px 12px; font-size: 11px; font-weight: 500; color: var(--ink500); cursor: pointer;
}
.segmented button.active { background: var(--raised); color: var(--ink900); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* ---------- conversation list ---------- */
.list-panel {
  width: 310px; flex: none; background: var(--raised);
  border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0;
}
.list-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--line); flex: none;
}
.list-head h2 { font-size: 17px; font-weight: 700; }
.conversation-list { flex: 1; overflow: auto; }
/* The inbox pager (owner ask 2026-09-02): the panel's own foot, under the
   scrolling list rather than inside it, so the last row always scrolls clear
   of the controls. The same footer component as Contacts, drawn edge to edge
   and allowed to wrap onto two lines in the narrow panel. */
.list-foot { flex: none; }
.list-foot .table-foot {
  margin: 0; border-width: 1px 0 0; border-radius: 0;
  gap: 8px 12px;
}
.conv {
  display: flex; gap: 11px; padding: 11px 12px 11px 14px;
  border-bottom: 1px solid var(--line); cursor: pointer;
  background: none; border-left: 3px solid transparent; width: 100%;
  text-align: left; font-family: inherit; align-items: flex-start;
}
.conv:hover { background: var(--sunken); }
.conv.selected { background: var(--g050); border-left-color: var(--g600); }
.conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.conv-top { display: flex; align-items: center; gap: 6px; }
.conv-top strong { font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-time { font-size: 11px; font-weight: 600; color: var(--wait); }
.conv-time.idle { color: var(--ink300); font-weight: 500; }
.conv-preview {
  font-size: 11px; color: var(--ink500); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The tags may wrap, the date never leaves the row: min-width 0 lets the
   row shrink inside the list instead of pushing the date past its edge. */
.conv-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; row-gap: 4px; }
.conv-foot .tag { flex: none; }
.unread { width: 8px; height: 8px; border-radius: 999px; background: var(--g600); }
/* The day the row's time belongs to. Sits opposite the status so the pair
   reads as one line: what state this is in, and when it was last in it. */
.conv-date {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink300);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.conv-go {
  width: 26px; height: 26px; border-radius: 999px; border: 0;
  background: var(--sunken); color: var(--ink500);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.conv.selected .conv-go { background: var(--g600); color: #fff; }
.conv-go .ico { width: 14px; height: 14px; stroke-width: 2.2; }

/* ---------- chat ---------- */
.chat-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--page); }
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-head {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 18px; background: var(--raised);
  border-bottom: 1px solid var(--line); flex: none;
}
.chat-id { flex: 1; min-width: 0; }
.chat-name-row { display: flex; align-items: center; gap: 8px; }
.chat-name-row strong { font-size: 15px; }
.chat-meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
.chat-meta .ico { width: 12px; height: 12px; color: var(--ink300); }
.chat-meta span { display: inline-flex; align-items: center; gap: 4px; }
.chat-actions { display: flex; align-items: center; gap: 8px; }

.messages { flex: 1; overflow: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 10px; align-items: flex-start; max-width: 100%; }
.msg.out { flex-direction: row-reverse; }
.msg-stack { max-width: min(520px, 72%); display: flex; flex-direction: column; gap: 4px; }
.bubble {
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--raised); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.msg.out .bubble { background: var(--g600); color: #fff; border-color: var(--g600); }
.msg-meta { font-size: 10px; color: var(--ink300); }
.msg.out .msg-meta { text-align: right; }
.typing-indicator {
  align-self: flex-start; font-size: 12px; font-style: italic;
  color: var(--ink500); padding: 4px 2px;
}
.msg.note .bubble { background: #FFF9E6; border-color: #F2E3B8; color: #7A5310; }
.sys {
  align-self: center; display: inline-flex; align-items: center; gap: 7px;
  background: var(--sunken); color: var(--ink500);
  padding: 5px 12px; border-radius: 999px; font-size: 10px; font-weight: 500;
}
.notice {
  background: var(--wait-bg); color: #7A5310; border-radius: var(--r-md);
  padding: 12px 14px; font-size: 12px; line-height: 1.5;
}

/* ---------- suggestions ---------- */
.suggestions {
  margin: 0 24px 12px; background: var(--g050);
  border: 1px solid var(--g100); border-radius: var(--r-md); padding: 12px 14px;
  flex: none; max-height: 40vh; overflow: auto;
}
.suggestions-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.suggestions-head strong { flex: 1; font-size: 12px; color: var(--g700); }
.suggestion-list { display: flex; flex-direction: column; gap: 8px; }
.suggestion {
  text-align: left; width: 100%; cursor: pointer;
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 12px; font-family: inherit;
}
.suggestion:hover { border-color: var(--g600); }
.suggestion b {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--g600); margin-bottom: 4px;
}
.suggestion span { font-size: 12px; line-height: 1.5; color: var(--ink700); }

/* ---------- composer ---------- */
.composer { flex: none; background: var(--raised); border-top: 1px solid var(--line); padding: 10px 18px 14px; }
.composer-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.ctab {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; border-radius: var(--r-sm);
  padding: 7px 12px; font-size: 12px; font-weight: 500; color: var(--ink500); cursor: pointer;
}
.ctab .ico { width: 14px; height: 14px; }
.ctab.active { background: var(--g050); color: var(--g700); font-weight: 600; }
.ctab.active.note-mode { background: #FFF9E6; color: #7A5310; }
.composer-spacer { flex: 1; }
.composer-row { display: flex; align-items: flex-end; gap: 10px; }
/* Three lines tall to start, grows with the writing up to half the window,
   and the operator can drag it taller or shorter by the grip in the
   bottom-right corner (owner ask 2026-09-02). Vertical only: the row's width
   belongs to the panel. overflow-y auto keeps a long draft scrolling inside
   the box; the browser shortens the scrollbar to leave the corner to the
   grip, so the two never sit on top of each other. */
.composer-row textarea {
  flex: 1; resize: vertical; border: 1px solid var(--line);
  background: var(--sunken); border-radius: 10px;
  padding: 11px 14px; font-family: inherit; font-size: 13px; line-height: 1.5;
  min-height: 84px; max-height: 50vh; overflow-y: auto; outline: none;
}
/* The grip itself, drawn as two short diagonal strokes set 3px in from the
   corner so the rounded corner never clips it and it reads as a handle
   rather than as a scrollbar corner. Firefox draws its own grip. */
.composer-row textarea::-webkit-resizer {
  background-image: linear-gradient(135deg,
    transparent 0 45%, var(--ink300) 45% 56%,
    transparent 56% 72%, var(--ink300) 72% 83%, transparent 83%);
  background-size: 9px 9px; background-repeat: no-repeat;
  background-position: right 3px bottom 3px;
}
.composer-row textarea:focus { border-color: var(--g600); background: var(--raised); }
.composer.note-mode .composer-row textarea { background: #FFF9E6; border-color: #F2E3B8; }

/* ---------- contact panel ---------- */
.contact-panel {
  width: 316px; flex: none; background: var(--raised);
  border-left: 1px solid var(--line); overflow: auto;
}
/* The day marker that opens each calendar day in a transcript. Centred and
   quiet: it is a signpost between messages, not a message. */
.day-sep { display: flex; justify-content: center; margin: 14px 0 10px; }
.day-sep-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--raised); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink300); white-space: nowrap;
}
.day-sep-label .ico { width: 13px; height: 13px; opacity: .75; }

/* When the open conversation began, directly under the visitor's identity. */
.cp-when {
  padding: 0 18px 14px; display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--line);
}
.cp-when-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink300); font-variant-numeric: tabular-nums;
}
.cp-when-row .ico { width: 14px; height: 14px; flex: none; opacity: .8; }

.cp-identity { padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cp-identity strong { font-size: 16px; }
.cp-section { border-top: 1px solid var(--line); }
.cp-sec-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 18px; background: none; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink700); font-family: inherit;
}
.cp-sec-head span { flex: 1; text-align: left; }
.cp-sec-head .ico { width: 13px; height: 13px; color: var(--ink300); }
.cp-sec-body { padding: 0 18px 14px; display: flex; flex-direction: column; gap: 9px; }
.kv { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; }
.kv .ico { width: 14px; height: 14px; color: var(--ink300); margin-top: 1px; }
.kv-val { flex: 1; line-height: 1.45; word-break: break-word; }

/* The callback outcome form in "How to reach them". It had no rules of its
   own, so the select and the note box rendered as bare browser controls under
   an oversized heading (operator handbook review, 14 September 2026). */
.cb-outcome {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.cb-outcome > b { font-size: 13px; font-weight: 600; color: var(--ink900); }
.cb-outcome select.input,
.cb-outcome input.input {
  width: 100%; box-sizing: border-box; min-height: 36px; padding: 8px 12px;
  font-size: 13px; font-family: inherit; color: var(--ink900);
}
.cb-outcome .btn { align-self: flex-start; border-color: var(--line-strong); }
.cb-outcome .btn:hover:not(:disabled) { background: var(--sunken); }
.note-card { background: var(--sunken); border-radius: var(--r-sm); padding: 10px 12px; font-size: 11px; line-height: 1.5; }
.note-card em { display: block; font-style: normal; color: var(--ink300); font-size: 10px; margin-top: 4px; }
.total-card { background: var(--g050); border-radius: 10px; padding: 12px 14px; }
.total-card b { display: block; font-size: 10px; letter-spacing: .06em; color: var(--ink500); text-transform: uppercase; }
.total-card strong { font-size: 22px; color: var(--g700); font-weight: 800; }

/* ---------- tables ---------- */
.table-wrap { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data thead th {
  text-align: left; padding: 11px 14px; background: var(--sunken);
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink300); white-space: nowrap; border-bottom: 1px solid var(--line);
}
table.data thead th .th { display: inline-flex; align-items: center; gap: 6px; }
table.data thead th .ico { width: 12px; height: 12px; }
table.data td {
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  vertical-align: middle; white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--g050); }
.cell-name { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.num { font-variant-numeric: tabular-nums; font-weight: 700; }
.go-btn {
  width: 28px; height: 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--g050); color: var(--g600);
  display: inline-flex; align-items: center; justify-content: center;
}
.go-btn:hover { background: var(--g600); color: #fff; }
.go-btn .ico { width: 15px; height: 15px; stroke-width: 2.2; }

/* ---------- cards / analytics ---------- */
.card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px 18px; }
.card > h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card > h3 .ico { color: var(--g600); }
.grid { display: grid; gap: 14px; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: stretch; }
.tile {
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
  min-height: 118px;
}
.tile-top { display: flex; align-items: center; gap: 10px; }
.tile-icon {
  width: 30px; height: 30px; border-radius: 9px; background: var(--sunken);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.tile-value { margin-left: auto; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tile-label { font-size: 12px; font-weight: 600; color: var(--ink500); }
.tile-sub { font-size: 10px; color: var(--ink300); margin-top: auto; }
.two-col { grid-template-columns: 1fr 1fr; align-items: start; }
.metric { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.metric-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.metric-row b { margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.track { height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.track > i { display: block; height: 100%; border-radius: 999px; background: var(--g600); }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12px; }
.bar-row .bar-label { width: 150px; color: var(--ink700); }
.bar-row .track { flex: 1; height: 18px; border-radius: 5px; }
.bar-row .track > i { border-radius: 5px; }
.bar-row b { width: 48px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- modal ---------- */
.modal-root { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
/* A class that sets display beats the hidden attribute, so the dialog shell
   rendered empty on every page load. Say it once, for everything. */
[hidden] { display: none !important; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10, 24, 50, .5); }
.modal {
  position: relative; background: var(--raised); border-radius: 14px;
  width: min(620px, 92vw); max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal.wide { width: min(940px, 94vw); }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; }
.modal-head h3 { flex: 1; font-size: 17px; font-weight: 700; }
.modal-body { padding: 0 20px 20px; overflow: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.hint { font-size: 11px; color: var(--ink500); margin: 10px 0 0; }

.review-chat { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow: auto; padding-right: 4px; }

/* ---------- empty / toast ---------- */
.empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 40px;
}
.empty-icon {
  width: 52px; height: 52px; border-radius: 999px; background: var(--sunken);
  display: flex; align-items: center; justify-content: center; color: var(--ink300);
}
.empty h3 { font-size: 16px; }
.empty p { margin: 0; font-size: 13px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink900); color: #fff; padding: 11px 18px;
  border-radius: 999px; font-size: 13px; z-index: 80; box-shadow: var(--shadow);
}

/* ---------- queue alerts ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cta-alerts {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--wait);
  background: var(--wait-bg); color: var(--wait); font-size: 12px; font-weight: 700;
  cursor: pointer; animation: cta-pulse 1.6s ease-in-out infinite;
}
.cta-alerts .ico { width: 15px; height: 15px; }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(183, 121, 31, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(183, 121, 31, 0); }
}
#alerts-btn.has-alerts { color: var(--wait); }
#alerts-btn.has-escalation { color: var(--crit); }

.alert-stack {
  position: fixed; top: 64px; right: 16px; z-index: 85;
  display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 32px);
  pointer-events: none;
}
.alert-card {
  pointer-events: auto;
  background: var(--raised); border: 1px solid var(--line-strong); border-left: 4px solid var(--wait);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 12px 14px 12px 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  animation: alert-in .18s ease-out;
}
.alert-card.escalation { border-left-color: var(--crit); }
.alert-card.transfer { border-left-color: var(--g600); }
.alert-card .alert-kind {
  grid-column: 1; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wait);
}
.alert-card.escalation .alert-kind { color: var(--crit); }
.alert-card.transfer .alert-kind { color: var(--g700); }
.alert-card .alert-close {
  grid-column: 2; grid-row: 1 / span 3; align-self: start;
  border: 0; background: transparent; color: var(--ink300); cursor: pointer; padding: 2px;
}
.alert-card .alert-close:hover { color: var(--ink700); }
.alert-card .alert-who { grid-column: 1; font-size: 14px; font-weight: 700; color: var(--ink900); }
.alert-card .alert-meta { grid-column: 1; font-size: 12px; color: var(--ink500); display: flex; gap: 8px; flex-wrap: wrap; }
.alert-card .alert-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink700); }
.alert-card .alert-actions { grid-column: 1 / span 2; display: flex; gap: 8px; margin-top: 6px; }
.alert-card .alert-open {
  border: 0; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700;
  background: var(--g600); color: #fff; cursor: pointer;
}
.alert-card .alert-open:hover { background: var(--g700); }
.alert-card .alert-later {
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600;
  background: transparent; color: var(--ink700); cursor: pointer;
}
@keyframes alert-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Out the way it came in, and the space closes rather than snapping shut:
   a card removed outright made the ones below jump up between two frames. */
.alert-card.leaving {
  pointer-events: none;
  animation: alert-out .16s ease-in forwards;
}
@keyframes alert-out {
  from { opacity: 1; transform: none; max-height: 240px; margin-bottom: 0; }
  to { opacity: 0; transform: translateX(12px); max-height: 0; margin-bottom: -10px;
       padding-top: 0; padding-bottom: 0; border-width: 0 0 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .alert-card { animation: none; }
  .alert-card.leaving { animation: alert-out .01s linear forwards; }
}

/* While the tray is open the card stack steps aside: the tray is the full
   list of the same alerts, so showing both would be the same customer twice. */
body.tray-open .alert-stack { display: none; }

/* ---------- installable console (PWA) ---------- */
/* "Install Craze AI" in the top bar: a quiet pill, shown only while the
   browser can install the console and never inside the installed window. */
.cta-install {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--raised); color: var(--ink700); font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.cta-install:hover { background: var(--sunken); }
.cta-install .ico { width: 15px; height: 15px; }
body.pwa-standalone .cta-install { display: none; }
/* "Notifications off" beside the bell in the installed window. */
.notif-off {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--sunken); color: var(--ink500); font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.notif-off::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--ink300); }
.notif-off:hover { color: var(--ink700); }
.alert-tray .tray-note { padding: 0 8px 10px; font-size: 11px; color: var(--ink500); }
.pwa-steps { margin: 12px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink700); display: grid; gap: 8px; line-height: 1.5; }
/* First launch of the installed console: one card over the inbox. Below the
   modal and the alert stack, so a live alert still shows on top of it. */
.pwa-first-run {
  position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 24, 50, .35); padding: 20px;
}
.pwa-first-run-card {
  width: min(440px, 100%); background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 24px;
  animation: alert-in .18s ease-out;
}
.pwa-first-run-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.pwa-first-run-card p { margin: 0; font-size: 14px; color: var(--ink700); line-height: 1.5; }
.pwa-first-run-actions { display: flex; gap: 10px; margin-top: 18px; }
.alert-tray {
  position: absolute; top: 52px; right: 120px; z-index: 90; width: 320px;
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 8px; max-height: 60vh; overflow: auto;
}
.alert-tray h4 { font-size: 12px; color: var(--ink500); padding: 6px 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.alert-tray .tray-empty { padding: 14px 8px; font-size: 13px; color: var(--ink500); }
.alert-tray .tray-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 8px; border-radius: var(--r-sm); cursor: pointer; font-family: inherit;
}
.alert-tray .tray-row:hover { background: var(--sunken); }
.alert-tray .tray-row .tray-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--wait); flex: none; }
.alert-tray .tray-row.escalation .tray-dot { background: var(--crit); }
.alert-tray .tray-row.transfer .tray-dot { background: var(--g600); }
.alert-tray .tray-row strong { display: block; font-size: 13px; color: var(--ink900); }
.alert-tray .tray-row span { font-size: 11px; color: var(--ink500); }
.alert-tray .tray-row .alert-timer { margin-left: auto; font-size: 12px; }

/* ---------- lead delivery (did it reach GoHighLevel?) ---------- */
.tag.muted { background: var(--rest-bg); color: var(--rest); }
/* A lead chip carries its own glyph (tick, cross, dot), so the status dot
   every other tag draws in front would read as two markers. */
.tag.lead::before { display: none; }
.tag .tag-glyph { font-weight: 800; margin-right: 4px; }
.ld-line { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.ld-glyph {
  width: 20px; height: 20px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.ld-line.ok { color: var(--g700); } .ld-line.ok .ld-glyph { background: var(--ok-bg); color: var(--g700); }
.ld-line.warn { color: var(--wait); } .ld-line.warn .ld-glyph { background: var(--wait-bg); color: var(--wait); }
.ld-line.crit { color: var(--crit); } .ld-line.crit .ld-glyph { background: var(--crit-bg); color: var(--crit); }
.ld-line.muted { color: var(--ink500); } .ld-line.muted .ld-glyph { background: var(--rest-bg); color: var(--rest); }
.ld-detail { font-size: 12px; color: var(--ink500); margin: 6px 0 0; line-height: 1.5; }
.ld-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
/* A conversation line on the profile: text, chip, then its buttons on the
   right; the buttons wrap under the line on a narrow card. */
.ld-row { align-items: center; }
.ld-row-actions { margin-top: 0; margin-left: auto; }
.ld-blocked { font-size: 11px; color: var(--wait); margin-top: 8px; }

/* Review and approve (owner decision 14, 19 September 2026): why the lead is
   held, what the visitor said that could not be checked, the details with
   the uncertain ones marked, and the checks. */
.lr-block { margin-top: 16px; }
.lr-block:first-child { margin-top: 0; }
.lr-heading { font-size: 12px; font-weight: 700; color: var(--ink700); margin: 0 0 8px; }
.lr-subheading { font-size: 12px; font-weight: 600; color: var(--ink700); margin: 12px 0 6px; }
.lr-hold {
  display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.5;
  padding: 8px 10px; border-radius: var(--r-sm); background: var(--wait-bg); color: var(--ink700); margin-bottom: 6px;
}
.lr-hold strong { color: var(--wait); }
.lr-hold.fixed { background: var(--crit-bg); }
.lr-hold.fixed strong { color: var(--crit); }
.lr-quote {
  margin: 0 0 6px; padding: 6px 10px; border-left: 3px solid var(--wait);
  background: var(--sunken); font-size: 12px; color: var(--ink700); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  overflow-wrap: anywhere;
}
.field.lr-uncertain > span:first-child { color: var(--wait); }
.field.lr-uncertain .input { border-color: var(--wait); }
.lr-debts.lr-uncertain .lr-subheading { color: var(--wait); }
.lr-debt { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lr-debt-words { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; font-size: 12px; }
.lr-balance { width: 130px; flex: none; }
.lr-remove { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink500); }
.lr-check { font-weight: 500; font-size: 12px; align-items: flex-start; margin-bottom: 6px; }

/* Preferences: volume + test sound row */
.pref-inline { display: flex; align-items: center; gap: 10px; }
.pref-inline input[type="range"] { width: 120px; accent-color: var(--g600); }
.pref-inline .btn-small {
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600;
  background: var(--raised); color: var(--ink700); cursor: pointer;
}
.pref-inline .btn-small:hover { background: var(--sunken); }
.pref-status { font-size: 11px; color: var(--ink500); margin-top: 8px; }
.pref-status.ok { color: var(--g700); }
.pref-status.warn { color: var(--wait); }
@media (prefers-reduced-motion: reduce) {
  .cta-alerts, .alert-card, .pwa-first-run-card { animation: none; }
}
/* Narrow screens: the tray spans the width and the unlock control keeps
   only its icon, so neither pushes the topbar off the edge. */
@media (max-width: 640px) {
  .cta-install span { display: none; }
  .cta-install { padding: 6px 8px; }
  .notif-off { display: none; }
  .alert-tray { left: 8px; right: 8px; width: auto; top: 56px; }
  .cta-alerts span { display: none; }
  .cta-alerts { padding: 6px 8px; }
  .alert-stack { top: 60px; right: 8px; }
}

/* ---------- toggles ---------- */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i {
  position: absolute; inset: 0; background: var(--line-strong);
  border-radius: 999px; transition: background .15s ease; cursor: pointer;
}
.switch i::before {
  content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 999px; transition: transform .15s ease;
}
.switch input:checked + i { background: var(--g600); }
.switch input:checked + i::before { transform: translateX(16px); }

.pref-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.pref-row:first-of-type { border-top: 0; }
.pref-row .pref-main { flex: 1; }
.pref-row .pref-main strong { display: block; font-size: 13px; }
.pref-row .pref-main span { font-size: 11px; color: var(--ink500); }
.pref-col { width: 96px; display: flex; justify-content: center; }

@media (max-width: 1180px) {
  .contact-panel { display: none; }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .list-panel { width: 260px; }
}

/* ---------- Hover tip (Add Operator) ---------- */
.tip { position: relative; display: inline-flex; }
.tip::after {
  content: attr(data-tip) "\A" attr(data-tip-sub);
  white-space: pre;
  position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 70;
  background: var(--ink900); color: #fff; border-radius: 10px;
  padding: 10px 14px; font-size: 12px; font-weight: 700; line-height: 1.5;
  text-align: center; pointer-events: none; opacity: 0;
  transform: translateY(4px); transition: opacity .12s ease, transform .12s ease;
}
.tip::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); right: 28px; z-index: 70;
  border: 6px solid transparent; border-top-color: var(--ink900);
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.tip:hover::after, .tip:hover::before { opacity: 1; transform: translateY(0); }
/* The second tooltip line reads as the lighter sub-note. */
.tip::after { font-weight: 600; }
.tip::first-line { font-weight: 800; }

/* ---------- Analytics custom range ---------- */
.custom-range { display: inline-flex; align-items: center; gap: 7px; }
.custom-range input[type="date"] {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--raised); padding: 6px 8px; font: inherit; font-size: 12px;
  color: var(--ink700);
}

/* ---------- Team invite panel ---------- */
.invite-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.invite-card h3 { font-size: 15px; margin-bottom: 3px; }
.invite-card p { margin: 0; }
.invite-card .btn { flex: none; }

/* ---------- Contact profile fields ---------- */
.pf-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.pf-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-radius: 8px;
}
.pf-row:hover { background: var(--sunken); }
.pf-edit {
  border: 0; background: transparent; cursor: pointer; padding: 4px;
  border-radius: 6px; color: var(--ink300); opacity: .55; flex: none;
  display: inline-flex; transition: color .12s ease, opacity .12s ease;
}
.pf-edit .ico { width: 14px; height: 14px; }
.pf-row:hover .pf-edit, .pf-edit:focus-visible { color: var(--g600); opacity: 1; }
.pf-icon { color: var(--ink300); flex: none; width: 16px; height: 16px; }
.pf-content { min-width: 0; }
.pf-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink300);
}
.pf-value { font-size: 14px; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.pf-note-input {
  width: 100%; box-sizing: border-box; margin-top: 10px; resize: vertical;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--raised); padding: 9px 12px; font: inherit; font-size: 13.5px;
  color: var(--ink900);
}
.pf-note-input:focus { outline: none; border-color: var(--g600); box-shadow: 0 0 0 1px var(--g600); }

/* ---------- Preferences: delivery row polish ---------- */
.pref-col { display: flex; align-items: center; gap: 10px; }
.pref-input {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--raised); padding: 7px 10px; font: inherit; font-size: 12.5px;
  width: 140px; color: var(--ink900);
}
.pref-input:focus { outline: none; border-color: var(--g600); box-shadow: 0 0 0 1px var(--g600); }
.pref-locked-note {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--g600);
}
/* The always-on CRM switch stays green and clearly not a control. */
.switch.locked { cursor: not-allowed; }
.switch.locked input:disabled + i { opacity: 1; }
.switch.locked input:checked + i { background: var(--g600); }

/* ---------- Help request pipeline ---------- */
.pipeline { display: flex; align-items: flex-start; gap: 0; margin-top: 6px; }
.pipe-step { flex: 1; display: flex; align-items: flex-start; gap: 10px; position: relative; padding-right: 18px; }
.pipe-step:not(:last-child)::after {
  content: ""; position: absolute; top: 8px; left: 26px; right: 8px;
  height: 2px; background: var(--line-strong); border-radius: 2px;
}
.pipe-step i {
  width: 16px; height: 16px; border-radius: 999px; flex: none; margin-top: 1px;
  border: 2px solid var(--line-strong); background: var(--raised);
  position: relative; z-index: 1;
}
.pipe-step.done i { background: var(--g600); border-color: var(--g600); }
.pipe-step.done:not(:last-child)::after { background: var(--g600); }
.pipe-step.current i { border-color: var(--g600); box-shadow: 0 0 0 3px var(--g100); }
.pipe-step b { display: block; font-size: 12.5px; }
.pipe-step.current b { color: var(--g700); }


/* ---------- Install screen ---------- */
/* A snippet is code the operator copies by hand, so it must be selectable,
   never reflow mid-word, and be obviously not prose. */
.snippet {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .10);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 19px;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
  overflow-x: auto;
}
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* An action row sitting directly under explanatory text needs air between the
   two, or the button reads as the end of the sentence rather than the thing
   the sentence is about. Done by adjacency so a row-actions used inline
   elsewhere keeps its current spacing. */
/* Two action rows in a row (the origins toggle, then Save addresses) sat
   flush against each other, so the button read as part of the toggle's
   sentence. Same adjacency idea as above, applied to the pair. */
.row-actions + .row-actions { margin-top: 14px; }
p + .row-actions,
.hint + .row-actions,
.muted + .row-actions,
label + .row-actions,
textarea + .row-actions,
input + .row-actions,
/* ...and the same for a button sitting straight after the text, with no
   row-actions wrapper around it. That was the case this rule first missed. */
p + .btn,
.hint + .btn,
.muted + .btn,
p + .channel-grid,
.hint + .channel-grid { margin-top: 12px; }

/* A warning the owner is meant to act on, not just read. */
.notice {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(180, 120, 0, .35);
  background: rgba(255, 196, 84, .10);
}
.notice strong { display: block; font-size: 13px; margin-bottom: 4px; }
.notice p { margin: 0 0 10px; font-size: 12px; line-height: 18px; opacity: .85; }


/* ---------- Company picker ---------- */
/* The console serves more than one company, so which one you are inside has to
   be the most obvious thing in the top bar, and changeable without going
   looking for it. */
.ws-picker { position: relative; }
.ws-button {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; cursor: pointer; font: inherit; color: inherit;
  max-width: 260px;
}
.ws-button:hover { background: rgba(0, 0, 0, .05); }
.ws-button:focus-visible { outline: 2px solid var(--g600, #2D7C43); outline-offset: 1px; }
.ws-button--static { cursor: default; padding-right: 6px; }
.ws-button--static:hover { background: transparent; }
.ws-button--static .ws-caret { display: none; }
.ws-caret { width: 16px; height: 16px; opacity: .55; flex: none; }
.ws-button .topbar-workspace { overflow: hidden; }
.ws-button strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ws-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 320px; max-width: 90vw;
  padding: 10px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}
.ws-search {
  width: 100%; padding: 9px 11px; margin-bottom: 8px;
  border: 1px solid rgba(0, 0, 0, .14); border-radius: 8px; font: inherit;
}
.ws-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.ws-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.ws-row:hover, .ws-row:focus-visible { background: rgba(0, 0, 0, .05); outline: none; }
.ws-row.current { background: rgba(45, 124, 67, .10); }
.ws-row-mark { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; flex: none; }
.ws-row-text { display: flex; flex-direction: column; min-width: 0; }
.ws-row-text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-row-text span { font-size: 11px; opacity: .6; }
.ws-empty { padding: 12px 10px; font-size: 13px; opacity: .6; }

/* ---------- AI Chatbot screen ---------- */
/* Tall enough that the panel inside is not scrolled within a scroll, which is
   the thing that makes an embedded preview feel broken. */
.chatbot-preview {
  display: block; width: 100%; height: 660px;
  margin: 10px 0 12px; border: 1px solid rgba(0, 0, 0, .10); border-radius: 12px;
  background: #fbfbfd;
}
.bot-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 14px 0 4px; }
.bot-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bot-fact span { font-size: 11px; letter-spacing: .3px; opacity: .55; }
.bot-fact strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ---------- AI Chatbot screen ---------- */
.chatbot-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 16px; align-items: start; }
@media (max-width: 1180px) { .chatbot-split { grid-template-columns: 1fr; } }
/* The save and publish pair needs air after the opening message box: pressed
   by accident, publish changes what every visitor sees. */
.chatbot-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 26px; }
.pending-note { margin-top: 12px; }
.upload-slot { display: flex; align-items: center; gap: 10px; }
.upload-slot .hint { margin: 0; }
.input--locked { background: rgba(0, 0, 0, .04); border-style: dashed; }
.input--locked input,
.input--locked textarea { color: rgba(0, 0, 0, .5); cursor: not-allowed; }

/* ---------- Preference rows ---------- */
/* Every control in one column, so the toggles line up down the card instead of
   sitting wherever their label leaves them. */
.pref-col { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 150px; flex: none; }
.pref-locked-note { font-size: 10px; letter-spacing: .4px; text-transform: uppercase; opacity: .65; white-space: nowrap; }


/* ---------- soft action buttons (revoke / restore) ---------- */
.btn.danger-soft { background: var(--crit-bg); color: var(--crit); border-color: transparent; }
.btn.danger-soft:hover:not(:disabled) { background: var(--crit); color: #fff; }
.btn.success-soft { background: var(--ok-bg); color: var(--g700); border-color: transparent; }
.btn.success-soft:hover:not(:disabled) { background: var(--g600); color: #fff; }

/* ---------- Activity Log (platform owner) ---------- */
.log-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 12px 0 4px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
button.chip { border: 1px solid transparent; cursor: pointer; transition: background .12s ease, color .12s ease; }
button.chip:hover { background: var(--line); }
button.chip.active { background: var(--ink900); color: #fff; }
.log-search {
  margin-left: auto; min-width: 220px; flex: 1 1 220px; max-width: 320px;
  padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 999px;
  font: inherit; font-size: 12px; background: var(--raised); color: var(--ink900);
}
.log-search:focus { outline: 2px solid var(--g600); outline-offset: 1px; border-color: transparent; }
.log-day {
  margin: 16px 0 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink300);
}
.log-list { display: flex; flex-direction: column; }
.log-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 6px; border-bottom: 1px solid var(--line);
}
.log-row:last-child { border-bottom: 0; }
.log-row:hover { background: var(--g050); border-radius: var(--r-sm); }
.log-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; background: var(--ink300); }
.log-dot.delete   { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-bg); }
.log-dot.restore  { background: var(--g500); box-shadow: 0 0 0 3px var(--ok-bg); }
.log-dot.access   { background: #6E5CFF;    box-shadow: 0 0 0 3px #ECE9FF; }
.log-dot.company  { background: var(--wait); box-shadow: 0 0 0 3px var(--wait-bg); }
.log-dot.contacts { background: var(--g600); box-shadow: 0 0 0 3px var(--ok-bg); }
.log-dot.help     { background: var(--wait); box-shadow: 0 0 0 3px var(--wait-bg); }
.log-dot.signin   { background: var(--ink500); box-shadow: 0 0 0 3px var(--rest-bg); }
.log-dot.other    { background: var(--ink300); box-shadow: 0 0 0 3px var(--sunken); }
.log-main { flex: 1; min-width: 0; }
.log-sentence { font-size: 13px; color: var(--ink700); }
.log-sentence strong { color: var(--ink900); }
.log-target { font-weight: 600; color: var(--ink900); }
.log-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; background: var(--sunken);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink500); vertical-align: 1px;
}
.log-time { font-size: 11px; color: var(--ink300); white-space: nowrap; font-variant-numeric: tabular-nums; }


/* ---------- Craze AI Agents (platform owner) ---------- */
/* The alert block is the reason to have opened the screen: what needs a
   person, before the reference material underneath it. */
.agent-alert { border-left: 4px solid var(--crit); }
.agent-alert h3 { color: var(--crit); }
.agent-alert-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.agent-alert-row:last-child { border-bottom: 0; }
.agent-alert-row span { color: var(--ink500); }

.agent-diagnosis {
  margin-top: 10px; padding: 10px 12px;
  background: var(--sunken); border-radius: var(--r-sm);
  border-left: 3px solid var(--line-strong);
}
.agent-diagnosis.bad { background: var(--crit-bg); border-left-color: var(--crit); }
.agent-diagnosis-head { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.agent-diagnosis .tiny { line-height: 1.5; }
.agent-next { margin-top: 6px; font-size: 12px; color: var(--g700); font-weight: 600; }
/* The two-factor enrolment QR. Sized by the box, not the image: the SVG
   carries only a viewBox. White behind it on purpose, whatever the theme,
   because a reader wants dark modules on a light ground. Centred and given
   the same border as the setup key beneath it, so the two read as one
   thing offered two ways. */
.totp-qr {
  width: min(220px, 100%);
  margin: 14px auto 6px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 8px;
  box-sizing: border-box;
}
.totp-qr svg { display: block; width: 100%; height: auto; }
.totp-alt { margin-top: 10px; }

.snippet-inline {
  display: inline-block; padding: 4px 8px; border-radius: 6px;
  background: var(--ink900); color: #E8EEF5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  overflow-x: auto; max-width: 100%;
}
.agent-tunable {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.tunable-input {
  width: 80px; padding: 6px 8px; font: inherit; font-size: 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--raised); color: var(--ink900);
}
.tunable-input:focus { outline: 2px solid var(--g600); outline-offset: 1px; }


/* ---------- API Usage (platform owner) ---------- */
.usage-headline { text-align: center; padding: 26px 20px; }
.usage-big {
  font-size: 40px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink900); line-height: 1.1;
}
.usage-big.muted { font-size: 24px; color: var(--ink300); }
.usage-sub { margin-top: 8px; font-size: 13px; color: var(--ink700); font-weight: 600; }
.usage-headline .agent-diagnosis { text-align: left; margin-top: 14px; }
.usage-bar {
  position: relative; height: 6px; border-radius: 999px;
  background: var(--sunken); overflow: hidden; min-width: 60px;
}
.usage-bar i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: linear-gradient(90deg, var(--g600), var(--g500)); border-radius: 999px;
}
.usage-day {
  display: grid; grid-template-columns: 90px 1fr 70px;
  gap: 10px; align-items: center; padding: 5px 0;
}
.usage-day span:last-child { text-align: right; font-variant-numeric: tabular-nums; }


/* ---------- Automations (platform owner) ---------- */
.automations-health { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.automations-health.bad { border-left: 4px solid var(--crit); }
.automations-health strong { font-size: 15px; }
.destination-card { border-left: 3px solid var(--line); }
.destination-card.is-live { border-left-color: var(--g600); }
.destination-card.is-bad { border-left-color: var(--crit); }
.dest-target {
  font-size: 12px; color: var(--ink500); word-break: break-all; margin: 2px 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dest-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.channel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin: 4px 0 12px;
}
.channel-tile {
  text-align: left; padding: 14px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--raised); cursor: pointer;
  font: inherit; color: inherit; transition: border-color .12s ease, background .12s ease;
}
.channel-tile:hover { border-color: var(--g600); background: var(--g050); }
.channel-tile strong { display: block; font-size: 13px; margin-top: 6px; }
.channel-tile span { font-size: 11px; color: var(--ink500); line-height: 1.5; }


/* Activity Log ------------------------------------------------------------
   A ledger read down its columns: the date and time hold their own cells so
   a row can be scanned, compared and copied without a heading above it. */
.log-table td { vertical-align: middle; }
.log-date-cell {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.log-time-cell {
  white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink500);
}
.log-table .log-dot { flex: none; }
.log-table .log-target { font-weight: 600; color: var(--ink900); }

/* Office hours -----------------------------------------------------------
   A week you can read down: the day and its switch on the left, its times on
   the right, and a closed day visibly stood down rather than merely unticked. */
.office-status h3 .ico { width: 16px; height: 16px; }
.office-week { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.office-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunken);
}
.office-row.closed { background: transparent; border: 1px dashed var(--line-strong); }
.office-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.office-toggle input { width: 16px; height: 16px; accent-color: var(--g600); cursor: pointer; }
.office-day { font-weight: 600; font-size: 13px; }
.office-row.closed .office-day { color: var(--ink300); font-weight: 500; }
.office-times { display: flex; align-items: center; gap: 8px; }
.office-time {
  padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
  background: var(--raised); color: var(--ink900);
}
.office-dash { font-size: 12px; color: var(--ink300); }
.office-closed-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink300);
}

/* A locked office-hours row: readable, visibly not editable. Disabled rather
   than hidden, because a Member still needs to see when the team is back. */
.office-time:disabled {
  background: var(--sunken); color: var(--ink500);
  border-color: var(--line); cursor: default;
}
.office-toggle input:disabled { cursor: default; opacity: .55; }
.office-toggle:has(input:disabled) { cursor: default; }

/* ---------- Preferences: closed-window alerts (Web Push), the sixth control ---------- */
/* Its own dashed rule and heading inside the Alerts card, so it reads as a
   separate thing from the five in-window switches above it. */
.push-section { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.push-section h4 { font-size: 13px; font-weight: 700; margin: 0 0 4px; color: var(--ink900); }
.push-section .push-sub { font-size: 11px; color: var(--ink500); margin: 0 0 4px; line-height: 1.5; }
.push-section .pref-row { border-top: 0; padding-bottom: 10px; }
.pref-row .pref-main span.push-status.ok { color: var(--g700); }
.push-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.push-devices-title {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink500); margin: 6px 0 6px;
}
.push-devices { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.push-device { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); }
.push-device:first-child { border-top: 0; }
.push-device.empty { color: var(--ink500); font-size: 12px; }
.push-device-text { flex: 1; min-width: 0; }
.push-device-text strong { display: block; font-size: 13px; }
.push-device-text span { font-size: 11px; color: var(--ink500); }
.push-device-controls { display: flex; align-items: center; gap: 8px; flex: none; }
/* Narrow screens: the controls drop under the device name rather than
   squeezing it, and the switch column stops reserving its desktop width. */
@media (max-width: 640px) {
  .push-device { flex-wrap: wrap; }
  .push-device-controls { width: 100%; justify-content: flex-end; }
  .push-section .pref-col { width: auto; }
}

/* ---------- updates: the bar at the bottom left, the installed card ---------- */
/* App-level news lives at the bottom left, away from the customer alerts at
   the top right, so an update never reads as a waiting visitor. */
.update-bar {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 14px; border-radius: 12px;
  background: var(--raised); border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(14, 9, 24, .14);
  max-width: 340px;
}
.update-bar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.update-bar-text strong { font-size: 13px; color: var(--ink900); }
.update-bar-text span { font-size: 11px; color: var(--ink500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.update-installed {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 70;
  display: flex; gap: 16px; align-items: flex-start;
  width: min(440px, calc(100vw - 32px)); padding: 18px 18px 16px; border-radius: 14px;
  background: var(--raised); border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(14, 9, 24, .22);
}
.update-installed-mark { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.update-installed-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.update-installed-body h3 { font-size: 15px; margin: 0; color: var(--ink900); }
.update-installed-body p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink700, var(--ink900)); }
.update-installed-meta { font-size: 11px; color: var(--ink500); }
.update-installed-body .btn { align-self: flex-start; margin-top: 6px; }

/* ==========================================================================
   Tables: paging footer, filters, overflow menu, contact profile columns
   ========================================================================== */

/* ---------- paging footer ----------
   Sits under the table's own horizontal scrollbar, never inside it, so the
   controls do not slide away sideways when a wide table is scrolled. Pinned
   on a full-page table (`.pinned`) so paging stays put on a long list; static
   inside a card, where it belongs to that card and nothing else. */
.table-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 12px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 12px; color: var(--ink500);
}
/* Pinned to the bottom of .page-body, which carries 26px of bottom padding.
   Sticking at bottom:0 alone left the footer floating 26px clear of the edge,
   so rows scrolled through the gap underneath it and the bar read as an
   unfinished floating card. The negative margin swallows that padding, so
   the footer sits flush on the edge with nothing visible beneath it, and the
   bar itself stays one compact line: the 26px that was once added under the
   controls to hold them where they had been made a broad white band under
   the bar (owner report 2026-09-02). Square bottom corners because it is an
   edge, not a card. The last row still scrolls fully into view above it: the
   footer's own place in the flow is under the table, so at the end of the
   scroll the table ends clear of the bar. */
.table-foot.pinned {
  position: sticky; bottom: 0; z-index: 2;
  margin-bottom: -26px;
  border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  box-shadow: 0 -2px 10px rgba(10, 24, 50, .05);
}
.tf-rows { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tf-select {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--raised); color: var(--ink900);
  padding: 5px 8px; font: inherit; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
/* Digits hold their width, so the range does not jitter while paging. */
.tf-range { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink700); }
.tf-note { font-size: 11px; }
.tf-pager { margin-left: auto; display: inline-flex; gap: 4px; }
.tf-step {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--raised);
  color: var(--ink700); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.tf-step:hover:not(:disabled) { background: var(--sunken); color: var(--g600); }
.tf-step:disabled { opacity: .35; cursor: not-allowed; }
.tf-step .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.tf-select:focus-visible,
.tf-step:focus-visible { outline: 2px solid var(--g600); outline-offset: 1px; }

/* ---------- filters ----------
   One button, one popover, and a chip for every filter that is on: an empty
   table then reads as "nothing matches this" rather than as a fault. */
.filter-wrap { position: relative; }
.filter-count { margin-left: 6px; background: var(--g100); color: var(--g700); font-variant-numeric: tabular-nums; }
.filter-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 300px; max-width: 92vw; padding: 14px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.filter-menu-title {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink300); margin: 0 0 10px;
}
.filter-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.filter-row > span { font-size: 11px; font-weight: 600; color: var(--ink500); }
.filter-row select {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--raised); color: var(--ink900);
  padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.filter-row select:focus-visible { outline: 2px solid var(--g600); outline-offset: 1px; }
.filter-menu-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }

.filter-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 26px 12px; flex: none;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 4px 4px 10px; border-radius: 999px;
  background: var(--g050); border: 1px solid var(--line); color: var(--ink700);
  font-size: 12px; font-weight: 600;
}
.filter-chip-key {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink300);
}
.filter-chip-x {
  width: 20px; height: 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink500);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.filter-chip-x:hover { background: var(--crit-bg); color: var(--crit); }
.filter-chip-x .ico { width: 12px; height: 12px; stroke-width: 2.4; }
.filter-chip-x:focus-visible { outline: 2px solid var(--g600); outline-offset: 1px; }

/* ---------- overflow menu ----------
   Where an irreversible action goes: reachable in two moves, never the first
   thing a hand lands on. */
.of-wrap { position: relative; flex: none; }
.of-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 200px; padding: 6px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.of-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink700); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; text-align: left;
}
.of-item:hover { background: var(--sunken); }
.of-item .ico { width: 16px; height: 16px; }
.of-item.danger { color: var(--crit); }
.of-item.danger:hover { background: var(--crit-bg); }
.of-item:focus-visible { outline: 2px solid var(--g600); outline-offset: -2px; }

/* ---------- contact profile layout ----------
   Details and Notes, half and half, directly under the name; the record of
   what actually happened sits below them as a table rather than as a stack of
   near-identical delivery lines. */
.pf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .pf-cols { grid-template-columns: 1fr; } }
.pf-delivery { margin: 0 0 12px; }
.pf-conv-id { display: flex; flex-direction: column; gap: 2px; }
.pf-conv-id strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.pf-conv-actions { margin-top: 7px; }
.pf-manual { font-size: 12px; font-variant-numeric: tabular-nums; }
/* The one qualifier the copy rule allows on a delivery chip: it reads SENT at
   a glance, and still answers "sent by what?" without a second look. A real
   integration delivery carries no qualifier at all. */
.tag .tag-qualifier {
  margin-left: 4px; font-size: 9px; font-weight: 600;
  letter-spacing: 0; text-transform: none; opacity: .78;
}

/* ==========================================================================
   Conversation Quality (platform owner only)
   ==========================================================================
   The ledger of what the bot got wrong and whether it is improving. Two rules
   here are visual rather than editorial: a number never appears without the
   sample it was taken from, and the population being read is painted across
   the page rather than left in a toggle nobody re-checks before quoting a
   figure. */

#view-quality { position: relative; --q-drawer-w: clamp(340px, 40%, 720px); }

/* ---------- pinned header controls ---------- */
.q-control { display: inline-flex; align-items: center; gap: 7px; }
.q-control > span { font-size: 11px; font-weight: 700; color: var(--ink500); }
.q-select {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--raised); color: var(--ink900);
  padding: 7px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  max-width: 220px;
}
.q-select:focus-visible { outline: 2px solid var(--g600); outline-offset: 1px; }

.q-testmode {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 12px 5px 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--raised);
}
.q-testmode-label { font-size: 12px; font-weight: 700; color: var(--ink700); }
.q-testmode.on { background: var(--wait-bg); border-color: var(--wait); }
.q-testmode.on .q-testmode-label { color: var(--wait); }
/* The switch input is visually hidden, so the ring has to land on the track. */
.switch input:focus-visible + i { outline: 2px solid var(--g600); outline-offset: 2px; }

/* The band that makes the world unmistakable. It stays on screen for as long
   as Test Mode does, so a screenshot carries it too. */
.q-population-band {
  flex: none; display: flex; align-items: center; gap: 9px;
  margin: 0 26px 12px; padding: 9px 14px;
  border-radius: var(--r-sm);
  background: var(--wait-bg); border: 1px solid #EBD5A6; color: var(--wait);
  font-size: 12px; font-weight: 700;
}
.q-population-band .ico { width: 15px; height: 15px; flex: none; }
.q-population-band span { font-weight: 500; color: #8A6116; }

/* ---------- the five bands ---------- */
.q-band { margin-top: 22px; }
.q-band.first { margin-top: 4px; }
.q-band-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.q-band-head h3 { font-size: 17px; font-weight: 800; }
.q-band-count {
  font-size: 11px; font-weight: 700; color: var(--ink500);
  font-variant-numeric: tabular-nums;
}
.q-band-note { font-size: 11px; color: var(--ink500); margin: 0 0 10px; line-height: 1.5; }

/* ---------- metric tiles ----------
   Value, movement, and the sample it came from. The sample line is not
   decoration: a rate quoted without its denominator stops being true the
   moment somebody pastes it into a message. */
.q-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.q-tile {
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px 13px; display: flex; flex-direction: column; gap: 6px;
}
.q-tile-label { font-size: 12px; font-weight: 700; color: var(--ink700); }
.q-tile-row { display: flex; align-items: baseline; gap: 8px; }
.q-tile-value {
  font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1.1; letter-spacing: -0.02em;
}
.q-tile-unit { font-size: 13px; font-weight: 700; color: var(--ink500); }
.q-delta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink500);
}
.q-delta.up { color: var(--g600); }
.q-delta.down { color: var(--crit); }
.q-delta .q-arrow { font-size: 13px; line-height: 1; }
.q-delta-none { margin-left: auto; font-size: 11px; color: var(--ink300); }
/* Sample and population, on every tile, always. */
.q-sample {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink500); font-variant-numeric: tabular-nums;
}
.q-pop {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  background: var(--ok-bg); color: var(--g700);
}
.q-pop.synthetic { background: var(--wait-bg); color: var(--wait); }
.q-pop.both { background: var(--rest-bg); color: var(--rest); }
.q-source { font-size: 10px; color: var(--ink300); font-weight: 600; }

/* ---------- findings ---------- */
.q-findings { display: flex; flex-direction: column; gap: 8px; }
.q-finding {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px;
}
.q-finding.selected { border-color: var(--g600); box-shadow: 0 0 0 1px var(--g600); }
.q-finding-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.q-finding-open {
  border: 0; background: transparent; padding: 0; margin: 0; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink900);
  cursor: pointer; line-height: 1.45;
}
.q-finding-open:hover { color: var(--g700); text-decoration: underline; }
.q-finding-open:focus-visible { outline: 2px solid var(--g600); outline-offset: 2px; border-radius: 4px; }
.q-finding-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink500); font-variant-numeric: tabular-nums;
}
.q-finding-note {
  background: var(--sunken); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 12px; line-height: 1.5; color: var(--ink700);
}
.q-finding-note em { display: block; font-style: normal; color: var(--ink300); font-size: 10px; margin-top: 4px; }
.q-finding-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.q-occurrences { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.q-occurrences-label { font-size: 10px; color: var(--ink300); font-weight: 600; }

/* ---------- the evidence drawer ----------
   About 40% of the page, beside the findings rather than over them, so the
   arrow keys can walk the list while this refreshes in place. */
.q-drawer {
  position: absolute; right: 0; bottom: 0; top: 0; z-index: 20;
  width: var(--q-drawer-w);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--raised); border-left: 1px solid var(--line-strong);
  box-shadow: -14px 0 34px rgba(10, 24, 50, .10);
  transform: translateX(100%);
  transition: transform .16s ease;
}
.q-drawer.open { transform: translateX(0); }
.q-drawer:focus-visible { outline: 2px solid var(--g600); outline-offset: -2px; }
.q-drawer-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--line);
}
.q-drawer-head h3 { font-size: 15px; font-weight: 800; }
.q-drawer-body { flex: 1; overflow: auto; padding: 14px 16px 20px; }
.q-drawer-summary { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.q-drawer-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 7px; font-size: 11px; color: var(--ink500);
}
.q-evidence-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.q-evidence-tab {
  border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink700);
  border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.q-evidence-tab.active { background: var(--g600); border-color: var(--g600); color: #fff; }
.q-evidence-tab:focus-visible { outline: 2px solid var(--g600); outline-offset: 2px; }
.q-drawer .review-chat { max-height: none; }
.q-drawer-scroll {
  margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--page); padding: 12px 10px; max-height: 54vh; overflow: auto;
}
/* The turn the finding points at, marked where it sits, so the reason the
   drawer opened here is visible without counting bubbles. */
.msg.flagged .bubble { box-shadow: 0 0 0 2px var(--wait); }
.msg.flagged .msg-meta { color: var(--wait); font-weight: 700; }
.q-flag-label {
  display: inline-flex; align-self: center;
  margin: 4px 0 -2px; padding: 2px 9px; border-radius: 999px;
  background: var(--wait-bg); color: var(--wait);
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.q-drawer-hint { font-size: 11px; color: var(--ink500); margin: 12px 0 0; line-height: 1.5; }
.page.q-drawer-open .page-body { padding-right: calc(var(--q-drawer-w) + 26px); }
@media (max-width: 900px) {
  .page.q-drawer-open .page-body { padding-right: 26px; }
  #view-quality { --q-drawer-w: 100%; }
}

/* ---------- honest absences ----------
   A band the API has no data for says so and names itself. It never draws a
   zero, because a zero reads as a measured result. */
.q-placeholder {
  background: var(--raised); border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 16px 18px;
}
.q-placeholder strong { display: block; font-size: 13px; margin-bottom: 5px; }
.q-placeholder p { margin: 0; font-size: 12px; color: var(--ink500); line-height: 1.55; }
.q-empty {
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 34px 26px; text-align: center; max-width: 620px; margin: 24px auto 0;
}
.q-empty-icon {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 14px;
  background: var(--g050); color: var(--g600);
  display: flex; align-items: center; justify-content: center;
}
.q-empty-icon .ico { width: 24px; height: 24px; }
.q-empty h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.q-empty p { margin: 0 0 10px; font-size: 13px; color: var(--ink500); line-height: 1.6; }
.q-empty .row-actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .q-drawer { transition: none; }
}
/* ---------- Blocked Traffic (platform owner) ----------
   The screen's job is to separate "someone is hammering us" from "our own
   widget is misconfigured", so the reading sits above the numbers and the
   share bar sits beside every reason. Everything else borrows the tokens and
   components the rest of the console already uses. */
.traffic-verdict { border-left: 4px solid var(--g600); }
.traffic-verdict.bad { border-left-color: var(--crit); }
.traffic-verdict.bad > h3 { color: var(--crit); }
.traffic-verdict > h3 .ico { color: inherit; }

.traffic-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-top: 12px;
}
.traffic-stat { padding: 14px 16px 16px; }
.traffic-stat-value {
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.traffic-stat-label { font-size: 12px; font-weight: 600; color: var(--ink700); margin-top: 2px; }

.traffic-reason { padding: 10px 0; border-bottom: 1px solid var(--line); }
.traffic-reason:last-child { border-bottom: 0; padding-bottom: 0; }
.traffic-reason-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.traffic-reason-head .usage-bar { flex: 1; }
.traffic-reason-count {
  font-size: 12px; font-weight: 600; color: var(--ink700);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* The salted hash, never an address. Monospace because two of these are
   compared by eye far more often than they are read. */
.traffic-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--ink900); word-break: break-all;
}
.traffic-num { font-variant-numeric: tabular-nums; }
.traffic-agent { max-width: 260px; word-break: break-all; }
.traffic-revealed { margin-top: 8px; }

/* A shadow row is never dressed as a block. Amber, the colour this console
   already uses for "waiting on something", not the red it uses for refused. */
.traffic-shadow { border-left: 4px solid var(--wait); }
.traffic-shadow > h3 { color: var(--wait); }
.traffic-shadow > h3 .ico { color: inherit; }
.traffic-shadow-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: 13px;
}
table.data tbody tr.traffic-shadow-request td { background: var(--wait-bg); }

.traffic-block-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.traffic-block-row:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- Traffic limits (Automations tab) ---------- */
.traffic-master {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding: 12px; border-radius: var(--r-sm); background: var(--sunken);
}
.traffic-limit {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.traffic-limit:last-of-type { border-bottom: 0; }
.traffic-limit-control { display: flex; align-items: center; gap: 8px; flex: none; }
.tunable-input.bad { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }

/* Test mode. Loud on purpose: the failure a quiet toggle allows is replying
   to a test conversation believing it is a customer, or the reverse. The
   banner is above the topbar and cannot be scrolled away from. */
.test-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #7a2e00;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
}
.test-banner strong {
  letter-spacing: 0.08em;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}
.test-banner-leave {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: inherit;
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.test-banner-leave:hover { background: rgba(255, 255, 255, 0.14); }

/* The hidden Craze AI test operator accounts inside a live company. Same
   band as test mode so it cannot be scrolled away from, in a different colour
   so "this is live" is never mistaken for "this is the twin". */
.platform-test-banner { background: #0f3d5e; }

/* The two test-account switches on a company's Grant Access page. */
.ga-test-accounts .pref-row .pref-main span { display: block; }
.ga-test-accounts .pref-col { width: auto; justify-content: flex-end; gap: 10px; }
.ga-test-accounts .ga-test-note { font-size: 11px; color: var(--ink500); white-space: nowrap; }

.test-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line, #d8dee5);
  background: transparent;
  border-radius: 999px;
  padding: 4px 10px 4px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: inherit;
}
.test-toggle-label { font-weight: 600; }
.test-toggle-track {
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: #c9d1d9;
  position: relative;
  transition: background 120ms ease;
}
.test-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  transition: transform 120ms ease;
}
.test-toggle[aria-checked="true"] { border-color: #7a2e00; color: #7a2e00; }
.test-toggle[aria-checked="true"] .test-toggle-track { background: #7a2e00; }
.test-toggle[aria-checked="true"] .test-toggle-knob { transform: translateX(13px); }
.test-toggle[disabled] { opacity: 0.55; cursor: default; }

/* System Health & Alarms (platform owner only, 2026-09-13). Tiles, inline
   sparklines and the alarm list. No chart library: the pages here load from
   this origin only, and a line that reads at a glance is the requirement. */
.sys-head h3 { display: flex; align-items: center; gap: 8px; }
.sys-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.sys-tile { padding: 12px 14px; }
.sys-value { font-size: 22px; font-weight: 650; color: var(--ink900); margin: 2px 0; }
.sys-graphs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.sys-graph { padding: 12px 14px; }
.sys-graph h3 { margin: 0 0 8px; font-size: 13px; color: var(--ink700); }
.sys-spark { width: 100%; height: 90px; display: block; }
.sys-spark-line { fill: none; stroke: var(--g600); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sys-spark-empty { fill: var(--ink300); font-size: 12px; }
.sys-alarm { border-top: 1px solid var(--line); padding: 10px 0; }
.sys-alarm:first-of-type { border-top: 0; }
.sys-alarm.recovered { opacity: 0.7; }
.sys-alarm-head { display: flex; align-items: center; gap: 8px; }
.sys-threshold-input {
  width: 92px; padding: 4px 6px; border: 1px solid var(--line-strong);
  border-radius: 6px; font: inherit;
}
.sys-alert-input {
  width: 100%; max-width: 520px; padding: 8px 10px; margin: 4px 0 10px;
  border: 1px solid var(--line-strong); border-radius: 8px; font: inherit;
}
.sys-alert-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.sys-alert-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.sys-alert-buttons { display: flex; gap: 8px; margin-bottom: 8px; }

/* ---------- what people type into the chatbot (Analytics) ---------- */
.q-card { margin-top: 12px; }
.q-tabs { display: flex; gap: 4px; margin: 10px 0; flex-wrap: wrap; }
.q-tab {
  border: 1px solid transparent; background: transparent; color: var(--ink500);
  padding: 5px 10px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer;
}
.q-tab:hover { background: var(--sunken); }
.q-tab.active { color: var(--g700); background: var(--g050); border-color: var(--g100); font-weight: 650; }
.q-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.q-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink700);
  border-radius: 999px; padding: 6px 8px 6px 14px; font: inherit; font-size: 13px; cursor: pointer;
  text-align: left;
}
.q-chip:hover { border-color: var(--g500); color: var(--g700); }
.q-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.q-chip-count {
  background: var(--sunken); color: var(--ink500); border-radius: 999px;
  padding: 1px 8px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.q-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.q-link {
  margin-left: auto; border: 0; background: transparent; color: var(--g600);
  font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; padding: 0;
}
.q-link:hover { color: var(--g700); text-decoration: underline; }
.q-chart { margin-top: 14px; }
.q-bars { display: flex; align-items: flex-end; gap: 3px; height: 110px; margin-top: 6px; }
.q-bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.q-bar { background: var(--g500); border-radius: 3px 3px 0 0; min-height: 2px; }
.q-bar-col:hover .q-bar { background: var(--g700); }
.q-bar-label {
  font-size: 10px; color: var(--ink300); text-align: center; margin-top: 4px; height: 12px;
  white-space: nowrap;
}
.q-table .q-cell-query { max-width: 420px; }
.q-cell-links { white-space: nowrap; }
.q-chat-link {
  border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink700);
  border-radius: 6px; padding: 3px 8px; margin-right: 4px; font: inherit; font-size: 12px;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.q-chat-link:focus-visible { outline: 2px solid var(--g600); outline-offset: 1px; }
.q-table .q-cell-query { white-space: normal; }
.q-chat-link:hover { border-color: var(--g500); color: var(--g700); }
.q-table { table-layout: auto; }
.q-table .q-cell-query { min-width: 260px; max-width: 460px; }
.q-table .q-cell-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-table th { white-space: nowrap; }

/* Outcomes panel (Analytics, owners): the lost-with-contact list wraps. */
.outcome-lost { display: flex; flex-wrap: wrap; gap: 6px; }
.outcome-lost .q-chat-link { margin-right: 0; }
.outcomes-card .q-table td, .outcomes-card .q-table th { font-variant-numeric: tabular-nums; }