/**
 * Benefit Path Design System (bp-system.css)
 * ==========================================
 * Universal UI primitives — compose any page from these, not region-specific CSS.
 *
 * Migration: shared styles live HERE. `.universal.css` is archived (not loaded).
 *
 * Use `.bp-*` for new markup. Legacy class names are aliased on the same rules
 * during migration (e.g. `.bp-toolbar` = `.contacts-page-toolbar`).
 *
 * Primitives:
 *   1.  Tokens
 *   2.  Base reset (+ scrollbars)
 *   3.  App shell (dash, main, dashboard stage)
 *   4.  Sidebar (nav rail, agency switcher, collapse, mobile)
 *   5.  Topbar (crumbs, bell, user menu)
 *   6.  Navigation (links, dropdowns)
 *   7.  Chrome chip (icons, buttons: secondary / primary / mini)
 *   8.  Card panel
 *   9.  Form fields (+ checkbox, custom select, datetime picker)
 *  10.  Pill / badge / tag chip
 *  11.  Tag input (combobox field + picker)
 *  12.  Toggle switch
 *  13.  Flyout menu
 *  14.  Data table
 *  15.  Modal shell
 *  16.  Page rhythm (content, header, stack)
 *  17.  Tab strip
 *  18.  Metric grid + stat tile
 *  19.  Pagination
 *  20.  Toast notifications
 *  21.  Toolbar + search field
 *  22.  Panel head (flush card sub-header)
 *  23.  Split view (2- or 3-pane resizable columns — `.bp-split--3col`)
 *  24.  Selection bar (bulk actions — "N selected")
 *  25.  Progress track
 *  26.  Inline banner
 *  27.  Auth layout
 *  28.  Loading (spinner)
 *  29.  Route progress bar
 *  30.  Empty / upgrade gate
 *  31.  Utilities
 *  32.  Calendar (generic `cal-*` grid, events, toolbar — reusable on any schedule UI)
 *  33.  Analytics & charts (pie/line/bar, detail-stack typography)
 *  34.  Messaging bubbles (thread + incoming/outgoing chat bubbles)
 *  35.  Panel resizer (split-view drag gutter + grip)
 *
 * NOT here (feature layout — thin wrappers only in universal until split):
 *  path-builder canvas, survey funnel steps, booking embed chrome (`.bw-*`).
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */

:root {
  --c-primary: #5050ff;
  --c-primary-hover: #4338ca;
  --c-primary-light: #eef2ff;
  --primary-color: var(--c-primary);
  --c-primary-color: var(--primary-color);
  --c-accent: #06b6d4;
  --c-bg: #f9fafb;
  --c-surface: #fff;
  --c-border: #e5e7eb;
  --c-text: #111827;
  --c-text-muted: #6b7280;
  --c-text-light: #9ca3af;
  --c-success: #10b981;
  --c-warning: #f59e0b;
  --c-danger: #ef4444;
  --c-info: #3b82f6;

  --sidebar-w: 240px;
  --sidebar-collapsed-w: 56px;
  --sidebar-inset: .5rem;
  --sidebar-main-offset: calc(var(--sidebar-inset) + var(--sidebar-w) + var(--sidebar-inset));
  --sidebar-main-offset-collapsed: calc(var(--sidebar-inset) + var(--sidebar-collapsed-w) + var(--sidebar-inset));
  --topbar-h: 56px;
  --topbar-stack-offset: calc(var(--sidebar-inset) + var(--topbar-h) + var(--sidebar-inset));
  --sidebar-dur: 280ms;
  --bp-shell-bg: var(--c-surface);
  --bp-page-bg: var(--bp-card-section-bg);
  --selection-bg: color-mix(in srgb, var(--c-primary) 28%, #fff);
  --selection-text: var(--c-text);
  --scrollbar-size: 10px;
  --scrollbar-thumb: #4f46e5;
  --scrollbar-thumb-hover: color-mix(in srgb, var(--c-primary) 58%, #fff);
  --scrollbar-track: rgba(17, 24, 39, .06);

  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 200ms;

  --bp-card-bg: var(--c-bg);
  --bp-card-border: var(--c-border);
  --bp-card-radius: var(--radius-lg);
  --bp-card-inset: .5rem;
  --bp-card-section-radius: calc(var(--bp-card-radius) - 4px);
  --bp-card-section-bg: color-mix(in srgb, var(--c-border) 40%, var(--c-bg));
  --bp-card-header-bg: var(--bp-card-section-bg);
  --bp-card-footer-bg: var(--bp-card-section-bg);
  --bp-card-stack-gap: 1.5rem;
  --bp-page-padding: 1.5rem;

  --btn-chrome-bg: var(--bp-card-section-bg);
  --btn-chrome-bg-hover: color-mix(in srgb, var(--c-border) 58%, var(--c-bg));
  --btn-surface-bg: var(--bp-card-bg);
  --btn-surface-bg-hover: color-mix(in srgb, var(--c-border) 24%, var(--bp-card-bg));

  --bp-field-border: var(--c-border);
  --bp-field-height: 2.375rem;
  --bp-field-padding-x: .75rem;
  --bp-field-select-padding-right: 2.35rem;
  --bp-field-font-size: .875rem;
  --bp-field-line-height: 1.25;
  --bp-shadow: 0 2px 3px -1px color-mix(in srgb, #111827 11%, transparent);
  --bp-shadow-hover: 0 3px 5px -1px color-mix(in srgb, #111827 15%, transparent);
  --bp-shadow-focus: 0 3px 7px -1px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 24%, transparent);

  /* Legacy aliases — prefer --bp-shadow */
  --bp-field-shadow: var(--bp-shadow);
  --bp-field-shadow-hover: var(--bp-shadow-hover);
  --bp-field-shadow-focus: var(--bp-shadow-focus);
  --bp-card-shadow: var(--bp-shadow);
  --bp-card-shadow-hover: var(--bp-shadow-hover);
  --bp-chrome-shadow: var(--bp-shadow);
  --bp-chrome-shadow-hover: var(--bp-shadow-hover);
  --bp-chrome-shadow-active: var(--bp-shadow-hover);
  --bp-pill-shadow: var(--bp-shadow);
  --bp-dropdown-shadow: var(--bp-shadow);
  --bp-btn-shadow-primary: var(--bp-shadow);
  --bp-btn-shadow-primary-hover: var(--bp-shadow-hover);
  --bp-shell-shadow: var(--bp-shadow);
  --bp-bar-shadow: var(--bp-shadow);
  --bp-bar-shadow-up: var(--bp-shadow);

  --bp-overlay-scrim: color-mix(in srgb, #030712 58%, transparent);
  --bp-overlay-blur: blur(6px) saturate(1.05);

  --btn-font-size: .875rem;
  --btn-font-weight: 500;
  --btn-line-height: 1.25;
  --btn-padding-y: .5rem;
  --btn-padding-x: 1rem;
  --btn-min-height: 2.125rem;
  --btn-gap: .375rem;
  --btn-mini-font-size: .8125rem;
  --btn-mini-padding-y: .35rem;
  --btn-mini-padding-x: .75rem;
  --btn-mini-min-height: 1.75rem;
  --btn-sm-font-size: var(--btn-mini-font-size);
  --btn-sm-padding-y: var(--btn-mini-padding-y);
  --btn-sm-padding-x: var(--btn-mini-padding-x);
  --btn-sm-min-height: var(--btn-mini-min-height);

  --bp-icon-size-xs: 15px;
  --bp-icon-size-sm: 17px;
  --bp-icon-size-md: 20px;
  --bp-icon-size-lg: 24px;
  --bp-icon-size: var(--bp-icon-size-md);

  --cal-grid-line: color-mix(in srgb, var(--c-border) 48%, transparent);
  --cal-time-slot-h: 48px;
  --cal-time-gutter-w: 56px;
  --cal-resource-color: var(--cal-agent-color, var(--c-primary));

  --bp-chevron-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  --bp-checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1.2 5.2 4.4 8.4 10.8 1.6'/%3E%3C/svg%3E");
  --bp-checkbox-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2'%3E%3Crect fill='%23fff' width='10' height='2' rx='1'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  --c-bg: #111827;
  --c-surface: #1f2937;
  --c-border: #374151;
  --c-text: #f3f4f6;
  --c-text-muted: #9ca3af;
  --c-text-light: #6b7280;
  --c-primary-light: color-mix(in srgb, var(--c-primary) 25%, #111827);
  --bp-card-bg: var(--c-surface);
  --bp-card-section-bg: color-mix(in srgb, var(--c-bg) 68%, var(--bp-card-bg));
  --btn-chrome-bg-hover: color-mix(in srgb, var(--c-bg) 42%, var(--bp-card-section-bg));
  --bp-shadow: 0 2px 3px -1px color-mix(in srgb, #000 34%, transparent);
  --bp-shadow-hover: 0 3px 5px -1px color-mix(in srgb, #000 42%, transparent);
  --bp-shadow-focus: 0 3px 7px -1px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 32%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--c-primary) 72%, #1f2937);
  --selection-bg: color-mix(in srgb, var(--c-primary) 42%, #111827);
  --selection-text: #f9fafb;
  --scrollbar-track: hsla(0, 0%, 100%, .06);
  --bp-chevron-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ── 2. Base reset ───────────────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, sans-serif;
  color: var(--c-text);
  background: var(--bp-page-bg, var(--c-bg));
  line-height: 1.5;
  min-height: 100dvh;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ── 3. App shell ──────────────────────────────────────────────────────── */

.bp-shell,
.dash {
  display: flex;
  min-height: 100dvh;
}

.bp-main,
.main {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-main-offset);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-left var(--sidebar-dur) var(--ease);
}

.dashboard-stage,
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dashboard-stage {
  position: relative;
  min-height: 0;
  padding-bottom: var(--sidebar-inset);
}

.page-loading-veil {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: var(--bp-page-bg, var(--c-bg));
  opacity: 1;
  pointer-events: auto;
  transition: opacity .24s var(--ease);
}

.dashboard-stage.page-ready .page-loading-veil {
  opacity: 0;
  pointer-events: none;
}

html.nav-loading .dashboard-stage.page-ready .page-loading-veil {
  opacity: 1;
  transition: none;
}

/* Dashboard banner notifications — reusable slot for any page-level alert */
#dashboard-banner-slot:not(:empty),
#setup-banner-slot:not(:empty),
.dashboard-banner-slot:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: var(--sidebar-inset) var(--sidebar-inset) 0;
}

.dashboard-banner,
.setup-banner {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .9rem 1rem;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  background: var(--bp-card-section-bg);
  color: var(--c-text);
  font-size: .875rem;
  line-height: 1.45;
  box-shadow: var(--bp-shadow);
  animation: banner-slide-in .28s ease-out;
}

.setup-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--c-warning);
}

.setup-banner-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.setup-banner-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  flex: 1;
  min-width: 0;
  padding-top: .08rem;
}

.setup-banner-message {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
}

.setup-banner-title {
  font-weight: 600;
  color: var(--c-text);
}

.setup-banner-text {
  color: var(--c-text-muted);
  font-weight: 500;
}

.setup-banner-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .38rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  font-family: inherit;
  color: var(--c-text);
  background: var(--bp-card-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--bp-shadow);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.setup-banner-link:hover {
  color: var(--c-text);
  background: var(--c-bg);
  box-shadow: var(--bp-shadow-hover);
}

.setup-banner-link:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

.setup-banner-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  color: var(--c-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease);
}

.setup-banner-close:hover {
  color: var(--c-text);
}

.setup-banner-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
}

.setup-banner.setup-banner--incomplete,
.dashboard-banner.dashboard-banner--warning,
.dashboard-banner.dashboard-banner--incomplete {
  background: color-mix(in srgb, var(--c-warning) 11%, var(--bp-card-section-bg));
}

.setup-banner.setup-banner--incomplete .setup-banner-icon,
.dashboard-banner.dashboard-banner--warning .dashboard-banner-icon,
.dashboard-banner.dashboard-banner--warning .setup-banner-icon,
.dashboard-banner.dashboard-banner--incomplete .dashboard-banner-icon,
.dashboard-banner.dashboard-banner--incomplete .setup-banner-icon {
  color: var(--c-warning);
}

.setup-banner.setup-banner--success,
.dashboard-banner.dashboard-banner--success {
  background: color-mix(in srgb, var(--c-success) 11%, var(--bp-card-section-bg));
}

.setup-banner.setup-banner--success .setup-banner-icon,
.dashboard-banner.dashboard-banner--success .dashboard-banner-icon,
.dashboard-banner.dashboard-banner--success .setup-banner-icon {
  color: var(--c-success);
}

.setup-banner.setup-banner--info,
.dashboard-banner.dashboard-banner--info {
  background: color-mix(in srgb, var(--c-info) 11%, var(--bp-card-section-bg));
}

.setup-banner.setup-banner--info .setup-banner-icon,
.dashboard-banner.dashboard-banner--info .dashboard-banner-icon,
.dashboard-banner.dashboard-banner--info .setup-banner-icon {
  color: var(--c-info);
}

.setup-banner.setup-banner--danger,
.dashboard-banner.dashboard-banner--danger {
  background: color-mix(in srgb, var(--c-danger) 11%, var(--bp-card-section-bg));
}

.setup-banner.setup-banner--danger .setup-banner-icon,
.dashboard-banner.dashboard-banner--danger .dashboard-banner-icon,
.dashboard-banner.dashboard-banner--danger .setup-banner-icon {
  color: var(--c-danger);
}

.setup-banner.setup-banner--success .setup-banner-link,
.dashboard-banner.dashboard-banner--success .setup-banner-link {
  color: color-mix(in srgb, var(--c-success) 78%, var(--c-text));
  box-shadow: 0 2px 3px -1px color-mix(in srgb, var(--c-success) 24%, transparent);
}

.setup-banner.setup-banner--success .setup-banner-link:hover,
.dashboard-banner.dashboard-banner--success .setup-banner-link:hover {
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-success) 8%, var(--bp-card-bg));
  box-shadow: 0 3px 5px -1px color-mix(in srgb, var(--c-success) 30%, transparent);
}

[data-theme="dark"] .setup-banner.setup-banner--incomplete,
[data-theme="dark"] .dashboard-banner.dashboard-banner--warning,
[data-theme="dark"] .dashboard-banner.dashboard-banner--incomplete {
  background: color-mix(in srgb, var(--c-warning) 16%, var(--bp-card-section-bg));
}


[data-theme="dark"] .setup-banner.setup-banner--success,
[data-theme="dark"] .dashboard-banner.dashboard-banner--success {
  background: color-mix(in srgb, var(--c-success) 16%, var(--bp-card-section-bg));
}


[data-theme="dark"] .setup-banner.setup-banner--info,
[data-theme="dark"] .dashboard-banner.dashboard-banner--info {
  background: color-mix(in srgb, var(--c-info) 16%, var(--bp-card-section-bg));
}


[data-theme="dark"] .setup-banner.setup-banner--success .setup-banner-link,
[data-theme="dark"] .dashboard-banner.dashboard-banner--success .setup-banner-link {
  color: color-mix(in srgb, var(--c-success) 72%, #fff);
}

[data-theme="dark"] .setup-banner.setup-banner--success .setup-banner-link:hover,
[data-theme="dark"] .dashboard-banner.dashboard-banner--success .setup-banner-link:hover {
  color: #fff;
  background: color-mix(in srgb, var(--c-success) 14%, var(--bp-card-bg));
}

@keyframes banner-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 4. Sidebar ────────────────────────────────────────────────────────── */

.bp-sidebar,
.sidebar {
  position: fixed;
  top: calc(var(--impersonation-banner-h, 0px) + var(--sidebar-inset));
  left: var(--sidebar-inset);
  bottom: var(--sidebar-inset);
  width: var(--sidebar-w);
  background: var(--bp-shell-bg);
  border: none;
  border-radius: var(--bp-card-radius);
  box-shadow: var(--bp-shadow);
  display: flex;
  flex-direction: column;
  z-index: 40;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), width var(--sidebar-dur) var(--ease), box-shadow var(--sidebar-dur) var(--ease);
}

.dash.agency-menu-open .sidebar {
  overflow: visible;
}

.bp-sidebar-head,
.sidebar-head {
  height: var(--topbar-h);
  padding: 0 1rem;
  border: none;
  box-shadow: none;
  background: var(--bp-shell-bg);
  border-radius: var(--bp-card-radius) var(--bp-card-radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-shrink: 0;
  position: relative;
  overflow-x: hidden;
}

.sidebar-logo {
  height: 32px;
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
  opacity: 1;
}

.sidebar-icon,
.sidebar-logo {
  transition: opacity var(--sidebar-dur) var(--ease);
}

.sidebar-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 28px;
  width: 28px;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sidebar nav {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}

.sidebar-foot {
  flex-shrink: 0;
  border: none;
  box-shadow: none;
  background: var(--bp-shell-bg);
  border-radius: 0 0 var(--bp-card-radius) var(--bp-card-radius);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .4rem .65rem .55rem;
  overflow: visible;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bp-overlay-scrim);
  backdrop-filter: var(--bp-overlay-blur);
  -webkit-backdrop-filter: var(--bp-overlay-blur);
  z-index: 35;
}

.sidebar-fab {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 50;
  width: 48px;
  height: 48px;
  border-radius: var(--bp-card-radius);
  border: 1px solid transparent;
  background: var(--bp-card-bg);
  box-shadow: var(--bp-shadow);
  color: var(--c-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.sidebar-fab:hover {
  box-shadow: var(--bp-shadow-hover);
}

.sidebar-fab:active {
  transform: scale(.92);
}

.sidebar-collapse-toggle svg {
  transition: transform var(--sidebar-dur) var(--ease);
}

/* Agency switcher (sidebar foot) */

.sidebar-agency-switch {
  flex-shrink: 0;
  padding: 0;
  overflow: visible;
  transition: padding var(--sidebar-dur) var(--ease);
}

.sidebar-agency-picker {
  position: relative;
  overflow: visible;
}

.sidebar-agency-trigger {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-height: 2.35rem;
  padding: .42rem .55rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bp-card-bg, var(--c-surface));
  color: var(--c-text);
  font-size: .8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--bp-shadow);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.sidebar-agency-trigger:hover,
.sidebar-agency-trigger[aria-expanded="true"] {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  box-shadow: var(--bp-shadow-hover);
}

.sidebar-agency-trigger:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

.sidebar-agency-trigger-icon {
  width: var(--bp-icon-size-lg);
  height: var(--bp-icon-size-lg);
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: none;
  box-shadow: var(--bp-shadow);
  background: var(--c-bg);
}

.sidebar-agency-trigger-label {
  flex: 1;
  min-width: 0;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  opacity: 1;
  transition: max-width var(--sidebar-dur) var(--ease), opacity var(--sidebar-dur) var(--ease);
}

.sidebar-agency-trigger-caret {
  width: var(--bp-icon-size-xs);
  height: var(--bp-icon-size-xs);
  max-width: var(--bp-icon-size-xs);
  flex-shrink: 0;
  color: var(--c-text-muted);
  opacity: 1;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), max-width var(--sidebar-dur) var(--ease), opacity var(--sidebar-dur) var(--ease);
}

.sidebar-agency-trigger[aria-expanded="true"] .sidebar-agency-trigger-caret {
  transform: rotate(180deg);
  color: var(--c-primary-color, var(--c-primary));
}

.sidebar-agency-menu[hidden] {
  display: none !important;
}

.sidebar-agency-menu:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .4rem;
}

.sidebar-agency-menu {
  position: absolute;
  left: calc(100% + .5rem);
  right: auto;
  bottom: 0;
  margin: 0;
  min-width: 14rem;
  max-width: min(18rem, calc(100vw - 5rem));
  max-height: min(320px, 55vh);
  z-index: 60;
  overflow: hidden;
}

.sidebar-agency-menu-search {
  flex-shrink: 0;
  padding: .45rem .5rem .4rem;
  border: none;
  background: transparent;
}

.form-input.sidebar-agency-search-input {
  padding-left: 2rem;
  font-size: .8125rem;
}

.sidebar-agency-list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent;
}

.sidebar-agency-list > li {
  margin: 0;
  padding: 0;
}

.sidebar-agency-empty {
  padding: .55rem .65rem;
  font-size: .8125rem;
  color: var(--c-text-muted);
  font-style: italic;
  text-align: center;
}

.sidebar-agency-option-icon {
  width: var(--bp-icon-size-lg);
  height: var(--bp-icon-size-lg);
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: none;
  box-shadow: var(--bp-shadow);
  background: var(--c-bg);
}

.sidebar-agency-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-agency-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .5rem .7rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-text);
  font-size: .8125rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.sidebar-agency-option.is-active,
.sidebar-agency-option:hover {
  color: var(--c-primary-color, var(--c-primary));
  background: var(--c-primary-light);
}

.sidebar-agency-option.is-active {
  font-weight: 600;
}

.sidebar-agency-option-item {
  margin: 0;
  padding: 0;
}

.sidebar-agency-option-row {
  display: flex;
  align-items: stretch;
  gap: .15rem;
}

.sidebar-agency-option-row .sidebar-agency-option {
  flex: 1;
  min-width: 0;
}

.sidebar-agency-pin-btn {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.sidebar-agency-pin-btn:hover,
.sidebar-agency-pin-btn:focus-visible {
  color: #f59e0b;
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  outline: none;
}

.sidebar-agency-pin-btn.is-pinned {
  color: #f59e0b;
}

.sidebar-agency-section-divider {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem .25rem;
  margin: .15rem 0 0;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  pointer-events: none;
}

.sidebar-agency-section-divider::before,
.sidebar-agency-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--c-text-muted) 22%, transparent);
}

/* Collapsed sidebar — width animates on .sidebar-collapsed; labels/icons settle on .sidebar-icons-only */

.dash.sidebar-collapsed .main {
  margin-left: var(--sidebar-main-offset-collapsed);
}

.dash.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-w);
  overflow-x: hidden;
}

.dash.agency-menu-open.sidebar-collapsed .sidebar {
  overflow: visible;
}

.dash.sidebar-collapsed .sidebar-collapse-toggle svg {
  transform: rotate(180deg);
}

.dash.sidebar-collapsed.sidebar-icons-only .sidebar-head {
  height: var(--topbar-h);
  padding: .25rem 0;
  justify-content: center;
}

.dash.sidebar-collapsed.sidebar-icons-only .sidebar-logo {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .1s var(--ease) var(--sidebar-dur), width 0s linear var(--sidebar-dur), height 0s linear var(--sidebar-dur);
}

.dash.sidebar-collapsed.sidebar-icons-only .sidebar-agency-switch {
  padding: 0;
  overflow: visible;
}

.dash.sidebar-collapsed.sidebar-icons-only .sidebar-agency-trigger {
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: auto;
  padding: .48rem 0;
  border-color: transparent;
  border-radius: var(--radius);
  box-shadow: none;
  background: transparent;
}

.dash.sidebar-collapsed.sidebar-icons-only .sidebar-agency-trigger:hover,
.dash.sidebar-collapsed.sidebar-icons-only .sidebar-agency-trigger[aria-expanded="true"] {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  box-shadow: var(--bp-shadow-hover);
}

.dash.sidebar-collapsed.sidebar-icons-only .sidebar-agency-trigger-caret,
.dash.sidebar-collapsed.sidebar-icons-only .sidebar-agency-trigger-label {
  flex: 0 0 0;
  width: 0;
  max-width: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-width .1s var(--ease) var(--sidebar-dur), width .1s var(--ease) var(--sidebar-dur), opacity .1s var(--ease) var(--sidebar-dur);
}

.dash.sidebar-collapsed.sidebar-icons-only .sidebar-agency-trigger-icon {
  width: var(--bp-icon-size-md);
  height: var(--bp-icon-size-md);
}

.dash.sidebar-collapsed.sidebar-icons-only .sidebar-icon {
  opacity: 1;
}

.dash.sidebar-collapsed.sidebar-icons-only .nav-menu {
  padding: .55rem .35rem;
  gap: .18rem;
}

