/* ATMOS design system: shell, layout and components.
 *
 * Loaded after the legacy inline styles in index.html and wins on specificity
 * (every rule is scoped under `body`). Tokens live in styles.css.
 *
 * Layout model
 *   - an icon rail on the left (88px, 240px expanded),
 *   - a top bar holding the workspace, plan, help, settings, theme and account,
 *   - a page below it that scrolls on its own,
 *   - `.dashboard.is-locked` (the live dialer) pins to the viewport instead and
 *     lets its panels scroll internally,
 *   - on phones the rail becomes a bottom tab bar.
 *
 * Spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32. Nothing sits closer to
 * anything else than 8px, and no text ever touches an edge.
 */

/* ------------------------------------------------------------------ base */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--color-background);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.55;
}
body * { box-sizing: border-box; }
body a { color: var(--color-primary); }
body h1, body h2, body h3, body h4 { letter-spacing: -0.02em; line-height: 1.25; }
body ::-webkit-scrollbar { width: 10px; height: 10px; }
body ::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
body ::-webkit-scrollbar-thumb:hover { background: #a9b6c4; background-clip: padding-box; border: 3px solid transparent; }
body ::-webkit-scrollbar-track { background: transparent; }
body :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ------------------------------------------------------------------ rail */
body .sidebar {
  width: 88px;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-border);
  box-shadow: none;
  border-radius: 0;
  align-items: stretch;
  z-index: 1000;
}
body .logo {
  padding: 20px 0 12px;
  border-bottom: none;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
body .logo-text {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.04em;
  background: none;
  -webkit-text-fill-color: var(--color-text);
  color: var(--color-text);
}
body .connection-status { margin: 0; }
body .nav-menu { padding: 8px 0 12px; overflow: visible; }
body .nav-section-label {
  display: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  padding: 14px 20px 6px;
}
body .nav-item {
  width: 52px;
  height: 52px;
  margin: 6px auto;
  padding: 0;
  border-radius: 16px;
  justify-content: center;
  color: var(--rail-icon);
  position: relative;
  gap: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
body .nav-item:hover { background: var(--color-surface-raised); color: var(--color-text); }
body .nav-item.active { background: var(--rail-active-bg); color: var(--rail-active-icon); }
body .nav-item.active::before { display: none; }
body .nav-icon { width: 22px; height: 22px; }
body .nav-item span {
  display: none;
  position: absolute;
  left: 62px;
  top: 50%;
  transform: translateY(-50%);
  /* Inverted on both themes: dark pill in light mode, light pill in dark mode */
  background: var(--color-text);
  color: var(--color-background);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  z-index: 1200;
  pointer-events: none;
}
body .nav-item:hover span { display: block; }

/* Collapsible rail */
body .sidebar { transition: width 0.2s ease; }
body .main-content { transition: margin-left 0.2s ease; }

@media (min-width: 901px) {
  html.nav-expanded body .sidebar { width: 240px; }
  html.nav-expanded body .main-content { margin-left: 240px; }
  html.nav-expanded body .logo { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 20px 18px 8px 24px; }
  html.nav-expanded body .logo-text { font-size: 22px; }
  html.nav-expanded body .nav-item {
    width: calc(100% - 24px);
    height: 44px;
    margin: 2px 12px;
    padding: 0 14px;
    justify-content: flex-start;
    gap: 12px;
    border-radius: 12px;
  }
  html.nav-expanded body .nav-item span {
    display: block;
    position: static;
    transform: none;
    background: none;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    box-shadow: none;
    pointer-events: auto;
  }
  html.nav-expanded body .nav-section-label { display: block; }
}

/* ------------------------------------------------------------------ top bar */
body .main-content {
  margin-left: 88px;
  height: 100vh;
  overflow: hidden;
  background: var(--color-background);
  flex-direction: column;
}
body .header { display: none; }          /* legacy pre-pivot header */

body .topbar {
  flex: 0 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  position: relative;
  z-index: 800;
}
body .topbar-left, body .topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
body .topbar-right { gap: 6px; }

body .topbar-icon-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 11px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
body .topbar-icon-btn svg { width: 19px; height: 19px; }
body .topbar-icon-btn:hover { background: var(--color-surface-raised); color: var(--color-text); }
body .topbar-icon-btn.is-on { background: var(--color-primary-subtle); color: var(--color-primary); }
body .topbar-icon-btn .theme-icon-light { display: none; }
body .topbar-icon-btn .theme-icon-dark { display: block; }
[data-theme="dark"] body .topbar-icon-btn .theme-icon-light { display: block; }
[data-theme="dark"] body .topbar-icon-btn .theme-icon-dark { display: none; }

/* Workspace: a label above the name, or the switcher when there is a choice */
body .topbar-workspace { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-left: 6px; }
body .topbar-workspace-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  line-height: 1.2;
}
body .topbar-workspace-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .topbar-workspace .ui-select { margin-top: 1px; }
body .topbar-workspace .ui-select-trigger {
  background: none;
  border: none;
  padding: 0 18px 0 0;
  min-height: 22px;
  font-size: 14px;
  font-weight: 700;
  max-width: 300px;
}
body .topbar-workspace .ui-select-trigger:hover { background: none; color: var(--color-primary); }
body .topbar-workspace .ui-chevron { right: 0; width: 13px; height: 13px; }

/* Plan pill */
body .topbar-plan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 6px 0 6px;
  margin-right: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body .topbar-plan:hover { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); }
body .topbar-plan .tier-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tile-yellow);
  color: var(--color-text);
  white-space: nowrap;
}
body .topbar-plan .tier-badge.monthly, body .topbar-plan .tier-badge.yearly { background: var(--tile-green); }
body .topbar-plan .tier-badge.expired { background: var(--tile-pink); }
body .topbar-plan .tier-action { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); padding-right: 10px; white-space: nowrap; }

/* Account menu */
body .topbar-account { position: relative; margin-left: 2px; }
body .topbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent-3));
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-border);
  transition: box-shadow 0.15s ease;
}
body .topbar-avatar:hover { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
body .topbar-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 248px;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  z-index: 1300;
}
body .topbar-menu[hidden] { display: none; }
body .topbar-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 6px; }
body .topbar-menu-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .topbar-menu-org { font-size: 12px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .topbar-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}
body .topbar-menu-item svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--color-text-secondary); }
body .topbar-menu-item:hover { background: var(--color-surface-raised); }
body .topbar-menu-danger { color: var(--color-danger); }
body .topbar-menu-danger svg { color: var(--color-danger); }
body .topbar-menu-danger:hover { background: var(--color-danger-subtle); }
body .topbar-menu-sep { height: 1px; background: var(--color-border-subtle); margin: 6px 8px; }

/* ------------------------------------------------------------------ page */
body .dashboard {
  flex: 1 1 auto;
  min-height: 0;
  display: none;
  flex-direction: column;
  gap: 20px;
  padding: 26px 32px 40px;
  overflow-y: auto;
  overflow-x: hidden;
}
body .dashboard.is-active { display: flex; }
body .dashboard > * { min-height: 0; flex-shrink: 0; }

/* The live dialer is the one page pinned to the viewport: its panels scroll,
   the page itself does not. Every other page scrolls like a normal page. */
