/**
 * 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. Prefer `.bp-*` classes; run `bun run css:alias`
 * to migrate clear 1:1 legacy names.
 *
 * 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 → /static/css/bp-calendar.css
 *  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 {
  /* Benefit Path Bright (default light) */
  --c-primary: #5050ff;
  --c-primary-hover: color-mix(in srgb, var(--c-primary) 84%, #000);
  --c-primary-light: color-mix(in srgb, var(--c-primary) 15%, #fff);
  --primary-color: var(--c-primary);
  --c-primary-color: var(--primary-color);
  /* Fixed brand blue - not overridden by profile/agency accent. */
  --c-theme-primary: #5050ff;
  --c-theme-primary-light: color-mix(in srgb, var(--c-theme-primary) 15%, #fff);
  /* Benefit Path logo mark (inline SVG). Primary tracks the active palette. */
  --bp-brand-primary: var(--c-theme-primary);
  --bp-brand-lime: #8cc546;
  --bp-brand-teal: #0d5a5a;
  --bp-brand-cross: #ffffff;
  /*
   * Code editor chrome - body matches title/toolbar so fg text stays readable
   * (no lighter inset that washes out tokens / caret).
   */
  --bp-code-bg: color-mix(in srgb, var(--c-border) 32%, var(--c-surface));
  --bp-code-fg: var(--c-text);
  --bp-code-muted: var(--c-text-muted);
  --bp-code-border: var(--c-border);
  --bp-code-toolbar-bg: var(--bp-code-bg);
  --bp-code-gutter-bg: color-mix(in srgb, var(--c-border) 22%, var(--c-bg));
  --bp-code-tab-hover: color-mix(in srgb, var(--c-text-muted) 14%, transparent);
  --bp-code-tab-active: color-mix(in srgb, var(--c-text-muted) 22%, transparent);
  --bp-code-caret: var(--c-text);
  --bp-code-token-comment: var(--c-text-muted);
  --bp-code-token-punctuation: var(--c-text-muted);
  --bp-code-token-tag: color-mix(in srgb, var(--c-danger) 78%, #000);
  --bp-code-token-string: color-mix(in srgb, var(--c-success) 72%, #000);
  --bp-code-token-keyword: color-mix(in srgb, var(--c-agency) 78%, #000);
  --bp-code-token-function: color-mix(in srgb, var(--c-warning) 62%, #000);
  --bp-code-token-operator: color-mix(in srgb, var(--c-platform-fg, var(--c-platform)) 88%, #000);
  --bp-code-token-variable: color-mix(in srgb, var(--c-warning) 55%, var(--c-danger));
  --bp-code-lint-mark: var(--c-danger);
  --bp-code-lint-bg: color-mix(in srgb, var(--c-danger) 12%, var(--bp-code-bg));
  --bp-code-lint-fg: color-mix(in srgb, var(--c-danger) 72%, #000);
  --c-secondary: #06b6d4;
  --c-secondary-light: color-mix(in srgb, var(--c-secondary) 15%, #fff);
  /* Alias - prefer --c-secondary (opposite / brand secondary). */
  --c-accent: var(--c-secondary);
  /* Platform branding (admin chrome, platform badges / calendars). */
  --c-platform: #0ea5e9;
  --c-platform-fg: #0369a1;
  --c-platform-light: color-mix(in srgb, var(--c-platform) 18%, #fff);
  --c-bg: #f9fafb;
  --c-surface: #ffffff;
  --c-border: #e5e7eb;
  --c-text: #111827;
  --c-text-muted: #6b7280;
  --c-text-light: #9ca3af;
  --c-muted: var(--c-text-muted);
  --c-success: #10b981;
  --c-warning: #f59e0b;
  --c-danger: #ef4444;
  --c-info: #3b82f6;
  /* Agency/team-role accent (badges, pills) - distinct from primary and platform. */
  --c-agency: #6366f1;

  --sidebar-w: 240px;
  --sidebar-collapsed-w: 56px;
  --sidebar-inset: var(--space-8);
  /* Floating strips inside .main: flush left (nav already offsets), inset on the other sides. */
  --bp-shell-margin: var(--sidebar-inset) var(--sidebar-inset) 0 0;
  --bp-shell-margin-block: var(--sidebar-inset) var(--sidebar-inset) var(--sidebar-inset) 0;
  /* Same 1rem seam as Voice AI / split-view card gutters (--bp-split-gutter). */
  --bp-split-gutter: var(--space-13);
  --sidebar-gutter: var(--bp-split-gutter);
  /* Layout width drives .main offset (tracks --sidebar-w live while dragging). */
  --sidebar-main-offset: calc(var(--sidebar-inset) + var(--sidebar-w) + var(--sidebar-gutter));
  --sidebar-main-offset-collapsed: calc(var(--sidebar-inset) + var(--sidebar-collapsed-w) + var(--sidebar-gutter));
  --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: var(--c-primary);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--c-primary) 58%, #fff);
  --scrollbar-track: rgba(76, 79, 105, .08);

  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  /*
   * Overlay stack (low → high):
   * dropdowns/pickers ~400–420 · floating form-select ~10050 · tooltips 50000 ·
   * route loader 60000 · right-click / meatball context menus above all of that.
   */
  --bp-z-context-menu: 70000;

  /*
   * Spacing scale - prefer for gap / margin / padding / inset.
   * Do not invent new rem steps; extend this list deliberately (css:audit).
   */
  --space-0: .05rem;
  --space-1: .15rem;
  --space-1a: .1rem;
  --space-1b: .12rem;
  --space-1c: .18rem;
  --space-2: .2rem;
  --space-2a: .22rem;
  --space-2b: .28rem;
  --space-3: .25rem;
  --space-4: .3rem;
  --space-5: .35rem;
  --space-6: .4rem;
  --space-6a: .42rem;
  --space-7: .45rem;
  --space-8: .5rem;
  --space-8a: .6rem;
  --space-8b: .625rem;
  --space-9: .55rem;
  --space-10: .65rem;
  --space-10a: .7rem;
  --space-11: .75rem;
  --space-12: .85rem;
  --space-12a: .9rem;
  --space-13: 1rem;
  --space-13a: 1.1rem;
  --space-13b: 1.15rem;
  --space-14: 1.25rem;
  --space-14a: 1.35rem;
  --space-15: 1.5rem;
  --space-15a: 1.75rem;
  --space-16: 2rem;
  --space-17: 2.5rem;

  --outline-width: 1px;
  --border-width: 1px;

  /*
   * Universal select / hover / drop ring (hub cards, folder chips, logic nodes).
   * Keep separate from --outline-width (form fields / chrome stay 1px).
   */
  --bp-ring-width: 2px;
  --bp-ring-offset: 0px;
  --bp-ring-color: var(--c-primary-color, var(--c-primary));
  --bp-ring-color-soft: color-mix(in srgb, var(--bp-ring-color) 55%, transparent);
  --bp-ring-idle: var(--bp-ring-width) solid transparent;
  --bp-ring-hover: var(--bp-ring-width) solid var(--bp-ring-color-soft);
  --bp-ring-active: var(--bp-ring-width) solid var(--bp-ring-color);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 200ms;
  --dur-fast: 120ms;
  --dur-slow: 280ms;
  /* Gentle overshoot for pop-in surfaces (modals, menus) */
  --ease-emphasis: cubic-bezier(.2, .8, .2, 1);

  --bp-card-bg: var(--c-surface);
  --bp-card-border: var(--c-border);
  --bp-card-radius: var(--radius-lg);
  --bp-card-inset: var(--space-8);
  --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: var(--space-15);
  --bp-page-padding: var(--space-15);

  --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));

  /*
   * Jelly - soft accent wash for active nav, title bars, chips, etc.
   * Defaults track brand --c-primary-light (same as Home / slide-select).
   * Override --bp-jelly-accent (+ --bp-jelly-accent-light for non-primary) to retint.
   */
  --bp-jelly-accent: var(--c-primary-color, var(--c-primary));
  --bp-jelly-accent-light: var(--c-primary-light);
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: var(--bp-jelly-accent);
  /* Jelly has no unique shadow - selected buttons keep --bp-shadow separately. */
  --bp-jelly-shadow: none;

  /* Soft accent-tinted outline shared by inputs, selects, search, date/duration triggers. */
  --bp-field-outline: color-mix(
    in srgb,
    var(--c-primary-color, var(--c-primary)) 16%,
    color-mix(in srgb, var(--c-text) 14%, var(--c-border))
  );
  --bp-field-outline-hover: color-mix(
    in srgb,
    var(--c-primary-color, var(--c-primary)) 36%,
    var(--bp-field-outline)
  );
  --bp-field-outline-focus: var(--c-primary-color, var(--c-primary));
  --bp-field-ring: 0 0 0 3px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
  --bp-field-border: var(--bp-field-outline);
  --bp-field-height: 2.375rem;
  --bp-field-padding-x: var(--space-11);
  --bp-field-padding-y: 0;
  --bp-field-select-padding-right: 2.35rem;
  /* Five-step type scale — prefer these over one-off rem sizes. */
  --bp-text-xs: 0.6875rem; /* captions, overlines, meta */
  --bp-text-sm: 0.8125rem; /* buttons, secondary UI */
  --bp-text-md: 0.875rem;  /* body, fields (default) */
  --bp-text-lg: 1rem;      /* emphasized / card titles */
  --bp-text-xl: 1.25rem;   /* page titles */
  --bp-field-font-size: var(--bp-text-md);
  --bp-field-line-height: 1.25;
  --bp-sticky-note-font-size: var(--bp-text-md);
  --bp-shadow: none;
  /* drop-shadow() cannot take a spread radius, so this mirrors --bp-shadow without -1px. */
  --bp-drop-shadow: 0 0 transparent;
  --bp-shadow-inset: none;
  --bp-shadow-hover: none;
  /* Soft elevation on focus removed; keep ring via --bp-field-ring / outline rules. */
  --bp-shadow-focus: none;
  /* Overlay lift for flyouts, context menus, pickers, and tooltips. Chrome stays flat. */
  --bp-dropdown-shadow: 0 2px 3px -1px color-mix(in srgb, var(--c-text) 11%, transparent);
  --bp-skeleton-fill: color-mix(in srgb, var(--bp-skeleton-ink, var(--c-text)) 22%, 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-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: var(--bp-text-sm);
  --btn-font-weight: 500;
  --btn-line-height: 1.25;
  --btn-padding-y: var(--space-5);
  --btn-padding-x: var(--space-11);
  --btn-min-height: 1.75rem;
  --btn-gap: var(--space-5);
  /* Mini/sm aliases - same as the site-wide default size. */
  --btn-mini-font-size: var(--btn-font-size);
  --btn-mini-padding-y: var(--btn-padding-y);
  --btn-mini-padding-x: var(--btn-padding-x);
  --btn-mini-min-height: var(--btn-min-height);
  --btn-sm-font-size: var(--btn-font-size);
  --btn-sm-padding-y: var(--btn-padding-y);
  --btn-sm-padding-x: var(--btn-padding-x);
  --btn-sm-min-height: var(--btn-min-height);

  /* Always define so icon calc() / html font-size share one knob. */
  --bp-ui-font-size: 14px;

  /* Icons track Accessibility UI font size, sized near chrome text (not old 15–24px). */
  --bp-icon-size-xs: calc(var(--bp-ui-font-size) * 0.875); /* ~field text */
  --bp-icon-size-sm: calc(var(--bp-ui-font-size) * 1);
  --bp-icon-size-md: calc(var(--bp-ui-font-size) * 1.125);
  --bp-icon-size-lg: calc(var(--bp-ui-font-size) * 1.35);
  --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));

  /* Chevron assets - mask with currentColor for themed UI; tinted data-URI for native <select> bg */
  --bp-icon-chevron-down: url('/static/img/icons/chevron-down.svg');
  --bp-icon-chevron-up: url('/static/img/icons/chevron-up.svg');
  --bp-icon-chevron-left: url('/static/img/icons/chevron-left.svg');
  --bp-icon-chevron-right: url('/static/img/icons/chevron-right.svg');
  --bp-chevron-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%236c6f85' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 9L12 15L18 9'/%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");
}

/*
 * Path contact-light lock - shared by public funnels + path editor canvas.
 * Hosts: html[data-path-ui] .survey-page, .pb-live-canvas (+ palette floats).
 * Feature CSS may add host-only extras (font, selection brand, radius pin).
 */
.bp-path-contact-light,
html[data-path-ui] .survey-page,
.pb-live-canvas,
.pb-palette-tile-preview:not(.pb-palette-tile-preview--logic),
.pb-palette-drag-float:not(.pb-logic-node),
.pb-canvas-dnd-float:has(.pb-layout-edit) {
  color-scheme: light;
  --c-bg: #f9fafb;
  --c-surface: #fff;
  --c-border: #e5e7eb;
  --c-text: #111827;
  --c-text-muted: #6b7280;
  --c-text-light: #9ca3af;
  --c-muted: var(--c-text-muted);
  --c-primary: #5050ff;
  --c-primary-light: color-mix(in srgb, var(--c-primary) 14%, white);
  --c-primary-hover: color-mix(in srgb, var(--c-primary) 86%, black);
  --primary-color: var(--c-primary);
  --c-primary-color: var(--primary-color);
  --bp-card-bg: #fff;
  --bp-card-border: #e5e7eb;
  --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-page-bg: var(--bp-card-section-bg);
  --bp-shell-bg: #fff;
  --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: #fff;
  --btn-surface-bg-hover: color-mix(in srgb, var(--c-border) 24%, #fff);
  --bp-field-outline: color-mix(
    in srgb,
    var(--c-primary-color, var(--c-primary)) 16%,
    color-mix(in srgb, var(--c-text) 14%, var(--c-border))
  );
  --bp-field-outline-hover: color-mix(
    in srgb,
    var(--c-primary-color, var(--c-primary)) 36%,
    var(--bp-field-outline)
  );
  --bp-field-ring: 0 0 0 3px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, transparent);
  --bp-shadow: none;
  --bp-shadow-hover: none;
  --bp-shadow-focus: none;
  --selection-bg: color-mix(in srgb, var(--c-primary) 28%, #fff);
  --selection-text: #111827;
  --scrollbar-thumb-hover: color-mix(in srgb, var(--c-primary) 58%, #fff);
  --scrollbar-track: rgba(17, 24, 39, .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 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
}

/* Soft accent wash - use class `jelly` (alias `bp-jelly`) on any element.
 * Retint with `jelly--warning` / `--danger` / `--info` / `--success`, or set
 * `--bp-jelly-accent` (+ `--bp-jelly-accent-light`) on a parent. */
.jelly,
.bp-jelly {
  background: var(--bp-jelly-bg);
  color: var(--bp-jelly-fg);
  box-shadow: var(--bp-jelly-shadow);
}

.jelly--danger,
.bp-jelly--danger {
  --bp-jelly-accent: var(--c-danger);
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-danger) 15%, var(--c-surface, #eff1f5));
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: var(--c-danger);
}

.jelly--warning,
.bp-jelly--warning {
  --bp-jelly-accent: var(--c-warning);
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-warning) 15%, var(--c-surface, #eff1f5));
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: color-mix(in srgb, var(--c-warning) 72%, var(--c-text));
}

.jelly--info,
.bp-jelly--info,
.bp-preview-banner {
  --bp-jelly-accent: var(--c-info);
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-info) 15%, var(--c-surface, #eff1f5));
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: color-mix(in srgb, var(--c-info) 78%, var(--c-text));
}

.jelly--success,
.bp-jelly--success {
  --bp-jelly-accent: var(--c-success);
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-success) 15%, var(--c-surface, #eff1f5));
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: color-mix(in srgb, var(--c-success) 72%, var(--c-text));
}

.jelly--muted,
.bp-jelly--muted {
  --bp-jelly-accent: var(--c-text-muted);
  --bp-jelly-accent-light: var(--c-border, #e5e7eb);
  --bp-jelly-bg: var(--c-border, #e5e7eb);
  --bp-jelly-fg: var(--c-text-muted);
}

[data-theme="dark"] .jelly--danger,
[data-theme="dark"] .bp-jelly--danger {
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-danger) 25%, var(--c-bg));
}

[data-theme="dark"] .jelly--warning,
[data-theme="dark"] .bp-jelly--warning {
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-warning) 25%, var(--c-bg));
}

[data-theme="dark"] .jelly--info,
[data-theme="dark"] .bp-jelly--info,
[data-theme="dark"] .bp-preview-banner {
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-info) 25%, var(--c-bg));
}

[data-theme="dark"] .jelly--success,
[data-theme="dark"] .bp-jelly--success {
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-success) 25%, var(--c-bg));
}

[data-theme="dark"] .jelly--muted,
[data-theme="dark"] .bp-jelly--muted {
  --bp-jelly-accent-light: var(--c-border, #374151);
  --bp-jelly-bg: var(--c-border, #374151);
}

/* Universal notice strip (path preview, locked editor, etc.).
 * Default: fixed full-bleed with card inset. Use `--docked` under a topbar.
 * Paint uses jelly tokens (info by default - same as `.jelly--info`). */
.bp-preview-banner {
  --bp-preview-banner-inset: var(--bp-card-inset, .5rem);
  position: fixed;
  top: var(--bp-preview-banner-inset);
  left: var(--bp-preview-banner-inset);
  right: var(--bp-preview-banner-inset);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-9) var(--space-13);
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bp-jelly-bg);
  color: var(--bp-jelly-fg);
  font-size: var(--bp-text-sm);
  font-weight: 500;
  font-family: inherit;
  text-align: center;
  line-height: 1.35;
  box-shadow: none;
  pointer-events: none;
}

.bp-preview-banner-lead {
  font-weight: 700;
}

.bp-preview-banner-spacer {
  display: block;
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
}

.bp-preview-banner .bp-icon-mask,
.bp-preview-banner .pb-icon-mask,
.bp-preview-banner > svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}

/* In-flow under shell chrome - same edge alignment as .topbar / editor strips. */
.bp-preview-banner--docked {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 3;
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  max-width: none;
  margin: var(--bp-shell-margin);
}

.bp-preview-banner[hidden] {
  display: none !important;
}

[data-theme="dark"] {
  /* Benefit Path Dark (default dark) */
  --c-primary: #818cf8;
  --c-primary-hover: color-mix(in srgb, var(--c-primary) 88%, #fff);
  --c-theme-primary: #5050ff;
  --c-theme-primary-light: color-mix(in srgb, var(--c-theme-primary) 25%, var(--c-bg));
  --c-secondary: #22d3ee;
  --c-secondary-light: color-mix(in srgb, var(--c-secondary) 22%, var(--c-bg));
  --c-accent: var(--c-secondary);
  --c-platform: #38bdf8;
  --c-platform-fg: #7dd3fc;
  --c-success: #34d399;
  --c-warning: #fbbf24;
  --c-danger: #f87171;
  --c-info: #60a5fa;
  --c-agency: #818cf8;
  --c-bg: #111827;
  --c-surface: #1f2937;
  --c-border: #374151;
  --c-text: #f3f4f6;
  --c-text-muted: #9ca3af;
  --c-text-light: #6b7280;
  /* Dark code console - body matches title bar. */
  --bp-code-bg: color-mix(in srgb, var(--c-bg) 72%, #000);
  --bp-code-fg: var(--c-text);
  --bp-code-muted: var(--c-text-muted);
  --bp-code-border: color-mix(in srgb, var(--c-border) 70%, transparent);
  --bp-code-toolbar-bg: var(--bp-code-bg);
  --bp-code-gutter-bg: color-mix(in srgb, var(--bp-code-bg) 80%, var(--c-surface));
  --bp-code-tab-hover: color-mix(in srgb, var(--c-text-muted) 18%, transparent);
  --bp-code-tab-active: color-mix(in srgb, var(--c-text-muted) 28%, transparent);
  --bp-code-caret: var(--c-text);
  --bp-code-token-comment: var(--c-text-muted);
  --bp-code-token-punctuation: var(--c-text-light);
  --bp-code-token-tag: var(--c-danger);
  --bp-code-token-string: var(--c-success);
  --bp-code-token-keyword: var(--c-agency);
  --bp-code-token-function: var(--c-warning);
  --bp-code-token-operator: var(--c-platform);
  --bp-code-token-variable: color-mix(in srgb, var(--c-warning) 65%, var(--c-danger));
  --bp-code-lint-mark: var(--c-danger);
  --bp-code-lint-bg: color-mix(in srgb, var(--c-danger) 22%, var(--bp-code-bg));
  --bp-code-lint-fg: color-mix(in srgb, var(--c-danger) 40%, #fff);
  --scrollbar-thumb: var(--c-primary);
  --c-primary-light: color-mix(in srgb, var(--c-primary) 25%, var(--c-bg));
  --c-platform-light: color-mix(in srgb, var(--c-platform) 22%, var(--c-bg));
  --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-field-outline: color-mix(
    in srgb,
    var(--c-primary-color, var(--c-primary)) 22%,
    color-mix(in srgb, var(--c-text) 16%, var(--c-border))
  );
  --bp-field-outline-hover: color-mix(
    in srgb,
    var(--c-primary-color, var(--c-primary)) 42%,
    var(--bp-field-outline)
  );
  --bp-field-ring: 0 0 0 3px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 28%, transparent);
  --bp-shadow: none;
  --bp-drop-shadow: 0 0 transparent;
  --bp-shadow-inset: none;
  --bp-shadow-hover: none;
  --bp-shadow-focus: none;
  --bp-dropdown-shadow: 0 2px 3px -1px color-mix(in srgb, #000 34%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--c-primary) 72%, var(--c-surface));
  --selection-bg: color-mix(in srgb, var(--c-primary) 42%, var(--c-bg));
  --selection-text: var(--c-text);
  --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 24 24'%3E%3Cpath stroke='%23a6adc8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
  color-scheme: dark;
}

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

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

[hidden] {
  display: none !important;
}

html {
  font-size: var(--bp-ui-font-size, 14px);
  font-family: var(--bp-font-family, Poppins, system-ui, -apple-system, sans-serif);
  -webkit-text-size-adjust: 100%;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/poppins-400.woff2?v=20260817a") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/poppins-500.woff2?v=20260817a") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/poppins-600.woff2?v=20260817a") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/poppins-700.woff2?v=20260817a") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: OpenDyslexic;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/opendyslexic-400.woff2?v=20260831a") format("woff2");
}
@font-face {
  font-family: OpenDyslexic;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/opendyslexic-700.woff2?v=20260831a") format("woff2");
}

/* Default via var() fallback - do not set --bp-font-family here or it
   overrides Accessibility → Font (#bp-dashboard-ui-css) which loads earlier. */
body {
  margin: 0;
  font-family: inherit;
  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"]):not(.form-input):not(.bp-title-input):not(.title-input),
select:not(.form-select):not(.form-input),
textarea:not(.form-textarea):not(.form-input):not(.pb-code-editor-code):not(.bp-code-hl-ta):not(.dev-tryit-code):not(.pb-logic-note-input):not(.messages-notes-input) {
  /* Exclude chrome fields - typed form / title underline own typography.
   * Also exclude code-editor overlays - they must match Prism mono metrics exactly. */
  font-family: inherit;
  font-size: inherit;
  font-weight: 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;
}

/* ── Pan/zoom board dots (workspace plate + media preview) ───────────── */
.bp-board-dots,
.pb-canvas-workspace,
.media-detail__viewport {
  --pb-board-dot: rgba(15, 23, 42, 0.1);
  --pb-board-dot-step: 20px;
  --pb-board-dot-r: 1px;
  --pb-board-dot-soft: 1.5px;
  background-color: var(--c-bg, #f5f6fa);
  background-image: radial-gradient(
    circle,
    var(--pb-board-dot) var(--pb-board-dot-r),
    transparent var(--pb-board-dot-soft)
  );
  background-size: var(--pb-board-dot-step) var(--pb-board-dot-step);
  background-position: 0 0;
}

[data-theme="dark"] .bp-board-dots,
[data-theme="dark"] .pb-canvas-workspace,
[data-theme="dark"] .media-detail__viewport {
  --pb-board-dot: rgba(255, 255, 255, 0.1);
}

/* Finite locked playspace on path / flow canvases (lives in world space). */
.pb-canvas-workspace {
  position: absolute;
  left: 0 !important;
  top: 0 !important;
  /* Beat any leftover inline content-fit sizes from older builds. */
  width: 10000px !important;
  height: 10000px !important;
  z-index: 0;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--c-text) 14%, transparent);
  border-radius: 2px;
  /* Dots stay at zoom-1 size in world; the camera scale grows them. */
  transform-origin: 0 0;
}

[data-theme="dark"] .pb-canvas-workspace {
  border-color: color-mix(in srgb, #fff 16%, transparent);
}

/* Outside the workspace: flat chrome (no infinite dots). */
.pb-live-canvas-shell,
.pb-logic-viewport {
  background-color: var(--c-bg, #f5f6fa);
  background-image: none;
}

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

.bp-shell,
.dash {
  display: flex;
  min-height: 100dvh;
  /* Dashboard no longer has a chrome topbar; keep --topbar-h for sidebar logo row / toolbars. */
  --topbar-stack-offset: calc(var(--sidebar-inset) + var(--sidebar-inset));
}

.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);
}

/* Cover the stage until revealPage(). Instant in, fade out. */
.dashboard-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--bp-page-bg, var(--c-bg));
  pointer-events: auto;
  opacity: 1;
  transition: none;
}
.dashboard-stage.page-ready::after {
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-stage.page-ready::after {
    transition: none;
  }
}

/* Accessibility → Reduce animations (agent profile). */
html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Fixed drawers (Activity, etc.) paint above the stage veil - hide until ready. */
.dashboard-stage:not(.page-ready) .bp-side-drawer {
  visibility: hidden;
  pointer-events: none;
}

/* Page content is wrapped in #bp-page-root (for client-side page swaps). It must
   be a transparent flex passthrough so the .dashboard-stage → .page-content
   height chain survives the extra element - otherwise full-height pages like the
   calendar collapse to content height (month grid squished to one chip). */
#bp-page-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Dashboard banner notifications - reusable slot for any page-level alert.
   Top/right inset only - left gap comes from --sidebar-main-offset (same as .topbar). */
#dashboard-banner-slot:not(:empty),
#setup-banner-slot:not(:empty),
.dashboard-banner-slot:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  padding: var(--sidebar-inset) var(--sidebar-inset) 0 0;
}

.admin-construction-banner {
  padding: 0 0 var(--space-11);
}

.dashboard-banner,
.setup-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12a) var(--space-13);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  background: var(--bp-card-section-bg);
  color: var(--c-text);
  font-size: var(--bp-text-md);
  line-height: 1.45;
  box-shadow: none;
  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: var(--space-9);
  flex: 1;
  min-width: 0;
  padding-top: .08rem;
}

.setup-banner-message {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-5);
}

.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 var(--space-11);
  font-size: var(--bp-text-sm);
  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: var(--bp-text-lg);
  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--incomplete,
.dashboard-banner--incomplete {
  --bp-banner-accent: var(--c-warning);
  background: color-mix(in srgb, var(--c-warning) 11%, var(--bp-card-section-bg));
}

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

/* Construction / WIP warnings - same soft wash as modal--warning + path editor progress banner */
.dashboard-banner--warning {
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  text-align: center;
  --bp-banner-accent: var(--c-warning);
  background: color-mix(in srgb, var(--c-warning) 18%, var(--c-surface));
  color: var(--c-warning);
  box-shadow: none;
}

.dashboard-banner[hidden] {
  display: none !important;
}

.dashboard-banner--warning .setup-banner-body {
  align-items: center;
  flex: 0 1 auto;
  padding-top: 0;
}

.dashboard-banner--warning .setup-banner-message {
  justify-content: center;
  text-align: center;
}

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

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

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

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

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

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

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

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

.setup-banner--success .setup-banner-link,
.dashboard-banner--success .setup-banner-link {
  color: color-mix(in srgb, var(--c-success) 78%, var(--c-text));
  box-shadow: none;
}

.setup-banner--success .setup-banner-link:hover,
.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: none;
}

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

[data-theme="dark"] .dashboard-banner--warning {
  background: color-mix(in srgb, var(--c-warning) 22%, var(--c-surface));
}

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

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

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

[data-theme="dark"] .setup-banner--success .setup-banner-link:hover,
[data-theme="dark"] .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);
  }
}

@keyframes banner-slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.bp-preview-banner.is-banner-visible,
.bp-preview-banner:not([hidden]):not(.is-banner-hiding),
.bp-impersonation-banner:not(.is-banner-hiding) {
  animation: banner-slide-in .28s ease-out;
}

.bp-preview-banner.is-banner-hiding,
.bp-impersonation-banner.is-banner-hiding,
.dashboard-banner.is-banner-hiding,
.setup-banner.is-banner-hiding {
  animation: banner-slide-out .22s ease-in forwards;
  pointer-events: none;
}

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

.bp-sidebar,
.sidebar {
  position: fixed;
  top: 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);
}

/* Drag handle on the sidebar/main seam.
   Must stay `position: fixed` (out of flex flow) or the hit box shoves `.main`.
   Hit box spans the gutter (same 1rem as Voice AI card splits) with the grip centered. */
.bp-resizer.sidebar-resizer {
  --bp-resizer-hit: var(--sidebar-gutter);
  position: fixed;
  top: 0;
  bottom: 0;
  /* Start at the sidebar's right edge so the line sits mid-gutter. */
  left: calc(var(--sidebar-inset) + var(--sidebar-w));
  width: var(--bp-resizer-hit);
  min-width: var(--bp-resizer-hit);
  max-width: var(--bp-resizer-hit);
  margin: 0;
  flex: 0 0 auto;
  z-index: 41;
  align-self: auto;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  transition: left var(--sidebar-dur) var(--ease);
}

/* Vertical grip line - centered in the sidebar/main gutter. */
.bp-resizer.sidebar-resizer::before,
.sidebar-resizer::before {
  content: "";
  position: absolute;
  top: var(--space-8);
  bottom: var(--space-8);
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: color-mix(in srgb, var(--c-border) 78%, transparent);
  opacity: 0;
  pointer-events: none;
  transition:
    width var(--dur) var(--ease),
    background var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.bp-resizer.sidebar-resizer:hover::before,
.sidebar-resizer:hover::before,
.bp-resizer.sidebar-resizer.is-dragging::before,
.sidebar-resizer.is-dragging::before,
.bp-resizer.sidebar-resizer:focus-visible::before,
.sidebar-resizer:focus-visible::before {
  opacity: 1;
  width: 2px;
  background: color-mix(in srgb, var(--c-primary) 42%, var(--c-border));
}

.dash.sidebar-collapsed .bp-resizer.sidebar-resizer,
.dash.sidebar-collapsed .sidebar-resizer {
  left: calc(var(--sidebar-inset) + var(--sidebar-collapsed-w));
}

.dash.sidebar-is-resizing .bp-resizer.sidebar-resizer,
.dash.sidebar-is-resizing .sidebar-resizer,
.dash.sidebar-no-transition .bp-resizer.sidebar-resizer,
.dash.sidebar-no-transition .sidebar-resizer {
  transition: none !important;
}

/* Icon-only rail: used while dragging narrow AND when fully collapsed.
   Opacity-only swap - layers stay put (no clip/padding slide). */
.dash.sidebar-drag-compact .sidebar-rail-expanded,
.dash.sidebar-collapsed .sidebar-rail-expanded,
.dash.sidebar-drag-compact .version,
.dash.sidebar-collapsed .version {
  opacity: 0;
  pointer-events: none;
}

.dash.sidebar-drag-compact .nav-dropdown-toggle,
.dash.sidebar-collapsed .nav-dropdown-toggle,
.dash.sidebar-drag-compact .nav-link,
.dash.sidebar-collapsed .nav-link {
  justify-content: center;
  min-height: calc(var(--bp-icon-size-md) + .96rem);
}

.dash.sidebar-drag-compact .sidebar-rail-compact,
.dash.sidebar-collapsed .sidebar-rail-compact {
  opacity: 1;
}

.dash.sidebar-drag-compact .sidebar-logo,
.dash.sidebar-collapsed .sidebar-logo,
.dash.sidebar-drag-compact svg.sidebar-logo.bp-brand-logo,
.dash.sidebar-collapsed svg.sidebar-logo.bp-brand-logo {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.dash.sidebar-drag-compact .sidebar-icon,
.dash.sidebar-collapsed .sidebar-icon,
.dash.sidebar-drag-compact svg.sidebar-icon.bp-brand-icon-mark,
.dash.sidebar-collapsed svg.sidebar-icon.bp-brand-icon-mark {
  opacity: 1;
  visibility: visible;
}

.dash.sidebar-drag-compact .nav-submenu,
.dash.sidebar-collapsed .nav-submenu {
  display: none;
}

.dash.sidebar-drag-compact .sidebar .sidebar-agency-trigger,
.dash.sidebar-collapsed .sidebar .sidebar-agency-trigger {
  justify-content: center;
  align-self: center;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  border-color: transparent;
  border-radius: var(--radius);
  box-shadow: none;
  background: var(--c-bg);
  overflow: visible;
}

.dash.sidebar-drag-compact .sidebar-user-trigger,
.dash.sidebar-collapsed .sidebar-user-trigger {
  justify-content: center;
  align-self: center;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  border-color: transparent;
  border-radius: var(--radius);
  box-shadow: none;
  background: var(--c-bg);
  overflow: visible;
}

.dash.sidebar-drag-compact .sidebar-head,
.dash.sidebar-collapsed .sidebar-head {
  padding-inline: 0;
  justify-content: center;
}

.dash.sidebar-drag-compact .nav-menu,
.dash.sidebar-collapsed .nav-menu {
  padding: var(--space-9) var(--space-5);
  gap: var(--space-1c);
}

.dash.sidebar-drag-compact .sidebar .sidebar-agency-switch,
.dash.sidebar-collapsed .sidebar .sidebar-agency-switch {
  padding: 0;
  overflow: visible;
  display: flex;
  justify-content: center;
}

.dash.sidebar-drag-compact .sidebar-foot,
.dash.sidebar-collapsed .sidebar-foot {
  /* Keep the same vertical rhythm as expanded; only tighten the side inset. */
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5) var(--space-9);
}

.dash.sidebar-drag-compact .sidebar-user,
.dash.sidebar-collapsed .sidebar-user {
  display: flex;
  justify-content: center;
}

/* Match agency/account chip size so foot gap doesn't visually disappear. */
.dash.sidebar-drag-compact .sidebar-collapse-toggle,
.dash.sidebar-collapsed .sidebar-collapse-toggle {
  align-self: center;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  margin: 0;
}

.dash.sidebar-drag-compact .nav-link .badge,
.dash.sidebar-collapsed .nav-link .badge {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1a);
  margin-left: 0;
}

.dash.sidebar-collapsed .sidebar .sidebar-agency-trigger:hover,
.dash.sidebar-collapsed .sidebar .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(--c-bg));
  box-shadow: var(--bp-shadow-hover);
}

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

.dash.sidebar-is-resizing .sidebar,
.dash.sidebar-is-resizing .main,
.dash.sidebar-is-resizing .bp-resizer.sidebar-resizer,
.dash.sidebar-is-resizing .sidebar-resizer {
  transition: none !important;
}

/* Drag: hide nav pill chrome while shell width moves (collapse keeps blobby visible). */
.dash.sidebar-is-resizing #sidebar .bp-slide-select__pill,
.dash.sidebar-is-resizing #sidebar .bp-slide-select__clip,
.dash.sidebar-is-resizing #sidebar .bp-lamp-gl-canvas {
  display: none !important;
}

.dash.sidebar-shell-animating #sidebar,
.dash.sidebar-is-resizing #sidebar {
  contain: layout paint;
}

.dash.sidebar-is-resizing .main {
  /* Don't let the page fight the drag (calendar/tables especially). */
  pointer-events: none;
  contain: layout style;
}

html:has(.dash.sidebar-is-resizing) .toast-container {
  transition: none !important;
}

.dash.sidebar-is-resizing {
  cursor: col-resize;
  user-select: none;
}

.dash.agency-menu-open .sidebar,
.dash.user-menu-open .sidebar,
.dash.announcements-menu-open .sidebar {
  overflow: visible;
  /* Sit above the fixed sidebar drag handle so flyouts aren't covered. */
  z-index: 50;
}

.dash.agency-menu-open .bp-resizer.sidebar-resizer,
.dash.agency-menu-open .sidebar-resizer,
.dash.user-menu-open .bp-resizer.sidebar-resizer,
.dash.user-menu-open .sidebar-resizer,
.dash.announcements-menu-open .bp-resizer.sidebar-resizer,
.dash.announcements-menu-open .sidebar-resizer {
  z-index: 40;
}

.dash.user-menu-open.sidebar-collapsed .sidebar,
.dash.announcements-menu-open.sidebar-collapsed .sidebar,
.dash.agency-menu-open.sidebar-collapsed .sidebar {
  overflow: visible;
  z-index: 50;
}

.bp-sidebar-head,
.sidebar-head {
  height: var(--topbar-h);
  padding: 0 var(--space-13);
  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: var(--space-8);
  flex-shrink: 0;
  position: relative;
  overflow-x: hidden;
}

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

svg.sidebar-logo.bp-brand-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 140px;
  overflow: visible;
}

/* Solid brand fills - avoid translucent CSS-var paint in SVG style attrs.
   Do NOT set opacity here: it fought .sidebar-logo / .sidebar-icon collapse swaps
   (same specificity as the hide rules, later in the file → both marks visible). */
.bp-brand-logo *,
.bp-brand-icon-mark * {
  opacity: 1;
  fill-opacity: 1;
}

.bp-brand-fill-primary {
  fill: var(--bp-brand-primary, #5050ff) !important;
  fill-opacity: 1 !important;
}

.bp-brand-fill-lime {
  fill: var(--bp-brand-lime, #8cc546) !important;
  fill-opacity: 1 !important;
}

.bp-brand-fill-teal {
  fill: var(--bp-brand-teal, #0d5a5a) !important;
  fill-opacity: 1 !important;
}

.bp-brand-fill-cross {
  fill: var(--bp-brand-cross, #ffffff) !important;
  fill-opacity: 1 !important;
}

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

svg.sidebar-icon.bp-brand-icon-mark {
  object-fit: contain;
  border-radius: 0;
}

.sidebar-agency-trigger-icon.bp-brand-icon-mark,
.sidebar-agency-compact-icon.bp-brand-icon-mark {
  width: var(--bp-icon-size-lg);
  height: var(--bp-icon-size-lg);
  flex-shrink: 0;
  display: block;
}

.sidebar-agency-compact-icon.bp-brand-icon-mark {
  width: calc(var(--bp-ui-font-size, 14px) * 1.5);
  height: calc(var(--bp-ui-font-size, 14px) * 1.5);
}

/* Expanded row ↔ compact center icon (same instant swap as logo ↔ sidebar-icon).
   Both layers are absolute so collapse toggles opacity - never a left-slide. */
.sidebar-rail-expanded {
  position: absolute;
  left: var(--space-10);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8b);
  min-width: 0;
  max-width: calc(100% - 1.3rem);
  opacity: 1;
  pointer-events: auto;
}

.sidebar-agency-expanded,
.sidebar-user-expanded {
  left: var(--space-9);
  right: var(--space-9);
  max-width: none;
  width: auto;
  gap: var(--space-9);
  display: flex;
}

.sidebar-rail-compact,
.nav-icon--compact,
.sidebar-agency-compact-icon,
.sidebar-user-compact {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

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

.sidebar-agency-compact-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 6px;
  object-fit: cover;
  border: none;
  box-shadow: var(--bp-shadow);
  background: var(--c-bg);
}

.sidebar-user-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  flex-shrink: 0;
}

.sidebar-user-compact .topbar-user-photo,
.sidebar-user-compact .topbar-user-initials {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  min-height: 28px;
  max-width: 28px;
  max-height: 28px;
  border-radius: 6px;
  box-shadow: var(--bp-shadow);
  font-size: var(--bp-text-xs);
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-agency-trigger,
.sidebar-user-trigger,
.nav-link,
.bp-nav-link {
  position: relative;
}

.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: var(--space-5);
  padding: var(--space-6) var(--space-10) var(--space-9);
  overflow: visible;
}

.sidebar-foot-actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
}

.sidebar-foot-actions > .sidebar-foot-icon-btn,
.sidebar-foot-actions > .sidebar-foot-bell {
  flex: 1 1 0;
  min-width: 0;
}

/* Override shared `.topbar-bell { display: inline-block }` so this slot flexes equally. */
.sidebar-foot-actions > .sidebar-foot-bell.topbar-bell {
  display: flex;
  position: relative;
  width: auto;
  max-width: none;
  vertical-align: stretch;
}

.sidebar-foot-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: var(--space-6a);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bp-card-bg, var(--c-surface));
  color: var(--c-text-muted);
  cursor: pointer;
  box-shadow: var(--bp-shadow);
  font-family: inherit;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.sidebar-foot-bell > .sidebar-foot-icon-btn {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.sidebar-foot-icon-btn:hover,
.sidebar-foot-icon-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);
}

.sidebar-foot-icon-btn:active {
  transform: scale(.98);
}

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

.sidebar-foot-icon-btn .bp-icon-mask {
  width: var(--bp-icon-size-sm);
  height: var(--bp-icon-size-sm);
  flex-shrink: 0;
}

.sidebar-foot-bell .topbar-bell-menu {
  top: auto;
  right: auto;
  bottom: 0;
  left: calc(100% + var(--space-8));
  width: min(360px, calc(100vw - 5rem));
  transform-origin: left bottom;
}

.dash.sidebar-drag-compact .sidebar-foot-actions,
.dash.sidebar-collapsed .sidebar-foot-actions {
  flex-direction: column;
  gap: var(--space-1c);
}

.dash.sidebar-drag-compact .sidebar-foot-icon-btn,
.dash.sidebar-collapsed .sidebar-foot-icon-btn {
  min-height: auto;
  padding: .48rem 0;
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}

.dash.sidebar-collapsed .sidebar-foot-icon-btn:hover,
.dash.sidebar-collapsed .sidebar-foot-icon-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);
}

.sidebar-user {
  width: 100%;
  position: relative;
  overflow: visible;
}

.sidebar-user-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  width: 100%;
  min-height: 2.35rem;
  padding: var(--space-6a) var(--space-9);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--bp-text-sm);
  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-user-trigger:hover,
.sidebar-user-trigger[aria-expanded="true"] {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--c-bg));
  box-shadow: var(--bp-shadow-hover);
}

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

.sidebar-user-expanded .topbar-user-photo,
.sidebar-user-expanded .topbar-user-initials {
  width: var(--bp-icon-size-lg);
  height: var(--bp-icon-size-lg);
  border-radius: 6px;
}

.topbar-user-label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.sidebar-user-expanded .topbar-user-label {
  max-width: none;
}

.sidebar-user .topbar-user-menu {
  top: auto;
  right: auto;
  bottom: 0;
  left: calc(100% + var(--space-8));
  min-width: 18.5rem;
  max-width: min(22rem, calc(100vw - 5rem));
  width: max(18.5rem, min(20rem, calc(100vw - 5rem)));
  transform-origin: left bottom;
  padding-bottom: var(--space-7);
}

.sidebar-account-bell {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.sidebar-account-bell .topbar-bell-menu {
  top: auto;
  right: auto;
  bottom: 0;
  left: calc(100% + var(--space-8));
  width: min(360px, calc(100vw - 5rem));
  transform-origin: left bottom;
  pointer-events: auto;
}

.sidebar-account-announce-dot {
  pointer-events: none;
}

.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: var(--space-14);
  left: var(--space-14);
  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);
  -webkit-tap-highlight-color: transparent;
}

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

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

.sidebar-toggle-mobile {
  display: none;
}

/* Agency switcher (footer, above account) */

.sidebar-agency-switch {
  flex-shrink: 0;
  padding: 0;
  overflow: visible;
  width: 100%;
}

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

.sidebar-agency-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  width: 100%;
  min-height: 2.35rem;
  padding: var(--space-6a) var(--space-9);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--bp-text-sm);
  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(--c-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);
}

svg.sidebar-agency-trigger-icon.bp-brand-icon-mark,
svg.sidebar-agency-compact-icon.bp-brand-icon-mark {
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.sidebar-agency-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.sidebar-agency-trigger-caret {
  display: inline-block;
  width: var(--bp-icon-size-xs);
  height: var(--bp-icon-size-xs);
  max-width: var(--bp-icon-size-xs);
  flex-shrink: 0;
  margin-left: auto;
  color: var(--c-text-muted);
  overflow: hidden;
  background-color: currentColor;
  -webkit-mask: var(--bp-icon-chevron-right) center / contain no-repeat;
  mask: var(--bp-icon-chevron-right) center / contain no-repeat;
  transition: color var(--dur) var(--ease);
}

.sidebar-agency-trigger[aria-expanded="true"] .sidebar-agency-trigger-caret {
  transform: none;
  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: var(--space-5);
  padding: var(--space-6);
  transform-origin: left bottom;
  animation: bp-agency-menu-in var(--dur) var(--ease-emphasis);
}

@keyframes bp-agency-menu-in {
  from { opacity: 0; transform: translateX(-8px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.sidebar-agency-menu {
  position: absolute;
  left: calc(100% + var(--space-8));
  right: auto;
  top: 0;
  bottom: auto;
  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,
.tag-picker-menu-search {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3) var(--space-5);
  border: none;
  background: transparent;
}

.sidebar-agency-menu-search .bp-search-wrap,
.tag-picker-menu-search .bp-search-wrap {
  display: flex;
  width: 100%;
  flex: none;
  min-width: 0;
  max-width: none;
}

.form-input.sidebar-agency-search-input {
  /* Reuses bp-title-input; no absolute-icon gutter. */
  width: 100%;
}

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

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

.sidebar-agency-empty {
  padding: var(--space-9) var(--space-10);
  font-size: var(--bp-text-sm);
  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-icon.bp-brand-icon {
  background: var(--c-theme-primary);
  box-shadow: none;
  border-radius: 0;
}

.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: var(--space-9);
  width: 100%;
  padding: var(--space-8) var(--space-10a);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-text);
  font-size: var(--bp-text-sm);
  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: var(--space-1);
}

.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: var(--bp-text-lg);
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.sidebar-agency-pin-btn .bp-icon-mask {
  width: 1rem;
  height: 1rem;
}

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

.sidebar-agency-pin-btn.is-pinned {
  color: var(--c-warning);
}

.sidebar-agency-section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-7) var(--space-10a) var(--space-3);
  margin: var(--space-1) 0 0;
  font-size: var(--bp-text-xs);
  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);
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-agency-menu:not([hidden]) {
    animation: none;
  }
}

/* Collapsed sidebar - width + main offset; icon-only look is shared with .sidebar-drag-compact above. */

.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;
  z-index: 50;
}

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

.dash.sidebar-drag-compact .sidebar-collapse-toggle .sidebar-toggle-desktop.nav-icon--compact,
.dash.sidebar-collapsed .sidebar-collapse-toggle .sidebar-toggle-desktop.nav-icon--compact {
  /* Keep centering translate while flipping expand/collapse chevron. */
  transform: translate(-50%, -50%) rotate(180deg);
}

.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 .sidebar-rail-compact,
.dash.sidebar-no-transition .sidebar-rail-expanded,
.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 {
    margin-left: 0;
  }

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

  .sidebar-fab {
    display: flex;
  }

  .sidebar-toggle-desktop {
    display: none !important;
  }

  .sidebar-toggle-mobile {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8b);
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .dash.sidebar-drag-compact .sidebar-collapse-toggle,
  .dash.sidebar-collapsed .sidebar-collapse-toggle {
    align-self: stretch;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: var(--space-6a) var(--space-10);
    justify-content: flex-start;
  }

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

  .topbar {
    margin-left: var(--sidebar-inset);
  }

  .page-content {
    padding-left: var(--sidebar-inset);
  }
}

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

/* Public pages (lander, developers) - same floating topbar outside .dash */
.bp-public-topbar-shell {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--sidebar-inset);
  padding-bottom: 0;
  background: transparent;
}

.bp-public-topbar-shell .topbar {
  position: relative;
  top: auto;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.bp-topbar,
.topbar {
  flex-shrink: 0;
  height: var(--topbar-h);
  /* Floating chrome: same inset under the bar as above/beside it. Page content
   * padding still applies below that - without this, hub titles read top-heavy. */
  margin: var(--bp-shell-margin-block);
  padding: 0 var(--space-14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  border: none;
  border-radius: var(--bp-card-radius);
  box-shadow: var(--bp-shadow);
  background: var(--bp-shell-bg);
  position: sticky;
  top: var(--sidebar-inset);
  /* Above color-picker when closed; modals (100) cover the topbar when open */
  z-index: 90;
}

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

.bp-topbar-crumbs,
.topbar-crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  min-width: 0;
  align-items: center;
  font-size: var(--bp-text-sm);
  font-weight: 500;
}

.bp-topbar-crumb,
.topbar-crumb {
  color: var(--c-text-muted);
  text-decoration: none;
  padding: var(--space-2a) var(--space-8);
  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: none;
}

.topbar-crumb--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-5);
  line-height: 0;
}

.topbar-crumb-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  border-radius: calc(var(--radius) - 2px);
}

.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: none;
}

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

.topbar-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.topbar-save-status {
  display: none !important;
}

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

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

.topbar-bell-btn[aria-expanded="true"],
.topbar .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);
}

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

.topbar-bell-btn[aria-expanded="true"]:focus-visible,
.topbar .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-bell-menu {
  position: absolute;
  top: calc(100% + var(--space-7));
  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: var(--space-10) var(--space-12);
}

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

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

.topbar-bell-item {
  position: relative;
  padding: var(--space-11) var(--space-12) var(--space-11) var(--space-13a);
  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: var(--space-5);
  top: 1.05rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}

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

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

.topbar-bell-item-time {
  margin-top: var(--space-5);
  font-size: var(--bp-text-sm);
  color: var(--c-text-muted);
}

.topbar-bell-empty {
  padding: var(--space-14) var(--space-12);
  text-align: center;
  font-size: var(--bp-text-md);
  color: var(--c-text-muted);
}

.topbar-user {
  position: relative;
}

.topbar .topbar-user-btn {
  padding: var(--space-2) var(--space-7) var(--space-2) var(--space-2);
  height: auto;
  min-height: 2rem;
}

.topbar-menu-btn {
  gap: var(--space-5);
  padding: var(--space-5) var(--space-10);
  min-height: 2rem;
  color: var(--c-text-muted);
  font-size: var(--bp-text-sm);
  font-weight: 500;
}

.topbar-menu-btn__label {
  line-height: 1.2;
}

.topbar-menu-btn .topbar-user-caret {
  opacity: .8;
}

.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: var(--bp-text-xs);
  font-weight: 700;
  border: none;
  box-shadow: none;
}

.topbar-user-caret {
  display: inline-block;
  width: var(--bp-icon-size-xs);
  height: var(--bp-icon-size-xs);
  color: var(--c-text-muted);
  opacity: .9;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--bp-icon-chevron-down) center / contain no-repeat;
  mask: var(--bp-icon-chevron-down) center / contain no-repeat;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Sidebar account chip: menus open to the right, so face outward and pin to the end. */
.sidebar-user-trigger .topbar-user-caret {
  margin-left: auto;
  -webkit-mask-image: var(--bp-icon-chevron-right);
  mask-image: var(--bp-icon-chevron-right);
  transition: color var(--dur) var(--ease);
}

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

.sidebar-user-trigger[aria-expanded="true"] .topbar-user-caret {
  transform: none;
}

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

.bp-nav-menu,
.nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-9) var(--space-10);
}

.bp-nav-link,
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-8b);
  width: 100%;
  min-height: calc(var(--bp-icon-size-md) + .96rem);
  padding: .48rem var(--space-10);
  font-size: var(--bp-text-sm);
  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;
  position: relative;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--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(--bp-jelly-fg);
  background: var(--bp-jelly-bg);
  border-color: transparent;
  font-weight: 600;
  box-shadow: var(--bp-shadow);
}

.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;
  transition: color var(--dur) var(--ease);
}

/* Platform Admin / Platform Settings - sky platform accent (not agent primary). */
.nav-link[data-nav-key="admin"],
.nav-link[data-nav-key="platform"] {
  color: var(--c-platform-fg);
}

.nav-link[data-nav-key="admin"]:hover,
.nav-link[data-nav-key="platform"]:hover {
  color: var(--c-platform-fg);
  background: color-mix(in srgb, var(--c-platform-light) 72%, var(--bp-card-bg));
  box-shadow: var(--bp-shadow);
}

.nav-link[data-nav-key="admin"].active,
.nav-link[data-nav-key="platform"].active {
  color: var(--c-platform-fg);
  background: color-mix(in srgb, var(--c-platform-light) 72%, var(--bp-card-bg));
  border-color: transparent;
  font-weight: 600;
  box-shadow: var(--bp-shadow-hover);
}

.nav-link[data-nav-key="admin"]:focus-visible,
.nav-link[data-nav-key="platform"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-platform) 22%, transparent);
}

.nav-link[data-nav-key="admin"].active:focus-visible,
.nav-link[data-nav-key="platform"].active:focus-visible {
  box-shadow: var(--bp-shadow-hover), 0 0 0 3px color-mix(in srgb, var(--c-platform) 22%, transparent);
}

/* ── Sliding selection (universal; used by sidebar + other strips) ── */

.bp-slide-select {
  --bp-slide-select-dur: var(--sidebar-dur, var(--dur-slow, .28s));
  --bp-slide-select-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
  --bp-slide-select-bg: var(--bp-jelly-bg);
  --bp-slide-select-fg: var(--bp-jelly-fg);
  --bp-slide-select-shadow: none;
  --bp-slide-select-radius: var(--radius);
  position: relative;
  isolation: isolate;
}

.bp-slide-select[data-bp-slide-accent="platform"] {
  --bp-slide-select-bg: color-mix(in srgb, var(--c-platform-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-slide-select-fg: var(--c-platform-fg);
}

.bp-slide-select__pill,
.bp-slide-select__clip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  box-sizing: border-box;
  pointer-events: none;
  transform: translateZ(0);
  transform-origin: center center;
  backface-visibility: hidden;
  contain: layout style paint;
  will-change: transform;
  transition:
    transform var(--bp-slide-select-dur) var(--bp-slide-select-ease),
    background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.bp-slide-select__pill {
  border-radius: var(--bp-slide-select-radius);
  background: var(--bp-slide-select-bg);
  box-shadow: var(--bp-slide-select-shadow);
}

/* GL jelly stays with the pill - under the text-mirror clip. */
.bp-slide-select > .bp-lamp-gl-canvas {
  z-index: 1;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Let horizontal jelly stretch past the chrome padding while springing. */
.bp-slide-select--live.bp-slide-select--springing[data-bp-slide-orientation="horizontal"] {
  overflow: visible;
}

.bp-slide-select--springing .bp-slide-select__pill,
.bp-slide-select--springing .bp-slide-select__clip,
.bp-slide-select--springing .bp-slide-select__mirror-host,
.bp-slide-select--springing > .bp-lamp-gl-canvas {
  will-change: transform;
}

.bp-slide-select__clip {
  z-index: 2;
  overflow: hidden;
  border-radius: var(--bp-slide-select-radius);
}

.bp-slide-select__mirror-host {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  will-change: transform;
  transition: transform var(--bp-slide-select-dur) var(--bp-slide-select-ease);
}

/* Cloned track must fill the locked host box so % heights match the live strip. */
.bp-slide-select__mirror-host > .bp-slide-select__mirror {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.bp-slide-select--no-motion .bp-slide-select__pill,
.bp-slide-select--no-motion .bp-slide-select__clip,
.bp-slide-select--no-motion .bp-slide-select__mirror-host,
.dash.sidebar-shell-animating .bp-slide-select__pill,
.dash.sidebar-shell-animating .bp-slide-select__clip,
.dash.sidebar-shell-animating .bp-slide-select__mirror-host,
.dash.sidebar-is-resizing .bp-slide-select__pill,
.dash.sidebar-is-resizing .bp-slide-select__clip,
.dash.sidebar-is-resizing .bp-slide-select__mirror-host,
.dash.sidebar-no-transition .bp-slide-select__pill,
.dash.sidebar-no-transition .bp-slide-select__clip,
.dash.sidebar-no-transition .bp-slide-select__mirror-host {
  transition: none !important;
}

.bp-slide-select--empty .bp-slide-select__pill,
.bp-slide-select--empty .bp-slide-select__clip {
  opacity: 0;
}

/*
 * Clip mode (mask + reveal):
 *   underlay (z0) → pill/jelly bg (z1) masks underlay text → clip mirror (z2) reveals tint.
 * Pill/clip are pointer-events:none so clicks still hit the underlay.
 */
.bp-slide-select--live:not(.bp-slide-select--no-clip) > *:not(.bp-slide-select__pill):not(.bp-slide-select__clip):not(.bp-lamp-gl-canvas),
.bp-slide-select--live:not(.bp-slide-select--no-clip) .nav-menu,
.bp-slide-select--live:not(.bp-slide-select--no-clip) .nav-link,
.bp-slide-select--live:not(.bp-slide-select--no-clip) [data-bp-slide-item],
.bp-slide-select--live:not(.bp-slide-select--no-clip) .media-folder-nav-item,
.bp-slide-select--live:not(.bp-slide-select--no-clip) .media-folder-nav-btn,
.bp-slide-select--live:not(.bp-slide-select--no-clip) .media-folder-nav__track {
  position: relative;
  z-index: 0;
}

.bp-slide-select--live:not(.bp-slide-select--no-clip) > .bp-slide-select__pill,
.bp-slide-select--live:not(.bp-slide-select--no-clip) > .bp-lamp-gl-canvas {
  z-index: 1;
}

.bp-slide-select--live:not(.bp-slide-select--no-clip) > .bp-slide-select__clip {
  z-index: 2;
}

/* No-clip: labels sit above the pill so the real active color shows. */
.bp-slide-select--live.bp-slide-select--no-clip > *:not(.bp-slide-select__pill):not(.bp-slide-select__clip):not(.bp-lamp-gl-canvas),
.bp-slide-select--live.bp-slide-select--no-clip .nav-menu,
.bp-slide-select--live.bp-slide-select--no-clip .nav-link,
.bp-slide-select--live.bp-slide-select--no-clip [data-bp-slide-item] {
  position: relative;
  z-index: 1;
}

.bp-slide-select--live .nav-link.active,
.bp-slide-select--live .nav-link[data-nav-key="admin"].active,
.bp-slide-select--live .nav-link[data-nav-key="platform"].active,
.bp-slide-select--live .bp-nav-link.is-active,
.bp-slide-select--live .bp-nav-link.active,
.bp-slide-select--live .media-folder-nav-btn.is-active {
  color: var(--c-text-muted);
  font-weight: 500;
  background: transparent;
  box-shadow: none;
}

.bp-slide-select--live .media-folder-nav-btn.is-active {
  font-weight: 550;
}

/* No text-mirror clip: color the real label (avoids double-draw / drifting glyphs). */
.bp-slide-select--live.bp-slide-select--no-clip .nav-link.active,
.bp-slide-select--live.bp-slide-select--no-clip .bp-nav-link.is-active,
.bp-slide-select--live.bp-slide-select--no-clip .bp-nav-link.active,
.bp-slide-select--live.bp-slide-select--no-clip .media-folder-nav-btn.is-active {
  color: var(--bp-slide-select-fg);
  -webkit-text-fill-color: var(--bp-slide-select-fg);
}

.bp-slide-select--live.bp-slide-select--no-clip .nav-link[data-nav-key="admin"].active,
.bp-slide-select--live.bp-slide-select--no-clip .nav-link[data-nav-key="platform"].active {
  color: var(--c-platform-fg);
  -webkit-text-fill-color: var(--c-platform-fg);
}

.bp-slide-select--live .nav-link.active:hover,
.bp-slide-select--live .nav-link[data-nav-key="admin"].active:hover,
.bp-slide-select--live .nav-link[data-nav-key="platform"].active:hover,
.bp-slide-select--live .media-folder-nav-btn.is-active:hover {
  color: var(--c-text);
  background: transparent;
  box-shadow: none;
}

.bp-slide-select--live.bp-slide-select--no-clip .nav-link.active:hover,
.bp-slide-select--live.bp-slide-select--no-clip .media-folder-nav-btn.is-active:hover {
  color: var(--bp-slide-select-fg);
  -webkit-text-fill-color: var(--bp-slide-select-fg);
}

.bp-slide-select--live.bp-slide-select--no-clip .nav-link[data-nav-key="admin"].active:hover,
.bp-slide-select--live.bp-slide-select--no-clip .nav-link[data-nav-key="platform"].active:hover {
  color: var(--c-platform-fg);
  -webkit-text-fill-color: var(--c-platform-fg);
}

.bp-slide-select--live .nav-link.active:focus-visible,
.bp-slide-select--live .nav-link[data-nav-key="admin"].active:focus-visible,
.bp-slide-select--live .nav-link[data-nav-key="platform"].active:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-slide-select-fg) 22%, transparent);
}

/* Mirror always paints the selected treatment (clipped by the moving pill).
   Keep the same font-weight as base `.nav-link` (500) - `inherit` would fall
   through to body 400 and shift glyphs vs the muted underlay. */
.bp-slide-select__mirror .nav-link,
.bp-slide-select__mirror .bp-nav-link,
.bp-slide-select__mirror [data-bp-slide-item],
.bp-slide-select__mirror .pb-html-view-btn,
.bp-slide-select__mirror .analytics-tab,
.bp-slide-select__mirror .media-folder-nav-btn {
  color: var(--bp-slide-select-fg, var(--c-primary-color, var(--c-primary))) !important;
  -webkit-text-fill-color: var(--bp-slide-select-fg, var(--c-primary-color, var(--c-primary))) !important;
  font-weight: 500 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.bp-slide-select__mirror .nav-link[data-nav-key="admin"],
.bp-slide-select__mirror .nav-link[data-nav-key="platform"] {
  color: var(--c-platform-fg) !important;
}

.bp-slide-select__mirror .nav-dropdown-arrow {
  color: var(--c-primary-color, var(--c-primary));
}

.bp-slide-select__mirror .media-folder-nav-btn {
  font-weight: 550 !important;
}

@media (prefers-reduced-motion: reduce) {
  .bp-slide-select__pill,
  .bp-slide-select__clip,
  .bp-slide-select__mirror-host {
    transition: none !important;
  }
}

.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;
}

.nav-link .badge {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1a);
  margin-left: 0;
  z-index: 1;
}

.nav-link .nav-beta-badge {
  flex-shrink: 0;
  margin-left: 0;
  padding: var(--space-1c) var(--space-6);
  font-size: var(--bp-text-xs);
  line-height: 1.15;
}

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

.nav-dropdown-arrow {
  display: inline-block;
  margin-left: auto;
  width: var(--bp-icon-size-xs);
  height: var(--bp-icon-size-xs);
  flex-shrink: 0;
  color: var(--c-text-muted);
  background-color: currentColor;
  -webkit-mask: var(--bp-icon-chevron-down) center / contain no-repeat;
  mask: var(--bp-icon-chevron-down) center / contain no-repeat;
  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: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  padding: 0 0 0 var(--space-11);
  margin: 0 0 0 var(--space-8);
  border-left: none;
  background: transparent;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  transform-origin: top center;
  transition: max-height var(--sidebar-dur) var(--ease), opacity var(--dur) var(--ease), padding var(--sidebar-dur) var(--ease), margin var(--sidebar-dur) var(--ease), visibility 0s linear var(--sidebar-dur);
}

.nav-dropdown.is-open .nav-submenu {
  max-height: 32rem;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  padding: var(--space-1) 0 var(--space-1a) var(--space-11);
  margin: var(--space-1b) 0 0 var(--space-8);
  transition: max-height var(--sidebar-dur) var(--ease), opacity var(--dur) var(--ease), padding var(--sidebar-dur) var(--ease), margin var(--sidebar-dur) var(--ease), visibility 0s linear 0s;
}

/* JS jelly spring owns height/transform while opening or closing. */
.nav-submenu--blobbing {
  transition: none !important;
  max-height: none !important;
  overflow: hidden !important;
  visibility: visible !important;
  pointer-events: none;
  will-change: transform, height, opacity;
}

.nav-sublink {
  margin: 0 !important;
  padding: var(--space-6) var(--space-9) !important;
  font-size: var(--bp-text-sm) !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);
}

/* Sidebar perf: instant nav hover tweens; collapse shell + blob pill use --sidebar-dur / slide-select spring. */
#sidebar .nav-link,
#sidebar .nav-dropdown-toggle,
#sidebar .nav-dropdown-arrow,
#sidebar .nav-icon {
  transition: none !important;
  animation: none !important;
}

#sidebar .nav-submenu:not(.nav-submenu--blobbing) {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .dash .sidebar,
  .dash .main,
  .dash .bp-resizer.sidebar-resizer,
  .dash .sidebar-resizer,
  html:has(.dash) .toast-container,
  .bp-side-drawer {
    transition: 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,
.btn .bp-icon-mask,
.btn .pb-icon-mask {
  width: var(--bp-icon-size-sm);
  height: var(--bp-icon-size-sm);
  flex-shrink: 0;
}

/* Masked icon (SVG via --pb-icon). Prefer currentColor so buttons inherit text color. */
.bp-icon-mask {
  display: inline-block;
  flex-shrink: 0;
  width: var(--bp-icon-size-sm);
  height: var(--bp-icon-size-sm);
  background-color: currentColor;
  -webkit-mask: var(--pb-icon) no-repeat center / contain;
  mask: var(--pb-icon) no-repeat center / contain;
  vertical-align: middle;
}

/* Only Benefit Path brand marks follow the palette accent - other UI icons stay currentColor. */
.bp-brand-icon,
.bp-icon-mask.bp-brand-icon,
.bp-icon-mask[style*="benefit-path-icon.svg"],
.bp-icon-mask[style*="benefit-path-icon-solid.svg"],
.pb-icon-mask[style*="benefit-path-icon.svg"],
.pb-icon-mask[style*="benefit-path-icon-solid.svg"],
.form-select-option-icon {
  background-color: var(--c-theme-primary);
}

/* Secondary - chrome chip (default for .btn and explicit .btn-secondary).
 * Path funnel CTAs (.survey-page-cta / button seats) use Design fill on the host
 * — never dashboard chrome grey. */
.btn:not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.btn-ghost):not(.btn-dashed):not(.btn-surface):not(.survey-page-cta),
.btn-secondary {
  background: var(--btn-chrome-bg);
  color: var(--c-text);
  box-shadow: var(--bp-shadow);
}

.btn:hover:not(:disabled):not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.btn-ghost):not(.survey-page-cta),
.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,
.bp-split-page-header,
.cp-page-header,
.bp-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,
.bp-split-page-header,
.cp-page-header,
.bp-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,
.bp-split-page-header,
.cp-page-header,
.bp-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,
.btn-mini .bp-icon-mask,
.btn-sm .bp-icon-mask,
.btn-mini .pb-icon-mask,
.btn-sm .pb-icon-mask {
  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: color-mix(in srgb, var(--c-danger) 85%, #000);
  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: color-mix(in srgb, var(--c-warning) 85%, #000);
  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;
}

/* Busy state - swap label for an inline spinner during async actions.
   Add `.is-busy` to any button; label text stays for a11y but is masked. */
.btn.is-busy {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: wait;
}

.btn.is-busy > * {
  visibility: hidden;
}

.btn.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  color: var(--c-text);
  animation: bp-spin .65s linear infinite;
}

.btn-primary.is-busy::after,
.btn-danger.is-busy::after,
.btn-warning.is-busy::after {
  color: #fff;
}

/* Other chrome-chip controls (meatballs, card chrome).
   Tabs use the segmented track on `.analytics-tabs` instead of per-chip chrome. */

.order-menu-btn,
.acct-meatball-btn,
.card-header,
.card-footer,
.bp-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 var(--space-8);
  color: var(--c-text-muted);
}

/* Hub toolbars: match gear / meatball to sibling .btn-icon controls */
.bp-toolbar-actions .btn.order-menu-btn.btn-icon,
.media-header-actions .btn.order-menu-btn.btn-icon {
  width: var(--btn-min-height);
  min-width: var(--btn-min-height);
  height: var(--btn-min-height);
  min-height: var(--btn-min-height);
  padding: 0;
}

.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: var(--space-10) var(--space-12a);
  font-weight: 600;
  font-size: var(--bp-text-md);
  line-height: 1.35;
  color: var(--c-text);
  flex-shrink: 0;
}

.card-header--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-11);
  flex-wrap: wrap;
}

.card-body {
  position: relative;
  z-index: 0;
  padding: var(--space-14);
  flex: 1;
  min-height: 0;
}

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

.card-footer {
  position: relative;
  z-index: 1;
  margin: var(--bp-card-inset);
  padding: var(--space-10) var(--space-12a);
  flex-shrink: 0;
}

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

.card--interactive {
  transition: box-shadow var(--dur) var(--ease);
}

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

.card--tabs .card-body {
  padding: var(--space-8) var(--space-11);
}

/* Tab strip is the only chrome in these cards - don't leave a fat bottom margin. */
.card--tabs .analytics-tabs {
  margin: 0;
}

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

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

.password-toggle-btn .password-toggle-icon {
  display: inline-block;
  width: calc(var(--bp-ui-font-size, 14px) * 1.15);
  height: calc(var(--bp-ui-font-size, 14px) * 1.15);
  background-color: currentColor;
  -webkit-mask: var(--pb-icon) no-repeat center / contain;
  mask: var(--pb-icon) no-repeat center / contain;
}

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

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

.form-input,
.form-select,
.form-textarea,
.pb-field-input:not(.form-select-wrap) {
  box-sizing: border-box;
  border: 1px solid var(--bp-field-outline);
  border-radius: var(--radius);
  font-size: var(--bp-field-font-size);
  font-family: var(--bp-font-family, Poppins, system-ui, -apple-system, sans-serif);
  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: var(--bp-field-padding-y, 0) var(--bp-field-padding-x);
  line-height: var(--bp-field-line-height);
}

/* Padding-driven answer fields (survey + path seats) - fixed height + vertical pad fights line-height. */
.survey-step,
.bp-el[data-bp-el="question"] {
  --bp-field-font-size: var(--bp-text-lg);
  --bp-field-padding-y: .65rem;
}

.survey-step input.form-input:not([type="checkbox"]):not([type="radio"]),
.survey-step select.form-select,
.survey-step select.form-input.form-select,
.survey-step .form-select-trigger,
.bp-el[data-bp-el="question"] input.form-input:not([type="checkbox"]):not([type="radio"]),
.bp-el[data-bp-el="question"] select.form-select,
.bp-el[data-bp-el="question"] select.form-input.form-select,
.bp-el[data-bp-el="question"] .form-select-trigger,
.bp-el[data-bp-el="question"] .survey-other-input,
.bp-el[data-bp-el="question"] .survey-place-search-input {
  height: auto;
  min-height: unset;
  padding-top: var(--bp-field-padding-y, var(--space-10));
  padding-bottom: var(--bp-field-padding-y, var(--space-10));
  font-size: var(--bp-field-font-size);
  font-weight: 400;
  line-height: var(--bp-field-line-height);
}

.form-textarea {
  height: auto;
  min-height: 5.25rem;
  padding: var(--space-8) var(--space-11);
  line-height: 1.5;
  resize: vertical;
}

/* Shared multiline shell - same corner grip + radius as contact notes (.bp-rte). */
.bp-textarea {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 5.25rem;
  box-sizing: border-box;
  border: 1px solid var(--bp-field-outline);
  border-radius: var(--radius);
  background-color: var(--bp-card-bg);
  box-shadow: none;
  color: var(--c-text);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.bp-textarea:hover:not(.is-disabled) {
  border-color: var(--bp-field-outline-hover);
  background-color: var(--c-surface, var(--bp-card-bg));
}

.bp-textarea:focus-within:not(.is-disabled) {
  border-color: var(--bp-field-outline-focus);
  background-color: var(--c-surface, var(--bp-card-bg));
  box-shadow: var(--bp-field-ring);
}

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

.bp-textarea > textarea,
.bp-textarea > .form-textarea,
.bp-textarea > .pb-field-input,
.bp-textarea > .pb-field-textarea,
.bp-textarea > .form-input,
.bp-textarea > .compose-body-sms {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  resize: none !important;
  outline: none !important;
  padding: var(--space-8) var(--space-11) var(--space-14a);
  line-height: 1.5;
  font: inherit;
  color: inherit;
}

.bp-textarea-resize {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-1);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  border-radius: .2rem;
  background: transparent;
  color: var(--c-text-muted);
  cursor: ns-resize;
  touch-action: none;
}

.bp-textarea-resize:hover,
.bp-textarea-resize:focus-visible {
  color: var(--c-text);
  outline: none;
}

.bp-textarea-resize:disabled {
  opacity: .45;
  cursor: default;
}

.bp-textarea-resize .bp-icon-mask {
  width: .85rem;
  height: .85rem;
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--pb-icon, var(--bp-icon)) center / contain no-repeat;
  mask: var(--pb-icon, var(--bp-icon)) center / contain no-repeat;
}

/* Locked / readonly chrome may wrap the shell */
.bp-locked-field > .bp-textarea {
  width: 100%;
}

.bp-locked-field--multiline > .bp-textarea > textarea {
  padding-right: 2.35rem;
}

.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):not(:read-only),
.form-select:hover:not(:disabled),
.form-textarea:hover:not(:disabled):not(:read-only),
.pb-field-input:not(.form-select-wrap):hover:not(:disabled):not(:read-only) {
  border-color: var(--bp-field-outline-hover);
  background-color: var(--c-surface, var(--bp-card-bg));
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.pb-field-input:not(.form-select-wrap):focus {
  outline: none;
  border-color: var(--bp-field-outline-focus);
  background-color: var(--c-surface, var(--bp-card-bg));
  box-shadow: var(--bp-field-ring);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
.pb-field-input:not(.form-select-wrap):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: var(--space-8) var(--space-11);
  background-color: var(--bp-card-bg);
  color: var(--c-text);
}

select[multiple]:not(.bp-url-field) {
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius);
  color: var(--c-text);
  min-height: 6rem;
}

/* ── Outlined form controls ───────────────────────────────────────────────
   Text fields, textareas, selects, multi-select lists, number fields,
   duration/date triggers, search fields and tag comboboxes share a soft
   surface fill with a subtle accent-tinted outline. */
.form-input,
.form-textarea,
.form-select,
select.form-select,
select[multiple]:not(.bp-url-field),
.pb-field-input:not(.form-select-wrap),
.survey-other-input,
.form-input.tag-combobox-input,
.form-input.tag-picker-search-input,
.form-input[type="number"],
.form-input[type="date"],
.form-input[type="tel"],
.form-input[type="email"],
.form-input[type="password"],
.form-input[type="search"],
.form-input[type="url"],
.form-input[type="text"],
.bp-dur-trigger,
.bp-dtp-trigger,
.form-select-trigger {
  border: 1px solid var(--bp-field-outline);
  border-radius: var(--radius);
  background-color: var(--c-surface);
  box-shadow: none;
  color: var(--c-text);
}

.form-input:hover:not(:disabled):not(:read-only),
.form-textarea:hover:not(:disabled):not(:read-only),
.form-select:hover:not(:disabled),
select.form-select:hover:not(:disabled),
select[multiple]:not(.bp-url-field):hover:not(:disabled),
.pb-field-input:not(.form-select-wrap):hover:not(:disabled):not(:read-only),
.survey-other-input:hover:not(:disabled):not(:read-only),
.form-input.tag-combobox-input:hover:not(:disabled),
.form-input.tag-picker-search-input:hover:not(:disabled),
.form-input[type="number"]:hover:not(:disabled):not(:read-only),
.form-input[type="date"]:hover:not(:disabled):not(:read-only),
.form-input[type="tel"]:hover:not(:disabled):not(:read-only),
.form-input[type="email"]:hover:not(:disabled):not(:read-only),
.form-input[type="password"]:hover:not(:disabled):not(:read-only),
.form-input[type="search"]:hover:not(:disabled):not(:read-only),
.form-input[type="url"]:hover:not(:disabled):not(:read-only),
.form-input[type="text"]:hover:not(:disabled):not(:read-only),
.bp-dur-trigger:hover:not(:disabled),
.bp-dtp-trigger:hover:not(:disabled),
.form-select-trigger:hover:not(:disabled) {
  border-color: var(--bp-field-outline-hover);
  background-color: var(--c-surface);
  box-shadow: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
select.form-select:focus,
select[multiple]:not(.bp-url-field):focus,
.pb-field-input:not(.form-select-wrap):focus,
.survey-other-input:focus,
.form-input.tag-combobox-input:focus,
.form-input.tag-picker-search-input:focus,
.form-input[type="number"]:focus,
.form-input[type="date"]:focus,
.form-input[type="tel"]:focus,
.form-input[type="email"]:focus,
.form-input[type="password"]:focus,
.form-input[type="search"]:focus,
.form-input[type="url"]:focus,
.form-input[type="text"]:focus,
.bp-dur-trigger:focus-visible,
.bp-dtp-trigger:focus-visible,
.form-select-trigger:focus-visible,
.form-select-wrap.is-open .form-select-trigger,
.bp-dtp-wrap.is-open .bp-dtp-trigger,
.bp-dur-wrap.is-open .bp-dur-trigger {
  outline: none;
  border-color: var(--bp-field-outline-focus);
  background-color: var(--c-surface);
  box-shadow: var(--bp-field-ring);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled,
select.form-select:disabled,
select[multiple]:not(.bp-url-field):disabled,
.pb-field-input:not(.form-select-wrap):disabled,
.form-input.tag-combobox-input:disabled,
.form-input.tag-picker-search-input:disabled,
.form-input[type="number"]:disabled,
.bp-dur-trigger:disabled,
.bp-dtp-trigger:disabled,
.form-select-trigger:disabled {
  box-shadow: none;
}

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

/* Global title / name / search field (`bp-title-input`; alias `title-input`).
 * Underline control for titles and search bars across the dashboard - path editor,
 * calendar modals, hubs, toolbars. Prefer this class; do not invent local variants.
 * Lives after outlined field chrome so underline wins over `.form-input[type="text"]`. */
.bp-title-input-wrap {
  margin: 0;
}

.bp-title-input,
.title-input,
.form-input.bp-title-input,
.form-input.title-input,
.form-input[type="text"].bp-title-input,
.form-input[type="text"].title-input,
.form-input[type="search"].bp-title-input,
.form-input[type="search"].title-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: var(--bp-field-font-size);
  font-weight: 400;
  line-height: var(--bp-field-line-height, 1.25);
  color: var(--c-text);
  border: none;
  border-bottom: 1.5px solid var(--c-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: var(--space-1) 0 var(--space-5);
  height: auto;
  min-height: 0;
  transition: border-color var(--dur) var(--ease), border-bottom-color var(--dur) var(--ease);
}

.bp-title-input::placeholder,
.title-input::placeholder {
  color: var(--c-text-muted);
  font-weight: 400;
  opacity: .75;
}

.bp-title-input:hover:not(:disabled):not(:read-only),
.title-input:hover:not(:disabled):not(:read-only),
.form-input.bp-title-input:hover:not(:disabled):not(:read-only),
.form-input.title-input:hover:not(:disabled):not(:read-only),
.form-input[type="text"].bp-title-input:hover:not(:disabled):not(:read-only),
.form-input[type="text"].title-input:hover:not(:disabled):not(:read-only),
.form-input[type="search"].bp-title-input:hover:not(:disabled):not(:read-only),
.form-input[type="search"].title-input:hover:not(:disabled):not(:read-only) {
  border-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--c-text-muted) 55%, var(--c-border));
  background: transparent;
  box-shadow: none;
}

.bp-title-input:focus,
.title-input:focus,
.form-input.bp-title-input:focus,
.form-input.title-input:focus,
.form-input[type="text"].bp-title-input:focus,
.form-input[type="text"].title-input:focus,
.form-input[type="search"].bp-title-input:focus,
.form-input[type="search"].title-input:focus {
  border-color: transparent;
  border-bottom-color: var(--c-primary);
  background: transparent;
  box-shadow: none;
  outline: none;
}

.bp-title-input:disabled,
.bp-title-input:read-only,
.title-input:disabled,
.title-input:read-only,
.form-input.bp-title-input:disabled,
.form-input.bp-title-input:read-only,
.form-input.title-input:disabled,
.form-input.title-input:read-only {
  opacity: .72;
  cursor: default;
  background: transparent;
}

/* Search icon + title-input: layout only - underline lives on bp-title-input. */
.bp-search-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-text-muted);
}

.bp-search-wrap > .bp-search-icon {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  display: block;
  width: .95rem;
  height: .95rem;
  margin: 0;
  color: inherit;
  pointer-events: none;
  align-self: center;
  transition: color var(--dur) var(--ease);
}

.bp-search-wrap > :is(.bp-title-input, .title-input, .form-input[type="search"]) {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.bp-search-wrap > :is(.bp-title-input, .title-input, .form-input[type="search"])::-webkit-search-decoration,
.bp-search-wrap > :is(.bp-title-input, .title-input, .form-input[type="search"])::-webkit-search-cancel-button,
.bp-search-wrap > :is(.bp-title-input, .title-input, .form-input[type="search"])::-webkit-search-results-button,
.bp-search-wrap > :is(.bp-title-input, .title-input, .form-input[type="search"])::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.bp-search-wrap:is(:hover, :focus-within) {
  color: var(--c-primary-color, var(--c-primary));
}

.bp-textarea:has(> textarea.error) {
  border-color: var(--c-danger);
  box-shadow: none;
}

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

.form-hint a {
  color: var(--c-primary-color, var(--c-primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-hint a:hover {
  color: var(--c-primary-hover, var(--c-primary));
}

.form-error {
  font-size: var(--bp-text-sm);
  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: var(--space-8a);
  cursor: pointer;
  user-select: none;
}

/* Path choice / star radios are visually the button labels - never paint
 * dashboard radio chrome on them (see .survey-choice-input / .survey-star-input). */
.form-radio,
input[type="radio"]:not(.survey-choice-input):not(.survey-star-input) {
  --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"]:not(.survey-choice-input):not(.survey-star-input)::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"]:not(.survey-choice-input):not(.survey-star-input):hover:not(:disabled):not(:focus-visible) {
  box-shadow: var(--bp-shadow-hover);
}

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

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

.form-radio:focus-visible,
input[type="radio"]:not(.survey-choice-input):not(.survey-star-input):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"]:not(.survey-choice-input):not(.survey-star-input):disabled {
  cursor: not-allowed;
  opacity: .72;
}

/* Card-style radio options - 2FA delivery, settings choices, etc. */
.bp-radio-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.bp-radio-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-11);
  padding: var(--space-12) var(--space-13);
  border: 1px solid var(--bp-field-outline);
  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: var(--bp-field-outline-hover);
  box-shadow: var(--bp-shadow-hover);
}

.bp-radio-option:has(input:focus-visible) {
  border-color: var(--bp-field-outline-focus);
  box-shadow: var(--bp-shadow), var(--bp-field-ring);
}

.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: var(--space-1);
}

.bp-radio-option__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

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

.bp-radio-option__meta {
  display: block;
  font-size: var(--bp-text-sm);
  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));
}

.bp-radio-option:has(input:disabled),
.bp-radio-option.is-disabled {
  cursor: not-allowed;
  opacity: .55;
  box-shadow: none;
}

.bp-radio-option:has(input:disabled):hover,
.bp-radio-option.is-disabled:hover {
  border-color: var(--bp-field-outline);
  box-shadow: none;
}

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

/* Toolbar / header selects - never width:100% (collapses in flex rows) */
.form-select-wrap--toolbar,
.form-select-wrap.bp-toolbar-control,
.bp-dtp-wrap--toolbar,
.bp-dtp-wrap.bp-toolbar-control {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: var(--bp-text-sm);
  --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--toolbar .form-select-trigger,
.form-select-wrap.bp-toolbar-control .form-select-trigger,
.bp-dtp-wrap--toolbar .bp-dtp-trigger,
.bp-dtp-wrap.bp-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: var(--space-5);
  width: 100%;
  height: var(--bp-field-height);
  min-height: var(--bp-field-height);
  padding: 0 var(--bp-field-padding-x);
  font-family: var(--bp-font-family, Poppins, system-ui, -apple-system, sans-serif);
  font-size: var(--bp-field-font-size);
  font-weight: 400;
  line-height: var(--bp-field-line-height);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Editable duration/count: caret is a side control, not a full-width select face. */
.form-select-trigger.bp-dur-trigger--caret {
  width: var(--bp-field-height);
  min-width: var(--bp-field-height);
  max-width: var(--bp-field-height);
  padding: 0;
}

.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;
}

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

.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: hidden;
  overscroll-behavior: contain;
}

.form-select-menu--searchable {
  max-height: min(380px, 70vh);
}

.form-select-menu-search {
  flex-shrink: 0;
}

.form-select-menu-list {
  display: flex;
  flex-direction: column;
  gap: inherit;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.form-select-menu-list .form-select-option[hidden],
.form-select-menu-list .form-select-group-label[hidden] {
  display: none !important;
}

.form-select-menu--floating,
.cal-contact-results--floating {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 10050;
  margin: 0;
}

.form-select-menu--floating {
  min-width: 10.5rem;
  max-height: min(280px, calc(100vh - 16px));
  overflow: hidden;
  overscroll-behavior: contain;
  /* Always out of flow - guards against a frame where inline fixed is cleared. */
  position: fixed !important;
}

/* Opening/closing body-portaled menus must not nudge page scroll via anchoring. */
html:has(.form-select-wrap.is-open),
html:has(.form-select-menu.open),
html:has(.bp-dtp-wrap.is-open) {
  overflow-anchor: none;
}

.form-select-menu--floating.form-select-menu--searchable {
  max-height: min(380px, calc(100vh - 16px));
}

.form-select-group-label {
  padding: var(--space-5) var(--space-9) var(--space-1);
  font-size: var(--bp-text-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.form-select-group-label--swrr {
  margin-top: var(--space-5);
  padding-top: var(--space-9);
  border-top: 1px solid color-mix(in srgb, var(--c-platform) 28%, var(--c-border));
  color: var(--c-platform-fg);
}

.form-select-option--swrr {
  display: flex !important;
  align-items: center;
  gap: var(--space-7);
  color: var(--c-platform-fg) !important;
  font-weight: 600;
  background: color-mix(in srgb, var(--c-platform-light) 52%, var(--bp-card-bg)) !important;
}

.form-select-menu .form-select-option--swrr:hover,
.form-select-menu .form-select-option--swrr:focus-visible {
  color: var(--c-platform-fg) !important;
  background: var(--c-bg) !important;
  box-shadow: var(--bp-shadow);
}

.form-select-menu .form-select-option--swrr.is-active {
  color: var(--c-platform-fg) !important;
  background: color-mix(in srgb, var(--c-platform-light) 82%, #fff) !important;
}

[data-theme="dark"] .form-select-menu .form-select-option--swrr:hover,
[data-theme="dark"] .form-select-menu .form-select-option--swrr:focus-visible {
  background: var(--c-bg) !important;
}

[data-theme="dark"] .form-select-menu .form-select-option--swrr.is-active {
  background: color-mix(in srgb, var(--c-platform-light) 55%, var(--c-surface)) !important;
}

.form-select-option-icon {
  width: var(--bp-icon-size-xs);
  height: var(--bp-icon-size-xs);
  flex-shrink: 0;
  display: inline-block;
  background-color: var(--c-theme-primary);
  -webkit-mask: var(--pb-icon) center / contain no-repeat;
  mask: var(--pb-icon) center / contain no-repeat;
  --pb-icon: url('/static/img/icons/benefit-path-icon-solid.svg');
}

.form-select-option--preview,
.form-select-option--swrr {
  display: flex !important;
  align-items: center;
  gap: var(--space-8);
}

.form-select-option--preview {
  justify-content: space-between;
  gap: var(--space-11);
  width: 100%;
}

.form-select-option--preview .form-select-option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.form-select-option--rich {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  white-space: normal;
  padding-top: .65rem;
  padding-bottom: .65rem;
}

.form-select-option--rich .form-select-option-label {
  font-weight: 600;
  line-height: 1.25;
}

.form-select-option-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.form-select-option-badges .badge-neutral,
.form-select-option-badges .badge-info {
  --bp-chip-color: var(--c-text-muted);
  --bp-chip-fg: var(--c-text-muted);
  --bp-chip-light: color-mix(in srgb, var(--c-text-muted) 14%, var(--c-surface, #eff1f5));
  --bp-chip-bg: color-mix(in srgb, var(--bp-chip-light) 78%, var(--bp-card-bg, var(--c-surface)));
  font-size: var(--bp-text-xs);
  padding: .15rem .45rem;
}

.form-select-option-badges .form-select-option-badge--trait {
  --bp-chip-color: var(--c-text);
  --bp-chip-fg: var(--c-text);
  --bp-chip-light: color-mix(in srgb, var(--c-text) 10%, var(--c-surface, #eff1f5));
}

.form-select-option-badges .badge-info {
  --bp-chip-color: var(--c-primary-color, var(--c-primary));
  --bp-chip-fg: var(--bp-chip-color);
  --bp-chip-light: var(--c-primary-light);
  --bp-chip-bg: color-mix(in srgb, var(--bp-chip-light) 72%, var(--bp-card-bg, var(--c-surface)));
}

[data-theme="dark"] .form-select-option-badges .badge-neutral {
  --bp-chip-light: color-mix(in srgb, var(--c-text-muted) 22%, var(--c-bg));
}

[data-theme="dark"] .form-select-option-badges .form-select-option-badge--trait {
  --bp-chip-light: color-mix(in srgb, var(--c-text) 18%, var(--c-bg));
}

.form-select-option-swatch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 5.25rem;
  height: 1.05rem;
  flex-shrink: 0;
  margin-left: auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: none;
  box-sizing: border-box;
}

.form-select-option-swatch > span {
  min-width: 0;
  display: block;
}

.form-select-trigger-label.has-preview-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  width: 100%;
  min-width: 0;
}

.form-select-trigger-label.has-preview-swatch .form-select-option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-select-trigger-label.has-preview-swatch .form-select-option-swatch {
  width: 4.5rem;
  height: .95rem;
  margin-left: auto;
}

/* SWRR selected value: platform blue label + icon only (no extra border/fill on the control). */
.form-select-trigger-label.is-swrr {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--c-platform-fg);
  font-weight: 600;
}

.form-select-trigger-label.is-swrr .form-select-option-icon {
  width: calc(var(--bp-ui-font-size, 14px) * 0.95);
  height: calc(var(--bp-ui-font-size, 14px) * 0.95);
}

.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: var(--space-10);
  min-width: min(100%, 320px);
  padding: var(--space-11);
}

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

.bp-dtp-panel--floating {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 10050;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: visible;
  overscroll-behavior: contain;
}

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

.bp-dtp-panel--date-only > .bp-dtp-time-columns--clock {
  display: none;
}

.bp-dtp-when-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.bp-dtp-when-block .bp-dtp-time-head {
  padding-top: var(--space-1);
}

.bp-dtp-when-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bp-dtp-when-columns .bp-dtp-time-col-list--wheel .bp-dtp-time,
.bp-dtp-when-columns .bp-dtp-time-col-list--hi .bp-dtp-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.bp-dtp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.bp-dtp-month-label {
  flex: 1;
  text-align: center;
  font-size: var(--bp-text-md);
  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: var(--space-1);
}

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

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

.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: var(--bp-text-sm);
  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: var(--bp-text-sm);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding-top: var(--space-1);
}

.bp-dtp-panel--time-only {
  padding-top: var(--space-10);
}

.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: var(--space-7);
}

.bp-dtp-time-columns--seconds,
.bp-dtp-panel--seconds-only .bp-dtp-time-columns {
  grid-template-columns: minmax(0, 1fr);
}

.bp-dtp-panel--seconds-only {
  min-width: 0;
}

.bp-dtp-panel--seconds-only .bp-dtp-time {
  white-space: nowrap;
}

.bp-dtp-time-columns--hm,
.bp-dtp-panel--hm .bp-dtp-time-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bp-dtp-time-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-3);
}

.bp-dtp-time-col-label {
  text-align: center;
  font-size: var(--bp-text-xs);
  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: var(--space-3);
  max-height: 10.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1);
  border-radius: var(--bp-card-section-radius);
  background: var(--bp-card-section-bg);
}

.bp-dtp-time-col-wheel {
  --bp-dtp-wheel-h: 10.5rem;
  --bp-dtp-item-h: 2rem;
  --bp-dtp-wheel-pad: calc((var(--bp-dtp-wheel-h) - var(--bp-dtp-item-h)) / 2);
  --bp-slide-select-fg: var(--bp-jelly-fg, var(--c-primary-color, var(--c-primary)));
  position: relative;
  isolation: isolate;
  height: var(--bp-dtp-wheel-h);
  border-radius: var(--bp-card-section-radius);
  background: var(--bp-card-section-bg);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.bp-dtp-time-col-wheel.is-snapping .bp-dtp-time-col-wheel-hi::before {
  transition: transform 0.12s var(--ease, ease-out);
}

.bp-dtp-time-col-wheel.is-snapping .bp-dtp-time-col-list--wheel,
.bp-dtp-time-col-wheel.is-snapping .bp-dtp-time-col-list--hi {
  will-change: transform, scroll-position;
}

.bp-dtp-time-col-wheel.is-wheel-click .bp-dtp-time-col-wheel-hi::before {
  animation: bp-dtp-wheel-click 0.24s var(--ease, cubic-bezier(.22, 1, .36, 1));
}

@keyframes bp-dtp-wheel-click {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.bp-dtp-time-col-wheel.is-dragging .bp-dtp-time-col-list--wheel {
  scroll-snap-type: none;
  transition: none;
}

.bp-dtp-time-col-wheel.is-dragging .bp-dtp-time-col-wheel-hi::before {
  transition: transform 0.08s var(--ease, ease-out);
  transform: scale(0.98);
}

.bp-dtp-time-col-wheel.is-dragging,
html.is-bp-wheel-dragging,
html.is-bp-wheel-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

.bp-dtp-time-col-wheel-hi {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--bp-dtp-item-h);
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.bp-dtp-time-col-wheel-hi::before {
  content: "";
  position: absolute;
  inset: 0 var(--space-2);
  border-radius: var(--radius);
  background: var(--bp-jelly-bg, color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-section-bg, var(--c-surface))));
  z-index: 0;
}

.bp-dtp-time-col-list--hi {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-block: var(--bp-dtp-wheel-pad);
  padding-inline: var(--space-1);
  background: transparent;
  will-change: transform;
  pointer-events: none;
}

/* Mirror clip (same idea as sidebar / folder slide-select): jelly bg under tinted glyphs. */
.bp-dtp-time-col-wheel-hi .bp-dtp-wheel-mirror .bp-dtp-time,
.bp-dtp-time-col-wheel-hi .bp-dtp-time-col-list--hi .bp-dtp-time {
  flex: 0 0 var(--bp-dtp-item-h);
  height: var(--bp-dtp-item-h);
  padding: 0;
  opacity: 1;
  color: var(--bp-slide-select-fg, var(--bp-jelly-fg, var(--c-primary-color, var(--c-primary)))) !important;
  -webkit-text-fill-color: var(--bp-slide-select-fg, var(--bp-jelly-fg, var(--c-primary-color, var(--c-primary)))) !important;
  font-weight: 700;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  pointer-events: none;
}

.bp-dtp-time-col-wheel-hi .bp-dtp-wheel-mirror .bp-dtp-time.is-mirror-muted,
.bp-dtp-time-col-wheel-hi .bp-dtp-time-col-list--hi .bp-dtp-time.is-mirror-muted {
  opacity: .32;
  color: var(--c-text-muted) !important;
  -webkit-text-fill-color: var(--c-text-muted) !important;
  font-weight: 500;
}

.bp-dtp-time-col-list--wheel {
  position: relative;
  z-index: 1;
  height: 100%;
  max-height: none;
  gap: 0;
  padding-block: var(--bp-dtp-wheel-pad);
  padding-inline: var(--space-1);
  background: transparent;
  border-radius: 0;
  scroll-snap-type: y mandatory;
  scroll-padding-block: var(--bp-dtp-wheel-pad);
  -webkit-overflow-scrolling: touch;
  touch-action: none;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 16%,
    #000 calc(var(--bp-dtp-wheel-pad) - 1px),
    transparent var(--bp-dtp-wheel-pad),
    transparent calc(100% - var(--bp-dtp-wheel-pad)),
    #000 calc(100% - var(--bp-dtp-wheel-pad) + 1px),
    #000 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 16%,
    #000 calc(var(--bp-dtp-wheel-pad) - 1px),
    transparent var(--bp-dtp-wheel-pad),
    transparent calc(100% - var(--bp-dtp-wheel-pad)),
    #000 calc(100% - var(--bp-dtp-wheel-pad) + 1px),
    #000 84%,
    transparent 100%
  );
}

.bp-dtp-time-col-list--wheel::-webkit-scrollbar {
  display: none;
}

.bp-dtp-time-col-list--wheel .bp-dtp-time {
  flex: 0 0 var(--bp-dtp-item-h);
  height: var(--bp-dtp-item-h);
  padding: 0;
  scroll-snap-align: center;
  color: var(--c-text-muted);
  cursor: grab;
  white-space: nowrap;
}

.bp-dtp-time-col-list--wheel .bp-dtp-time:hover:not(:disabled):not(.is-selected) {
  background: transparent;
  box-shadow: none;
  color: var(--c-text);
}

.bp-dtp-time-col-list--wheel.bp-dtp-wheel-live .bp-dtp-time.is-selected,
.bp-dtp-time-col-list--wheel.bp-dtp-wheel-live .bp-dtp-time.is-selected:hover {
  background: transparent;
  box-shadow: none;
  color: var(--c-text-muted);
  font-weight: 500;
}

.bp-dtp-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-7) var(--space-5);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  color: var(--c-text-muted);
  font-size: var(--bp-text-sm);
  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: var(--bp-text-sm);
}

.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);
}

/* Inclusive range wash between paired start/end dates */
.bp-dtp-day.is-in-range {
  position: relative;
  z-index: 0;
  color: var(--c-primary-color, var(--c-primary));
}

.bp-dtp-day.is-in-range::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 14%;
  bottom: 14%;
  /* Bridge grid gap + leftover from max-width centering so days touch. */
  left: calc(-0.5 * var(--bp-dtp-day-gap, var(--space-2)) - var(--space-6));
  right: calc(-0.5 * var(--bp-dtp-day-gap, var(--space-2)) - var(--space-6));
  background: color-mix(in srgb, var(--c-primary-light) 58%, var(--bp-card-bg, var(--c-surface)));
  pointer-events: none;
}

.bp-dtp-day.is-range-middle:not(.is-selected) {
  font-weight: 550;
  background: transparent;
  box-shadow: none;
}

.bp-dtp-day.is-range-start:not(.is-selected),
.bp-dtp-day.is-range-end:not(.is-selected) {
  font-weight: 600;
  background: transparent;
  box-shadow: none;
}

.bp-dtp-day.is-range-start::before {
  left: 16%;
  border-radius: 999px 0 0 999px;
}

.bp-dtp-day.is-range-end::before {
  right: 16%;
  border-radius: 0 999px 999px 0;
}

.bp-dtp-day.is-range-start.is-range-end::before {
  left: 16%;
  right: 16%;
  border-radius: 999px;
}

.bp-dtp-day.is-in-range:hover:not(:disabled):not(.is-selected)::before {
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg, var(--c-surface)));
}

/* Jelly pill owns selected fill on calendars / time columns. */
.bp-dtp-cal-grid.bp-slide-select {
  --bp-slide-select-radius: var(--radius);
  isolation: isolate;
}

.bp-dtp-cal-grid.bp-slide-select--live .bp-dtp-day,
.bp-dtp-time-col-list.bp-slide-select--live .bp-dtp-time {
  position: relative;
  z-index: 1;
}

.bp-dtp-cal-grid.bp-slide-select--live .bp-dtp-day.is-selected,
.bp-dtp-cal-grid.bp-slide-select--live .bp-dtp-day.is-selected:hover,
.bp-dtp-time-col-list.bp-slide-select--live .bp-dtp-time.is-selected,
.bp-dtp-time-col-list.bp-slide-select--live .bp-dtp-time.is-selected:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bp-slide-select-fg, var(--c-primary-color, var(--c-primary)));
}

/* Keep the range bar under the jelly pill on endpoints */
.bp-dtp-cal-grid.bp-slide-select--live .bp-dtp-day.is-range-start.is-selected::before,
.bp-dtp-cal-grid.bp-slide-select--live .bp-dtp-day.is-range-end.is-selected::before {
  opacity: .9;
}

.bp-dtp-time-col-list.bp-slide-select {
  --bp-slide-select-radius: var(--radius);
  position: relative;
  isolation: isolate;
}

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

.bp-chevron--up {
  -webkit-mask-image: var(--bp-icon-chevron-up);
  mask-image: var(--bp-icon-chevron-up);
}

.bp-chevron--left {
  -webkit-mask-image: var(--bp-icon-chevron-left);
  mask-image: var(--bp-icon-chevron-left);
}

.bp-chevron--right {
  -webkit-mask-image: var(--bp-icon-chevron-right);
  mask-image: var(--bp-icon-chevron-right);
}

.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.
   Bubble is rendered by tooltip.js (.bp-tooltip) so overflow parents cannot clip it. */
.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: calc(var(--bp-ui-font-size, 14px) * 0.9);
  height: calc(var(--bp-ui-font-size, 14px) * 0.9);
}

/* Floating tooltip - sidebar labels, truncated cells, help icons (tooltip.js).
   Sit above modals, pickers, and other overlays (those share ~10050–13000). */
.bp-tooltip {
  position: fixed;
  z-index: 50000;
  max-width: min(16rem, calc(100vw - 1rem));
  padding: var(--space-6a) .68rem;
  font-size: var(--bp-text-sm);
  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-dropdown-shadow);
  pointer-events: none;
  opacity: 0;
  white-space: pre-line;
  text-align: center;
  transition: opacity var(--dur) var(--ease);
}

.bp-tooltip.is-visible {
  opacity: 1;
}

.bp-tooltip--help {
  max-width: min(440px, calc(100vw - 1rem));
  min-width: min(200px, calc(100vw - 1rem));
  text-align: center;
  line-height: 1.45;
  padding: var(--space-6) var(--space-10);
}

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

/* ── 10. Pill chips (badges / tags / status) ────────────────────────────── */
/* Exclude `.token` - Prism HTML tags use class="token tag" and must stay plain text. */

.tag:not(.token),
.tag-pill,
.contacts-pill,
.badge-info,
.badge-primary,
.badge-neutral {
  /* Match directory / slide-select jelly (profile/agency accent). */
  --bp-chip-color: var(--c-primary-color, var(--c-primary));
  --bp-chip-fg: var(--bp-jelly-fg, var(--c-primary-color, var(--c-primary)));
  --bp-chip-light: var(--c-primary-light);
  --bp-chip-bg: color-mix(in srgb, var(--bp-chip-light) 72%, var(--bp-card-bg, var(--c-surface)));
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-12a);
  font-size: var(--bp-text-sm);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .02em;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
  border: none;
  background: var(--bp-chip-bg);
  color: var(--bp-chip-fg);
  box-shadow: none;
}

/*
 * Contact tags (secondary). Use .tag-pill--tag on real tags only —
 * Source / State / email chips keep default primary .tag-pill.
 */
.tag-pill--tag {
  --bp-chip-color: var(--c-secondary);
  --bp-chip-fg: var(--bp-chip-color);
  --bp-chip-light: color-mix(in srgb, var(--bp-chip-color) 15%, var(--c-surface, #eff1f5));
  --bp-chip-bg: color-mix(in srgb, var(--bp-chip-light) 72%, var(--bp-card-bg, var(--c-surface)));
}

[data-theme="dark"] .tag-pill--tag {
  --bp-chip-light: color-mix(in srgb, var(--bp-chip-color) 25%, var(--c-bg));
}

.contacts-high-intent-badge,
.contacts-appointment-badge,
.contacts-t65-badge,
.contacts-lead-order-badge,
.contacts-google-badge,
.contacts-outlook-badge,
.contacts-role-badge {
  /* Icon chips: wash from --bp-chip-color (Catppuccin semantic via inline style). */
  --bp-chip-color: var(--c-theme-primary);
  --bp-chip-fg: var(--bp-chip-color);
  --bp-chip-light: color-mix(in srgb, var(--bp-chip-color) 15%, var(--c-surface, #eff1f5));
  --bp-chip-bg: color-mix(in srgb, var(--bp-chip-light) 72%, var(--bp-card-bg, var(--c-surface)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-4) var(--space-7);
  font-size: var(--bp-text-sm);
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
  border: none;
  background: var(--bp-chip-bg);
  color: var(--bp-chip-fg);
  box-shadow: none;
  flex-shrink: 0;
  margin-left: var(--space-1a);
}

/* Role / custom-tint / icon chips rebuild the wash from --bp-chip-color. */
.contacts-pill--tinted {
  --bp-chip-light: color-mix(in srgb, var(--bp-chip-color) 15%, var(--c-surface, #eff1f5));
}

[data-theme="dark"] .contacts-high-intent-badge,
[data-theme="dark"] .contacts-appointment-badge,
[data-theme="dark"] .contacts-t65-badge,
[data-theme="dark"] .contacts-lead-order-badge,
[data-theme="dark"] .contacts-google-badge,
[data-theme="dark"] .contacts-outlook-badge,
[data-theme="dark"] .contacts-role-badge,
[data-theme="dark"] .contacts-pill--tinted {
  --bp-chip-light: color-mix(in srgb, var(--bp-chip-color) 25%, var(--c-bg));
}

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

.contacts-role-badge svg,
.contacts-role-badge .bp-icon-mask,
.contacts-role-badge .contacts-role-badge__icon,
.contacts-role-badge img,
.contacts-high-intent-badge .bp-icon-mask,
.contacts-appointment-badge .bp-icon-mask,
.contacts-t65-badge .bp-icon-mask,
.contacts-lead-order-badge .bp-icon-mask {
  display: block;
  width: calc(var(--bp-ui-font-size, 14px) * 0.9);
  height: calc(var(--bp-ui-font-size, 14px) * 0.9);
  flex-shrink: 0;
  object-fit: contain;
}

.contacts-high-intent-badge__label,
.contacts-appointment-badge__label,
.contacts-t65-badge__label,
.contacts-lead-order-badge__label,
.contacts-badge-chip__label {
  /* Icon-only chips - tooltip / aria-label carry the name. */
  display: none;
}

.contacts-name-badges {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-left: auto;
}

.contacts-pill--success,
.tag-success {
  --bp-chip-color: var(--c-success);
  --bp-chip-fg: var(--c-success);
  --bp-chip-light: color-mix(in srgb, var(--c-success) 15%, var(--c-surface, #eff1f5));
}

.contacts-pill--warning,
.tag-pill--warning {
  --bp-chip-color: var(--c-warning);
  --bp-chip-fg: var(--c-warning);
  --bp-chip-light: color-mix(in srgb, var(--c-warning) 15%, var(--c-surface, #eff1f5));
}

.contacts-pill--muted {
  --bp-chip-color: var(--c-text-muted);
  --bp-chip-fg: var(--c-text-muted);
  --bp-chip-light: color-mix(in srgb, var(--c-text-muted) 15%, var(--c-surface, #eff1f5));
}

.contacts-pill--danger {
  --bp-chip-color: var(--c-danger);
  --bp-chip-fg: var(--c-danger);
  --bp-chip-light: color-mix(in srgb, var(--c-danger) 15%, var(--c-surface, #eff1f5));
}

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

.contacts-pill--platform {
  --bp-chip-color: var(--c-platform);
  --bp-chip-fg: var(--c-platform-fg);
  --bp-chip-light: color-mix(in srgb, var(--c-platform) 15%, var(--c-surface, #eff1f5));
}

.contacts-pill--agency {
  --bp-chip-color: var(--c-agency);
  --bp-chip-fg: var(--c-agency);
  --bp-chip-light: color-mix(in srgb, var(--c-agency) 15%, var(--c-surface, #eff1f5));
}

/* Draft + live: live pill uses a concave left edge that follows the draft cap. */
.bp-status-stack {
  --bp-stack-radius: .8rem;
  --bp-stack-overlap: var(--bp-stack-radius);
  --bp-stack-gap: 2px;
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  max-width: 100%;
  white-space: nowrap;
}

.bp-status-stack__live {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  margin-left: calc(-1 * var(--bp-stack-overlap));
  padding-left: calc(var(--bp-stack-radius) + var(--bp-stack-gap) + var(--space-7));
  -webkit-mask-image: radial-gradient(
    circle at 0 50%,
    transparent calc(var(--bp-stack-radius) + var(--bp-stack-gap)),
    #000 calc(var(--bp-stack-radius) + var(--bp-stack-gap) + .6px)
  );
  mask-image: radial-gradient(
    circle at 0 50%,
    transparent calc(var(--bp-stack-radius) + var(--bp-stack-gap)),
    #000 calc(var(--bp-stack-radius) + var(--bp-stack-gap) + .6px)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.bp-status-stack__draft {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

[data-theme="dark"] .contacts-pill--success,
[data-theme="dark"] .tag-success,
[data-theme="dark"] .contacts-pill--warning,
[data-theme="dark"] .tag-pill--warning,
[data-theme="dark"] .contacts-pill--muted,
[data-theme="dark"] .contacts-pill--danger,
[data-theme="dark"] .contacts-pill--platform,
[data-theme="dark"] .contacts-pill--agency {
  --bp-chip-light: color-mix(in srgb, var(--bp-chip-color) 25%, var(--c-bg));
}

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

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

.tag-input {
  position: relative;
}

.tag-input-field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  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: var(--space-5);
  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 {
  /* Match contacts toolbar icon buttons (.btn-icon). */
  flex-shrink: 0;
}

.tag-input-add-wrap.is-open .tag-input-add-btn {
  background: var(--btn-chrome-bg-hover);
  color: var(--c-text);
  box-shadow: var(--bp-shadow-hover);
}

.tag-input-search {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--bp-text-md);
  color: var(--c-text);
  padding: var(--space-1a) 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: var(--space-5);
  padding: var(--space-6);
}

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

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

.tag-picker-section-label {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-9) 0;
  font-size: var(--bp-text-xs);
  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: var(--space-2);
  margin-top: var(--space-1a);
  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: var(--space-10);
  cursor: pointer;
  user-select: none;
}

.toggle-switch:has(input:disabled) {
  cursor: not-allowed;
  opacity: .55;
}

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

.toggle-track {
  --bp-toggle-x: 0px;
  --bp-toggle-on: 18px;
  --bp-toggle-thumb-sx: 1;
  --bp-toggle-thumb-sy: 1;
  --bp-toggle-jelly-bg: var(--c-primary-color, var(--c-primary));
  --bp-toggle-jelly-fg: #fff;
  /* Exterior drop removed with site-wide flat surfaces. */
  --bp-toggle-track-shadow: none;
  --bp-toggle-jelly-shadow: var(--bp-toggle-track-shadow);
  --bp-toggle-fill: color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
  --bp-toggle-fill-shadow: var(--bp-toggle-track-shadow);
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Static track shell - size/shape stay put while the thumb jellies. */
.toggle-track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bp-toggle-fill);
  box-shadow: var(--bp-toggle-fill-shadow);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  z-index: 0;
  pointer-events: none;
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
  transform: translateX(var(--bp-toggle-x)) scale(var(--bp-toggle-thumb-sx), var(--bp-toggle-thumb-sy));
  transform-origin: center center;
  transition: transform var(--dur) var(--ease-emphasis);
  z-index: 1;
}

.toggle-switch input:checked + .toggle-track {
  --bp-toggle-fill: var(--bp-toggle-jelly-bg);
  --bp-toggle-fill-shadow: var(--bp-toggle-jelly-shadow);
}

.toggle-switch--warning {
  --bp-toggle-jelly-bg: var(--c-warning);
  --bp-toggle-jelly-fg: #fff;
  --bp-toggle-jelly-shadow: var(--bp-toggle-track-shadow);
}

.toggle-switch--warning input:checked + .toggle-track {
  --bp-toggle-fill: var(--c-warning);
}

[data-theme="dark"] .toggle-track {
  --bp-toggle-track-shadow: none;
  --bp-toggle-jelly-shadow: var(--bp-toggle-track-shadow);
  --bp-toggle-fill-shadow: var(--bp-toggle-track-shadow);
}

[data-theme="dark"] .toggle-track::after {
  box-shadow: none;
}

/* Legacy fallback when jelly JS hasn't enhanced yet. */
.toggle-switch:not(.toggle-switch--jelly) input:checked + .toggle-track::after {
  --bp-toggle-x: var(--bp-toggle-on);
}

/* Jelly owns thumb motion - kill CSS transform transitions on the knob. */
.toggle-switch--jelly .toggle-track::before {
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.toggle-switch--jelly .toggle-track::after {
  transition: none;
}

.toggle-switch--jelly .toggle-track.is-bp-toggle-gl::after {
  opacity: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .toggle-switch--jelly .toggle-track::before,
  .toggle-switch--jelly .toggle-track::after {
    transition: none;
  }
}

/* ── 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-bell-header matches .card-header chrome; version is footer subtext
 */

.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-dropdown-shadow);
  overflow: hidden;
  color: var(--c-text);
}

/* Form select lists - solid panel so options stay readable */
.form-select-menu {
  background: var(--c-surface);
  border: 1px solid transparent;
  box-shadow: var(--bp-dropdown-shadow);
}

[data-theme="dark"] .form-select-menu {
  background: var(--c-surface);
  border-color: transparent;
  box-shadow: var(--bp-dropdown-shadow);
}

/* 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;
}

.form-select-menu {
  overflow: hidden;
}

.form-select-menu .form-select-menu-list {
  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,
.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--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: var(--space-1);
  padding: var(--bp-menu-pad);
  transform-origin: top;
  animation: bp-menu-in var(--dur) var(--ease-emphasis);
}

@keyframes bp-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.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;
  /* Beat inline z-index leftovers (400/420/520) and route loader / tooltips. */
  z-index: var(--bp-z-context-menu, 70000) !important;
}

.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 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin: 0 0 var(--space-1);
  padding: var(--space-9) var(--space-11);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-chrome-bg);
  box-shadow: var(--bp-shadow);
  font-weight: 600;
  font-size: var(--bp-text-md);
  line-height: 1.35;
  color: var(--c-text);
}

/* Account menu version is tiny footer subtext; What's New keeps chrome header. */
.topbar-user-menu-version {
  flex-shrink: 0;
  margin: 0;
  padding: var(--space-1) var(--space-9) var(--space-7);
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 500;
  font-size: var(--bp-text-xs);
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  color: var(--c-text-light);
  pointer-events: none;
  user-select: none;
}

.topbar-bell-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--bp-card-inset) var(--bp-card-inset) 0;
  padding: var(--space-10) var(--space-12);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-chrome-bg);
  box-shadow: var(--bp-shadow);
  font-weight: 600;
  font-size: var(--bp-text-md);
  line-height: 1.35;
  color: var(--c-text);
}

.bp-menu-header-title,
.topbar-bell-title {
  font-weight: 600;
  font-size: var(--bp-text-md);
  line-height: 1.35;
  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: var(--space-8) var(--space-10a);
  border: none;
  border-radius: calc(var(--radius) + 2px);
  background: transparent;
  color: var(--c-text);
  font-size: var(--bp-text-sm);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--bp-font-family, Poppins, system-ui, -apple-system, sans-serif);
  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-text);
  background: var(--c-bg);
  box-shadow: var(--bp-shadow);
}

.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:disabled,
.bp-menu-item[aria-disabled="true"],
.order-menu-item:disabled,
.order-menu-item[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
  pointer-events: none;
  color: var(--c-text-muted);
  background: transparent;
  box-shadow: none;
}

.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;
}

/* Options on select menus - neutral hover (like sidebar); jelly/active keeps primary. */
.form-select-menu .form-select-option:hover,
.form-select-menu .form-select-option:focus-visible {
  color: var(--c-text);
  background: var(--c-bg);
  box-shadow: var(--bp-shadow);
}

.form-select-menu .form-select-option.is-active {
  background: color-mix(in srgb, var(--c-primary-light) 78%, #fff);
  color: var(--c-primary-color, var(--c-primary));
}

[data-theme="dark"] .form-select-menu .form-select-option:hover,
[data-theme="dark"] .form-select-menu .form-select-option:focus-visible {
  color: var(--c-text);
  background: var(--c-bg);
  box-shadow: var(--bp-shadow);
}

[data-theme="dark"] .form-select-menu .form-select-option.is-active {
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--c-surface));
  color: var(--c-primary-color, var(--c-primary));
}

/* Jelly pill owns selected fill in custom select menus. */
.form-select-menu.bp-slide-select,
.form-select-menu-list.bp-slide-select {
  position: relative;
  isolation: isolate;
}

.form-select-menu.bp-slide-select--live .form-select-option,
.form-select-menu-list.bp-slide-select--live .form-select-option {
  position: relative;
  z-index: 1;
}

.form-select-menu.bp-slide-select--live .form-select-option.is-active,
.form-select-menu.bp-slide-select--live .form-select-option.is-active:hover,
.form-select-menu.bp-slide-select--live .form-select-option.is-active:focus-visible,
.form-select-menu-list.bp-slide-select--live .form-select-option.is-active,
.form-select-menu-list.bp-slide-select--live .form-select-option.is-active:hover,
.form-select-menu-list.bp-slide-select--live .form-select-option.is-active:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bp-slide-select-fg, var(--c-primary-color, var(--c-primary)));
}

.form-select-menu.bp-slide-select--live .form-select-option--swrr.is-active,
.form-select-menu.bp-slide-select--live .form-select-option--swrr.is-active:hover,
.form-select-menu-list.bp-slide-select--live .form-select-option--swrr.is-active,
.form-select-menu-list.bp-slide-select--live .form-select-option--swrr.is-active:hover {
  background: transparent !important;
  color: var(--c-platform-fg) !important;
}

.bp-menu-empty,
.bp-dropdown-empty,
.tag-input-empty {
  padding: var(--space-9) var(--space-10);
  font-size: var(--bp-text-sm);
  color: var(--c-text-muted);
  font-style: italic;
}

.bp-menu-divider,
.bp-dropdown-divider,
.user-role-menu-divider {
  height: 1px;
  margin: var(--space-3) var(--space-5);
  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"],
.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,
.contacts-export-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% + var(--space-7));
}

.topbar-user-menu-accounts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: 0 0 var(--space-6);
  max-height: min(280px, 45vh);
  overflow: hidden;
  border-bottom: 1px solid var(--c-border);
}

.topbar-user-menu-accounts .browser-account-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 0 var(--space-2);
}

.browser-account-option-item {
  margin: 0;
  padding: 0;
}

.browser-account-option {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  width: 100%;
  padding: var(--space-7) var(--space-9);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.browser-account-option:disabled {
  cursor: default;
}

.browser-account-option.is-active,
.browser-account-option:hover:not(:disabled) {
  color: var(--c-primary-color, var(--c-primary));
  background: var(--c-primary-light);
}

.browser-account-option-avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--bp-shadow);
  background: var(--c-bg);
}

.browser-account-option-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bp-text-xs);
  font-weight: 600;
  color: var(--c-primary-color, var(--c-primary));
  background: var(--c-primary-light);
}

.browser-account-option-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  min-width: 0;
  flex: 1;
}

.browser-account-option-name {
  font-size: var(--bp-text-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-account-option-email {
  font-size: var(--bp-text-xs);
  color: var(--c-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-account-add-btn {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  width: 100%;
  margin: var(--space-1a) 0 0;
  padding: var(--space-7) var(--space-9);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-text);
  font-size: var(--bp-text-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.browser-account-add-btn .bp-icon-mask {
  width: var(--bp-icon-size-sm, 1rem);
  height: var(--bp-icon-size-sm, 1rem);
  flex-shrink: 0;
}

.browser-account-add-btn:hover:not(:disabled) {
  color: var(--c-primary-color, var(--c-primary));
  background: var(--c-primary-light);
}

.browser-account-add-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.topbar-user-menu-widgets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  padding: var(--space-1) var(--space-9) var(--space-3);
}

.topbar-user-menu-widgets > .bp-menu-wrap.topbar-user-menu-tour-wrap {
  display: flex;
  min-width: 0;
}

.topbar-user-menu-widgets > .bp-menu-wrap.topbar-user-menu-tour-wrap > .topbar-user-menu-widget {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.topbar-user-menu-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  min-height: 4.25rem;
  padding: var(--space-9) var(--space-5);
  border: 1px solid transparent;
  border-radius: calc(var(--radius) + 2px);
  background: var(--c-bg);
  color: var(--c-text);
  box-shadow: var(--bp-shadow);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

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

.topbar-user-menu-widget:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

.topbar-user-menu-widget .bp-icon-mask {
  width: var(--bp-icon-size-md);
  height: var(--bp-icon-size-md);
  flex-shrink: 0;
  background-color: currentColor;
}

.topbar-user-menu-widget-label {
  font-size: var(--bp-text-xs);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  max-width: 100%;
}

.topbar-user-menu-widget--danger {
  color: var(--c-danger);
}

.topbar-user-menu-widget--danger:hover,
.topbar-user-menu-widget--danger:focus-visible {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 12%, var(--c-bg));
  box-shadow: var(--bp-shadow-hover);
}

.topbar-user-menu-widget--danger:focus-visible {
  box-shadow: var(--bp-shadow-focus);
}

.topbar-user-menu-widget--admin {
  color: var(--c-info);
}

.topbar-user-menu-widget--admin:hover,
.topbar-user-menu-widget--admin:focus-visible {
  color: var(--c-info);
  background: color-mix(in srgb, var(--c-info) 12%, var(--c-bg));
  box-shadow: var(--bp-shadow-hover);
}

.topbar-user-menu-widget--admin:focus-visible {
  box-shadow: var(--bp-shadow-focus);
}

/* 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;
}

.contacts-table-wrap,
.browser-list-table-wrap {
  overflow-x: hidden;
}

/* Skip offscreen row layout during scroll; intrinsic height keeps scrollbar stable. */
.contacts-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
}

.contacts-table--browser tbody tr.browser-list-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
}

/* Sidebar width animation resizes the wrap every frame - isolate table layout. */
.dash.sidebar-shell-animating .contacts-table-wrap,
.dash.sidebar-is-resizing .contacts-table-wrap {
  contain: layout style paint;
}

.table {
  width: 100%;
  font-size: var(--bp-text-md);
  border-collapse: separate;
  border-spacing: 0;
}

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

.table th,
.table td {
  padding: var(--space-8b) var(--space-11);
  text-align: left;
}

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

/* One type for every data cell: table font, body color, inherited weight. */
.table tbody td {
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  color: var(--c-text);
}

.table tbody td.text-sm,
.table tbody td.text-muted,
.table tbody td.browser-list-notes,
.table tbody td.contacts-table-notes-col,
.table tbody td :is(.text-sm, .text-muted, .browser-list-notes, .contacts-notes-preview) {
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  color: inherit;
}

.table tbody td[colspan].text-muted,
.table tbody td[colspan].text-sm,
.table tbody td > .text-muted:only-child {
  color: var(--c-text-muted);
}

/* Table head - card-header chrome. Fill each th (same tokens as .card-header)
   so we never inject a ::before table-cell that shifts labels.
   Transparent bottom border is the inset gap; drop-shadow follows the opaque
   padding box and reads as one rounded bar.
   Bottom radii add the inset so background-clip:padding-box still curves by
   --radius (inner radius = border-radius - border-width). */
.table thead {
  filter: none;
}

.table thead th {
  position: relative;
  z-index: 1;
  border: none;
  border-bottom: var(--bp-card-inset) solid transparent;
  border-radius: 0;
  padding-bottom: var(--space-8b);
  background: var(--btn-chrome-bg);
  background-clip: padding-box;
  box-shadow: none;
  overflow: visible;
}

.table thead th:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: calc(var(--radius) + var(--bp-card-inset));
  padding-left: var(--space-13);
}

.table thead th:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: calc(var(--radius) + var(--bp-card-inset));
  padding-right: var(--space-13);
}

.table thead,
.table thead th {
  user-select: none;
  -webkit-user-select: none;
}

.contacts-table tbody tr[data-media-dnd],
.contacts-table tbody tr[data-media-dnd] * {
  user-select: none;
  -webkit-user-select: none;
}

body.bp-row-dnd {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
body.bp-row-dnd * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.table td:first-child {
  padding-left: var(--space-13);
}

/*
 * Universal data-table row hover: accent inset ring (media-card / folder chip language).
 * Not a grey wash - every `.table` gets the same outline treatment.
 */
.table tbody tr > td {
  transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.table tbody tr:not(.pb-dnd-source):not(.is-dragging):not(.is-dnd-snapping-home):hover > td {
  background: transparent;
}

.table tbody tr.is-browser-selected:not(.pb-dnd-source):not(.is-dragging):not(.is-dnd-snapping-home):hover > td,
.table tbody tr.is-hub-selected:not(.pb-dnd-source):not(.is-dragging):not(.is-dnd-snapping-home):hover > td,
.table tbody tr.is-selected:not(.pb-dnd-source):not(.is-dragging):not(.is-dnd-snapping-home):hover > td {
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
}

/* Body rows are square - keep the inset ring square (don't borrow card radius). */
.table tbody tr:not(.pb-dnd-source):not(.is-dragging):not(.is-dnd-snapping-home):hover > td:first-child {
  border-radius: 0;
  box-shadow:
    inset var(--bp-ring-width) 0 0 0 var(--bp-ring-color-soft),
    inset 0 var(--bp-ring-width) 0 0 var(--bp-ring-color-soft),
    inset 0 calc(var(--bp-ring-width) * -1) 0 0 var(--bp-ring-color-soft);
}

.table tbody tr:not(.pb-dnd-source):not(.is-dragging):not(.is-dnd-snapping-home):hover > td:last-child {
  border-radius: 0;
  box-shadow:
    inset calc(var(--bp-ring-width) * -1) 0 0 0 var(--bp-ring-color-soft),
    inset 0 var(--bp-ring-width) 0 0 var(--bp-ring-color-soft),
    inset 0 calc(var(--bp-ring-width) * -1) 0 0 var(--bp-ring-color-soft);
}

.table tbody tr:not(.pb-dnd-source):not(.is-dragging):not(.is-dnd-snapping-home):hover > td:not(:first-child):not(:last-child) {
  box-shadow:
    inset 0 var(--bp-ring-width) 0 0 var(--bp-ring-color-soft),
    inset 0 calc(var(--bp-ring-width) * -1) 0 0 var(--bp-ring-color-soft);
}

.table tbody tr:not(.pb-dnd-source):not(.is-dragging):not(.is-dnd-snapping-home):hover > td:first-child:last-child {
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--bp-ring-width) var(--bp-ring-color-soft);
}

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

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

/* Chip / badge cells: hard-clip when columns compress - never replace chips with "…". */
.contacts-table :is(td, th):has(
  :is(
    .contacts-pill,
    .tag-pill,
    .tag:not(.token),
    .contacts-name-badges,
    .contacts-high-intent-badge,
    .contacts-appointment-badge,
    .contacts-t65-badge,
    .contacts-lead-order-badge,
    .contacts-google-badge,
    .contacts-outlook-badge,
    .contacts-role-badge,
    .contacts-badge-chip,
    .badge-info,
    .badge-primary,
    .badge-neutral
  )
) {
  text-overflow: clip;
}

.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: var(--space-11);
  padding-right: var(--space-5);
  text-align: left;
  vertical-align: middle
}

.contacts-table-name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
  width: 100%;
  container-type: inline-size;
  container-name: contact-name
}

.contacts-table-name-cell--head {
  gap: var(--space-10);
}

.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: var(--bp-text-sm);
  text-transform: uppercase;
  letter-spacing: .05em
}

.table.contacts-table td,
.table.contacts-table th {
  padding: var(--space-8b) var(--space-11);
}

.table.contacts-table thead th {
  padding-bottom: var(--space-8b);
  overflow: visible;
}

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

.table.contacts-table td:first-child,
.table.contacts-table tbody th:first-child {
  padding-left: var(--space-11);
}

.table.contacts-table thead th:first-child {
  padding-left: var(--space-11);
}

.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: 700
}

.contacts-table-name-text a,
.contacts-table-name-text .browser-list-name-link,
button.browser-list-name-link {
  display: inline;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--c-primary);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
  cursor: pointer;
  font-family: inherit
}

.contacts-table-name-text a:hover,
.contacts-table-name-text .browser-list-name-link:hover,
button.browser-list-name-link: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: var(--space-11);
  padding-right: var(--space-11);
}

.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;
}

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

.contacts-notes-preview {
  display: block
}

.contacts-notes-preview b,
.contacts-notes-preview strong {
  font-weight: 650
}

.contacts-notes-preview i,
.contacts-notes-preview em {
  font-style: italic
}

.contacts-notes-preview u {
  text-decoration: underline
}

.contacts-notes-preview s,
.contacts-notes-preview strike,
.contacts-notes-preview del {
  text-decoration: line-through
}

.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-col--name,
.contacts-table--inline-check .contacts-table-col--name {
  width: 22%
}

.contacts-table-col--email,
.contacts-table--inline-check .contacts-table-col--email {
  width: 16%
}

.contacts-table-col--phone,
.contacts-table--inline-check .contacts-table-col--phone {
  width: 10%
}

.contacts-table-col--tags,
.contacts-table--inline-check .contacts-table-col--tags {
  width: 12%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.contacts-table-col--source,
.contacts-table--inline-check .contacts-table-col--source {
  width: 18%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.contacts-table-col--notes,
.contacts-table--inline-check .contacts-table-col--notes {
  width: 12%
}

.contacts-table-col--date,
.contacts-table--inline-check .contacts-table-col--date {
  width: 8%;
  text-overflow: clip;
}

.contacts-table-col--state,
.contacts-table--inline-check .contacts-table-col--state {
  width: 5%
}

.contacts-table-col--zip,
.contacts-table--inline-check .contacts-table-col--zip {
  width: 6%
}

.contacts-table-col--city,
.contacts-table--inline-check .contacts-table-col--city {
  width: 8%
}

.contacts-table-col--dob,
.contacts-table--inline-check .contacts-table-col--dob {
  width: 8%;
  text-overflow: clip;
}

.contacts-table-col--badges,
.contacts-table--inline-check .contacts-table-col--badges {
  width: 10%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.contacts-table-col--appointment,
.contacts-table--inline-check .contacts-table-col--appointment {
  width: 7%;
  text-overflow: clip;
}

.contacts-table-col--assigned,
.contacts-table--inline-check .contacts-table-col--assigned {
  width: 12%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacts-assigned-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  max-width: 100%;
}

.contacts-assigned-avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--c-bg);
}

.contacts-assigned-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bp-text-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--bp-avatar-accent, var(--c-primary-color, var(--c-primary))) 82%, var(--c-text));
  background: color-mix(in srgb, var(--bp-avatar-accent, var(--c-primary-color, var(--c-primary))) 18%, var(--c-surface, var(--c-bg)));
}

.contacts-assigned-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table-col--paths,
.contacts-table--inline-check .contacts-table-col--paths {
  width: 10%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.contacts-table-col--updated,
.contacts-table--inline-check .contacts-table-col--updated {
  width: 8%;
  text-overflow: clip;
}

.contacts-columns-modal-body {
  gap: var(--space-13);
}

.contacts-columns-card {
  margin: 0
}

.contacts-columns-card-body {
  padding: var(--space-14);
}

.contacts-columns-list {
  position: relative;
}

.contacts-columns-list.is-columns-dnd {
  cursor: grabbing;
  user-select: none
}

.contacts-columns-item {
  cursor: grab;
  touch-action: none
}

.bp-drag-handle {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--c-text-muted);
  user-select: none;
  pointer-events: none
}

.contacts-columns-item.is-hidden-col {
  opacity: .68
}

.contacts-columns-list .pb-dnd-source {
  cursor: grabbing;
}

.contacts-columns-list .pb-canvas-dnd-float {
  box-sizing: border-box !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none
}

/* Shared insertion line - canvas, pages, branches, contacts, etc. */
.pb-dnd-line {
  position: fixed;
  z-index: 10060;
  pointer-events: none;
  background: var(--c-primary);
  border-radius: 999px;
}

.pb-dnd-line[hidden] {
  display: none !important;
}

.pb-dnd-line.is-horizontal {
  height: 1px;
}

.pb-dnd-line.is-vertical {
  width: 1px;
}

.pb-dnd-line::before,
.pb-dnd-line::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-primary) 22%, #fff);
}

.pb-dnd-line.is-horizontal::before {
  left: 0;
  top: 50%;
  transform: translate(-40%, -50%);
}

.pb-dnd-line.is-horizontal::after {
  right: 0;
  top: 50%;
  transform: translate(40%, -50%);
}

.pb-dnd-line.is-vertical::before {
  top: 0;
  left: 50%;
  transform: translate(-50%, -40%);
}

.pb-dnd-line.is-vertical::after {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 40%);
}

.pb-canvas-dnd-float.contacts-columns-item,
body > .pb-canvas-dnd-float.contacts-columns-item {
  position: fixed !important;
  z-index: 10070 !important;
  left: 0;
  top: 0;
  margin: 0 !important;
  will-change: transform;
  filter: none;
  display: flex;
  align-items: center;
  gap: var(--space-11);
  background: var(--bp-card-bg, #fff);
  border: 1px solid var(--c-border);
  border-radius: var(--radius, 8px);
  padding: var(--space-9) var(--space-11);
  box-sizing: border-box
}

.contacts-columns-switch {
  flex: 1;
  min-width: 0;
  margin: 0
}

.contacts-columns-switch--locked {
  cursor: default;
  opacity: .9
}

.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--analytics-versions td.contacts-table-name-col,
.contacts-table--analytics-versions th.contacts-table-name-col,
.contacts-table--analytics-versions td:first-child,
.contacts-table--analytics-versions th:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 28%;
}

.contacts-table--analytics-versions .contacts-table-name-cell {
  align-items: center;
}

.contacts-table--analytics-versions .contacts-table-name-text {
  min-width: 0;
  flex: 1;
}

.contacts-table--analytics-versions th.analytics-version-notes,
.contacts-table--analytics-versions td.analytics-version-notes,
.contacts-table--analytics-versions th.contacts-table-col--notes,
.contacts-table--analytics-versions td.contacts-table-col--notes {
  width: auto;
  min-width: 10rem;
  max-width: 22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: normal;
}

.contacts-table--analytics-versions td.analytics-version-notes .contacts-notes-preview {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--analytics-versions th.contacts-table-col--date,
.contacts-table--analytics-versions td.contacts-table-col--date {
  width: 8rem;
  white-space: nowrap;
  font-variant-numeric: normal;
}

.contacts-table--analytics-versions td:nth-child(n+4),
.contacts-table--analytics-versions th:nth-child(n+4) {
  width: 7rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.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--no-check td:first-child,
.contacts-table--no-check th:first-child {
  width: 20%;
  text-align: left;
  padding-left: var(--space-11);
  padding-right: var(--space-11);
}

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

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

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

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

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

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

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

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

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

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

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

.contacts-table--no-check.contacts-table--order-status-booked td:nth-child(4),
.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--no-check.contacts-table--order-status-booked td:nth-child(5),
.contacts-table--no-check.contacts-table--order-status-booked th:nth-child(5) {
  width: 9%
}

.contacts-table--no-check.contacts-table--order-status-booked td:nth-child(6),
.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--no-check.contacts-table--order-status-booked td:nth-child(7),
.contacts-table--no-check.contacts-table--order-status-booked th:nth-child(7) {
  width: 7%
}

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

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

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

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

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

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

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

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

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

.contacts-table--no-check.contacts-table--lead-paths td:first-child,
.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--no-check.contacts-table--lead-paths td:nth-child(2),
.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: var(--bp-text-md);
  color: var(--c-text);
  margin-top: var(--space-3);
  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--no-check.contacts-table--announcements td:first-child,
.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--no-check.contacts-table--announcements td.contacts-table-status-col,
.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--no-check.contacts-table--announcements td.contacts-table-actions-col,
.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--no-check.contacts-table--health td:first-child,
.contacts-table--no-check.contacts-table--health th:first-child {
  width: auto;
  min-width: 12rem;
  text-align: left;
}

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

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

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

.contacts-table--no-check.contacts-table--health-media td:nth-child(2),
.contacts-table--no-check.contacts-table--health-media th:nth-child(2) {
  width: 22%;
  min-width: 11rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-align: left;
}

.contacts-table--no-check.contacts-table--health-media td:nth-child(3),
.contacts-table--no-check.contacts-table--health-media th:nth-child(3) {
  width: 7rem;
  min-width: 6rem;
  white-space: nowrap;
  text-align: left;
}

.contacts-table--no-check.contacts-table--health-media td:nth-child(4),
.contacts-table--no-check.contacts-table--health-media th:nth-child(4) {
  width: 8rem;
  min-width: 7rem;
  white-space: nowrap;
  text-align: left;
}

.contacts-table--no-check.contacts-table--health-media td:nth-child(5),
.contacts-table--no-check.contacts-table--health-media th:nth-child(5) {
  width: 11rem;
  min-width: 10rem;
  white-space: nowrap;
  text-align: left;
}

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

.admin-audit-console {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: var(--bp-text-sm);
  line-height: 1.45;
  background: var(--bp-card-section-bg, var(--bp-card-bg));
  min-height: 12rem;
  overflow: auto;
}

#admin-tab-audit .admin-audit-levels {
  margin: 0;
}

html:has(#admin-tab-audit:not([hidden])):not(.pb-editor-active) {
  overflow: hidden;
}

html:has(#admin-tab-audit:not([hidden])):not(.pb-editor-active) .dash {
  min-height: 0;
  height: 100dvh;
}

html:has(#admin-tab-audit:not([hidden])):not(.pb-editor-active) .main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

html:has(#admin-tab-audit:not([hidden])):not(.pb-editor-active) .dashboard-stage,
html:has(#admin-tab-audit:not([hidden])):not(.pb-editor-active) #bp-page-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html:has(#admin-tab-audit:not([hidden])):not(.pb-editor-active) #bp-page-root > .page-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html:has(#admin-tab-audit:not([hidden])):not(.pb-editor-active) #bp-page-root > .page-content > :not(#admin-tab-audit) {
  flex: 0 0 auto;
}

#admin-tab-audit:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

#admin-tab-audit:not([hidden]) > .page-header {
  flex: 0 0 auto;
}

#admin-tab-audit:not([hidden]) > .list-folder-browser {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

#admin-tab-audit:not([hidden]) .media-library-shell,
#admin-tab-audit:not([hidden]) .media-library-shell-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

#admin-tab-audit:not([hidden]) .admin-audit-console {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: auto;
  overflow-anchor: none;
}

.admin-audit-console__empty {
  margin: 0;
  padding: var(--space-15) var(--space-12a);
  text-align: center;
  font-family: inherit;
}

.admin-audit-console__more {
  margin: 0;
  padding: var(--space-4) var(--space-11);
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--bp-text-sm);
}

.admin-audit-entry {
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) 65%, transparent);
}

.admin-audit-entry:last-child {
  border-bottom: 0;
}

.admin-audit-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-9);
  margin: 0;
  padding: .32rem var(--space-11) .32rem var(--space-10);
  cursor: pointer;
  list-style: none;
  user-select: text;
  color: var(--c-text);
}

.admin-audit-line::-webkit-details-marker,
.admin-audit-line::marker {
  display: none;
  content: none;
}

.admin-audit-line::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin-top: var(--space-2b);
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--c-text-muted);
  transform-origin: 40% 50%;
  transition: transform .12s ease;
}

.admin-audit-entry[open] > .admin-audit-line::before {
  transform: rotate(90deg);
}

.admin-audit-line:hover {
  background: color-mix(in srgb, var(--c-primary) 7%, transparent);
}

.admin-audit-entry[open] > .admin-audit-line {
  background: color-mix(in srgb, var(--c-primary) 11%, transparent);
}

.admin-audit-line:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

.admin-audit-line__text {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-audit-entry--fail > .admin-audit-line {
  color: var(--c-danger);
}

.admin-audit-entry--issue > .admin-audit-line {
  color: var(--c-warning, #b45309);
}

.admin-audit-entry--new > .admin-audit-line {
  animation: admin-audit-line-in 1.1s ease;
}

@keyframes admin-audit-line-in {
  from { background: color-mix(in srgb, var(--c-primary) 22%, transparent); }
  to { background: transparent; }
}

.admin-audit-entry__panel {
  padding: 0 var(--space-11) var(--space-6) 1.7rem;
  background: transparent;
}

.admin-audit-dump {
  display: flex;
  flex-direction: column;
  font: inherit;
  line-height: 1.45;
}

.admin-audit-dump__line {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--c-text);
  padding: .04rem 0;
}

.admin-audit-dump__key {
  color: var(--c-text-muted);
}

.admin-audit-dump__line--fail .admin-audit-dump__key {
  color: var(--c-danger);
}

.admin-audit-dump__json {
  margin: 0 0 var(--space-1b) var(--space-12a);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--c-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.contacts-table--no-check.contacts-table--lead-paths td.contacts-table-actions-col,
.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
}

/* Fields: Label (inline check) | Type | Field ID | Status | Actions
   Label absorbs leftover width; Actions stays a fixed control column. */
.contacts-table--inline-check.contacts-table--browser.contacts-table--fields td:first-child,
.contacts-table--inline-check.contacts-table--browser.contacts-table--fields th:first-child {
  width: auto;
  min-width: 8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--fields td:nth-child(2),
.contacts-table--inline-check.contacts-table--browser.contacts-table--fields th:nth-child(2) {
  width: 8.5rem;
  min-width: 6.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--fields td:nth-child(3),
.contacts-table--inline-check.contacts-table--browser.contacts-table--fields th:nth-child(3) {
  width: 14rem;
  min-width: 8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--fields td:nth-child(4),
.contacts-table--inline-check.contacts-table--browser.contacts-table--fields th:nth-child(4) {
  width: 7.5rem;
  min-width: 6.5rem;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--fields td.contacts-table-actions-col,
.contacts-table--inline-check.contacts-table--browser.contacts-table--fields th.contacts-table-actions-col {
  width: 5rem;
  min-width: 5rem;
  max-width: 5rem;
  white-space: nowrap;
  text-align: right;
  overflow: visible;
  text-overflow: clip;
}

.contacts-table--fields .fields-table-menu-btn,
.contacts-table--browser .fields-table-menu-btn,
.contacts-table--agency-users .agency-users-menu-btn,
.contacts-table--api-keys .api-keys-menu-btn,
.admin-table-menu-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  color: var(--c-text-muted);
  cursor: pointer;
}

.contacts-table--fields .fields-table-menu-btn .bp-icon-mask,
.contacts-table--browser .fields-table-menu-btn .bp-icon-mask,
.contacts-table--agency-users .agency-users-menu-btn .bp-icon-mask,
.contacts-table--api-keys .api-keys-menu-btn .bp-icon-mask,
.admin-table-menu-btn .bp-icon-mask {
  width: .95rem;
  height: .95rem;
  background-color: currentColor;
}

.contacts-table--fields .fields-table-menu-btn:hover:not(:disabled),
.contacts-table--browser .fields-table-menu-btn:hover:not(:disabled),
.contacts-table--agency-users .agency-users-menu-btn:hover:not(:disabled),
.contacts-table--api-keys .api-keys-menu-btn:hover:not(:disabled),
.admin-table-menu-btn:hover:not(:disabled) {
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-text) 8%, transparent);
  box-shadow: none;
}

.contacts-table--fields .fields-table-menu-btn:focus-visible,
.contacts-table--browser .fields-table-menu-btn:focus-visible,
.contacts-table--agency-users .agency-users-menu-btn:focus-visible,
.contacts-table--api-keys .api-keys-menu-btn:focus-visible,
.admin-table-menu-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c-primary) 55%, transparent);
  outline-offset: 1px;
}

/* Integrations → API Keys: same hub table chrome, no folder rail */
.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys td:first-child,
.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys th:first-child {
  width: auto;
  min-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys td:nth-child(2),
.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys th:nth-child(2) {
  width: 14rem;
  min-width: 9rem;
}

.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys td:nth-child(3),
.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys th:nth-child(3),
.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys td:nth-child(4),
.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys th:nth-child(4),
.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys td:nth-child(5),
.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys th:nth-child(5) {
  width: 8.5rem;
  min-width: 7rem;
  white-space: nowrap;
}

.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys td.contacts-table-actions-col,
.contacts-table--no-check.contacts-table--browser.contacts-table--api-keys th.contacts-table-actions-col {
  width: 5rem;
  min-width: 5rem;
  max-width: 5rem;
  padding-right: var(--space-13);
  white-space: nowrap;
  text-align: right;
}

.contacts-table--api-keys .contacts-table-name-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  white-space: normal;
}

.contacts-table--api-keys .api-keys-prefix-hint {
  margin: var(--space-1) 0 0;
  font-weight: 400;
  font-size: var(--bp-text-sm);
}

#api-keys-list > .bp-empty-state {
  padding: var(--space-17) var(--space-14);
}

/* Hub list view (Media / Pages / Paths / Automations / Fields / Contacts) - Contacts-style inline check */
.contacts-table--browser tbody tr.is-browser-selected > td,
.contacts-table--browser tbody tr.is-hub-selected > td,
.contacts-table--browser tbody tr.is-selected > td {
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
}

/* Grab affordance only on draggable hub rows (hover ring is universal on `.table`). */
.contacts-table--browser tbody tr[data-media-dnd] {
  cursor: grab;
}

.contacts-table--browser tbody tr.pb-dnd-source > td,
.contacts-table--browser tbody tr.is-dragging > td {
  cursor: grabbing;
}

.contacts-table--browser tbody tr.pb-dnd-source,
.contacts-table--browser tbody tr.is-dragging,
.contacts-table--browser tbody tr.is-dnd-snapping-home {
  opacity: 0 !important;
  pointer-events: none !important;
}

.contacts-table--browser td.browser-list-name,
.contacts-table--browser td.contacts-table-name-col {
  font-weight: 600;
}

.contacts-table--browser .browser-list-name-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background-color: var(--c-text-muted, #6b7280);
}

.contacts-table--browser .browser-list-name-icon--head-spacer {
  visibility: hidden;
  pointer-events: none;
}

/* Hub list tables (including Contacts): Name absorbs leftover width;
   Actions stays a fixed control column. */
.contacts-table--inline-check.contacts-table--browser td:first-child,
.contacts-table--inline-check.contacts-table--browser th:first-child,
.contacts-table--inline-check.contacts-table--browser td.contacts-table-name-col,
.contacts-table--inline-check.contacts-table--browser th.contacts-table-name-col,
.contacts-table--inline-check.contacts-table--browser td.browser-list-name,
.contacts-table--inline-check.contacts-table--browser th.browser-list-name {
  width: auto;
  min-width: 12.5rem;
}

.contacts-table--inline-check.contacts-table--browser td.contacts-table-actions-col,
.contacts-table--inline-check.contacts-table--browser th.contacts-table-actions-col {
  width: 5rem;
  min-width: 5rem;
  max-width: 5rem;
  padding-left: var(--space-5);
  padding-right: var(--space-13);
  white-space: nowrap;
  text-align: right;
  overflow: visible;
  text-overflow: clip;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--media td:nth-child(2),
.contacts-table--inline-check.contacts-table--browser.contacts-table--media th:nth-child(2) {
  width: 7rem;
  min-width: 0;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--media td:nth-child(3),
.contacts-table--inline-check.contacts-table--browser.contacts-table--media th:nth-child(3) {
  width: 6.5rem;
  min-width: 0;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--media td:nth-child(4),
.contacts-table--inline-check.contacts-table--browser.contacts-table--media th:nth-child(4) {
  width: 7.5rem;
  min-width: 0;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--automations td:nth-child(2),
.contacts-table--inline-check.contacts-table--browser.contacts-table--automations th:nth-child(2) {
  width: 8.5rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--pages td:nth-child(2),
.contacts-table--inline-check.contacts-table--browser.contacts-table--pages th:nth-child(2),
.contacts-table--inline-check.contacts-table--browser.contacts-table--paths td:nth-child(2),
.contacts-table--inline-check.contacts-table--browser.contacts-table--paths th:nth-child(2) {
  width: auto;
  min-width: 10rem;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--pages td:nth-child(3),
.contacts-table--inline-check.contacts-table--browser.contacts-table--pages th:nth-child(3),
.contacts-table--inline-check.contacts-table--browser.contacts-table--paths td:nth-child(3),
.contacts-table--inline-check.contacts-table--browser.contacts-table--paths th:nth-child(3) {
  width: 8.5rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--automations td:nth-child(3),
.contacts-table--inline-check.contacts-table--browser.contacts-table--automations th:nth-child(3) {
  width: 7.5rem;
  min-width: 0;
}

.contacts-table--inline-check.contacts-table--browser.contacts-table--pages td:nth-child(4),
.contacts-table--inline-check.contacts-table--browser.contacts-table--pages th:nth-child(4),
.contacts-table--inline-check.contacts-table--browser.contacts-table--paths td:nth-child(4),
.contacts-table--inline-check.contacts-table--browser.contacts-table--paths th:nth-child(4) {
  width: 7.5rem;
  min-width: 0;
}

body > .pb-canvas-dnd-float.browser-list-dnd-float {
  position: fixed !important;
  z-index: 10070 !important;
  left: 0;
  top: 0;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  padding: var(--space-7) var(--space-11) !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(22rem, 70vw) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  font-weight: 700;
  font-size: var(--bp-text-md);
  line-height: 1.25;
  color: var(--c-text, #111827);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none !important;
  opacity: 1 !important;
  cursor: grabbing;
  will-change: transform;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: var(--bp-card-bg, var(--c-surface, #fff));
  box-shadow: var(--bp-shadow-hover);
}

body > .pb-canvas-dnd-float.browser-list-dnd-float .browser-list-dnd-float__title {
  flex: 0 0 auto;
  min-width: max-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  font: inherit;
  font-weight: 700;
}

/* Shared cursor float - always opaque + faithful (overrides path-editor ghost opacity). */
body > .bp-dnd-float,
body > .pb-canvas-dnd-float.bp-dnd-float {
  opacity: 1 !important;
  pointer-events: none !important;
  cursor: grabbing;
  will-change: transform;
  box-shadow: var(--bp-shadow-hover, 0 8px 24px rgba(15, 23, 42, .18));
}

body > .bp-dnd-float.bp-dnd-float-thumb,
body > .bp-dnd-float-thumb {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
}

body > .bp-dnd-float-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(15, 23, 42, .18));
}

body > .bp-dnd-float-table,
body > table.bp-dnd-float {
  border-collapse: collapse;
  background: var(--bp-card-bg, var(--c-surface));
  border-radius: var(--radius);
  overflow: hidden;
}

body > .pb-canvas-dnd-float.browser-list-dnd-float[data-dnd-count],
body > .pb-canvas-dnd-float[data-dnd-count] {
  overflow: visible;
}

body > .pb-canvas-dnd-float.bp-dnd-float-stack {
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body > .pb-canvas-dnd-float.bp-dnd-float-stack .bp-dnd-float-stack__layer {
  margin: 0;
  pointer-events: none;
  box-shadow: var(--bp-shadow-hover);
  border-radius: var(--bp-card-radius, var(--radius-lg, 12px));
  background: var(--bp-card-bg, var(--c-surface));
  overflow: hidden;
}

body > .pb-canvas-dnd-float.bp-dnd-float-stack .bp-dnd-count-badge {
  z-index: 40;
}

body > .pb-canvas-dnd-float .bp-dnd-count-badge {
  position: absolute;
  top: calc(-1 * var(--space-6));
  right: calc(-1 * var(--space-6));
  z-index: 2;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--c-primary);
  color: #fff;
  font-size: var(--bp-text-xs);
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--bp-shadow);
  pointer-events: none;
}

/* Name chip is shorter than a card - keep the badge on the chip's top-right. */
body > .pb-canvas-dnd-float.browser-list-dnd-float .bp-dnd-count-badge {
  top: calc(-1 * var(--space-5));
  right: calc(-1 * var(--space-5));
}

.browser-list-dnd-float__cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--space-8b) var(--space-11);
  box-sizing: border-box;
}

.browser-list-dnd-float__cell--name {
  font-weight: 600;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.browser-list-dnd-float__cell--actions {
  overflow: visible;
  text-overflow: clip;
}

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

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

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

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

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

.contacts-table--no-check.contacts-table--leads-delivered td:nth-child(6),
.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--no-check td:nth-child(3),
  .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,
.table th.contacts-table-actions-col,
.table td.contacts-table-actions-col,
.table.contacts-table th.contacts-table-actions-col,
.table.contacts-table td.contacts-table-actions-col {
  text-align: right;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  padding-right: var(--space-13);
}

.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: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: 100%;
}

.contacts-table td.contacts-table-actions-col > .btn,
.table td.contacts-table-actions-col > .btn {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.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 > .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;
  max-width: 2.5rem;
  padding-left: var(--space-11);
  padding-right: var(--space-5);
  text-align: center;
  vertical-align: middle;
}

/* Platform admin tables (accounts / agents) - pin/star matches checkbox chrome */
.contacts-table--admin-accounts .contacts-table-pin-col,
.contacts-table--admin-accounts th.contacts-table-pin-col,
.contacts-table--admin-accounts td.contacts-table-pin-col,
.contacts-table--admin-agents .contacts-table-pin-col,
.contacts-table--admin-agents th.contacts-table-pin-col,
.contacts-table--admin-agents td.contacts-table-pin-col {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  padding-top: var(--space-8b);
  padding-bottom: var(--space-8b);
  padding-left: var(--space-11);
  padding-right: var(--space-5);
  text-align: center;
  vertical-align: middle;
  overflow: visible;
  text-overflow: clip;
}

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

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

.contacts-table .admin-acct-uuid-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 100%;
  vertical-align: middle;
}

.contacts-table .admin-acct-uuid {
  font-size: var(--bp-text-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  user-select: all;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table .admin-acct-uuid-copy {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  padding: 0;
}

.contacts-table .admin-acct-uuid-copy .bp-icon-mask {
  width: .85rem;
  height: .85rem;
}

.contacts-table-agency-icon {
  object-fit: contain;
  background: var(--c-bg);
}

.contacts-table--admin-accounts .contacts-table-actions-col {
  width: 5rem;
  min-width: 5rem;
  padding-right: var(--space-13);
  text-align: right;
  white-space: nowrap;
}

.contacts-table--admin-agents :is(td, th):nth-child(2) {
  width: 18%;
  min-width: 12rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.contacts-table--admin-agents :is(td, th):nth-child(3) { width: 11%; min-width: 5.5rem; }
.contacts-table--admin-agents :is(td, th):nth-child(4) { width: 8%; min-width: 5rem; }
.contacts-table--admin-agents :is(td, th):nth-child(5) { width: 11%; min-width: 5.5rem; }
.contacts-table--admin-agents :is(td, th):nth-child(6) { width: 8%; min-width: 5rem; }
.contacts-table--admin-agents :is(td, th):nth-child(7) { width: 10%; min-width: 4.5rem; }
.contacts-table--admin-agents :is(td, th):nth-child(8) { width: 12%; min-width: 5.5rem; }
.contacts-table--admin-agents :is(td, th):nth-child(9) { width: 8%; min-width: 5rem; }

/* Account/business email, phones, job title, agency, joined - ellipsis when scrunched */
.contacts-table--admin-agents :is(td, th):nth-child(n+3):nth-child(-n+9) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--admin-agents .contacts-table-name-cell,
.contacts-table--agency-users .contacts-table-name-cell {
  flex: 1;
  min-width: 0;
}

.contacts-table--admin-agents .contacts-table-name-text,
.contacts-table--agency-users .contacts-table-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--admin-agents .contacts-table-actions-col {
  width: 5rem;
  min-width: 5rem;
  padding-right: var(--space-13);
  white-space: nowrap;
  text-align: right;
}

/* Agency Settings → Team: same rem column rhythm as Fields / Pages hub tables */
.contacts-table--browser.contacts-table--agency-users td:first-child,
.contacts-table--browser.contacts-table--agency-users th:first-child {
  width: auto;
  min-width: 10rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacts-table--browser.contacts-table--agency-users td:nth-child(2),
.contacts-table--browser.contacts-table--agency-users th:nth-child(2) {
  width: 10rem;
  min-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-users td:nth-child(3),
.contacts-table--browser.contacts-table--agency-users th:nth-child(3) {
  width: 14rem;
  min-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-users td:nth-child(4),
.contacts-table--browser.contacts-table--agency-users th:nth-child(4) {
  width: 9rem;
  min-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-users td:nth-child(5),
.contacts-table--browser.contacts-table--agency-users th:nth-child(5) {
  width: 7.5rem;
  min-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-users td.contacts-table-actions-col,
.contacts-table--browser.contacts-table--agency-users th.contacts-table-actions-col {
  width: 5rem;
  min-width: 5rem;
  max-width: 5rem;
  white-space: nowrap;
  text-align: right;
}

.contacts-table--agency-users .contacts-table-name-cell {
  gap: var(--space-8);
}

/* Name text sizes to content so role/link chips sit beside it, not flush-right. */
.contacts-table--agency-users .contacts-table-name-text {
  flex: 0 1 auto;
}

.contacts-table--agency-users .contacts-name-badges {
  margin-left: 0;
}

.contacts-table--agency-users .agency-user-chrome .topbar-user-photo,
.contacts-table--agency-users .agency-user-chrome .topbar-user-initials {
  width: 1.25rem;
  height: 1.25rem;
  font-size: var(--bp-text-xs);
}

/* Agency Settings → Phone */
.contacts-table--agency-phones .contacts-table-name-text {
  font-weight: inherit;
}

.contacts-table--browser.contacts-table--agency-phones td:first-child,
.contacts-table--browser.contacts-table--agency-phones th:first-child {
  width: auto;
  min-width: 14rem;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-phones td:nth-child(2),
.contacts-table--browser.contacts-table--agency-phones th:nth-child(2) {
  width: 10rem;
  min-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-phones td:nth-child(3),
.contacts-table--browser.contacts-table--agency-phones th:nth-child(3) {
  width: 8rem;
  min-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-phones td.contacts-table-actions-col,
.contacts-table--browser.contacts-table--agency-phones th.contacts-table-actions-col {
  width: 5rem;
  min-width: 5rem;
  max-width: 5rem;
  white-space: nowrap;
  text-align: right;
}

/* Agency Settings → Domains */
.contacts-table--browser.contacts-table--agency-domains td:first-child,
.contacts-table--browser.contacts-table--agency-domains th:first-child {
  width: auto;
  min-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacts-table--browser.contacts-table--agency-domains td:nth-child(2),
.contacts-table--browser.contacts-table--agency-domains th:nth-child(2) {
  width: 16rem;
  min-width: 14rem;
  white-space: normal;
  overflow: visible;
}

.contacts-table--browser.contacts-table--agency-domains td:nth-child(3),
.contacts-table--browser.contacts-table--agency-domains th:nth-child(3) {
  width: 12rem;
  min-width: 10rem;
  white-space: normal;
  overflow: visible;
}

.contacts-table--browser.contacts-table--agency-domains td:nth-child(4),
.contacts-table--browser.contacts-table--agency-domains th:nth-child(4) {
  width: 7.5rem;
  min-width: 6.5rem;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-domains td.contacts-table-actions-col,
.contacts-table--browser.contacts-table--agency-domains th.contacts-table-actions-col {
  width: 5rem;
  min-width: 5rem;
  max-width: 5rem;
  white-space: nowrap;
  text-align: right;
}

.contacts-table--agency-domains .contacts-name-badges {
  margin-left: 0;
  flex-wrap: wrap;
  row-gap: var(--space-3);
  max-width: 100%;
}

/* Domains modal → DNS records: For | Type | Name | Value | Priority | Status | actions */
.contacts-table--browser.contacts-table--agency-domains-dns td:first-child,
.contacts-table--browser.contacts-table--agency-domains-dns th:first-child {
  width: 4.5rem;
  min-width: 4rem;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-domains-dns td:nth-child(2),
.contacts-table--browser.contacts-table--agency-domains-dns th:nth-child(2) {
  width: 5rem;
  min-width: 4.5rem;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-domains-dns td:nth-child(3),
.contacts-table--browser.contacts-table--agency-domains-dns th:nth-child(3) {
  width: 14rem;
  min-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-domains-dns td:nth-child(4),
.contacts-table--browser.contacts-table--agency-domains-dns th:nth-child(4) {
  width: auto;
  min-width: 14rem;
  word-break: break-all;
  white-space: normal;
}

.contacts-table--browser.contacts-table--agency-domains-dns td:nth-child(5),
.contacts-table--browser.contacts-table--agency-domains-dns th:nth-child(5) {
  width: 5.5rem;
  min-width: 5rem;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.contacts-table--browser.contacts-table--agency-domains-dns td:nth-child(6),
.contacts-table--browser.contacts-table--agency-domains-dns th:nth-child(6) {
  width: 7.5rem;
  min-width: 7rem;
  white-space: nowrap;
}

.contacts-table--browser.contacts-table--agency-domains-dns td.contacts-table-actions-col,
.contacts-table--browser.contacts-table--agency-domains-dns th.contacts-table-actions-col {
  width: 5rem;
  min-width: 5rem;
  max-width: 5rem;
  white-space: nowrap;
  text-align: right;
}

.contacts-table--agency-users .agency-user-chrome .topbar-user-initials,
.media-detail-modal.is-user .agency-user-chrome .topbar-user-initials,
.cal-widget-preview-person .agency-user-chrome .topbar-user-initials {
  color: color-mix(in srgb, var(--bp-avatar-accent, var(--c-primary-color, var(--c-primary))) 82%, var(--c-text));
  background: color-mix(in srgb, var(--bp-avatar-accent, var(--c-primary-color, var(--c-primary))) 18%, var(--c-surface, var(--c-bg)));
}

/* Agency user media-style preview (photo / initials stage) */
.media-detail-modal.is-user .media-detail__user-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-detail-modal.is-user .media-detail__user-stage .agency-user-chrome {
  display: inline-flex;
}

.media-detail-modal.is-user .media-detail__user-stage .topbar-user-photo,
.media-detail-modal.is-user .media-detail__user-stage .topbar-user-initials {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: calc(var(--radius) + 6px);
  font-size: var(--bp-text-xl);
}.bp-state-chips{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-5);
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}

.bp-state-chips-more {
  flex-shrink: 0;
  cursor: help;
}

.contacts-table--admin-platform-path td.contacts-table-name-col,
.contacts-table--admin-platform-path th.contacts-table-name-col {
  width: 16%;
  min-width: 9rem;
}

.contacts-table--admin-platform-path :is(td, th):nth-child(2) { width: 14%; }
.contacts-table--admin-platform-path :is(td, th):nth-child(3) { width: 10%; }
.contacts-table--admin-platform-path :is(td, th):nth-child(4),
.contacts-table--admin-platform-path :is(td, th):nth-child(5) {
  width: 12%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.contacts-table--admin-platform-path :is(td, th):nth-child(6) { width: 6%; }
.contacts-table--admin-platform-path :is(td, th):nth-child(7) {
  width: 12%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.contacts-table--admin-platform-path :is(td, th):nth-child(8) {
  width: 8%;
  white-space: nowrap;
}

.admin-clients-breakdown-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  align-items: center;
}

.admin-clients-t65-state-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
}.us-state-map{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}.us-state-map__canvas{
  position: relative;
  width: 100%;
}.us-state-map__svg{
  display: block;
  width: 100%;
  height: auto;
}.us-state-map__state{
  fill: var(--bp-card-header-bg);
  fill-opacity: 1;
  stroke: none;
  transition: fill .15s ease, filter .15s ease;
  cursor: pointer;
  pointer-events: all;
}

.us-state-map__state.is-empty,
.admin-clients-us-map__state.is-empty {
  cursor: default;
}.us-state-map__state.is-hovered,
.us-state-map__state:hover,
.admin-clients-us-map__state.is-hovered{
  filter: brightness(0.96);
}.us-state-map__hover{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10050;
  pointer-events: none;
  min-width: 9.5rem;
  max-width: min(16rem, calc(100vw - 1rem));
  padding: var(--space-6a) .68rem;
  font-size: var(--bp-text-sm);
  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-dropdown-shadow);
  font-variant-numeric: tabular-nums;
  white-space: normal;
  opacity: 0;
  transition: opacity var(--dur, .15s) var(--ease, ease);
}

.us-state-map__hover.is-visible,
.admin-clients-us-map__hover.is-visible {
  opacity: 1;
}.us-state-map__hover-title{
  font-weight: 700;
  margin: 0 0 var(--space-3);
  color: var(--c-text);
}.us-state-map__hover-row{
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-top: var(--space-2);
}.us-state-map__hover-row i{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  margin-top: var(--space-2b);
}.us-state-map__hover-metric{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  flex: 1;
  min-width: 0;
  color: var(--c-text-muted);
  white-space: nowrap;
}.us-state-map__hover-metric--total{
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--c-border) 55%, transparent);
  font-weight: 600;
  color: var(--c-text);
}.us-state-map__hover-label{
  color: var(--c-text-muted);
}.us-state-map__hover-count{
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}.us-state-map__skeleton{
  width: 100%;
  aspect-ratio: 959 / 593;
  border-radius: .75rem;
  background: var(--bp-skeleton-fill);
}

.admin-clients-t65-breakdown-pill strong {
  margin-left: var(--space-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-clients-campaign-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--bp-card-stack-gap);
}

.admin-clients-campaign-card .card-body {
  padding: var(--space-12) var(--space-13) var(--space-13);
}

.admin-clients-campaign-card__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-clients-campaign-card__total {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-7);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  font-size: var(--bp-text-md);
}

.admin-clients-campaign-card__total strong {
  font-weight: 700;
  color: var(--c-text);
}

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

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* Above .topbar (90) so the scrim/blur covers the whole shell */
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--space-13);
  background: var(--bp-overlay-scrim);
  backdrop-filter: var(--bp-overlay-blur);
  -webkit-backdrop-filter: var(--bp-overlay-blur);
}

.modal-overlay.open {
  display: flex;
  animation: bp-overlay-in var(--dur) var(--ease);
}

.modal-overlay.open > .modal-overlay.open > form > .modal {
  animation: bp-modal-in var(--dur-slow) var(--ease-emphasis);
}

/* Exit (driven by JS adding .is-closing before removal) */
.modal-overlay.is-closing {
  animation: bp-overlay-out var(--dur) var(--ease) forwards;
}

.modal-overlay.is-closing > .modal-overlay.is-closing > form > .modal {
  animation: bp-modal-out var(--dur) var(--ease) forwards;
}

@keyframes bp-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bp-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes bp-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes bp-modal-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(6px) scale(.99); }
}

.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); }

/* Agency Settings → Domains DNS setup (Type / Name / Value table) */
.modal--domains-dns {
  max-width: 920px;
  width: min(96vw, 920px);
}

#domains-hostname-lock-wrap,
#domains-hostname-input {
  width: 100%;
  box-sizing: border-box;
}

.domains-modal-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
}

#domains-modal-step-dns .browser-list-table-wrap {
  overflow-x: auto;
}

.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: var(--space-13);
}

.announcements-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
}

.announcements-modal-empty {
  margin: 0;
  text-align: center;
  padding: var(--space-14) var(--space-3);
}

.announcements-modal-item {
  position: relative;
  padding: var(--space-13) var(--space-13a) var(--space-13a) var(--space-14);
  border: 1px solid color-mix(in srgb, var(--c-border) 88%, transparent);
  border-radius: var(--radius);
  background: var(--bp-card-bg);
}

.announcements-modal-item.is-unread {
  background: color-mix(in srgb, var(--c-primary-light) 45%, var(--bp-card-bg));
  border-color: color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 22%, var(--c-border));
}

.announcements-modal-item.is-unread::before {
  content: "";
  position: absolute;
  left: var(--space-7);
  top: var(--space-14);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary-color, var(--c-primary));
}

.announcements-modal-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-11) var(--space-13);
  margin: 0 0 var(--space-9);
}

.announcements-modal-item-title {
  margin: 0;
  font-size: var(--bp-text-lg);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-text);
}

.announcements-modal-item-time {
  flex-shrink: 0;
}

.announcements-modal-item-body {
  font-size: var(--bp-text-lg);
  line-height: 1.55;
  color: var(--c-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.announcements-modal-item-body a {
  color: var(--c-primary-color, var(--c-primary));
}

/* Field editor choice options (Fields page + Path Builder modal) */
.pb-options-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.pb-option-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.pb-option-row.pb-dragging {
  opacity: .4;
}

.pb-option-row.pb-drag-over {
  outline: 2px solid var(--c-primary);
  border-radius: 7px;
}

.pb-opt-drag {
  cursor: grab;
  color: var(--c-text-muted);
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  background-color: currentColor;
  opacity: .85;
}

.pb-opt-drag:active {
  cursor: grabbing;
}

.pb-option-input {
  flex: 1;
}

.pb-option-delete {
  background: none;
  border: none;
  color: var(--c-text-muted);
  font-size: var(--bp-text-lg);
  cursor: pointer;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  line-height: 1;
}

.pb-option-delete:hover {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
}

.pb-add-option-btn {
  width: 100%;
  padding: var(--space-5) var(--space-10);
  font-size: var(--bp-text-sm);
  text-align: left;
}

/* Field editor - type tiles (left) + form (right) */
.modal.field-editor-modal {
  max-width: 960px;
  width: min(960px, calc(100vw - 2rem));
}

.field-editor-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 17.5rem) minmax(0, 1fr);
  gap: var(--space-15);
  align-items: start;
}

.field-editor-types-pane .form-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.bp-lock-overlay {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.pb-publish-choice.is-unavailable .bp-lock-overlay:not([hidden]),
.field-editor-types.is-locked .bp-lock-overlay:not([hidden]) {
  display: flex;
  pointer-events: auto;
  cursor: not-allowed;
}

/* Large padlock only for publish / field-type tiles - not path-editor canvas wash. */
.pb-publish-choice .bp-lock-overlay .pb-icon-mask,
.pb-publish-choice .bp-lock-overlay .bp-icon-mask,
.field-editor-types .bp-lock-overlay .pb-icon-mask,
.field-editor-types .bp-lock-overlay .bp-icon-mask {
  width: 4.75rem;
  height: 4.75rem;
  background-color: var(--c-text);
}

.field-editor-types {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.field-editor-type {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-2);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-chrome-bg);
  color: var(--c-text);
  box-shadow: var(--bp-shadow);
  cursor: pointer;
  font: inherit;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Shared duplicate-resource modal (Pages / Automations / Lead Paths) */
.bp-dup-resource-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.bp-dup-resource-form {
  min-width: 0;
}

.bp-dup-resource-preview {
  display: none;
  min-width: 0;
}

#bp-dup-resource-modal.is-duplicate-preview .bp-dup-resource-body {
  display: grid;
  grid-template-columns: minmax(14rem, 1.1fr) minmax(0, 1fr);
  gap: var(--space-13);
  align-items: stretch;
}

#bp-dup-resource-modal.is-duplicate-preview .bp-dup-resource-preview {
  display: flex;
  flex-direction: column;
  min-height: 16rem;
}

#bp-dup-resource-modal.is-duplicate-preview .bp-dup-resource-preview .media-detail__viewport {
  flex: 1 1 auto;
  min-height: 16rem;
}

.bp-dup-target-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

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

.copy-agency-picker[hidden] {
  display: none !important;
}

.copy-agency-picker .sidebar-agency-trigger {
  width: 100%;
}

.copy-agency-picker .sidebar-agency-trigger-caret {
  transform: rotate(90deg);
}

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

.copy-agency-menu {
  left: 0;
  right: 0;
  top: calc(100% + var(--space-7));
  min-width: 0;
  max-width: none;
  max-height: min(280px, 50vh);
  z-index: 120;
  transform-origin: top center;
}

.copy-agency-menu:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  transform-origin: top center;
  animation: bp-copy-agency-menu-in var(--dur) var(--ease-emphasis);
}

@keyframes bp-copy-agency-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  #bp-dup-resource-modal.is-duplicate-preview .bp-dup-resource-body {
    grid-template-columns: 1fr;
  }

  #bp-dup-resource-modal.is-duplicate-preview .bp-dup-resource-preview .media-detail__viewport {
    min-height: 12rem;
  }
}

.field-editor-type:hover:not(:disabled) {
  background: var(--btn-chrome-bg-hover);
  box-shadow: var(--bp-shadow-hover);
}

.field-editor-type:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

.field-editor-type.is-selected {
  background: color-mix(in srgb, var(--c-primary) 14%, var(--c-surface));
  color: var(--c-primary);
  box-shadow: var(--bp-shadow-focus);
}

.field-editor-type:disabled,
.field-editor-types.is-locked .field-editor-type {
  opacity: .35;
  cursor: not-allowed;
}

.field-editor-type-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  background-color: currentColor;
}

.field-editor-type-label {
  font-size: var(--bp-text-xs);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  letter-spacing: .01em;
}

.field-editor-form {
  min-width: 0;
}

.field-editor-preview-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-13a) var(--space-13b) var(--space-14);
  border-radius: var(--bp-card-radius, var(--radius-lg));
  background: var(--bp-card-header-bg, var(--bp-card-section-bg));
  box-shadow: var(--bp-shadow);
  border: 1px solid transparent;
}

.field-editor-preview-card > .form-label {
  margin: 0;
}

.field-editor-preview {
  pointer-events: none;
  user-select: none;
}

.field-editor-preview .form-group {
  margin: 0;
}

.field-editor-number-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-11);
  align-items: end;
}

.field-editor-number-row .form-group {
  margin: 0;
}

@media (max-width: 640px) {
  .field-editor-layout {
    grid-template-columns: 1fr;
  }

  .field-editor-types {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .field-editor-type {
    aspect-ratio: auto;
    min-height: 3.75rem;
  }

  .field-editor-number-row {
    grid-template-columns: 1fr;
  }
}

.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: var(--bp-text-md);
  line-height: 1.5;
}

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

.modal-header {
  position: relative;
  z-index: 1;
  margin: var(--bp-card-inset) var(--bp-card-inset) 0;
  padding: var(--space-10) var(--space-12a);
  border: 1px solid transparent;
  border-radius: var(--bp-card-section-radius);
  background: var(--btn-chrome-bg, var(--bp-card-header-bg, var(--bp-card-section-bg)));
  box-shadow: var(--bp-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-11);
}

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

/* Destructive confirms: red header + red confirm action */
.modal--danger > .modal-header {
  background: var(--c-danger);
  box-shadow: none;
}

.modal--danger > .modal-header .modal-title {
  color: #fff;
}

.modal--danger > .modal-header .modal-close {
  color: rgba(255, 255, 255, .88);
}

.modal--danger > .modal-header .modal-close:hover,
.modal--danger > .modal-header .modal-close:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  box-shadow: none;
}

.modal--danger [data-modal-confirm] {
  background: var(--c-danger);
  color: #fff;
  box-shadow: var(--bp-shadow);
}

.modal--danger [data-modal-confirm]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-danger) 85%, #000);
  box-shadow: var(--bp-shadow-hover);
}

/* Warning alerts: soft wash + warning text (same treatment as progress banner) */
.modal--warning > .modal-header {
  background: color-mix(in srgb, var(--c-warning) 18%, var(--c-surface));
  box-shadow: none;
}

.modal--warning > .modal-header .modal-title {
  color: var(--c-warning);
}

.modal--warning > .modal-header .modal-close {
  color: var(--c-warning);
}

.modal--warning > .modal-header .modal-close:hover,
.modal--warning > .modal-header .modal-close:focus-visible {
  color: var(--c-warning);
  background: color-mix(in srgb, var(--c-warning) 28%, var(--c-surface));
  box-shadow: none;
}

.modal--warning [data-modal-confirm] {
  background: color-mix(in srgb, var(--c-warning) 18%, var(--c-surface));
  color: var(--c-warning);
  box-shadow: none;
}

.modal--warning [data-modal-confirm]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-warning) 28%, var(--c-surface));
  color: var(--c-warning);
  box-shadow: none;
}

.modal-body {
  padding: var(--space-14);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-11) var(--space-14);
  border-top: none;
  background: var(--bp-card-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: var(--space-11);
}

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

.modal-footer--section {
  border-top: 1px solid color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
  background: var(--bp-card-footer-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: var(--bp-text-xl);
  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;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.domains-dns-busy {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.domains-dns-busy__spinner {
  width: 0.9rem;
  height: 0.9rem;
  border-width: 2px;
}

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

.modal-stack--sm {
  gap: var(--space-11);
}

.twilio-phone-modal-split {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  min-width: 0;
}

.twilio-phone-modal-provider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 6.5rem;
  padding: var(--space-12) var(--space-10);
  border: 1px solid var(--c-border);
  border-radius: var(--bp-radius-md, .5rem);
  background: color-mix(in srgb, var(--bp-card-bg) 92%, var(--c-border));
  text-align: center;
}

.twilio-phone-modal-provider__icon {
  width: 1.75rem;
  height: 1.75rem;
  opacity: .85;
}

.twilio-phone-modal-provider__logo {
  width: 2.5rem;
  height: 2.5rem;
  display: block;
  object-fit: contain;
}

.twilio-phone-modal-provider__name {
  font-weight: 600;
  font-size: var(--bp-text-lg);
  line-height: 1.2;
}

.twilio-phone-modal-provider__link {
  font-size: var(--bp-text-sm);
  line-height: 1.3;
  color: var(--c-primary, var(--c-link, #0284c7));
  text-decoration: none;
  word-break: break-all;
}

.twilio-byot-connected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-8);
}

.twilio-phone-modal-details {
  min-width: 0;
}

.twilio-phone-manual-toggle {
  align-self: flex-start;
  margin: calc(var(--space-5) * -1) 0 0;
  padding-left: 0;
}

@media (max-width: 520px) {
  .twilio-phone-modal-split {
    grid-template-columns: 1fr;
  }

  .twilio-phone-modal-provider {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 0;
    padding: var(--space-10) var(--space-12);
  }
}

.bp-confirm-typed__label {
  display: block;
  margin: 0 0 var(--space-5);
  font-weight: 400;
  color: var(--c-text-muted);
}

.bp-confirm-typed__label strong {
  color: inherit;
  font-weight: 600;
}

.bp-choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.bp-choice-list__btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  height: auto;
  min-height: var(--bp-field-height, 2.5rem);
  padding: var(--space-10) var(--space-12);
  white-space: normal;
}

.bp-choice-list__btn--danger {
  color: var(--c-danger);
  border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-border));
}

.bp-choice-list__btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-danger) 10%, var(--bp-card-bg));
  border-color: color-mix(in srgb, var(--c-danger) 55%, var(--c-border));
}

/* Choice picker - same jelly nav treatment as the dashboard sidebar. */
.bp-choice-slide {
  display: block;
  margin: 0;
  /* Match sidebar / path steps jelly tokens */
  --bp-slide-select-dur: var(--sidebar-dur, var(--dur-slow, .28s));
  --bp-slide-select-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
  --bp-slide-select-bg: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-slide-select-fg: var(--c-primary-color, var(--c-primary));
  --bp-slide-select-shadow: none;
  --bp-slide-select-radius: var(--radius);
}

.bp-choice-slide .nav-menu {
  padding: 0;
}

.bp-choice-slide .nav-link {
  width: 100%;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.bp-choice-slide .nav-link.bp-choice-slide__danger {
  color: var(--c-danger);
}

.bp-choice-slide.bp-slide-select--live.bp-slide-select--no-clip .nav-link.bp-choice-slide__danger.active,
.bp-choice-slide.bp-slide-select--live.bp-slide-select--no-clip .nav-link.bp-choice-slide__danger.active:hover {
  color: var(--c-danger);
}

.bp-choice-slide:has(.nav-link.bp-choice-slide__danger.active) {
  --bp-slide-select-bg: color-mix(in srgb, var(--c-danger) 14%, var(--bp-card-bg, var(--c-surface)));
  --bp-slide-select-fg: var(--c-danger);
  --bp-slide-select-shadow: none;
}

.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: none;
}

.modal-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--btn-chrome-bg);
  background-clip: padding-box;
  box-shadow: none;
}

.leads-modal-pagination {
  margin-top: var(--space-12);
  justify-content: center;
}

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

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

.page-content {
  /* Vertical page rhythm; right inset matches .topbar. Left gap already comes from
     --sidebar-main-offset on .main (same as topbar / path editor). */
  padding: var(--bp-page-padding) var(--sidebar-inset) var(--bp-page-padding) 0;
  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: var(--space-11);
  margin-bottom: 0;
}

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

.page-header__heading {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  min-width: 0;
}

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

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

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

.bp-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-left: auto;
  justify-content: flex-end;
}

.bp-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: var(--space-11);
}.contacts-page-title-row{
  width: auto;
  flex: 0 0 auto;
}

.bp-toolbar,
.page-header .bp-toolbar {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  justify-content: flex-end;
}

/*
 * Contacts/fields-style toolbars must stay on the same row as the title.
 * Wrapping the toolbar under the h1 changes table height in bp-table-fit-page
 * and can loop with viewport page-size reloads.
 */
.page-header:has(> .bp-toolbar),
.contacts-page-header:has(.bp-toolbar) {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.page-header:has(> .bp-toolbar) > :is(h1, h2),
.contacts-page-header:has(.bp-toolbar) > :is(h1, h2),
.contacts-page-header:has(.bp-toolbar) > .contacts-page-title-row {
  flex: 0 0 auto;
}

.contacts-page-header.admin-clients-header {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-10);
}

.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 .bp-toolbar {
  flex: 0 1 auto;
  min-width: min(100%, 28rem);
}

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

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

  .page-header:has(> .bp-toolbar),
  .contacts-page-header:has(.bp-toolbar) {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }

  .page-header:has(> .bp-toolbar) > .bp-toolbar,
  .contacts-page-header:has(.bp-toolbar) .bp-toolbar {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }
}

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

  .bp-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 - tab panels, dividers */
.settings-tab-panel {
  margin-top: var(--space-3);
}

.settings-tab-panel.stack {
  margin-top: 0;
}

.settings-table-empty {
  margin: 0;
  padding: var(--bp-card-inset);
  color: var(--c-text-muted);
}

td .settings-table-empty {
  display: inline-block;
  padding: var(--space-12) 0;
}

.settings-table-empty--error {
  color: var(--c-danger);
}

/* Settings 2-card splits (Profile, Accessibility): side-by-side cards + drag gutter */
.settings-card-split {
  --bp-split-col-1: minmax(0, 1fr);
  --bp-split-col-2: var(--settings-card-split-col-2, 300px);
  width: 100%;
  min-width: 0;
}

.agent-profile-split {
  --settings-card-split-col-2: var(--agent-profile-hours-w, 300px);
}

.agent-a11y-split {
  --settings-card-split-col-2: var(--agent-a11y-func-w, 340px);
}

@media (min-width: 900px) {
  .settings-card-split {
    align-items: stretch;
  }

  .settings-card-split > .card {
    min-width: 0;
    min-height: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .settings-card-split > .card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  .settings-card-split > .bp-resizer {
    width: 100%;
    min-height: 8rem;
  }
}

.settings-card-split.is-resizing,
.settings-card-split.is-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* Accessibility fields fill the card width uniformly */
#settings-panel-accessibility .form-group {
  max-width: none;
}

#settings-panel-accessibility :is(.form-input, .form-select, .form-select-wrap, .bp-dur-wrap) {
  width: 100%;
  max-width: none;
}

.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.
 */
.bp-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-13);
  flex-wrap: wrap;
}

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

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

.bp-settings-row__value {
  margin: var(--space-5) 0 0;
  font-size: var(--bp-text-md);
  font-weight: 500;
  color: var(--c-text);
}

.bp-settings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-11);
  flex-wrap: wrap;
}

.bp-settings-card-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8a);
}

.bp-settings-card-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  object-fit: contain;
  flex-shrink: 0;
}

.bp-settings-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

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

.bp-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
}

/* Stacked settings lists - hairline rows (columns modal, Pages, hours, etc.) */
.bp-settings-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bp-settings-list > .settings-list-item:not(.bp-settings-row),
.bp-settings-list > .bp-settings-list-item:not(.bp-settings-row) {
  display: flex;
  align-items: center;
  gap: var(--space-11);
  box-sizing: border-box;
}

.bp-settings-list > .settings-list-item[hidden],
.bp-settings-list > .bp-settings-list-item[hidden] {
  display: none !important;
}

/* 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: var(--space-12);
  margin-top: var(--space-12);
}

/* Skip [hidden] so filtered rows (Pages search) don't leave double gaps */
.bp-settings-list > .bp-settings-list-item:nth-child(n of :not([hidden])):not(:nth-child(1 of :not([hidden]))),
.bp-settings-list > .settings-list-item:nth-child(n of :not([hidden])):not(:nth-child(1 of :not([hidden]))) {
  border-top: 1px solid color-mix(in srgb, var(--c-border) 88%, var(--c-text) 12%);
  padding-top: var(--space-12);
  margin-top: var(--space-12);
}

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

.media-uploader {
  display: flex;
  flex-direction: column;
  gap: var(--space-8a);
}

.branding-grid .pb-media-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: var(--space-10);
  border: 1.5px solid color-mix(in srgb, var(--c-border) 85%, var(--c-text-muted));
  border-radius: var(--radius);
  background: var(--bp-card-section-bg, color-mix(in srgb, var(--c-border) 18%, transparent));
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--dur, .15s) var(--ease, ease),
    background-color var(--dur, .15s) var(--ease, ease),
    box-shadow var(--dur, .15s) var(--ease, ease);
  user-select: none;
}

.branding-grid .pb-media-drop:hover,
.branding-grid .pb-media-drop:focus-visible {
  border-color: color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 55%, var(--c-border));
  background: color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 5%, var(--bp-card-section-bg, transparent));
}

.branding-grid .pb-media-drop.is-file-drag {
  border-style: solid;
  border-color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 30%, transparent);
}

.branding-grid .pb-media-drop.is-uploading {
  opacity: .72;
  pointer-events: none;
}

.branding-grid .pb-media-drop__empty,
.branding-grid .pb-media-drop__filled {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  text-align: center;
  pointer-events: none;
}

.branding-grid .pb-media-drop__icon {
  display: block;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--space-1);
  color: var(--c-text-muted);
  background-color: var(--c-text-muted) !important;
  background-image: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-mask: var(--pb-icon, url('/static/img/icons/image.svg')) center / contain no-repeat;
  mask: var(--pb-icon, url('/static/img/icons/image.svg')) center / contain no-repeat;
}

.branding-grid .pb-media-drop__empty--image {
  --pb-icon: url('/static/img/icons/image.svg');
}

/* Drop copy stays readable on the branding uploaders. */
.branding-grid .pb-media-drop * {
  color: var(--c-text-muted) !important;
  -webkit-text-fill-color: var(--c-text-muted);
  caret-color: auto !important;
}

.branding-grid .pb-media-drop__title {
  font-size: var(--bp-text-md);
  font-weight: var(--btn-font-weight, 500);
  color: var(--c-text-muted) !important;
  -webkit-text-fill-color: var(--c-text-muted);
  line-height: 1.35;
}

.branding-grid .pb-media-drop__thumb {
  display: block;
  max-width: 100%;
  max-height: 7.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center !important;
  visibility: visible !important;
  border-radius: calc(var(--radius) - 2px);
  background: var(--bp-card-bg, #fff);
  box-shadow: var(--bp-shadow);
}

.branding-grid .pb-media-drop.is-file-drag::after {
  content: 'Drop to upload';
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: color-mix(in srgb, var(--bp-card-bg, #fff) 88%, transparent);
  color: var(--c-text);
  font-size: var(--bp-text-sm);
  font-weight: 600;
  pointer-events: none;
}

.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: var(--bp-text-sm);
}

.media-uploader__actions {
  display: flex;
  align-items: center;
  gap: var(--space-11);
  flex-wrap: wrap;
}

.color-picker-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-13);
  padding: var(--space-11) var(--space-13);
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  background: var(--c-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 .bp-color-swatch {
  pointer-events: none;
  cursor: inherit;
}

.color-picker-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.color-picker-name {
  font-size: var(--bp-text-lg);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-picker-hex {
  font-size: var(--bp-text-sm);
  font-weight: 500;
  letter-spacing: .04em;
  font-family: ui-monospace, monospace;
  color: var(--c-text-muted);
}

/* Inline warning callout (matches path builder node-editor setup warnings) */
.bp-inline-warn {
  margin: 0 0 var(--space-11);
  padding: var(--space-9) var(--space-10);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--c-warning, #d97706) 35%, var(--c-border));
  background: color-mix(in srgb, var(--c-warning, #d97706) 12%, var(--bp-card-bg, #fff));
  font-size: var(--bp-text-sm);
  line-height: 1.4;
  color: var(--c-text);
}

.bp-inline-warn[hidden] {
  display: none !important;
}

/* ── Shared color picker popover ───────────────────────── */

.bp-color-picker-root {
  position: relative;
  /* Above .modal-overlay (100) so pickers opened from modals stay usable */
  z-index: 110;
}

.bp-color-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: transparent;
  /* Only intercept clicks while the picker is actively open */
  pointer-events: none;
}

.bp-color-picker-root.is-open .bp-color-picker-backdrop {
  pointer-events: auto;
}

.bp-color-picker-backdrop[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.bp-color-picker-stage {
  position: fixed;
  z-index: 111;
  display: block;
  max-width: calc(100vw - 1.25rem);
  box-sizing: border-box;
}

.bp-color-picker-stage[hidden] {
  display: none !important;
}

.bp-color-picker-stage.is-entering .bp-color-picker-popover {
  animation: bp-color-picker-in var(--dur, .15s) var(--ease-emphasis, cubic-bezier(.2, .8, .2, 1));
}

.bp-color-picker-columns {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.bp-color-picker-swatches {
  --bp-color-swatches-width: 7.75rem;
  width: var(--bp-color-swatches-width);
  min-width: var(--bp-color-swatches-width);
  flex: 0 0 var(--bp-color-swatches-width);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  box-sizing: border-box;
  color: inherit;
}

.bp-color-picker-swatches-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  padding: var(--space-11) var(--space-8);
  min-width: 0;
  flex: 1 1 auto;
  overflow: auto;
}

.bp-color-picker-swatches-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.bp-color-picker-swatches-section:last-child {
  flex: 1 1 auto;
}

.bp-color-picker-swatches-label {
  font-size: var(--bp-text-xs);
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.bp-color-picker-swatches-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
}

.bp-color-picker-swatches-empty {
  font-size: var(--bp-text-xs);
  color: var(--c-text-muted);
  line-height: 1.3;
}

.bp-color-picker-swatch-chip {
  position: relative;
  width: auto;
  height: auto;
  flex: 0 0 auto;
}

.bp-color-picker-swatch-hit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: auto;
  margin: 0;
  padding: var(--space-1);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur, .15s) var(--ease), border-color var(--dur, .15s) var(--ease);
}

.bp-color-picker-swatch-hit:hover {
  background: color-mix(in srgb, var(--c-border) 28%, transparent);
  border-color: transparent;
}

.bp-color-picker-swatch-hit:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--c-border) 28%, transparent);
}

.bp-color-picker-swatch-chip > .bp-color-swatch,
.bp-color-picker-swatch-hit > .bp-color-swatch {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 1.55rem;
  border-radius: 6px;
  /* Tighter checker so transparency reads clearly on small chips. */
  --bp-swatch-check-size: 6px;
}

.bp-color-picker-swatch-meta,
.bp-color-picker-swatch-name,
.bp-color-picker-swatch-hex {
  display: none;
}

.bp-color-picker-swatch-hit--save:disabled {
  opacity: .72;
  cursor: default;
}

.bp-color-picker-swatch-save-mark {
  position: absolute;
  right: 1px;
  bottom: 1px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: .9rem;
  height: .9rem;
  padding: 0 .1rem;
  border-radius: 4px;
  font-size: var(--bp-text-xs);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: color-mix(in srgb, var(--c-text) 55%, transparent);
  pointer-events: none;
}

.bp-color-picker-swatch-hit--save:not(:disabled) .bp-color-picker-swatch-save-mark {
  background: var(--c-primary, #5050ff);
  color: #fff;
}

.bp-color-picker-swatch-remove {
  position: absolute;
  top: calc(-1 * var(--space-2));
  right: calc(-1 * var(--space-1));
  width: .85rem;
  height: .85rem;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--bp-card-bg, var(--c-surface, #fff));
  color: var(--c-text-muted);
  font-size: var(--bp-text-xs);
  line-height: 1;
  display: grid;
  place-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur, .15s) var(--ease);
  z-index: 1;
}

.bp-color-picker-swatch-chip.is-removable:hover .bp-color-picker-swatch-remove,
.bp-color-picker-swatch-chip.is-removable:focus-within .bp-color-picker-swatch-remove {
  opacity: 1;
  pointer-events: auto;
}

.bp-color-picker-swatch-remove:hover {
  color: var(--c-danger, #dc2626);
}

.bp-color-swatch--add {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 1.55rem;
  align-self: flex-start;
  margin: var(--space-2) 0 var(--space-1a) var(--space-2);
  border-style: dashed;
  color: #fff;
  font-size: var(--bp-text-lg);
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-content: center;
  text-shadow: none;
}

.bp-color-swatch--add[data-empty="1"] {
  --bp-color-swatch: transparent;
  border-color: color-mix(in srgb, var(--c-border) 80%, var(--c-text-muted));
  box-shadow: none;
  color: var(--c-text-muted);
  text-shadow: none;
}

.bp-color-swatch--add:hover:not(:disabled) {
  filter: brightness(.96);
}

.bp-color-swatch--add[data-empty="1"]:hover:not(:disabled) {
  color: var(--c-text);
  border-color: var(--c-text-muted);
  filter: none;
}

.bp-color-swatch--add:disabled {
  opacity: .72;
  cursor: default;
}

.bp-color-swatch--add[data-empty="1"]:disabled {
  opacity: .45;
}

.bp-color-picker-popover {
  position: relative;
  z-index: auto;
  width: max-content;
  max-width: calc(100vw - 1.25rem);
  min-width: 0;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius, var(--radius-lg));
  background: var(--bp-card-bg, var(--c-surface, #fff));
  box-shadow: var(--bp-dropdown-shadow);
  color: var(--c-text);
  overflow: hidden;
  box-sizing: border-box;
}

.bp-color-picker-popover[hidden] {
  display: none !important;
}

@keyframes bp-color-picker-in {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.bp-color-picker-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin: var(--bp-card-inset, var(--space-8)) var(--bp-card-inset, var(--space-8)) 0;
  padding: var(--space-10) var(--space-12a);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-chrome-bg, var(--bp-card-header-bg, var(--bp-card-section-bg)));
  box-shadow: var(--bp-shadow);
}

.bp-color-picker-header-main {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  min-width: 0;
}

.bp-color-picker-title {
  margin: 0;
  font-size: var(--bp-text-md);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-color-picker-close {
  appearance: none;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius, 8px);
  background: transparent;
  color: var(--c-text-muted);
  font-size: var(--bp-text-xl);
  line-height: 1;
  cursor: pointer;
}

.bp-color-picker-close:hover {
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-primary) 8%, transparent);
}

.bp-color-picker-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  /* Keep px room for the fixed-width iro wheel + padding (rem shrinks with UI font size). */
  box-sizing: border-box;
  width: calc(232px + 1.7rem + 1rem);
  min-width: calc(232px + 1.7rem + 1rem);
  flex: 0 0 auto;
  padding: var(--space-11) var(--space-12);
}

@media (max-width: 28rem) {
  .bp-color-picker-columns {
    flex-direction: column;
  }

  .bp-color-picker-body {
    width: 100%;
    min-width: 0;
  }

  .bp-color-picker-swatches {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
  }

  .bp-color-picker-swatches-body {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-11) var(--space-13);
  }
}

.bp-color-picker-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  width: 100%;
  padding: var(--space-6) var(--space-4);
  box-sizing: border-box;
}

.bp-color-picker-popover .IroColorPicker {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.bp-color-picker-popover .IroBox,
.bp-color-picker-popover .IroSlider {
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
}

.bp-color-picker-popover .IroHandle circle {
  stroke: #fff;
  stroke-width: 2px;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 1.25px rgba(0, 0, 0, .55));
}

.bp-color-picker-modes.analytics-tabs {
  --bp-slide-select-dur: var(--dur);
  --bp-slide-select-shadow: none;
  --bp-slide-select-radius: 8px;
  display: flex;
  width: 100%;
  gap: 2px;
  margin: 0;
  min-height: 0;
  padding: var(--space-2);
  border-radius: 10px;
  background: color-mix(in srgb, var(--c-border) 35%, var(--c-surface, #fff));
  box-shadow: none;
}

.bp-color-picker-modes.analytics-tabs .analytics-tabs__track {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.bp-color-picker-modes.analytics-tabs.bp-slide-select--live {
  gap: 0;
}

.bp-color-picker-modes .analytics-tab {
  flex: 1 1 0;
  width: auto;
  min-height: 0;
  justify-content: center;
  padding: var(--space-6) var(--space-8);
  font-size: var(--bp-text-sm);
  font-weight: 700;
  letter-spacing: .03em;
}

.bp-color-picker-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  min-width: 0;
}

.bp-color-picker-channel {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) 3.1rem;
  align-items: center;
  gap: var(--space-7);
  min-width: 0;
}

.bp-color-picker-channel[hidden] {
  display: none !important;
}

.bp-color-picker-channel-label {
  margin: 0;
  font-size: var(--bp-text-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text-muted);
  text-transform: uppercase;
}

.bp-color-picker-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: .35rem;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-border) 70%, transparent);
  outline: none;
}

.bp-color-picker-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  border: none;
  background: var(--c-primary, #5050ff);
  box-shadow: none;
  cursor: pointer;
}

.bp-color-picker-slider::-moz-range-thumb {
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  border: none;
  background: var(--c-primary, #5050ff);
  box-shadow: none;
  cursor: pointer;
}

.bp-color-picker-num,
.bp-color-picker-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--bp-text-sm);
  letter-spacing: .02em;
}

.bp-color-picker-num {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface, #fff);
  color: var(--c-text);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.bp-color-picker-num::-webkit-outer-spin-button,
.bp-color-picker-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.bp-color-picker-hex-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
  width: 100%;
  min-width: 0;
}

.bp-color-picker-hex-label {
  margin: 0;
  font-size: var(--bp-text-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.bp-color-picker-hex {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  text-transform: uppercase;
  padding: var(--space-7) var(--space-8a);
}

.bp-color-picker-num:focus,
.bp-color-picker-hex:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent);
}

.bp-color-picker-hex-error {
  margin: -var(--space-5) 0 0;
  font-size: var(--bp-text-sm);
  color: var(--c-danger, #dc2626);
}

.bp-color-picker-hex-error[hidden] {
  display: none !important;
}

.bp-color-picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-7);
  padding: var(--space-11) var(--space-14);
  border-top: none;
  background: var(--bp-card-bg, var(--c-surface, #fff));
}

/* ── Angle dial picker ───────────────────────────────────── */
.bp-angle-picker-root {
  position: relative;
  z-index: 110;
}

.bp-angle-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: transparent;
}

.bp-angle-picker-backdrop[hidden] {
  display: none !important;
}

.bp-angle-picker-popover {
  position: fixed;
  z-index: 111;
  width: min(17.5rem, calc(100vw - 1.25rem));
  max-width: calc(100vw - 1.25rem);
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius, var(--radius-lg));
  background: var(--bp-card-bg, var(--c-surface, #fff));
  box-shadow: var(--bp-dropdown-shadow);
  color: var(--c-text);
  overflow: hidden;
  box-sizing: border-box;
  animation: bp-color-picker-in var(--dur, .15s) var(--ease-emphasis, cubic-bezier(.2, .8, .2, 1));
}

.bp-angle-picker-popover[hidden] {
  display: none !important;
}

.bp-angle-picker-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin: var(--bp-card-inset, var(--space-8)) var(--bp-card-inset, var(--space-8)) 0;
  padding: var(--space-10) var(--space-12a);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-chrome-bg, var(--bp-card-header-bg, var(--bp-card-section-bg)));
  box-shadow: var(--bp-shadow);
}

.bp-angle-picker-header-main {
  min-width: 0;
}

.bp-angle-picker-title {
  margin: 0;
  font-size: var(--bp-text-md);
  font-weight: 600;
  line-height: 1.2;
}

.bp-angle-picker-close {
  appearance: none;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius, 8px);
  background: transparent;
  color: var(--c-text-muted);
  font-size: var(--bp-text-xl);
  line-height: 1;
  cursor: pointer;
}

.bp-angle-picker-close:hover {
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-primary) 8%, transparent);
}

.bp-angle-picker-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10a);
  padding: var(--space-11) var(--space-12);
}

.bp-angle-picker-value-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
}

.bp-angle-picker-deg {
  width: 4.5rem;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface, #fff);
  color: var(--c-text);
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--bp-text-lg);
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
}

.bp-angle-picker-deg::-webkit-outer-spin-button,
.bp-angle-picker-deg::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.bp-angle-picker-deg:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent);
}

.bp-angle-picker-unit {
  font-size: var(--bp-text-lg);
  font-weight: 700;
  color: var(--c-text-muted);
}

.bp-angle-dial {
  --bp-angle: 0deg;
  --bp-dial-size: 11.5rem;
  position: relative;
  width: var(--bp-dial-size);
  height: var(--bp-dial-size);
  border-radius: 50%;
  touch-action: none;
  cursor: crosshair;
  outline: none;
  user-select: none;
}

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

.bp-angle-dial-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--c-surface, #fff) 92%, #fff) 0 42%, transparent 43%),
    conic-gradient(from 0deg, color-mix(in srgb, var(--c-border) 55%, transparent) 0 1deg, transparent 1deg 45deg);
  background-color: color-mix(in srgb, var(--c-border) 22%, var(--c-surface, #fff));
  border: 1px solid var(--c-border);
  box-shadow: none;
}

.bp-angle-dial-ticks {
  position: absolute;
  inset: 0;
}

.bp-angle-dial-tick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 48%;
  margin-left: -1px;
  margin-top: -48%;
  transform: rotate(var(--tick));
  transform-origin: 50% 100%;
  background: linear-gradient(to bottom, var(--c-text-muted) 0 10px, transparent 10px);
  opacity: .55;
  pointer-events: none;
}

.bp-angle-dial-tick.is-major {
  opacity: .9;
  background: linear-gradient(to bottom, var(--c-text) 0 12px, transparent 12px);
}

.bp-angle-dial-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .55rem;
  height: .55rem;
  margin: -.275rem 0 0 -.275rem;
  border-radius: 50%;
  background: var(--c-primary, #5050ff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary, #5050ff) 22%, transparent);
  z-index: 2;
  pointer-events: none;
}

.bp-angle-dial-arm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 38%;
  margin-left: -1px;
  margin-top: -38%;
  border-radius: 2px;
  background: var(--c-primary, #5050ff);
  transform: rotate(var(--bp-angle, 0deg));
  transform-origin: 50% 100%;
  z-index: 1;
  pointer-events: none;
}

.bp-angle-dial-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-radius: 50%;
  border: none;
  background: var(--c-primary, #5050ff);
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(var(--bp-angle, 0deg)) translateY(calc(var(--bp-dial-size) * -0.38));
  transform-origin: center center;
  z-index: 3;
  pointer-events: none;
}

.bp-angle-picker-hint {
  margin: 0;
  font-size: var(--bp-text-xs);
  color: var(--c-text-muted);
  text-align: center;
}

.bp-angle-picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-7);
  padding: var(--space-11) var(--space-14);
  border-top: none;
  background: var(--bp-card-bg, var(--c-surface, #fff));
}

.bp-angle-field {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}

.bp-angle-field .pb-field-input,
.bp-angle-field input {
  flex: 1;
  min-width: 0;
}

.bp-angle-trigger {
  --bp-angle: 0deg;
  appearance: none;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-border) 18%, var(--c-surface, #fff));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bp-angle-trigger:hover {
  border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
}

.bp-angle-trigger-dial {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 1.5px solid var(--c-text-muted);
  box-sizing: border-box;
}

.bp-angle-trigger-dial::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5px;
  height: 42%;
  margin-left: -.75px;
  margin-top: -42%;
  border-radius: 1px;
  background: var(--c-primary, #5050ff);
  transform: rotate(var(--bp-angle, 0deg));
  transform-origin: 50% 100%;
}

.bp-angle-trigger-dial::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .28rem;
  height: .28rem;
  margin: -.14rem 0 0 -.14rem;
  border-radius: 50%;
  background: var(--c-primary, #5050ff);
}

/* ── Corner radius picker ─────────────────────────────────── */
.bp-radius-picker-root {
  position: relative;
  z-index: 110;
}

.bp-radius-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: transparent;
}

.bp-radius-picker-backdrop[hidden] {
  display: none !important;
}

.bp-radius-picker-popover {
  position: fixed;
  z-index: 111;
  width: min(17.5rem, calc(100vw - 1.25rem));
  max-width: calc(100vw - 1.25rem);
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius, var(--radius-lg));
  background: var(--bp-card-bg, var(--c-surface, #fff));
  box-shadow: var(--bp-dropdown-shadow);
  color: var(--c-text);
  overflow: hidden;
  box-sizing: border-box;
  animation: bp-color-picker-in var(--dur, .15s) var(--ease-emphasis, cubic-bezier(.2, .8, .2, 1));
}

.bp-radius-picker-popover[hidden] {
  display: none !important;
}

.bp-radius-picker-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin: var(--bp-card-inset, var(--space-8)) var(--bp-card-inset, var(--space-8)) 0;
  padding: var(--space-10) var(--space-12a);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-chrome-bg, var(--bp-card-header-bg, var(--bp-card-section-bg)));
  box-shadow: var(--bp-shadow);
}

.bp-radius-picker-header-main {
  min-width: 0;
}

.bp-radius-picker-title {
  margin: 0;
  font-size: var(--bp-text-md);
  font-weight: 600;
  line-height: 1.2;
}

.bp-radius-picker-close {
  appearance: none;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius, 8px);
  background: transparent;
  color: var(--c-text-muted);
  font-size: var(--bp-text-xl);
  line-height: 1;
  cursor: pointer;
}

.bp-radius-picker-close:hover {
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-primary) 8%, transparent);
}

.bp-radius-picker-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10a);
  padding: var(--space-11) var(--space-12);
}

.bp-radius-picker-value-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
}

.bp-radius-picker-px {
  width: 4.5rem;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface, #fff);
  color: var(--c-text);
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--bp-text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.bp-radius-picker-px::-webkit-outer-spin-button,
.bp-radius-picker-px::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.bp-radius-picker-px:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent);
}

.bp-radius-picker-unit {
  font-size: var(--bp-text-lg);
  font-weight: 700;
  color: var(--c-text-muted);
}

.bp-radius-pad {
  --bp-radius-n: 8;
  --bp-radius-max: 128;
  --bp-drag-t: 0.4;
  --bp-pad-size: 11.5rem;
  --bp-pad-inset: 12%;
  /* Shape radius uses eased drag-t so halfway ≈ 16px when max is 128. */
  --bp-visual-r: calc(var(--bp-drag-t) * var(--bp-pad-size) * 0.72);
  position: relative;
  width: var(--bp-pad-size);
  height: var(--bp-pad-size);
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: crosshair;
  touch-action: none;
  outline: none;
  user-select: none;
}

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

.bp-radius-pad-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transition: transform 0.12s var(--ease, ease);
}

.bp-radius-pad[data-corner="tr"] .bp-radius-pad-canvas {
  transform: rotate(90deg);
}

.bp-radius-pad[data-corner="br"] .bp-radius-pad-canvas {
  transform: rotate(180deg);
}

.bp-radius-pad[data-corner="bl"] .bp-radius-pad-canvas {
  transform: rotate(270deg);
}

.bp-radius-pad-shape {
  position: absolute;
  left: var(--bp-pad-inset);
  top: var(--bp-pad-inset);
  right: var(--bp-pad-inset);
  bottom: var(--bp-pad-inset);
  background: color-mix(in srgb, var(--c-border) 22%, var(--c-surface, #fff));
  border: 1px solid var(--c-border);
  box-shadow: none;
  /* Only the active corner is rounded; canvas rotation handles TR/BR/BL. */
  border-radius: var(--bp-visual-r) 0 0 0;
}

/* SVG quarter-arc along the rounded corner (path set in JS). */
.bp-radius-pad-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.bp-radius-pad-arc {
  fill: none;
  stroke: var(--c-primary, #5050ff);
  stroke-width: 2.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: opacity .08s ease;
}

.bp-radius-pad-guide-end {
  position: absolute;
  width: .55rem;
  height: .55rem;
  margin: 0;
  border-radius: 50%;
  background: var(--c-primary, #5050ff);
  border: none;
  box-shadow: none;
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, -50%);
  transition: opacity .08s ease;
}

.bp-radius-pad-thumb {
  position: absolute;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-radius: 50%;
  background: var(--c-primary, #5050ff);
  border: none;
  box-shadow: none;
  pointer-events: none;
  z-index: 4;
  transform: translate(-50%, -50%);
  transition: opacity .08s ease;
}

.bp-radius-picker-hint {
  margin: 0;
  font-size: var(--bp-text-xs);
  color: var(--c-text-muted);
  text-align: center;
}

.bp-radius-picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-7);
  padding: var(--space-11) var(--space-14);
  border-top: none;
  background: var(--bp-card-bg, var(--c-surface, #fff));
}

.bp-color-swatch {
  --bp-color-swatch: #5050ff;
  /* Match iro.js alpha slider checker (#ccc / #fff conic-gradient). */
  --bp-swatch-check-a: #fff;
  --bp-swatch-check-b: #ccc;
  --bp-swatch-check-size: 8px;
  position: relative;
  box-sizing: border-box;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--bp-color-swatch) 55%, var(--c-border));
  border-radius: 6px;
  /*
   * Color layer on top of a repeating checker. Use conic-gradient (same as iro)
   * - the old 4-diagonal-gradient stack was underspecified (3 sizes for 5 layers),
   * so one checker tile stretched to 100% and looked like a blob in the corner.
   */
  background-color: var(--bp-swatch-check-a);
  background-image:
    linear-gradient(var(--bp-color-swatch), var(--bp-color-swatch)),
    repeating-conic-gradient(
      var(--bp-swatch-check-b) 0% 25%,
      var(--bp-swatch-check-a) 0% 50%
    );
  background-size:
    100% 100%,
    var(--bp-swatch-check-size) var(--bp-swatch-check-size);
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, repeat;
  cursor: pointer;
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
  transition: filter var(--dur, .15s) var(--ease), border-color var(--dur, .15s) var(--ease);
}

[data-theme="dark"] .bp-color-swatch {
  /* Keep the same checker as the iro opacity slider (always light #ccc/#fff). */
  --bp-swatch-check-a: #fff;
  --bp-swatch-check-b: #ccc;
}

.bp-color-swatch.is-empty {
  --bp-color-swatch: transparent;
  border-color: var(--c-border, #e5e7eb);
  box-shadow: none;
}

button.bp-color-swatch {
  appearance: none;
  font: inherit;
  color: inherit;
}

.bp-color-swatch:hover {
  filter: brightness(.96);
  border-color: color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 40%, var(--c-border));
}

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

/*
 * 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 {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  width: 100%;
}

.bp-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 {
  flex: 0 1 auto;
  max-width: min(100%, 52%);
  padding: var(--space-8) var(--space-10);
  font-size: var(--bp-text-md);
  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 {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: var(--space-8) var(--space-10);
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: var(--bp-text-md);
  line-height: 1.4;
  color: var(--c-text);
  cursor: text;
  box-shadow: none;
}

.bp-url-field: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 {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0 var(--space-10);
  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 {
  background: var(--btn-chrome-bg-hover);
  box-shadow: var(--bp-shadow-hover);
  color: var(--c-text);
}

.bp-url-edit-btn .bp-icon-mask {
  width: 1rem;
  height: 1rem;
}

.bp-url-copy {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0 var(--space-10);
  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 {
  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 {
  flex: 1 1 8rem;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: var(--space-8) var(--space-10);
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: var(--bp-text-md);
  line-height: 1.4;
  background: transparent;
  color: var(--c-text);
}

.bp-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,
.bp-url-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-8);
}

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

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

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

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

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

/* ── 17. Tab strip (segmented control; matches Rendered / HTML / Logic) ── */

.analytics-tabs {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 2px;
  margin: var(--space-5) 0 var(--space-13);
  min-height: var(--btn-min-height);
  padding: 2px;
  border-radius: var(--radius);
  background: var(--btn-chrome-bg, var(--c-surface));
  box-shadow: var(--bp-shadow);
  box-sizing: border-box;
}

.analytics-tabs__track {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}

.analytics-tabs.bp-slide-select--live {
  --bp-slide-select-dur: var(--dur);
  --bp-slide-select-shadow: none;
  --bp-slide-select-radius: calc(var(--radius) - 1px);
  gap: 0;
  position: relative;
}

.analytics-tabs.bp-slide-select--live .analytics-tabs__track {
  position: relative;
  z-index: 1;
}

.analytics-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin: 0;
  min-height: calc(var(--btn-min-height) - 4px);
  padding: 0 var(--btn-padding-x);
  border: 0;
  border-radius: calc(var(--radius) - 1px);
  background: transparent;
  box-shadow: none;
  color: var(--c-text-muted);
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: normal;
  line-height: var(--btn-line-height);
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.analytics-tab:hover:not(.is-active):not(:disabled) {
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-surface) 70%, transparent);
  box-shadow: none;
}

.analytics-tab.is-active {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--c-surface));
  box-shadow: var(--bp-shadow);
}

.analytics-tabs.bp-slide-select--live .analytics-tab {
  position: relative;
  z-index: 1;
  transition: color var(--dur) var(--ease);
}

.analytics-tabs.bp-slide-select--live .analytics-tab.is-active,
.analytics-tabs.bp-slide-select--live .analytics-tab.is-active:hover {
  color: var(--c-text-muted);
  font-weight: var(--btn-font-weight);
  background: transparent !important;
  box-shadow: none !important;
}

/* No text-mirror: selected label keeps the primary color on the real button. */
.analytics-tabs.bp-slide-select--live.bp-slide-select--no-clip .analytics-tab.is-active,
.analytics-tabs.bp-slide-select--live.bp-slide-select--no-clip .analytics-tab.is-active:hover {
  color: var(--c-primary-color, var(--c-primary));
}

.analytics-tabs.bp-slide-select--live .analytics-tab:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-surface) 70%, transparent);
}

.analytics-tabs.bp-slide-select--live .analytics-tab.is-active:hover:not(:disabled) {
  background: transparent !important;
}

.bp-slide-select__mirror .analytics-tab {
  color: var(--c-primary-color, var(--c-primary)) !important;
  font-weight: var(--btn-font-weight) !important;
  background: transparent !important;
  box-shadow: none !important;
}

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

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

/* ── 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: var(--space-13);
}

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

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

.metric-card__value,
.stat-value {
  margin: 0;
  font-size: var(--bp-text-xl);
  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: var(--space-1a) 0 0;
  font-size: var(--bp-text-sm);
  line-height: 1.4;
  font-weight: 400;
  color: var(--c-text-muted);
}

.metric-card__value--sm,
.stat-value--sm {
  font-size: var(--bp-text-lg);
  font-weight: 600;
}

.metric-card__compare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-5) var(--space-11);
}

.metric-card--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-11);
  min-height: 0;
  padding: var(--space-10a) var(--space-12a);
}

.metric-card--row .metric-card__label {
  flex: 1;
  min-width: 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--bp-text-sm);
  font-weight: 500;
}

.metric-card--row .metric-card__value {
  font-size: var(--bp-text-lg);
  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: var(--space-12) .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: var(--bp-text-xl);
}

.metrics-grid--compact .metric-card__label,
.metrics-grid--compact .stat-label,
.stats-grid--compact .metric-card__label,
.stats-grid--compact .stat-label {
  font-size: var(--bp-text-xs);
}

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

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

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-7);
  padding: 0;
  width: 100%;
}

.card-footer:has(.pagination) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2rem;
  padding: var(--space-6a) var(--space-11);
  font-size: var(--bp-text-sm);
  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);
}

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

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

.toast-container {
  position: fixed;
  top: max(var(--space-13), env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 9999;
  display: block;
  pointer-events: none;
  padding-inline: max(var(--space-13), env(safe-area-inset-left, 0px)) max(var(--space-13), env(safe-area-inset-right, 0px));
  /* Height driven by toast.js physics stack. */
  height: 0;
}

/* Dashboard: center over the main column / top-bar (exclude sidebar). */
html:has(.dash) .toast-container {
  top: var(--sidebar-inset);
  left: var(--sidebar-main-offset);
  right: var(--sidebar-inset);
  padding-inline: 0;
  transition: left var(--sidebar-dur, 280ms) var(--ease, cubic-bezier(.4, 0, .2, 1));
}

html:has(.dash.sidebar-collapsed) .toast-container {
  left: var(--sidebar-main-offset-collapsed);
}

.toast {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  width: max-content;
  max-width: min(420px, 100%);
  min-width: min(280px, 100%);
  padding: var(--space-11) var(--space-13);
  border: 1px solid transparent;
  border-radius: var(--radius);
  /* Opaque jelly wash (readable) + normal chrome shadow. */
  --bp-jelly-accent: var(--c-primary-color, var(--c-primary));
  --bp-jelly-accent-light: var(--c-primary-light);
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: var(--bp-jelly-accent);
  background: var(--bp-jelly-bg);
  box-shadow: var(--bp-shadow);
  font-size: var(--bp-text-md);
  font-weight: 600;
  line-height: 1.45;
  color: var(--bp-jelly-fg);
  /* Transform / opacity owned by toast.js jelly physics. */
  transform: translate(-50%, 0);
  transform-origin: center center;
  will-change: transform, opacity;
  box-sizing: border-box;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  /* Ring must track this toast's jelly accent (error/warning/success), not root primary. */
  --bp-ring-color: var(--bp-jelly-accent);
  --bp-ring-color-soft: color-mix(in srgb, var(--bp-jelly-accent) 55%, transparent);
  --bp-ring-idle: var(--bp-ring-width) solid transparent;
  --bp-ring-hover: var(--bp-ring-width) solid var(--bp-ring-color-soft);
  --bp-ring-active: var(--bp-ring-width) solid var(--bp-ring-color);
  outline: var(--bp-ring-width) solid var(--bp-jelly-accent);
  outline-color: transparent;
  outline-offset: var(--bp-ring-offset);
  transition: outline-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.toast:hover:not(.is-leaving) {
  outline-color: color-mix(in srgb, var(--bp-jelly-accent) 55%, transparent);
}

.toast.is-leaving {
  pointer-events: none;
}

.toast.is-dragging {
  cursor: grabbing;
  z-index: 2;
  outline-color: var(--bp-jelly-accent);
  box-shadow: var(--bp-shadow-hover, var(--bp-shadow));
  user-select: none;
}

/* Hold-to-reveal toss hoop (toast.js easter egg) — art in toast-hoop.svg */
.bp-toast-hoop {
  position: fixed;
  left: 48px;
  /* Drop the base below the fold so the pole reads planted off-screen. */
  bottom: -4rem;
  top: auto;
  z-index: 10040;
  width: 336px;
  height: 604px;
  margin: 0;
  pointer-events: none;
  /* Must clear the full viewport — left offset includes the sidebar, so
     translateX(-130%) of the hoop width is not enough to leave the screen. */
  transform: translateX(-120vw);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 420ms cubic-bezier(.22, 1.15, .36, 1),
    opacity 280ms ease,
    visibility 0s linear 420ms;
}

.bp-toast-hoop.is-visible {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 420ms cubic-bezier(.22, 1.15, .36, 1),
    opacity 220ms ease,
    visibility 0s linear 0s;
}

.bp-toast-hoop-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.bp-toast-hoop.is-swish .bp-toast-hoop-img {
  animation: bp-toast-hoop-swish 420ms var(--ease, cubic-bezier(.4, 0, .2, 1));
  transform-origin: 76% 26%; /* rim center in the SVG */
}

@keyframes bp-toast-hoop-swish {
  0% { transform: scale(1); }
  35% { transform: scale(1.06, 0.92); }
  100% { transform: scale(1); }
}

/* Comic callout: baked perspective SVG — first letter pinned to the rim. */
.bp-toast-hoop-callout {
  position: fixed;
  z-index: 10046;
  margin: 0;
  pointer-events: none;
  overflow: visible;
  /* transform-origin set inline to the first glyph; pop scales from the hoop. */
  transform: rotate(-4deg) scale(0.08);
  opacity: 0;
  animation: bp-toast-hoop-callout-pop 980ms cubic-bezier(.12, 1.35, .22, 1) forwards;
}

.bp-toast-hoop-callout-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes bp-toast-hoop-callout-pop {
  0% {
    opacity: 0;
    transform: rotate(-8deg) scale(0.06);
  }
  28% {
    opacity: 1;
    transform: rotate(-2deg) scale(1.14);
  }
  62% {
    opacity: 1;
    transform: rotate(-4deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(0deg) scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bp-toast-hoop,
  .bp-toast-hoop.is-visible,
  .bp-toast-hoop.is-swish .bp-toast-hoop-img {
    transition: none;
    animation: none;
  }

  .bp-toast-confetti,
  .bp-toast-hoop-callout {
    display: none;
  }
}

.bp-toast-confetti {
  position: fixed;
  z-index: 10045;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bp-toast-confetti i {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: bp-toast-confetti-burst 950ms cubic-bezier(.15, .7, .25, 1) forwards;
  box-shadow: 0 0 0 1px color-mix(in srgb, #000 8%, transparent);
}

@keyframes bp-toast-confetti-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 90px))
      rotate(var(--rot))
      scale(0.7);
  }
}

/* Length / step value picker (path editor px/rem + dashboard step sliders). */
.pb-length-picker {
  display: none;
  flex-direction: column;
  gap: var(--space-9);
  padding: var(--space-10a);
  background: var(--bp-card-bg, #fff);
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius, var(--radius-lg));
  box-shadow: var(--bp-shadow);
}

.pb-length-picker.open {
  display: flex;
}

.pb-length-picker-head {
  font-size: var(--bp-text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.pb-length-picker-num {
  width: 100%;
  min-height: 2.25rem;
  font-size: var(--bp-text-lg);
  font-weight: 600;
  text-align: center;
}

.pb-length-picker-num:disabled,
.pb-length-picker-num:read-only {
  opacity: 1;
}

.pb-length-picker-num:disabled {
  opacity: .45;
}

.pb-length-picker-wheel-wrap {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.pb-length-picker-wheel-wrap[hidden] {
  display: none !important;
}

.pb-length-picker-wheel.bp-dtp-time-col-wheel {
  width: 100%;
  max-width: 9.5rem;
  margin-inline: auto;
}

.pb-length-picker-slider-wrap {
  --pb-length-thumb: 1.05rem;
  --pb-length-thumb-half: calc(var(--pb-length-thumb) / 2);
  --pct: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-1) var(--space-1a) var(--space-0);
}

.pb-length-picker-slider-wrap[hidden] {
  display: none !important;
}

.pb-length-picker-slider-track-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 1.55rem;
}

.pb-length-picker-slider-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  width: calc(
    var(--pb-length-thumb-half)
    + (100% - var(--pb-length-thumb)) * var(--pct) / 100
  );
  border-radius: 999px;
  background: var(--c-primary);
  pointer-events: none;
  z-index: 1;
}

.pb-length-picker-slider-track-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-border) 82%, var(--c-text) 18%);
  pointer-events: none;
}

.pb-length-picker-slider {
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.55rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.pb-length-picker-slider:focus {
  outline: none;
}

.pb-length-picker-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border: none;
}

.pb-length-picker-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--pb-length-thumb);
  height: var(--pb-length-thumb);
  margin-top: calc((6px - var(--pb-length-thumb)) / 2);
  border-radius: 50%;
  border: none;
  background: var(--c-primary);
  box-shadow: none;
  cursor: grab;
}

.pb-length-picker-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.08);
}

.pb-length-picker-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.pb-length-picker-slider::-moz-range-track {
  height: 6px;
  background: transparent;
  border: none;
}

.pb-length-picker-slider::-moz-range-progress {
  height: 6px;
  background: transparent;
  border: none;
}

.pb-length-picker-slider::-moz-range-thumb {
  width: var(--pb-length-thumb);
  height: var(--pb-length-thumb);
  border-radius: 50%;
  border: none;
  background: var(--c-primary);
  box-shadow: none;
  cursor: grab;
}

.pb-length-picker-slider:active::-moz-range-thumb {
  cursor: grabbing;
}

.pb-length-picker-slider-ticks {
  position: relative;
  height: 1.15rem;
  margin: 0 var(--pb-length-thumb-half);
}

.pb-length-picker-slider-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1b);
  pointer-events: none;
}

.pb-length-picker-slider-tick i {
  width: 1px;
  height: .28rem;
  background: color-mix(in srgb, var(--c-border) 70%, var(--c-text) 30%);
}

.pb-length-picker-slider-tick b {
  font-size: var(--bp-text-xs);
  font-weight: 600;
  line-height: 1;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.pb-length-picker-units {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.pb-length-unit {
  min-height: 1.85rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface, #fff);
  color: var(--c-text);
  font-size: var(--bp-text-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.pb-length-unit:hover {
  border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
  background: color-mix(in srgb, var(--c-primary) 6%, #fff);
}

.pb-length-unit.is-active {
  border-color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 14%, #fff);
  color: var(--c-primary);
}

/* Toast right-click menu uses the shared context-menu ceiling. */
.bp-toast-context-menu.bp-menu--floating.is-open {
  z-index: var(--bp-z-context-menu, 70000) !important;
  min-width: 7.5rem;
}

/* Honor reduced-motion for all sleek micro-interactions */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.open,
  .modal-overlay.open > .modal-overlay.open > form > .modal-overlay.is-closing,
  .modal-overlay.is-closing > .modal-overlay.is-closing > form > .modal,
  .bp-menu.is-open,
  .bp-dropdown:not([hidden]),
  .bp-dropdown.is-open,
  .acct-meatball-menu.is-open,
  .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 {
    animation: none;
  }

  .toast {
    will-change: auto;
    transition: opacity var(--dur-slow, .28s) var(--ease, cubic-bezier(.4, 0, .2, 1));
  }
}

.toast.success {
  --bp-jelly-accent: var(--c-success);
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-success) 15%, var(--c-surface, #eff1f5));
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: var(--c-success);
}

.toast.info {
  --bp-jelly-accent: var(--c-info, var(--c-primary-color, var(--c-primary)));
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-info, var(--c-primary-color, var(--c-primary))) 15%, var(--c-surface, #eff1f5));
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: var(--c-info, var(--c-primary-color, var(--c-primary)));
}

.toast.error {
  --bp-jelly-accent: var(--c-danger);
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-danger) 15%, var(--c-surface, #eff1f5));
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: var(--c-danger);
}

.toast.warning {
  --bp-jelly-accent: var(--c-warning);
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-warning) 15%, var(--c-surface, #eff1f5));
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: var(--c-warning);
}

[data-theme="dark"] .toast.success {
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-success) 25%, var(--c-bg));
}

[data-theme="dark"] .toast.info {
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-info, var(--c-primary)) 25%, var(--c-bg));
}

[data-theme="dark"] .toast.error {
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-danger) 25%, var(--c-bg));
}

[data-theme="dark"] .toast.warning {
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-warning) 25%, var(--c-bg));
}

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

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

.bp-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.bp-toolbar--end,
.page-header .bp-toolbar {
  margin-left: auto;
  justify-content: flex-end;
}

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

.bp-search-wrap > :is(.bp-title-input, .title-input) {
  width: 100%;
}

.bp-search-icon {
  width: .95rem;
  height: .95rem;
  color: var(--c-text-muted);
  pointer-events: none;
  flex: 0 0 auto;
}

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

/* Always: search control, then count (never count before the bar). */
.contacts-search-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-11);
  flex: 0 0 auto;
  min-width: max-content;
  overflow: visible;
}

.contacts-search-group > .bp-search-wrap {
  order: 1;
  flex-shrink: 0;
}

.contacts-search-group > .bp-filter-count {
  order: 2;
  flex: 0 0 auto;
  min-width: max-content;
}

.bp-toolbar-control {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: var(--bp-text-sm);
  --bp-field-line-height: 1.25;
}

.bp-toolbar :is(.form-input)::placeholder,
.bp-toolbar-control:is(input, textarea)::placeholder {
  font-size: var(--bp-field-font-size);
  line-height: var(--bp-field-line-height, 1.25);
  color: var(--c-text-muted);
  opacity: 1;
}

/* Title/search underline fields keep their own type scale in toolbars. */
.bp-toolbar :is(.bp-title-input, .title-input)::placeholder,
.bp-card-toolbar :is(.bp-title-input, .title-input)::placeholder,
.media-library-card-toolbar :is(.bp-title-input, .title-input)::placeholder {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  opacity: .75;
}

/* Toolbar custom selects - shrink-wrapped (default .form-select-wrap is width:100%) */
.bp-toolbar :is(.form-select-wrap, .form-select, select.form-select, .bp-dtp-wrap),
.bp-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),
.bp-toolbar :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) {
  width: auto;
  min-width: 10.5rem;
  flex: 0 0 auto;
}

.bp-toolbar .form-select-wrap,
.bp-toolbar-actions .form-select-wrap,
.contacts-range-wrap .form-select-wrap,
.bp-toolbar .form-select-wrap,
.bp-card-toolbar .form-select-wrap,
.bp-toolbar .bp-dtp-wrap,
.bp-toolbar-actions .bp-dtp-wrap,
.bp-toolbar .bp-dtp-wrap,
.bp-card-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%;
}

.bp-toolbar :is(.form-input, .form-select-trigger, .bp-dtp-trigger):not(.bp-title-input):not(.title-input),
.bp-toolbar-actions :is(.form-input, .form-select-trigger, .bp-dtp-trigger):not(.bp-title-input):not(.title-input),
.bp-toolbar :is(.form-select-trigger, .bp-dtp-trigger),
.bp-card-toolbar :is(.form-input, .form-select-trigger, .bp-toolbar-control, .bp-dtp-trigger):not(.bp-title-input):not(.title-input) {
  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);
  line-height: var(--bp-field-line-height, 1.25);
  box-sizing: border-box;
}

.bp-toolbar {
  gap: var(--space-10);
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.bp-toolbar .contacts-search-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-11);
  margin-right: auto;
  flex: 0 0 auto;
  min-width: max-content;
  overflow: visible;
}

.bp-toolbar .bp-search-wrap {
  flex: 0 0 15.5rem;
  width: 15.5rem;
  max-width: 15.5rem;
  order: 1;
}

.bp-toolbar .contacts-search-group > .bp-filter-count {
  order: 2;
}

.bp-toolbar .contacts-search-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-11);
  flex: 0 1 auto;
  min-width: 0;
}

.bp-toolbar .contacts-search-group > .bp-search-wrap {
  order: 1;
}

.bp-toolbar .contacts-search-group > .bp-filter-count {
  order: 2;
}

.bp-toolbar .contacts-search-group > .bp-title-input,
.bp-toolbar .contacts-search-group > .form-input[type="search"] {
  flex: 0 0 15.5rem;
  width: 15.5rem;
  max-width: 15.5rem;
  order: 1;
}

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

.bp-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: nowrap;
  flex: 0 0 auto;
  overflow: visible;
}

.contacts-export-wrap {
  overflow: visible;
}

.contacts-custom-range,
.analytics-custom-range {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.contacts-filters-modal-body,
.contacts-filters-sidebar {
  gap: var(--space-13);
}

.contacts-filters-modal-body .form-group,
.contacts-filters-sidebar .hub-sidebar__section {
  width: 100%;
  min-width: 0;
}

/* Modal / sidebar use stacked form fields - override toolbar shrink-wrap sizing. */
.contacts-filters-modal-body .contacts-badge-filter-group,
.contacts-filters-sidebar .contacts-badge-filter-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-8);
  width: 100%;
  max-width: none;
  flex: none;
  min-width: 0;
}

.contacts-filters-modal-body .contacts-badge-filter-pills,
.contacts-filters-sidebar .contacts-badge-filter-pills {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: visible;
}

.contacts-filters-modal-body :is(
  .contacts-badge-filter-wrap,
  .contacts-source-filter-wrap,
  .contacts-tag-filter-wrap,
  .tag-combobox-wrap,
  .form-select-wrap,
  .form-select,
  select.form-select,
  .form-input,
  .bp-dtp-wrap
),
.contacts-filters-sidebar :is(
  .contacts-badge-filter-wrap,
  .contacts-source-filter-wrap,
  .contacts-tag-filter-wrap,
  .tag-combobox-wrap,
  .form-select-wrap,
  .form-select,
  select.form-select,
  .form-input,
  .bp-dtp-wrap
) {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: none;
}

.contacts-filters-modal-body .form-select-wrap,
.contacts-filters-modal-body .bp-dtp-wrap,
.contacts-filters-sidebar .form-select-wrap,
.contacts-filters-sidebar .bp-dtp-wrap {
  display: flex;
}

.contacts-filters-modal-body :is(.form-select-trigger, .bp-dtp-trigger),
.contacts-filters-sidebar :is(.form-select-trigger, .bp-dtp-trigger) {
  width: 100%;
  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);
}

.contacts-filters-modal-body .contacts-custom-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-13);
  width: 100%;
  align-items: start;
}

.contacts-filters-sidebar .contacts-custom-range {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  width: 100%;
  margin-top: var(--space-10);
  align-items: stretch;
}

.contacts-filters-modal-body .contacts-custom-range.hidden,
.contacts-filters-sidebar .contacts-custom-range.hidden {
  display: none;
}

.contacts-filters-sidebar .hub-sidebar__actions {
  margin-top: var(--space-3);
}

.contacts-filters-sidebar .hub-sidebar__actions .btn {
  width: 100%;
}

#analytics-custom-range,
.analytics-custom-range,
.bp-toolbar {
  align-items: center;
}

.bp-toolbar select:not(.bp-url-field):not([multiple]),
.bp-card-toolbar select:not(.bp-url-field):not([multiple]) {
  padding-right: 2.35rem;
}

.bp-toolbar .form-input[type=date],
.contacts-custom-range .form-input[type=date],
.analytics-custom-range .form-input[type=date] {
  padding-right: var(--space-10);
  min-width: 9.5rem;
  color-scheme: light;
}

[data-theme=dark] .bp-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;
}

.bp-toolbar .btn-sm,
.bp-toolbar :is(.btn-sm, .contacts-actions-btn) {
  height: var(--btn-min-height);
  min-height: var(--btn-min-height);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--btn-font-size);
}

.bp-toolbar .contacts-actions-btn,
.bp-toolbar #contacts-actions-btn {
  width: var(--btn-min-height);
  min-width: var(--btn-min-height);
  padding: 0;
}

.bp-split-page-header .form-input,
.bp-split-page-header .form-select-wrap,
.bp-split-page-header select:not(.bp-url-field):not([multiple]),
.bp-split-page-header .bp-toolbar-control {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: var(--bp-text-sm);
}

.bp-split-page-header .btn-sm {
  height: var(--btn-min-height);
  min-height: var(--btn-min-height);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--btn-font-size);
}

.admin-clients-range-group {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  flex: 0 0 auto;
  min-width: 0;
}

.admin-clients-header .admin-clients-range-group :is(.form-input, .form-select-wrap, .form-select-trigger, select:not(.bp-url-field):not([multiple]), .bp-toolbar-control) {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: var(--bp-text-sm);
  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 .btn-sm {
  height: var(--btn-min-height);
  min-height: var(--btn-min-height);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--btn-font-size);
}

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

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

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

.bp-card-toolbar {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: var(--bp-text-sm);
  --bp-field-line-height: 1.25;
}

.bp-card-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  flex: 0 0 auto;
  min-width: 0;
}

.bp-card-toolbar .btn-sm {
  height: var(--btn-min-height);
  min-height: var(--btn-min-height);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--btn-font-size);
}

.bp-card-toolbar :is(.form-input, .form-select-wrap, .form-select-trigger, select.form-select, .bp-toolbar-control) {
  --bp-field-height: 2.3rem;
  --bp-field-font-size: var(--bp-text-sm);
}

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

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

/*
 * Calls log uses shared list-folder-browser tools plate (folder-nav.css).
 * Keep only Calls-specific layout below (wallet grid, etc.).
 */
.analytics-retention-chart-mount[data-usage-chart-mount] {
  min-height: 260px;
}

#vai-wallet-card .card-footer.modal-footer {
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-11);
  margin-top: 0;
}

.vai-wallet-footer__status {
  margin-right: auto;
  font-size: var(--bp-text-sm);
  color: var(--c-text-muted);
  line-height: 1.3;
  min-width: 0;
}

.vai-wallet-footer__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  flex: 0 0 auto;
}

/* Agent editor: immersive path-editor shell (html.pb-editor-active) */
.vai-agent-editor.pb-editor-view {
  /* pb-editor-view + html.pb-editor-active handle fill / overflow */
  gap: 0;
}

/* Canvas + Agent settings wing (no left drawer). Full-bleed canvas; right drawer overlays. */
.vai-agent-editor .pb-editor-body.pb-page-builder-mode {
  flex: 1;
  min-height: 0;
  --pb-col-left: 0px;
  --pb-col-palette: 360px;
  grid-template-columns: minmax(0, 1fr);
}

.vai-agent-editor .pb-editor-body.pb-page-builder-mode > .pb-page-canvas-wrap {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: auto;
  height: auto;
  align-self: stretch;
  justify-self: stretch;
  overflow: hidden;
}

.vai-agent-editor .pb-editor-body.pb-page-builder-mode > .pb-right-drawer {
  position: absolute;
  top: var(--pb-drawer-end-inset, 8%);
  bottom: var(--pb-drawer-end-inset, 8%);
  right: 0;
  width: var(--pb-col-palette);
  max-width: 100%;
  height: auto;
  z-index: 30;
}

/* Same live-canvas shell as path / email / automation editors. */
#vai-agent-canvas-shell.pb-live-canvas-shell {
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* Flow-style agent seat: jelly header + orb body (future node graph host). */
.vai-agent-artboard {
  --vai-agent-accent: var(--c-primary-color, var(--c-primary));
  --bp-ring-color: var(--vai-agent-accent);
  --bp-ring-color-soft: color-mix(in srgb, var(--vai-agent-accent) 55%, transparent);
  --pb-logic-port-out: var(--c-accent, #06b6d4);
  --pb-logic-port-in: var(--c-primary);
  position: absolute;
  z-index: 1;
  width: 220px;
  height: auto;
  min-height: 360px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 0.4rem);
  padding: var(--bp-card-inset, var(--space-8, 0.5rem));
  padding-bottom: calc(var(--bp-card-inset, var(--space-8, 0.5rem)) + 2px);
  background: var(--bp-card-bg, var(--c-bg, #fff));
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius, var(--radius-lg, 12px));
  box-shadow: var(--bp-shadow);
  outline: var(--bp-ring-idle);
  outline-offset: var(--bp-ring-offset, 2px);
  user-select: none;
  pointer-events: auto;
  cursor: grab;
  isolation: isolate;
  overflow: visible;
  transition:
    border-color var(--dur, .15s) var(--ease, ease),
    box-shadow var(--dur, .15s) var(--ease, ease),
    background var(--dur, .15s) var(--ease, ease);
}

.vai-agent-artboard.is-dragging {
  cursor: grabbing;
  z-index: 7;
}

.vai-agent-artboard:hover:not(.is-selected),
.vai-agent-artboard.is-chrome-hover:not(.is-selected) {
  z-index: 2;
  box-shadow: var(--bp-shadow-hover);
  outline-color: color-mix(in srgb, var(--vai-agent-accent) 55%, transparent);
}

.vai-agent-artboard.is-selected {
  z-index: 2;
  cursor: grab;
  outline: var(--bp-ring-active);
}

.vai-agent-artboard:focus-visible {
  outline: var(--bp-ring-active);
}

.vai-agent-artboard__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--space-7, 0.55rem) var(--space-5, 0.4rem) var(--space-7, 0.55rem) var(--space-9, 0.65rem);
  border: 1px solid transparent;
  border-radius: var(--radius, 8px);
  background: color-mix(in srgb, var(--vai-agent-accent) 16%, var(--btn-chrome-bg, var(--bp-card-section-bg, var(--c-surface))));
  font-weight: 600;
  font-size: var(--bp-text-md);
  line-height: 1.35;
  color: var(--c-text);
}

.vai-agent-artboard.is-selected .vai-agent-artboard__header {
  background: color-mix(in srgb, var(--vai-agent-accent) 22%, var(--btn-chrome-bg, var(--bp-card-section-bg, var(--c-surface))));
}

.vai-agent-artboard__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bp-text-md);
  font-weight: 600;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--vai-agent-accent) 55%, var(--c-text));
}

.vai-agent-artboard__body {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11.5rem;
  padding: var(--space-6, 0.45rem) var(--space-4, 0.3rem) var(--space-5, 0.4rem);
}

.vai-agent-artboard__inputs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 0.4rem);
  padding: 0 var(--space-4, 0.3rem) var(--space-4, 0.3rem);
  margin-top: auto;
}

.vai-agent-socket {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-6, 0.45rem);
  min-height: 1.75rem;
  padding: var(--space-4, 0.3rem) var(--space-5, 0.4rem);
  border-radius: var(--radius, 8px);
  background: color-mix(in srgb, var(--vai-agent-accent) 8%, var(--bp-card-section-bg, var(--c-surface)));
  color: var(--c-text);
  font-size: var(--bp-text-sm);
  font-weight: 600;
  line-height: 1.25;
}

.vai-agent-socket__icon {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  background-color: color-mix(in srgb, var(--vai-agent-accent) 55%, var(--c-text-muted));
}

.vai-agent-socket__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Socket in-ports hang off the left of each labelled row. */
.vai-agent-socket > .pb-logic-port {
  position: absolute;
  left: -14px;
  top: 50%;
  right: auto;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: transparent;
  border-color: transparent;
  border-width: 0;
  z-index: 4;
  pointer-events: auto;
  cursor: crosshair;
}

.vai-agent-socket > .pb-logic-port::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid color-mix(in srgb, var(--pb-logic-port-in, var(--c-primary)) 55%, var(--c-border));
  pointer-events: none;
}

.vai-agent-socket > .pb-logic-port.is-connected::after {
  background: var(--pb-logic-port-in, var(--c-primary));
  border-color: #fff;
  border-width: 1.5px;
}

/* Optional Opening Line: muted grey when disconnected; filled primary when wired. */
.vai-agent-artboard .pb-logic-port--optional:not(.is-connected)::after,
.pb-logic-port.pb-logic-port--optional:not(.is-connected)::after {
  background: color-mix(in srgb, var(--c-text-muted) 28%, var(--c-surface));
  border-color: color-mix(in srgb, var(--c-text-muted) 45%, var(--c-border));
}

.vai-agent-artboard .pb-logic-port--optional.is-connected::after,
.pb-logic-port.pb-logic-port--optional.is-connected::after {
  background: var(--pb-logic-port-in, var(--c-primary));
  border-color: #fff;
  border-width: 1.5px;
}

.vai-agent-orb {
  --vai-orb-size: 11.5rem;
  position: relative;
  width: var(--vai-orb-size);
  height: var(--vai-orb-size);
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--c-text) 18%, transparent));
}

[data-theme="dark"] .vai-agent-orb {
  filter: drop-shadow(0 8px 28px color-mix(in srgb, #000 55%, transparent));
}

.vai-agent-orb__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Fills come from the inline SVG (unique gradient ids per agent). Do not
   override with CSS url(#…) — presentation CSS beats SVG attributes and
   pointing at missing ids makes the blobby invisible. */
.vai-agent-orb__blob {
  transform-box: fill-box;
  transform-origin: center;
  will-change: cx, cy, r;
}

.vai-agent-orb__blob--d {
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  .vai-agent-orb__blob {
    will-change: auto;
  }
}

.vai-agent-editor .pb-right-drawer-body {
  display: flex;
  flex-direction: column;
}

/* Match path inspector: first fold in a pane has no top rule. */
#vai-agent-block-inspector .pb-layout-settings-section:first-child > .pb-unity-fold {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.vai-agent-voice-sample {
  margin: 0 0 var(--space-8);
  width: 100%;
}

.vai-agent-voice-sample[hidden] {
  display: none !important;
}

.vai-agent-voice-sample__player {
  width: 100%;
}

/* Inspector chrome: light panel (not the media-library dark stage).
 * mount() puts .bp-media--audio on the host itself, so match :is() not only descendants. */
.vai-agent-voice-sample__player.bp-media--audio,
.vai-agent-voice-sample__player .bp-media--audio {
  width: 100%;
  background: var(--bp-card-bg, var(--c-surface, #fff));
  box-shadow: var(--bp-shadow);
  border: 1px solid transparent;
  padding: var(--space-10) var(--space-11);
  border-radius: var(--radius);
}

.vai-agent-voice-sample__player.bp-media--audio .bp-media-bar,
.vai-agent-voice-sample__player .bp-media--audio .bp-media-bar {
  color: var(--c-text-muted);
}

.vai-agent-voice-sample__player.bp-media--audio .bp-media-time,
.vai-agent-voice-sample__player .bp-media--audio .bp-media-time {
  color: var(--c-text-muted);
}

.vai-agent-voice-sample__player.bp-media--audio .bp-media-wave .bp-media-seek-thumb,
.vai-agent-voice-sample__player .bp-media--audio .bp-media-wave .bp-media-seek-thumb {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bp-card-bg, #fff) 70%, var(--c-text) 30%);
}

.vai-agent-voice-sample__player.bp-media--audio .bp-media-seek-track:not(.bp-media-wave),
.vai-agent-voice-sample__player .bp-media--audio .bp-media-seek-track:not(.bp-media-wave) {
  background: transparent;
}

[data-theme="dark"] .vai-agent-voice-sample__player.bp-media--audio,
[data-theme="dark"] .vai-agent-voice-sample__player .bp-media--audio {
  background: color-mix(in srgb, var(--c-surface) 88%, #000);
}

.vai-agent-preview-bill-notice {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-7);
  padding: var(--space-9) var(--space-12);
  border-radius: var(--radius);
  font-size: var(--bp-text-sm);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.vai-agent-preview-modal {
  min-height: min(28rem, calc(100vh - 4rem));
}

.vai-agent-preview-modal > .modal-body {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.vai-agent-preview-bill-notice__icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}

.vai-agent-preview-bill-notice__text {
  min-width: 0;
}

#vai-agent-save:disabled {
  opacity: .45;
  cursor: default;
}

/* Free sticky notes on the agent canvas (amber accent; never inherit orb accent). */
.vai-agent-sticky-notes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.vai-agent-sticky-notes > .pb-logic-node--note {
  pointer-events: auto;
  cursor: grab;
  user-select: text;
  overflow: visible;
  /* Keep Flow sticky warning accent unless note sets --pb-logic-accent inline. */
  --pb-logic-accent: var(--c-warning, #F59E0B);
  --bp-ring-color: var(--pb-logic-accent);
  --bp-ring-color-soft: color-mix(in srgb, var(--pb-logic-accent) 55%, transparent);
}

.vai-agent-sticky-notes > .pb-logic-node--note.is-dragging {
  z-index: 7;
  cursor: grabbing;
  opacity: .96;
}

.vai-agent-sticky-notes > .pb-logic-node--note.is-resizing {
  z-index: 7;
  cursor: nwse-resize;
}

.vai-agent-sticky-notes > .pb-logic-node--note .pb-logic-node-header {
  cursor: grab;
}

.vai-agent-sticky-notes > .pb-logic-node--note.is-dragging .pb-logic-node-header {
  cursor: grabbing;
}

.vai-agent-sticky-notes > .pb-logic-node--note .pb-logic-node-body {
  --pb-sticky-fade: color-mix(in srgb, var(--pb-logic-accent) 14%, var(--bp-card-bg, var(--c-bg)));
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 0.4rem);
  overflow: hidden;
}

.vai-agent-sticky-notes > .pb-logic-node--note .pb-logic-node-body.is-fade-top::before,
.vai-agent-sticky-notes > .pb-logic-node--note .pb-logic-node-body.is-fade-bottom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.1rem;
  pointer-events: none;
  z-index: 2;
}

.vai-agent-sticky-notes > .pb-logic-node--note .pb-logic-node-body.is-fade-top::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--pb-sticky-fade) 0%,
    color-mix(in srgb, var(--pb-sticky-fade) 55%, transparent) 40%,
    transparent 100%
  );
}

.vai-agent-sticky-notes > .pb-logic-node--note .pb-logic-node-body.is-fade-bottom::after {
  bottom: 1.35rem;
  background: linear-gradient(
    to top,
    var(--pb-sticky-fade) 0%,
    color-mix(in srgb, var(--pb-sticky-fade) 55%, transparent) 40%,
    transparent 100%
  );
}

.vai-agent-sticky-notes .bp-notes-rte-host,
.vai-agent-sticky-notes .bp-rte,
.vai-agent-sticky-notes .bp-rte--bare,
.pb-voice-agent-mode #pb-logic-nodes .pb-logic-node--note.is-rich .bp-notes-rte-host,
.pb-voice-agent-mode #pb-logic-nodes .pb-logic-node--note.is-rich .bp-rte,
.pb-voice-agent-mode #pb-logic-nodes .pb-logic-node--note.is-rich .bp-rte--bare {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.vai-agent-sticky-notes .bp-rte-body,
.vai-agent-sticky-notes .bp-rte-body:hover,
.vai-agent-sticky-notes .bp-rte:focus-within .bp-rte-body,
.pb-voice-agent-mode #pb-logic-nodes .pb-logic-node--note.is-rich .bp-rte-body,
.pb-voice-agent-mode #pb-logic-nodes .pb-logic-node--note.is-rich .bp-rte-body:hover,
.pb-voice-agent-mode #pb-logic-nodes .pb-logic-node--note.is-rich .bp-rte:focus-within .bp-rte-body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vai-agent-sticky-notes .bp-rte-editor,
.pb-voice-agent-mode #pb-logic-nodes .pb-logic-node--note.is-rich .bp-rte-editor {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none;
  height: auto !important;
  overflow: auto;
  overscroll-behavior: contain;
  font-size: var(--bp-sticky-note-font-size);
  line-height: 1.35;
  font-weight: 400;
  cursor: text;
}

.vai-agent-sticky-notes .bp-rte-editor:empty::before,
.pb-voice-agent-mode #pb-logic-nodes .pb-logic-node--note.is-rich .bp-rte-editor:empty::before {
  color: color-mix(in srgb, var(--pb-logic-accent) 45%, var(--c-text-muted));
}

.vai-agent-sticky-notes .bp-rte-resize,
.pb-voice-agent-mode #pb-logic-nodes .pb-logic-node--note.is-rich .bp-rte-resize {
  display: none !important;
}

.vai-agent-sticky-notes .pb-logic-note-input {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  field-sizing: fixed;
  resize: none;
  overflow: auto;
  overscroll-behavior: contain;
  font-size: var(--bp-sticky-note-font-size);
  line-height: 1.35;
  font-weight: 400;
  cursor: text;
}

.vai-agent-sticky-notes .pb-logic-note-count {
  padding-right: var(--space-13b, 1.25rem);
}

/* Sticky out-port stays interactive for wiring; icon sits just inside the right edge. */
.vai-agent-sticky-notes > .pb-logic-node--note > .pb-logic-port--out {
  pointer-events: auto;
  cursor: crosshair;
}

.vai-agent-sticky-note__port-icon {
  position: absolute;
  right: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.85rem;
  height: 0.85rem;
  z-index: 3;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--pb-logic-accent) 70%, var(--c-text-muted));
}

/* Flow-style SVG wire under the agent + sticky cards. */
.vai-agent-context-edges {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

#vai-agent-wire-overlay.pb-logic-wire-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/*
 * Agent card is not a .pb-logic-node — mirror Flow connected port chips
 * for the tools out-port on the right edge.
 */
.vai-agent-artboard > .pb-logic-port--out {
  top: 50%;
  transform: translateY(-50%);
  left: auto;
  right: -14px;
  width: 28px;
  height: 28px;
  background: transparent;
  border-color: transparent;
  border-width: 0;
  z-index: 4;
  pointer-events: none;
  cursor: default;
}

.vai-agent-artboard > .pb-logic-port--out::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--pb-logic-port-out, var(--c-accent, #06b6d4));
  border: 1.5px solid #fff;
  pointer-events: none;
}

/* Notes/tools sit in .pb-logic-nodes — keep tool ports non-interactive like structural wires. */
#vai-agent-logic-nodes .vai-agent-tool-node > .pb-logic-port {
  pointer-events: none;
  cursor: default;
}

.vai-agent-tool-nodes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.vai-agent-tool-node {
  position: absolute;
  z-index: 3;
  width: 168px;
  min-height: 52px;
  pointer-events: auto;
  cursor: pointer;
  --pb-logic-accent: var(--vai-agent-accent, var(--c-primary));
}

.vai-agent-tool-node .pb-logic-node-header {
  border-bottom: none;
  min-height: 52px;
}

.vai-agent-tool-node.is-selected {
  outline: var(--bp-ring-width, 2px) solid color-mix(in srgb, var(--pb-logic-accent, var(--c-primary)) 55%, transparent);
  outline-offset: 2px;
}

.vai-agent-tool-node:focus-visible {
  outline: var(--bp-ring-width, 2px) solid var(--pb-logic-accent, var(--c-primary));
  outline-offset: 2px;
}

/* Legacy CSS bar (removed from markup). */
.vai-agent-context-edge {
  display: none !important;
}

/* Legacy drawer sticky (removed from Context pane; keep harmless). */
.vai-agent-prompt-note {
  width: 100%;
  min-height: 14rem;
  display: flex;
  flex-direction: column;
}

.vai-agent-prompt-note > .cp-notes-body {
  flex: 1 1 auto;
  min-height: 11rem;
}

.vai-agent-prompt-note .bp-rte-editor {
  min-height: 10rem !important;
}

.vai-wallet-summary {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-9);
}

.vai-wallet-summary__main {
  min-width: 0;
  text-align: left;
}

.vai-wallet-summary__bar {
  min-width: 0;
  width: 100%;
}

.vai-wallet-low-note {
  margin-top: var(--space-7);
  font-size: var(--bp-text-sm);
  color: var(--c-danger, #ef4444);
}

.vai-wallet-meta {
  margin-top: var(--space-11);
  padding-top: var(--space-11);
  border-top: 1px solid var(--c-border);
  font-size: var(--bp-text-sm);
  color: var(--c-text-muted);
}

.vai-wallet-activity {
  margin-top: var(--space-11);
  padding-top: var(--space-11);
  border-top: 1px solid var(--c-border);
}

.vai-wallet-activity__title {
  font-size: var(--bp-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-muted);
  margin-bottom: var(--space-7);
}

.vai-log-row__label {
  color: var(--c-text-muted);
}

.bp-split__pane-sticky {
  position: sticky;
  top: calc(var(--topbar-stack-offset) + var(--space-13));
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  width: 100%;
  box-sizing: border-box;
}

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

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

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

.vai-modal-section {
  margin-bottom: var(--space-15);
}

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

/* Call details: transcript + recording under the stage (not in meta) */
.vai-call-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  min-height: 0;
  height: 100%;
  width: 100%;
}

.vai-call-transcript {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-subtle, var(--c-bg));
  overflow: hidden;
  box-sizing: border-box;
}

.vai-call-transcript__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: .75rem;
  display: flex;
  flex-direction: column;
}

.vai-call-detail__topics {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.vai-call-detail__summary {
  margin: 0;
  font-size: var(--bp-text-md);
  line-height: 1.55;
}

.vai-call-detail__player {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Full-width under transcript: avoid the crushed sidebar seek rail. */
.media-detail-modal.is-voice-call .vai-call-detail__player.bp-media--audio,
.media-detail-modal.is-voice-call .vai-call-detail__player .bp-media--audio {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--space-10) var(--space-11);
  border-radius: var(--radius);
  box-shadow: var(--bp-shadow);
  border: 1px solid transparent;
  background: var(--bp-card-bg, var(--c-surface, #fff));
}

.media-detail-modal.is-voice-call .vai-call-detail__player .bp-media-bar {
  min-width: 0;
  width: 100%;
  gap: var(--space-9);
}

.media-detail-modal.is-voice-call .vai-call-detail__player .bp-media-seek-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

/* Hit area only — no fat gray plate behind the thin rail/fill. */
.media-detail-modal.is-voice-call .vai-call-detail__player .bp-media-seek-track:not(.bp-media-wave) {
  min-height: 0;
  background: transparent;
  align-items: center;
}

.media-detail-modal.is-voice-call .vai-call-detail__player .bp-media-seek-rail {
  height: .3rem;
}

.media-detail-modal.is-voice-call .vai-call-detail__player .bp-media-wave.bp-media-seek-track {
  height: 2.5rem;
}

[data-theme="dark"] .media-detail-modal.is-voice-call .vai-call-detail__player.bp-media--audio,
[data-theme="dark"] .media-detail-modal.is-voice-call .vai-call-detail__player .bp-media--audio {
  background: color-mix(in srgb, var(--c-surface) 88%, #000);
}

.vai-call-detail__turns {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 100%;
}

.vai-call-detail__turn {
  display: flex;
  flex-direction: column;
  max-width: 88%;
}

.vai-call-detail__turn.is-agent {
  align-self: flex-end;
}

.vai-call-detail__turn.is-caller {
  align-self: flex-start;
}

.vai-call-detail__turn-label {
  font-size: var(--bp-text-xs);
  font-weight: 600;
  color: var(--c-text-muted);
  margin-bottom: .25rem;
}

.vai-call-detail__turn.is-agent .vai-call-detail__turn-label {
  text-align: right;
}

.vai-call-detail__turn.is-caller .vai-call-detail__turn-label {
  text-align: left;
}

/* SMS / chat bubbles — shared with Messages thread (.bp-bubble-*). Keep in sync. */
.vai-call-bubble {
  padding: .55rem .85rem;
  border-radius: 1.05rem;
  font-size: var(--bp-text-md);
  line-height: 1.5;
  word-break: break-word;
  box-shadow: var(--bp-shadow);
  border: 1px solid transparent;
}

.vai-call-bubble--agent {
  background: var(--c-primary-color, var(--c-primary));
  color: #fff;
  border-bottom-right-radius: .3rem;
  align-self: flex-end;
}

.vai-call-bubble--caller {
  background: var(--bp-card-section-bg, var(--c-surface));
  color: var(--c-text);
  border-color: color-mix(in srgb, var(--c-border) 55%, transparent);
  border-bottom-left-radius: .3rem;
  align-self: flex-start;
}

[data-theme="dark"] .vai-call-bubble--caller {
  background: color-mix(in srgb, var(--c-surface) 88%, var(--c-text) 12%);
}

.vai-call-detail__ended {
  text-align: center;
  margin-top: .75rem;
  font-size: var(--bp-text-sm);
  color: var(--c-text-muted);
  letter-spacing: .03em;
}

.vai-call-detail__empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem .5rem;
  text-align: center;
  font-size: var(--bp-text-md);
  min-height: 100%;
  box-sizing: border-box;
}

.vai-dial-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .15rem;
  padding: .7rem .85rem;
  border: 1px solid var(--c-border);
  border-radius: var(--bp-card-section-radius, 10px);
  background: var(--c-bg-subtle, var(--c-bg));
}

.vai-voice-speed-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.vai-voice-speed-trigger.is-open {
  box-shadow: var(--bp-field-ring);
  border-color: var(--c-primary-color, var(--c-primary));
}

.vai-voice-speed-trigger .bp-step-slider-trigger-label {
  flex: 1;
  min-width: 0;
}

.vai-dial-selected__body {
  min-width: 0;
  flex: 1;
}

.vai-dial-selected__name {
  font-size: var(--bp-text-lg);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vai-dial-selected__phone {
  margin-top: .15rem;
  font-size: var(--bp-text-md);
  color: var(--c-text-muted);
  line-height: 1.3;
}

#vai-dial-modal .cal-form-contact-wrap {
  position: relative;
}

#vai-dial-modal .bp-search-wrap {
  width: 100%;
}

/* Shared media player styles: /static/css/bp-media-player.css */

.vai-bal-bar-wrap {
  margin: var(--space-5) 0 var(--space-3);
}

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

.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: var(--bp-text-xs);
  color: var(--c-text-muted);
  white-space: nowrap;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: 14px;
}

.vai-bal-bar-axis {
  font-size: var(--bp-text-xs);
  color: var(--c-text-muted);
  margin-top: var(--space-3);
  padding: 0 var(--space-1a);
}

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

.vai-log-row {
  align-items: baseline;
  gap: var(--space-8);
  font-size: var(--bp-text-sm);
  padding: var(--space-2) 0;
}

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

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

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

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

.contacts-table--vai-calls td.contacts-table-actions-col,
.contacts-table--vai-calls th.contacts-table-actions-col {
  width: 3.25rem;
  min-width: 3.25rem;
  white-space: nowrap;
  text-align: right;
  overflow: visible;
  text-overflow: clip;
}

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

.vai-call-agent-col {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table--vai-calls th.vai-call-outcome-col,
.contacts-table--vai-calls td.vai-call-outcome-col {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.vai-call-row .browser-list-name-link {
  font-weight: 500;
}

@media (max-width:900px) {
  .contacts-table--vai-calls td.vai-call-duration-col,
  .contacts-table--vai-calls th.vai-call-duration-col {
    display: none;
  }
}

@media (max-width: 768px) {
  .bp-toolbar .contacts-search-group {
    flex: 0 1 auto;
    margin-right: 0;
  }

  .bp-toolbar .bp-search-wrap {
    flex: 0 1 200px;
    max-width: 240px;
  }

  .bp-toolbar-actions {
    width: auto;
    overflow-x: visible;
    flex-wrap: nowrap;
  }

  .contacts-badge-filter-group {
    max-width: min(100%, 20rem);
  }

  #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: 0 0 auto;
    max-width: none;
  }

  .bp-toolbar-actions .form-select-wrap--toolbar,
  .bp-toolbar .form-select-wrap--toolbar {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
  }
}

/* ── 22. Panel head (flush card sub-header) ──────────────────────────────── */

.bp-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-shrink: 0;
  margin: var(--bp-card-inset);
  padding: var(--space-8b) var(--space-12);
}

.bp-panel-head-label {
  font-size: var(--bp-text-sm);
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.bp-panel-head-search {
  flex: 1 1 auto;
  min-width: 160px;
  max-width: 280px;
  margin-left: auto;
}

.bp-panel-head-search-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-11);
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  max-width: min(100%, 24rem);
}

.bp-panel-head-search-group .bp-panel-head-search {
  margin-left: 0;
  flex: 1 1 auto;
  min-width: 11rem;
  max-width: 15.5rem;
  width: 15.5rem;
  order: 1;
}

.bp-panel-head-search-group .bp-filter-count {
  flex: 0 0 auto;
  order: 2;
}

.bp-panel-head :is(.bp-title-input, .title-input)::placeholder {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  opacity: .75;
  color: var(--c-text-muted);
}

/* ── 23. Split view (contact profile page chrome → bp-contact-profile.css) ─ */
/*
 * Generic resizable column layouts - inbox / thread / notes, contact profile, etc.
 *
 * 2-pane (no gutters):       .bp-split--2col
 * 2-pane (+ resizer):        .bp-split--2col-resizable  - or legacy .bp-split--2col-resizable / .cp-cards-grid
 * 3-pane (+ 2 resizers):     .bp-split--3col  - or legacy .bp-split--3col
 *
 * 2-col markup: pane | .bp-resizer | pane  (3 grid tracks)
 * 3-col markup: pane | .bp-resizer | pane | .bp-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-right  (legacy aliases)
 *   --vai-col-sidebar, --cal-col-upcoming  (2-col sidebar width after drag)
 */

.bp-split--3col,
.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 {
  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);
}

.bp-split--2col-resizable {
  --bp-split-col-2: var(--vai-col-sidebar, minmax(240px, 320px));
}

.bp-split--2col-resizable > .bp-split__pane,
.bp-split--2col-resizable > .bp-split__pane,
.bp-split--2col-resizable > .bp-split__pane {
  min-width: 0;
}

@media (min-width: 900px) {
  .bp-split--2col-resizable {
    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));
  }

  .bp-split--main-only {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hub-filters-btn {
  position: relative;
  overflow: visible;
}

.hub-filters-btn .hub-filters-count {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 var(--space-2a);
  border-radius: 999px;
  border: 1.5px solid var(--bp-card-bg, var(--c-surface));
  background: var(--c-primary);
  color: #fff;
  font-size: var(--bp-text-xs);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  box-sizing: border-box;
  /* Center the bubble on the button's top-right corner. */
  transform: translate(40%, -40%);
}

.hub-filters-btn .hub-filters-count[hidden] {
  display: none !important;
}

.hub-filters-btn.is-active {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-color, var(--c-primary)) 12%, transparent);
}

@media (max-width: 899px) {
  .bp-split--2col-resizable > .bp-resizer,
  .bp-split--2col-resizable > .bp-resizer,
  .bp-split--2col-resizable > .bp-resizer,
  .bp-split--2col-resizable > .bp-resizer {
    display: none;
  }
}

/* Three panes + two drag gutters (resizer columns use --bp-split-gutter width) */
.bp-split--3col {
  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));
}

.bp-split--3col {
  --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));
}

/* → bp-contact-profile.css (profile-grid-template) */
.bp-split__pane,
.bp-split--3col > .card,
.bp-split--3col > aside,
.cp-cards-grid > .card,
.cp-cards-grid > .cp-col,
.bp-split--3col > .card,
.bp-split--3col > aside,
.bp-split--3col > .card,
.bp-split--3col > 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,
.cp-cards-grid > .cp-col > .card > .card-header,
.bp-split--3col > .card > .card-header,
.bp-split--3col > .card > .card-header {
  flex-shrink: 0;
}

.bp-split--3col > .card > .card-body,
.cp-cards-grid > .card > .card-body,
.cp-cards-grid > .cp-col > .card > .card-body,
.bp-split--3col > .card > .card-body,
.bp-split--3col > .card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* → bp-contact-profile.css (profile-cols) */
.bp-split__scroll {
  overflow-y: auto;
  min-height: 0;
}

/* Full-height page shell - split grid fills remaining viewport below header chrome */
.bp-split-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 > .bp-split--3col,
.bp-split-page > .bp-split--3col,
.bp-split-page > .bp-split--3col,
.bp-split-page > .bp-split--3col {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* → bp-contact-profile.css (profile-page-shell) */
/* Shared side drawer (Data Helper + contact profile Activity) */
.bp-side-drawer--profile,
.bp-side-drawer {
  --bp-side-drawer-inset: var(--bp-card-inset, .5rem);
  --bp-side-drawer-handle-w: 2.55rem;
  --bp-side-drawer-w: 22rem;
  --bp-side-drawer-content-w: 16rem;
  --cp-history-drawer-inset: var(--bp-side-drawer-inset);
  --cp-history-drawer-handle-w: var(--bp-side-drawer-handle-w);
  --cp-history-drawer-w: var(--bp-side-drawer-w);
  --cp-history-drawer-content-w: var(--bp-side-drawer-content-w);
  position: fixed;
  z-index: 80;
  width: var(--bp-side-drawer-w);
  max-width: calc(100vw - (2 * var(--bp-side-drawer-inset)));
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--bp-side-drawer-inset);
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--bp-side-drawer-inset);
  margin: 0;
  background: var(--bp-card-bg, var(--c-surface));
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius, var(--radius-lg, 12px));
  color: var(--c-text);
  font-size: var(--bp-text-sm);
  line-height: 1.35;
  /* Transform motion is WAAPI float-FLIP only (same as path-editor wings). */
}

/* Data Helper / non-profile drawers always float over the page. */
.bp-side-drawer:not(.bp-side-drawer--profile) {
  /* Soft lift over the page (site --bp-shadow is often none). */
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--c-text) 6%, transparent),
    0 4px 14px -2px color-mix(in srgb, var(--c-text) 12%, transparent);
}

/* Profile wing is flat when docked; lift only while overlapping (see contact-profile.css). */
.bp-side-drawer--profile {
  box-shadow: none;
}

.bp-side-drawer--profile,
.bp-side-drawer {
  top: calc(var(--topbar-stack-offset) + var(--bp-side-drawer-inset));
  right: var(--sidebar-inset, var(--bp-side-drawer-inset));
  bottom: var(--sidebar-inset, var(--bp-side-drawer-inset));
}

.bp-side-drawer.is-resizing,
.bp-side-drawer.cp-drawer-no-transition,
.bp-side-drawer.is-shell-animating {
  transition: none;
}

.bp-side-drawer.is-resizing {
  user-select: none;
}

.bp-side-drawer.is-shell-animating {
  /* Do not set `contain` here — it can make position:fixed use a local CB and
     break float-FLIP (path-editor wings only contain the canvas sibling). */
  pointer-events: none;
}

.bp-side-drawer.pb-drawer-shell-floating {
  /* Match path-editor wing float: escape host overflow while the shell slides. */
  overflow: visible;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--c-text) 6%, transparent),
    0 4px 14px -2px color-mix(in srgb, var(--c-text) 12%, transparent);
  pointer-events: none;
}

.bp-side-drawer.is-collapsed,
.bp-side-drawer.is-collapsed {
  gap: 0;
  justify-content: flex-start;
}

.bp-side-drawer-handle {
  position: relative;
  z-index: 2;
  flex: 0 0 var(--bp-side-drawer-handle-w);
  width: var(--bp-side-drawer-handle-w);
  min-width: var(--bp-side-drawer-handle-w);
  max-width: var(--bp-side-drawer-handle-w);
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-10) var(--space-2);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius, 8px);
  background: var(--btn-chrome-bg, var(--bp-card-header-bg, var(--bp-card-section-bg)));
  box-shadow: var(--bp-shadow);
  color: inherit;
  font: inherit;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-sizing: border-box;
  opacity: 1;
  transition: background var(--dur, .15s) var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.bp-side-drawer-handle:hover {
  background: var(--btn-chrome-bg-hover, var(--btn-chrome-bg, var(--bp-card-header-bg)));
}

.bp-side-drawer-handle:active,
.bp-side-drawer.is-resizing .bp-side-drawer-handle:active,
.bp-side-drawer.is-resizing .bp-side-drawer-handle {
  cursor: grabbing;
}

.bp-side-drawer.is-collapsed.is-settled .bp-side-drawer-handle:hover,
.bp-side-drawer.is-collapsed.is-settled .bp-side-drawer-handle:hover {
  background: var(--btn-chrome-bg-hover, var(--btn-chrome-bg));
}

.bp-side-drawer-grab {
  display: block;
  flex: none;
  width: .25rem;
  height: 2.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-text-muted, #6b7280) 38%, transparent);
}

.bp-side-drawer-label {
  display: block;
  flex: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-size: var(--bp-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  transform: rotate(180deg);
  color: var(--c-text-muted, #6b7280);
}

.bp-side-drawer-body {
  /* Out of flex flow so locked content width never shoves the handle off-screen. */
  position: absolute;
  top: var(--bp-side-drawer-inset);
  bottom: var(--bp-side-drawer-inset);
  left: calc(var(--bp-side-drawer-inset) + var(--bp-side-drawer-handle-w) + var(--bp-side-drawer-inset));
  right: auto;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: var(--bp-side-drawer-content-w);
  min-width: var(--bp-side-drawer-content-w);
  max-width: var(--bp-side-drawer-content-w);
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sidebar-dur, 280ms) var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.bp-side-drawer-body > .bp-contact-section-title,
.bp-side-drawer-body > .bp-contact-section-title {
  flex-shrink: 0;
  margin: 0 0 var(--space-5);
  padding: 0 var(--space-1) var(--space-5);
  border-bottom: 1.5px solid var(--c-border);
}

.bp-side-drawer-body > .bp-contact-section-title .tip,
.bp-side-drawer-body > .bp-contact-section-title .tip {
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: .85;
}

.bp-side-drawer.is-content-visible:not(.is-collapsed) .bp-side-drawer-body,
.bp-side-drawer.is-content-visible:not(.is-collapsed) .bp-side-drawer-body {
  opacity: 1;
  pointer-events: auto;
}

/* Keep panel painted while the shell FLIPs closed (clipped by overflow). */
.bp-side-drawer.is-shell-animating.is-collapsed .bp-side-drawer-body,
.bp-side-drawer.is-shell-animating.is-content-visible .bp-side-drawer-body {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  width: var(--bp-side-drawer-content-w);
  min-width: var(--bp-side-drawer-content-w);
  max-width: var(--bp-side-drawer-content-w);
  transition: none;
}

.bp-side-drawer.is-collapsed:not(.is-shell-animating) .bp-side-drawer-body,
.bp-side-drawer.is-collapsed:not(.is-shell-animating) .bp-side-drawer-body {
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.bp-side-drawer.is-collapsed.is-settled .bp-side-drawer-body,
.bp-side-drawer.is-collapsed.is-settled .bp-side-drawer-body {
  visibility: hidden;
  width: 0;
  min-width: 0;
  max-width: 0;
  overflow: hidden;
  padding: 0;
}

.bp-side-drawer.is-resizing .bp-side-drawer-body,
.bp-side-drawer.cp-drawer-no-transition .bp-side-drawer-body,
.bp-side-drawer.is-resizing .bp-side-drawer-body,
.bp-side-drawer.cp-drawer-no-transition .bp-side-drawer-body {
  transition: none;
}

.bp-side-drawer.is-resizing:not(.is-collapsed) .bp-side-drawer-body,
.bp-side-drawer.is-resizing:not(.is-collapsed) .bp-side-drawer-body {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.bp-side-drawer-scroll {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-1) var(--space-1) var(--space-5);
  overflow: auto;
  overscroll-behavior: contain;
}

.bp-side-drawer-scroll > .bp-activity,
.bp-side-drawer-scroll > .bp-activity {
  padding: var(--space-0) 0 var(--space-2);
}

.bp-activity-empty {
  margin: var(--space-5) 0 0;
  padding: 0 var(--space-1);
  color: var(--c-text-muted);
  font-size: var(--bp-text-sm);
  line-height: 1.4;
}

/* Prescription cards - mirror survey name / dosage | refill layout. */
.cp-prescriptions-block {
  margin-bottom: var(--space-13);
}

.cp-prescriptions-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-11);
  margin-bottom: var(--space-10);
}

.cp-prescriptions-block-title {
  margin: 0;
  font-size: var(--bp-text-lg);
  font-weight: 650;
}

.cp-prescriptions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
}

.cp-prescription-card {
  border: 1px solid var(--bp-field-outline, var(--c-border));
  border-radius: var(--radius);
  padding: var(--space-12);
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
}

.cp-prescription-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-10);
  align-items: end;
}

.cp-prescription-card-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-11);
}

.cp-prescription-field {
  margin: 0;
  min-width: 0;
}

.cp-prescription-field--name {
  width: 100%;
}

@media (max-width: 720px) {
  .cp-prescription-card-fields {
    grid-template-columns: 1fr;
  }
}

/* ── Locked / read-only field (universal) ─────────────────────────────────
   Beat `.form-input[type="..."]` outlined fill (same 0,2,0 otherwise). */

.bp-locked-field {
  position: relative;
  display: block;
}

.bp-locked-field > .form-input.bp-locked-field__input,
.bp-locked-field > .form-textarea.bp-locked-field__input,
.bp-locked-field > .form-input.bp-locked-field__input[type="text"],
.bp-locked-field > .form-input.bp-locked-field__input[type="number"],
.bp-locked-field > .form-input.bp-locked-field__input[type="email"],
.bp-locked-field > .form-input.bp-locked-field__input[type="tel"],
.bp-locked-field > .form-input.bp-locked-field__input[readonly],
.bp-locked-field > .form-input.bp-locked-field__input:read-only,
.bp-locked-field .form-input[readonly],
.bp-locked-field .form-input:read-only,
.form-input.cp-readonly-field,
.form-input.cp-readonly-field[readonly],
.form-input.cp-readonly-field:read-only,
.form-textarea.cp-readonly-field,
.form-textarea.cp-readonly-field[readonly],
.form-textarea.cp-readonly-field:read-only {
  background: var(--c-bg) !important;
  background-color: var(--c-bg) !important;
  color: var(--c-text-muted) !important;
  caret-color: transparent;
  cursor: default;
  border-color: var(--bp-field-outline);
  box-shadow: none;
}

.bp-locked-field > .form-input.bp-locked-field__input,
.bp-locked-field > .form-textarea.bp-locked-field__input,
.bp-locked-field > .form-select.bp-locked-field__input,
.bp-locked-field > .form-select-wrap.bp-locked-field__input {
  padding-right: 2.35rem;
  width: 100%;
  box-sizing: border-box;
}

.bp-locked-field > .form-select.bp-locked-field__input,
.bp-locked-field > select.bp-locked-field__input:disabled,
.bp-locked-field > .form-select-wrap.bp-locked-field__input > .form-select-trigger,
.bp-locked-field > .form-select-wrap.bp-locked-field__input > .form-select-trigger:disabled {
  background: var(--c-bg) !important;
  background-color: var(--c-bg) !important;
  color: var(--c-text-muted) !important;
  caret-color: transparent;
  cursor: default;
  opacity: 1;
  border-color: var(--bp-field-outline);
  box-shadow: none;
}

.bp-locked-field > .form-select-wrap.bp-locked-field__input > .form-select-trigger {
  padding-right: 2.35rem;
  width: 100%;
  box-sizing: border-box;
}

.bp-locked-field > .form-select-wrap.bp-locked-field__input > .form-select-trigger:hover,
.bp-locked-field > .form-select-wrap.bp-locked-field__input > .form-select-trigger:focus,
.bp-locked-field > .form-select-wrap.bp-locked-field__input > .form-select-trigger:focus-visible,
.bp-locked-field > .form-select.bp-locked-field__input:hover,
.bp-locked-field > .form-select.bp-locked-field__input:focus {
  outline: none;
  border-color: var(--bp-field-outline);
  background: var(--c-bg) !important;
  background-color: var(--c-bg) !important;
  color: var(--c-text-muted) !important;
  box-shadow: none;
}

.bp-locked-field > .form-select-wrap.bp-locked-field__input .form-select-trigger-caret {
  visibility: hidden;
}

.bp-locked-field > .bp-textarea {
  width: 100%;
}

.bp-locked-field > .bp-textarea > textarea.bp-locked-field__input {
  padding-right: 2.35rem;
}

.bp-locked-field--multiline > .bp-locked-field__icon {
  top: var(--space-12);
  transform: none;
}

.bp-locked-field > .form-input.bp-locked-field__input:hover,
.bp-locked-field > .form-input.bp-locked-field__input:focus,
.bp-locked-field > .form-input.bp-locked-field__input:focus-visible,
.bp-locked-field > .form-input.bp-locked-field__input[type="text"]:hover,
.bp-locked-field > .form-input.bp-locked-field__input[type="text"]:focus,
.bp-locked-field > .form-input.bp-locked-field__input[type="text"]:focus-visible,
.bp-locked-field > .form-input.bp-locked-field__input[readonly]:hover,
.bp-locked-field > .form-input.bp-locked-field__input[readonly]:focus,
.bp-locked-field > .form-input.bp-locked-field__input:read-only:hover,
.bp-locked-field > .form-input.bp-locked-field__input:read-only:focus,
.bp-locked-field .form-input[readonly]:hover,
.bp-locked-field .form-input[readonly]:focus,
.bp-locked-field .form-input:read-only:hover,
.bp-locked-field .form-input:read-only:focus,
.form-input.cp-readonly-field:hover,
.form-input.cp-readonly-field:focus,
.form-input.cp-readonly-field:focus-visible,
.form-textarea.cp-readonly-field:hover,
.form-textarea.cp-readonly-field:focus,
.form-textarea.cp-readonly-field:focus-visible {
  outline: none;
  border-color: var(--bp-field-outline);
  background: var(--c-bg) !important;
  background-color: var(--c-bg) !important;
  color: var(--c-text-muted) !important;
  box-shadow: none;
}

.bp-locked-field__icon {
  position: absolute;
  top: 50%;
  right: var(--space-10a);
  width: 0.95rem;
  height: 0.95rem;
  transform: translateY(-50%);
  background-color: var(--c-text-muted);
  opacity: .85;
  pointer-events: none;
}

.form-textarea.cp-readonly-field,
.form-textarea.cp-readonly-field[readonly] {
  resize: vertical;
}

/* → bp-contact-profile.css (profile-topbar) */
.cp-summary-card {
  margin-bottom: 0;
}

.cp-summary-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  min-width: 0;
}

/* Shared section titles (contact card + activity + Data Helper). */
.bp-contact-section-title,
.bp-preview-data-section-title {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-8);
  padding: 0 var(--space-1) var(--space-5);
  font-size: var(--bp-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.3;
  color: var(--c-text-muted, #6b7280);
  border-bottom: 1.5px solid var(--c-border);
}

.bp-contact-section-title .tip,
.bp-contact-section-title .tip,
.bp-preview-data-section-title .tip {
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: .85;
}

.bp-contact-placeholder,
.bp-preview-data-contact-placeholder {
  color: var(--c-text-muted, #6b7280);
  font-weight: 700;
}

/* Contact Details: Fields-directory dropdown sections */
.cp-data-folds {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cp-data-fold {
  border-top: 1px solid var(--c-border);
  margin-top: var(--space-1);
  padding-top: var(--space-1a);
}

.cp-data-fold:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.cp-data-fold > summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--bp-text-sm);
  font-weight: 700;
  color: var(--c-text);
  padding: var(--space-7) 0;
  user-select: none;
}

.cp-data-fold > summary::-webkit-details-marker { display: none; }

.cp-data-fold > summary::before {
  content: '';
  display: inline-block;
  width: .85rem;
  height: .85rem;
  margin-right: var(--space-3);
  vertical-align: -0.12em;
  color: var(--c-text-muted);
  background-color: currentColor;
  -webkit-mask: url('/static/img/icons/chevron-right.svg') center / contain no-repeat;
  mask: url('/static/img/icons/chevron-right.svg') center / contain no-repeat;
  transition: transform .12s ease;
}

.cp-data-fold[open] > summary::before {
  transform: rotate(90deg);
}

.cp-data-fold-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  padding: var(--space-1a) 0 var(--space-9) var(--space-1a);
}

.cp-data-fold:not([open]) > .cp-data-fold-body {
  display: none;
}

.cp-summary-card > .card-body {
  padding: var(--space-10a) var(--space-12) var(--space-11);
}

.cp-summary {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-9);
}

.cp-media-engagement {
  border-top: 1px solid var(--c-border);
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.cp-media-engagement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.cp-media-engagement-title {
  margin: 0;
  font-size: var(--bp-text-sm);
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: .01em;
}

.cp-media-engagement-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-media-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.cp-media-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  min-width: 0;
}

.cp-media-item-title {
  font-size: var(--bp-text-sm);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-media-item-meta {
  flex: 0 0 auto;
  font-size: var(--bp-text-sm);
  color: var(--c-muted);
  white-space: nowrap;
}

.cp-media-progress {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-border) 85%, transparent);
  overflow: hidden;
}

.cp-media-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--c-primary, #5050ff);
  transition: width .2s ease;
}

.cp-media-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  font-size: var(--bp-text-sm);
  color: var(--c-muted);
}

.cp-media-item-status {
  font-weight: 600;
  color: var(--c-text);
}

.cp-media-item-status.is-complete {
  color: var(--c-success, #16a34a);
}

.cp-summary-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-11);
  min-width: 0;
}

.cp-summary-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.cp-summary-name-row .contacts-name-badges {
  margin-left: 0;
}

.cp-summary .contacts-name-badges :is(
  .contacts-high-intent-badge,
  .contacts-appointment-badge,
  .contacts-t65-badge,
  .contacts-lead-order-badge,
  .tag-pill
) {
  margin-left: 0;
}

.cp-summary-name {
  font-size: var(--bp-text-md);
  font-weight: 700;
  font-family: inherit;
  color: var(--c-text);
  line-height: 1.3;
}

.cp-summary-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  flex-wrap: nowrap;
  font-size: var(--bp-text-md);
  font-weight: 400;
  font-family: inherit;
  color: var(--c-text);
  margin-top: var(--space-1);
}

.cp-summary-contact-line {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.cp-summary-contacts a {
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cp-summary-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.cp-call-btn {
  padding: var(--space-1) var(--space-9);
  font-size: var(--bp-text-sm);
  line-height: 1.2;
  min-height: 0;
}

.cp-call-btn:disabled {
  opacity: .65;
  cursor: wait;
}

.cp-call-menu {
  position: relative;
  display: inline-flex;
}

.cp-call-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 0;
  z-index: 40;
  min-width: 10.5rem;
  padding: var(--space-3);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--bp-dropdown-shadow);
}

.cp-call-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: var(--space-7) var(--space-8a);
  border-radius: 6px;
  font-size: var(--bp-text-sm);
  color: var(--c-text);
  cursor: pointer;
}

.cp-call-menu__item:hover {
  background: var(--c-bg-muted, rgba(0, 0, 0, .04));
}

.bp-softphone-bar {
  position: fixed;
  left: 50%;
  bottom: var(--space-14);
  transform: translateX(-50%);
  z-index: 1200;
  max-width: calc(100vw - 2rem);
}

.bp-softphone-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  padding: var(--space-10) var(--space-12a);
  border-radius: 999px;
  background: var(--c-text, #111);
  color: #fff;
  box-shadow: none;
}

.bp-softphone-bar__status {
  font-size: var(--bp-text-md);
  font-weight: 600;
}

.bp-softphone-bar__to {
  font-size: var(--bp-text-sm);
  opacity: .85;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.bp-softphone-bar .btn {
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}

.bp-softphone-bar .btn-primary {
  background: var(--c-danger);
  border-color: var(--c-danger);
}

.cp-summary-sep {
  color: var(--c-border);
  flex-shrink: 0;
}

.cp-summary-stats {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-7);
  margin-left: 0;
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-start;
  overflow: visible;
}

.cp-summary-stats > .cp-stat:not(.cp-stat--tags):not(.cp-stat--source):not(.cp-stat--assigned) {
  flex: 0 0 auto;
}

.cp-summary-main {
  min-width: 0;
  flex: 1 1 auto;
}

.cp-stat--tags {
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  overflow: visible;
}

.cp-stat--source {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  align-items: flex-start;
  overflow: visible;
}

.cp-stat--assigned {
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  overflow: visible;
}

.cp-summary-location {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7) var(--space-11);
  width: 100%;
  min-width: 0;
}

.cp-stat--location {
  min-width: 0;
  align-items: flex-start;
  overflow: visible;
}

.cp-stat--location .form-input,
.cp-stat--location .bp-dtp-trigger,
.cp-stat--location .form-select-trigger {
  width: 100%;
  min-width: 0;
  font-size: var(--bp-text-md);
  font-weight: 400;
  line-height: var(--bp-field-line-height, 1.25);
  color: var(--c-text);
}

.cp-stat--location .bp-dtp-wrap {
  width: 100%;
  min-width: 0;
}

.cp-assigned-picker {
  width: 100%;
  max-width: 100%;
}

.cp-assigned-picker .sidebar-agency-trigger {
  justify-content: flex-start;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 2.35rem;
  height: auto;
  padding: var(--space-6a) var(--space-9);
}

.cp-assigned-avatar--initials,
.cp-assigned-avatar--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bp-text-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--bp-avatar-accent, var(--c-primary-color, var(--c-primary))) 82%, var(--c-text));
  background: color-mix(in srgb, var(--bp-avatar-accent, var(--c-primary-color, var(--c-primary))) 18%, var(--c-surface, var(--c-bg)));
}

.cp-assigned-avatar--empty .bp-icon-mask {
  width: .85rem;
  height: .85rem;
  background-color: currentColor;
}

.copy-agency-menu--floating {
  position: fixed;
  left: auto;
  right: auto;
  top: auto;
  max-width: none;
}

.cp-stat--created {
  flex: 0 0 auto;
  align-items: flex-end;
  text-align: right;
}

.cp-stat-source-editor {
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  overflow: visible;
  justify-content: flex-start;
}

.cp-stat-source-editor > .cp-stat-tags-input,
.cp-stat-source-editor .tag-input-field {
  width: 100%;
  max-width: 100%;
  flex: 1 1 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-start;
}

.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-badge-filter-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  flex: 0 0 auto;
  min-width: 0;
  max-width: min(22rem, 36vw);
}

.contacts-badge-filter-pills {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.contacts-badge-filter-pills[hidden] {
  display: none !important;
}

.contacts-badge-filter-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 9.5rem;
  min-width: 9.5rem;
  max-width: 9.5rem;
}

.contacts-badge-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.contacts-badge-filter-pill :is(
  .contacts-high-intent-badge,
  .contacts-appointment-badge,
  .contacts-t65-badge,
  .contacts-lead-order-badge,
  .contacts-role-badge
) {
  margin-left: 0;
}

.contacts-badge-filter-pill-remove {
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  font-size: var(--bp-text-lg);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-1);
  border-radius: var(--radius);
}

.contacts-badge-filter-pill-remove:hover {
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-text) 8%, transparent);
}

.contacts-badge-filter-wrap .tag-multi-combobox-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.contacts-badge-filter-wrap .tag-combobox-wrap:has(.tag-combobox-clear:not([hidden])) {
  padding-right: var(--tag-combobox-clear-inset);
}

.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-clear-inset: 1.75rem;
}

.tag-multi-combobox-wrap {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.tag-multi-combobox--external-pills {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-5);
  width: 100%;
}

.tag-multi-combobox-pills--external {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  flex: 0 1 auto;
  min-width: 0;
}

.tag-multi-combobox-pills--external[hidden] {
  display: none !important;
}

.tag-multi-combobox--external-pills .tag-multi-combobox-input-row {
  flex: 1 0 9rem;
  flex-wrap: nowrap;
  min-width: 9rem;
  width: auto;
  min-height: 2.125rem;
}

.tag-multi-combobox--external-pills:has(.tag-multi-combobox-pills--external[hidden]) .tag-multi-combobox-input-row {
  flex: 1 1 100%;
  min-width: 0;
}

.tag-multi-combobox--external-pills .tag-multi-combobox-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.tag-combobox-wrap:has(.tag-combobox-clear:not([hidden])) .tag-combobox-input:not(.tag-multi-combobox-input) {
  padding-right: var(--tag-combobox-clear-inset);
}

.tag-combobox-wrap.tag-multi-combobox-wrap:has(.tag-combobox-clear:not([hidden])) {
  padding-right: var(--tag-combobox-clear-inset);
}

.tag-multi-combobox--external-pills .tag-multi-combobox-input-row:has(.tag-combobox-clear:not([hidden])) {
  padding-right: var(--tag-combobox-clear-inset);
}

.tag-multi-combobox-pills:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.tag-multi-combobox-input {
  flex: 1 1 4rem;
  min-width: 4rem;
  width: auto;
  padding-right: 0;
}

.tag-combobox-input {
  width: 100%;
}

.tag-combobox-clear {
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  font-size: var(--bp-text-lg);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1) var(--space-5);
  border-radius: var(--radius);
}

.tag-combobox-clear[hidden] {
  display: none !important;
}

.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;
  gap: var(--space-2);
  font-size: var(--bp-text-sm);
  color: var(--c-text-muted);
  line-height: 1.35;
  text-align: left;
}

.cp-stat-date {
  font-weight: 600;
}

/* Contact profile data browser: compact rhythm on shared list-folder chrome. */
.cp-data-browser > .media-library-folders {
  margin: 0 0 var(--space-7);
  padding: var(--space-2) var(--space-1);
}

.cp-data-browser > .media-library-topbar {
  margin: 0 0 var(--space-10);
  padding: var(--space-7) var(--space-12) var(--space-7) var(--space-13);
}

.cp-data-browser .media-library-topbar .bp-search-wrap {
  min-width: 12rem;
}

.cp-data-card > .card-body {
  padding-top: var(--space-10);
}

#contact-summary,
#contact-activity,
#contact-history {
  overflow-y: auto;
  overflow-x: hidden;
}

/* → bp-contact-profile.css (profile-info-and-activity-flat) */
/* Git-graph activity (contact profile Activity + Data Helper) */
.bp-activity {
  --bp-activity-rail-w: .85rem;
  --bp-activity-node: .55rem;
  --bp-activity-stroke: 2px;
  --bp-activity-branch-arm: .72rem;
  --bp-activity-color: var(--c-text-muted);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bp-activity-event,
.bp-activity-day {
  --bp-activity-color: var(--c-text-muted);
  display: grid;
  grid-template-columns: var(--bp-activity-rail-w) minmax(0, 1fr);
  column-gap: var(--space-8);
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.bp-activity-event.is-pending,
.bp-activity-day.is-pending { --bp-activity-color: var(--c-text-muted); }
.bp-activity-event.is-saved,
.bp-activity-day.is-saved { --bp-activity-color: var(--c-success); }
.bp-activity-event.is-failed,
.bp-activity-day.is-failed { --bp-activity-color: var(--c-danger); }
.bp-activity-event.is-muted,
.bp-activity-day.is-muted { --bp-activity-color: var(--c-text-muted); }

.bp-activity-day {
  /* No vertical padding here - it sat outside the rail and opened gaps across dates. */
  padding: 0;
  align-items: stretch;
}

.bp-activity-rail {
  position: relative;
  width: var(--bp-activity-rail-w);
  justify-self: center;
  align-self: stretch;
  min-height: 100%;
}

/*
  One continuous trunk: each row paints its rail segment edge-to-edge and overlaps
  neighbors by 1px so flex/subpixel seams never show. Fixed 2px width, auto-centered
  (no translateX) so thickness stays even across rows.
*/
.bp-activity-rail::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  bottom: -1px;
  width: var(--bp-activity-stroke);
  margin-inline: auto;
  background: var(--bp-activity-color);
  opacity: 1;
  pointer-events: none;
}

/* No stub above the first node - first day header has no trunk. */
.bp-activity > .bp-activity-day:first-child .bp-activity-rail::before {
  display: none;
}

.bp-activity > .bp-activity-event:first-child .bp-activity-rail::before,
.bp-activity > .bp-activity-day:first-child + .bp-activity-event .bp-activity-rail::before {
  top: var(--space-9);
  bottom: -1px;
}

.bp-activity > .bp-activity-event:last-child .bp-activity-rail::before {
  top: -1px;
  bottom: auto;
  height: calc(.55rem + 1px);
}

.bp-activity-node {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: var(--bp-activity-node);
  height: var(--bp-activity-node);
  margin: var(--space-5) auto 0;
  border: 0;
  border-radius: 50%;
  background: var(--bp-activity-color);
  box-shadow: none;
  outline: none;
}

/* Milestone commits stay the same size - weight via fill only. */
.bp-activity-event.is-commit .bp-activity-node {
  background: var(--bp-activity-color);
  opacity: 1;
}

/* Side branch for derived / inferred field values (Data Helper + Activity).
   Trunk stays continuous; a same-stroke arm forks to the side node (git split). */
.bp-activity-event.is-branch {
  overflow: visible;
}

.bp-activity-event.is-branch .bp-activity-rail {
  overflow: visible;
}

.bp-activity-branch {
  position: absolute;
  left: 50%;
  top: calc(.32rem + (var(--bp-activity-node) / 2) - (var(--bp-activity-stroke) / 2));
  z-index: 1;
  width: var(--bp-activity-branch-arm);
  height: var(--bp-activity-stroke);
  margin: 0;
  margin-left: 0;
  border: 0;
  border-radius: 0;
  background: var(--bp-activity-color);
  opacity: 1;
  pointer-events: none;
  box-sizing: border-box;
}

.bp-activity-event.is-branch .bp-activity-node {
  position: absolute;
  left: calc(50% + var(--bp-activity-branch-arm));
  top: .32rem;
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  /* Solid fill only - no halo / inset ring. */
  background: var(--bp-activity-color);
  opacity: 1;
  box-shadow: none;
  outline: none;
}

.bp-activity-event.is-branch.is-commit .bp-activity-node {
  top: .32rem;
  opacity: 1;
  background: var(--bp-activity-color);
}

.bp-activity-event.is-branch .bp-activity-title {
  font-weight: 600;
  color: color-mix(in srgb, var(--c-text) 82%, var(--c-text-muted));
}

.bp-activity-event.is-branch .bp-activity-body {
  padding-left: .95rem;
}

.bp-activity-body {
  min-width: 0;
  width: 100%;
  padding: var(--space-1b) 0 var(--space-1c);
}

.bp-activity-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  width: 100%;
  min-width: 0;
}

.bp-activity-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bp-text-sm);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}

.bp-activity-meta {
  display: block;
  min-width: 0;
  margin-top: .02rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bp-text-sm);
  font-weight: 450;
  color: var(--c-text-muted);
  line-height: 1.3;
}

.bp-activity-meta.has-inferred {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  overflow: hidden;
  text-overflow: unset;
  white-space: nowrap;
}

.bp-activity-meta.has-inferred .bp-activity-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-activity-inferred {
  flex: 0 0 auto;
  font-size: var(--bp-text-xs);
  font-weight: 450;
  color: var(--c-text-muted);
  opacity: .78;
}

.bp-activity-meta--stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .08rem;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.bp-activity-meta--stack .bp-activity-value {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.bp-activity-meta--chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  overflow: visible;
  white-space: normal;
}

.bp-activity-meta--chips .contacts-pill,
.bp-activity-meta--chips .tag-pill {
  padding: var(--space-1b) var(--space-7);
  font-size: var(--bp-text-xs);
}

.bp-activity-when {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  font-size: var(--bp-text-xs);
  font-weight: 500;
  color: var(--c-text-muted);
  white-space: nowrap;
  line-height: 1.3;
}

.bp-activity-day-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  align-self: stretch;
  column-gap: var(--space-9);
  width: 100%;
  min-width: 0;
  padding: var(--space-7) 0;
  font-size: var(--bp-text-xs);
  font-weight: 600;
  color: var(--c-text-muted);
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.bp-activity-day-label::before,
.bp-activity-day-label::after {
  content: '';
  height: 1px;
  background: color-mix(in srgb, var(--c-border) 88%, transparent);
}

@media (max-width: 900px) {
  .cp-summary {
    flex-wrap: nowrap;
  }

  .cp-summary-top {
    align-items: flex-start;
  }

  .cp-summary-stats {
    margin-left: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-7);
  }

  .cp-stat--tags,
  .cp-stat--source,
  .cp-stat--assigned {
    flex: 1 1 auto;
    align-items: flex-start;
  }

  .cp-stat--created {
    align-items: flex-end;
  }

  .cp-stat-tags-input .tag-input-field,
  .cp-stat-source-editor {
    justify-content: flex-start;
  }
}

html:has(.bp-split-page),
html:has(.bp-split-page),
html:has(.contact-profile-page),
html:has(.cal-page),
html:has(.bp-table-fit-page) {
  overflow: hidden;
}

html:has(.bp-split-page) .dash,
html:has(.bp-split-page) .dash,
html:has(.contact-profile-page) .dash,
html:has(.cal-page) .dash,
html:has(.bp-table-fit-page) .dash {
  min-height: 0;
  height: 100dvh;
}

html:has(.bp-split-page) .main,
html:has(.bp-split-page) .main,
html:has(.contact-profile-page) .main,
html:has(.cal-page) .main,
html:has(.bp-table-fit-page) .main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

html:has(.bp-split-page) .dashboard-stage,
html:has(.bp-split-page) .dashboard-stage,
html:has(.contact-profile-page) .dashboard-stage,
html:has(.cal-page) .dashboard-stage,
html:has(.bp-table-fit-page) .dashboard-stage {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html:has(.bp-split-page) #bp-page-root,
html:has(.bp-split-page) #bp-page-root,
html:has(.contact-profile-page) #bp-page-root,
html:has(.cal-page) #bp-page-root,
html:has(.bp-table-fit-page) #bp-page-root {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html:has(.bp-split-page) #bp-page-root > .page-content.bp-split-page,
html:has(.bp-split-page) #bp-page-root > .page-content.bp-split-page,
html:has(.contact-profile-page) #bp-page-root > .page-content.contact-profile-page,
html:has(.cal-page) #bp-page-root > .page-content.cal-page,
html:has(.bp-table-fit-page) #bp-page-root > .page-content.bp-table-fit-page {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Viewport-fit table shells: fill remaining height; footer stays pinned */
.bp-table-fit-page .bp-table-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bp-table-fit-page .bp-table-shell > .card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bp-table-fit-page .bp-table-shell > .card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bp-table-fit-page .contacts-table-wrap {
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
}

.bp-table-fit-page .bp-table-shell > .card > .card-footer {
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .bp-split--2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  html:has(.bp-split-page),
  html:has(.bp-split-page),
  html:has(.contact-profile-page),
  html:has(.cal-page),
  html:has(.bp-table-fit-page) {
    overflow: auto;
  }

  html:has(.bp-split-page) .dash,
  html:has(.bp-split-page) .dash,
  html:has(.contact-profile-page) .dash,
  html:has(.cal-page) .dash,
  html:has(.bp-table-fit-page) .dash {
    height: auto;
    min-height: 100dvh;
  }

  html:has(.bp-split-page) .dashboard-stage,
  html:has(.bp-split-page) .main,
  html:has(.bp-split-page) .dashboard-stage,
  html:has(.bp-split-page) .main,
  html:has(.contact-profile-page) .dashboard-stage,
  html:has(.contact-profile-page) .main,
  html:has(.cal-page) .dashboard-stage,
  html:has(.cal-page) .main,
  html:has(.bp-table-fit-page) .dashboard-stage,
  html:has(.bp-table-fit-page) .main {
    display: block;
    overflow: visible;
    height: auto;
  }

  .bp-split-page,
  .cal-page,
  .bp-table-fit-page {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-bottom: var(--space-15);
  }

  .bp-split--3col,
  .cp-cards-grid {
    grid-template-columns: 1fr;
    height: auto !important;
    overflow: visible;
    gap: var(--bp-card-stack-gap);
  }

  .bp-split--3col > .bp-resizer,
  .bp-split--3col > .bp-resizer,
  .bp-split--3col > .bp-resizer,
  .cp-cards-grid > .bp-resizer,
  .cp-col > .bp-resizer {
    display: none;
  }

  .contact-profile-page {
    height: auto;
    overflow: visible;
    --cp-history-content-gap: 0px;
  }

  .cp-cards-grid > .card,
  .cp-cards-grid > .cp-col > .card,
  .cp-cards-grid > .cp-col > .cp-data-browser > .card {
    max-height: none;
    min-height: 0;
  }

  .cp-col--left {
    gap: var(--bp-card-stack-gap);
    overflow: visible;
    height: auto;
    container-type: normal;
  }

  .cp-col--left > .cp-summary-block {
    flex: none;
    max-height: none;
    overflow: visible;
  }

  .cp-col--left > .cp-summary-block > .cp-summary-card > .card-body {
    overflow: visible;
  }

  .cp-col--left > .cp-data-browser,
  .cp-col--left > .cp-data-card {
    flex: none;
    min-height: 0;
  }

  .bp-side-drawer--profile .cp-notes-card--drawer {
    flex: none;
    max-height: none;
    min-height: 14rem;
  }

  .bp-side-drawer--profile .cp-drawer-panels,
  .bp-side-drawer--profile .cp-drawer-pane {
    flex: 1 1 auto;
    min-height: 14rem;
  }

  .cp-col--center {
    display: flex;
    flex: none;
    min-height: 22rem;
  }

  .cp-compose-card {
    flex: none;
    min-height: 22rem;
  }

  .cp-compose-card .bp-message-thread-pane {
    min-height: 12rem;
    max-height: 28rem;
  }

  /* Profile Activity drawer stays floating until 40rem — see next media query. */
  #contact-activity,
  #contact-history {
    max-height: 420px;
  }

  .messages-inbox-card {
    max-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .bp-message-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;
  }
}

/* Contact profile Activity wing: stack (not float) at ≤40rem. */
@media (max-width: 40rem) {
  .cp-profile-shell {
    flex-direction: column;
    overflow: visible;
    height: auto;
    margin-right: 0;
    padding-right: 0;
  }

  .cp-profile-shell > .bp-side-drawer--profile {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
  }

  .contact-profile-page .bp-side-drawer--profile,
  .cp-profile-shell > .bp-side-drawer {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    width: 100% !important;
    max-width: none;
    min-height: 16rem;
    flex-direction: column;
  }

  .contact-profile-page .bp-side-drawer-handle {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--space-9) var(--space-11);
    gap: var(--space-9);
  }

  .contact-profile-page .bp-side-drawer-grab {
    width: 2.35rem;
    height: .25rem;
  }

  .contact-profile-page .bp-side-drawer-label {
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: .04em;
  }

  .contact-profile-page .bp-side-drawer-body {
    position: relative;
    inset: auto;
    left: auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto;
    min-height: 14rem;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
}

/* Legacy non-profile side drawers (e.g. Data Helper) still stack with the 1100px page chrome. */
@media (max-width: 1100px) {
  .bp-side-drawer:not(.bp-side-drawer--profile) {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    width: 100% !important;
    max-width: none;
    min-height: 16rem;
    flex-direction: column;
  }

  .bp-side-drawer:not(.bp-side-drawer--profile) .bp-side-drawer-handle {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--space-9) var(--space-11);
    gap: var(--space-9);
  }

  .bp-side-drawer:not(.bp-side-drawer--profile) .bp-side-drawer-grab {
    width: 2.35rem;
    height: .25rem;
  }

  .bp-side-drawer:not(.bp-side-drawer--profile) .bp-side-drawer-label {
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: .04em;
  }

  .bp-side-drawer:not(.bp-side-drawer--profile) .bp-side-drawer-body {
    position: relative;
    inset: auto;
    left: auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto;
    min-height: 14rem;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
}

/* Inline format popup (RTE) */

/* → bp-contact-profile.css (profile-notes-card) */
.bp-inline-format-popup {
  position: fixed;
  z-index: 10090;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius, 8px);
  background: var(--c-surface, #fff);
  border: none;
  box-shadow: none;
}

.bp-inline-format-popup[hidden] {
  display: none !important;
}

/* Durable selection mark while the color picker has focus (native selection clears). */
[data-bp-rte-color-mark] {
  background: color-mix(in srgb, var(--c-primary, #5050ff) 18%, transparent);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.bp-inline-format-popup .bp-rte-btn {
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text, #111827);
  /* Darker chrome on the light popup surface (same as .btn / .btn-icon). */
  background: var(--btn-chrome-bg, var(--bp-card-section-bg, #f3f4f6));
  box-shadow: var(--bp-shadow);
}

.bp-inline-format-popup .bp-rte-btn:hover:not(:disabled):not(.is-active) {
  background: var(--btn-chrome-bg-hover, color-mix(in srgb, var(--c-border) 58%, var(--c-bg)));
  box-shadow: var(--bp-shadow-hover);
}

.bp-inline-format-popup .bp-rte-btn:not(.is-active) {
  color: var(--c-text, #111827);
}

.bp-inline-format-popup .bp-rte-btn.is-active {
  background: color-mix(in srgb, var(--c-primary-light, var(--c-primary)) 72%, var(--btn-chrome-bg, var(--bp-card-section-bg)));
  color: var(--c-primary-color, var(--c-primary));
}

.bp-inline-format-popup .bp-rte-btn .bp-icon-mask,
.bp-inline-format-popup .bp-rte-btn .pb-icon-mask {
  color: inherit;
  background-color: currentColor;
}

.bp-inline-format-popup .bp-rte-vars {
  position: relative;
}

.bp-inline-format-popup .bp-rte-vars-menu {
  top: calc(100% + var(--space-5));
  left: auto;
  right: 0;
  z-index: 10051;
}

.bp-inline-format-popup .bp-inline-format-align {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.bp-inline-format-popup .bp-inline-align-menu {
  position: absolute;
  top: calc(100% + var(--space-5));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10051;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--radius, .5rem);
  background: var(--bp-card-bg, var(--c-surface, #fff));
  box-shadow: var(--bp-shadow);
}

.bp-inline-format-popup .bp-inline-align-menu[hidden] {
  display: none !important;
}

.bp-inline-format-popup .bp-inline-format-vars[hidden],
.bp-inline-format-popup .bp-inline-format-vars-sep[hidden] {
  display: none !important;
}

/* → bp-contact-profile.css (profile-notes-sticky) */
/* Messages notes fill the pane - height is the column resizer, not the RTE grip. */

.bp-rte.is-disabled {
  opacity: .65;
}

.bp-rte.is-disabled .bp-rte-editor {
  cursor: not-allowed;
}





/* Activity expand / transcript (shared Activity + Data Helper) */
.bp-activity-actions,
.cp-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.bp-activity-extra,
.cp-history-extra {
  margin-top: var(--space-8);
  padding: var(--space-9) var(--space-10);
  border-radius: var(--bp-card-section-radius);
  background: color-mix(in srgb, var(--c-bg) 55%, var(--bp-card-section-bg));
}

.bp-activity-event.is-expandable .bp-activity-extra,
.bp-activity-event.is-expandable .cp-history-extra {
  margin-top: var(--space-5);
}

.bp-activity-extra-label,
.cp-history-extra-label {
  font-size: var(--bp-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-muted);
  margin-bottom: var(--space-3);
}

.bp-activity-extra-text,
.bp-activity-transcript-text,
.cp-history-extra-text,
.cp-history-transcript-text {
  margin: 0;
  font-size: inherit;
  line-height: 1.45;
  color: var(--c-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.bp-activity-transcript,
.cp-history-transcript {
  margin-top: var(--space-7);
}

.bp-activity-transcript-text,
.cp-history-transcript-text {
  font-family: inherit;
  max-height: 14rem;
  overflow: auto;
}

/* ── Sticky notes (contact profile + messages + media detail) ──────────── */
/* Shared site-wide - not route-scoped (contacts modal also uses .cp-notes-*). */

/* Guaranteed editable surface - never collapse to zero height. */
.bp-notes-rte-host {
  flex: 1 1 auto;
  min-height: 6rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cp-notes-card .bp-rte-editor,
.cp-notes-body .bp-rte-editor {
  min-height: 6rem !important;
}

/* Contact profile Notes - match path-editor sticky notes (.pb-logic-node--note) */
.cp-notes-card {
  --pb-logic-accent: var(--c-warning);
  gap: var(--space-5);
  padding: var(--bp-card-inset, var(--space-8));
  padding-bottom: calc(var(--bp-card-inset, var(--space-8)) + 2px);
  background: color-mix(in srgb, var(--pb-logic-accent) 14%, var(--bp-card-bg, var(--c-bg)));
  border-color: transparent;
}

.cp-notes-card > .card-header.cp-notes-header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  margin: 0;
  padding: var(--space-7) var(--space-5) var(--space-7) var(--space-9);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--pb-logic-accent) 22%, var(--btn-chrome-bg, var(--bp-card-section-bg)));
  box-shadow: none;
  font-weight: 600;
  font-size: var(--bp-text-md);
  line-height: 1.35;
  color: var(--c-text);
}

.cp-notes-kind-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-color: currentColor;
  color: color-mix(in srgb, var(--pb-logic-accent) 72%, var(--c-text));
  -webkit-mask: var(--pb-icon) center / contain no-repeat;
  mask: var(--pb-icon) center / contain no-repeat;
}

.cp-notes-kind {
  flex: 1;
  min-width: 0;
  font-size: var(--bp-text-md);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--pb-logic-accent) 55%, var(--c-text));
}

/* Notes - Messages sidebar + Contact Profile tab */
.cp-notes-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8a);
  overflow: auto;
}

.cp-notes-card > .cp-notes-body {
  gap: var(--space-5);
  padding: var(--space-1) var(--space-5) var(--space-2);
  padding-right: var(--space-1);
  padding-bottom: var(--space-1);
}

.cp-notes-body .form-textarea,
.messages-notes-input {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  resize: none;
  overflow-y: auto;
  font-size: var(--bp-text-md);
  line-height: 1.5;
  background: color-mix(in srgb, var(--c-surface) 82%, var(--c-bg));
}

.cp-notes-body .bp-rte,
.messages-notes-content .bp-rte {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cp-notes-body .bp-rte--bare .bp-rte-toolbar,
.messages-notes-content .bp-rte--bare .bp-rte-toolbar {
  display: none !important;
}

.bp-rte--bare .bp-rte-body {
  border-radius: var(--radius, 8px);
}

/* Floating selection format popup (path canvas + notes) */

/* --- profile-notes-sticky --- */
/* Contact profile sticky note: editor fills the card body. */
.cp-notes-card .bp-notes-rte-host,
.cp-notes-card .bp-rte,
.cp-notes-card .bp-rte--bare {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cp-notes-card .bp-rte-body,
.cp-notes-card .bp-rte-body:hover,
.cp-notes-card .bp-rte:focus-within .bp-rte-body {
  flex: 1 1 auto;
  min-height: 6rem;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.messages-notes-content .bp-rte-body {
  flex: 1 1 auto;
  min-height: 8rem;
  max-height: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cp-notes-body .bp-rte-editor {
  flex: 1 1 auto;
  min-height: 8rem;
  max-height: none;
  height: auto;
  resize: none;
  font-size: var(--bp-text-md);
}

/* Sticky-note type scale wins over generic .cp-notes-body editor rules. */
.cp-notes-card .bp-rte-editor {
  min-height: 6rem;
  padding: var(--space-1) var(--space-2) var(--space-5) 0;
  font-weight: 400;
  font-size: var(--bp-sticky-note-font-size);
  line-height: 1.35;
  white-space: pre-wrap;
}

.cp-notes-card .bp-rte-editor:empty::before {
  color: color-mix(in srgb, var(--pb-logic-accent) 45%, var(--c-text-muted));
}

.cp-notes-card .bp-rte-resize {
  right: var(--space-1a);
  bottom: var(--space-1a);
  width: 1.05rem;
  height: 1.05rem;
  cursor: nwse-resize;
  color: color-mix(in srgb, var(--pb-logic-accent) 55%, var(--c-text-muted));
  border-radius: 2px;
}

.cp-notes-card .bp-rte-resize:hover,
.cp-notes-card .bp-rte-resize:focus-visible,
body.bp-rte-resizing .cp-notes-card .bp-rte-resize {
  color: color-mix(in srgb, var(--pb-logic-accent) 80%, var(--c-text));
}

.cp-notes-card #contact-notes-count,
.messages-notes-content #message-notes-count {
  flex-shrink: 0;
  padding: 0 var(--space-2);
  font-size: var(--bp-text-sm);
}

.messages-notes-content .bp-rte-editor {
  flex: 1 1 auto;
  min-height: 8rem;
  max-height: none;
  height: 100%;
  resize: none;
  font-size: var(--bp-text-md);
  font-weight: 400;
}

/* ── Shared rich-text editor (.bp-rte) - path builder + contact notes ── */
.bp-rte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.bp-rte-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  margin: 0;
  padding: var(--space-7) var(--space-9);
  border: 1px solid transparent;
  border-radius: var(--radius, .5rem);
  background: var(--btn-chrome-bg, var(--bp-card-section-bg, #f3f4f6));
  box-shadow: var(--bp-shadow);
}

.bp-rte-btn {
  padding: var(--space-2a) .48rem;
  font-size: var(--bp-text-sm);
  line-height: 1.35;
  background: var(--bp-card-bg, var(--c-bg, #fff));
  border: 1px solid transparent;
  border-radius: var(--radius, .4rem);
  box-shadow: var(--bp-shadow);
  cursor: pointer;
  color: var(--c-text, #111827);
  font-family: inherit;
  transition: background var(--dur, .15s) var(--ease, ease), box-shadow var(--dur, .15s) var(--ease, ease);
}

.bp-rte-btn:hover:not(:disabled) {
  background: var(--btn-surface-bg-hover, color-mix(in srgb, var(--c-border) 24%, var(--bp-card-bg, #fff)));
  box-shadow: var(--bp-shadow-hover);
}

.bp-rte-btn.is-active {
  background: color-mix(in srgb, var(--c-primary, #5050ff) 14%, var(--bp-card-bg, #fff));
  color: var(--c-primary, #5050ff);
  box-shadow: var(--bp-shadow);
}

.bp-rte-btn:disabled {
  cursor: not-allowed;
  opacity: .7;
}

.bp-rte-vars {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.bp-rte-vars-menu {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 14.5rem;
  max-width: min(20rem, 80vw);
  padding: var(--space-5);
  overflow: visible;
  border: 1px solid transparent;
  border-radius: var(--radius, .5rem);
  background: var(--bp-card-bg, var(--c-bg, #fff));
  box-shadow: var(--bp-shadow);
}

.bp-rte-vars-menu[hidden] {
  display: none !important;
}

.bp-rte-vars-menu.is-searching {
  max-height: min(280px, 50vh);
  overflow: hidden;
}

.bp-rte-vars-search {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2) var(--space-5);
}

.bp-rte-vars-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-height: 0;
  overflow: visible;
}

.bp-rte-vars-menu.is-searching .bp-rte-vars-list {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bp-rte-vars-empty {
  margin: 0;
}

.bp-rte-vars-item[hidden],
.bp-rte-vars-group-wrap[hidden] {
  display: none !important;
}

.bp-rte-vars-group-wrap {
  display: block;
  position: relative;
}

.bp-rte-vars-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  width: 100%;
  margin: 0;
  padding: var(--space-6) var(--space-9);
  border: 0;
  border-radius: var(--radius, .4rem);
  background: transparent;
  color: var(--c-text, #111827);
  font: inherit;
  font-size: var(--bp-text-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.bp-rte-vars-group:hover,
.bp-rte-vars-group:focus-visible,
.bp-rte-vars-group-wrap.is-open > .bp-rte-vars-group {
  background: color-mix(in srgb, var(--c-primary, #5050ff) 10%, var(--bp-card-bg, #fff));
  outline: none;
}

.bp-rte-vars-group-chevron {
  flex: 0 0 auto;
  width: .7rem;
  height: .7rem;
  background-color: currentColor;
  -webkit-mask: url('/static/img/icons/chevron-right.svg') center / contain no-repeat;
  mask: url('/static/img/icons/chevron-right.svg') center / contain no-repeat;
  opacity: .7;
}

.bp-rte-vars-flyout {
  display: none;
  position: absolute;
  left: calc(100% + var(--space-4));
  top: 0;
  z-index: 3;
  min-width: 14.5rem;
  max-width: min(22rem, 80vw);
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius, .5rem);
  background: var(--bp-card-bg, var(--c-bg, #fff));
  box-shadow: var(--bp-shadow);
}

.bp-rte-vars-flyout--floating {
  display: flex;
  position: fixed;
  z-index: 10120;
}

.bp-rte-vars-group-wrap.is-flyout-left > .bp-rte-vars-flyout {
  left: auto;
  right: calc(100% + var(--space-4));
}

.bp-rte-vars-menu.is-searching .bp-rte-vars-group {
  pointer-events: none;
  padding: var(--space-4) var(--space-9) var(--space-0);
  font-size: var(--bp-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted, #6b7280);
  background: transparent;
  cursor: default;
}

.bp-rte-vars-menu.is-searching .bp-rte-vars-group-chevron {
  display: none;
}

.bp-rte-vars-menu.is-searching .bp-rte-vars-flyout {
  display: flex;
  position: static;
  left: auto;
  right: auto;
  top: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.bp-rte-vars-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  width: 100%;
  margin: 0;
  padding: var(--space-6) var(--space-9);
  border: 0;
  border-radius: var(--radius, .4rem);
  background: transparent;
  color: var(--c-text, #111827);
  font: inherit;
  font-size: var(--bp-text-sm);
  text-align: left;
  cursor: pointer;
}

.bp-rte-vars-item:hover,
.bp-rte-vars-item:focus-visible {
  background: color-mix(in srgb, var(--c-primary, #5050ff) 10%, var(--bp-card-bg, #fff));
  outline: none;
}

.bp-rte-vars-item-label {
  font-weight: 600;
}

.bp-rte-vars-item-token {
  flex: 0 0 auto;
  font-size: var(--bp-text-sm);
  font-weight: 500;
  color: var(--c-primary, #5050ff);
  background: color-mix(in srgb, var(--c-primary, #5050ff) 10%, transparent);
  padding: var(--space-1b) var(--space-5);
  border-radius: .3rem;
}

.bp-rte-sep {
  width: 1px;
  height: 1.15rem;
  background: color-mix(in srgb, var(--c-border, #d1d5db) 70%, transparent);
  margin: 0 var(--space-1b);
}

/* RTE selects use shared .form-select chrome; keep them compact in the toolbar. */
.bp-rte-select-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.bp-rte-toolbar .form-select-wrap--toolbar {
  --bp-field-height: 1.85rem;
  --bp-field-font-size: var(--bp-text-sm);
  --bp-field-line-height: 1.25;
  display: inline-flex;
  width: auto;
  min-width: 5.25rem;
  max-width: 7.25rem;
  flex: 0 0 auto;
}

.bp-rte-toolbar .form-select-wrap.bp-rte-select--list {
  min-width: 7.25rem;
  max-width: 9rem;
}

.bp-rte-toolbar .form-select-wrap.bp-rte-select--weight {
  min-width: 5.75rem;
  max-width: 7.5rem;
}

.bp-rte-toolbar .form-select-trigger {
  height: var(--bp-field-height);
  min-height: var(--bp-field-height);
  padding: 0 var(--space-9);
  font-size: var(--bp-field-font-size);
  line-height: var(--bp-field-line-height);
}

/* Editable count: full-width number field; caret overlays the right edge (wheel only). */
.bp-dur-wrap.bp-dtp-wrap.bp-dur-wrap--editable {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.bp-dur-wrap--editable > .bp-dur-count-input.form-input {
  display: block;
  width: 100%;
  min-width: 0;
  padding-right: calc(var(--bp-field-height) + var(--space-4));
  -moz-appearance: textfield;
  appearance: textfield;
}

.bp-dur-wrap--editable > .bp-dur-trigger--caret {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  flex: none;
  width: var(--bp-field-height);
  min-width: var(--bp-field-height);
  max-width: var(--bp-field-height);
  height: var(--bp-field-height);
  min-height: var(--bp-field-height);
  padding: 0;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bp-dur-wrap--editable > .bp-dur-trigger--caret:hover:not(:disabled),
.bp-dur-wrap--editable > .bp-dur-trigger--caret:focus-visible,
.bp-dur-wrap--editable.is-open > .bp-dur-trigger--caret {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.bp-dur-wrap--editable > .bp-dur-trigger--caret .form-select-trigger-label,
.bp-dur-wrap--editable > .bp-dur-trigger--caret .bp-dur-trigger-label {
  display: none;
}

/* RTE toolbar keeps the compact joined number + caret control. */
.bp-rte-size-wrap .bp-dur-wrap.bp-dtp-wrap.bp-dur-wrap--editable {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: 0;
}

.bp-rte-size-wrap .bp-dur-count-input.form-input,
.bp-rte-size-input.form-input {
  width: 100%;
  height: 1.85rem;
  min-height: 1.85rem;
  padding: 0 var(--space-14a) 0 var(--space-6);
  font-size: var(--bp-text-sm);
  line-height: 1.25;
  text-align: left;
  -moz-appearance: textfield;
  appearance: textfield;
}

.bp-rte-size-wrap .bp-dur-wrap--editable > .bp-dur-count-input.form-input {
  position: static;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 1.85rem;
  min-height: 1.85rem;
  padding: 0 var(--space-6);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: var(--space-6);
}

.bp-rte-size-wrap .bp-dur-wrap--editable > .bp-dur-trigger--caret {
  position: static;
  flex: 0 0 1.55rem;
  width: 1.55rem;
  min-width: 1.55rem;
  max-width: 1.55rem;
  height: 1.85rem;
  min-height: 1.85rem;
  padding: 0;
  border: 1px solid var(--bp-field-outline);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  background-color: var(--c-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bp-rte-size-wrap .bp-dur-trigger--caret .form-select-trigger-label,
.bp-rte-size-wrap .bp-dur-trigger--caret .bp-dur-trigger-label {
  display: none;
}

.bp-rte-size-input.form-input::-webkit-outer-spin-button,
.bp-rte-size-input.form-input::-webkit-inner-spin-button,
.bp-dur-count-input.form-input::-webkit-outer-spin-button,
.bp-dur-count-input.form-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.bp-rte-size-suffix {
  position: absolute;
  right: calc(1.55rem + var(--space-6));
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--bp-text-xs);
  font-weight: 600;
  color: var(--c-text-muted);
  pointer-events: none;
  z-index: 1;
}

.bp-rte-size-wrap:not(:has(.bp-dur-wrap--editable)) .bp-rte-size-suffix {
  right: var(--space-6);
}

.bp-rte-color-btn,
.bp-rte-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: var(--space-2a);
}

.bp-rte-icon-btn .bp-icon-mask,
.bp-rte-icon-btn .pb-icon-mask {
  width: .95rem;
  height: .95rem;
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--pb-icon, var(--bp-icon)) center / contain no-repeat;
  mask: var(--pb-icon, var(--bp-icon)) center / contain no-repeat;
}

.bp-rte-color-swatch {
  --bp-swatch-check-a: #fff;
  --bp-swatch-check-b: #ccc;
  --bp-swatch-check-size: 6px;
  position: relative;
  width: .9rem;
  height: .9rem;
  border-radius: .2rem;
  border: 1px solid color-mix(in srgb, var(--c-border, #d1d5db) 80%, #000);
  overflow: hidden;
  background-color: var(--bp-swatch-check-a);
  background-image:
    linear-gradient(var(--bp-color-swatch, #111827), var(--bp-color-swatch, #111827)),
    repeating-conic-gradient(
      var(--bp-swatch-check-b) 0% 25%,
      var(--bp-swatch-check-a) 0% 50%
    );
  background-size:
    100% 100%,
    var(--bp-swatch-check-size) var(--bp-swatch-check-size);
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, repeat;
}

[data-theme="dark"] .bp-rte-color-swatch {
  --bp-swatch-check-a: #fff;
  --bp-swatch-check-b: #ccc;
}

.bp-rte-body {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 5.5rem;
  max-height: 20rem;
  padding: 0;
  /* Match .form-textarea / outlined form controls */
  box-sizing: border-box;
  border: 1px solid var(--bp-field-outline);
  border-radius: var(--radius);
  background-color: var(--c-surface);
  box-shadow: none;
  color: var(--c-text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
  overflow: hidden;
}

/* Fake selection highlight while toolbar / menus hold focus */
.bp-rte-sel-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.bp-rte-sel-mark {
  position: absolute;
  border-radius: 1px;
  background: color-mix(in srgb, var(--c-primary, #5050ff) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary, #5050ff) 22%, transparent);
}

.bp-rte.is-toolbar-session .bp-rte-editor {
  /* Native selection is often cleared when focus leaves; overlay carries the cue. */
  caret-color: transparent;
}

.bp-rte-body:hover {
  border-color: var(--bp-field-outline-hover);
  background-color: var(--c-surface);
}

.bp-rte:focus-within .bp-rte-body {
  border-color: var(--bp-field-outline-focus);
  background-color: var(--c-surface);
  box-shadow: var(--bp-field-ring);
}

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

.bp-rte-editor {
  flex: 1 1 auto;
  min-height: 5.25rem;
  max-height: none;
  overflow: auto;
  /* normal - pre-wrap was preserving pretty-print indent from layout HTML */
  white-space: normal;
  word-break: break-word;
  resize: none;
  padding: var(--space-8) var(--space-11) var(--space-14a);
  font-size: var(--bp-field-font-size);
  line-height: 1.5;
  color: inherit;
  background: transparent;
  outline: none;
  border: 0;
  box-shadow: none;
}

.bp-rte-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--c-text-muted, var(--c-muted, #9ca3af));
  pointer-events: none;
}

.bp-rte-resize {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-1);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  border-radius: .2rem;
  background: transparent;
  color: var(--c-text-muted);
  cursor: ns-resize;
  touch-action: none;
}

.bp-rte-resize:hover,
.bp-rte-resize:focus-visible {
  color: var(--c-text);
  outline: none;
}

.bp-rte-resize .bp-icon-mask {
  width: .85rem;
  height: .85rem;
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--pb-icon, var(--bp-icon)) center / contain no-repeat;
  mask: var(--pb-icon, var(--bp-icon)) center / contain no-repeat;
}

body.bp-rte-resizing {
  cursor: ns-resize !important;
  user-select: none !important;
}

body.bp-rte-resizing iframe {
  pointer-events: none;
}

.bp-rte-editor p {
  margin: 0 0 .5em;
}

.bp-rte-editor p:last-child {
  margin-bottom: 0;
}

.bp-rte-editor ul,
.bp-rte-editor ol {
  margin: .35em 0 .5em;
  padding-left: 1.35em;
}

.bp-rte-editor ul.bp-checklist {
  list-style: none;
  padding-left: 0;
}

.bp-rte-editor ul.bp-checklist > li {
  position: relative;
  padding-left: 1.45em;
}

.bp-rte-editor ul.bp-checklist > li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--c-primary, #5050ff);
}

.bp-panel-head-label {
  flex: 0 0 auto;
}

.bp-panel-head--inbox .msg-select-all-cb {
  --checkbox-size: 1rem;
}

/* Messages page chrome → /static/css/bp-messages.css */

.bp-split__scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.bp-split__scroll .bp-selection-bar {
  flex-shrink: 0;
}

.card-body--flush>.bp-selection-bar[hidden]+.contacts-table-wrap {
  padding-top: var(--bp-card-inset);
}

.card-body--flush>.bp-selection-bar:not([hidden])+.contacts-table-wrap {
  padding-top: 0;
}

@media (max-width:768px) {
.bp-toolbar {
    width: 100%;
  }
}

@media (max-width:480px) {
.bp-toolbar>* {
    width: 100%;
  }
}

/* ── 24. Bulk / selection bar ─────────────────────────────────────────────── */
/*
 * Optional action strip when rows are checked (e.g. Messages Mark Read / Delete).
 * Browser-list tables (Contacts, Voice AI calls, …) use meatball menus instead —
 * no “N selected” count.
 *
 * Inbox: bar sits between panel head and scroll body inside `.messages-inbox-body`.
 *
 * Bar:   .bp-selection-bar  (alias: .bp-bulk-bar)
 * Count: .bp-selection-count (optional; omit when actions alone are enough)
 */

.bp-table-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  min-width: 0;
}

.bp-table-shell > .card {
  min-width: 0;
}

.bp-selection-bar,
.bp-bulk-bar,
.bp-selection-bar {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  flex-shrink: 0;
  margin: 0;
  padding: var(--space-8) var(--space-11);
  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],
.bp-selection-bar[hidden] {
  display: none !important;
}

.bp-selection-count,
.bp-bulk-count,
.contacts-bulk-count,
.msg-bulk-count {
  flex: 1;
  min-width: 0;
  margin-right: var(--space-3);
  font-size: var(--bp-text-sm);
  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 {
  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: var(--space-14);
  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: var(--bp-text-sm);
  line-height: 1.55;
  color: var(--c-text-muted);
}

.lead-order-place-field-static {
  display: flex;
  align-items: center;
  gap: var(--space-8a);
  padding: var(--space-9) var(--space-11);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: var(--bp-text-lg);
}

.lead-order-receipt {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.lead-order-receipt__head {
  padding: var(--space-11) var(--space-13);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  font-weight: 600;
  font-size: var(--bp-text-md);
}

.lead-order-receipt__body {
  padding: var(--space-12) var(--space-13);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  font-size: var(--bp-text-md);
}

.lead-order-receipt__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-11);
}

.lead-order-receipt__row--total {
  font-weight: 700;
  padding-top: var(--space-8);
  border-top: 1px solid var(--c-border);
}

.lead-order-receipt__foot {
  padding: var(--space-10) var(--space-13);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  font-size: var(--bp-text-sm);
  color: var(--c-text-muted);
}

.lead-order-receipt-loading {
  font-size: var(--bp-text-md);
  color: var(--c-text-muted);
}

/* ── Bill-day (day-of-month) picker ─────────────────────────────────────── */

.sub-daypicker {
  position: relative;
}

.sub-daypicker-trigger {
  width: 100%;
}

.sub-daypicker-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--space-8);
  box-shadow: none;
}

.sub-daypicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.sub-daypicker-day {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: var(--space-6) 0;
  font-size: var(--bp-text-md);
  color: var(--c-text);
  cursor: pointer;
  text-align: center;
  transition: background .12s ease, color .12s ease;
}

.sub-daypicker-day:hover:not(.is-selected) {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg, var(--c-surface)));
}

.sub-daypicker-day.is-selected {
  color: var(--c-primary-color, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary-light) 72%, var(--bp-card-bg, var(--c-surface)));
  font-weight: 600;
  box-shadow: var(--bp-shadow-hover);
}

.sub-daypicker-grid.bp-slide-select {
  --bp-slide-select-radius: 6px;
  position: relative;
  isolation: isolate;
}

.sub-daypicker-grid.bp-slide-select--live .sub-daypicker-day {
  position: relative;
  z-index: 1;
}

.sub-daypicker-grid.bp-slide-select--live .sub-daypicker-day.is-selected,
.sub-daypicker-grid.bp-slide-select--live .sub-daypicker-day.is-selected:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bp-slide-select-fg, var(--c-primary-color, var(--c-primary)));
}

@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: var(--radius-sm);
  overflow: hidden;
  border: none;
  outline: none;
  box-shadow: none;
}

.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);
}

/* Lead order rows - progress + divider accent matches status pill */
.lead-order-row {
  --lead-order-accent: var(--c-primary-color, var(--c-primary));
}

.lead-order-row--warning {
  --lead-order-accent: var(--c-warning);
}

.lead-order-row--success {
  --lead-order-accent: var(--c-success);
}

.lead-order-row--muted {
  --lead-order-accent: var(--c-text-muted);
}

.lead-order-row td {
  border-bottom-color: color-mix(in srgb, var(--lead-order-accent) 26%, var(--c-border));
}

.lead-order-row .lead-order-progress-fill {
  background: var(--lead-order-accent);
}

.table tbody tr.lead-order-row:hover td {
  background: color-mix(in srgb, var(--lead-order-accent) 9%, var(--bp-card-bg));
}

/* Daily max slider - client lead orders (layout + range chrome; tokens from bp-system) */
.daily-max-slider-panel {
  margin-top: var(--space-5);
  padding: var(--space-14a) 0 var(--space-1);
}

.daily-max-slider-controls {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.daily-max-slider-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
}

.daily-max-slider-step--prev::before,
.daily-max-slider-step--next::before {
  content: '';
  display: block;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.daily-max-slider-step--prev::before {
  transform: rotate(135deg);
  margin-left: var(--space-1b);
}

.daily-max-slider-step--next::before {
  transform: rotate(-45deg);
  margin-right: var(--space-1b);
}

.daily-max-slider-track-col {
  --daily-max-thumb: 1.375rem;
  --daily-max-thumb-half: calc(var(--daily-max-thumb) / 2);
  --pct: 0;
}

.daily-max-slider-track-slot {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-top: 2.65rem;
}

.daily-max-slider-thumb-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  min-width: 2.35rem;
  padding: var(--space-2b) .62rem .32rem;
  border-radius: 999px;
  background: var(--c-primary-color, var(--c-primary));
  color: #fff;
  font-size: var(--bp-text-lg);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 3;
}

.daily-max-slider-thumb-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--c-primary-color, var(--c-primary));
}

.daily-max-slider-track-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 2rem;
}

.daily-max-slider-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 7px;
  width: calc(
    var(--daily-max-thumb-half) +
    (100% - var(--daily-max-thumb)) * var(--pct) / 100
  );
  border-radius: 999px;
  background: var(--c-primary-color, var(--c-primary));
  pointer-events: none;
  z-index: 1;
}

.daily-max-slider {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 2rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.daily-max-slider:focus {
  outline: none;
}

.daily-max-slider::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background: var(--c-border);
}

.daily-max-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: -0.34rem;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--bp-shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.daily-max-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--bp-shadow-hover);
}

.daily-max-slider:active::-webkit-slider-thumb {
  transform: scale(1.04);
}

.daily-max-slider::-moz-range-track {
  height: 7px;
  border: none;
  border-radius: 999px;
  background: var(--c-border);
}

.daily-max-slider::-moz-range-progress {
  height: 7px;
  border-radius: 999px;
  background: var(--c-primary-color, var(--c-primary));
}

.daily-max-slider::-moz-range-thumb {
  width: 1.375rem;
  height: 1.375rem;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--bp-shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.daily-max-slider:focus-visible::-moz-range-thumb {
  box-shadow: var(--bp-shadow-hover);
}

.daily-max-slider:active::-moz-range-thumb {
  transform: scale(1.04);
}

.daily-max-slider-ticks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding: 0 var(--daily-max-thumb-half);
  font-size: var(--bp-text-sm);
  font-weight: 500;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.pause-order-illustration,
.cancel-order-illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--space-13b) auto 0;
  text-align: center;
}

.pause-order-illustration {
  color: var(--c-warning);
}

.cancel-order-illustration {
  color: var(--c-danger);
}

.pause-order-illustration__svg,
.cancel-order-illustration__svg {
  display: block;
}

.pause-order-illustration__track,
.cancel-order-illustration__track {
  fill: none;
  stroke: var(--c-border);
  stroke-width: 7;
}

.pause-order-illustration__progress,
.cancel-order-illustration__progress {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}

.pause-order-illustration__icon,
.cancel-order-illustration__icon {
  color: currentColor;
}

.pause-order-illustration__caption,
.cancel-order-illustration__caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-10a);
}

.pause-order-illustration__type,
.cancel-order-illustration__type {
  font-size: var(--bp-text-sm);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-text-muted);
}

.pause-order-illustration__ratio,
.cancel-order-illustration__ratio {
  font-size: var(--bp-text-lg);
  font-weight: 600;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.pause-order-illustration__ratio strong,
.cancel-order-illustration__ratio strong {
  color: currentColor;
}

.cancel-order-illustration__sub {
  font-size: var(--bp-text-sm);
  font-weight: 500;
  color: color-mix(in srgb, var(--c-danger) 72%, var(--c-text-muted));
  font-variant-numeric: tabular-nums;
}

.cancel-order-refund {
  margin-top: var(--space-5);
  padding: var(--space-11) var(--space-13);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-success) 10%, var(--bp-card-bg));
  text-align: center;
}

.cancel-order-refund__amount {
  margin: 0;
  font-size: var(--bp-text-md);
  font-weight: 600;
  color: var(--c-success);
}

.cancel-order-refund__hint {
  margin: var(--space-5) 0 0;
  font-size: var(--bp-text-sm);
  line-height: 1.45;
}

.modal-progress {
  margin-top: var(--space-11);
}

.modal-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-11);
  margin-bottom: var(--space-6);
}

.modal-progress-track {
  height: 8px;
  background: var(--c-border);
  border-radius: var(--radius-sm);
  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 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-7);
  padding: var(--space-9) var(--space-11);
  background: var(--bp-card-bg);
  border: 1px solid transparent;
  border-radius: var(--bp-card-radius);
  font-size: var(--bp-text-sm);
  color: var(--c-text);
  box-shadow: var(--bp-shadow);
}

.bp-banner-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-5) var(--space-10a);
  font-size: var(--bp-text-sm);
  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 {
  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 → /static/css/bp-auth.css ── */

/* ── 28. Loading (spinner) ───────────────────────────────────────────────── */

.spinner,
.bp-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  /* Match folder / slide-select jelly primary (agency brand), not theme --c-primary. */
  --bp-spinner-color: var(--bp-jelly-fg, var(--c-primary-color, var(--c-primary)));
  border: 2px solid color-mix(in srgb, var(--bp-spinner-color) 20%, transparent);
  border-top-color: var(--bp-spinner-color);
  border-radius: 50%;
  animation: bp-spin .7s linear infinite;
}

@keyframes bp-spin {
  to { transform: rotate(360deg); }
}

/* Path editor: keep the topbar live until path data + canvas are in. */
.pb-editor-view.is-booting .pb-editor-body {
  visibility: hidden;
}

/* ── Impersonation banner (admin viewing another account) ─────────────────── */

.bp-impersonation-banner-icon {
  flex-shrink: 0;
}

.bp-impersonation-banner-link {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
}

/* Legacy slots - banners mount on #bp-overlay-banner-stack (no layout push). */
#impersonation-banner-slot,
#connectivity-banner-slot,
#dashboard-banner-slot:empty,
.dashboard-banner-slot:empty,
#setup-banner-slot:empty {
  display: none;
}

/* Shared fixed overlay stack (connectivity, impersonation, dashboard alerts). */
#bp-overlay-banner-stack {
  --bp-overlay-banner-stack-gap: var(--sidebar-inset, var(--space-8));
  position: fixed;
  top: var(--bp-preview-banner-inset, var(--bp-card-inset, .5rem));
  left: var(--bp-preview-banner-inset, var(--bp-card-inset, .5rem));
  right: var(--bp-preview-banner-inset, var(--bp-card-inset, .5rem));
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-bottom: var(--bp-overlay-banner-stack-gap);
  pointer-events: none;
}

html:has(.dash) #bp-overlay-banner-stack {
  left: var(--sidebar-main-offset);
  right: var(--sidebar-inset);
  transition: left var(--sidebar-dur, 280ms) var(--ease, cubic-bezier(.4, 0, .2, 1));
}

html:has(.dash.sidebar-collapsed) #bp-overlay-banner-stack {
  left: var(--sidebar-main-offset-collapsed);
}

/* Reserve space below the overlay stack so content clears the banner + gap. */
html:has(.dash) .main {
  padding-top: var(--bp-overlay-banner-stack-h, 0px);
  box-sizing: border-box;
  transition: padding-top .28s ease;
}

html.pb-editor-active .main {
  padding-top: 0;
}

#bp-overlay-banner-stack > * {
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
}

#bp-overlay-banner-stack .bp-overlay-banner--passive {
  pointer-events: none;
}

#bp-overlay-banner-stack .bp-preview-banner,
#bp-overlay-banner-stack .bp-impersonation-banner {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
}

#bp-overlay-banner-stack .dashboard-banner,
#bp-overlay-banner-stack .setup-banner {
  margin: 0;
}

#bp-overlay-banner-stack > [hidden]:not(.is-banner-hiding) {
  display: none !important;
}

.bp-impersonation-banner {
  --bp-impersonation-banner-inset: var(--bp-card-inset, .5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-8) var(--space-13);
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--radius, 8px);
  background: var(--c-primary, #f59e0b);
  color: #fff;
  font-size: var(--bp-text-md);
  font-weight: 400;
  text-align: center;
  line-height: 1.4;
  box-shadow: none;
}

/* ── 29. Route / page loading toast ──────────────────────────────────────── */

.bp-route-loader,
.page-nav-loader {
  display: none;
  position: fixed;
  right: max(var(--space-13), env(safe-area-inset-right, 0px));
  bottom: max(var(--space-13), env(safe-area-inset-bottom, 0px));
  left: auto;
  top: auto;
  z-index: 60000;
  opacity: 1;
  transition: opacity .24s var(--ease);
  pointer-events: none;
  padding: 0;
}

/* Dashboard: stay in the main column, bottom-right (exclude sidebar). */
html:has(.dash) .bp-route-loader,
html:has(.dash) .page-nav-loader {
  right: calc(var(--sidebar-inset) + max(var(--space-11), env(safe-area-inset-right, 0px)));
  bottom: calc(var(--sidebar-inset) + max(var(--space-11), env(safe-area-inset-bottom, 0px)));
  left: auto;
  top: auto;
  transition: opacity .24s var(--ease);
}

html:has(.dash.sidebar-collapsed) .bp-route-loader,
html:has(.dash.sidebar-collapsed) .page-nav-loader {
  right: calc(var(--sidebar-inset) + max(var(--space-11), env(safe-area-inset-right, 0px)));
}

.bp-route-loader.is-active,
.bp-route-loader.is-fading,
.page-nav-loader.is-active,
.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;
}

.page-nav-loader__toast,
.bp-route-loader .toast {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  pointer-events: none;
  align-items: center;
  justify-content: flex-start;
  /* Fixed box so agency fonts / page CSS can't resize it between routes. */
  box-sizing: border-box;
  width: 8.75rem;
  min-width: 8.75rem;
  max-width: 8.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  padding: 0 .95rem;
  gap: var(--space-9);
  font-size: var(--bp-text-md);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  /* Pill corners - more rounded than standard notification toasts. */
  border-radius: 999px;
  overflow: visible;
  will-change: auto;
  /* Same primary jelly wash as active folder chips (not toast.info cyan). */
  --bp-jelly-accent: var(--c-primary-color, var(--c-primary));
  --bp-jelly-accent-light: var(--c-primary-light);
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: var(--bp-jelly-accent);
  background: var(--bp-jelly-bg);
  color: var(--bp-jelly-fg);
}

.page-nav-loader__spinner,
.bp-route-loader .spinner {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-width: 2px;
}

.page-nav-loader__label {
  flex: none;
  line-height: 1;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .page-nav-loader,
  .bp-route-loader {
    transition: none !important;
  }

  .page-nav-loader__spinner,
  .bp-route-loader .spinner {
    animation: none !important;
    border-top-color: transparent;
    border-right-color: var(--bp-spinner-color, var(--bp-jelly-fg, var(--c-primary-color, var(--c-primary))));
  }
}

/* ── 30. Empty / upgrade gate ────────────────────────────────────────────── */

.bp-empty-state,
.upgrade-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-11);
  padding: var(--space-17) var(--space-15);
  color: var(--c-text-muted);
}

.bp-empty-state-title,
.upgrade-gate-title {
  margin: 0;
  font-size: var(--bp-text-lg);
  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 ─────────────────────────────────────────────────────── */

/* ── Notification pin (corner-centered; used by bell, Save, account, etc.) ── */

[data-notification] {
  --bp-notification-dot-size: 0.5rem;
  --bp-notification-dot-color: var(--c-warning);
  position: relative;
  overflow: visible;
}

[data-notification].has-notification::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--bp-notification-dot-size);
  height: var(--bp-notification-dot-size);
  border: 0;
  border-radius: 50%;
  outline: none;
  box-shadow: none;
  background: var(--bp-notification-dot-color);
  transform: translate(50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.form-group[data-notification].has-notification::after {
  display: none;
}

/* Account announce: zero-size pin on the avatar corner; inherits the same ::after. */
.sidebar-user-trigger > .sidebar-account-announce-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

.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: var(--space-8); }
.gap-3 { gap: var(--space-11); }
.gap-4 { gap: var(--space-13); }
.w-full { width: 100%; }
.hidden { display: none !important; }
.text-sm { font-size: var(--bp-text-md); }
.text-xs { font-size: var(--bp-text-sm); }
.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 → /static/css/bp-calendar.css ── */

/* ── 33. Analytics detail stacks (charts → /static/css/bp-charts.css) ───── */
/*
 * Detail stack: bold title + note + meta - paths, version rows, audit entries
 * Charts (.bp-chart-*, .analytics-*) live in bp-charts.css (route-loaded).
 */

.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: var(--space-6) var(--space-8);
  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: var(--bp-text-sm);
  line-height: 1.4;
  font-weight: 400;
  color: var(--c-text-muted);
}

.bp-detail-meta,
.pb-path-publish-meta {
  margin: 0;
  font-size: var(--bp-text-sm);
  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: var(--space-3);
}

.bp-detail-note + .bp-detail-meta,
.pb-path-publish-note + .pb-path-publish-meta {
  margin-top: var(--space-1);
}

.browser-list-notes--stack {
  white-space: pre-line;
  line-height: 1.35;
  vertical-align: top;
}

/* Charts → /static/css/bp-charts.css */

/* ── 34. Messaging bubbles → /static/css/bp-messages.css ── */

/* ── 35. Panel resizer (split-view drag handle) ──────────────────────────── */
/*
 * Gutter between resizable columns/rows - contact profile, messages, calendar, voice AI, path builder.
 *
 * Handle: `.bp-resizer`  (+ `.bp-resizer--row` for horizontal)
 * Grip: center line only (no dots). Primary tint on hover/drag.
 */

/* Sidebar seam handle is `.bp-resizer.sidebar-resizer` (fixed, out of flow) -
   exclude it so these in-flow panel rules cannot reintroduce a main-column gap. */
.bp-resizer:not(.sidebar-resizer),
.bp-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:not(.sidebar-resizer)::before,
.bp-resizer::before {
  content: "";
  position: absolute;
  top: var(--space-8);
  bottom: var(--space-8);
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: color-mix(in srgb, var(--c-border) 78%, transparent);
  opacity: 0;
  pointer-events: none;
  transition:
    width var(--dur) var(--ease),
    background var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.bp-resizer:not(.sidebar-resizer)::after,
.bp-resizer::after {
  display: none;
}

.bp-resizer:not(.sidebar-resizer):hover::before,
.bp-resizer:hover::before,
.bp-resizer:not(.sidebar-resizer).is-dragging::before,
.bp-resizer.is-dragging::before,
.bp-resizer:not(.sidebar-resizer):focus-visible::before,
.bp-resizer:focus-visible::before {
  opacity: 1;
  width: 2px;
  background: color-mix(in srgb, var(--c-primary) 42%, var(--c-border));
}

.bp-resizer:not(.sidebar-resizer):focus,
.bp-resizer:focus,
.bp-resizer:not(.sidebar-resizer):focus-visible,
.bp-resizer:focus-visible {
  outline: none;
}

/* Horizontal - must beat `.bp-resizer:not(.sidebar-resizer)::before` (0,2,1). */
.bp-resizer.bp-resizer--row {
  min-width: 0;
  min-height: var(--bp-resizer-hit);
  width: auto;
  align-self: stretch;
  justify-self: stretch;
  cursor: row-resize;
}

.bp-resizer.bp-resizer--row::before {
  top: 50%;
  bottom: auto;
  left: var(--space-8);
  right: var(--space-8);
  width: auto;
  height: 1px;
  transform: translateY(-50%);
}

.bp-resizer.bp-resizer--row::after {
  display: none;
}

.bp-resizer.bp-resizer--row:hover::before,
.bp-resizer.bp-resizer--row.is-dragging::before,
.bp-resizer.bp-resizer--row:focus-visible::before {
  opacity: 1;
  width: auto;
  height: 2px;
  background: color-mix(in srgb, var(--c-primary) 42%, var(--c-border));
}

/* Parent grids - lock cursor while dragging */
.cp-cards-grid.is-resizing *,
.bp-split--3col.is-resizing *,
.bp-split--3col.is-resizing *,
.bp-split--3col.is-resizing *,
.bp-split--2col-resizable.is-resizing *,
.bp-split--2col-resizable.is-resizing,
.bp-split--2col-resizable.is-resizing *,
.bp-split--2col-resizable.is-resizing,
.cal-panel.cal-cards-grid.is-resizing *,
.cal-panel.cal-cards-grid.is-resizing {
  cursor: col-resize !important;
}

.cal-sidebar.is-resizing-row,
.cal-sidebar.is-resizing-row *,
.cp-col--left.is-resizing-row,
.cp-col--left.is-resizing-row *,
.cp-col--right.is-resizing-row,
.cp-col--right.is-resizing-row * {
  cursor: row-resize !important;
}

/* ── Theme wipe-over (View Transitions) ─────────────────────────────────────
 * Fired from toggleTheme via document.startViewTransition. Only theme flips
 * start a root VT today (cross-document nav VTs stay disabled below).
 *
 * Only kill transitions for the brief capture window (.theme-switching). The
 * wipe paints ::view-transition-* snapshots, so a document-wide
 * `transition: none` for the whole animation is unnecessary cost.
 *
 * First-frame rules:
 *  - clip-path starts at 0 on the new snapshot (not only in @keyframes from),
 *    otherwise the new theme paints fully for a frame (bright flash).
 *  - ::view-transition-group(root) must not morph size/position, or the
 *    circle origin jumps before the wipe runs.
 */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
  transition-delay: 0s !important;
}

@property --bp-theme-vt-x {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 50%;
}
@property --bp-theme-vt-y {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 50%;
}
@property --bp-theme-vt-r {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vmax;
}

@supports (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    html.theme-vt::view-transition {
      /* Hold the outgoing canvas color so the live (already-new) page
         cannot flash through before snapshots cover the viewport. */
      background: var(--bp-theme-vt-hold, transparent);
    }

    html.theme-vt::view-transition-group(root) {
      animation: none;
    }

    html.theme-vt::view-transition-old(root),
    html.theme-vt::view-transition-new(root) {
      animation: none;
      mix-blend-mode: normal;
      /* Keep tall pages (calendar) from collapsing during the snapshot. */
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: top left;
    }

    html.theme-vt::view-transition-old(root) {
      z-index: 1;
    }

    html.theme-vt::view-transition-new(root) {
      z-index: 2;
      /* Specified value = first paint. Keyframes then expand the circle. */
      clip-path: circle(0px at var(--bp-theme-vt-x, 50%) var(--bp-theme-vt-y, 50%));
      animation: bp-theme-wipe-in 720ms cubic-bezier(.22, 1, .36, 1) both;
      will-change: clip-path;
    }
  }
}

@keyframes bp-theme-wipe-in {
  from {
    clip-path: circle(0px at var(--bp-theme-vt-x, 50%) var(--bp-theme-vt-y, 50%));
  }
  to {
    clip-path: circle(var(--bp-theme-vt-r, 100vmax) at var(--bp-theme-vt-x, 50%) var(--bp-theme-vt-y, 50%));
  }
}

/* GPU magic-lamp cover: hide DOM host while a live GL canvas paints the jelly. */
.is-bp-gl-host,
body > .pb-canvas-dnd-float.is-dnd-gl-host,
body > .bp-dnd-float.is-dnd-gl-host {
  opacity: 0 !important;
}

/* ── 31. Cross-document view transitions ─────────────────────────────────────
 * DISABLED (optional polish - safe to re-enable). The calendar-squish bug was
 * actually caused by the #bp-page-root wrapper breaking the flex height chain,
 * now fixed above. These view-transition rules are parked here for reference.
 * If you re-enable them, also force the root snapshots to `height: 100%`
 * (::view-transition-old(root)/new(root)) so full-height pages like the calendar
 * keep their height during the cross-fade snapshot.
 */
/*
@view-transition {
  navigation: auto;
}

.sidebar {
  view-transition-name: bp-sidebar;
}

.topbar {
  view-transition-name: bp-topbar;
}

::view-transition-old(bp-sidebar),
::view-transition-new(bp-sidebar),
::view-transition-old(bp-topbar),
::view-transition-new(bp-topbar) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}
*/

/* Team Access packs checklist */
.agency-access-packs {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.agency-access-pack {
  display: flex;
  align-items: flex-start;
  gap: var(--space-9);
  margin: 0;
  font-size: var(--bp-text-md);
  line-height: 1.35;
  color: var(--c-text);
  cursor: pointer;
  user-select: none;
}
.agency-access-pack input {
  margin: var(--space-1) 0 0;
  flex: 0 0 auto;
}
.agency-access-pack strong {
  font-weight: 600;
}