.dash.sidebar-collapsed.sidebar-icons-only .nav-dropdown-toggle,
.dash.sidebar-collapsed.sidebar-icons-only .nav-link {
  justify-content: center;
  gap: 0;
  padding: .48rem 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--sidebar-dur) var(--ease), margin var(--sidebar-dur) var(--ease), gap 0s linear var(--sidebar-dur);
}

.dash.sidebar-collapsed.sidebar-icons-only .nav-label,
.dash.sidebar-collapsed.sidebar-icons-only .version {
  flex: 0 0 0;
  width: 0;
  max-width: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-width .1s var(--ease) var(--sidebar-dur), width .1s var(--ease) var(--sidebar-dur), opacity .1s var(--ease) var(--sidebar-dur), padding .1s var(--ease) var(--sidebar-dur);
}

.dash.sidebar-collapsed.sidebar-icons-only .version {
  padding-left: 0;
  padding-right: 0;
}

.dash.sidebar-collapsed.sidebar-icons-only .nav-dropdown-arrow,
.dash.sidebar-collapsed.sidebar-icons-only .nav-submenu {
  display: none;
}

.dash.sidebar-collapsed.sidebar-icons-only .nav-link .badge {
  position: absolute;
  top: .15rem;
  right: .1rem;
  margin-left: 0;
}

.dash.sidebar-no-transition .main,
.dash.sidebar-no-transition .nav-label,
.dash.sidebar-no-transition .nav-link,
.dash.sidebar-no-transition .sidebar,
.dash.sidebar-no-transition .sidebar-agency-switch,
.dash.sidebar-no-transition .sidebar-collapse-toggle svg,
.dash.sidebar-no-transition .sidebar-icon,
.dash.sidebar-no-transition .sidebar-logo,
.dash.sidebar-no-transition .version {
  transition: none !important;
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(calc(-100% - var(--sidebar-inset)));
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.open {
    display: block;
  }

  .dash.sidebar-collapsed .main,
  .main {
    margin-left: 0;
  }

  .dash.sidebar-collapsed .sidebar {
    width: var(--sidebar-w);
  }

  .sidebar-fab {
    display: flex;
  }

  .sidebar-collapse-toggle,
  .topbar-save-status {
    display: none;
  }
}

/* ── 5. Topbar ─────────────────────────────────────────────────────────── */

.bp-topbar,
.topbar {
  flex-shrink: 0;
  height: var(--topbar-h);
  margin: var(--sidebar-inset);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  border: none;
  border-radius: var(--bp-card-radius);
  box-shadow: var(--bp-shadow);
  background: var(--bp-shell-bg);
  position: sticky;
  top: calc(var(--impersonation-banner-h, 0px) + var(--sidebar-inset));
  z-index: 20;
}

.topbar-left {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
}

.bp-topbar-crumbs,
.topbar-crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-width: 0;
  align-items: center;
  font-size: .8125rem;
  font-weight: 500;
}

.bp-topbar-crumb,
.topbar-crumb {
  color: var(--c-text-muted);
  text-decoration: none;
  padding: .22rem .5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  box-shadow: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.topbar-crumb:hover {
  color: var(--c-text);
  background: var(--c-bg);
  box-shadow: var(--bp-shadow);
}

.bp-topbar-crumb.current,
.topbar-crumb.current {
  color: var(--c-primary-color, var(--c-primary));
  font-weight: 600;
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  box-shadow: var(--bp-shadow-hover);
}

.topbar-crumb-sep {
  color: var(--c-text-muted);
  font-size: .72rem;
  opacity: .65;
  user-select: none;
}

.topbar-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.topbar-save-status {
  margin: 0;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: .28rem .65rem;
  text-align: right;
  white-space: nowrap;
  box-shadow: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.topbar-save-status:not(:empty) {
  background: var(--bp-card-bg);
  box-shadow: var(--bp-shadow);
}

.topbar-bell-btn,
.topbar-user-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bp-card-bg, var(--c-surface));
  color: var(--c-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  box-shadow: var(--bp-shadow);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.topbar-bell-btn:hover,
.topbar-user-btn:hover {
  color: var(--c-text);
  background: var(--c-bg);
  box-shadow: var(--bp-shadow-hover);
}

.topbar-bell-btn[aria-expanded="true"],
.topbar-user-btn[aria-expanded="true"] {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  box-shadow: var(--bp-shadow-hover);
}

.topbar-bell-btn:focus-visible,
.topbar-user-btn:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

.topbar-bell-btn[aria-expanded="true"]:focus-visible,
.topbar-user-btn[aria-expanded="true"]:focus-visible {
  box-shadow: var(--bp-shadow-hover), 0 0 0 3px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
}

.topbar-bell {
  position: relative;
}

.topbar-bell-btn {
  width: 2rem;
}

.topbar-bell-btn svg {
  width: var(--bp-icon-size-sm);
  height: var(--bp-icon-size-sm);
}

.topbar [data-notification].has-notification::after {
  box-shadow: 0 0 0 2px var(--bp-card-header-bg);
}

.topbar-bell-menu {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 1rem);
  z-index: 50;
}

.topbar-bell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .85rem;
}

.topbar-bell-title {
  font-weight: 600;
  font-size: .9rem;
  color: var(--c-text);
}

.topbar-bell-list {
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.topbar-bell-item {
  position: relative;
  padding: .75rem .85rem .75rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) 88%, transparent);
  cursor: default;
}

.topbar-bell-item:hover {
  background: color-mix(in srgb, var(--c-primary-light) 40%, var(--bp-card-bg));
}

.topbar-bell-item.is-unread {
  background: color-mix(in srgb, var(--c-primary-light) 55%, var(--bp-card-bg));
}

.topbar-bell-item.is-unread::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}

.topbar-bell-item-title {
  font-weight: 600;
  font-size: .9rem;
  color: var(--c-text);
  margin: 0 0 .2rem;
}

.topbar-bell-item-body {
  font-size: .85rem;
  color: var(--c-text);
  line-height: 1.35;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.topbar-bell-item-time {
  margin-top: .35rem;
  font-size: .72rem;
  color: var(--c-text-muted);
}

.topbar-bell-empty {
  padding: 1.25rem .85rem;
  text-align: center;
  font-size: .85rem;
  color: var(--c-text-muted);
}

.topbar-user {
  position: relative;
}

.topbar-user-btn {
  padding: .2rem .45rem .2rem .2rem;
  height: auto;
  min-height: 2rem;
}

.topbar-user-initials,
.topbar-user-photo {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: calc(var(--radius) - 2px);
  flex-shrink: 0;
}

.topbar-user-photo {
  object-fit: cover;
  border: none;
  box-shadow: var(--bp-shadow);
  background: var(--c-bg);
}

.topbar-user-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  color: var(--c-primary-color, var(--c-primary));
  font-size: .68rem;
  font-weight: 700;
  border: none;
  box-shadow: var(--bp-shadow-hover);
}

.topbar-user-caret {
  width: var(--bp-icon-size-xs);
  height: var(--bp-icon-size-xs);
  color: var(--c-text-muted);
  opacity: .9;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.topbar-user-btn[aria-expanded="true"] .topbar-user-caret {
  transform: rotate(180deg);
  color: var(--c-primary-color, var(--c-primary));
  opacity: 1;
}

/* ── 6. Navigation ─────────────────────────────────────────────────────── */

.bp-nav-menu,
.nav-menu {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .55rem .65rem;
}

.bp-nav-link,
.nav-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .48rem .65rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), padding var(--sidebar-dur) var(--ease), margin var(--sidebar-dur) var(--ease), gap var(--sidebar-dur) var(--ease);
}

.bp-nav-link:hover,
.nav-link:hover {
  color: var(--c-text);
  background: var(--c-bg);
  box-shadow: var(--bp-shadow);
}

.bp-nav-link.is-active,
.bp-nav-link.active,
.nav-link.active {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  border-color: transparent;
  font-weight: 600;
  box-shadow: var(--bp-shadow-hover);
}

.nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
}

.nav-link.active:focus-visible {
  box-shadow: var(--bp-shadow-hover), 0 0 0 3px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
}

.nav-icon {
  width: var(--bp-icon-size-md);
  height: var(--bp-icon-size-md);
  flex-shrink: 0;
}

.nav-icon-mask {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: var(--nav-icon);
  mask-image: var(--nav-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  max-width: 12rem;
  opacity: 1;
  transition: max-width var(--sidebar-dur) var(--ease), opacity var(--sidebar-dur) var(--ease);
}

.nav-link .badge {
  margin-left: auto;
}

.nav-dropdown-toggle {
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.nav-dropdown-arrow {
  margin-left: auto;
  width: var(--bp-icon-size-xs);
  height: var(--bp-icon-size-xs);
  flex-shrink: 0;
  color: var(--c-text-muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-dropdown.is-open .nav-dropdown-arrow {
  transform: rotate(180deg);
  color: var(--c-primary-color, var(--c-primary));
}

.nav-dropdown.is-open > .nav-dropdown-toggle:not(.active) {
  color: var(--c-text);
  background: var(--c-bg);
  box-shadow: var(--bp-shadow);
}

.nav-submenu {
  display: none;
  list-style: none;
  padding: .15rem 0 .1rem .75rem;
  margin: .12rem 0 0 .5rem;
  border-left: none;
  background: transparent;
}

.nav-dropdown.is-open .nav-submenu {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.nav-sublink {
  margin: 0 !important;
  padding: .4rem .55rem !important;
  font-size: .78rem !important;
  overflow: hidden;
}

.nav-sublink.active {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  border-color: transparent;
  font-weight: 600;
  box-shadow: var(--bp-shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
  .main,
  .nav-label,
  .nav-link,
  .sidebar,
  .sidebar-agency-switch,
  .sidebar-collapse-toggle svg,
  .sidebar-icon,
  .sidebar-logo {
    transition: none !important;
    animation: none !important;
  }
}

/* ── 7. Chrome chip (shared interactive surface) ─────────────────────────── */

/* Universal icon sizes — use .bp-icon or size modifiers on SVG/img */

.bp-icon,
.icon {
  width: var(--bp-icon-size, var(--bp-icon-size-md));
  height: var(--bp-icon-size, var(--bp-icon-size-md));
  flex-shrink: 0;
  display: block;
}

.bp-icon--xs,
.icon-xs {
  width: var(--bp-icon-size-xs);
  height: var(--bp-icon-size-xs);
}

.bp-icon--sm,
.icon-sm {
  width: var(--bp-icon-size-sm);
  height: var(--bp-icon-size-sm);
}

.bp-icon--md,
.icon-md {
  width: var(--bp-icon-size-md);
  height: var(--bp-icon-size-md);
}

.bp-icon--lg,
.icon-lg {
  width: var(--bp-icon-size-lg);
  height: var(--bp-icon-size-lg);
}

/* Button variants: secondary (default), primary, mini */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-size-padding-y, var(--btn-padding-y)) var(--btn-size-padding-x, var(--btn-padding-x));
  min-height: var(--btn-size-min-height, var(--btn-min-height));
  font-size: var(--btn-size-font-size, var(--btn-font-size));
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
  box-sizing: border-box;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn svg,
.btn .bp-icon,
.btn .icon {
  width: var(--bp-icon-size-md);
  height: var(--bp-icon-size-md);
  flex-shrink: 0;
}

/* Secondary — chrome chip (default for .btn and explicit .btn-secondary) */
.btn,
.btn-secondary {
  background: var(--btn-chrome-bg);
  color: var(--c-text);
  box-shadow: var(--bp-shadow);
}

.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
  background: var(--btn-chrome-bg-hover);
  box-shadow: var(--bp-shadow-hover);
}

.btn:focus-visible,
.btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

/* On page background — card/input surface (toolbar chrome, back links, …) */
.btn-surface,
.page-content :is(
  .page-header,
  .contacts-page-header,
  .messages-page-header,
  .cp-page-header,
  .analytics-page-header,
  .contacts-page-toolbar,
  .messages-toolbar-actions,
  .analytics-page-toolbar
) :is(.btn, a.btn, .contacts-actions-btn):where(
  :not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.btn-ghost):not(.btn-dashed)
) {
  background: var(--btn-surface-bg);
  box-shadow: var(--bp-shadow);
}

.btn-surface:hover:not(:disabled),
.page-content :is(
  .page-header,
  .contacts-page-header,
  .messages-page-header,
  .cp-page-header,
  .analytics-page-header,
  .contacts-page-toolbar,
  .messages-toolbar-actions,
  .analytics-page-toolbar
) :is(.btn, a.btn, .contacts-actions-btn):where(
  :not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.btn-ghost):not(.btn-dashed)
):hover:not(:disabled) {
  background: var(--btn-surface-bg-hover);
  box-shadow: var(--bp-shadow-hover);
}

.btn-surface:focus-visible,
.page-content :is(
  .page-header,
  .contacts-page-header,
  .messages-page-header,
  .cp-page-header,
  .analytics-page-header,
  .contacts-page-toolbar,
  .messages-toolbar-actions,
  .analytics-page-toolbar
) :is(.btn, a.btn, .contacts-actions-btn):where(
  :not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.btn-ghost):not(.btn-dashed)
):focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

/* Primary — filled brand CTA */
.btn-primary {
  background: var(--c-primary);
  color: #fff;
  box-shadow: var(--bp-shadow);
}

.btn-primary:hover:not(:disabled) {
  background: var(--c-primary-hover);
  box-shadow: var(--bp-shadow-hover);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

/* Mini — compact toolbar / inline actions (.btn-sm is legacy alias) */
.btn-mini,
.btn-sm {
  --btn-size-padding-y: var(--btn-mini-padding-y);
  --btn-size-padding-x: var(--btn-mini-padding-x);
  --btn-size-font-size: var(--btn-mini-font-size);
  --btn-size-min-height: var(--btn-mini-min-height);
}

.btn-mini svg,
.btn-sm svg,
.btn-mini .bp-icon,
.btn-sm .bp-icon,
.btn-mini .icon,
.btn-sm .icon {
  width: var(--bp-icon-size-sm);
  height: var(--bp-icon-size-sm);
}

.btn-danger {
  background: var(--c-danger);
  color: #fff;
  box-shadow: var(--bp-shadow);
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
  box-shadow: var(--bp-shadow-hover);
}

.btn-warning {
  background: var(--c-warning);
  color: #fff;
  box-shadow: var(--bp-shadow);
}

.btn-warning:hover:not(:disabled) {
  background: #d97706;
  box-shadow: var(--bp-shadow-hover);
}

.btn-ghost {
  background: transparent;
  box-shadow: none;
  color: var(--c-text-muted);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--btn-chrome-bg);
  box-shadow: var(--bp-shadow);
  color: var(--c-text);
}

.btn-dashed,
.bp-btn-dashed {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--c-primary) 45%, var(--c-border));
  color: var(--c-primary-color, var(--c-primary));
  box-shadow: none;
}

.btn-dashed:hover:not(:disabled),
.bp-btn-dashed:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-primary-light) 40%, var(--bp-card-bg));
  box-shadow: var(--bp-shadow);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-min-height);
  height: var(--btn-min-height);
  padding: 0;
  min-height: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-chrome-bg);
  box-shadow: var(--bp-shadow);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn-icon:hover {
  background: var(--btn-chrome-bg-hover);
  box-shadow: var(--bp-shadow-hover);
  color: var(--c-text);
}

.btn-icon:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

.btn-icon svg,
.btn-icon .bp-icon,
.btn-icon .icon {
  width: var(--bp-icon-size-md);
  height: var(--bp-icon-size-md);
}

.btn-mini.btn-icon,
.btn-sm.btn-icon {
  width: var(--btn-mini-min-height);
  height: var(--btn-mini-min-height);
}

.btn:disabled,
.btn-secondary:disabled,
.btn-primary:disabled,
.btn-danger:disabled,
.btn-warning:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Other chrome-chip controls (tabs, meatballs, card chrome) */

.analytics-tab,
.order-menu-btn,
.acct-meatball-btn,
.card-header,
.card-footer,
.bp-panel-head,
.messages-panel-head {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-chrome-bg);
  box-shadow: var(--bp-shadow);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.order-menu-btn,
.acct-meatball-btn,
.btn.order-menu-btn {
  min-width: 2rem;
  height: 2rem;
  padding: 0 .5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--c-text-muted);
}

.order-menu-btn:hover:not(:disabled),
.acct-meatball-btn:hover:not(:disabled) {
  color: var(--c-text);
  background: var(--btn-chrome-bg-hover);
  box-shadow: var(--bp-shadow-hover);
}

/* ── 8. Card panel ─────────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bp-card-bg);
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  box-shadow: var(--bp-shadow);
}

.card-header {
  position: relative;
  z-index: 1;
  margin: var(--bp-card-inset) var(--bp-card-inset) 0;
  padding: .65rem .9rem;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.35;
  color: var(--c-text);
  flex-shrink: 0;
}

.card-header--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.card-body {
  position: relative;
  z-index: 0;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
}

.card-body--flush {
  padding: 0;
}

.card-footer {
  position: relative;
  z-index: 1;
  margin: var(--bp-card-inset);
  padding: .65rem .9rem;
  flex-shrink: 0;
}

.card-body--flush + .card-footer {
  margin-top: 0;
}

.card--interactive:hover {
  box-shadow: var(--bp-shadow-hover);
}

.card--tabs .card-body {
  padding: .5rem .75rem;
}

.card-body--flush .table-wrap,
.card-body--flush .contacts-table-wrap {
  padding: 0 var(--bp-card-inset) var(--bp-card-inset);
}

.card-body--flush > .table-wrap:first-child,
.card-body--flush > .contacts-table-wrap:first-child {
  padding-top: var(--bp-card-inset);
}

/* ── 9. Form fields ────────────────────────────────────────────────────── */

.form-group {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  position: relative;
}

.form-label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-text);
}

.form-input,
.form-select,
.form-textarea {
  box-sizing: border-box;
  border: 1px solid var(--bp-field-border);
  border-radius: var(--radius);
  font-size: var(--bp-field-font-size);
  font-family: inherit;
  color: var(--c-text);
  background-color: var(--bp-card-bg);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.form-input,
.form-select,
select.form-select {
  height: var(--bp-field-height);
  min-height: var(--bp-field-height);
  padding: 0 var(--bp-field-padding-x);
  line-height: var(--bp-field-line-height);
}

.form-textarea {
  height: auto;
  min-height: 5.25rem;
  padding: .5rem .75rem;
  line-height: 1.5;
  resize: vertical;
}

.form-select,
select.form-select {
  appearance: none;
  padding-right: var(--bp-field-select-padding-right);
  cursor: pointer;
  background-image: var(--bp-chevron-down);
  background-repeat: no-repeat;
  background-position: right .65rem center;
  background-size: 1rem 1rem;
}

.form-input:hover:not(:disabled),
.form-select:hover:not(:disabled),
.form-textarea:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--c-primary) 32%, var(--bp-field-border));
  background-color: color-mix(in srgb, var(--bp-card-bg) 97%, var(--c-text) 3%);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--c-primary-color, var(--c-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  cursor: not-allowed;
  opacity: .72;
  background-color: color-mix(in srgb, var(--bp-card-bg) 84%, var(--c-border));
}

.form-select:has(option[value=""]:checked) {
  color: var(--c-text-muted);
}

.form-select optgroup,
.form-select option {
  padding: .5rem .75rem;
  background-color: var(--bp-card-bg);
  color: var(--c-text);
}

select[multiple]:not(.website-url-full-select) {
  padding: .5rem .65rem;
  border: 1px solid var(--bp-field-border);
  border-radius: var(--radius);
  background-color: var(--bp-card-bg);
  color: var(--c-text);
  min-height: 6rem;
  box-shadow: none;
}

select[multiple]:not(.website-url-full-select):focus {
  outline: none;
  border-color: var(--c-primary-color, var(--c-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
}

.form-input.error,
.form-select.error {
  border-color: var(--c-danger);
  box-shadow: none;
}

.form-hint {
  font-size: .75rem;
  color: var(--c-text-muted);
}

.form-error {
  font-size: .75rem;
  color: var(--c-danger);
}

.form-checkbox,
input[type="checkbox"] {
  --checkbox-accent: var(--c-primary-color, var(--c-primary));
  --checkbox-size: 1.0625rem;
  appearance: none;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  min-width: var(--checkbox-size);
  min-height: var(--checkbox-size);
  margin: 0;
  cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--checkbox-accent) 32%, var(--c-border));
  border-radius: 5px;
  background-color: var(--bp-card-bg);
  box-shadow: var(--bp-shadow);
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form-checkbox:hover:not(:disabled):not(:focus-visible),
input[type="checkbox"]:hover:not(:disabled):not(:focus-visible) {
  box-shadow: var(--bp-shadow-hover);
}

.form-checkbox:checked,
input[type="checkbox"]:checked {
  background-color: var(--checkbox-accent);
  border-color: var(--checkbox-accent);
  background-image: var(--bp-checkbox-check);
  background-repeat: no-repeat;
  background-position: center;
  background-size: .7rem .7rem;
}

.form-checkbox:indeterminate,
input[type="checkbox"]:indeterminate {
  background-color: var(--checkbox-accent);
  border-color: var(--checkbox-accent);
  background-image: var(--bp-checkbox-indeterminate);
  background-repeat: no-repeat;
  background-position: center;
  background-size: .55rem auto;
}

.form-checkbox:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow), 0 0 0 3px color-mix(in srgb, var(--checkbox-accent) 22%, transparent);
}

.modal-check-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  user-select: none;
}

.form-radio,
input[type="radio"] {
  --radio-accent: var(--c-primary-color, var(--c-primary));
  --radio-size: 18px;
  --radio-dot-size: 6px;
  position: relative;
  appearance: none;
  box-sizing: border-box;
  width: var(--radio-size);
  height: var(--radio-size);
  min-width: var(--radio-size);
  min-height: var(--radio-size);
  margin: 0;
  cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--radio-accent) 32%, var(--c-border));
  border-radius: 50%;
  background-color: var(--bp-card-bg);
  box-shadow: var(--bp-shadow);
  flex-shrink: 0;
  vertical-align: middle;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form-radio::before,
input[type="radio"]::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--radio-dot-size);
  height: var(--radio-dot-size);
  margin: auto;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform var(--dur) var(--ease);
  pointer-events: none;
}

.form-radio:hover:not(:disabled):not(:focus-visible),
input[type="radio"]:hover:not(:disabled):not(:focus-visible) {
  box-shadow: var(--bp-shadow-hover);
}

.form-radio:checked,
input[type="radio"]:checked {
  background-color: var(--radio-accent);
  border-color: var(--radio-accent);
}

.form-radio:checked::before,
input[type="radio"]:checked::before {
  transform: scale(1);
}

.form-radio:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow), 0 0 0 3px color-mix(in srgb, var(--radio-accent) 22%, transparent);
}

.form-radio:disabled,
input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: .72;
}

/* Card-style radio options — 2FA delivery, settings choices, etc. */
.bp-radio-stack {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.bp-radio-option {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--bp-field-border);
  border-radius: var(--radius);
  background: var(--bp-card-bg);
  box-shadow: var(--bp-shadow);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.bp-radio-option:hover {
  border-color: color-mix(in srgb, var(--c-primary) 32%, var(--bp-field-border));
  box-shadow: var(--bp-shadow-hover);
}

.bp-radio-option:has(input:focus-visible) {
  border-color: var(--c-primary-color, var(--c-primary));
  box-shadow: var(--bp-shadow), 0 0 0 3px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
}

.bp-radio-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 38%, var(--c-border));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  box-shadow: var(--bp-shadow-hover);
}

.bp-radio-option input[type="radio"] {
  margin-top: .15rem;
}

.bp-radio-option__body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.bp-radio-option__title {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.35;
  color: var(--c-text);
}

.bp-radio-option__meta {
  display: block;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--c-text-muted);
}

.bp-radio-option:has(input:checked) .bp-radio-option__title {
  color: var(--c-primary-color, var(--c-primary));
}

.form-select-wrap {
  position: relative;
  display: block;
  width: 100%;
}