body .dashboard.is-locked { overflow: hidden; padding-bottom: 26px; }
body .dashboard.is-locked > :last-child:not(.dashboard-header) { flex: 1 1 auto; min-height: 0; }
body .dashboard.is-locked [style*="grid-template-columns"] { min-height: 0; }
body .dashboard.is-locked [style*="grid-template-columns"] > .card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
body .dashboard.is-locked [style*="grid-template-columns"] > .card > .card-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
body .dashboard.is-locked [style*="grid-template-columns"] > .card > .card-header { flex-shrink: 0; }

body .dashboard-header {
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
body .dashboard-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}
body .dashboard-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  max-width: 78ch;
  line-height: 1.5;
}

/* The page owns the rhythm (the 20px gap above). Legacy bottom margins on a
   direct child would double it, and 8px between controls in a filter row let
   them touch, so both are normalised here rather than in nine page templates. */
body .dashboard > [style*="margin-bottom: 16px"],
body .dashboard > [style*="margin-bottom: 20px"],
body .dashboard > [style*="margin-bottom: 24px"] { margin-bottom: 0 !important; }
body .dashboard [style*="display: flex"][style*="gap: 8px"] { gap: 12px !important; }
body .dashboard [style*="flex-wrap: wrap"] { row-gap: 12px; }

/* ------------------------------------------------------------------ cards */
body .card,
body .stat-card,
body .campaign-card,
body .contact-list-card,
body .pending-invite-card {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
body .card:hover, body .stat-card:hover { box-shadow: var(--shadow-sm); border-color: transparent; transform: none; }
body .card-header {
  border-bottom: 1px solid var(--color-border-subtle);
  font-weight: 700;
  font-size: 14px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}
body .card-body { padding: 20px; }
body .card-body > :first-child { margin-top: 0; }
body .card-body > :last-child { margin-bottom: 0; }
/* A card body that only holds a list keeps the rows flush with the edges */
body .card-body.is-list { padding: 0; }

body .stat-card::before { display: none; }
body .stat-card { padding: 18px 20px; }
body .stat-title, body .stat-label { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
body .stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 2px; color: var(--color-text); }
body .stat-change { font-size: 12px; color: var(--color-text-secondary); }

/* Pastel tiles: stat cards and inline stat tiles rotate through the palette */
body .stats-grid .stat-card:nth-child(6n+1), body .stat-tile:nth-child(6n+1) { background: var(--tile-teal); }
body .stats-grid .stat-card:nth-child(6n+2), body .stat-tile:nth-child(6n+2) { background: var(--tile-lavender); }
body .stats-grid .stat-card:nth-child(6n+3), body .stat-tile:nth-child(6n+3) { background: var(--tile-pink); }
body .stats-grid .stat-card:nth-child(6n+4), body .stat-tile:nth-child(6n+4) { background: var(--tile-yellow); }
body .stats-grid .stat-card:nth-child(6n+5), body .stat-tile:nth-child(6n+5) { background: var(--tile-blue); }
body .stats-grid .stat-card:nth-child(6n+6), body .stat-tile:nth-child(6n+6) { background: var(--tile-green); }
body .stat-tile { border-radius: var(--radius-md) !important; padding: 14px 16px !important; }
body .stat-tile > div:first-child { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
body .stat-tile > div:last-child { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-top: 4px; }
body .stats-grid { gap: 16px; }

/* Rows in lists (call history, contacts, engagements) */
body .dashboard [style*="border-bottom: 1px solid var(--border)"] { border-bottom-color: var(--color-border-subtle) !important; }
body .campaign-item {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  padding: 12px 14px !important;
}
body .campaign-item.selected { border-color: var(--color-primary) !important; background: var(--color-primary-subtle) !important; }

/* ------------------------------------------------------------------ tables */
/* Page templates set their own cell padding inline, some of it as tight as
   6px, which is what made columns run into each other. One rule wins. */
body .dashboard table { width: 100%; border-collapse: collapse; }
body .dashboard table th,
body .dashboard table td { padding: 11px 16px !important; vertical-align: middle; }
body .dashboard table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
body .dashboard table tbody tr { border-bottom: 1px solid var(--color-border-subtle); }
body .dashboard table tbody tr:last-child { border-bottom: none; }
body .dashboard table tbody tr:hover { background: var(--color-surface-raised); }

/* A caller card in the marketplace directory lifts on hover */
body .mk-caller-card { cursor: pointer; }
body .mk-caller-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: transparent; }

/* A section heading inside a card or page body */
body .ui-section { margin: 0 0 22px; }
body .ui-section:last-child { margin-bottom: 0; }
body .ui-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-subtle);
}
body .ui-hint { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; margin-top: 6px; }

/* ------------------------------------------------------------------ buttons */
body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 10px 20px;
  min-height: 40px;
  line-height: 1.2;
  white-space: nowrap;
}
body .btn-sm { padding: 6px 14px; min-height: 32px; font-size: 13px; }
body .btn-primary { background: var(--color-primary); color: #fff; border: 1px solid transparent; }
body .btn-primary:hover { background: var(--color-primary-hover); transform: none; box-shadow: 0 8px 18px var(--color-primary-glow); }
body .btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
body .btn-secondary:hover { background: var(--color-surface-raised); border-color: var(--color-text-tertiary); }
body .btn-danger { background: var(--color-danger); color: #fff; border: 1px solid transparent; }
body .btn:disabled { opacity: 0.45; cursor: not-allowed; }
body .btn-block { width: 100%; justify-content: center; }
body .btn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ forms */
body .form-group { margin-bottom: 20px; }
body .form-group:last-child { margin-bottom: 0; }
body .form-label {
  display: block;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
}
body .form-input, body .form-select, body .form-textarea {
  width: 100%;
  background: var(--color-input-bg);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 14px;
  min-height: 42px;
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body .form-input::placeholder, body .form-textarea::placeholder { color: var(--color-text-tertiary); }
body .form-input:hover, body .form-textarea:hover { border-color: var(--color-border); }
body .form-input:focus, body .form-select:focus, body .form-textarea:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
  outline: none;
}
body .form-textarea { min-height: 96px; line-height: 1.55; resize: vertical; }
body .form-help { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; line-height: 1.5; }
body .form-row { gap: 16px; }

/* A grid of fields: never let two inputs touch */
body .form-grid { display: grid; gap: 16px 18px; margin-bottom: 20px; }
body .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .form-grid > .form-group { margin-bottom: 0; }
/* Legacy pages set the grid inline with an 8px gap; widen it everywhere */
body .dashboard .form-group[style*="grid-template-columns"],
body .modal .form-group[style*="grid-template-columns"] { gap: 16px 18px !important; }

body .toggle-switch .toggle-slider { background: var(--color-border); }
body .toggle-switch input:checked + .toggle-slider { background: var(--color-primary); }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--color-primary); }

/* Inline checkbox / radio that reads as one line of text */
body .check-line { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.4; cursor: pointer; }
body .check-line input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; }

/* Checkbox rendered as a pill you toggle (skills, tags, filters) */
body .chip-check { display: inline-flex; }
body .chip-check input { position: absolute; opacity: 0; pointer-events: none; }
body .chip-check span {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--color-input-bg);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body .chip-check span:hover { border-color: var(--color-border); color: var(--color-text); }
body .chip-check input:checked + span { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
body .chip-check input:focus-visible + span { box-shadow: 0 0 0 3px var(--color-primary-subtle); }
body .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* A secondary path folded away under the primary one (the CSV drop under the
   contact-list picker when creating a queue). */
body details.form-group > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  padding: 4px 0;
}
body details.form-group > summary::-webkit-details-marker { display: none; }
body details.form-group > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
body details.form-group[open] > summary::before { transform: rotate(90deg); }
body details.form-group > summary:hover { color: var(--color-primary-hover); }