/* Toolbar / header selects — never width:100% (collapses in flex rows) */
.form-select-wrap.form-select-wrap--toolbar,
.form-select-wrap.contacts-toolbar-control,
.form-select-wrap.bp-toolbar-control,
.bp-dtp-wrap.bp-dtp-wrap--toolbar,
.bp-dtp-wrap.contacts-toolbar-control {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: .8rem;
  --bp-field-line-height: 1.25;
  display: inline-flex;
  width: auto;
  min-width: 10.5rem;
  max-width: 100%;
  flex: 0 0 auto;
}

.form-select-wrap.form-select-wrap--toolbar .form-select-trigger,
.form-select-wrap.contacts-toolbar-control .form-select-trigger,
.form-select-wrap.bp-toolbar-control .form-select-trigger,
.bp-dtp-wrap.bp-dtp-wrap--toolbar .bp-dtp-trigger,
.bp-dtp-wrap.contacts-toolbar-control .bp-dtp-trigger {
  height: var(--bp-field-height);
  min-height: var(--bp-field-height);
  font-size: var(--bp-field-font-size);
  line-height: var(--bp-field-line-height);
}

.form-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/* Never clip the wrap — only the native <select> inside it */
.form-select-wrap.form-select-native {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--bp-field-height);
  overflow: visible !important;
  clip: auto !important;
}

.form-select-trigger {
  display: flex;
  align-items: center;
  gap: .35rem;
  width: 100%;
  height: var(--bp-field-height);
  min-height: var(--bp-field-height);
  padding: 0 var(--bp-field-padding-x);
  border: 1px solid var(--bp-field-border);
  border-radius: var(--radius);
  font: 400 var(--bp-field-font-size)/var(--bp-field-line-height) inherit;
  color: var(--c-text);
  background-color: var(--bp-card-bg);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

.form-select-trigger.is-placeholder .form-select-trigger-label {
  color: var(--c-text-muted);
}

.form-select-trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-select-trigger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--c-primary) 32%, var(--bp-field-border));
  background-color: color-mix(in srgb, var(--bp-card-bg) 97%, var(--c-text) 3%);
}

.form-select-trigger:focus-visible,
.form-select-wrap.is-open .form-select-trigger,
.bp-dtp-wrap.is-open .bp-dtp-trigger {
  outline: none;
  border-color: var(--c-primary-color, var(--c-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
}

.form-select-wrap.is-open .form-select-trigger-caret {
  transform: rotate(180deg);
}

.form-select-menu {
  display: none;
  min-width: 100%;
  max-height: min(280px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.form-select-menu.form-select-menu--floating {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 400;
  min-width: 10.5rem;
  max-height: min(280px, calc(100vh - 16px));
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.form-select-group-label {
  padding: .35rem .55rem .15rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.bp-dtp-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.bp-dtp-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

.bp-dtp-panel {
  display: none;
  flex-direction: column;
  gap: .65rem;
  min-width: min(100%, 320px);
  padding: .75rem;
}

.bp-dtp-panel.open {
  display: flex;
}

.bp-dtp-panel.bp-dtp-panel--floating {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 10050;
  max-height: min(420px, calc(100vh - 16px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bp-dtp-panel.bp-dtp-panel--floating .bp-dtp-cal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -.75rem -.75rem 0;
  padding: .75rem .75rem 0;
  background: var(--bp-card-bg);
}

.bp-dtp-panel--date-only .bp-dtp-time-head,
.bp-dtp-panel--date-only .bp-dtp-time-columns {
  display: none;
}

.bp-dtp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.bp-dtp-month-label {
  flex: 1;
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-text);
}

.bp-dtp-nav-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.bp-dtp-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .15rem;
}

.bp-dtp-dow span {
  text-align: center;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: .1rem 0;
}

.bp-dtp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .2rem;
}

.bp-dtp-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  max-width: 2.35rem;
  margin: 0 auto;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bp-dtp-day--empty {
  visibility: hidden;
  pointer-events: none;
}

.bp-dtp-day:hover:not(:disabled):not(.is-selected) {
  background: var(--btn-chrome-bg);
  box-shadow: var(--bp-shadow);
}

.bp-dtp-day.is-today:not(.is-selected) {
  font-weight: 700;
  color: var(--c-primary-color, var(--c-primary));
}

.bp-dtp-day.is-disabled,
.bp-dtp-day:disabled {
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
}

.bp-dtp-time-head {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding-top: .15rem;
}

.bp-dtp-panel--time-only {
  padding-top: .65rem;
}

.bp-dtp-panel--time-only .bp-dtp-time-head {
  padding-top: 0;
}

.bp-dtp-time-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}

.bp-dtp-time-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: .25rem;
}

.bp-dtp-time-col-label {
  text-align: center;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.bp-dtp-time-col-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-height: 156px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .15rem;
  border-radius: var(--bp-card-section-radius);
  background: var(--bp-card-section-bg);
}

.bp-dtp-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .45rem .35rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  color: var(--c-text-muted);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bp-dtp-time:hover:not(:disabled):not(.is-selected) {
  color: var(--c-text);
  background: var(--btn-chrome-bg-hover);
  box-shadow: var(--bp-shadow-hover);
}

.bp-dtp-time.is-disabled,
.bp-dtp-time:disabled {
  opacity: .38;
  cursor: not-allowed;
  box-shadow: none;
}

.contacts-custom-range .bp-dtp-wrap,
.analytics-custom-range .bp-dtp-wrap {
  width: auto;
  min-width: 10.5rem;
  flex: 0 0 auto;
}

.contacts-custom-range .bp-dtp-trigger,
.analytics-custom-range .bp-dtp-trigger {
  height: 2.3rem;
  min-height: 2.3rem;
  font-size: .8rem;
}

.bp-dtp-day,
.bp-dtp-time {
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bp-dtp-day.is-selected,
.bp-dtp-time.is-selected {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--btn-chrome-bg));
  font-weight: 600;
  box-shadow: var(--bp-shadow-hover);
}

.bp-caret,
.form-select-trigger-caret {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  pointer-events: none;
  background: var(--bp-chevron-down) center / contain no-repeat;
}

.bp-dropdown-trigger[aria-expanded="true"] .bp-caret,
.user-role-btn[aria-expanded="true"] .bp-caret,
.form-select-wrap.is-open .bp-caret {
  transform: rotate(180deg);
}

/* Inline help icon — settings labels, form hints */
.tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--c-text-muted);
  cursor: help;
  flex-shrink: 0;
  line-height: 1;
}

.tip svg {
  width: 13px;
  height: 13px;
}

.tip:after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  background: var(--bp-shell-bg);
  color: var(--c-text);
  border: 1px solid transparent;
  font-size: .75rem;
  font-weight: 500;
  padding: .4rem .65rem;
  border-radius: var(--radius);
  box-shadow: var(--bp-shadow);
  white-space: normal;
  min-width: 200px;
  max-width: 440px;
  text-align: center;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transform: translateX(-50%) translateY(2px);
  z-index: 200;
}

.tip:hover:after,
.tip:focus-visible:after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Floating tooltip — sidebar labels, truncated cells (tooltip.js) */
.bp-tooltip {
  position: fixed;
  z-index: 10050;
  max-width: min(16rem, calc(100vw - 1rem));
  padding: .42rem .68rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
  background: var(--bp-shell-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--bp-shadow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.bp-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bp-tooltip.bp-tooltip--sidebar.is-visible {
  transform: translateX(0);
}

.bp-tooltip.bp-tooltip--sidebar {
  transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .bp-tooltip,
  .tip:after {
    transition: none;
  }
}

/* ── 10. Pill chips (badges / tags / status) ────────────────────────────── */

.tag,
.tag-pill,
.contacts-pill,
.badge-info,
.badge-primary,
.badge-neutral,
.contacts-unsold-badge {
  --bp-chip-color: var(--c-primary);
  --bp-chip-fg: var(--c-primary);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .02em;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
  border: none;
  background: color-mix(in srgb, var(--bp-chip-color) 18%, var(--c-surface));
  color: var(--bp-chip-fg);
  box-shadow: var(--bp-shadow);
}

.contacts-unsold-badge {
  --bp-chip-color: var(--c-warning, #d97706);
  --bp-chip-fg: var(--c-warning, #b45309);
}

.contacts-high-intent-badge,
.contacts-appointment-badge,
.contacts-t65-badge,
.contacts-lead-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: .3rem .45rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
  border: none;
  background: color-mix(in srgb, var(--bp-chip-color) 18%, var(--c-surface));
  color: var(--bp-chip-fg);
  box-shadow: var(--bp-shadow);
  flex-shrink: 0;
  margin-left: .1rem;
}

.contacts-high-intent-badge img,
.contacts-appointment-badge img,
.contacts-t65-badge img,
.contacts-lead-order-badge img {
  flex-shrink: 0;
}

.contacts-high-intent-badge__label,
.contacts-appointment-badge__label {
  display: none;
}

.contacts-name-badges {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex-shrink: 0;
  margin-left: auto;
}

.contacts-pill--success,
.tag-success {
  --bp-chip-color: #22c55e;
  --bp-chip-fg: #15803d;
}

.contacts-pill--warning {
  --bp-chip-color: #f59e0b;
  --bp-chip-fg: #b45309;
}

.contacts-pill--muted {
  --bp-chip-color: var(--c-text-muted);
  --bp-chip-fg: var(--c-text-muted);
}

.contacts-pill--state {
  --bp-chip-color: var(--c-border);
  --bp-chip-fg: var(--c-text);
  padding: .2rem .65rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: color-mix(in srgb, var(--c-border) 55%, var(--c-surface));
  color: var(--c-text);
  cursor: default;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  background: var(--c-danger);
  color: #fff;
  box-shadow: var(--bp-shadow);
}

/* ── 11. Tag input (combobox field + picker) ───────────────────────────── */

.tag-input {
  position: relative;
}

.tag-input-field {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.tags-inline-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.tags-inline-row .tag-pill,
.tags-inline-row .contacts-pill,
.tags-inline-row .tag-input-add-wrap {
  flex-shrink: 0;
}

.tag-input-field .tag-pill--draft {
  flex: 0 0 auto;
}

.tag-pill--draft {
  width: max-content;
  max-width: 14rem;
}

.tag-pill-edit-wrap {
  display: inline-grid;
  min-width: 4ch;
  max-width: 100%;
  vertical-align: top;
}

.tag-pill-edit-wrap::after {
  content: attr(data-value) "\200b";
  visibility: hidden;
  white-space: pre;
  font: inherit;
  grid-area: 1 / 1;
  min-width: 4ch;
}

.tag-pill-edit {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  grid-area: 1 / 1;
}

.tag-input-add-wrap {
  position: relative;
  flex-shrink: 0;
}

.tag-input-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(.6rem + .8rem * 1.25);
  height: calc(.6rem + .8rem * 1.25);
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  box-shadow: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.tag-input-add-btn:hover,
.tag-input-add-wrap.is-open .tag-input-add-btn {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  box-shadow: var(--bp-shadow-hover);
}

.tag-input-add-btn:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

.tag-input-search {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  background: transparent;
  font-size: .875rem;
  color: var(--c-text);
  padding: .1rem 0;
}

.tag-input-search::placeholder {
  color: var(--c-text-muted);
}

.tag-input-option.selected {
  color: var(--c-text-muted);
  background: transparent;
  pointer-events: none;
}

.tag-picker-menu {
  position: fixed;
  min-width: 14rem;
  max-width: min(18rem, calc(100vw - 1rem));
  max-height: min(280px, 50vh);
  z-index: 400;
  overflow: hidden;
  gap: .35rem;
  padding: .4rem;
}

.tag-picker-menu[hidden] {
  display: none !important;
}

.tag-picker-menu-search {
  flex-shrink: 0;
}

.tag-picker-section-label {
  flex-shrink: 0;
  padding: .15rem .55rem 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.tag-picker-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tag-picker-option {
  justify-content: flex-start;
}

.tag-picker-menu-footer {
  flex-shrink: 0;
  padding-top: .2rem;
  margin-top: .1rem;
  border-top: 1px solid color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
}

.tag-picker-create-btn {
  width: 100%;
  justify-content: flex-start;
  font-weight: 600;
}

/* ── 12. Toggle switch ──────────────────────────────────────────────────── */

.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
  user-select: none;
}

.toggle-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
  box-shadow: var(--bp-shadow);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--bp-shadow);
  transition: transform var(--dur) var(--ease);
}

.toggle-switch input:checked + .toggle-track {
  background: var(--c-primary-color, var(--c-primary));
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(18px);
}

.toggle-label {
  font-size: .875rem;
  color: var(--c-text);
}

/* ── 13. Flyout menu (universal dropdown) ─────────────────────────────────── */
/*
 * One menu primitive for meatballs, profile, export, comboboxes, role pickers, etc.
 *
 * Wrap:  .bp-menu-wrap  (+ legacy wrappers)
 * Panel: .bp-menu       (+ .bp-dropdown, .topbar-user-menu, .order-menu-dropdown, …)
 * Row:   .bp-menu-item  (+ .topbar-user-menu-item, .order-menu-item, .dropdown-item, …)
 * Head:  .bp-menu-header (+ .topbar-user-menu-version, .topbar-bell-header title row)
 */

.bp-menu-wrap,
.bp-dropdown-wrap,
.order-menu-wrap,
.acct-meatball-wrap,
.contacts-export-wrap,
.user-role-wrap,
.topbar-user,
.topbar-bell {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.topbar-user,
.topbar-bell {
  display: inline-block;
}

/* Panel chrome */
.bp-menu,
.bp-dropdown,
.acct-meatball-menu,
.cal-contact-results,
.contacts-export-menu,
.modal-combobox-results,
.order-menu-dropdown,
.pb-meatball-menu,
.sidebar-agency-menu,
.tag-input-dropdown,
.tag-picker-menu,
.form-select-menu,
.bp-dtp-panel,
.topbar-bell-menu,
.topbar-user-menu,
.user-role-menu {
  --bp-menu-pad: .4rem;
  background: var(--bp-card-bg);
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  box-shadow: var(--bp-shadow);
  overflow: hidden;
  color: var(--c-text);
}

/* Scrollable list panels — keep rounded chrome, allow option list scroll */
.form-select-menu,
.tag-input-dropdown,
.modal-combobox-results,
.cal-contact-results {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Default anchored flyout (meatball, profile, export, …) */
.bp-menu,
.bp-dropdown,
.acct-meatball-menu,
.contacts-export-menu,
.order-menu-dropdown,
.pb-meatball-menu,
.topbar-user-menu,
.user-role-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  min-width: 168px;
}

.bp-menu.is-open,
.bp-dropdown:not([hidden]),
.bp-dropdown.is-open,
.acct-meatball-menu.is-open,
.contacts-export-menu:not([hidden]),
.modal-combobox-results.open,
.order-menu-dropdown.is-open,
.pb-meatball-menu.is-open,
.tag-input-dropdown.open,
.tag-picker-menu:not([hidden]),
.form-select-menu.open,
.topbar-bell-menu:not([hidden]),
.topbar-user-menu:not([hidden]),
.user-role-menu.is-open,
.bp-menu.bp-menu--floating.is-open,
.order-menu-dropdown.bp-menu--floating.is-open,
.acct-meatball-menu.bp-menu--floating.is-open,
.pb-meatball-menu.bp-menu--floating.is-open {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: var(--bp-menu-pad);
}

.bp-menu.bp-menu--floating.is-open,
.order-menu-dropdown.bp-menu--floating.is-open,
.acct-meatball-menu.bp-menu--floating.is-open,
.pb-meatball-menu.bp-menu--floating.is-open {
  position: fixed;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  z-index: 400;
}

.bp-menu[hidden],
.bp-dropdown[hidden],
.contacts-export-menu[hidden],
.topbar-bell-menu[hidden],
.topbar-user-menu[hidden],
.user-role-menu[hidden] {
  display: none !important;
}

/* Flush panel — no inner pad (notifications); items use .bp-menu-header + body */
.bp-menu--flush,
.topbar-bell-menu {
  --bp-menu-pad: 0;
  padding: 0;
  gap: 0;
}

.bp-menu-header,
.topbar-user-menu-version,
.topbar-bell-header {
  flex-shrink: 0;
  margin: calc(-1 * var(--bp-menu-pad, .4rem)) calc(-1 * var(--bp-menu-pad, .4rem)) .15rem;
  padding: .45rem .75rem;
  background: var(--bp-card-footer-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
  font-size: .72rem;
  color: var(--c-text-muted);
}

.topbar-bell-header {
  margin: 0;
  padding: .65rem .85rem;
  font-size: inherit;
  color: inherit;
}

.bp-menu-header-title,
.topbar-bell-title {
  font-weight: 600;
  font-size: .9rem;
  color: var(--c-text);
}

/* Menu rows */
.bp-menu-item,
.acct-menu-item,
.bp-dropdown-item,
.cal-contact-option,
.client-result-item,
.dropdown-item,
.order-menu-item,
.pb-meatball-menu > button,
.tag-input-option,
.topbar-user-menu-item,
.user-role-option,
.form-select-option {
  display: block;
  width: 100%;
  padding: .5rem .7rem;
  border: none;
  border-radius: calc(var(--radius) + 2px);
  background: transparent;
  color: var(--c-text);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  box-sizing: border-box;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bp-menu-item:hover,
.acct-menu-item:hover,
.bp-dropdown-item:hover,
.cal-contact-option:hover,
.client-result-item:hover,
.dropdown-item:hover,
.order-menu-item:hover,
.pb-meatball-menu > button:hover,
.tag-input-option.highlighted,
.tag-input-option:hover,
.topbar-user-menu-item:hover,
.user-role-option:hover:not(:disabled),
.form-select-option:hover {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
}

.bp-menu-item:focus-visible,
.acct-menu-item:focus-visible,
.bp-dropdown-item:focus-visible,
.cal-contact-option:focus-visible,
.client-result-item:focus-visible,
.dropdown-item:focus-visible,
.order-menu-item:focus-visible,
.pb-meatball-menu > button:focus-visible,
.tag-input-option:focus-visible,
.topbar-user-menu-item:focus-visible,
.user-role-option:focus-visible,
.form-select-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
}

.bp-menu-item--danger,
.bp-dropdown-item--danger,
.dropdown-item--danger,
.order-menu-item--danger,
.pb-meatball-menu > .pb-menu-delete,
.user-role-option--danger {
  color: var(--c-danger);
}

.bp-menu-item--danger:hover,
.bp-dropdown-item--danger:hover,
.dropdown-item--danger:hover,
.order-menu-item--danger:hover,
.pb-meatball-menu > .pb-menu-delete:hover,
.user-role-option--danger:hover:not(:disabled) {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 8%, var(--bp-card-bg));
}

.bp-menu-item.is-active,
.bp-dropdown-item.is-active,
.sidebar-agency-option.is-active,
.form-select-option.is-active,
.tag-input-option.is-active {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  font-weight: 600;
}

.bp-menu-empty,
.bp-dropdown-empty,
.tag-input-empty {
  padding: .55rem .65rem;
  font-size: .8125rem;
  color: var(--c-text-muted);
  font-style: italic;
}

.bp-menu-divider,
.bp-dropdown-divider,
.user-role-menu-divider {
  height: 1px;
  margin: .25rem .35rem;
  border: none;
  background: color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
}

/* Trigger open state */
.bp-menu-trigger[aria-expanded="true"],
.bp-dropdown-trigger[aria-expanded="true"],
.contacts-export-wrap:has(.contacts-export-menu:not([hidden])) #contacts-actions-btn,
.contacts-export-wrap:has(.contacts-export-menu:not([hidden])) .contacts-actions-btn,
.user-role-wrap:has(.user-role-menu.is-open) .user-role-btn {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  box-shadow: var(--bp-shadow-hover);
}

.bp-menu-wrap:has(.bp-menu.is-open) .order-menu-btn,
.bp-menu-wrap:has(.order-menu-dropdown.is-open) .order-menu-btn,
.order-menu-wrap:has(.order-menu-dropdown.is-open) .order-menu-btn,
.acct-meatball-wrap:has(.order-menu-dropdown.is-open) .order-menu-btn,
.pb-meatball-wrap:has(.order-menu-dropdown.is-open) .order-menu-btn {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--btn-chrome-bg));
  box-shadow: var(--bp-shadow-hover);
}

.topbar-user-menu,
.topbar-bell-menu {
  z-index: 50;
}

.topbar-user-menu {
  top: calc(100% + .45rem);
}

/* Combobox / tag dropdown positioning (not right-aligned meatball) */
.tag-input-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  z-index: 200;
  min-width: 0;
}

.tag-picker-menu {
  position: fixed;
  min-width: 14rem;
  max-width: min(18rem, calc(100vw - 1rem));
  max-height: min(280px, 50vh);
  z-index: 400;
}

.modal-combobox-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
}

.cal-contact-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  z-index: 100;
}

/* ── 14. Tables ───────────────────────────────────────────────────────────── */

.table-wrap,
.contacts-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  font-size: .875rem;
  border-collapse: separate;
  border-spacing: 0;
}

.table th {
  font-weight: 600;
  color: var(--c-text-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: middle;
}

.table th,
.table td {
  padding: .625rem .75rem;
  text-align: left;
}

.table td {
  border-bottom: 1px solid var(--c-border);
}

/* Table head — single inset band + chrome shadow (matches card-header) */
.table thead {
  filter: drop-shadow(var(--bp-shadow));
}

.table thead th {
  border: none;
  border-bottom: none;
  border-radius: 0;
  padding-bottom: calc(.625rem + var(--bp-card-inset));
  background: var(--bp-card-footer-bg);
  box-shadow: none;
}

.table thead th:first-child {
  border-top-left-radius: var(--bp-card-section-radius);
  border-bottom-left-radius: var(--bp-card-section-radius);
  padding-left: 1rem;
}

.table thead th:last-child {
  border-top-right-radius: var(--bp-card-section-radius);
  border-bottom-right-radius: var(--bp-card-section-radius);
}

.table td:first-child {
  padding-left: 1rem;
}

.table tbody tr:hover td {
  background: var(--c-primary-light);
}

.contacts-table {
  width: 100%;
  table-layout: fixed
}

.contacts-table td,
.contacts-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle
}

.contacts-table td.contacts-table-check-col,
.contacts-table th.contacts-table-check-col {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  padding-left: .75rem;
  padding-right: .35rem;
  text-align: left;
  vertical-align: middle
}

.contacts-table-name-cell {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  container-type: inline-size;
  container-name: contact-name
}

.contacts-table-name-cell--head {
  gap: .65rem
}

.contacts-table-name-heading {
  font-weight: 600;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit
}

.contacts-table #select-page-cb,
.contacts-table .analytics-version-check,
.contacts-table .contact-check,
.contacts-table input[type=checkbox] {
  --checkbox-size: 1rem
}

.contacts-table-check-col input[type=checkbox],
.contacts-table-name-cell input[type=checkbox] {
  display: block;
  margin: 0;
  flex-shrink: 0;
}

.contacts-table-check-col {
  text-align: center;
  vertical-align: middle
}

.table.contacts-table th {
  font-weight: 600;
  color: var(--c-text-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em
}

.table.contacts-table td,
.table.contacts-table th {
  padding: .625rem .75rem
}

.table.contacts-table thead th {
  padding-bottom: calc(.625rem + var(--bp-card-inset))
}

.table.contacts-table tbody td {
  border-bottom: 1px solid var(--c-border)
}

.table.contacts-table tbody tr:hover td {
  background: var(--c-primary-light)
}

.table.contacts-table td:first-child,
.table.contacts-table tbody th:first-child {
  padding-left: .75rem
}

.table.contacts-table thead th:first-child {
  padding-left: .75rem
}

.contacts-table-check-spacer {
  display: inline-block;
  width: 1rem;
  flex-shrink: 0
}

.contacts-table-name-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600
}

.contacts-table-name-text a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px
}

.contacts-table-name-text a:hover {
  color: var(--c-primary-hover)
}

.contacts-table td.contacts-table-name-col,
.contacts-table th.contacts-table-name-col {
  text-align: left
}

.contacts-table--inline-check td.contacts-table-name-col,
.contacts-table--inline-check th.contacts-table-name-col {
  padding-left: .75rem;
  padding-right: .75rem
}

.contacts-table--inline-check td:first-child,
.contacts-table--inline-check th:first-child {
  width: 22%
}

.contacts-table--inline-check td:nth-child(2),
.contacts-table--inline-check th:nth-child(2) {
  width: 16%
}

.contacts-table--inline-check td:nth-child(3),
.contacts-table--inline-check th:nth-child(3) {
  width: 10%
}

.contacts-table--inline-check td:nth-child(4),
.contacts-table--inline-check th:nth-child(4) {
  width: 12%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip
}

.contacts-table--inline-check td:nth-child(5),
.contacts-table--inline-check th:nth-child(5) {
  width: 18%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table-notes-col {
  max-width: 11rem;
  color: var(--c-text-muted);
  font-size: .82rem
}

.contacts-notes-preview,
.contacts-table-notes-col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.contacts-notes-preview {
  display: block
}

.contacts-table--inline-check td:nth-child(6),
.contacts-table--inline-check th:nth-child(6) {
  width: 12%
}

.contacts-table--inline-check td:nth-child(7),
.contacts-table--inline-check th:nth-child(7),
.contacts-table--inline-check.contacts-table--order-status td:nth-child(5),
.contacts-table--inline-check.contacts-table--order-status th:nth-child(5) {
  width: 8%
}

.contacts-table--inline-check.contacts-table--order-status td:nth-child(6),
.contacts-table--inline-check.contacts-table--order-status th:nth-child(6) {
  width: 14%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table--inline-check.contacts-table--order-status td:nth-child(7),
.contacts-table--inline-check.contacts-table--order-status th:nth-child(7) {
  width: 10%
}

.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) td:nth-child(2),
.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) th:nth-child(2) {
  width: 20%
}

.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) td:nth-child(3),
.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) th:nth-child(3) {
  width: 16%
}

.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) td:nth-child(4),
.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) th:nth-child(4) {
  width: 10%
}

.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) td:nth-child(5),
.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) th:nth-child(5) {
  width: 12%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) td:nth-child(6),
.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) th:nth-child(6) {
  width: 18%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) td:nth-child(7),
.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) th:nth-child(7) {
  width: 11%
}

.contacts-table.contacts-table--analytics-versions td:nth-child(2),
.contacts-table.contacts-table--analytics-versions th:nth-child(2) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check).contacts-table--order-status td:nth-child(6),
.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check).contacts-table--order-status th:nth-child(6) {
  width: 10%
}

.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check).contacts-table--order-status td:nth-child(7),
.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check).contacts-table--order-status th:nth-child(7) {
  width: 14%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check).contacts-table--order-status td:nth-child(8),
.contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check).contacts-table--order-status th:nth-child(8) {
  width: 10%
}

.contacts-table.contacts-table--no-check td:first-child,
.contacts-table.contacts-table--no-check th:first-child {
  width: 20%;
  text-align: left;
  padding-left: .75rem;
  padding-right: .75rem
}

.contacts-table.contacts-table--no-check td:nth-child(2),
.contacts-table.contacts-table--no-check th:nth-child(2) {
  width: 16%
}

.contacts-table.contacts-table--no-check td:nth-child(3),
.contacts-table.contacts-table--no-check th:nth-child(3) {
  width: 10%
}

.contacts-table.contacts-table--no-check td:nth-child(4),
.contacts-table.contacts-table--no-check th:nth-child(4) {
  width: 12%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check td:nth-child(5),
.contacts-table.contacts-table--no-check th:nth-child(5) {
  width: 18%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check td:nth-child(6),
.contacts-table.contacts-table--no-check th:nth-child(6) {
  width: 11%
}

.contacts-table.contacts-table--no-check.contacts-table--order-status td:nth-child(5),
.contacts-table.contacts-table--no-check.contacts-table--order-status th:nth-child(5) {
  width: 10%
}

.contacts-table.contacts-table--no-check.contacts-table--order-status td:nth-child(6),
.contacts-table.contacts-table--no-check.contacts-table--order-status th:nth-child(6) {
  width: 14%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check.contacts-table--order-status td:nth-child(7),
.contacts-table.contacts-table--no-check.contacts-table--order-status th:nth-child(7) {
  width: 10%
}

.contacts-table.contacts-table--no-check.contacts-table--order-status-booked td:first-child,
.contacts-table.contacts-table--no-check.contacts-table--order-status-booked th:first-child {
  width: 18%;
  min-width: 9rem
}

.contacts-table.contacts-table--no-check.contacts-table--order-status-booked td:nth-child(2),
.contacts-table.contacts-table--no-check.contacts-table--order-status-booked th:nth-child(2) {
  width: 18%
}

.contacts-table.contacts-table--no-check.contacts-table--order-status-booked td:nth-child(3),
.contacts-table.contacts-table--no-check.contacts-table--order-status-booked th:nth-child(3) {
  width: 11%
}

.contacts-table.contacts-table--no-check.contacts-table--order-status-booked td:nth-child(4),
.contacts-table.contacts-table--no-check.contacts-table--order-status-booked th:nth-child(4) {
  width: 14%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check.contacts-table--order-status-booked td:nth-child(5),
.contacts-table.contacts-table--no-check.contacts-table--order-status-booked th:nth-child(5) {
  width: 9%
}

.contacts-table.contacts-table--no-check.contacts-table--order-status-booked td:nth-child(6),
.contacts-table.contacts-table--no-check.contacts-table--order-status-booked th:nth-child(6) {
  width: 11%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check.contacts-table--order-status-booked td:nth-child(7),
.contacts-table.contacts-table--no-check.contacts-table--order-status-booked th:nth-child(7) {
  width: 7%
}

.contacts-table.contacts-table--no-check.contacts-table--order-status-booked td:nth-child(8),
.contacts-table.contacts-table--no-check.contacts-table--order-status-booked th:nth-child(8) {
  width: 8%
}

.contacts-table.contacts-table--no-check.contacts-table--lead-orders td:first-child,
.contacts-table.contacts-table--no-check.contacts-table--lead-orders th:first-child {
  width: 12%
}

.contacts-table.contacts-table--no-check.contacts-table--lead-orders td:nth-child(2),
.contacts-table.contacts-table--no-check.contacts-table--lead-orders th:nth-child(2) {
  width: 15%
}

.contacts-table.contacts-table--no-check.contacts-table--lead-orders td:nth-child(3),
.contacts-table.contacts-table--no-check.contacts-table--lead-orders th:nth-child(3) {
  width: 13%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check.contacts-table--lead-orders td:nth-child(4),
.contacts-table.contacts-table--no-check.contacts-table--lead-orders th:nth-child(4) {
  width: 15%;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check.contacts-table--lead-orders td:nth-child(5),
.contacts-table.contacts-table--no-check.contacts-table--lead-orders th:nth-child(5) {
  width: 10%;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check.contacts-table--lead-orders td:nth-child(6),
.contacts-table.contacts-table--no-check.contacts-table--lead-orders th:nth-child(6) {
  width: 11%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check.contacts-table--lead-orders td:nth-child(7),
.contacts-table.contacts-table--no-check.contacts-table--lead-orders th:nth-child(7) {
  width: 10%
}

.contacts-table.contacts-table--no-check.contacts-table--lead-orders td:last-child,
.contacts-table.contacts-table--no-check.contacts-table--lead-orders th.contacts-table-actions-col {
  width: 7.5rem;
  min-width: 7.5rem;
  overflow: visible;
  text-overflow: clip;
  text-align: right;
}

.contacts-table.contacts-table--no-check.contacts-table--lead-paths td:first-child,
.contacts-table.contacts-table--no-check.contacts-table--lead-paths th:first-child {
  width: auto;
  min-width: 14rem;
  max-width: 28rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check.contacts-table--lead-paths td:nth-child(2),
.contacts-table.contacts-table--no-check.contacts-table--lead-paths th:nth-child(2) {
  width: auto;
  min-width: 12rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}


.admin-ann-preview {
  position: relative;
  font-size: .85rem;
  color: var(--c-text);
  margin-top: .25rem;
  max-height: 3.6em;
  overflow: hidden;
  line-height: 1.2
}

.admin-ann-preview.is-clamped::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.35em;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bp-card-bg))
}

.contacts-table tbody tr:hover .admin-ann-preview.is-clamped::after {
  background: linear-gradient(to bottom, transparent, var(--c-primary-light))
}

.contacts-table.contacts-table--no-check.contacts-table--announcements td:first-child,
.contacts-table.contacts-table--no-check.contacts-table--announcements th:first-child {
  width: auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  vertical-align: top;
}

.contacts-table.contacts-table--no-check.contacts-table--announcements td.contacts-table-status-col,
.contacts-table.contacts-table--no-check.contacts-table--announcements th.contacts-table-status-col {
  width: 7rem;
  min-width: 7rem;
  white-space: nowrap;
  vertical-align: middle;
}

.contacts-table.contacts-table--no-check.contacts-table--announcements td.contacts-table-actions-col,
.contacts-table.contacts-table--no-check.contacts-table--announcements th.contacts-table-actions-col {
  width: 9.5rem;
  min-width: 9.5rem;
  white-space: nowrap;
  text-align: right;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check.contacts-table--health td:first-child,
.contacts-table.contacts-table--no-check.contacts-table--health th:first-child {
  width: auto;
  min-width: 12rem;
}

.contacts-table.contacts-table--no-check.contacts-table--health td:nth-child(2),
.contacts-table.contacts-table--no-check.contacts-table--health th:nth-child(2) {
  width: 7rem;
  white-space: nowrap;
}

.contacts-table.contacts-table--no-check.contacts-table--health td:nth-child(3),
.contacts-table.contacts-table--no-check.contacts-table--health th:nth-child(3) {
  width: 8rem;
  white-space: nowrap;
}

.contacts-table.contacts-table--no-check.contacts-table--health td:nth-child(4),
.contacts-table.contacts-table--no-check.contacts-table--health th:nth-child(4) {
  width: 5rem;
  white-space: nowrap;
}

.admin-health-table-name {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .82rem;
  color: var(--c-text);
}

.contacts-table.contacts-table--no-check.contacts-table--audit th,
.contacts-table.contacts-table--no-check.contacts-table--audit td {
  vertical-align: top;
}

.contacts-table.contacts-table--no-check.contacts-table--audit td:first-child,
.contacts-table.contacts-table--no-check.contacts-table--audit th:first-child {
  width: 11rem;
  min-width: 11rem;
  white-space: nowrap;
}

.contacts-table.contacts-table--no-check.contacts-table--audit td:nth-child(2),
.contacts-table.contacts-table--no-check.contacts-table--audit th:nth-child(2) {
  width: 16rem;
  min-width: 16rem;
}

.contacts-table.contacts-table--no-check.contacts-table--audit td:nth-child(3),
.contacts-table.contacts-table--no-check.contacts-table--audit th:nth-child(3) {
  width: 20rem;
  min-width: 20rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.contacts-table.contacts-table--no-check.contacts-table--audit td:nth-child(4),
.contacts-table.contacts-table--no-check.contacts-table--audit th:nth-child(4) {
  width: 18rem;
  min-width: 18rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-all;
}

.contacts-table.contacts-table--no-check.contacts-table--audit td:nth-child(5),
.contacts-table.contacts-table--no-check.contacts-table--audit th:nth-child(5) {
  width: 7rem;
  min-width: 7rem;
  white-space: nowrap;
}

.contacts-table.contacts-table--no-check.contacts-table--audit td:nth-child(6),
.contacts-table.contacts-table--no-check.contacts-table--audit th:nth-child(6) {
  width: auto;
  min-width: 14rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.contacts-table.contacts-table--no-check.contacts-table--audit .admin-audit-detail {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .78rem;
  color: var(--c-text-muted);
  word-break: break-all;
  line-height: 1.35;
}

.contacts-table.contacts-table--no-check.contacts-table--lead-paths .cal-widget-card-url-row {
  margin: 0
}

.contacts-table.contacts-table--no-check.contacts-table--lead-paths td.contacts-table-actions-col,
.contacts-table.contacts-table--no-check.contacts-table--lead-paths th.contacts-table-actions-col {
  width: 9.5rem;
  min-width: 9.5rem;
  white-space: nowrap;
  text-align: right;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check.contacts-table--leads-delivered td:first-child,
.contacts-table.contacts-table--no-check.contacts-table--leads-delivered th:first-child {
  width: 16%
}

.contacts-table.contacts-table--no-check.contacts-table--leads-delivered td:nth-child(2),
.contacts-table.contacts-table--no-check.contacts-table--leads-delivered th:nth-child(2) {
  width: 22%
}

.contacts-table.contacts-table--no-check.contacts-table--leads-delivered td:nth-child(3),
.contacts-table.contacts-table--no-check.contacts-table--leads-delivered th:nth-child(3) {
  width: 14%
}

.contacts-table.contacts-table--no-check.contacts-table--leads-delivered td:nth-child(4),
.contacts-table.contacts-table--no-check.contacts-table--leads-delivered th:nth-child(4) {
  width: 8%
}

.contacts-table.contacts-table--no-check.contacts-table--leads-delivered td:nth-child(5),
.contacts-table.contacts-table--no-check.contacts-table--leads-delivered th:nth-child(5) {
  width: 12%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip
}

.contacts-table.contacts-table--no-check.contacts-table--leads-delivered td:nth-child(6),
.contacts-table.contacts-table--no-check.contacts-table--leads-delivered th:nth-child(6) {
  width: 12%
}

@media (max-width:900px) {

  .contacts-table--inline-check td:nth-child(3),
  .contacts-table--inline-check th:nth-child(3),
  .contacts-table.contacts-table--no-check td:nth-child(3),
  .contacts-table.contacts-table--no-check th:nth-child(3),
  .contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) td:nth-child(4),
  .contacts-table:not(.contacts-table--no-check):not(.contacts-table--inline-check) th:nth-child(4) {
    display: none
  }
}

/* Click row to toggle selection checkbox (see common.js table row selection) */
.contacts-table:not(.contacts-table--no-check) tbody tr:has(input[type="checkbox"]) {
  cursor: pointer;
}

.contacts-table:not(.contacts-table--no-check) tbody tr input[type="checkbox"],
.contacts-table:not(.contacts-table--no-check) tbody tr a,
.contacts-table:not(.contacts-table--no-check) tbody tr button,
.contacts-table:not(.contacts-table--no-check) tbody tr .btn {
  cursor: pointer;
}

.contacts-table-actions-col {
  text-align: right;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.contacts-table td.contacts-table-actions-col > div,
.contacts-table td.contacts-table-actions-col > .contacts-table-actions-inner,
.table td.contacts-table-actions-col > div,
.table td.contacts-table-actions-col > .contacts-table-actions-inner {
  display: inline-flex;
  justify-content: flex-end;
  gap: .4rem;
  max-width: 100%;
}

.contacts-table td.contacts-table-actions-col > .btn,
.contacts-table td.contacts-table-actions-col > .order-menu-wrap,
.contacts-table td.contacts-table-actions-col > .bp-menu-wrap,
.table td.contacts-table-actions-col > .btn,
.table td.contacts-table-actions-col > .order-menu-wrap,
.table td.contacts-table-actions-col > .bp-menu-wrap {
  display: inline-block;
  vertical-align: middle;
}

.contacts-table-pin-col {
  width: 2.5rem;
  min-width: 2.5rem;
  text-align: center;
}

.contacts-table.contacts-table--analytics-versions td:nth-child(2),
.contacts-table.contacts-table--analytics-versions th:nth-child(2) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Platform admin tables (accounts / agents) */
.contacts-table.contacts-table--admin-accounts .contacts-table-pin-col,
.contacts-table.contacts-table--admin-accounts td:first-child {
  max-width: 2.5rem;
  padding-inline: .75rem .35rem;
  text-align: center;
}

.contacts-table.contacts-table--admin-accounts :is(td, th):nth-child(2) { width: 18%; }
.contacts-table.contacts-table--admin-accounts :is(td, th):nth-child(3) { width: 16%; }
.contacts-table.contacts-table--admin-accounts :is(td, th):nth-child(4) { width: 12%; }
.contacts-table.contacts-table--admin-accounts :is(td, th):nth-child(5) { width: 9%; }
.contacts-table.contacts-table--admin-accounts :is(td, th):nth-child(6) { width: 7%; text-align: center; }
.contacts-table.contacts-table--admin-accounts :is(td, th):nth-child(7),
.contacts-table.contacts-table--admin-accounts :is(td, th):nth-child(8) { width: 10%; white-space: nowrap; }

.contacts-table.contacts-table--admin-accounts :is(td, th):nth-child(2),
.contacts-table.contacts-table--admin-accounts :is(td, th):nth-child(3) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.contacts-table.contacts-table--admin-accounts .contacts-table-actions-col {
  width: 13.5rem;
  min-width: 13.5rem;
}

.contacts-table.contacts-table--admin-agents :is(td, th):nth-child(1),
.contacts-table.contacts-table--admin-agents :is(td, th):nth-child(5) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.contacts-table.contacts-table--admin-agents :is(td, th):nth-child(5) {
  max-width: 16rem;
}

/* ── 15. Modal shell ────────────────────────────────────────────────────── */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--bp-overlay-scrim);
  backdrop-filter: var(--bp-overlay-blur);
  -webkit-backdrop-filter: var(--bp-overlay-blur);
}

.modal-overlay.open {
  display: flex;
}

.modal {
  background: var(--bp-card-bg);
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  box-shadow: var(--bp-shadow);
  width: min(100%, 500px);
  max-width: 500px;
  max-height: min(90dvh, calc(100dvh - 2rem));
  overflow: hidden;
}

.modal--sm { max-width: 420px; }
.modal--md { max-width: 500px; }
.modal--lg { max-width: 640px; }
.modal--xl { max-width: 800px; width: min(96%, 800px); }

.modal--scroll {
  display: flex;
  flex-direction: column;
}

.modal--scroll > .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.modal--scroll > .modal-footer,
.modal--scroll > .modal-header,
.modal--scroll > form > .modal-footer {
  flex-shrink: 0;
}

.modal-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-divider {
  margin: 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
}

.gcal-sync-status:not([hidden]) {
  color: var(--c-warning);
  font-weight: 500;
}

.modal-lead {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .875rem;
  line-height: 1.5;
}

.modal-eyebrow {
  margin: 0;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-muted);
}

.modal-header {
  margin: var(--bp-card-inset) var(--bp-card-inset) 0;
  padding: .65rem .9rem;
  border-radius: var(--bp-card-section-radius);
  background: var(--bp-card-section-bg);
  box-shadow: var(--bp-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.modal-title {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-text);
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
  background: var(--bp-card-footer-bg);
}

/* Footer actions use global `.btn` variants only — no modal-specific button overrides */

.modal-footer--split {
  justify-content: space-between;
}

.modal-footer--stack {
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
}

.modal-footer--plain {
  border-top: none;
  background: transparent;
  padding-top: 0;
}

.modal-footer--card {
  border-top: none;
  background: var(--bp-card-bg);
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.modal-close:hover {
  color: var(--c-text);
  background: var(--bp-card-bg);
  box-shadow: var(--bp-shadow-hover);
}

.modal-close:focus-visible {
  outline: none;
  color: var(--c-text);
  background: var(--bp-card-bg);
  box-shadow: var(--bp-shadow-focus);
}

.modal-header__text {
  min-width: 0;
  flex: 1;
}

.modal:has(> .modal-header) > .modal-body:not(.modal-body--flush) {
  padding-top: var(--bp-card-inset);
}

.modal-stack--sm {
  gap: .75rem;
}

.modal-table-scroll {
  overflow: auto;
  max-height: 380px;
  border-top: 1px solid color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
}

.modal-table-scroll .table {
  margin: 0;
}

.modal-table-scroll thead {
  filter: drop-shadow(var(--bp-shadow));
}

.modal-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bp-card-footer-bg);
  box-shadow: none;
  border-bottom: none;
}

.modal .table-wrap {
  overflow-x: auto;
}

/* ── 16. Page rhythm ───────────────────────────────────────────────────── */

.page-content {
  padding: var(--bp-page-padding);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bp-card-stack-gap);
}

.page-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 0;
}

.page-header :is(h1, h2) {
  margin: 0;
}

.page-header:has(> .btn, > .page-header__toolbar) {
  align-items: center;
  min-height: var(--btn-min-height);
}

.page-header:has(> .btn, > .page-header__toolbar) :is(h1, h2) {
  padding-block: .125rem;
}

.page-header__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-left: auto;
  justify-content: flex-end;
}

.page-header__toolbar:has(.btn) {
  min-height: var(--btn-min-height);
}

.page-header--card-inset {
  padding-inline: var(--bp-card-inset);
}

/* Title + toolbar on one row (contacts, messages, admin clients, …) */
.contacts-page-header,
.page-header.contacts-page-header,
.page-header.analytics-page-header {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.contacts-page-title-row,
.analytics-page-title-row {
  width: auto;
  flex: 0 0 auto;
}

.contacts-page-toolbar,
.page-header__toolbar.contacts-page-toolbar,
.analytics-page-toolbar,
.page-header .messages-toolbar-actions {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  justify-content: flex-end;
}

.contacts-page-header.admin-clients-header {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
}

.admin-clients-toolbar {
  justify-content: space-between;
}

.admin-clients-nav {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
}

.admin-clients-segment-tabs,
.admin-clients-view-tabs {
  flex-wrap: wrap;
}

.admin-clients-panel.hidden {
  display: none !important;
}

.admin-clients-header .admin-clients-toolbar .contacts-search-group {
  margin-right: 0;
  margin-left: auto;
}

.admin-clients-header .admin-clients-nav {
  width: auto;
  flex: 1 1 auto;
  min-width: min(100%, 18rem);
}

.admin-clients-header .contacts-page-toolbar {
  flex: 0 1 auto;
  min-width: min(100%, 28rem);
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header__toolbar {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

@media (min-width: 769px) {
  .page-header {
    flex-direction: row;
    align-items: center;
  }

  .page-header__toolbar {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--bp-card-stack-gap);
  min-width: 0;
}

/* Settings — billing subscription rows, tab panels, dividers */
.settings-tab-panel {
  margin-top: .25rem;
}

.settings-divider {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
  margin: 0;
  flex-shrink: 0;
}

/*
 * Settings rows — security credentials, notification prefs, feature toggles.
 * Use `.bp-settings-*` for new markup; `.security-settings-*` aliases the same rules.
 */
.bp-settings-row,
.security-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.bp-settings-row__body,
.security-settings-row__body {
  flex: 1;
  min-width: 0;
}

.bp-settings-row__title,
.security-settings-row__title {
  margin: 0;
  font-weight: 500;
  font-size: .875rem;
  color: var(--c-text);
}

.bp-settings-row__desc,
.security-settings-row__desc {
  margin: .1rem 0 0;
  font-size: .82rem;
  color: var(--c-text-muted);
}

.bp-settings-row__value,
.security-settings-row__value {
  margin: .35rem 0 0;
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-text);
}

.bp-settings-card-header,
.security-settings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.bp-settings-card-title,
.security-settings-card-title {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

.bp-settings-card-icon,
.security-settings-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}

.bp-settings-status,
.security-settings-status {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.bp-settings-status .form-hint,
.security-settings-status .form-hint {
  margin: 0;
}

.bp-settings-actions,
.security-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* Stacked settings lists — optional dividers between items (notifications, toggles) */
.bp-settings-list > .toggle-switch + .toggle-switch {
  border-top: 1px solid color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
  padding-top: .85rem;
  margin-top: .85rem;
}

.bp-settings-list > .bp-settings-list-item + .bp-settings-list-item,
.bp-settings-list > .settings-list-item + .settings-list-item {
  border-top: 1px solid color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
  padding-top: .85rem;
  margin-top: .85rem;
}

.subscription-details-grid {
  display: flex;
  flex-direction: column;
}

.subscription-detail {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--c-border);
}

.subscription-detail:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.subscription-detail:first-child {
  padding-top: 0;
}

.subscription-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-muted);
  min-width: 130px;
  flex-shrink: 0;
}

.subscription-value {
  font-size: .9rem;
  font-weight: 500;
  color: var(--c-text);
}

.subscription-status-badge:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.billing-plan-features li:before {
  content: "✓ ";
  color: var(--c-primary);
  font-weight: 700;
}

.billing-plan-features li.unavailable:before {
  content: "✗ ";
  color: var(--c-text-muted);
}

/* Settings — branding uploads + accent color picker */
.branding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.media-uploader {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.media-uploader__preview-wrap {
  border: 1px dashed var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-uploader__preview {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}

.media-uploader__placeholder {
  color: var(--c-text-muted);
  font-size: .8rem;
}

.media-uploader__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.color-picker-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  background: var(--bp-card-bg);
  box-shadow: var(--bp-shadow);
  cursor: pointer;
  user-select: none;
  transition: box-shadow var(--dur) var(--ease);
  width: fit-content;
  min-width: 220px;
}

.color-picker-card:hover {
  box-shadow: var(--bp-shadow-hover);
}

.color-picker-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.color-picker-hex {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  font-family: ui-monospace, monospace;
  color: var(--c-text);
}

.color-picker-hint {
  font-size: .75rem;
  color: var(--c-text-muted);
}

/* Color picker modal — neutral chrome; preview only in the widget + card swatch */
#color-picker-modal .modal-footer {
  background: var(--bp-card-bg);
  border-top: none;
}

#color-picker-modal-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  width: 100%;
}

#color-picker-modal .IroColorPicker {
  display: block;
  width: 100%;
}

#color-picker-modal .IroBox {
  border-radius: var(--radius);
}

#color-picker-modal .IroSlider {
  border-radius: var(--radius);
  overflow: hidden;
}

/*
 * URL editor — prefix + slug/view field + inline actions (copy, edit).
 * Use `.bp-url-*` for new markup; `.website-url-*` aliases the same rules.
 */
.bp-url-editor,
.website-url-editor {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: 100%;
}

.bp-url-row,
.website-url-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--bp-field-border);
  border-radius: var(--radius);
  background: var(--bp-card-bg);
  overflow: hidden;
  box-shadow: var(--bp-shadow);
}