/* ------------------------------------------------------------------ dropdown (ui.js) */
body .ui-select { position: relative; width: 100%; min-width: 0; }
body .ui-select-inline { width: auto; min-width: 150px; max-width: 260px; flex: 0 1 auto; }
body .ui-select .form-select,
body .ui-select select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  height: 100%;
}
body .ui-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 10px 38px 10px 14px;
  background: var(--color-input-bg);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body .ui-select-trigger:hover { border-color: var(--color-border); }
body .ui-select.is-open .ui-select-trigger,
body .ui-select-trigger:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
  outline: none;
}
body .ui-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A multiple select is a box of pills you add to from the same dropdown */
body .ui-select-multi { justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding: 6px 34px 6px 8px; }
body .ui-select-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
body .ui-select-multi .ui-tag { cursor: default; }
body .ui-select-multi .ui-tag-x { cursor: pointer; }
body .ui-select-multi .ui-select-label { padding-left: 6px; }
body .ui-select-label.is-placeholder { color: var(--color-text-tertiary); }
body .ui-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7px;
  color: var(--color-text-secondary);
  transition: transform 0.15s ease;
  pointer-events: none;
}
body .ui-select.is-open .ui-chevron { transform: rotate(180deg); }
body .ui-select.is-disabled .ui-select-trigger { opacity: 0.5; cursor: not-allowed; }

.ui-pop {
  position: fixed;
  /* Above every overlay in the app (modals and .notification top out at 10001).
     The popup lives on <body>, not inside the modal, so a lower z-index put it
     BEHIND the modal backdrop -- and because the native <select> underneath is
     `opacity: 0; pointer-events: none`, there was no fallback: every dropdown
     inside a modal was impossible to open OR see. That is what made creating a
     call queue impossible -- neither the knowledge bases nor the contact lists
     could be picked. Anything added above 10001 must stay below this. */
  z-index: 10050;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 14px;
  color: var(--color-text);
}
.ui-pop[hidden] { display: none; }
.ui-pop-search { padding: 4px 4px 8px; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 4px; }
.ui-pop-input {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  outline: none;
}
.ui-pop-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); }
.ui-pop-list { overflow-y: auto; min-height: 0; }
.ui-pop-group {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 10px 12px 4px;
}
.ui-pop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1.35;
}
.ui-pop-item:hover, .ui-pop-item.is-active { background: var(--color-surface-raised); }
.ui-pop-item.is-selected { color: var(--color-primary); font-weight: 600; }
.ui-pop-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.ui-pop-check { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0; color: var(--color-primary); }
.ui-pop-item.is-selected .ui-pop-check { opacity: 1; }
.ui-pop-empty { padding: 14px 12px; color: var(--color-text-secondary); font-size: 13px; text-align: center; }

/* ------------------------------------------------------------------ pill field (ui.js) */
body .ui-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  padding: 6px 8px;
  cursor: text;
}
body .ui-tags.is-focused {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
body .ui-tags-native { display: none !important; }
body .ui-tags-input {
  flex: 1 1 90px;
  min-width: 90px;
  border: none;
  background: none;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  padding: 4px 2px;
  min-height: 28px;
}
body .ui-tags-input::placeholder { color: var(--color-text-tertiary); }
body .ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 100%;
}
body .ui-tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .ui-tag-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
body .ui-tag-x:hover { background: rgba(255, 255, 255, 0.4); }

/* ------------------------------------------------------------------ inbox (receptionist + email) */
body .ib-filters { display: flex; gap: 8px; flex-wrap: wrap; }
body .ib-filter {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body .ib-filter:hover { color: var(--color-text); border-color: var(--color-text-tertiary); }
body .ib-filter.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

body .ib-split { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; min-height: 0; }
body .ib-list-card, body .ib-thread-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
body .ib-list-card > .card-body, body .ib-thread-card > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body .ib-thread-card > .card-body { display: flex; flex-direction: column; padding: 0; }

body .ib-row {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
body .ib-row:hover { background: var(--color-surface-raised); }
body .ib-row.is-active { background: var(--color-primary-subtle); }
body .ib-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
}
body .ib-row-body { flex: 1 1 auto; min-width: 0; display: block; }
body .ib-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
body .ib-who { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .ib-when { font-size: 11px; color: var(--color-text-tertiary); white-space: nowrap; flex: 0 0 auto; }
body .ib-subject { font-size: 13px; font-weight: 600; color: var(--color-text); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .ib-preview { display: block; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.45; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .ib-row-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
body .ib-row-tags > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
}
body .ib-ai { background: var(--color-primary-subtle) !important; color: var(--color-primary) !important; }
body .ib-human { background: var(--color-success-subtle) !important; color: var(--color-success) !important; }
body .ib-prio { background: var(--color-warning-subtle) !important; color: #9a6100 !important; }
[data-theme="dark"] body .ib-prio { color: var(--color-warning) !important; }

body .ib-thread-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border-subtle);
}
body .ib-thread-who { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
body .ib-thread-meta { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 3px; }
body .ib-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
body .ib-msg { max-width: 76%; }
body .ib-msg-body {
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--color-surface-raised);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body .ib-msg-when { font-size: 10.5px; color: var(--color-text-tertiary); margin-top: 5px; padding: 0 4px; }
body .ib-msg-outbound, body .ib-msg-assistant, body .ib-msg-out { align-self: flex-end; }
body .ib-msg-outbound .ib-msg-body, body .ib-msg-assistant .ib-msg-body, body .ib-msg-out .ib-msg-body { background: var(--color-primary); color: #fff; }
body .ib-msg-outbound .ib-msg-when, body .ib-msg-assistant .ib-msg-when, body .ib-msg-out .ib-msg-when { text-align: right; }

body .ib-reply { flex: 0 0 auto; display: flex; gap: 12px; align-items: flex-end; padding: 16px 22px; border-top: 1px solid var(--color-border-subtle); }
body .ib-reply .form-textarea { min-height: 62px; }
body .ib-reply .btn { flex: 0 0 auto; }

body .ib-empty { padding: 48px 28px; text-align: center; color: var(--color-text-secondary); }
body .ib-empty strong { display: block; font-size: 15px; color: var(--color-text); margin-bottom: 6px; }
body .ib-empty p { font-size: 13px; line-height: 1.6; max-width: 46ch; margin: 0 auto; }
body .ib-note { padding: 16px 18px; border-radius: var(--radius-md); background: var(--tile-yellow); margin-bottom: 20px; }
body .ib-note strong { display: block; font-size: 14px; margin-bottom: 5px; }
body .ib-note p { font-size: 13px; line-height: 1.6; margin: 0; }

@media (max-width: 900px) {
  body .ib-split { grid-template-columns: 1fr !important; }
  body .ib-list-card, body .ib-thread-card { overflow: visible; }
  body .ib-list-card > .card-body { max-height: 46vh; }
  body .ib-messages { max-height: none; }
  body .ib-msg { max-width: 88%; }
}

/* ------------------------------------------------------------------ settings */
body .settings-section {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 24px 26px;
  margin-bottom: 0;                    /* the page gap spaces these now */
}
body .settings-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-subtle);
}
/* Several settings blocks pull an intro line up under the old 24px title */
body .settings-section > p[style*="margin: -6px"] { margin-top: 0 !important; margin-bottom: 16px !important; }
body .settings-grid { gap: 20px 24px; }
body .settings-grid > .form-group { margin-bottom: 0; }
body .team-member-card { border-radius: var(--radius-md); padding: 14px 16px; gap: 14px; margin-bottom: 10px; }

/* ------------------------------------------------------------------ caller profile modal */
/* The dialog is a fixed-height app pane: the title bar stays put, the content
   scrolls, and the rail with the rate and the hire button is pinned to the top
   of that scroll so the call to action never leaves the screen. */
@media (min-width: 901px) {
  body .modal-dialog.mk-profile-modal {
    max-width: 1040px;
    height: min(880px, 90vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body .mk-profile-modal .modal-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  body .mk-profile-modal .modal-header { flex: 0 0 auto; }
  body .mk-profile-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 !important; }
  /* A pinned element taller than the pane would hide its own bottom, so give it
     its own scrollbar once it outgrows the dialog (header is ~70px). */
  body .mkp-rail-inner { max-height: calc(min(880px, 90vh) - 70px); overflow-y: auto; scrollbar-width: thin; }
}

body .mkp { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
body .mkp-rail {
  align-self: stretch;
  background: var(--color-surface-raised);
  border-right: 1px solid var(--color-border-subtle);
}
body .mkp-rail-inner { position: sticky; top: 0; padding: 26px 24px; }

body .mkp-identity { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--color-border-subtle); }
body .mkp-identity > img, body .mkp-identity > div:first-child { margin: 0 auto; }
body .mkp-name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-top: 14px; }
body .mkp-headline { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; margin-top: 5px; }
body .mkp-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
body .mkp-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-tertiary); }
body .mkp-status.is-online { color: var(--color-success); }
body .mkp-status.is-online i { background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-subtle); }