.bp-url-prefix,
.website-url-prefix {
  flex: 0 1 auto;
  max-width: min(100%, 52%);
  padding: .5rem .65rem;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--c-text-muted);
  background: color-mix(in srgb, var(--c-border) 28%, var(--bp-card-bg));
  border-right: 1px solid var(--bp-field-border);
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.bp-url-field,
.website-url-full-select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: .5rem .65rem;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--c-text);
  cursor: text;
  box-shadow: none;
}

.bp-url-field:focus,
.website-url-full-select:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
}

.bp-url-edit-btn,
.website-url-edit-btn {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0 .65rem;
  margin: 0;
  border: none;
  border-left: 1px solid var(--bp-field-border);
  border-radius: 0;
  background: var(--btn-chrome-bg);
  color: var(--c-text-muted);
  cursor: pointer;
  box-shadow: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bp-url-edit-btn:hover,
.website-url-edit-btn:hover {
  background: var(--btn-chrome-bg-hover);
  box-shadow: var(--bp-shadow-hover);
  color: var(--c-text);
}

.bp-url-copy,
.website-url-copy {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0 .65rem;
  margin: 0;
  border: none;
  border-left: 1px solid var(--bp-field-border);
  border-radius: 0;
  background: color-mix(in srgb, var(--c-border) 18%, var(--bp-card-bg));
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bp-url-copy:hover,
.website-url-copy:hover {
  background: color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 10%, var(--bp-card-bg));
  color: var(--c-primary-color, var(--c-primary));
}

.bp-url-slug-input,
.website-url-slug-input {
  flex: 1 1 8rem;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: .5rem .65rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: .875rem;
  line-height: 1.4;
  background: transparent;
  color: var(--c-text);
}

.bp-url-slug-input:focus,
.website-url-slug-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
  border-color: transparent;
}

.bp-url-hint,
.website-url-hint {
  margin: 0;
  font-size: .75rem;
  color: var(--c-text-muted);
}

.bp-url-actions,
.website-url-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
}

.bp-url-row--edit.hidden,
.bp-url-view-row.hidden,
.website-url-row--edit.hidden,
.website-url-view-row.hidden {
  display: none;
}

@media (max-width: 640px) {
  .bp-url-row,
  .website-url-row {
    flex-wrap: wrap;
  }

  .bp-url-prefix,
  .website-url-prefix {
    flex: 1 1 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--bp-field-border);
  }

  .bp-url-slug-input,
  .website-url-slug-input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .bp-url-copy,
  .website-url-copy {
    border-left: 1px solid var(--bp-field-border);
    border-top: none;
  }
}

/* ── 17. Tab strip ─────────────────────────────────────────────────────── */

.analytics-tabs {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  align-items: center;
  margin: .35rem 0 1rem;
}

.analytics-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .42rem .85rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-text-muted);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.analytics-tab:hover:not(.is-active):not(:disabled) {
  color: var(--c-text);
  background: var(--btn-chrome-bg-hover);
  box-shadow: var(--bp-shadow-hover);
}

.analytics-tab.is-active {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--btn-chrome-bg));
  font-weight: 600;
  box-shadow: var(--bp-shadow-hover);
}

.analytics-tab:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── 18. Metric grid + stat tile ─────────────────────────────────────────── */

.bp-metric-grid,
.metrics-grid,
.stats-grid,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr));
  gap: 1rem;
}

.metric-card,
.stat-card,
.bp-metric-card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  background: var(--bp-card-bg);
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  padding: 1rem 1.15rem 1.05rem;
  box-shadow: var(--bp-shadow);
  min-height: 5.25rem;
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease);
}

.metric-card:hover,
.stat-card:hover {
  box-shadow: var(--bp-shadow-hover);
}

.metric-card__label,
.stat-label {
  margin: 0;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.metric-card__value,
.stat-value {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.stat-delta.up { color: var(--c-success); }
.stat-delta.down { color: var(--c-danger); }

.bp-stat-hint,
.metric-card__hint,
.stat-hint {
  margin: .1rem 0 0;
  font-size: .75rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--c-text-muted);
}

.metric-card__value--sm,
.stat-value--sm {
  font-size: 1.05rem;
  font-weight: 600;
}

.metric-card__compare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
}

.metric-card__compare .metric-card__value {
  font-size: 1.25rem;
  font-weight: 700;
}

.metric-card--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 0;
  padding: .7rem .9rem;
}

.metric-card--row .metric-card__label {
  flex: 1;
  min-width: 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: .8rem;
  font-weight: 500;
}

.metric-card--row .metric-card__value {
  font-size: .95rem;
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
}

.metrics-grid--compact .metric-card,
.metrics-grid--compact .stat-card,
.stats-grid--compact .metric-card,
.stats-grid--compact .stat-card {
  padding: .85rem .95rem;
  min-height: 4.75rem;
}

.metrics-grid--compact .metric-card__value,
.metrics-grid--compact .stat-value,
.stats-grid--compact .metric-card__value,
.stats-grid--compact .stat-value {
  font-size: 1.2rem;
}

.metrics-grid--compact .metric-card__label,
.metrics-grid--compact .stat-label,
.stats-grid--compact .metric-card__label,
.stats-grid--compact .stat-label {
  font-size: .65rem;
}

:is(#analytics-stats, #stats-grid, #vai-usage-stats) > :is(.metric-card, .stat-card) {
  border: 1px solid transparent;
  box-shadow: var(--bp-shadow);
}

:is(#analytics-stats, #stats-grid, #vai-usage-stats) > :is(.metric-card, .stat-card):hover {
  box-shadow: var(--bp-shadow-hover);
}

/* ── 19. Pagination ─────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0;
}

.pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2rem;
  padding: .42rem .75rem;
  font-size: .8125rem;
  font-weight: 500;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  background: var(--bp-card-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--bp-shadow);
  cursor: pointer;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pagination button:hover:not(:disabled):not(.active) {
  color: var(--c-text);
  box-shadow: var(--bp-shadow-hover);
}

.pagination button.active {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg));
  font-weight: 600;
  box-shadow: var(--bp-shadow-hover);
}

.pagination button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── 20. Toast notifications ─────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 2rem));
}

html:has(.dash) .toast-container {
  top: calc(var(--topbar-stack-offset) + .35rem);
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-width: min(280px, 100%);
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  background: var(--bp-card-bg);
  box-shadow: var(--bp-shadow);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-text);
}

.toast.success { background: color-mix(in srgb, var(--c-success) 9%, var(--bp-card-bg)); }
.toast.error { background: color-mix(in srgb, var(--c-danger) 9%, var(--bp-card-bg)); }
.toast.warning { background: color-mix(in srgb, var(--c-warning) 10%, var(--bp-card-bg)); }
.toast.info { background: color-mix(in srgb, var(--c-info) 9%, var(--bp-card-bg)); }

.toast--multiline {
  white-space: pre-line;
}

/* ── 21. Toolbar + search ────────────────────────────────────────────────── */

.bp-toolbar,
.page-header__toolbar,
.contacts-page-toolbar,
.messages-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.bp-toolbar--end,
.page-header__toolbar,
.page-header .messages-toolbar-actions,
.contacts-page-toolbar,
.analytics-page-toolbar {
  margin-left: auto;
  justify-content: flex-end;
}

.bp-search-wrap,
.contacts-search-wrap {
  position: relative;
  flex: 0 1 220px;
  min-width: 160px;
  max-width: 280px;
}

.bp-search-input,
.contacts-search-input,
.form-input.bp-search-input {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: .8rem;
  --bp-field-line-height: 1.25;
  width: 100%;
  padding-left: calc(var(--bp-icon-size-md) + .85rem);
}

.bp-search-icon,
.contacts-search-icon {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  width: var(--bp-icon-size-sm);
  height: var(--bp-icon-size-sm);
  color: var(--c-text-muted);
  pointer-events: none;
}

.bp-filter-count,
.contacts-filter-count {
  font-size: .82rem;
  color: var(--c-text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

.bp-toolbar-control,
.contacts-toolbar-control {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: .8rem;
  --bp-field-line-height: 1.25;
}

.page-header__toolbar :is(.form-input, .contacts-search-input)::placeholder,
.contacts-page-toolbar :is(.form-input, .contacts-search-input)::placeholder,
.vai-call-log-toolbar :is(.form-input, .contacts-search-input)::placeholder,
.contacts-toolbar-control:is(input, textarea)::placeholder,
.bp-toolbar-control:is(input, textarea)::placeholder {
  font-size: var(--bp-field-font-size, .8rem);
  line-height: var(--bp-field-line-height, 1.25);
  color: var(--c-text-muted);
  opacity: 1;
}

/* Toolbar custom selects — shrink-wrapped (default .form-select-wrap is width:100%) */
.page-header__toolbar :is(.form-select-wrap, .form-select, select.form-select, .bp-dtp-wrap),
.contacts-page-toolbar :is(.form-select-wrap, .form-select, select.form-select, .bp-dtp-wrap),
.contacts-toolbar-actions :is(.form-select-wrap, .form-select, select.form-select, .bp-dtp-wrap),
.contacts-range-wrap :is(.form-select-wrap, .form-select, select.form-select),
.messages-toolbar-actions :is(.form-select-wrap, .form-select, select.form-select, .bp-dtp-wrap),
.bp-card-toolbar :is(.form-select-wrap, .form-select, select.form-select, .bp-dtp-wrap),
.vai-call-log-toolbar :is(.form-select-wrap, .form-select, select.form-select, .bp-dtp-wrap) {
  width: auto;
  min-width: 10.5rem;
  flex: 0 0 auto;
}

.page-header__toolbar .form-select-wrap,
.contacts-page-toolbar .form-select-wrap,
.contacts-toolbar-actions .form-select-wrap,
.contacts-range-wrap .form-select-wrap,
.messages-toolbar-actions .form-select-wrap,
.bp-card-toolbar .form-select-wrap,
.vai-call-log-toolbar .form-select-wrap,
.page-header__toolbar .bp-dtp-wrap,
.contacts-page-toolbar .bp-dtp-wrap,
.contacts-toolbar-actions .bp-dtp-wrap,
.messages-toolbar-actions .bp-dtp-wrap,
.bp-card-toolbar .bp-dtp-wrap,
.vai-call-log-toolbar .bp-dtp-wrap,
.contacts-custom-range .bp-dtp-wrap,
.analytics-custom-range .bp-dtp-wrap,
.admin-clients-range-group .bp-dtp-wrap {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

.page-header__toolbar :is(.form-input, .form-select, .form-select-trigger, .bp-dtp-trigger),
.contacts-page-toolbar :is(.form-input, .form-select, .form-select-trigger, .contacts-search-input, .bp-dtp-trigger),
.contacts-toolbar-actions :is(.form-input, .form-select, .form-select-trigger, .bp-dtp-trigger),
.messages-toolbar-actions :is(.form-select, .form-select-trigger, .bp-dtp-trigger),
.bp-card-toolbar :is(.form-input, .form-select, .form-select-trigger, .contacts-toolbar-control, .bp-dtp-trigger),
.vai-call-log-toolbar :is(.form-input, .form-select, .form-select-trigger, .contacts-search-input, .bp-dtp-trigger) {
  height: var(--bp-field-height, 2.3rem);
  min-height: var(--bp-field-height, 2.3rem);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--bp-field-font-size, .8rem);
  line-height: var(--bp-field-line-height, 1.25);
  box-sizing: border-box;
}

.contacts-page-toolbar,
.page-header__toolbar.contacts-page-toolbar {
  gap: .65rem;
  min-width: 0;
}

.contacts-page-toolbar .contacts-search-group {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-right: auto;
  flex: 0 1 auto;
  min-width: 0;
}

.contacts-page-toolbar .contacts-search-wrap {
  flex: 0 1 240px;
}

.contacts-filter-count.is-loading {
  opacity: .55;
}

.contacts-toolbar-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.contacts-custom-range,
.analytics-custom-range {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

#analytics-custom-range,
.analytics-custom-range,
.page-header__toolbar {
  align-items: center;
}

.page-header__toolbar select:not(.website-url-full-select):not([multiple]),
.contacts-page-toolbar select:not(.website-url-full-select):not([multiple]),
.messages-toolbar-actions select:not(.website-url-full-select):not([multiple]),
.bp-card-toolbar select:not(.website-url-full-select):not([multiple]),
.vai-call-log-toolbar select:not(.website-url-full-select):not([multiple]) {
  padding-right: 2.35rem;
}

.page-header__toolbar .form-input[type=date],
.contacts-page-toolbar .form-input[type=date],
.contacts-custom-range .form-input[type=date],
.analytics-custom-range .form-input[type=date] {
  padding-right: .65rem;
  min-width: 9.5rem;
  color-scheme: light;
}

[data-theme=dark] .page-header__toolbar .form-input[type=date],
[data-theme=dark] .contacts-page-toolbar .form-input[type=date],
[data-theme=dark] .contacts-custom-range .form-input[type=date],
[data-theme=dark] .analytics-custom-range .form-input[type=date] {
  color-scheme: dark;
}

.page-header__toolbar :is(.btn, .btn-sm),
.contacts-page-toolbar :is(.btn, .btn-sm, .contacts-actions-btn) {
  height: 2.3rem;
  min-height: 2.3rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: .8rem;
}

.contacts-page-toolbar .contacts-actions-btn,
.contacts-page-toolbar #contacts-actions-btn {
  width: 2.3rem;
  min-width: 2.3rem;
  padding: 0;
}

.messages-page-header .form-input,
.messages-page-header .form-select,
.messages-page-header .form-select-wrap,
.messages-page-header select:not(.website-url-full-select):not([multiple]),
.messages-page-header .contacts-toolbar-control {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: .8rem;
}

.messages-page-header :is(.btn, .btn-sm) {
  height: 2.3rem;
  min-height: 2.3rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: .8rem;
}

.admin-clients-range-group {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
  min-width: 0;
}

.admin-clients-header .admin-clients-range-group :is(.form-input, .form-select, .form-select-wrap, .form-select-trigger, select:not(.website-url-full-select):not([multiple]), .contacts-toolbar-control) {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: .8rem;
  width: auto;
  min-width: 10.5rem;
  flex: 0 0 auto;
}

.admin-clients-header .admin-clients-range-group .form-select-wrap {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

.admin-clients-header .admin-clients-range-group .form-select-trigger,
.admin-clients-header .admin-clients-range-group :is(.btn, .btn-sm) {
  height: 2.3rem;
  min-height: 2.3rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: .8rem;
}

.messages-page-header :is(h1, h2) {
  margin: 0;
}

.messages-page-header {
  flex-shrink: 0;
  margin-bottom: 0;
}

.messages-filter-select {
  min-width: 160px;
}

.vai-call-log-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
}

.bp-card-toolbar,
.vai-call-log-toolbar {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: .8rem;
  --bp-field-line-height: 1.25;
}

.bp-card-toolbar {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
  min-width: 0;
}

.bp-card-toolbar :is(.btn, .btn-sm) {
  height: 2.3rem;
  min-height: 2.3rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: .8rem;
}

.vai-call-log-toolbar .contacts-search-wrap {
  flex: 0 1 220px;
  min-width: 160px;
  max-width: 280px;
}

.vai-call-log-toolbar :is(.form-select-wrap, .form-select, select.form-select) {
  width: auto;
  min-width: 10.5rem;
  max-width: 12rem;
  flex: 0 0 auto;
}

.bp-card-toolbar :is(.form-input, .form-select, .form-select-wrap, .form-select-trigger, select.form-select, .contacts-toolbar-control),
.vai-call-log-toolbar :is(.form-input, .form-select, .form-select-wrap, .form-select-trigger, select.form-select, .contacts-toolbar-control) {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: .8rem;
}

.vai-filter-select {
  width: auto;
  min-width: 10.5rem;
  max-width: 12rem;
  flex: 0 0 auto;
}

/* ── Voice AI page ─────────────────────────────────────────────────────── */

.vai-main {
  display: flex;
  flex-direction: column;
  gap: var(--bp-card-stack-gap);
  min-width: 0;
}

.vai-call-log-head {
  width: 100%;
}

.vai-usage-chart-mount {
  min-height: 200px;
}

.vai-usage-chart-mount .vai-daily-spend-chart {
  height: 200px;
}

.vai-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--c-border);
  font-size: .82rem;
}

.vai-stat-item:last-child {
  border-bottom: none;
}

.vai-stat-label {
  color: var(--c-text-muted);
  white-space: nowrap;
}

.vai-stat-value {
  font-weight: 600;
  color: var(--c-text);
  text-align: right;
}

.vai-sidebar-sticky {
  position: sticky;
  top: calc(var(--impersonation-banner-h, 0px) + var(--topbar-stack-offset) + 1rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.vai-wallet-balance-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-muted);
  margin-bottom: .25rem;
}

.vai-wallet-balance {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1;
  margin-bottom: .5rem;
}

.vai-wallet-balance.vai-wallet-low {
  color: var(--c-danger, #ef4444);
}

.vai-wallet-actions {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
}

.vai-wallet-actions .btn {
  flex: 1;
  min-width: 0;
}

.vai-modal-section {
  margin-bottom: 1.5rem;
}

.vai-modal-section-label {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.vai-audio-player {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem .9rem;
  border: 1px solid transparent;
  border-radius: var(--bp-card-section-radius);
  background: var(--bp-card-section-bg);
  box-shadow: var(--bp-shadow);
}

.vai-audio-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--c-primary-color, var(--c-primary));
  color: #fff;
  cursor: pointer;
  box-shadow: var(--bp-shadow);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.vai-audio-play:hover {
  box-shadow: var(--bp-shadow-hover);
}

.vai-audio-play:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

.vai-audio-play svg {
  width: .875rem;
  height: .875rem;
  display: none;
}

.vai-audio-play:not(.is-playing) .vai-audio-play-icon,
.vai-audio-play.is-playing .vai-audio-pause-icon {
  display: block;
}

.vai-audio-seek-wrap {
  flex: 1;
  min-width: 0;
}

.vai-audio-seek-track {
  display: flex;
  align-items: center;
  padding: .65rem 0;
  margin: -.65rem 0;
  cursor: pointer;
  touch-action: none;
}

.vai-audio-seek-rail {
  position: relative;
  flex: 1;
  height: .3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-text-muted) 22%, var(--bp-card-bg));
}

.vai-audio-seek-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--c-primary-color, var(--c-primary));
  pointer-events: none;
}

.vai-audio-seek-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--c-primary-color, var(--c-primary));
  box-shadow: var(--bp-shadow);
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  pointer-events: none;
  transition: box-shadow var(--dur) var(--ease);
}

.vai-audio-seek-track:hover .vai-audio-seek-thumb,
.vai-audio-seek-track:active .vai-audio-seek-thumb {
  box-shadow: var(--bp-shadow-hover);
}

.vai-audio-time {
  flex-shrink: 0;
  min-width: 10ch;
  font-size: .78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  text-align: right;
  white-space: nowrap;
}

.vai-bal-bar-wrap {
  margin: .35rem 0 .25rem;
}

.vai-bal-bar {
  position: relative;
  height: 6px;
  background: var(--c-border);
  border-radius: 999px;
  overflow: visible;
}

.vai-bal-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}

.vai-bal-marker {
  position: absolute;
  top: -3px;
  transform: translateX(-50%);
}

.vai-bal-marker-line {
  width: 2px;
  height: 12px;
  background: var(--c-text-muted);
  border-radius: 1px;
}

.vai-bal-marker-label {
  font-size: .6rem;
  color: var(--c-text-muted);
  white-space: nowrap;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: 14px;
}

.vai-bal-bar-axis {
  font-size: .65rem;
  color: var(--c-text-muted);
  margin-top: .25rem;
  padding: 0 .1rem;
}

.vai-bal-bar-axis,
.vai-log-row {
  display: flex;
  justify-content: space-between;
}

.vai-log-row {
  align-items: baseline;
  gap: .5rem;
  font-size: .75rem;
  padding: .2rem 0;
}

.vai-log-credit {
  color: var(--c-success, #22c55e);
  font-weight: 600;
}

.vai-log-debit {
  color: var(--c-danger, #ef4444);
  font-weight: 600;
}

.vai-chart-wrap {
  display: flex;
  gap: .35rem;
  align-items: stretch;
  height: 80px;
}

.vai-chart-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: .6rem;
  color: var(--c-text-muted);
  text-align: right;
  min-width: 28px;
}

.vai-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 1;
}

.vai-chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: 2px;
}

.vai-chart-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
}

.vai-chart-xlabel {
  font-size: .55rem;
  color: var(--c-text-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.vai-line-chart-wrap {
  width: 100%;
}

.vai-line-chart {
  width: 100%;
  height: 120px;
  display: block;
}

.vai-line-chart-grid {
  stroke: var(--c-border);
  stroke-width: 1;
}

.vai-line-chart-axis {
  fill: var(--c-text-muted);
  font-size: 10px;
}

.vai-line-chart-axis--x {
  font-size: 9px;
}

.vai-line-chart-area {
  fill: color-mix(in srgb, var(--c-primary) 18%, transparent);
}

.vai-line-chart-line {
  fill: none;
  stroke: var(--c-primary);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vai-line-chart-dot {
  fill: var(--c-primary);
  stroke: var(--c-surface);
  stroke-width: 1.25;
}

.contacts-table.contacts-table--vai-calls {
  table-layout: fixed;
}

.contacts-table.contacts-table--vai-calls td:first-child,
.contacts-table.contacts-table--vai-calls th:first-child {
  width: 17%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.contacts-table.contacts-table--vai-calls td:nth-child(2),
.contacts-table.contacts-table--vai-calls th:nth-child(2) {
  width: 13%;
  white-space: nowrap;
}

.contacts-table.contacts-table--vai-calls td:nth-child(3),
.contacts-table.contacts-table--vai-calls th:nth-child(3) {
  width: 12%;
}

.contacts-table.contacts-table--vai-calls td:nth-child(4),
.contacts-table.contacts-table--vai-calls th:nth-child(4) {
  width: 10%;
  white-space: nowrap;
}

.contacts-table.contacts-table--vai-calls td:nth-child(5),
.contacts-table.contacts-table--vai-calls th:nth-child(5) {
  width: 22%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.contacts-table.contacts-table--vai-calls td:nth-child(6),
.contacts-table.contacts-table--vai-calls th:nth-child(6) {
  width: 10%;
}

.contacts-table.contacts-table--vai-calls td:nth-child(7),
.contacts-table.contacts-table--vai-calls th:nth-child(7) {
  width: 18%;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.vai-call-cost-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vai-call-row {
  cursor: pointer;
}

.vai-call-row:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

.vai-call-name {
  font-weight: 500;
}

.vai-calls-empty {
  text-align: center;
  padding: 3.5rem 1rem !important;
}

.vai-calls-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.vai-calls-empty-inner p {
  margin: 0;
  font-size: .9rem;
}

@media (max-width:900px) {

  .contacts-table.contacts-table--vai-calls td:nth-child(4),
  .contacts-table.contacts-table--vai-calls th:nth-child(4) {
    display: none;
  }
}

@media (max-width: 768px) {
  .contacts-page-toolbar .contacts-search-group {
    flex: 1 1 100%;
    margin-right: 0;
  }

  .contacts-page-toolbar .contacts-search-wrap {
    flex: 1 1 auto;
    max-width: none;
  }

  .contacts-toolbar-actions {
    width: 100%;
  }

  #analytics-custom-range,
  .analytics-custom-range,
  #contacts-custom-range,
  .contacts-custom-range {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  #analytics-custom-range .form-input,
  .analytics-custom-range .form-input,
  .analytics-custom-range .bp-dtp-wrap,
  #contacts-custom-range .form-input,
  .contacts-custom-range .form-input,
  .contacts-custom-range .bp-dtp-wrap {
    width: 100%;
  }

  .contacts-range-wrap {
    display: contents;
  }

  .contacts-source-filter-wrap,
  .contacts-tag-filter-wrap {
    flex: 1 1 100%;
    max-width: none;
  }

  .contacts-toolbar-actions .form-select-wrap--toolbar,
  .page-header__toolbar .form-select-wrap--toolbar {
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }
}

/* ── 22. Panel head (flush card sub-header) ──────────────────────────────── */

.bp-panel-head,
.messages-panel-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
  margin: var(--bp-card-inset);
  padding: .625rem .85rem;
}

.bp-panel-head-label,
.messages-panel-head-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.bp-panel-head-search,
.messages-panel-head-search {
  flex: 1 1 auto;
  min-width: 160px;
  max-width: 280px;
  margin-left: auto;
}

.messages-panel-head .bp-search-input::placeholder {
  font-size: var(--bp-field-font-size, .8rem);
  line-height: var(--bp-field-line-height, 1.25);
  color: var(--c-text-muted);
  opacity: 1;
}

/* ── 23. Split view (2- or 3-pane resizable columns) ─────────────────────── */
/*
 * Generic resizable column layouts — inbox / thread / notes, contact profile, etc.
 *
 * 2-pane (no gutters):       .bp-split.bp-split--2col
 * 2-pane (+ resizer):        .bp-split.bp-split--2col-resizable  — or legacy .vai-layout
 * 3-pane (+ 2 resizers):     .bp-split.bp-split--3col  — or legacy .messages-split / .cp-cards-grid
 *
 * 2-col markup: pane | .cp-resizer | pane  (3 grid tracks)
 * 3-col markup: pane | .cp-resizer | pane | .cp-resizer | pane  (5 grid tracks)
 *
 * Tokens (override per page):
 *   --bp-split-col-1/2/3   column tracks
 *   --bp-split-gutter      resizer track width (default 1rem)
 *   --msg-col-inbox, --msg-col-notes, --cp-col-left, --cp-col-mid  (legacy aliases)
 *   --vai-col-sidebar, --cal-col-upcoming  (2-col sidebar width after drag)
 */

.bp-split,
.messages-split,
.messages-cards-grid,
.cp-cards-grid {
  display: grid;
  min-width: 0;
  align-items: stretch;
}

/* Simple master / detail — two panes, card-stack gap, no drag gutters */
.bp-split--2col {
  gap: var(--bp-card-stack-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

/* Two panes + one drag gutter — Voice AI, calendar sidebar, etc. */
.bp-split--2col-resizable,
.vai-layout {
  display: grid;
  min-width: 0;
  gap: var(--bp-card-stack-gap);
  grid-template-columns: 1fr;
  align-items: start;
}

.bp-split--2col-resizable {
  --bp-split-col-1: minmax(0, 1fr);
  --bp-split-col-2: minmax(0, 1.35fr);
}

.vai-layout {
  --bp-split-col-2: var(--vai-col-sidebar, minmax(240px, 320px));
}

.bp-split--2col-resizable > .bp-split__pane,
.vai-layout > .vai-main,
.vai-layout > .vai-sidebar {
  min-width: 0;
}

@media (min-width: 900px) {
  .bp-split--2col-resizable,
  .vai-layout {
    gap: 0;
    align-items: stretch;
    grid-template-columns:
      var(--bp-split-col-1, minmax(0, 1fr))
      var(--bp-split-gutter, 1rem)
      var(--bp-split-col-2, minmax(0, 1.35fr));
  }
}

@media (max-width: 899px) {
  .bp-split--2col-resizable > .bp-resizer,
  .bp-split--2col-resizable > .cp-resizer,
  .vai-layout > .bp-resizer,
  .vai-layout > .cp-resizer {
    display: none;
  }
}

/* Three panes + two drag gutters (resizer columns use --bp-split-gutter width) */
.bp-split--3col,
.messages-split,
.messages-cards-grid,
.cp-cards-grid {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 0;
  grid-template-columns:
    var(--bp-split-col-1, minmax(0, 1fr))
    var(--bp-split-gutter, 1rem)
    var(--bp-split-col-2, minmax(0, 1.35fr))
    var(--bp-split-gutter, 1rem)
    var(--bp-split-col-3, minmax(0, 1fr));
}

.messages-split,
.messages-cards-grid {
  --bp-split-col-1: var(--msg-col-inbox, minmax(0, 1.05fr));
  --bp-split-col-2: minmax(0, 2fr);
  --bp-split-col-3: var(--msg-col-notes, minmax(240px, 320px));
}

.cp-cards-grid {
  --bp-split-col-1: var(--cp-col-left, minmax(0, 2fr));
  --bp-split-col-2: var(--cp-col-mid, minmax(0, 1.5fr));
  --bp-split-col-3: minmax(0, 1fr);
}

.bp-split__pane,
.bp-split--3col > .card,
.bp-split--3col > aside,
.cp-cards-grid > .card,
.messages-split > .card,
.messages-split > aside,
.messages-cards-grid > .card,
.messages-cards-grid > aside {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
}

.bp-split--3col > .card > .card-header,
.cp-cards-grid > .card > .card-header,
.messages-split > .card > .card-header,
.messages-cards-grid > .card > .card-header {
  flex-shrink: 0;
}

.bp-split--3col > .card > .card-body,
.cp-cards-grid > .card > .card-body,
.messages-split > .card > .card-body,
.messages-cards-grid > .card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bp-split__scroll,
.messages-inbox-scroll {
  overflow-y: auto;
  min-height: 0;
}

/* Full-height page shell — split grid fills remaining viewport below header chrome */
.bp-split-page,
.messages-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: var(--bp-card-stack-gap);
  padding-bottom: 0;
}

.bp-split-page > .bp-split--3col,
.bp-split-page > .messages-split,
.bp-split-page > .messages-cards-grid,
.messages-page > .messages-split,
.messages-page > .messages-cards-grid {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.contact-profile-page {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: calc(100dvh - var(--topbar-h) - 1px);
  gap: var(--bp-card-stack-gap);
  padding-bottom: 0;
  min-height: 0;
  overflow: hidden;
}

.contact-profile-page > .cp-cards-grid {
  min-height: 0;
  overflow: hidden;
}

/* ── Contact profile — header & summary ──────────────────────────────────── */

.cp-readonly-field[readonly],
.cp-readonly-field.form-input {
  background: var(--c-bg);
  color: var(--c-text-muted);
  cursor: default;
  resize: vertical;
}

.cp-readonly-field[readonly]:focus,
.cp-readonly-field.form-input:focus {
  outline: none;
  box-shadow: none;
}

.cp-page-header,
.cp-summary-card {
  margin-bottom: 0;
}

.cp-summary-card,
.cp-summary-card .card-body {
  overflow: visible;
}

.cp-summary {
  display: flex;
  align-items: center;
  gap: .85rem;
  overflow: visible;
}

.cp-summary-name-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.cp-summary-name-row .contacts-name-badges {
  margin-left: 0;
}

.cp-summary-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--c-text);
}

.cp-summary-contacts {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--c-text-muted);
}

.cp-summary-contacts a {
  font-weight: 500;
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cp-summary-sep {
  color: var(--c-border);
  flex-shrink: 0;
}

.cp-summary-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
  flex: 1 1 0;
  min-width: 0;
  justify-content: flex-end;
  overflow: visible;
}

.cp-summary-stats>.cp-stat:not(.cp-stat--tags):not(.cp-stat--source) {
  flex: 0 0 auto;
}

.cp-summary-main {
  min-width: 0;
  flex: 0 1 auto;
}

.cp-stat--tags {
  flex: 2 1 0;
  min-width: 8rem;
  align-items: flex-end;
  overflow: visible;
}

.cp-stat--source {
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  align-items: flex-end;
  overflow: visible;
}

.cp-stat--created {
  flex: 0 0 auto;
  align-items: flex-end;
}

.cp-stat-source-editor {
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
  overflow: visible;
  justify-content: flex-end;
}

.cp-stat-source-editor>.cp-stat-tags-input,
.cp-stat-source-editor .tag-input-field {
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
}

.cp-stat-source-utm {
  flex-shrink: 0;
}

.cp-stat-tags-input {
  width: 100%;
  min-width: 0;
  font-weight: 400;
  overflow: visible;
}

.cp-stat-tags-input .tag-input-field {
  flex-wrap: wrap;
  overflow: visible;
  justify-content: flex-end;
}

.cp-stat-tags-input .tag-input-field .tag-pill,
.cp-stat-tags-input .tag-input-field .tag-input-add-wrap {
  flex-shrink: 0;
}

.contacts-tag-filter-wrap {
  position: relative;
  min-width: 10.5rem;
  max-width: 14rem;
}

.contacts-source-filter-wrap {
  position: relative;
  min-width: 10.5rem;
  max-width: 16rem;
}

.contacts-range-wrap {
  display: contents;
}

.contacts-range-wrap .form-select-wrap {
  width: auto;
  min-width: 10.5rem;
  max-width: 14rem;
  display: inline-flex;
}

.contacts-source-filter-wrap .form-select-wrap,
.contacts-tag-filter-wrap .form-select-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
}

.contacts-source-filter-wrap .form-select-trigger,
.contacts-tag-filter-wrap .form-select-trigger {
  width: 100%;
}

.tag-combobox {
  position: relative;
}

.tag-combobox-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.tag-combobox-input {
  width: 100%;
  padding-right: 1.75rem;
}

.tag-combobox-clear {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: .15rem .35rem;
  border-radius: var(--radius);
}

.tag-combobox-clear:hover {
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-text) 8%, transparent);
}

.tag-combobox .tag-input-dropdown {
  left: 0;
  right: 0;
}

.tag-input-dropdown.tag-combobox-dropdown--floating {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 400;
  max-height: min(220px, calc(100vh - 16px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cp-stat {
  display: flex;
  flex-direction: column;
  font-size: .72rem;
  color: var(--c-text-muted);
  line-height: 1.35;
  text-align: right;
}

.cp-stat-date {
  font-weight: 600;
}

.card-header.cp-tabs-header {
  padding: .55rem .85rem;
}

.cp-tabs-header .analytics-tabs {
  margin: 0;
  padding: .15rem 0;
  border-bottom: none;
}

#contact-info,
#contact-messages {
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-width: 900px) {
  .cp-summary {
    flex-wrap: wrap;
  }

  .cp-summary-stats {
    margin-left: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .cp-stat--tags,
  .cp-stat--source,
  .cp-stat--created {
    flex: 1 1 100%;
    align-items: flex-start;
  }

  .cp-stat-tags-input .tag-input-field,
  .cp-stat-source-editor {
    justify-content: flex-start;
  }
}

html:has(.messages-page),
html:has(.bp-split-page) {
  overflow: hidden;
}

html:has(.messages-page) .dash,
html:has(.bp-split-page) .dash {
  min-height: 0;
  height: calc(100dvh - var(--impersonation-banner-h, 0px));
}

html:has(.messages-page) .main,
html:has(.bp-split-page) .main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

html:has(.messages-page) .dashboard-stage,
html:has(.bp-split-page) .dashboard-stage {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html:has(.messages-page) .dashboard-stage > .page-content.messages-page,
html:has(.bp-split-page) .dashboard-stage > .page-content.bp-split-page {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 960px) {
  .bp-split--2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  html:has(.messages-page),
  html:has(.bp-split-page) {
    overflow: auto;
  }

  html:has(.messages-page) .dash,
  html:has(.bp-split-page) .dash {
    height: auto;
    min-height: 100dvh;
  }

  html:has(.messages-page) .dashboard-stage,
  html:has(.messages-page) .main,
  html:has(.bp-split-page) .dashboard-stage,
  html:has(.bp-split-page) .main {
    display: block;
    overflow: visible;
    height: auto;
  }

  .messages-page,
  .bp-split-page {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-bottom: 1.5rem;
  }

  .bp-split--3col,
  .messages-split,
  .messages-cards-grid,
  .cp-cards-grid {
    grid-template-columns: 1fr;
    height: auto !important;
    overflow: visible;
    gap: var(--bp-card-stack-gap);
  }

  .bp-split--3col > .cp-resizer,
  .messages-split > .cp-resizer,
  .messages-cards-grid > .cp-resizer,
  .cp-cards-grid > .cp-resizer {
    display: none;
  }

  .contact-profile-page {
    height: auto;
    overflow: visible;
    padding-bottom: 1.5rem;
  }

  .cp-cards-grid > .card {
    max-height: none;
    min-height: 0;
  }

  #contact-info,
  #contact-messages {
    max-height: 420px;
  }

  .messages-inbox-card {
    max-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .messages-thread-pane {
    min-height: 460px;
  }

  .messages-notes-card {
    min-height: 240px;
  }

  .cp-notes-body .bp-private-notes-input,
  .cp-notes-body .form-textarea {
    min-height: 200px;
    max-height: 320px;
    resize: vertical;
  }
}

/* Legacy pane aliases */
.messages-inbox-card,
.messages-detail-card {
  min-width: 0;
  min-height: 0;
}

/* ── Messages page (inbox, thread, compose) ─────────────────────────────── */

/* Notes — Messages sidebar + Contact Profile tab */
.cp-notes-body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  overflow: hidden;
}

.cp-notes-body .form-textarea,
.messages-notes-input {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  resize: none;
  overflow-y: auto;
  font-size: .875rem;
  line-height: 1.5;
  background: color-mix(in srgb, var(--c-surface) 82%, var(--c-bg));
}

.messages-notes-status {
  flex-shrink: 0;
  margin: 0;
}

.messages-panel-head-label {
  flex: 0 0 auto;
}

.messages-panel-head--inbox .msg-select-all-cb {
  --checkbox-size: 1rem;
}

.messages-inbox-body {
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.messages-inbox-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.messages-inbox-scroll .msg-bulk-bar {
  flex-shrink: 0;
}

.messages-conversation-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.messages-inbox-card,
.messages-left-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.msg-select-all-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.msg-select-all-cb {
  --checkbox-size: 1rem;
  cursor: pointer;
}


.card-body--flush>.contacts-bulk-bar[hidden]+.contacts-table-wrap {
  padding-top: var(--bp-card-inset);
}

.card-body--flush>.contacts-bulk-bar:not([hidden])+.contacts-table-wrap {
  padding-top: 0;
}

.msg-row-wrap {
  position: relative;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--bp-card-section-radius);
  background: var(--bp-card-section-bg);
  box-shadow: var(--bp-shadow);
  overflow: hidden;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.msg-row-wrap:hover {
  box-shadow: var(--bp-shadow-hover);
}

.msg-row-wrap--active {
  background: color-mix(in srgb, var(--c-primary-light) 78%, var(--bp-card-section-bg));
  box-shadow: var(--bp-shadow-hover);
}

.msg-row-wrap--read:not(.msg-row-wrap--active) {
  background: color-mix(in srgb, var(--c-bg) 55%, var(--bp-card-section-bg));
}

.msg-row-cb-wrap {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 .4rem 0 .75rem;
  z-index: 1;
  cursor: pointer;
}

.msg-row-cb {
  --checkbox-size: 1rem;
  cursor: pointer;
}

.messages-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--bp-card-inset);
  padding: 0 var(--bp-card-inset) var(--bp-card-inset);
}

.messages-list > :is(.msg-row-wrap, .messages-inline-controls) {
  flex-shrink: 0;
}

.messages-inbox-scroll .messages-list {
  padding-top: 0;
}

.messages-conversation-card,
.messages-main-pane {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.messages-thread-pane {
  min-width: 0;
}

.messages-detail,
.messages-thread-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.messages-detail {
  padding: 0;
  overflow: hidden;
}

.messages-detail-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  min-height: 0;
}

.messages-contact-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  margin-bottom: var(--bp-card-inset);
}

.messages-contact-head-main {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  width: 100%;
}

.messages-detail-contact {
  margin: 0;
}

.messages-detail-contact-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 400;
  color: var(--c-text-muted);
}

.messages-detail-contact-sep {
  color: var(--c-border);
  flex-shrink: 0;
}

.messages-contact-link {
  font-weight: 500;
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.messages-contact-link--name {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.messages-contact-deleted {
  font-weight: 400;
  color: var(--c-text-muted);
  font-size: .85em;
}


.messages-detail-shell>.messages-detail-state {
  padding: var(--bp-card-inset);
  margin: 0;
}

.messages-detail-state {
  margin: 0;
  color: var(--c-text-muted);
}

.messages-reply-area {
  flex-shrink: 0;
}

.messages-reply-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.compose-panel {
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}

.compose-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--c-border);
  padding: 0 .75rem;
}

.compose-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .85rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--c-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.compose-tab:hover {
  color: var(--c-text);
}

.compose-tab.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

.compose-to-label {
  margin-left: auto;
  padding: 0 .25rem;
}

.compose-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .65rem .75rem .75rem;
}

.compose-subject-row .form-input {
  width: 100%;
  font-size: .88rem;
}

.compose-fmt-toolbar {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}

.compose-fmt-btn {
  padding: .2rem .5rem;
  font-size: .8rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: .3rem;
  cursor: pointer;
  color: var(--c-text);
  line-height: 1.4;
  transition: background .12s;
}

.compose-fmt-btn:hover {
  background: var(--c-surface-2, var(--c-border));
}

.compose-fmt-sep {
  width: 1px;
  height: 1.2rem;
  background: var(--c-border);
  margin: 0 .15rem;
}

.compose-body-sms {
  resize: vertical;
  min-height: 4.5rem;
  font-size: .88rem;
}

.compose-body-email {
  min-height: 5rem;
  max-height: 14rem;
  overflow-y: auto;
  padding: .5rem .65rem;
  border: 1px solid var(--c-border);
  border-radius: .4rem;
  font-size: .88rem;
  line-height: 1.55;
  background: var(--c-bg);
  color: var(--c-text);
  outline: none;
}

.compose-body-email:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 18%, transparent);
}

.compose-footer {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.messages-reply-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.messages-notes-card {
  min-height: 0;
  overflow: hidden;
}

.messages-notes-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.messages-notes-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .625rem .75rem 1rem 1rem;
  overflow: hidden;
}

.messages-list-state {
  padding: 2rem 1rem;
  margin: 0 var(--bp-card-inset) var(--bp-card-inset);
  border: 1px solid transparent;
  border-radius: var(--bp-card-section-radius);
  background: var(--bp-card-section-bg);
  box-shadow: var(--bp-shadow);
  text-align: center;
}

.messages-inline-controls {
  padding: 1rem;
  display: flex;
  justify-content: center;
}

.msg-row-actions-dock {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  display: inline-flex;
  gap: .35rem;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}

.msg-row-actions-dock.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.msg-row-actions-dock .btn {
  min-width: 2rem;
  min-height: 2rem;
  padding: .3rem .55rem;
}

.msg-row {
  all: unset;
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  padding: .625rem .75rem .625rem 1rem;
  border: none;
  background: transparent;
  transition: background .15s ease;
}

.msg-row-wrap .msg-row {
  padding-left: 2.5rem;
}

.msg-row-wrap:hover .msg-row {
  background: color-mix(in srgb, var(--c-primary-light) 35%, transparent);
}

.msg-row-wrap--active .msg-row,
.msg-row-wrap--active:hover .msg-row {
  background: transparent;
}

.msg-row.has-notification:before {
  content: "";
  position: absolute;
  left: .55rem;
  top: .625rem;
  bottom: .625rem;
  width: 3px;
  border-radius: 999px;
  background: var(--c-primary);
  opacity: .95;
}

.msg-row,
.msg-row:active,
.msg-row:focus {
  outline: none;
}

.msg-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 24%, transparent);
}

.msg-row__inner {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

.msg-row__content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.msg-row__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

.msg-row__sender {
  flex: 1;
  min-width: 0;
  font-weight: var(--msg-row-sender-weight, 600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-row__deleted {
  font-weight: 400;
  color: var(--c-text-muted);
}

.msg-row__time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.msg-row__subject {
  margin-top: .25rem;
  font-weight: var(--msg-row-subject-weight, 500);
  color: var(--msg-row-subject-color, var(--c-text-muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-row__count {
  margin-top: .2rem;
}

@media (max-width:768px) {
  .messages-toolbar-actions {
    width: 100%;
  }

  .messages-filter-select {
    flex: 1 1 180px;
    min-width: 0;
  }

  .messages-detail,
  .messages-notes-content {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .messages-reply-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:480px) {
  .messages-toolbar-actions>* {
    width: 100%;
  }

  .messages-thread-pane {
    min-height: 400px;
  }

  .msg-row {
    padding: .625rem .75rem;
  }
}

/* ── 24. Bulk / selection bar ─────────────────────────────────────────────── */
/*
 * Shown when rows are checked — "15 selected" + actions (contacts, messages, …)
 *
 * Place above the table/card via `.bp-table-shell` (bar + `.card` sibling).
 * Inbox lists: bar sits between panel head and scroll body inside `.messages-inbox-body`.
 *
 * Bar:   .bp-selection-bar  (alias: .contacts-bulk-bar, .msg-bulk-bar, .bp-bulk-bar)
 * Count: .bp-selection-count (alias: .contacts-bulk-count, .msg-bulk-count)
 */

.bp-table-shell {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
}

.bp-table-shell > .card {
  min-width: 0;
}

.bp-selection-bar,
.bp-bulk-bar,
.contacts-bulk-bar,
.msg-bulk-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin: 0;
  padding: .5rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--bp-card-section-radius);
  background: color-mix(in srgb, var(--c-primary) 8%, var(--bp-card-section-bg));
  box-shadow: var(--bp-shadow);
}

.bp-selection-bar[hidden],
.bp-bulk-bar[hidden],
.contacts-bulk-bar[hidden],
.msg-bulk-bar[hidden] {
  display: none !important;
}

.bp-selection-count,
.bp-bulk-count,
.contacts-bulk-count,
.msg-bulk-count {
  flex: 1;
  min-width: 0;
  margin-right: .25rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-primary-color, var(--c-primary));
  font-variant-numeric: tabular-nums;
}

.messages-inbox-body > .bp-selection-bar,
.messages-inbox-body > .msg-bulk-bar {
  flex-shrink: 0;
  margin-inline: var(--bp-card-inset);
}

/* ── Lead order place modal ─────────────────────────────────────────────── */

.lead-order-place-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
  gap: 1.25rem;
  align-items: start;
}

.lead-order-place-layout__form {
  min-width: 0;
}

.lead-order-place-layout__receipt {
  min-width: 0;
  position: sticky;
  top: 0;
}

.lead-order-place-layout__disclaimer {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  font-size: .72rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}

.lead-order-place-field-static {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: .95rem;
}

.lead-order-receipt {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.lead-order-receipt__head {
  padding: .75rem 1rem;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  font-weight: 600;
  font-size: .9rem;
}

.lead-order-receipt__body {
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .9rem;
}

.lead-order-receipt__row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}

.lead-order-receipt__row--total {
  font-weight: 700;
  padding-top: .5rem;
  border-top: 1px solid var(--c-border);
}

.lead-order-receipt__foot {
  padding: .65rem 1rem;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  font-size: .83rem;
  color: var(--c-text-muted);
}

.lead-order-receipt-loading {
  font-size: .85rem;
  color: var(--c-text-muted);
}

@media (max-width: 720px) {
  .lead-order-place-layout {
    grid-template-columns: 1fr;
  }

  .lead-order-place-layout__receipt {
    position: static;
  }
}

/* ── 25. Progress track ──────────────────────────────────────────────────── */

.bp-progress,
.lead-order-progress {
  flex: 1;
  height: 8px;
  background: var(--c-border);
  border-radius: 4px;
  overflow: hidden;
}

.bp-progress-fill,
.lead-order-progress-fill {
  height: 100%;
  background: var(--c-primary-color, var(--c-primary));
  border-radius: inherit;
  transition: width .3s var(--ease);
}

.modal-progress {
  margin-top: .75rem;
}

.modal-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .4rem;
}

.modal-progress-track {
  height: 8px;
  background: var(--c-border);
  border-radius: 4px;
  overflow: hidden;
}

.modal-progress-fill {
  height: 100%;
  width: 0;
  background: var(--c-primary-color, var(--c-primary));
  border-radius: inherit;
  transition: width .3s var(--ease);
}

/* ── 26. Inline banner ───────────────────────────────────────────────────── */

.bp-banner,
.action-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .55rem .75rem;
  background: var(--bp-card-bg);
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  font-size: .8125rem;
  color: var(--c-text);
  box-shadow: var(--bp-shadow);
}

.bp-banner-link,
.action-banner-link {
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--c-text-muted);
  background: var(--bp-card-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--bp-shadow);
  cursor: pointer;
  text-decoration: none;
}