body .mkp-rate {
  text-align: center;
  margin: 20px 0 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
body .mkp-rate b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
body .mkp-rate span { display: block; font-size: 11.5px; font-weight: 600; color: var(--color-text-secondary); margin-top: 6px; }
body .mkp-cta-note { text-align: center; font-size: 13px; color: var(--color-text-secondary); padding: 10px 0; line-height: 1.5; }

body .mkp-facts { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
body .mkp-fact { display: flex; align-items: flex-start; gap: 11px; }
body .mkp-fact svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--color-text-tertiary); }
body .mkp-fact span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-tertiary); }
body .mkp-fact b { display: block; font-size: 13.5px; font-weight: 500; color: var(--color-text); line-height: 1.45; margin-top: 2px; }

body .mkp-note {
  margin-top: 20px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--tile-yellow);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text);
}

/* ---- the measured column ---- */
body .mkp-main { padding: 26px 28px 30px; min-width: 0; }
body .mkp-sec { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--color-border-subtle); }
body .mkp-sec:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
body .mkp-sec h4 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 16px; }
body .mkp-bio { font-size: 14px; line-height: 1.68; color: var(--color-text-secondary); white-space: pre-wrap; margin: 0; max-width: 72ch; }
body .mkp-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 9px; }
body .mkp-chiprow { margin-bottom: 18px; }
body .mkp-chiprow:last-child { margin-bottom: 0; }
body .mkp-chiprow .mk-chip { margin: 0; }
body .mkp-foot { font-size: 12px; color: var(--color-text-tertiary); line-height: 1.55; margin: 14px 0 0; }
body .mkp-empty {
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

body .mkp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body .mkp-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .mkp-stat {
  padding: 16px 16px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border: 1px solid transparent;
  min-width: 0;
}
body .mkp-stat b { display: block; font-size: 23px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
body .mkp-stat span { display: block; font-size: 11.5px; font-weight: 600; color: var(--color-text-secondary); margin-top: 7px; line-height: 1.35; }
body .mkp-stat small { display: block; font-size: 10.5px; color: var(--color-text-tertiary); margin-top: 4px; line-height: 1.35; }
body .mkp-stat-accent { background: var(--color-primary-subtle); border-color: rgba(46, 95, 121, 0.14); }
body .mkp-stat-accent b { color: var(--color-primary); }
[data-theme="dark"] body .mkp-stat-accent { border-color: transparent; }

/* ---- activity chart ---- */
body .mkp-chart { display: flex; align-items: flex-end; gap: 6px; height: 96px; padding-top: 4px; }
body .mkp-bar {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  background: var(--color-surface-raised);
  border-radius: 5px 5px 2px 2px;
  overflow: hidden;
  transition: background 0.15s ease;
}
body .mkp-bar:hover { background: var(--color-border); }
body .mkp-bar i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: var(--color-primary);
  border-radius: 4px 4px 2px 2px;
}
body .mkp-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
body .mkp-key { display: inline-flex; align-items: center; gap: 7px; margin-right: 18px; }
body .mkp-key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
body .mkp-key i.track { background: var(--color-surface-raised); border: 1px solid var(--color-border); }
body .mkp-key i.fill { background: var(--color-primary); }

/* ---- rating distribution ---- */
body .mkp-ratings { display: flex; flex-direction: column; gap: 9px; }
body .mkp-rating { display: grid; grid-template-columns: 42px minmax(0, 1fr) 34px; gap: 14px; align-items: center; }
body .mkp-rating-score { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
body .mkp-rating-score svg { width: 12px; height: 12px; color: var(--color-warning); }
body .mkp-rating-track { height: 9px; border-radius: 999px; background: var(--color-surface-raised); overflow: hidden; }
body .mkp-rating-track > span { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); min-width: 2px; }
body .mkp-rating-count { font-size: 12.5px; color: var(--color-text-secondary); text-align: right; }

@media (max-width: 900px) {
  body .mkp { grid-template-columns: 1fr; }
  body .mkp-rail { border-right: none; border-bottom: 1px solid var(--color-border-subtle); }
  body .mkp-rail-inner { position: static; padding: 22px 18px; }
  body .mkp-main { padding: 22px 18px 26px; }
  body .mkp-stats { grid-template-columns: 1fr 1fr; }
  body .mkp-stats-3 { grid-template-columns: 1fr 1fr; }
  body .mkp-chart { height: 80px; gap: 4px; }
}

/* ------------------------------------------------------------------ caller profile */
body .cp-identity {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border-subtle);
}
body .cp-identity-copy { min-width: 0; }
body .cp-identity-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
body .cp-identity .ui-hint { max-width: 46ch; }

body .cp-visibility {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
body .cp-visibility.is-live { background: var(--color-success-subtle); color: var(--color-success); }
body .cp-visibility.is-paused { background: var(--color-warning-subtle); color: #9a6100; }
[data-theme="dark"] body .cp-visibility.is-paused { color: var(--color-warning); }

/* A checkbox that reads as a settings row */
body .cp-switch-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--color-surface-raised);
  cursor: pointer;
  margin-bottom: 12px;
}
body .cp-switch-row:last-child { margin-bottom: 0; }
body .cp-switch-row:hover { background: var(--color-primary-subtle); }
body .cp-switch-row input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; }
body .cp-switch-row strong { display: block; font-size: 14px; font-weight: 600; }
body .cp-switch-row small { display: block; font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; line-height: 1.5; }