.bp-banner-close,
.action-banner-close {
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted);
  background: var(--bp-card-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--bp-shadow);
  cursor: pointer;
}

/* ── 27. Auth layout ─────────────────────────────────────────────────────── */

.bp-auth-grad-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-bg);
}

#auth-bg-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: min(48vh, 520px);
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.bp-auth-grad-bg .auth-bg-ribbon {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: auth-ribbon-drift 92s linear infinite;
  will-change: transform;
}

.bp-auth-grad-bg .auth-bg-ribbon path {
  animation: auth-ribbon-scroll 128s linear infinite;
  will-change: transform;
}

.bp-auth-grad-bg .auth-bg-ribbon:nth-child(odd) path {
  animation-direction: reverse;
}

.bp-auth-grad-bg > :not(#auth-bg-svg) {
  position: relative;
  z-index: 1;
}

@keyframes auth-ribbon-scroll {
  0% { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes auth-ribbon-drift {
  0% {
    transform: translateY(calc(var(--ribbon-base-y, 0px) - 7px)) scale(1.07, var(--ribbon-base-scale-y, 1));
    opacity: 1;
  }

  50% {
    transform: translateY(calc(var(--ribbon-base-y, 0px) + 7px)) scale(1.04, calc(var(--ribbon-base-scale-y, 1) * .97));
    opacity: 1;
  }

  to {
    transform: translateY(calc(var(--ribbon-base-y, 0px) - 7px)) scale(1.07, var(--ribbon-base-scale-y, 1));
    opacity: 1;
  }
}

[data-theme=dark] #auth-bg-svg {
  opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
  .bp-auth-grad-bg .auth-bg-ribbon,
  .bp-auth-grad-bg .auth-bg-ribbon path {
    animation: none !important;
  }
}

.bp-auth-layout,
.auth-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 2rem);
}

.bp-auth-card,
.auth-card {
  width: min(100%, 420px);
  padding: 2rem;
  background: var(--c-surface);
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  box-shadow: var(--bp-shadow);
}

.bp-auth-card--wide,
.auth-card--wide {
  width: min(100%, 540px);
}

.bp-auth-logo,
.auth-logo {
  display: block;
  margin: 0 auto 1.5rem;
  height: 40px;
}

.bp-auth-title,
.auth-title {
  margin: 0 0 1.25rem;
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  color: var(--c-text);
}

.bp-auth-footer,
.auth-footer {
  text-align: center;
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--c-text-muted);
}

.auth-footer a {
  color: var(--c-primary);
  font-weight: 500;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.auth-footer--stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}

.auth-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .15rem;
}

.auth-footer__sep {
  color: var(--c-text-muted);
  user-select: none;
}

.bp-auth-divider,
.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .25rem 0;
  color: var(--c-text-muted);
  font-size: .8rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
}

.auth-legal-consent {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: .5rem 0 0;
  cursor: pointer;
}

.auth-legal-consent .form-checkbox {
  margin-top: .18rem;
  flex: 0 0 auto;
}

.auth-legal-consent__text {
  font-size: .82rem;
  color: var(--c-text-muted);
  line-height: 1.45;
  margin: 0;
}

.auth-legal-consent__text a {
  color: var(--c-primary);
  text-decoration: underline;
}

/* OAuth chip — same chrome as `.btn-secondary`, centered icon + label */
.btn-google {
  justify-content: center;
  gap: .6rem;
}

.btn-google:hover {
  text-decoration: none;
}

/* ── 28. Loading (spinner) ───────────────────────────────────────────────── */

.spinner,
.bp-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid color-mix(in srgb, var(--c-primary) 20%, transparent);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: bp-spin .7s linear infinite;
}

@keyframes bp-spin {
  to { transform: rotate(360deg); }
}

/* ── 29. Route progress bar ──────────────────────────────────────────────── */

.bp-route-loader,
.page-nav-loader {
  display: none;
  position: fixed;
  top: var(--impersonation-banner-h, 0px);
  right: 0;
  left: 0;
  z-index: 30;
  opacity: 1;
  transition: opacity .24s var(--ease);
  pointer-events: none;
}

.bp-route-loader.is-active,
.bp-route-loader.is-fading,
.page-nav-loader.is-fading,
html.nav-loading .page-nav-loader {
  display: block;
}

.bp-route-loader.is-fading,
.page-nav-loader.is-fading {
  opacity: 0;
}

.bp-route-loader .lead-order-progress,
.page-nav-loader .lead-order-progress {
  flex: none;
  width: 100%;
  height: 8px;
  border-radius: 0;
}

.bp-route-loader__fill,
.page-nav-loader__fill {
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: var(--c-primary);
  transition: none;
  animation: page-nav-loader-slide 1.15s ease-in-out infinite;
  will-change: transform;
}

@keyframes page-nav-loader-slide {
  0% { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
  .page-nav-loader,
  .page-nav-loader__fill {
    transition: none !important;
    animation: none !important;
  }

  .page-nav-loader__fill {
    width: 35%;
    transform: translateX(20%);
  }
}

/* ── 30. Empty / upgrade gate ────────────────────────────────────────────── */

.bp-empty-state,
.upgrade-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  padding: 2.5rem 1.5rem;
  color: var(--c-text-muted);
}

.bp-empty-state-title,
.upgrade-gate-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-text);
}

.bp-empty-state-body,
.upgrade-gate-body {
  margin: 0;
  max-width: 28rem;
  line-height: 1.6;
}

/* ── 31. Utilities ─────────────────────────────────────────────────────── */

[data-notification] {
  position: relative;
}

[data-notification].has-notification::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f97316;
  box-shadow: 0 0 0 2px var(--c-surface);
  pointer-events: none;
  z-index: 1;
}

.form-group[data-notification].has-notification::after {
  display: none;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.text-muted { color: var(--c-text-muted); }
.text-danger { color: var(--c-danger); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}


/* ── 32. Calendar ────────────────────────────────────────────────────────── */
/*
 * Generic schedule/calendar primitives (`cal-*`). Reusable on any calendar view.
 *
 * Layout:     .cal-grid, .cal-grid-month | --week | --day, .cal-scroll-wrap
 * Cells:      .cal-day, .cal-day-header, .cal-day-num, .cal-day-events
 * Events:     .cal-chip (+ status / span / timed modifiers)
 * Time axis:  .cal-time-label, .cal-time-slot, .cal-allday-section
 * Chrome:     .cal-toolbar, .cal-nav, .cal-view-toggle, .cal-view-btn
 * Side panel: .cal-sidebar, .cal-upcoming-*
 * Resources:  .cal-resource-toggle* (alias: .cal-agent-toggle*)
 *
 * Page-only: .cal-page, .cal-widget-*, .cal-modal-*
 */

.bp-accent-swatch,
.cal-agent-toggle-swatch,
.cal-resource-toggle-swatch,
.color-picker-swatch {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--bp-accent-swatch-color, var(--cal-resource-color, var(--c-primary)));
  border: 1px solid color-mix(in srgb, var(--bp-accent-swatch-color, var(--cal-resource-color, var(--c-primary))) 70%, #000);
  pointer-events: none;
}

.bp-accent-swatch--md {
  width: 40px;
  height: 40px;
  border-radius: calc(var(--radius) - 2px);
  transition: background-color .1s var(--ease);
}

.cal-agent-toggle-swatch,
.cal-resource-toggle-swatch,
.bp-accent-swatch--sm {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.bp-accent-swatch--xs {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.cal-page,
.page-content.cal-page {
  min-height: 0;
  overflow: hidden
}

.cal-page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  gap: var(--bp-card-stack-gap);
  flex: 1
}

@media (min-width:1024px) {
  .cal-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr
  }

  .cal-page>.page-header {
    grid-column: 1/-1
  }

  .cal-page>.card:has(.cal-page-tabs) {
    grid-column: 1/-1
  }

  .cal-page>.cal-panel.cal-cards-grid {
    grid-column: 1/-1;
    display: grid;
    --bp-split-col-2: var(--cal-col-upcoming, minmax(240px, 300px));
    grid-template-columns:
      var(--bp-split-col-1, minmax(0, 1fr))
      var(--bp-split-gutter, 1rem)
      var(--bp-split-col-2, minmax(240px, 300px));
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    align-items: stretch
  }

  .cal-page>.cal-panel.cal-cards-grid>.cal-sidebar,
  .cal-page>.cal-panel.cal-cards-grid>.card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0
  }

  .cal-page>.cal-panel.cal-cards-grid>.cal-sidebar {
    gap: .75rem
  }

  .cal-page>.cal-panel.cal-cards-grid>.cal-card>.cal-grid,
  .cal-page>.cal-panel.cal-cards-grid>.card>.card-body {
    min-height: 0
  }
}

@media (max-width:1023px) {
  .cal-panel.cal-cards-grid>.cp-resizer {
    display: none
  }
}

.cal-panel.hidden {
  display: none !important
}

.cal-panel.cal-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0
}

.cal-page-tabs {
  margin: 0
}

.cal-widget-card+.cal-widget-card {
  margin-top: 1rem
}

.cal-widget-stack {
  display: flex;
  flex-direction: column;
  gap: .9rem
}

.cal-widget-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem
}

.cal-widget-copy,
.cal-widget-help {
  font-size: .85rem;
  margin: 0
}

.cal-widget-agent-context {
  margin: 0;
  font-size: .88rem;
  color: var(--c-text-muted)
}

.cal-widget-code,
.cal-widget-webhook-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  font-size: .82rem
}

.cal-widget-code {
  min-height: 180px;
  line-height: 1.45;
  resize: vertical
}

.cal-widget-actions {
  display: flex;
  justify-content: flex-end
}

@media (max-width:700px) {
  .cal-widget-field-row {
    grid-template-columns: 1fr
  }

  .cal-widget-actions {
    justify-content: stretch
  }

  .cal-widget-actions .btn,
  .cal-widget-field-row .btn {
    width: 100%
  }
}

.cal-toolbar {
  gap: 1rem;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none
}

.cal-toolbar--inset {
  margin: 0;
  width: 100%
}

.cal-nav,
.cal-toolbar {
  display: flex;
  align-items: center
}

.cal-nav {
  gap: .4rem
}

.cal-nav-btn {
  width: 2rem;
  height: 2rem;
  padding: 0
}

.cal-today-inline {
  font-size: .78rem;
  padding: .25rem .65rem;
  background: var(--bp-card-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--bp-shadow);
  color: var(--c-text-muted);
  font-weight: 500
}

.cal-today-inline:hover {
  background: var(--c-bg);
  box-shadow: var(--bp-shadow-hover);
  color: var(--c-text)
}

.cal-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 .4rem;
  min-width: 160px;
  white-space: nowrap;
  color: var(--c-text)
}

.cal-view-toggle {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-left: auto;
  border: none;
  background: transparent
}

.cal-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: var(--btn-chrome-bg);
  box-shadow: var(--bp-shadow);
  color: var(--c-text-muted);
  padding: .38rem .75rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap
}

.cal-view-btn:hover:not(.active) {
  color: var(--c-text);
  background: var(--btn-chrome-bg-hover);
  box-shadow: var(--bp-shadow-hover)
}

.cal-view-btn.active {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--btn-chrome-bg));
  font-weight: 600;
  box-shadow: var(--bp-shadow-hover)
}

.cal-view-btn:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus)
}

.cal-view-btn.active:focus-visible {
  box-shadow: var(--bp-shadow-hover)
}

.cal-card {
  flex-direction: column
}

.cal-card,
.cal-grid {
  overflow: hidden;
  min-height: 0;
  display: flex
}

.cal-grid {
  flex: 1;
  flex-direction: column;
  --cal-grid-line: color-mix(in srgb, var(--c-border) 48%, transparent)
}

.cal-grid-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(var(--cal-week-rows, 6), minmax(0, 1fr));
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 1px;
  background: var(--cal-grid-line, color-mix(in srgb, var(--c-border) 48%, transparent))
}

.cal-day-header {
  padding: .35rem .25rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-muted);
  background: var(--bp-card-section-bg)
}

.cal-day,
.cal-day-header {
  border-bottom: none
}

.cal-day {
  min-height: 0;
  min-width: 0;
  border-right: none;
  cursor: default;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: visible;
  overflow-y: hidden;
  background: var(--bp-card-bg)
}

.cal-day:nth-child(7n) {
  border-right: none
}

.cal-day:hover {
  background: color-mix(in srgb, var(--bp-card-section-bg) 55%, var(--bp-card-bg))
}

.cal-day.outside {
  opacity: .55;
  background: color-mix(in srgb, var(--bp-card-section-bg) 35%, var(--bp-card-bg))
}

.cal-day.today {
  background: color-mix(in srgb, var(--c-primary-light) 42%, var(--bp-card-bg))
}

.cal-day.today:hover {
  background: color-mix(in srgb, var(--c-primary-light) 52%, var(--bp-card-bg))
}

.cal-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: .8rem;
  font-weight: 500;
  border-radius: 50%;
  margin: .15rem 0 .2rem .15rem;
  flex-shrink: 0
}

.cal-day-events {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 .15rem .15rem
}

.cal-day-events-chips {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.cal-day.today .cal-day-num {
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--bp-shadow)
}

.cal-chip {
  max-width: 100%;
  flex-shrink: 0;
  font-size: .7rem;
  line-height: 1.25;
  min-height: 1.35rem;
  padding: .18rem .45rem;
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--bp-shadow);
  cursor: pointer;
  font-weight: 500;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease)
}

.cal-chip,
.cal-chip-label {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.cal-chip-label strong {
  font-weight: 700
}

.cal-chip-agent {
  font-weight: 500;
  opacity: .9
}

.cal-chip:hover {
  filter: none;
  box-shadow: var(--bp-shadow-hover);
  transform: translateY(-1px)
}

.cal-chip-span:hover,
.cal-chip-timed:hover {
  transform: none
}

.cal-chip-confirmed {
  background: color-mix(in srgb, var(--c-primary) 16%, var(--bp-card-bg));
  color: color-mix(in srgb, var(--c-primary) 82%, var(--c-text))
}

.cal-chip-cancelled {
  background: color-mix(in srgb, var(--c-danger) 14%, var(--bp-card-bg));
  color: color-mix(in srgb, var(--c-danger) 78%, var(--c-text));
  text-decoration: line-through;
  opacity: .88
}

.cal-chip-completed {
  background: color-mix(in srgb, var(--c-success) 16%, var(--bp-card-bg));
  color: color-mix(in srgb, var(--c-success) 75%, var(--c-text))
}

.cal-chip-no_show {
  background: color-mix(in srgb, var(--c-warning) 18%, var(--bp-card-bg));
  color: color-mix(in srgb, var(--c-warning) 72%, var(--c-text))
}

.cal-chip-block {
  background: color-mix(in srgb, var(--c-text-muted) 18%, var(--bp-card-bg)) !important;
  color: var(--c-text-muted) !important;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, color-mix(in srgb, var(--c-text-muted) 10%, transparent) 0, color-mix(in srgb, var(--c-text-muted) 10%, transparent) 6px) !important
}

.cal-chip-holiday {
  background: color-mix(in srgb, #e74c3c 18%, var(--bp-card-bg));
  color: color-mix(in srgb, #e74c3c 78%, var(--c-text));
  font-weight: 600
}

.cal-chip-enrollment {
  background: color-mix(in srgb, #2980b9 18%, var(--bp-card-bg));
  color: color-mix(in srgb, #2980b9 78%, var(--c-text));
  font-weight: 600
}

.cal-chip-span {
  position: relative;
  z-index: 2
}

.cal-chip-span-start {
  border-radius: var(--radius) 0 0 var(--radius);
  margin-right: -.35rem;
  overflow: visible;
  z-index: 3
}

.cal-chip-span-start .cal-chip-label {
  overflow: visible;
  text-overflow: clip
}

.cal-chip-span-mid {
  border-radius: 0;
  margin-left: 0;
  margin-right: 0
}

.cal-chip-span-end {
  border-radius: 0 var(--radius) var(--radius) 0
}

.cal-chip-timed {
  position: absolute;
  box-sizing: border-box;
  padding: .28rem .45rem;
  line-height: 1.3;
  z-index: 1;
  border: none;
  border-radius: var(--radius)
}

.cal-chip-timed small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cal-chip-timed:hover {
  z-index: 3
}

.cal-more {
  font: inherit;
  font-size: .68rem;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: .12rem .45rem;
  flex-shrink: 0;
  align-self: flex-start;
  position: relative;
  z-index: 5;
  border-radius: var(--radius);
  background: var(--btn-chrome-bg);
  border: none;
  box-shadow: var(--bp-shadow);
  font-weight: 500;
  transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease)
}

.cal-more:hover {
  color: var(--c-primary);
  box-shadow: var(--bp-shadow-hover)
}

.cal-allday-section {
  border-bottom: none;
  flex-shrink: 0;
  background: var(--bp-card-section-bg)
}

.cal-allday-label {
  padding: .25rem .35rem;
  font-size: .7rem;
  color: var(--c-text-muted);
  text-align: right
}

.cal-allday-cell,
.cal-allday-label {
  border-right: none
}

.cal-allday-cell {
  min-height: 28px;
  padding: .15rem;
  background: var(--bp-card-bg)
}

.cal-allday-cell:last-child {
  border-right: none
}

.cal-grid-day,
.cal-grid-week {
  display: grid;
  position: relative
}

.cal-grid-week {
  grid-template-columns: var(--cal-time-gutter-w) repeat(7, minmax(0, 1fr))
}

.cal-grid-day {
  grid-template-columns: var(--cal-time-gutter-w) minmax(0, 1fr)
}

.cal-scroll-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto
}

.cal-time-label {
  padding: .25rem .35rem;
  font-size: .7rem;
  color: var(--c-text-muted);
  text-align: right;
  box-sizing: border-box;
  background: var(--bp-card-section-bg)
}

.cal-time-label,
.cal-time-slot {
  border-right: none;
  height: var(--cal-time-slot-h)
}

.cal-time-slot {
  border-bottom: none;
  position: relative;
  cursor: default;
  transition: background var(--dur) var(--ease);
  background: var(--bp-card-bg)
}

.cal-time-slot:hover {
  background: color-mix(in srgb, var(--bp-card-section-bg) 55%, var(--bp-card-bg))
}

.cal-time-slot:last-child {
  border-right: none
}

.cal-week-header {
  padding: .55rem .25rem;
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-text-muted);
  border-bottom: none;
  border-right: none;
  background: var(--bp-card-section-bg)
}

.cal-grid>.cal-grid-week {
  flex-shrink: 0
}

.cal-scroll-wrap > .cal-grid-week,
.cal-allday-section > .cal-grid-week,
.cal-grid > .cal-grid-day {
  gap: 1px;
  background: var(--cal-grid-line, color-mix(in srgb, var(--c-border) 48%, transparent))
}

.cal-scroll-wrap .cal-time-label,
.cal-scroll-wrap .cal-time-slot,
.cal-allday-section .cal-allday-label,
.cal-allday-section .cal-allday-cell,
.cal-grid > .cal-grid-day .cal-time-label,
.cal-grid > .cal-grid-day .cal-time-slot {
  background: var(--bp-card-bg)
}

.cal-grid-week--header {
  gap: 1px;
  background: var(--cal-grid-line, color-mix(in srgb, var(--c-border) 48%, transparent))
}

.cal-grid-week--header .cal-week-header {
  background: var(--bp-card-section-bg)
}

.cal-week-header.today {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 42%, var(--bp-card-section-bg))
}

.cal-week-header:last-child {
  border-right: none
}

.cal-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.cal-team-calendars {
  flex-shrink: 0
}

.cal-resource-toggle-list,
.cal-agent-toggle-list {
  padding: .35rem .75rem .65rem;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .15rem
}

.cal-resource-toggle,
.cal-agent-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .55rem;
  border-radius: var(--bp-card-section-radius);
  cursor: pointer;
  font-size: .82rem;
  line-height: 1.3;
  user-select: none;
  border: none;
  background: transparent;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease)
}

.cal-resource-toggle:hover,
.cal-agent-toggle:hover {
  background: var(--btn-chrome-bg);
  box-shadow: var(--bp-shadow)
}

.cal-resource-toggle:has(input:not(:checked)),
.cal-agent-toggle:has(input:not(:checked)) {
  opacity: .55
}

.cal-resource-toggle,
.cal-agent-toggle {
  --checkbox-accent: var(--cal-resource-color, var(--cal-agent-color, var(--c-primary)))
}

.cal-resource-toggle-swatch-wrap,
.cal-agent-toggle-swatch-wrap {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0
}

.cal-resource-toggle-name,
.cal-agent-toggle-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cal-resource-toggle-meta,
.cal-agent-toggle-meta {
  font-size: .7rem;
  color: var(--c-text-muted);
  flex-shrink: 0
}

.cal-chip.cal-chip-resource-colored:not(.cal-chip-block),
.cal-chip.cal-chip-agent-colored:not(.cal-chip-block) {
  background: color-mix(in srgb, var(--cal-resource-color, var(--cal-agent-color, var(--c-primary))) 20%, var(--bp-card-bg)) !important;
  color: color-mix(in srgb, var(--cal-resource-color, var(--cal-agent-color, var(--c-primary))) 82%, var(--c-text)) !important
}

.cal-chip.cal-chip-resource-colored.cal-chip-cancelled,
.cal-chip.cal-chip-agent-colored.cal-chip-cancelled {
  opacity: .82;
  text-decoration: line-through
}

.cal-chip.cal-chip-resource-colored.cal-chip-completed,
.cal-chip.cal-chip-agent-colored.cal-chip-completed {
  opacity: .94
}

.cal-chip.cal-chip-resource-colored.cal-chip-no_show,
.cal-chip.cal-chip-agent-colored.cal-chip-no_show {
  background: color-mix(in srgb, var(--cal-agent-color, var(--c-warning)) 14%, color-mix(in srgb, var(--c-warning) 18%, var(--bp-card-bg))) !important;
  color: color-mix(in srgb, var(--c-warning) 72%, var(--c-text)) !important
}