body .cp-save-bar {
  position: sticky;
  bottom: -26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 26px -28px -26px;
  padding: 16px 28px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ------------------------------------------------------------------ tabs, chips, badges */
body .tab, body .mk-tab, body .pd-tab-btn { color: var(--color-text-secondary); font-weight: 600; padding: 10px 4px; }
body .tab.active, body .mk-tab.active, body .pd-tab-btn.active { color: var(--color-text); border-bottom-color: var(--color-text); }
body .tabs, body .mk-tabs { gap: 22px; }
body .mk-chip { background: var(--color-surface-raised); color: var(--color-text-secondary); font-weight: 600; padding: 5px 12px; margin: 0 6px 6px 0; border-radius: 999px; font-size: 12px; }
body .badge { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; }
body .pd-copilot-pill { border-radius: 999px; font-weight: 600; }
body .pd-suggestion-card { border-left: 3px solid var(--color-primary); border-radius: var(--radius-md) !important; background: var(--tile-blue) !important; }
body .pd-disposition-btn { border-radius: 999px; }

/* ------------------------------------------------------------------ modals */
body .modal-dialog, body .modal-content { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); background: var(--color-surface); }
body .modal-header { border-bottom: 1px solid var(--color-border-subtle); padding: 20px 24px; }
body .modal-header h3 { font-weight: 800; letter-spacing: -0.02em; font-size: 18px; }
body .modal-body { padding: 22px 24px; }
/* Every template puts the footer inside the body, so it breaks back out of the
   body's padding to sit flush against the bottom of the dialog. */
body .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 22px -24px -22px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-surface);
}

/* ------------------------------------------------------------------ login */
body .login-modal {
  background:
    radial-gradient(600px 400px at 10% 10%, var(--tile-lavender) 0%, transparent 60%),
    radial-gradient(600px 400px at 90% 90%, var(--tile-pink) 0%, transparent 60%),
    radial-gradient(500px 400px at 80% 15%, var(--tile-teal) 0%, transparent 60%),
    var(--color-background);
}
body .login-container {
  background: var(--color-surface);
  border: none;
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  padding: 36px;
  max-width: 460px;
  width: calc(100% - 32px);
}
body .login-header h1 { font-weight: 900; letter-spacing: -0.04em; color: var(--color-text); }
body .login-header p { color: var(--color-text-secondary); }
body .login-error { border-radius: 12px; }

/* ------------------------------------------------------------------ dialer */
/* The settings column beside the queue list is deliberately dense: compact
   controls, and its own scrollbar so a tall stack never pushes the locked
   page out of the viewport. */
body .pd-side {
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
}
body .pd-side .card-body { padding: 14px 16px; }
body .pd-side .form-input,
body .pd-side .form-select,
/* ------------------------------------------------------------------ email views */
/* The Inbox / Campaigns switch in the Email tab's header. */
body .ib-view.is-on {
  background: var(--color-text);
  color: var(--color-background);
  border-color: var(--color-text);
}
body #email-campaigns-view { min-height: 0; }

/* ------------------------------------------------------------------ dialer keypad */
body .pd-pad-display {
  width: 100%;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
body .pd-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
body .pd-pad-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 7px 0 5px;
  min-height: 44px;            /* a thumb target, not a mouse target */
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  background: var(--color-input-bg);
  color: var(--color-text);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
body .pd-pad-key small {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--color-text-tertiary);
}
body .pd-pad-key:hover { background: var(--color-surface-raised); border-color: var(--color-border); }
body .pd-pad-key:active { transform: scale(0.95); }
body .pd-pad-key:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
body .pd-pad-back { color: var(--color-text-secondary); }
body .pd-pad-back:hover { color: var(--color-danger, #ef4444); }

body .pd-side .ui-select-trigger,
body .pd-side .ui-tags { min-height: 34px; padding: 7px 12px; font-size: 13px; }
body .pd-side .ui-select-trigger { padding-right: 30px; }
body .pd-side .ui-chevron { right: 11px; width: 13px; height: 13px; }
body .pd-side label { line-height: 1.4; }

/* ------------------------------------------------------------------ dialer live view */
/* Listen / whisper / join, on a live row in the team dashboard. */
body .td-listen { display: flex; gap: 4px; margin-top: 4px; }
body .td-listen button {
  padding: 2px 7px; font-size: 10px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--color-border-subtle); border-radius: 6px;
  background: var(--color-input-bg); color: var(--color-text-secondary);
}
body .td-listen button:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* The script checklist, above the transcript in the copilot column. */
body #pd-script-section { border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0; }
body #pd-script-section[hidden] { display: none; }
body #pd-script-section summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 14px; cursor: pointer;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-secondary);
}
body .pd-script-progress { font-variant-numeric: tabular-nums; color: var(--color-primary); }
body #pd-script-beats { padding: 0 14px 10px; max-height: 190px; overflow-y: auto; }
body .pd-beat {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 0; font-size: 13px; line-height: 1.4; cursor: pointer; margin: 0;
}
body .pd-beat input { margin-top: 2px; flex-shrink: 0; }
/* Covered reads as done rather than as struck out: the rep is scanning for
   what is LEFT, so the ones still to do must be the ones that stand out. */
body .pd-beat.is-done span { color: var(--color-text-tertiary); }

/* Callbacks: the pill in the strip, and the picker in the disposition panel. */
body .pd-callbacks-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-primary); background: var(--color-primary-subtle);
  color: var(--color-primary); font: inherit; font-size: 11px; font-weight: 700;
}
body .pd-callbacks-pill[hidden] { display: none; }
body .pd-callbacks-pill.is-overdue { border-color: var(--tile-pink); background: var(--tile-pink); color: var(--color-text); }
body .pd-cb-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-border-subtle); }

body .pd-note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); }
body .pd-note-drafted { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--color-primary); }
body .pd-note-drafted[hidden] { display: none; }
body #pd-disposition-notes { width: 100%; font-size: 13px; padding: 8px 10px; resize: vertical; }

body .pd-callback { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
body .pd-callback-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; cursor: pointer; margin: 0; }
body #pd-callback-at { font-size: 12px; padding: 6px 9px; width: auto; }
body #pd-callback-at[hidden] { display: none; }
body .pd-callback-hint { margin-top: 6px; font-size: 12px; color: var(--warning, #f59e0b); }
body .pd-callback-hint[hidden] { display: none; }

/* The queue picker behind the strip's chip. */
body .pd-pick-help { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 12px; }
body .pd-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
body .pd-pick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--color-border-subtle);
  border-radius: 9px; cursor: pointer; font-size: 13px;
}
body .pd-pick-row:hover { border-color: var(--color-primary); }
body .pd-pick-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .pd-pick-count { font-size: 11px; color: var(--color-text-secondary); flex-shrink: 0; }
body .pd-pick-empty { padding: 20px; text-align: center; color: var(--color-text-secondary); font-size: 13px; }

/* ---------------------------------------------------------------- dialer shell */
/* One view. The strip is the session, the left column is the call, the right
   column is the copilot -- and nothing relocates when a session opens. */
body .pd-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 268px);
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border-subtle);
}

body .pd-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
  min-height: 48px;
}
body .pd-strip-left, body .pd-strip-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body .pd-strip-right[hidden] { display: none; }
body .pd-strip-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin: 0; cursor: pointer; }
body .pd-strip-note { font-size: 12px; color: var(--color-text-secondary); }
body .pd-strip-note strong { color: var(--color-primary); font-size: 14px; }

body .pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  max-width: 320px;
}
body .pd-chip:hover { border-color: var(--color-primary); }
body .pd-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body .pd-strip-name { font-weight: 600; font-size: 13px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .pd-strip-timer {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; padding: 3px 8px; border-radius: 6px;
  background: var(--color-surface); color: var(--color-primary);
}
body .pd-strip-stats { display: flex; gap: 10px; font-size: 11px; color: var(--color-text-secondary); }
body .pd-strip-stats strong { color: var(--color-text); }
body .pd-strip-left-count { font-size: 11px; color: var(--color-primary); padding: 3px 9px; border-radius: 6px; background: var(--color-primary-subtle); }
body .pd-strip-left-count strong { font-size: 14px; }
body .pd-strip-auto { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-text-secondary); }

body .pd-columns { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* The copilot takes the wide side because it is what you read; the call rail
   is fixed-width on the right because it is what you operate. */
body .pd-col-copilot { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
body .pd-col-call {
  width: 360px; flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border-left: 1px solid var(--color-border-subtle);
  background: var(--color-surface-raised);
}

body .pd-contact { padding: 16px 18px; border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0; }
body .pd-contact-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
body .pd-contact-company { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
body .pd-contact-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
body .pd-contact-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--color-text-secondary); min-width: 0; }
body .pd-contact-row span, body .pd-contact-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .pd-contact-row.is-phone { color: var(--color-primary); font-size: 15px; font-weight: 600; }
body .pd-contact-row a { color: var(--color-primary); text-decoration: none; }
/* Before a call there is nobody to show, so the placeholder reads as an
   invitation rather than as rows of missing data. */
body .pd-shell[data-live="false"] .pd-contact-rows { display: none; }

body .pd-keypad-wrap { flex: 1 1 auto; display: flex; flex-direction: column; padding: 12px 14px; min-height: 0; gap: 8px; }
body .pd-number {
  display: flex; align-items: center; flex-shrink: 0;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
}
body .pd-number input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  padding: 9px 12px; font-size: 17px; font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em; color: var(--color-text);
}
body .pd-number button { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); padding: 6px 9px; display: flex; }
body .pd-number button:hover { color: var(--color-text); }

body .pd-dtmf {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 6px 11px; border-radius: 9px;
  background: var(--color-primary-subtle); border: 1px solid var(--color-primary);
}
body .pd-dtmf-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); }
body .pd-dtmf #pd-dtmf-display { flex: 1; font-family: ui-monospace, monospace; font-size: 15px; letter-spacing: 0.2em; color: var(--color-primary); }
body .pd-dtmf button { background: none; border: none; cursor: pointer; color: var(--color-primary); display: flex; padding: 2px; }

body .pd-keys { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; min-height: 0; }
body .pd-key {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 42px;
  border: 1px solid var(--color-border-subtle); border-radius: 11px;
  background: var(--color-input-bg); color: var(--color-text);
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
body .pd-key small { font-size: 8px; font-weight: 700; letter-spacing: .1em; line-height: 1; color: var(--color-text-tertiary); }
body .pd-key:hover { background: var(--color-surface-raised); border-color: var(--color-border); }
body .pd-key:active { transform: scale(0.95); }

body .pd-actions { padding: 12px 14px; border-top: 1px solid var(--color-border-subtle); flex-shrink: 0; display: flex; flex-direction: column; gap: 7px; }
body .pd-actions #pd-dial-btn { width: 100%; padding: 13px; font-size: 15px; font-weight: 700; border-radius: 11px; }
body .pd-actions #pd-skip-btn { width: 100%; padding: 9px; font-size: 13px; font-weight: 600; border-radius: 9px; background: var(--color-surface); border: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); }
body .pd-actions #pd-skip-btn[hidden] { display: none; }

body .pd-callbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; flex-shrink: 0;
  background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border-subtle);
}
body .pd-callbar-left { display: flex; align-items: center; gap: 9px; }
body #pd-status-indicator { width: 9px; height: 9px; border-radius: 50%; background: var(--color-text-tertiary); }
body #pd-call-status { font-size: 13px; font-weight: 600; }
body #pd-call-timer { font-family: ui-monospace, monospace; font-size: 14px; padding: 3px 9px; border-radius: 6px; background: var(--color-surface); }

body #pd-copilot-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0; }
body .pd-copilot-label { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .05em; }
body #pd-copilot-armed { padding: 6px 14px; font-size: 11px; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0; }
body #pd-notes-section { border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0; }
body #pd-notes-section summary { padding: 6px 14px; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); cursor: pointer; text-transform: uppercase; letter-spacing: .05em; }
body #pd-contact-notes { padding: 0 14px 10px; font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; max-height: 120px; overflow-y: auto; }
body #pd-transcript-messages { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; min-height: 0; }
body #pd-transcript-empty { text-align: center; padding: 26px 14px; color: var(--color-text-secondary); }
body #pd-suggestions { flex-shrink: 0; max-height: 45%; overflow-y: auto; padding: 0 12px; }
body #pd-ask-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--color-border-subtle); flex-shrink: 0; }
body #pd-ask-form input { flex: 1; font-size: 12px; padding: 8px 10px; }
body #pd-ask-form button { font-size: 12px; padding: 8px 14px; white-space: nowrap; }

body #pd-disposition-panel { padding: 12px 14px; background: var(--color-surface-raised); border-top: 2px solid var(--color-primary); flex-shrink: 0; max-height: 45%; overflow-y: auto; }
body .pd-disposition-title { font-weight: 700; font-size: 12px; margin-bottom: 9px; }
body #pd-disposition-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
body .pd-disposition-save { display: flex; gap: 8px; }
body .pd-disposition-save input { flex: 1; font-size: 12px; padding: 8px; }
body .pd-disposition-save button { white-space: nowrap; padding: 8px 16px; font-size: 12px; }
body #pd-call-summary { margin-bottom: 10px; padding: 10px 12px; background: var(--color-surface); border-radius: 8px; font-size: 12px; line-height: 1.5; }
body #pd-status-indicator { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04); }

/* ------------------------------------------------------------------ trial banner */