.cal-upcoming {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column
}

.cal-upcoming .card-header {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-muted);
  padding: .6rem .85rem;
  flex-shrink: 0
}

.cal-upcoming .card-body {
  padding: 0 var(--bp-card-inset) var(--bp-card-inset);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--bp-card-inset)
}

@media (max-width:1023px) {
  .cal-upcoming .card-body {
    max-height: 340px
  }
}

.cal-upcoming-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .7rem .75rem;
  border: none;
  border-radius: var(--bp-card-section-radius);
  background: var(--bp-card-section-bg);
  box-shadow: var(--bp-shadow);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease)
}

.cal-upcoming-item:hover {
  box-shadow: var(--bp-shadow-hover)
}

.cal-upcoming-item:last-child {
  border-bottom: none
}

.cal-upcoming-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .35rem
}

.cal-upcoming-swatch {
  margin-top: .3rem;
  border-radius: 3px
}

.cal-upcoming-dot-confirmed {
  background: var(--c-primary)
}

.cal-upcoming-dot-completed {
  background: var(--c-success)
}

.cal-upcoming-dot-cancelled {
  background: var(--c-danger)
}

.cal-upcoming-dot-no_show {
  background: var(--c-warning)
}

.cal-upcoming-dot-block {
  background: #6b7280
}

.cal-upcoming-info {
  min-width: 0;
  flex: 1
}

.cal-upcoming-title {
  font-size: .85rem;
  font-weight: 600
}

.cal-upcoming-title,
.cal-upcoming-with {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.cal-upcoming-with {
  font-size: .8rem;
  color: var(--c-text);
  margin-top: .15rem
}

.cal-upcoming-with-muted {
  color: var(--c-text-muted);
  font-style: italic
}

.cal-upcoming-agent {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0
}

.cal-upcoming-agent>span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cal-upcoming-agent,
.cal-upcoming-time {
  font-size: .75rem;
  color: var(--c-text-muted);
  margin-top: .1rem
}

.cal-upcoming-contact {
  font-size: .75rem;
  color: var(--c-text-light);
  margin-top: .1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.cal-upcoming-meet {
  flex-shrink: 0;
  align-self: center;
  margin-left: .35rem;
  white-space: nowrap
}

.cal-upcoming-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--c-text-muted);
  font-size: .875rem;
  border-radius: var(--bp-card-section-radius);
  background: var(--bp-card-section-bg);
  box-shadow: var(--bp-shadow)
}

.cal-modal,
.cal-widget-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(90dvh, calc(100dvh - 2rem))
}

.cal-modal {
  max-width: 720px;
  width: min(720px, calc(100vw - 2rem))
}

.cal-modal-tabs-wrap {
  padding: var(--bp-card-inset) 1.25rem .75rem;
  border-bottom: none
}

.cal-modal-tabs {
  margin: 0
}

.cal-modal-body {
  display: flex;
  flex-direction: column;
  gap: .9rem
}

.cal-form-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start
}

.cal-form-col {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-width: 0
}

.cal-form-datetimes {
  display: flex;
  flex-direction: column;
  gap: .9rem
}

.cal-form-datetimes .form-group {
  margin: 0
}

.cal-form--block #cal-form-assignee-wrap .form-label:after {
  content: " (calendar owner)";
  font-weight: 500;
  color: var(--c-text-muted)
}

.cal-form-meet-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .85rem;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  background: var(--c-bg)
}

.cal-form-meet-card[hidden] {
  display: none !important
}

.cal-form-meet-card-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0
}

.cal-form-meet-card-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--c-text)
}

.cal-form-meet-card .btn {
  flex-shrink: 0
}

.cal-form-contact-wrap {
  position: relative
}

@media (max-width:640px) {
  .cal-form-split {
    grid-template-columns: 1fr
  }
}

a.cal-hours-link {
  text-decoration: none;
  color: inherit
}

.cal-hours-grid {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.cal-hours-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--c-border)
}

.cal-hours-row .bp-dtp-wrap {
  min-width: 0
}

.cal-hours-row .bp-dtp-trigger {
  height: auto;
  min-height: 2rem;
  padding: .32rem .55rem;
  font-size: .8rem
}

.cal-hours-row:last-child {
  border-bottom: none
}

.cal-hours-day {
  font-weight: 600;
  font-size: .85rem
}

.cal-hours-row input[type=time] {
  font-size: .8rem;
  padding: .3rem .4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text)
}

.cal-hours-row input[type=time]:disabled {
  opacity: .35;
  cursor: not-allowed
}

.cal-hours-row .cal-hours-row-toggle {
  flex-shrink: 0;
  margin: 0
}

.cal-hours-row:has(.cal-hours-enabled:not(:checked)) .cal-hours-day {
  color: var(--c-text-muted);
  font-weight: 500;
}

.cal-hours-row:has(.cal-hours-enabled:not(:checked)) input[type=time]:disabled,
.cal-hours-row:has(.cal-hours-enabled:not(:checked)) .bp-dtp-trigger:disabled {
  opacity: .55;
  color: var(--c-text-muted);
  background: color-mix(in srgb, var(--c-border) 32%, var(--bp-card-bg));
  cursor: not-allowed;
}

.cal-time-slot.unavailable {
  background: repeating-linear-gradient(-45deg, transparent, transparent 4px, color-mix(in srgb, var(--c-text-muted) 8%, transparent) 4px, color-mix(in srgb, var(--c-text-muted) 8%, transparent) 8px);
  cursor: default
}

.cal-day-holidays {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .5rem .75rem;
  border-bottom: none;
  background: var(--bp-card-section-bg);
  flex-shrink: 0
}

.cal-day-holidays .cal-chip {
  font-size: .75rem;
  padding: .25rem .5rem
}

.cal-contact-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: .4rem
}

.cal-contact-option-name {
  font-size: .85rem;
  font-weight: 500
}

.cal-contact-option-sub {
  font-size: .75rem;
  color: var(--c-text-muted)
}

@media (max-width:640px) {
  .cal-chip {
    font-size: .65rem;
    padding: .1rem .25rem
  }

  .cal-title {
    font-size: .95rem;
    min-width: 140px
  }

  .cal-grid-week {
    overflow-x: auto;
    min-width: 600px
  }
}

.cal-widgets-toolbar {
  margin-bottom: 1.25rem
}

.cal-widgets-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 .25rem
}

.cal-widgets-sub {
  margin: 0;
  font-size: .9rem
}

.cal-widgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  overflow: visible
}

.cal-page .cal-panel[data-cal-panel=widget] {
  overflow: visible
}

.cal-widgets-empty {
  margin-top: .5rem
}

.cal-widget-card-item {
  background: color-mix(in srgb, var(--c-surface) 90%, transparent);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--bp-shadow);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 140px
}

.cal-widget-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem
}

.cal-widget-card-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3
}

.cal-widget-card-meta {
  margin: 0;
  font-size: .82rem;
  color: var(--c-text-muted)
}

.cal-widget-card-meta--warn {
  color: var(--c-warning, #b45309)
}

.cal-widget-lead-order-mark {
  margin-left: .12rem;
  font-weight: 700
}

.cal-widget-card-url-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap
}

.cal-widget-card-url {
  word-break: break-all;
  font-size: .82rem
}

.cal-widget-card-team {
  display: flex;
  flex-direction: column;
  gap: .35rem
}

.cal-widget-card-team-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-muted)
}

.cal-widget-card-team-list {
  padding: 0;
  max-height: none;
  overflow: visible
}

.cal-resource-toggle--display,
.cal-agent-toggle--display {
  cursor: default;
  padding: .25rem 0
}

.cal-resource-toggle--display:hover,
.cal-agent-toggle--display:hover {
  background: none
}

.cal-widget-card-actions {
  margin-top: auto;
  padding-top: .35rem
}

.cal-widget-card-top .order-menu-wrap {
  flex-shrink: 0
}

.cal-widget-modal {
  max-width: 760px;
  width: min(760px, calc(100vw - 2rem))
}

.cal-widget-modal-tabs-wrap {
  padding: var(--bp-card-inset) 1.25rem .75rem;
  border-bottom: none
}

.cal-widget-modal-tabs {
  margin: 0
}

.cal-widget-modal-body {
  display: block
}

.cal-widget-tab-panel {
  display: flex;
  flex-direction: column;
  gap: .9rem
}

.cal-widget-tab-panel.hidden {
  display: none
}

.cal-widget-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem 1.5rem;
  align-items: start
}

.cal-widget-setup-col {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0
}

.cal-widget-advanced-limits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem
}

.cal-widget-setup-timing {
  grid-column: 1/-1
}

.cal-widget-setup-timing .cal-widget-minute-field .form-input {
  flex: 1;
  max-width: none;
  min-width: 0
}

.cal-widget-pool-list {
  max-height: 11rem;
  overflow-y: auto;
  padding-right: .15rem
}

.cal-pool-row {
  display: flex;
  align-items: stretch;
  gap: .2rem;
  border-radius: var(--radius-sm)
}

.cal-pool-row .cal-resource-toggle,
.cal-pool-row .cal-agent-toggle {
  flex: 1;
  min-width: 0
}

.cal-pool-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  flex-shrink: 0;
  margin-top: .35rem;
  color: var(--c-text-muted);
  cursor: grab;
  font-size: .95rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  user-select: none
}

.cal-pool-drag-handle:hover {
  color: var(--c-text);
  background: var(--c-bg)
}

.cal-pool-drag-handle:active {
  cursor: grabbing
}

.cal-pool-row--dragging {
  opacity: .55
}

.cal-pool-row--drag-over {
  box-shadow: inset 0 2px 0 var(--c-primary)
}

.cal-pool-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-bg));
  color: var(--c-primary);
  font-size: .68rem;
  font-weight: 700;
  flex-shrink: 0
}

.cal-widget-tab-panel .form-group {
  margin-bottom: 0
}

.cal-widget-location-options {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: .5rem
}

.cal-widget-location-options .toggle-switch {
  margin: 0
}

.cal-widget-minute-field {
  display: flex;
  align-items: center;
  gap: .45rem
}

.cal-widget-minute-field .form-input {
  max-width: 7rem
}

.cal-widget-minute-suffix {
  font-size: .88rem;
  color: var(--c-text-muted);
  flex-shrink: 0
}

.cal-widget-public-url-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap
}

.cal-widget-public-url-label code {
  word-break: break-all
}

.cal-widget-url-copy-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: .15rem .25rem;
  border-radius: 4px;
  color: var(--c-text-muted, #888);
  cursor: pointer;
  line-height: 1;
  opacity: .6;
  transition: opacity .15s
}

.cal-widget-url-copy-btn:hover:not(:disabled) {
  opacity: 1
}

.cal-widget-url-copy-btn:disabled {
  cursor: default
}

.cal-routing-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-top: .35rem
}

.cal-routing-choice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .35rem;
  width: 100%;
  min-height: 100%;
  padding: 1rem 1rem .85rem;
  border: 2px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-bg);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s, background .15s
}

.cal-routing-choice:hover:not(.is-selected) {
  border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border));
  box-shadow: none;
  transform: translateY(-1px)
}

.cal-routing-choice:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px
}

.cal-routing-choice.is-selected {
  border-color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-primary) 35%, transparent)
}

.cal-routing-choice.is-selected .cal-routing-choice-art {
  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface, #f5f6fa))
}

.cal-routing-choice-label {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25
}

.cal-routing-choice-meta {
  font-size: .82rem;
  color: var(--c-text-muted);
  line-height: 1.35
}

.cal-routing-choice-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  margin: .35rem 0 .15rem;
  padding: .5rem .35rem .25rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-surface, #f5f6fa) 70%, transparent);
  transition: background .15s
}

.cal-routing-choice-art img,
.cal-routing-choice-art svg {
  display: block;
  width: 100%;
  max-width: 9.5rem;
  height: auto
}

.cal-routing-choice-icon {
  display: block;
  width: 100%;
  max-width: 9.5rem;
  min-height: 4.5rem;
  background-color: var(--c-primary);
  -webkit-mask: var(--cal-routing-icon) no-repeat center /contain;
  mask: var(--cal-routing-icon) no-repeat center /contain
}

.cal-routing-choice-caption {
  font-size: .76rem;
  color: var(--c-text-muted);
  line-height: 1.4
}

@media (max-width:760px) {

  .cal-routing-choices,
  .cal-widget-advanced-limits,
  .cal-widget-setup-grid {
    grid-template-columns: 1fr
  }
}

/* ── 33. Analytics & charts ──────────────────────────────────────────────── */
/*
 * Charts: .bp-chart-* (aliases: .analytics-*)
 * Detail stack: bold title + note + meta — paths, version rows, audit entries
 */

.bp-detail-cell,
.pb-path-title-cell {
  min-width: 0;
}

.bp-detail-heading,
.pb-path-name-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  min-width: 0;
}

.bp-detail-title,
.pb-path-name {
  font-weight: 600;
  color: var(--c-text);
  min-width: 0;
}

.bp-detail-note,
.pb-path-publish-note {
  margin: 0;
  font-size: .78rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--c-text-muted);
}

.bp-detail-meta,
.pb-path-publish-meta {
  margin: 0;
  font-size: .75rem;
  line-height: 1.35;
  font-weight: 400;
  color: var(--c-text-light);
}

.bp-detail-heading + .bp-detail-note,
.bp-detail-heading + .bp-detail-meta,
.pb-path-name-cell + :is(.pb-path-publish-note, .pb-path-publish-meta, .bp-detail-note, .bp-detail-meta, .text-muted) {
  margin-top: .25rem;
}

.bp-detail-note + .bp-detail-meta,
.pb-path-publish-note + .pb-path-publish-meta {
  margin-top: .15rem;
}

.bp-chart-wrap,
.analytics-chart-wrap {
  width: 100%;
}

.bp-chart-line,
.analytics-line-chart {
  width: 100%;
  height: 220px;
}

.bp-chart-pie-wrap,
.analytics-pie-wrap {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 1.15rem;
  align-items: center;
}

.bp-chart-pie,
.analytics-pie {
  width: 170px;
  height: 170px;
}

.bp-chart-pie-legend,
.analytics-pie-legend {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.bp-chart-pie-item,
.analytics-pie-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: .45rem;
  align-items: center;
}

.bp-chart-pie-item i,
.analytics-pie-item i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: block;
  border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
}

.bp-chart-pie-label,
.analytics-pie-label {
  font-size: .8rem;
  color: var(--c-text-muted);
}

.bp-chart-pie-value,
.analytics-pie-value {
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.bp-chart-retention-wrap,
.analytics-retention-chart-wrap {
  width: 100%;
}

.bp-chart-retention,
.analytics-retention-chart {
  width: 100%;
  height: 260px;
  display: block;
}

.bp-chart-retention-grid,
.analytics-retention-chart-grid {
  stroke: var(--c-border);
  stroke-width: 1;
}

.bp-chart-retention-axis,
.analytics-retention-chart-axis {
  fill: var(--c-text-muted);
  font-size: 10px;
}

.analytics-retention-chart-axis--x {
  font-size: 9px;
}

.bp-chart-retention-pct,
.analytics-retention-chart-pct {
  font-size: 10px;
  font-weight: 600;
}

.bp-chart-retention-dot-value,
.analytics-retention-chart-dot-value {
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}

.bp-chart-retention-area,
.analytics-retention-chart-area {
  stroke: none;
}

.bp-chart-retention-legend,
.analytics-retention-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  margin-top: .65rem;
  font-size: .78rem;
  color: var(--c-text-muted);
}

.bp-chart-retention-legend span,
.analytics-retention-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.bp-chart-retention-legend i,
.analytics-retention-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}

.bp-chart-retention-scroll,
.analytics-retention-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: .2rem;
  scrollbar-width: auto;
}

.analytics-retention-wrap::-webkit-scrollbar {
  height: 18px;
}

.analytics-retention-wrap::-webkit-scrollbar-thumb {
  border-width: 3px;
}

.analytics-retention-meta {
  margin-bottom: .75rem;
}

.bp-chart-legend,
.analytics-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--c-text-muted);
  margin-top: .5rem;
}

.bp-chart-legend span,
.analytics-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.bp-chart-legend i,
.analytics-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.bp-chart-bar-row,
.analytics-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 2.3fr auto;
  gap: .6rem;
  align-items: center;
  margin-bottom: .55rem;
}

.bp-chart-bar-row-label,
.analytics-row-label {
  font-size: .8rem;
  color: var(--c-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-chart-bar-row-track,
.analytics-row-bar-wrap {
  height: 8px;
  border-radius: 999px;
  background: var(--c-border);
  overflow: hidden;
}

.bp-chart-bar-row-fill,
.analytics-row-bar {
  height: 100%;
  border-radius: 999px;
}

.bp-chart-bar-row-value,
.analytics-row-value {
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bp-chart-vbars,
.analytics-vbars {
  display: flex;
  flex-wrap: nowrap;
  gap: .85rem;
  align-items: stretch;
  justify-content: flex-start;
}

.bp-chart-vbar-col,
.analytics-vbar-col {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 0 0 104px;
  min-width: 104px;
}

.bp-chart-vbar-plot,
.analytics-vbar-plot {
  width: 100%;
  display: grid;
  grid-template-rows: auto 170px;
  gap: .3rem;
}

.bp-chart-vbar-meta,
.analytics-vbar-meta {
  width: 100%;
  display: grid;
  grid-template-rows: 2.4em 1.2em 1.2em;
  gap: .3rem;
}

.bp-chart-vbar-top,
.analytics-vbar-top {
  font-size: .75rem;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
}

.analytics-vbar-top.is-drop-high {
  color: var(--c-danger);
}

.analytics-vbar-top.is-drop-low {
  color: var(--c-success);
}

.bp-chart-vbar-track,
.analytics-vbar-track {
  width: 100%;
  height: 170px;
  display: flex;
  align-items: end;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.bp-chart-vbar-fill,
.analytics-vbar-fill {
  width: 100%;
  background: var(--c-primary);
  transition: height .25s var(--ease);
}

.bp-chart-vbar-label,
.analytics-vbar-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-text);
  text-align: center;
  line-height: 1.2;
  width: 100%;
  max-height: 2.4em;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bp-chart-vbar-name,
.bp-chart-vbar-sub,
.analytics-vbar-name,
.analytics-vbar-sub {
  font-size: .72rem;
  color: var(--c-text-muted);
  text-align: center;
}

.analytics-vbar-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

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

@media (max-width: 640px) {
  .bp-chart-pie-wrap,
  .analytics-pie-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .bp-chart-pie-legend,
  .analytics-pie-legend {
    width: 100%;
  }
}

/* ── 34. Messaging bubbles ────────────────────────────────────────────────── */
/*
 * Shared chat bubbles — Messages tab thread + Contact Profile messages card.
 * Rendered by `window.bp.renderMessageBubbleHtml` (public/js/common.js).
 *
 * Thread:  .bp-message-thread  (alias: .messages-thread)
 * Bubble:  .bp-bubble-incoming | .bp-bubble-outgoing
 */

.bp-message-thread,
.messages-thread {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 0 var(--bp-card-inset) var(--bp-card-inset);
}

#contact-messages > .flex-col.gap-3 {
  gap: .75rem;
}

.bp-message-item,
.messages-thread > .flex-col,
#contact-messages .flex-col.gap-3 > .flex-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bp-message-item--outgoing,
.messages-thread > .flex-col[style*="flex-end"],
#contact-messages .flex-col[style*="flex-end"] {
  align-items: flex-end;
}

.bp-message-item--incoming,
.messages-thread > .flex-col[style*="flex-start"],
#contact-messages .flex-col[style*="flex-start"] {
  align-items: flex-start;
}

.bp-bubble-incoming,
.bp-bubble-outgoing {
  padding: .625rem .85rem;
  border: 1px solid transparent;
  border-radius: var(--bp-card-section-radius);
  font-size: .88rem;
  line-height: 1.55;
  word-break: break-word;
  box-shadow: var(--bp-shadow);
}

.bp-bubble-outgoing {
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-section-bg));
  color: var(--c-text);
  border-bottom-right-radius: .35rem;
  align-self: flex-end;
}

.bp-bubble-incoming {
  background: var(--bp-card-section-bg);
  color: var(--c-text);
  border-color: color-mix(in srgb, var(--c-border) 55%, transparent);
  border-bottom-left-radius: .35rem;
  align-self: flex-start;
}

.bp-bubble-incoming pre,
.bp-bubble-outgoing pre {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  line-height: 1.45;
}

.bp-bubble-incoming > div:first-child:not(:only-child),
.bp-bubble-outgoing > div:first-child:not(:only-child) {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: .45rem;
}

.bp-bubble-incoming > div:first-child:not(:only-child) svg,
.bp-bubble-outgoing > div:first-child:not(:only-child) svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.bp-bubble-outgoing .vai-msg-in-progress,
.bp-bubble-outgoing .vai-msg-summary {
  margin: 0;
  font-size: .85rem;
  color: inherit;
  line-height: 1.45;
  opacity: .95;
}

.bp-bubble-outgoing .vai-msg-summary + .vai-msg-details-btn,
.bp-bubble-outgoing .vai-msg-in-progress + .vai-msg-details-btn {
  margin-top: .45rem;
}

.bp-bubble-outgoing .vai-msg-details-btn {
  display: block;
  margin-top: .45rem;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  opacity: .95;
}

.bp-bubble-outgoing .vai-msg-details-btn:hover {
  opacity: 1;
}

.bp-message-meta,
.messages-thread > .flex-col > .text-xs.text-muted,
#contact-messages .flex-col.gap-3 > .flex-col > .text-xs.text-muted {
  margin-top: .25rem;
  padding: 0 .35rem;
}

/* ── 35. Panel resizer (split-view drag handle) ──────────────────────────── */
/*
 * Gutter between resizable columns/rows — contact profile, messages, calendar, voice AI, path builder.
 *
 * Handle: `.bp-resizer` / `.cp-resizer`  (+ `.bp-resizer--row` / `.cp-resizer--row` for horizontal)
 * Grip: center line only (no dots). Primary tint on hover/drag.
 */

.bp-resizer,
.cp-resizer {
  --bp-resizer-hit: 1rem;

  align-self: stretch;
  position: relative;
  flex-shrink: 0;
  min-width: var(--bp-resizer-hit);
  z-index: 2;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

.bp-resizer::before,
.cp-resizer::before {
  content: "";
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: color-mix(in srgb, var(--c-border) 78%, transparent);
  pointer-events: none;
  transition:
    width var(--dur) var(--ease),
    background var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.bp-resizer::after,
.cp-resizer::after {
  display: none;
}

.bp-resizer:hover::before,
.cp-resizer:hover::before,
.bp-resizer.is-dragging::before,
.cp-resizer.is-dragging::before {
  opacity: 1;
  width: 2px;
  background: color-mix(in srgb, var(--c-primary) 42%, var(--c-border));
}

.bp-resizer:focus,
.cp-resizer:focus,
.bp-resizer:focus-visible,
.cp-resizer:focus-visible {
  outline: none;
}

/* Horizontal — path builder preview stack, etc. */
.bp-resizer--row,
.cp-resizer--row {
  min-width: 0;
  min-height: var(--bp-resizer-hit);
  width: auto;
  align-self: stretch;
  justify-self: stretch;
  cursor: row-resize;
}

.bp-resizer--row::before,
.cp-resizer--row::before {
  top: 50%;
  bottom: auto;
  left: .5rem;
  right: .5rem;
  width: auto;
  height: 1px;
  transform: translateY(-50%);
}

.bp-resizer--row::after,
.cp-resizer--row::after {
  display: none;
}

/* Parent grids — lock cursor while dragging */
.cp-cards-grid.is-resizing *,
.messages-cards-grid.is-resizing *,
.messages-split.is-resizing *,
.bp-split--3col.is-resizing *,
.bp-split--2col-resizable.is-resizing *,
.bp-split--2col-resizable.is-resizing,
.vai-layout.is-resizing *,
.vai-layout.is-resizing,
.cal-panel.cal-cards-grid.is-resizing *,
.cal-panel.cal-cards-grid.is-resizing {
  cursor: col-resize !important;
}