/* ------------------------------------------------------------------ plan picker */
body .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
body .plan-card {
  text-align: left;
  border: 2px solid transparent;
  border-radius: 20px;
  padding: 18px;
  cursor: pointer;
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
body .plan-card.tile-0 { background: var(--tile-teal); }
body .plan-card.tile-1 { background: var(--tile-lavender); }
body .plan-card.tile-2 { background: var(--tile-pink); }
body .plan-card:hover { transform: translateY(-2px); }
body .plan-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); }
body .plan-card[data-unavailable] { opacity: 0.55; }
body .plan-name { font-weight: 800; font-size: 15px; }
body .plan-price { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0; }
body .plan-price span { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-left: 2px; }
body .plan-desc { font-size: 12px; color: var(--color-text-secondary); line-height: 1.45; }
body .plan-current { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--color-primary); color: #fff; }
body .plan-config { display: flex; flex-direction: column; gap: 10px; }
body .plan-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; background: var(--color-surface-raised); }
body .plan-addon { cursor: pointer; }
body .plan-addon input { width: 20px; height: 20px; accent-color: var(--color-primary); }
body .plan-row-title { font-weight: 700; font-size: 14px; }
body .plan-row-price { font-weight: 600; font-size: 12px; color: var(--color-primary); margin-left: 6px; }
body .plan-row-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; }
body .stepper { display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface); border-radius: 999px; padding: 4px; }
body .stepper button { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--color-surface-raised); color: var(--color-text); font-size: 18px; cursor: pointer; }
body .stepper button:hover { background: var(--color-primary); color: #fff; }
body .stepper span { min-width: 32px; text-align: center; font-weight: 800; font-size: 16px; }
body .plan-total { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 14px; background: var(--color-text); color: var(--color-background); }
body .plan-total .plan-row-sub { color: inherit; opacity: 0.7; }
body .plan-total-amount { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }

/* ------------------------------------------------------------------ onboarding wizard */
body .ob-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(22, 34, 46, 0.45);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
body .ob-sheet {
  width: min(1040px, 100%);
  height: min(680px, 100%);
  background: var(--color-surface);
  border-radius: 28px;
  box-shadow: var(--shadow-xl);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  overflow: hidden;
}
body .ob-rail {
  background:
    radial-gradient(300px 200px at 0% 0%, var(--tile-lavender) 0%, transparent 70%),
    radial-gradient(300px 260px at 100% 100%, var(--tile-teal) 0%, transparent 70%),
    var(--color-surface-raised);
  padding: 28px 22px;
  display: flex; flex-direction: column;
}
body .ob-brand { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; }
body .ob-brand-sub { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0 22px; }
body .ob-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
body .ob-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; cursor: pointer; }
body .ob-steps li:hover { background: rgba(255, 255, 255, 0.5); }
body .ob-steps li.current { background: var(--color-surface); box-shadow: var(--shadow-sm); }
body .ob-steps li strong { display: block; font-size: 14px; }
body .ob-steps li small { display: block; font-size: 12px; color: var(--color-text-secondary); line-height: 1.35; }
body .ob-dot { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
body .ob-steps li.current .ob-dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
body .ob-steps li.done .ob-dot { background: var(--color-success); border-color: var(--color-success); color: #fff; }
body .ob-skip { margin-top: auto; background: none; border: none; color: var(--color-text-secondary); font: inherit; font-size: 13px; cursor: pointer; text-align: left; padding: 8px 0; }
body .ob-skip:hover { color: var(--color-text); text-decoration: underline; }
body .ob-main { display: flex; flex-direction: column; min-height: 0; }
body .ob-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 26px 28px 10px; }
body .ob-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); }
body .ob-head h2 { margin: 4px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
body .ob-close { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: none; background: var(--color-surface-raised); font-size: 22px; cursor: pointer; color: var(--color-text-secondary); }
body .ob-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 28px; }
body .ob-foot { display: flex; justify-content: space-between; gap: 12px; padding: 16px 28px 22px; border-top: 1px solid var(--color-border-subtle); }
body .ob-note { padding: 14px 16px; border-radius: 14px; background: var(--tile-blue); font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
body .ob-note-warn { background: var(--tile-yellow); }
body .ob-note code { background: rgba(0, 0, 0, 0.06); padding: 1px 6px; border-radius: 6px; }
body .ob-done { padding: 18px; border-radius: 16px; background: var(--tile-green); font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
body .ob-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
body .ob-action { text-align: left; border: 2px solid var(--color-border); border-radius: 18px; padding: 18px; background: var(--color-surface); cursor: pointer; font: inherit; color: var(--color-text); transition: border-color 0.15s ease, transform 0.15s ease; }
body .ob-action:hover { border-color: var(--color-primary); transform: translateY(-2px); }
body .ob-action strong { display: block; font-size: 15px; margin-bottom: 5px; }
body .ob-action small { font-size: 12px; color: var(--color-text-secondary); line-height: 1.45; }
body .ob-number-form .form-label { display: block; margin-bottom: 7px; }

/* ------------------------------------------------------------------ phones and small tablets */
@media (max-width: 900px) {
  body .sidebar {
    width: 100%;
    height: 68px;
    top: auto;
    bottom: 0;
    transform: none !important;     /* the legacy ≤768px rule slid it off-screen */
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--rail-border);
    box-shadow: 0 -6px 20px rgba(22, 34, 46, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body .logo { display: none; }
  body .mobile-menu-toggle { display: none !important; }
  body .nav-menu { display: flex; flex-direction: row; overflow-x: auto; padding: 6px 8px; gap: 2px; flex: 1; scrollbar-width: none; }
  body .nav-menu::-webkit-scrollbar { display: none; }
  body .nav-section-label { display: none !important; }
  body .nav-item { width: 62px; height: 54px; margin: 0; flex: 0 0 auto; flex-direction: column; gap: 3px; border-radius: 14px; }
  body .nav-item span {
    display: block;
    position: static;
    transform: none;
    background: none;
    color: inherit;
    font-size: 9px;
    font-weight: 600;
    padding: 0;
    box-shadow: none;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body .nav-icon { width: 20px; height: 20px; }

  body .main-content { margin-left: 0; height: 100vh; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body .topbar { height: 58px; padding: 0 12px; gap: 8px; }
  body .topbar-workspace-label { display: none; }
  body .topbar-workspace-name, body .topbar-workspace .ui-select-trigger { max-width: 38vw; font-size: 13px; }
  body .topbar-plan .tier-action { display: none !important; }
  body .topbar-plan { padding: 0 4px; }
  body #topbar-settings-btn { display: none; }     /* it is in the account menu */
  body .topbar-menu { min-width: min(280px, calc(100vw - 24px)); }

  body .dashboard { padding: 18px 16px 32px; gap: 16px; }
  body .dashboard.is-locked { overflow-y: auto; }
  body .dashboard.is-locked > :last-child:not(.dashboard-header) { flex: 0 0 auto; }
  body .dashboard-title { font-size: 22px; }

  /* Every desktop grid collapses to one column; internal scroll panels grow */
  body .dashboard [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  body .dashboard [style*="max-height: calc(100vh"] { max-height: none !important; }
  body .dashboard [style*="height: calc(100vh"] { height: auto !important; }
  body .dashboard.is-locked [style*="grid-template-columns"] > .card { overflow: visible; }
  body .dashboard.is-locked [style*="grid-template-columns"] > .card > .card-body { overflow: visible; }
  body .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  body .stat-value { font-size: 24px; }
  body .form-grid-2, body .form-grid-3 { grid-template-columns: 1fr; }

  /* Dialer: columns stack; the dial pad and copilot become sections */
  body .pd-side { max-height: none; overflow: visible; }
  body .pd-side .form-input, body .pd-side .form-select, body .pd-side .ui-select-trigger, body .pd-side .ui-tags { min-height: 46px; font-size: 16px; }
  body .pd-shell { height: auto; }
  body .pd-columns { flex-direction: column; }
  /* Stacked, the call rail goes first: you came here to dial, not to read. */
  body .pd-col-call { order: -1; width: 100%; border-left: none; border-bottom: 1px solid var(--color-border-subtle); }
  body .pd-strip { gap: 8px; }
  body #pd-transcript { min-height: 320px; }
  /* On a phone the shell scrolls as one page rather than penning each
     column into its own scroll area. */
  body .pd-columns, body .pd-col-call, body .pd-col-copilot, body .pd-keypad-wrap { overflow: visible; }

  /* Filters wrap; inputs are finger-sized and do not zoom the page on iOS */
  body .form-input, body .form-select, body .form-textarea, body .ui-select-trigger, body .ui-tags-input { font-size: 16px; }
  body .form-input, body .form-select, body .form-textarea, body .ui-select-trigger, body .ui-tags { min-height: 46px; }
  body .btn { min-height: 44px; }
  body .btn-sm { min-height: 36px; }
  body .dashboard [style*="width: 220px"], body .dashboard [style*="width: 260px"], body .dashboard [style*="width: 200px"] { width: 100% !important; }

  /* Modals become bottom sheets */
  body .modal { align-items: flex-end !important; }
  body .modal-dialog {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0;
    max-height: 92vh;
    overflow: auto;
  }
  body .modal-content { border-radius: 24px 24px 0 0; }
  body .login-container { padding: 24px 20px; border-radius: 22px; }
  body .ob-overlay { padding: 0; align-items: flex-end; }
  body .ob-sheet { grid-template-columns: 1fr; height: 96vh; border-radius: 24px 24px 0 0; }
  body .ob-rail { padding: 18px 16px 10px; }
  body .ob-brand-sub { margin-bottom: 10px; }
  body .ob-steps { flex-direction: row; overflow-x: auto; gap: 4px; }
  body .ob-steps li { flex: 0 0 auto; padding: 6px 10px; }
  body .ob-steps li small { display: none; }
  body .ob-steps li:not(.current) strong { display: none; }
  body .ob-skip { display: none; }
  body .ob-head { padding: 16px 18px 6px; }
  body .ob-head h2 { font-size: 20px; }
  body .ob-body { padding: 10px 18px; }
  body .ob-foot { padding: 12px 18px 18px; }
}

/* Very small phones: one stat per row, tighter type */
@media (max-width: 420px) {
  body .stats-grid { grid-template-columns: 1fr !important; }
  body .dashboard-title { font-size: 20px; }
  body .nav-item { width: 56px; }
  /* The chip is the only place the plan is shown, so it stays -- just the
     badge, which is the part that says how long is left. */
  body .topbar-plan { padding: 0 2px; }
  body .topbar-plan .tier-badge { font-size: 10px; padding: 3px 7px; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body * { transition: none !important; animation: none !important; }
}

/* AI Agent page: two columns on desktop, one on phones */
@media (max-width: 900px) {
  body #agent-body .agent-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ------------------------------------------------------------------ settings: side menu + panels */
body .st-shell {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  width: 100%;
  max-width: 1160px;
}
body .st-nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
body .st-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
body .st-nav-btn svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .8; }
body .st-nav-btn:hover { background: var(--color-hover); color: var(--color-text); }
body .st-nav-btn.is-active { background: var(--color-primary-subtle); color: var(--color-primary); }
body .st-nav-btn.is-active svg { opacity: 1; }
body .st-nav-sep { height: 1px; background: var(--color-border-subtle); margin: 6px 8px; }

body .st-panes { min-width: 0; }
body .st-pane { display: none; flex-direction: column; gap: 20px; min-width: 0; }
body .st-pane.is-active { display: flex; }

body .st-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}
body .st-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
}
body .st-panel-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
body .st-panel-desc { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); margin: 4px 0 0; max-width: 640px; }
body .st-panel-actions { display: flex; gap: 8px; flex: 0 0 auto; }
body .st-panel-body { padding: 20px 24px 24px; }
body .st-panel-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-raised);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
body .st-foot-note { margin-right: auto; font-size: 12px; color: var(--color-text-tertiary); }
body .st-help { display: block; margin-top: 6px; font-size: 12px; color: var(--color-text-tertiary); }
body .st-link { font-size: 13px; font-weight: 600; text-decoration: none; }
body .st-link:hover { text-decoration: underline; }
body .st-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
body .st-form-grid > .form-group { margin-bottom: 0; }
body .st-panel.is-danger { border-color: var(--color-danger); }
body .st-panel.is-danger .st-panel-title { color: var(--color-danger); }
body .st-panel.is-danger .st-panel-body > div { background: var(--color-danger-subtle) !important; border: 0 !important; border-radius: var(--radius-md) !important; }

/* Legacy blocks moved into panels: drop the boxes they used to draw themselves */
body .st-panel-body > .settings-grid { gap: 20px 24px; }
body .st-panel-body #billing-info > div { background: var(--color-surface-raised) !important; border: 1px solid var(--color-border-subtle); }
body .st-panel-body #disposition-settings { max-width: none !important; }

/* CRM / calendar cards: logo + name on top, actions along the bottom. An old
   rule in index.html made these a single flex row, which squeezed the text
   into a column one word wide and pushed Connect off the card. */
body #crm-connectors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 0;
}
body #crm-connectors .integration-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 16px !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  transform: none !important;
  min-width: 0;
}
body #crm-connectors .integration-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
body #crm-connectors .integration-card.connected { border-color: var(--color-success); background: var(--color-success-subtle); }
body #crm-connectors .integration-card.connected::after { content: none; }
body #crm-connectors .integration-card > div:last-child { margin-top: auto !important; padding-top: 14px; }
body #crm-connectors .integration-card .btn { flex: 0 0 auto; }

@media (max-width: 900px) {
  body .st-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body .st-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body .st-nav::-webkit-scrollbar { display: none; }
  body .st-nav-btn { width: auto; }
  body .st-nav-sep { display: none !important; }
  body .st-panel-head { flex-direction: column; padding: 16px; }
  body .st-panel-body { padding: 16px; }
  body .st-panel-foot { padding: 12px 16px; }
  body .st-form-grid { grid-template-columns: minmax(0, 1fr); }
  body #billing-info { grid-template-columns: minmax(0, 1fr) !important; }
}
body #crm-connectors .crm-status {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-success);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
body #crm-connectors .integration-card .btn-sm { padding: 6px 12px; font-size: 12.5px; }
body #crm-connectors .crm-disconnect { background: transparent; border: 0; color: var(--color-danger); margin-left: auto; padding-left: 4px; padding-right: 4px; }
body #crm-connectors .crm-disconnect:hover { text-decoration: underline; background: transparent; }

/* ---------------------------------------------------- call assistant (beta) */
body .pd-beta, body .beta-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #fff4e0; color: #a05a00; border: 1px solid #f0c27a; cursor: help; vertical-align: middle; margin-left: 6px; line-height: 1.4; }
body .pd-assistant-ctl { gap: 6px; }
body #pd-agent-mode { padding: 2px 22px 2px 6px; font-size: 11px; width: auto; min-width: 0; }
body #pd-agent-actions { padding: 0 14px; flex-shrink: 0; max-height: 40%; overflow-y: auto; }
body .pd-action-card { margin: 0 0 10px; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); border-left: 3px solid #d97706; background: var(--color-surface); }
body .pd-action-card[data-status="done"] { border-left-color: var(--success); }
body .pd-action-card[data-status="failed"] { border-left-color: var(--error); }
body .pd-action-card[data-status="running"] { border-left-color: var(--color-primary); }
body .pd-action-card[data-status="dismissed"], body .pd-action-card[data-status="expired"] { opacity: .55; }
body .pd-action-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #a05a00; }
body .pd-action-card[data-status="done"] .pd-action-label { color: var(--success); }
body .pd-action-card[data-status="failed"] .pd-action-label { color: var(--error); }
body .pd-action-arg { margin-top: 6px; }
body .pd-action-arg label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); display: block; margin-bottom: 2px; }
body .pd-action-card textarea.form-input, body .pd-action-card input.form-input { font-size: 12px; padding: 6px 8px; width: 100%; }
body .pd-action-summary { margin-top: 8px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
body .pd-action-sources a { font-size: 11px; color: var(--color-primary); margin-right: 8px; }