/* =====================================================================
   BCS kit tokens and classes, shared by the UI showcase and the templates.
   Every value lives here as a --bcs-* custom property; Tailwind utilities
   (bg-primary, text-on-frame …) read them through the @theme inline block
   injected by bcs-kit.js. Showcase only: not yet ported to resources/css/app.css.
   ===================================================================== */

/* Layer order, declared before any @layer block below. This file loads before Tailwind, so without this line
   the first "@layer components" here would rank components below Tailwind's base (preflight), and preflight's
   padding:0 / border:0 would beat every kit component rule. */
@layer theme, base, components, utilities;

/* ---------- Scheme tokens: Navy is the default ---------- */
:root,
[data-scheme="navy"] {
    --bcs-frame: #1a2a3e;
    --bcs-frame-deep: #142236;
    --bcs-on-frame: #ffffff;
    --bcs-on-frame-muted: rgb(255 255 255 / 0.64);
    --bcs-frame-hover: rgb(255 255 255 / 0.08);
    --bcs-frame-active: rgb(255 255 255 / 0.14);
    --bcs-frame-indicator: #60a5fa;
    --bcs-primary: #2563eb;
    --bcs-primary-hover: #1d4ed8;
    --bcs-primary-soft: #dbeafe;
    --bcs-primary-strong: #1e40af;
    --bcs-on-primary: #ffffff;
    --bcs-focus: rgb(37 99 235 / 0.4);
}
[data-scheme="ocean"] {
    --bcs-frame: #0c3b4c;
    --bcs-frame-deep: #082c39;
    --bcs-frame-indicator: #22d3ee;
    --bcs-primary: #0e7490;
    --bcs-primary-hover: #155e75;
    --bcs-primary-soft: #cffafe;
    --bcs-primary-strong: #164e63;
    --bcs-focus: rgb(14 116 144 / 0.4);
}
[data-scheme="indigo"] {
    --bcs-frame: #1e1b4b;
    --bcs-frame-deep: #17153a;
    --bcs-frame-indicator: #818cf8;
    --bcs-primary: #4f46e5;
    --bcs-primary-hover: #4338ca;
    --bcs-primary-soft: #e0e7ff;
    --bcs-primary-strong: #3730a3;
    --bcs-focus: rgb(79 70 229 / 0.4);
}
[data-scheme="graphite"] {
    --bcs-frame: #22272e;
    --bcs-frame-deep: #1a1e24;
    --bcs-frame-indicator: #60a5fa;
    --bcs-primary: #2563eb;
    --bcs-primary-hover: #1d4ed8;
    --bcs-primary-soft: #dbeafe;
    --bcs-primary-strong: #1e40af;
    --bcs-focus: rgb(37 99 235 / 0.4);
}

/* ---------- Fixed tokens (same in every scheme) ---------- */
:root {
    --bcs-page: #f4f6f9;
    --bcs-surface: #ffffff;
    --bcs-surface-muted: #f8fafc;
    --bcs-edge: #e5e7eb;
    --bcs-ink: #0f172a;
    --bcs-ink-muted: #475569;
    --bcs-ink-subtle: #64748b;
    --bcs-success: #15803d;
    --bcs-success-soft: #dcfce7;
    --bcs-success-strong: #166534;
    --bcs-warning: #f59e0b;
    --bcs-warning-soft: #fef3c7;
    --bcs-warning-strong: #92400e;
    --bcs-danger: #dc2626;
    --bcs-danger-soft: #fee2e2;
    --bcs-danger-strong: #991b1b;
    --bcs-info: #0369a1;
    --bcs-info-soft: #e0f2fe;
    --bcs-info-strong: #075985;
    --bcs-accent: #7c3aed;
    --bcs-accent-soft: #ede9fe;
    --bcs-accent-strong: #5b21b6;
    --bcs-rail: 56px;
    --bcs-rail-open: 192px;
}

/* ---------- Kit classes (resources/css/app.css, colours tokenised) ---------- */
* { font-family: 'Inter', sans-serif; }
[x-cloak] { display: none !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.bcs-sidebar { background: linear-gradient(180deg, var(--bcs-frame) 0%, var(--bcs-frame-deep) 100%); transition: width 300ms ease-in-out; width: var(--bcs-rail); flex-shrink: 0; }
.bcs-sidebar:hover, .bcs-sidebar:focus-within { width: var(--bcs-rail-open); }
.bcs-sidebar .menu-label { opacity: 0; transition: opacity 200ms 100ms; }
.bcs-sidebar:hover .menu-label, .bcs-sidebar:focus-within .menu-label { opacity: 1; }
.bcs-sidebar .sub-menu-item { display: none; opacity: 0; transition: opacity 200ms 100ms; }
.bcs-sidebar:hover .sub-menu-item, .bcs-sidebar:focus-within .sub-menu-item { display: flex; opacity: 1; }
.bcs-sidebar .bcs-sidebar-footer button { visibility: hidden; }
.bcs-sidebar:hover .bcs-sidebar-footer button, .bcs-sidebar:focus-within .bcs-sidebar-footer button { visibility: visible; }

.queue-item { transition: all 0.2s ease; border-left: 3px solid transparent; cursor: pointer; }
.queue-item:hover { background-color: #f8fafc; border-left-color: var(--bcs-primary); }
.queue-item.active { background-color: var(--bcs-primary-soft); border-left-color: var(--bcs-primary); }
.queue-item.priority-high { border-left-color: var(--bcs-danger) !important; }
.queue-item.priority-medium { border-left-color: var(--bcs-warning) !important; }
.queue-item.priority-low { border-left-color: var(--bcs-success) !important; }

.channel-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; flex-shrink: 0; }
.channel-icon.call { background: var(--bcs-channel-call); }
.channel-icon.chat { background: var(--bcs-channel-chat); }
.channel-icon.email { background: var(--bcs-channel-email); }
.channel-icon.ticket { background: var(--bcs-channel-ticket); }

.collapsible-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.collapsible-content.expanded { max-height: 2000px; }
.section-header { cursor: pointer; user-select: none; }
.section-header:hover { background-color: #f3f4f6; }
.rotate-180 { transform: rotate(180deg); }

.tab-active { border-bottom: 2px solid var(--bcs-primary); color: var(--bcs-primary); }

/* .data-row and .stats-card (hover lifts) were removed in the fix round: nothing in the kit uses them.
   Tables use .bcs-table-row / .bcs-list; KPI tiles use the Stat card. */
.filter-chip { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.filter-chip:not(.active):hover { background-color: #e5e7eb; color: var(--bcs-ink); }
.filter-chip:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: 2px; }
.filter-chip.active { background-color: var(--bcs-primary); color: var(--bcs-on-primary); border-color: var(--bcs-primary); }

/* Same geometry as the toggle tokens (36 x 20, knob 16, 2px inset); the fallbacks cover pages without the Tailwind theme. */
.online-toggle { position: relative; flex-shrink: 0; width: var(--spacing-toggle-w, 36px); height: var(--spacing-toggle-h, 20px); border-radius: 9999px; cursor: pointer; transition: background-color 0.2s; }
.online-toggle .toggle-dot { position: absolute; top: 2px; left: 2px; width: var(--spacing-toggle-knob, 16px); height: var(--spacing-toggle-knob, 16px); border-radius: 50%; background: white; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); transition: transform 0.2s; }
.online-toggle.on { background-color: var(--bcs-success); }
.online-toggle.off { background-color: #d1d5db; }
.online-toggle.on .toggle-dot { transform: translateX(calc(var(--spacing-toggle-w, 36px) - var(--spacing-toggle-knob, 16px) - 4px)); }
.online-toggle[data-variant="setting"].on { background-color: var(--bcs-primary); }

@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse-dot { animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

.spinner-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.spinner-overlay .spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.3); border-top-color: var(--bcs-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.channel-control-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid #d1d5db; font-size: 0.875rem; transition: all 0.2s; cursor: pointer; background: transparent; color: #374151; }
.channel-control-btn:hover { background: #f3f4f6; }
.channel-control-btn.active-state { background: var(--bcs-warning-soft); color: var(--bcs-warning-strong); border-color: var(--bcs-warning); }
.channel-control-btn.end { background: var(--bcs-danger); color: white; border-color: var(--bcs-danger); }
.channel-control-btn.end:hover { background: var(--bcs-danger-strong); }

.channel-queue-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; background: #fff; transition: all 0.2s ease; }
.channel-queue-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.context-pane { width: 280px; min-width: 240px; flex-shrink: 0; border-left: 1px solid #e5e7eb; background: #fff; display: flex; flex-direction: column; overflow: hidden; order: 99; }

.chat-bubble { max-width: 75%; padding: 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; margin-bottom: 0.5rem; }
.chat-bubble.agent { background: #fff; border: 1px solid #e5e7eb; margin-right: auto; }
.chat-bubble.customer { background: var(--bcs-primary); color: var(--bcs-on-primary); margin-left: auto; }

.email-field { display: flex; align-items: center; padding: 0.5rem 1rem; border-bottom: 1px solid #e5e7eb; font-size: 0.875rem; }
.email-field label { width: 60px; font-weight: 500; color: #6b7280; flex-shrink: 0; }
.email-field input, .email-field span { flex: 1; border: none; outline: none; font-size: 0.875rem; color: #111827; }


/* =====================================================================
   2026-09-29 refresh (res1.txt). One block per work stream: keep your
   rules inside your own block so parallel edits never touch each other.
   ===================================================================== */

/* --- refresh: controls (size scale, banners, buttons, progress, data table) --- */
/* Selectable table rows (.bcs-table-row), in the same language as .queue-item.active. Put it on <tr tabindex="0">
   whose first cell holds the row's selection checkbox (in a .bcs-list, td data-col="sel"; behaviour: bcsRowSelect).
   The checkbox IS the selection state: the table stays a plain <table> and the rows carry no aria-selected (that is
   only valid with role="grid", which promises cell-by-cell arrow keys these tables don't have). Rows follow it:
     selected  a 20% primary tint (clearly darker than hover and than primary-soft, which is ~12%) + a 3px primary bar
               on the left; subtle text steps up to ink-muted on it, to keep 4.5:1
     focus     a 2px primary outline only, no fill, so a focused row never looks selected
   [aria-selected="true"] is honoured too, for a real role="grid". The bar is an inset shadow on the first cell, since
   <tr> shadows are unreliable (.bcs-list card rows put it on the row instead: profile block).
   In @layer components so a utility on the row can still override the fill. */
@layer components {
    .bcs-table-row { cursor: pointer; transition: background-color 0.15s ease; }
    .bcs-table-row > :first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow 0.15s ease; }
    .bcs-table-row:hover { background-color: var(--bcs-surface-muted); }
    .bcs-table-row:is([aria-selected="true"], :has(> :first-child input[type="checkbox"]:checked)) {
        background-color: color-mix(in srgb, var(--bcs-primary) 20%, var(--bcs-surface));
    }
    .bcs-table-row:is([aria-selected="true"], :has(> :first-child input[type="checkbox"]:checked)):hover {
        background-color: color-mix(in srgb, var(--bcs-primary) 24%, var(--bcs-surface));
    }
    .bcs-table-row:is([aria-selected="true"], :has(> :first-child input[type="checkbox"]:checked)) > :first-child { box-shadow: inset 3px 0 0 var(--bcs-primary); }
    .bcs-table-row:focus { outline: none; }
    .bcs-table-row:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) {
    .bcs-table-row, .bcs-table-row > :first-child { transition: none; }
}
/* Primary-soft chips (Active badge, Edit icon button) would vanish into a selected row: lift them to white; subtle
   text (emails, times) steps up to ink-muted to keep its contrast on the tint.
   Unlayered on purpose, so it beats the bg-primary-soft / text-ink-subtle utilities. */
.bcs-table-row:is([aria-selected="true"], :has(> :first-child input[type="checkbox"]:checked)) .bg-primary-soft { background-color: var(--bcs-surface); }
.bcs-table-row:is([aria-selected="true"], :has(> :first-child input[type="checkbox"]:checked)) :is(.text-ink-subtle, .bcs-list-label) { color: var(--bcs-ink-muted); }
/* Data table row actions in a .bcs-list--users list (td data-col="actions"; add .bcs-list--actions to the list):
   a table column from 860px, and in card rows the end of the second line, under the status badge. */
@layer components {
    .bcs-list--users.bcs-list--actions tbody tr { grid-template-areas: "user user status" "role active act"; }
    .bcs-list--users.bcs-list--actions.bcs-list--select tbody tr { grid-template-areas: "sel user user status" ". role active act"; }
    .bcs-list--actions td[data-col="actions"] { grid-area: act; justify-self: end; align-self: end; }
    @container (min-width: 860px) {
        .bcs-list--actions [data-col="actions"] { width: 1px; white-space: nowrap; }
    }
}
/* --- end refresh: controls --- */

/* --- refresh: toggles & sidebar (toggle geometry, sidebar footer) --- */
/* Toggles: one geometry for every switch (tokens --spacing-toggle-w/-h/-knob in bcs-kit.js: 36 x 20, knob 16). */
.online-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bcs-primary); }
@media (prefers-reduced-motion: reduce) {
    .online-toggle, .online-toggle .toggle-dot { transition: none; }
}

/* Sidebar: one continuous rail. The nav scrolls on its own and the footer is transparent under one
   inset hairline (drawn in markup), so there is no fade band between menu and footer.
   The 4px scrollbar lives in a stable gutter inside the right inset (4px padding + 4px gutter = 8px),
   so items keep the same 8px margins whether or not the menu overflows. */
.bcs-sidebar-nav { padding: 8px 4px 12px 8px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.bcs-sidebar-nav::-webkit-scrollbar { width: 4px; height: 0; }
.bcs-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.bcs-sidebar-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.bcs-sidebar:hover .bcs-sidebar-nav::-webkit-scrollbar-thumb,
.bcs-sidebar:focus-within .bcs-sidebar-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--bcs-on-frame) 22%, transparent); }
@supports not selector(::-webkit-scrollbar) {
    .bcs-sidebar-nav { padding-right: 0; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--bcs-on-frame) 22%, transparent) transparent; }
}
.bcs-sidebar-footer { background: transparent; }
/* Keyboard focus inside the rail: inset so the rail's overflow never clips it. */
.bcs-sidebar a:focus-visible, .bcs-sidebar button:focus-visible { outline: 2px solid var(--bcs-frame-indicator); outline-offset: -2px; }
/* --- end refresh: toggles & sidebar --- */

/* --- refresh: dropdowns & menus (.bcs-select, .bcs-menu, .bcs-menu-item) --- */
/* Contract (brief §2), used by every page:
     .bcs-select          native single <select>: field look + chevron. Size it with h-control-* and text-*.
     .bcs-menu-trigger    <button> that looks like .bcs-select; chevron turns over when aria-expanded="true".
       .is-active         an applied, clearable filter: primary tint, chevron replaced by a .bcs-menu-clear button.
     .bcs-menu-clear      small × button that sits inside the right end of an .is-active trigger (wrap both in .relative).
     .bcs-menu            floating panel: surface, 1px edge, 10px radius, layered soft shadow, 4px padding.
                          Opens under its trigger (absolute, left 0); data-align="end" right-aligns, data-side="top" opens upward.
     .bcs-popover         same surface for small forms (no inner padding, 12px radius).
     .bcs-menu-item       row: optional leading <i> (or .bcs-menu-dot / avatar), text, optional .bcs-menu-desc line, trailing .bcs-menu-meta or <kbd>.
                          .is-selected / [aria-selected|aria-checked="true"] shows a check; .is-danger is destructive;
                          :disabled / [aria-disabled="true"] greys it out.
     .bcs-menu-label      group heading (sentence case).    .bcs-menu-sep   1px divider.
     .bcs-menu-header     signed-in user block at the top.  .bcs-menu-search  search field inside a menu.
     .bcs-menu-list       scrolling group of items (max 240px).
     .bcs-menu-dot        8px status dot in the 16px leading slot, so dot rows line up with icon rows. Colour it with
                          bg-success / bg-warning / …; .is-hollow is a ring for "All" / "Any" rows.
   Sizes, padding-left and colours sit in @layer components so utilities can override them; only what must beat
   utilities (the chevron padding, states) is unlayered. Behaviour: Alpine.data('bcsMenu' | 'bcsListbox') in bcs-kit.js. */
:root {
    --bcs-field-border: #d1d5db;
    --bcs-field-border-hover: #9ca3af;
    --bcs-menu-hover: rgb(15 23 42 / 0.05);
    --bcs-menu-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 8px -2px rgb(15 23 42 / 0.06), 0 16px 32px -8px rgb(15 23 42 / 0.16);
    --bcs-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 6.25 8 9.75l3.5-3.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --bcs-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 6.25 8 9.75l3.5-3.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --bcs-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.5 3 3 6-7' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Every native single select in the kit gets the chevron, with no markup change. :where() keeps specificity 0,
   so any page or showcase rule still wins; being unlayered, the padding-right beats Tailwind's px-* (padding-inline). */
:where(select:not([multiple]):not([size])) {
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--bcs-chevron);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    padding-right: 32px;
    cursor: pointer;
}

@layer components {
    .bcs-select,
    .bcs-menu-trigger {
        height: 36px;
        padding-left: 12px;
        font-size: 13px;
        line-height: 18px;
        color: var(--bcs-ink);
        background-color: var(--bcs-surface);
        border: 1px solid var(--bcs-field-border);
        border-radius: 8px;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }
    .bcs-select:hover,
    .bcs-menu-trigger:hover { border-color: var(--bcs-field-border-hover); }
    .bcs-select:focus-visible,
    .bcs-menu-trigger:focus-visible { outline: none; border-color: var(--bcs-primary); box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-select:focus { outline: none; }
    /* Placeholder option chosen: read as a hint, not a value */
    .bcs-select:has(> option[value=""]:checked) { color: var(--bcs-ink-subtle); }
    .bcs-select option { color: var(--bcs-ink); }

    .bcs-menu-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding-right: 10px;
        text-align: left;
        white-space: nowrap;
    }
    .bcs-menu-trigger > i:first-child { flex: none; width: 16px; text-align: center; color: var(--bcs-ink-subtle); }
    .bcs-menu-trigger::after {
        content: "";
        flex: none;
        width: 16px;
        height: 16px;
        margin-left: auto;
        background-color: var(--bcs-ink-subtle);
        -webkit-mask: var(--bcs-chevron-mask) center / 16px 16px no-repeat;
        mask: var(--bcs-chevron-mask) center / 16px 16px no-repeat;
        transition: transform 0.15s ease;
    }
    .bcs-menu-trigger[aria-expanded="true"] { border-color: var(--bcs-primary); }
    .bcs-menu-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }

    .bcs-menu,
    .bcs-popover {
        position: absolute;
        z-index: 50;
        top: calc(100% + 6px);
        left: 0;
        max-width: calc(100vw - 32px);
        color: var(--bcs-ink);
        font-size: 13px;
        line-height: 18px;
        text-align: left;
        background-color: var(--bcs-surface);
        border: 1px solid var(--bcs-edge);
        box-shadow: var(--bcs-menu-shadow);
        transform-origin: top left;
        transition: opacity 0.12s ease-out, transform 0.12s ease-out;
    }
    .bcs-menu { min-width: max(100%, 184px); padding: 4px; border-radius: 10px; }
    .bcs-popover { width: 288px; border-radius: 12px; }
    .bcs-menu:focus { outline: none; }
    .bcs-menu[data-align="end"], .bcs-popover[data-align="end"],
    .bcs-menu[data-flip="end"], .bcs-popover[data-flip="end"] { left: auto; right: 0; transform-origin: top right; }
    .bcs-menu[data-flip="start"], .bcs-popover[data-flip="start"] { left: 0; right: auto; transform-origin: top left; }
    .bcs-menu[data-side="top"], .bcs-popover[data-side="top"] { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
    /* Opening motion: x-show only flips display, @starting-style animates it in. Closing is instant. */
    @starting-style {
        .bcs-menu, .bcs-popover { opacity: 0; transform: translateY(-4px) scale(0.98); }
    }

    .bcs-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 32px;
        padding: 6px 10px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--bcs-ink);
        font: inherit;
        font-size: 13px;
        line-height: 18px;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        scroll-margin: 4px;
    }
    .bcs-menu-item > i:first-child { flex: none; width: 16px; font-size: 13px; text-align: center; color: var(--bcs-ink-subtle); }
    .bcs-menu-item:hover,
    .bcs-menu-item:focus-visible { background-color: var(--bcs-menu-hover); outline: none; }
    .bcs-menu-item:focus-visible { box-shadow: inset 0 0 0 1px var(--bcs-field-border); }
    .bcs-menu-item:has(.bcs-menu-desc) { align-items: flex-start; }
    .bcs-menu-item:has(.bcs-menu-desc) > i:first-child { margin-top: 1px; }
    .bcs-menu-text { flex: 1 1 auto; min-width: 0; }
    .bcs-menu-desc { display: block; margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--bcs-ink-subtle); }
    .bcs-menu-meta,
    .bcs-menu-item kbd {
        flex: none;
        margin-left: auto;
        padding-left: 12px;
        font: 400 12px/16px 'Inter', sans-serif;
        font-variant-numeric: tabular-nums;
        color: var(--bcs-ink-subtle);
    }
    .bcs-menu-label {
        display: block;
        padding: 8px 10px 4px;
        font-size: 12px;
        line-height: 16px;
        font-weight: 500;
        color: var(--bcs-ink-subtle);
    }
    .bcs-menu-sep { display: block; height: 1px; margin: 4px -4px; border: 0; background-color: var(--bcs-edge); }
    .bcs-menu-header { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
    .bcs-menu-list { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
    .bcs-menu-empty { padding: 12px 10px; font-size: 12px; line-height: 16px; color: var(--bcs-ink-subtle); text-align: center; }
    .bcs-menu-dot { flex: none; box-sizing: border-box; width: 8px; height: 8px; margin: 0 4px; border-radius: 9999px; background-color: var(--bcs-ink-subtle); }
    .bcs-menu-dot.is-hollow { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--bcs-field-border-hover); }
    .bcs-menu-item:has(.bcs-menu-desc) > .bcs-menu-dot:first-child { margin-top: 5px; }
    .bcs-menu-search { position: relative; display: block; margin-bottom: 4px; }
    .bcs-menu-search > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--bcs-ink-subtle); pointer-events: none; }
    .bcs-menu-search > input {
        display: block;
        width: 100%;
        height: 32px;
        padding: 0 10px 0 30px;
        font-size: 13px;
        color: var(--bcs-ink);
        background-color: var(--bcs-surface-muted);
        border: 1px solid var(--bcs-edge);
        border-radius: 6px;
    }
    .bcs-menu-search > input::placeholder { color: var(--bcs-ink-subtle); }
    .bcs-menu-search > input:focus { outline: none; background-color: var(--bcs-surface); border-color: var(--bcs-primary); box-shadow: 0 0 0 3px var(--bcs-focus); }

    .bcs-menu-clear {
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--bcs-primary-strong);
        font-size: 11px;
        cursor: pointer;
    }
    .bcs-menu-clear:hover { background-color: color-mix(in srgb, var(--bcs-primary) 14%, transparent); }
    .bcs-menu-clear:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: -2px; }
}

/* States: unlayered so they beat colour utilities and the showcase's white stage fields */
.bcs-select:disabled,
.bcs-menu-trigger:disabled { color: var(--bcs-ink-subtle); background-color: #f3f4f6; border-color: var(--bcs-edge); box-shadow: none; cursor: not-allowed; }
.bcs-select[aria-invalid="true"],
.bcs-menu-trigger[aria-invalid="true"] { border-color: var(--bcs-danger); }
.bcs-select[aria-invalid="true"]:focus-visible,
.bcs-menu-trigger[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgb(220 38 38 / 0.2); }
.bcs-menu-trigger.is-active { padding-right: 32px; color: var(--bcs-primary-strong); background-color: var(--bcs-primary-soft); border-color: color-mix(in srgb, var(--bcs-primary) 40%, transparent); box-shadow: none; }
.bcs-menu-trigger.is-active::after { display: none; }
.bcs-menu-trigger.is-active:focus-visible { box-shadow: 0 0 0 3px var(--bcs-focus); }

.bcs-menu-item.is-selected,
.bcs-menu-item[aria-selected="true"],
.bcs-menu-item[aria-checked="true"] { font-weight: 500; }
.bcs-menu-item.is-selected::after,
.bcs-menu-item[aria-selected="true"]::after,
.bcs-menu-item[aria-checked="true"]::after {
    content: "";
    flex: none;
    align-self: center;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-color: var(--bcs-primary);
    -webkit-mask: var(--bcs-check-mask) center / 16px 16px no-repeat;
    mask: var(--bcs-check-mask) center / 16px 16px no-repeat;
}
.bcs-menu-item:has(.bcs-menu-meta, kbd)::after { margin-left: 8px; }
.bcs-menu-item.is-danger { color: var(--bcs-danger); }
.bcs-menu-item.is-danger > i:first-child { color: inherit; }
.bcs-menu-item.is-danger:hover,
.bcs-menu-item.is-danger:focus-visible { color: var(--bcs-danger-strong); background-color: var(--bcs-danger-soft); }
.bcs-menu-item:disabled,
.bcs-menu-item[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; background-color: transparent; }

@media (prefers-reduced-motion: reduce) {
    .bcs-menu, .bcs-popover, .bcs-menu-trigger, .bcs-menu-trigger::after, .bcs-select { transition: none; }
}
/* --- end refresh: dropdowns & menus --- */

/* --- refresh: auth (OTP input, sign-in, onboarding wizard) --- */
/* OTP code input: six separate digit cells.
   <div class="bcs-otp" role="group">            add .is-error / .is-success / .is-disabled to the group
     <span class="bcs-otp-slot">                   .is-active shows the caret on a static example
       <input class="bcs-otp-cell" placeholder=" " inputmode="numeric" …>
       <span class="bcs-otp-caret" aria-hidden="true"></span>
     </span> ×6   (a <span class="bcs-otp-sep"> between slots 3 and 4 groups them 3 + 3)
   </div>
   placeholder=" " lets :placeholder-shown tell empty cells from filled ones, so no JS class is needed.
   Cells shrink below 52px when the row is narrower than 352px. In @layer components so utilities still win. */
@layer components {
    .bcs-otp { display: flex; align-items: center; gap: 8px; }
    .bcs-otp-slot { position: relative; display: block; flex: 0 1 52px; min-width: 0; aspect-ratio: 1 / 1; }
    .bcs-otp-cell {
        position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0;
        border: 1px solid #d1d5db; border-radius: 10px; background-color: var(--bcs-surface);
        color: var(--bcs-ink); font-size: 24px; line-height: 1; font-weight: 600; text-align: center;
        font-variant-numeric: tabular-nums; caret-color: transparent; outline: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    span.bcs-otp-cell { display: flex; align-items: center; justify-content: center; }
    .bcs-otp-cell::placeholder { color: transparent; }
    .bcs-otp-cell::selection { background: transparent; }
    .bcs-otp-cell:placeholder-shown:hover { border-color: #94a3b8; }
    input.bcs-otp-cell:not(:placeholder-shown), .bcs-otp-cell.is-filled { border-color: var(--bcs-ink); }
    .bcs-otp .bcs-otp-cell:focus, .bcs-otp-slot.is-active .bcs-otp-cell { border-color: var(--bcs-primary); box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-otp-caret {
        display: none; position: absolute; left: 50%; top: 27%; width: 2px; height: 46%; margin-left: -1px;
        border-radius: 1px; background: var(--bcs-primary); pointer-events: none;
        animation: bcs-otp-blink 1.1s step-end infinite;
    }
    .bcs-otp-cell:focus:placeholder-shown + .bcs-otp-caret, .bcs-otp-slot.is-active .bcs-otp-caret { display: block; }
    .bcs-otp-slot.is-active .bcs-otp-caret { animation: none; }
    .bcs-otp.is-error .bcs-otp-cell { border-color: var(--bcs-danger); }
    .bcs-otp.is-error .bcs-otp-cell:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bcs-danger) 20%, transparent); }
    .bcs-otp.is-error .bcs-otp-caret { background: var(--bcs-danger); }
    .bcs-otp.is-success .bcs-otp-cell { border-color: var(--bcs-success); color: var(--bcs-success-strong); }
    .bcs-otp.is-success .bcs-otp-cell:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bcs-success) 20%, transparent); }
    .bcs-otp .bcs-otp-cell:disabled, .bcs-otp.is-disabled .bcs-otp-cell {
        border-color: var(--bcs-edge); color: var(--bcs-ink-subtle); cursor: not-allowed;
        background-color: #f1f5f9;
    }
    .bcs-otp-sep { flex: 0 0 auto; width: 10px; height: 2px; margin: 0 2px; border-radius: 1px; background: #94a3b8; }
}
@keyframes bcs-otp-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bcs-otp-caret { animation: none; } }
/* --- end refresh: auth --- */

/* --- refresh: profile (profile header, channel cards, engagement rows, audio player) --- */
/* Used by pages/profile.html and pages/list-page.html. In @layer components so utilities still win. */
@layer components {
    /* Segmented control (.bcs-seg, .bcs-seg-item): moved to the "segmented control" block at the end of this file. */

    /* Profile meta row: icon + text items, hairline dividers from 640px (on phones they wrap without them). */
    .bcs-profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
    .bcs-profile-meta > li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
    .bcs-profile-meta > li > i { width: 14px; text-align: center; font-size: 12px; }

    /* KPI strip: value over label, hairline dividers. 2 x 2 box on phones, one row from 640px, open row beside the header from 1024px.
       Items are <div>s (the strip may also hold an Alpine <template>). */
    .bcs-kpi-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--bcs-edge); border-radius: 12px; }
    .bcs-kpi-strip > div { padding: 12px 8px; text-align: center; min-width: 0; }
    .bcs-kpi-strip > div:nth-of-type(even) { border-left: 1px solid var(--bcs-edge); }
    .bcs-kpi-strip > div:nth-of-type(n+3) { border-top: 1px solid var(--bcs-edge); }

    /* Audio mini player: 28px play/pause, elapsed, seek track, total. Alpine data: bcsAudio(seconds, who, { showTotal }) in bcs-kit.js.
       <div class="bcs-audio" x-data="bcsAudio(372, 'Joseph Otieno')">…</div> (full markup in the bcs-kit.js comment) */
    .bcs-audio { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 280px; min-width: 0; }
    .bcs-audio-btn {
        flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px;
        background: var(--bcs-primary); color: var(--bcs-on-primary); font-size: 10px; cursor: pointer; transition: background-color .15s ease;
    }
    .bcs-audio-btn:hover { background: var(--bcs-primary-hover); }
    .bcs-audio-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bcs-surface), 0 0 0 4px var(--bcs-primary); }
    .bcs-audio-btn .fa-play { margin-left: 2px; }
    .bcs-audio-time { flex: none; font-size: 11px; line-height: 16px; color: var(--bcs-ink-subtle); font-variant-numeric: tabular-nums; }
    .bcs-audio.is-playing .bcs-audio-time:first-of-type { color: var(--bcs-ink); }
    .bcs-audio-seek { --p: 0%; flex: 1 1 auto; min-width: 48px; height: 16px; margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
    .bcs-audio-seek:focus { outline: none; }
    .bcs-audio-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 9999px; background: linear-gradient(to right, var(--bcs-primary) var(--p), var(--bcs-edge) var(--p)); }
    .bcs-audio-seek::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 2px solid var(--bcs-surface); border-radius: 50%;
        background: var(--bcs-primary); box-shadow: 0 1px 2px rgb(15 23 42 / .25); opacity: 0; transition: opacity .15s ease;
    }
    .bcs-audio-seek::-moz-range-track { height: 4px; border-radius: 9999px; background: var(--bcs-edge); }
    .bcs-audio-seek::-moz-range-progress { height: 4px; border-radius: 9999px; background: var(--bcs-primary); }
    .bcs-audio-seek::-moz-range-thumb { width: 8px; height: 8px; border: 2px solid var(--bcs-surface); border-radius: 50%; background: var(--bcs-primary); opacity: 0; }
    .bcs-audio:hover .bcs-audio-seek::-webkit-slider-thumb, .bcs-audio.is-playing .bcs-audio-seek::-webkit-slider-thumb, .bcs-audio.is-started .bcs-audio-seek::-webkit-slider-thumb,
    .bcs-audio-seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
    .bcs-audio:hover .bcs-audio-seek::-moz-range-thumb, .bcs-audio.is-playing .bcs-audio-seek::-moz-range-thumb, .bcs-audio.is-started .bcs-audio-seek::-moz-range-thumb,
    .bcs-audio-seek:focus-visible::-moz-range-thumb { opacity: 1; }
    .bcs-audio-seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-audio-seek:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bcs-focus); }

    /* Responsive list: one <table> per list. Rows are cards while the list is narrower than 860px and a table from there.
       <div class="bcs-list bcs-list--eng"><table class="bcs-list-table"><thead>…</thead><tbody><tr><td data-col="when"><span class="bcs-list-label">When</span>…
       Types: --eng (engagement history), --jobs (job post history; add --no-biz to drop the Business column), --users.
       Add --select when rows start with a checkbox cell (td/th data-col="sel") and carry .bcs-table-row (controls block):
       selected rows get the kit's primary tint and 3px bar, on the first cell in a table and on the whole card on a phone.
       .bcs-list-label shows in card rows only (screen readers always get it); .bcs-list-wide shows in table rows only.
       tr.bcs-list-detail is a full-width expansion (transcript preview); tr.bcs-list-empty holds the empty state.
       Rows filtered out with x-show (display: none) are skipped when deciding which card is first.
       Card columns never size to their content (no `auto` tracks): the badge column and the small label columns
       are fixed, so Duration, Rate, Date, Joined and Last active start at the same x on every card of a list. */
    .bcs-list { container-type: inline-size; }
    .bcs-list-table { display: block; width: 100%; border-collapse: collapse; }
    .bcs-list-table thead { display: none; }
    .bcs-list-table tbody { display: block; }
    .bcs-list-table tbody tr { display: grid; column-gap: 12px; row-gap: 10px; align-items: start; padding: 14px 16px; border-top: 1px solid var(--bcs-edge); }
    .bcs-list-table tbody tr:first-child,
    .bcs-list-table tbody tr:nth-child(1 of :not([style*="display: none"])) { border-top: 0; }
    .bcs-list-table td { display: block; min-width: 0; padding: 0; }
    .bcs-list-label { display: block; margin-bottom: 2px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--bcs-ink-subtle); }
    .bcs-list-wide { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .bcs-list-table tbody tr.bcs-list-detail { display: block; padding: 0 16px 14px; border-top: 0; }
    .bcs-list-table tbody tr.bcs-list-empty { display: block; padding: 0; border-top: 0; }

    /* Engagements: the right column (outcome badge over Duration) is 76px, the widest outcome badge (Follow-up). */
    .bcs-list--eng tbody tr { grid-template-columns: 32px minmax(0, 1fr) 76px; grid-template-areas: "chan cust out" ". when dur" ". conv conv"; }
    .bcs-list--eng.bcs-list--select tbody tr { grid-template-columns: 16px 32px minmax(0, 1fr) 76px; grid-template-areas: "sel chan cust out" ". . when dur" ". . conv conv"; }
    .bcs-list--eng td[data-col="channel"] { grid-area: chan; align-self: start; }
    .bcs-list--eng td[data-col="customer"] { grid-area: cust; }
    .bcs-list--eng td[data-col="when"] { grid-area: when; }
    .bcs-list--eng td[data-col="conv"] { grid-area: conv; }
    .bcs-list--eng td[data-col="dur"] { grid-area: dur; }
    .bcs-list--eng td[data-col="outcome"] { grid-area: out; justify-self: end; align-self: start; }

    /* Job posts: Channels 52px (two 24px icons), Rate takes the rest, the right column (status over Date) 82px. */
    .bcs-list--jobs tbody tr { grid-template-columns: 52px minmax(0, 1fr) 82px; grid-template-areas: "title title status" "biz biz biz" "chan rate date"; }
    .bcs-list--jobs.bcs-list--select tbody tr { grid-template-columns: 16px 52px minmax(0, 1fr) 82px; grid-template-areas: "sel title title status" ". biz biz biz" ". chan rate date"; }
    .bcs-list--jobs.bcs-list--no-biz tbody tr { grid-template-areas: "title title status" "chan rate date"; }
    .bcs-list--jobs.bcs-list--no-biz [data-col="biz"] { display: none; }
    .bcs-list--jobs td[data-col="title"] { grid-area: title; }
    .bcs-list--jobs td[data-col="biz"] { grid-area: biz; }
    .bcs-list--jobs td[data-col="chan"] { grid-area: chan; }
    .bcs-list--jobs td[data-col="rate"] { grid-area: rate; }
    .bcs-list--jobs td[data-col="status"] { grid-area: status; justify-self: end; align-self: start; }
    .bcs-list--jobs td[data-col="date"] { grid-area: date; }

    .bcs-list--users tbody tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "user user status" "role active joined"; }
    .bcs-list--users.bcs-list--select tbody tr { grid-template-columns: 16px auto minmax(0, 1fr) auto; grid-template-areas: "sel user user status" ". role active joined"; }
    .bcs-list--users td[data-col="user"] { grid-area: user; }
    .bcs-list--users td[data-col="role"] { grid-area: role; }
    .bcs-list--users td[data-col="status"] { grid-area: status; justify-self: end; align-self: start; }
    .bcs-list--users td[data-col="active"] { grid-area: active; }
    .bcs-list--users td[data-col="joined"] { grid-area: joined; }
    /* Users with a Joined column: Role 56px and Joined 64px are fixed and Last active (the longest value, "Online now")
       takes the rest, with the status badge above it. (The --actions variant keeps the rows above: controls block.) */
    .bcs-list--users:not(.bcs-list--actions) tbody tr { grid-template-columns: 56px 64px minmax(0, 1fr); grid-template-areas: "user user status" "role joined active"; }
    .bcs-list--users.bcs-list--select:not(.bcs-list--actions) tbody tr { grid-template-columns: 16px 56px 64px minmax(0, 1fr); grid-template-areas: "sel user user status" ". role joined active"; }

    /* Selectable rows: checkbox cell, lined up with the row's first line (channel icon or avatar is 32px tall). */
    .bcs-list--select td[data-col="sel"] { grid-area: sel; align-self: start; margin-top: 2px; line-height: 0; }
    .bcs-list--select.bcs-list--eng td[data-col="sel"], .bcs-list--select.bcs-list--users td[data-col="sel"] { margin-top: 8px; }
    .bcs-list-table tbody tr.bcs-table-row > :first-child,
    .bcs-list-table tbody tr.bcs-table-row:is([aria-selected="true"], :has(> :first-child input[type="checkbox"]:checked)) > :first-child { box-shadow: none; }
    /* Selected (checkbox checked; see .bcs-table-row in the controls block): the bar runs down the whole card. Focus is the row's outline only. */
    .bcs-list-table tbody tr.bcs-table-row:is([aria-selected="true"], :has(> :first-child input[type="checkbox"]:checked)) { box-shadow: inset 3px 0 0 var(--bcs-primary); }

    @container (min-width: 860px) {
        .bcs-list-table { display: table; }
        .bcs-list-table thead { display: table-header-group; }
        .bcs-list-table tbody { display: table-row-group; }
        .bcs-list-table tr, .bcs-list-table tbody tr { display: table-row; padding: 0; }
        .bcs-list-table th, .bcs-list-table td { display: table-cell; padding: 12px 16px; vertical-align: middle; text-align: left; }
        .bcs-list-table th:first-child, .bcs-list-table td:first-child { padding-left: 20px; }
        .bcs-list-table th:last-child, .bcs-list-table td:last-child { padding-right: 20px; }
        .bcs-list-table th {
            height: 40px; padding-top: 0; padding-bottom: 0; background: var(--bcs-surface-muted); border-bottom: 1px solid var(--bcs-edge);
            font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--bcs-ink-subtle); white-space: nowrap;
        }
        .bcs-list-table tbody tr:not(.bcs-list-detail):not(.bcs-list-empty):not(.bcs-table-row):hover { background: var(--bcs-surface-muted); }
        .bcs-list-table tbody tr.bcs-table-row:is([aria-selected="true"], :has(> :first-child input[type="checkbox"]:checked)) { box-shadow: none; }
        .bcs-list-table tbody tr.bcs-table-row:is([aria-selected="true"], :has(> :first-child input[type="checkbox"]:checked)) > :first-child { box-shadow: inset 3px 0 0 var(--bcs-primary); }
        .bcs-list-table [data-col="sel"] { width: 1px; padding-right: 0; line-height: 0; }
        .bcs-list-table tbody tr.bcs-list-detail, .bcs-list-table tbody tr.bcs-list-empty { display: table-row; }
        .bcs-list-table tbody tr.bcs-list-detail td { padding: 0 20px 16px; }
        .bcs-list-table tbody tr.bcs-list-empty td { padding: 0; }
        .bcs-list-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
        .bcs-list-wide { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
        .bcs-list--eng td[data-col="conv"] { width: 260px; }
        .bcs-list--jobs.bcs-list--no-biz [data-col="biz"] { display: none; }
    }
}
/* Logo tile: a kit avatar (data-avatar) with card corners, for businesses. Unlayered on purpose: it has to beat
   the avatar's rounded-full utility. <span class="bcs-logo-tile"><span data-avatar="Savanna Dental Care" data-size="sm"></span></span> */
.bcs-logo-tile { display: inline-flex; flex-shrink: 0; }
.bcs-logo-tile .rounded-full { border-radius: 8px; }
.bcs-logo-tile .size-avatar-xs.rounded-full { border-radius: 6px; }
.bcs-logo-tile .size-avatar-lg.rounded-full, .bcs-logo-tile .size-avatar-xl.rounded-full { border-radius: 12px; }
/* Small channel icon (24px) for dense rows: <span class="channel-icon is-sm call">. Unlayered, like .channel-icon itself. */
.channel-icon.is-sm { width: 24px; height: 24px; font-size: 10px; }

/* Meta row and KPI strip follow the width of their card (the nearest @container), not the viewport. */
@container (min-width: 560px) {
    @layer components {
        /* Every item carries a left hairline; the row is pulled 13px left and clipped, so the item that starts
           each line never shows one, even after wrapping. */
        .bcs-profile-meta { gap: 6px 0; margin-left: -13px; clip-path: inset(0 0 0 13px); }
        .bcs-profile-meta > li { padding: 0 12px; border-left: 1px solid var(--bcs-edge); }
        .bcs-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .bcs-kpi-strip > div:nth-of-type(n+2) { border-left: 1px solid var(--bcs-edge); }
        .bcs-kpi-strip > div:nth-of-type(n+3) { border-top: 0; }
    }
}
@container (min-width: 900px) {
    @layer components {
        .bcs-kpi-strip.is-open { grid-template-columns: repeat(4, auto); border: 0; border-radius: 0; }
        .bcs-kpi-strip.is-open > div { padding: 2px 16px; }
        .bcs-kpi-strip.is-open > div:last-of-type { padding-right: 0; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .bcs-audio-btn, .bcs-audio-seek::-webkit-slider-thumb { transition: none; }
}
/* --- end refresh: profile --- */

/* --- refresh: calendar (appointments calendar, FullCalendar overrides) --- */
/* Appointments calendar (pages/schedule.html). .bcs-cal sits on the calendar card and scopes every rule.
   The page's script toggles .is-stacked (card < 800px: toolbar wraps into two rows) and .is-compact
   (card < 760px: month grid shows dots plus a day agenda, week switches to a list).
   A status class (.st-scheduled | .st-completed | .st-pending | .st-cancelled) sets three colours that
   chips, dots, legend swatches and badges read: --st-soft (tint), --st-strong (text) and --st-dot.
   Layering: FullCalendar injects unlayered CSS, so every .fc override (and the --fc-* variables) stays unlayered.
   The kit's own .bcs-cal-* classes sit in @layer components so utilities can still override them; the one
   exception is the stacked Today padding, which has to beat the button's px-4 utility.
   Status dots are the kit's .bcs-menu-dot coloured with bg-primary / bg-success / bg-warning / bg-danger
   (.is-hollow for "All statuses"); status badges are kit badges (h-badge-md px-badge-x text-meta) plus .bcs-cal-badge. */
.bcs-cal {
    --fc-border-color: var(--bcs-edge);
    --fc-page-bg-color: var(--bcs-surface);
    --fc-neutral-bg-color: var(--bcs-surface-muted);
    --fc-neutral-text-color: var(--bcs-ink-subtle);
    --fc-today-bg-color: transparent;
    --fc-now-indicator-color: var(--bcs-primary);
    --fc-event-bg-color: transparent;
    --fc-event-border-color: transparent;
    --fc-event-text-color: inherit;
    --fc-event-selected-overlay-color: transparent;
    --fc-more-link-bg-color: transparent;
    --fc-more-link-text-color: var(--bcs-ink-muted);
    --fc-highlight-color: color-mix(in srgb, var(--bcs-primary-soft) 45%, transparent);
    --fc-non-business-color: rgb(248 250 252 / 0.7);
    --fc-list-event-hover-bg-color: var(--bcs-surface-muted);
    --fc-small-font-size: 12px;
    color: var(--bcs-ink);
}
@layer components {
    .bcs-cal .st-scheduled { --st-soft: var(--bcs-primary-soft); --st-strong: var(--bcs-primary-strong); --st-dot: var(--bcs-primary); }
    .bcs-cal .st-completed { --st-soft: var(--bcs-success-soft); --st-strong: var(--bcs-success-strong); --st-dot: var(--bcs-success); }
    .bcs-cal .st-pending   { --st-soft: var(--bcs-warning-soft); --st-strong: var(--bcs-warning-strong); --st-dot: var(--bcs-warning); }
    .bcs-cal .st-cancelled { --st-soft: var(--bcs-danger-soft);  --st-strong: var(--bcs-danger-strong);  --st-dot: var(--bcs-danger); }
    /* Badge colour only; size and shape come from the kit badge utilities in the markup */
    .bcs-cal-badge { flex: none; white-space: nowrap; background: var(--st-soft); color: var(--st-strong); }

    /* Toolbar: views | prev, title, next | Today + status filter. Stacked: [prev title next · Today] / [views · filter] */
    .bcs-cal-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "views nav actions"; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
    .bcs-cal-views { grid-area: views; justify-self: start; }
    .bcs-cal-nav { grid-area: nav; display: flex; align-items: center; gap: 12px; min-width: 0; }
    .bcs-cal-actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 8px; }
    .bcs-cal-title { min-width: 13rem; margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
    /* Three columns so Today (row 1) and the filter (row 2) size independently: the title keeps its room */
    .bcs-cal.is-stacked .bcs-cal-toolbar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nav nav today" "views filter filter"; gap: 12px 8px; }
    .bcs-cal.is-stacked .bcs-cal-actions { display: contents; }
    .bcs-cal.is-stacked .bcs-cal-filter { grid-area: filter; justify-self: end; }
    .bcs-cal.is-stacked .bcs-cal-nav { gap: 6px; }
    .bcs-cal.is-stacked .bcs-cal-title { min-width: 0; padding: 0 2px; font-size: 16px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; }
    .bcs-cal.is-compact .bcs-cal-views { justify-self: stretch; }
}
/* Unlayered on purpose: the narrower Today padding has to beat the button's px-4 utility */
.bcs-cal.is-stacked .bcs-cal-today { grid-area: today; justify-self: end; padding: 0 12px; }
/* View switcher: the kit segmented control (.bcs-seg, "segmented control" block); the page adds .is-block when compact. */

/* ---- FullCalendar: shared grid ---- */
.bcs-cal .fc { font-size: 13px; }
.bcs-cal .fc a { color: inherit; }
.bcs-cal .fc .fc-scrollgrid { border-radius: 10px; overflow: hidden; }
.bcs-cal .fc .fc-col-header-cell { background: var(--bcs-surface-muted); }
.bcs-cal .fc .fc-col-header-cell-cushion { display: block; padding: 11px 4px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--bcs-ink-muted); text-decoration: none; }
.bcs-cal .fc a[data-navlink]:hover { text-decoration: none; }
.bcs-cal .fc a[data-navlink]:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: 1px; border-radius: 6px; }

/* Event chips: soft status tint, strong text, time then title */
.bcs-cal .fc .fc-h-event.bcs-cal-ev,
.bcs-cal .fc .fc-v-event.bcs-cal-ev { background: var(--st-soft); color: var(--st-strong); border: 0; border-radius: 6px; }
.bcs-cal .fc .bcs-cal-ev .fc-event-main { color: inherit; }
.bcs-cal .fc .bcs-cal-ev:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-strong) 28%, transparent); }
.bcs-cal .fc .bcs-cal-ev:focus { box-shadow: none; }
.bcs-cal .fc .bcs-cal-ev:focus::before,
.bcs-cal .fc .bcs-cal-ev:focus::after { display: none; }
.bcs-cal .fc .bcs-cal-ev:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: 1px; }
/* Chip content (spans the page script renders inside FullCalendar's event element) */
@layer components {
    .bcs-cal-ev-line { display: flex; align-items: baseline; gap: 5px; min-width: 0; overflow: hidden; }
    .bcs-cal-ev-time { flex: none; font-variant-numeric: tabular-nums; opacity: 0.9; }
    .bcs-cal-ev-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
    .bcs-cal-ev-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
    .bcs-cal .st-cancelled .bcs-cal-ev-title { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.75; }
    .bcs-cal-ev-stack { display: flex; flex-direction: column; gap: 1px; height: 100%; min-width: 0; overflow: hidden; }
    .bcs-cal-dh { display: inline-flex; align-items: center; gap: 6px; }
    .bcs-cal-dh-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 9999px; font-weight: 600; color: var(--bcs-ink); font-variant-numeric: tabular-nums; }
    .bcs-cal-list-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .bcs-cal-list-row > span:first-child { flex: 1 1 auto; min-width: 0; }
    .bcs-cal-list-row .bcs-cal-ev-title,
    .bcs-cal-list-row .bcs-cal-ev-sub { display: block; }
    .bcs-cal-list-row .bcs-cal-ev-title { color: var(--bcs-ink); }
    .bcs-cal-list-row .bcs-cal-ev-sub { font-size: 12px; line-height: 16px; color: var(--bcs-ink-muted); opacity: 1; }
}

/* ---- Month (dayGrid) ---- */
.bcs-cal .fc .fc-daygrid-day-frame { min-height: 112px; }
.bcs-cal .fc .fc-daygrid-day-top { flex-direction: row; }
.bcs-cal .fc .fc-daygrid-day-number { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; margin: 6px 0 4px 6px; padding: 0 5px; border-radius: 9999px; font-size: 13px; line-height: 1; font-weight: 600; color: var(--bcs-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.bcs-cal .fc .fc-daygrid-day-number[data-navlink]:hover { background: var(--bcs-surface-muted); }
.bcs-cal .fc .fc-day-today .fc-daygrid-day-number { background: var(--bcs-primary-soft); color: var(--bcs-primary-strong); }
.bcs-cal .fc .fc-daygrid-day.fc-day-other { background: var(--bcs-surface-muted); }
.bcs-cal .fc .fc-day-other .fc-daygrid-day-top { opacity: 1; }
.bcs-cal .fc .fc-day-other .fc-daygrid-day-number { font-weight: 500; color: var(--bcs-ink-subtle); }
/* Closed days keep a plain cell in the month: the shading only covered the frame, not a stretched row */
.bcs-cal .fc .fc-daygrid-day .fc-non-business { display: none; }
.bcs-cal .fc .fc-daygrid-day-events { margin-top: 0; }
.bcs-cal .fc .fc-daygrid-body-natural .fc-daygrid-day-events { margin-bottom: 4px; }
.bcs-cal .fc .fc-daygrid-event.bcs-cal-ev { margin: 0 4px 4px; padding: 4px 6px; font-size: 12px; line-height: 16px; white-space: nowrap; }
.bcs-cal .fc .fc-daygrid-event .bcs-cal-ev-title { font-weight: 400; }
.bcs-cal .fc .fc-daygrid-day-bottom { margin: 0 6px 6px; font-size: 12px; }
.bcs-cal .fc .fc-daygrid-more-link { padding: 2px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--bcs-ink-muted); border-radius: 4px; }
.bcs-cal .fc .fc-daygrid-more-link:hover { background: none; color: var(--bcs-primary); text-decoration: underline; text-underline-offset: 2px; }
.bcs-cal .fc .fc-daygrid-more-link:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: 1px; }
/* "+N more" popover */
.bcs-cal .fc .fc-popover { min-width: 232px; border: 1px solid var(--bcs-edge); border-radius: 10px; box-shadow: var(--bcs-menu-shadow); overflow: hidden; }
.bcs-cal .fc .fc-popover-header { padding: 10px 10px 6px 12px; background: var(--bcs-surface); font-size: 13px; font-weight: 600; color: var(--bcs-ink); }
.bcs-cal .fc .fc-popover-close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--bcs-ink-subtle); opacity: 1; }
.bcs-cal .fc .fc-popover-close:hover { background: var(--bcs-surface-muted); color: var(--bcs-ink); }
.bcs-cal .fc .fc-more-popover .fc-popover-body { min-width: 0; padding: 2px 6px 6px; }
.bcs-cal .fc .fc-popover .fc-daygrid-event.bcs-cal-ev { margin: 0 0 4px; }

/* ---- Week and day (timeGrid) ---- */
.bcs-cal .fc .fc-timegrid-axis { background: var(--bcs-surface-muted); }
.bcs-cal .fc .fc-timegrid-slot { height: 28px; }
.bcs-cal .fc .fc-timegrid-slot-minor { border-top-style: dashed; border-top-color: rgb(229 231 235 / 0.7); }
.bcs-cal .fc .fc-timegrid-slot-label { vertical-align: top; border-top-color: transparent; }
.bcs-cal .fc .fc-timegrid-slot-label-cushion { padding: 3px 10px 0 8px; font-size: 11px; line-height: 14px; color: var(--bcs-ink-subtle); font-variant-numeric: tabular-nums; }
.bcs-cal .fc .fc-timegrid-col.fc-day-today { background: color-mix(in srgb, var(--bcs-primary-soft) 22%, transparent); }
.bcs-cal .fc .fc-timegrid-col-events { margin: 0 6px 0 3px; }
.bcs-cal .fc .fc-timegrid-event.bcs-cal-ev { box-shadow: 0 0 0 1px var(--bcs-surface); }
.bcs-cal .fc .fc-timegrid-event.bcs-cal-ev:hover { box-shadow: 0 0 0 1px var(--bcs-surface), inset 0 0 0 1px color-mix(in srgb, var(--st-strong) 28%, transparent); }
.bcs-cal .fc .fc-timegrid-event .fc-event-main { padding: 4px 7px; font-size: 12px; line-height: 15px; overflow: hidden; }
.bcs-cal .fc .fc-timegrid-now-indicator-line { border-width: 2px 0 0; }
.bcs-cal .fc .fc-timegrid-now-indicator-line::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 9999px; background: var(--bcs-primary); }
.bcs-cal .fc .fc-timegrid-now-indicator-arrow { display: none; }
.bcs-cal .fc .fc-day-today .bcs-cal-dh-num { background: var(--bcs-primary-soft); color: var(--bcs-primary-strong); }
.bcs-cal .fc .fc-timegrid .fc-col-header-cell-cushion { padding: 8px 4px; }

/* ---- List (week view when compact) ---- */
.bcs-cal .fc-theme-standard .fc-list { border-radius: 10px; overflow: hidden; }
.bcs-cal .fc .fc-list-day-cushion { padding: 8px 12px; background: var(--bcs-surface-muted); font-size: 13px; line-height: 18px; text-align: left; }
.bcs-cal .fc .fc-list-event-title { width: 100%; max-width: 0; }
.bcs-cal .fc .fc-list-day-text { font-weight: 600; color: var(--bcs-ink); text-decoration: none; }
.bcs-cal .fc .fc-list-table td { padding: 10px 10px; font-size: 13px; line-height: 18px; vertical-align: middle; }
.bcs-cal .fc .fc-list-table td:first-child { padding-left: 12px; }
.bcs-cal .fc .fc-list-table td:last-child { padding-right: 12px; }
.bcs-cal .fc .fc-list-event-time { color: var(--bcs-ink-muted); font-variant-numeric: tabular-nums; }
.bcs-cal .fc .fc-list-event-graphic { padding-right: 0; }
.bcs-cal .fc .fc-list-event-dot { border-color: var(--st-dot); border-width: 4px; border-radius: 4px; }
.bcs-cal .fc .fc-list-event.bcs-cal-ev:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: -2px; }
.bcs-cal .fc .fc-list-empty { background: var(--bcs-surface-muted); }
.bcs-cal .fc .fc-list-empty-cushion { margin: 40px 0; font-size: 13px; color: var(--bcs-ink-muted); }
/* ---- Compact month: dots under the day number, tap a day to list it below ---- */
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-col-header-cell-cushion { padding: 8px 0; font-size: 12px; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day-frame { min-height: 54px; cursor: pointer; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day-top { justify-content: center; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day-number { width: 30px; height: 30px; min-width: 0; margin: 5px auto 2px; padding: 0; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day.is-selected .fc-daygrid-day-number { background: var(--bcs-primary); color: var(--bcs-on-primary); }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day-events { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 6px; margin: 0 4px 8px; pointer-events: none; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-event-harness { margin-top: 0 !important; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-event.bcs-cal-ev { width: 6px; height: 6px; margin: 0; padding: 0; border-radius: 9999px; background: var(--st-dot); box-shadow: none; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day-bottom { display: none; }

/* Legend: four swatches with label and one-line meaning. Compact, each swatch also shows the month grid's dot. */
@layer components {
    .bcs-cal-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 16px 0 0; padding: 16px 20px; list-style: none; border: 1px solid var(--bcs-edge); border-radius: 10px; }
    .bcs-cal-legend > li { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .bcs-cal-swatch { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--st-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-strong) 10%, transparent); }
    .bcs-cal-swatch > .bcs-menu-dot { display: none; }
    .bcs-cal.is-compact .bcs-cal-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 14px; }
    .bcs-cal.is-compact .bcs-cal-swatch { width: 32px; height: 32px; }
    .bcs-cal.is-compact .bcs-cal-swatch > .bcs-menu-dot { display: block; }
}

/* --- end refresh: calendar --- */

/* --- refresh: email templates (preview chrome only; emails themselves use inline styles) --- */
/* Preview for pages/emails.html. The emails keep every style inline; these rules only frame them.
   The canvas takes data-width="600|375" from the width toggle. The frame is a size container, so the
   container query below replays base.blade.php's @media (max-width: 620px) block: at 375px, or on a
   phone-width page, the preview shows the same layout a phone mail app would.
   Layering: the preview chrome (.bcs-email-*) sits in @layer components so utilities can override it. The
   @container block stays unlayered: it is the email's own responsive CSS, and its !important rules must beat
   the emails' inline styles exactly as they do in a mail client. */
@layer components {
    .bcs-email-canvas { background: var(--bcs-page); }
    .bcs-email-canvas.is-plain[data-width="600"] { background: #ffffff; } /* a plain-text email has no layout card: the message fills the reading pane */
    .bcs-email-canvas[data-width="375"] { padding: 24px 16px 32px; }
    .bcs-email-frame { container-type: inline-size; width: 100%; margin: 0 auto; }
    .bcs-email-canvas[data-width="375"] .bcs-email-frame {
        max-width: 375px; overflow: hidden; background: #f1f5f9;
        border: 1px solid var(--bcs-edge); border-radius: 20px; box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
    }
    /* Mail clients keep the UA table default; Tailwind's preflight (base layer) collapses borders, which drops rounded corners. */
    .bcs-email-frame table { border-collapse: separate; }
}
@container (max-width: 620px) {
    .bcs-email-frame .em-outer { padding: 0 !important; }
    .bcs-email-frame .em-card { border-radius: 0 !important; border-width: 0 !important; }
    .bcs-email-frame .em-pad { padding-left: 24px !important; padding-right: 24px !important; }
    .bcs-email-frame .em-col { display: block !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
    .bcs-email-frame .em-col-gap { padding-top: 24px !important; border-left: 0 !important; }
    .bcs-email-frame .em-col-gap-sm { padding-top: 12px !important; }
    .bcs-email-frame .em-right { text-align: left !important; white-space: normal !important; }
    .bcs-email-frame .em-nav { padding-top: 14px !important; }
    .bcs-email-frame .em-h1 { font-size: 24px !important; line-height: 30px !important; }
    .bcs-email-frame .em-hero-copy { padding: 36px 24px 0 !important; }
    .bcs-email-frame .em-hero-h1 { font-size: 28px !important; line-height: 34px !important; }
    .bcs-email-frame .em-hero-art { padding: 24px 24px 32px !important; text-align: left !important; }
    .bcs-email-frame .em-img { width: 100% !important; height: auto !important; }
}
@layer components {
    /* "Show variables": each sample value is swapped for its Blade expression and marked. */
    .bcs-email-frame.is-vars [data-em-var]:not([data-em-html]),
    .bcs-email-frame .bcs-email-var {
        background: var(--bcs-warning-soft); color: var(--bcs-warning-strong); border-radius: 4px; padding: 0 3px;
        box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.45); letter-spacing: 0; word-break: break-word;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; font-weight: 500;
    }
    /* Inter's contextual alternates draw "->" as an arrow; Blade expressions need it literal. */
    .bcs-email-nolig { font-feature-settings: 'calt' 0; font-variant-ligatures: none; }
    /* View and variable names in the preview toolbar */
    .bcs-email-code {
        display: inline-block; padding: 1px 6px; border: 1px solid var(--bcs-edge); border-radius: 6px;
        background: var(--bcs-surface-muted); color: var(--bcs-ink);
        font: 500 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
}
/* --- end refresh: email templates --- */

/* --- refresh: segmented control --- */
/* .bcs-seg (track) + .bcs-seg-item (option): the one control for switching a view or picking one of a few values.
   Showcase specimen "Segmented control" (Tabs section). Pill tabs open a different panel; this changes what one panel shows.
     <div class="bcs-seg" role="group" aria-label="Calendar view">
       <button type="button" class="bcs-seg-item" aria-pressed="true">Month</button>
       <button type="button" class="bcs-seg-item" aria-pressed="false">Week</button>
     </div>
   Active option: aria-pressed="true" (buttons in role="group"), aria-selected="true" (role="tab" in role="tablist"),
   or a checked radio inside the option, for a form field:
     <div class="bcs-seg is-subtle is-block"><label class="bcs-seg-item"><input type="radio" name="role" value="agent" class="sr-only" checked>Agent</label>…</div>
   Default: the active option fills with the action colour. Use it for view switches (Agent | Business, Month | Week | Day).
   .is-subtle: grey track, raised white active option, ink text. Use it for form choices (Sign in as) and preview settings.
   Size the track with h-control-md (36, default) or h-control-sm (32); h-control-lg (44) sits beside 44px form fields.
   .is-block: full width, equal options (forms; toolbars on phones). Optional leading <i> icon; wrap a long label in <span> to let it truncate. */
@layer components {
    .bcs-seg {
        display: inline-flex; align-items: stretch; gap: 2px; max-width: 100%; height: 36px; padding: 3px; vertical-align: middle;
        border: 1px solid var(--bcs-edge); border-radius: 9999px; background: var(--bcs-surface); box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
    }
    .bcs-seg-item {
        position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 1 auto; min-width: 0;
        margin: 0; padding: 0 14px; border: 0; border-radius: 9999px; background: transparent; color: var(--bcs-ink-muted);
        font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none;
        transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }
    .bcs-seg-item > i { flex: none; font-size: 12px; }
    .bcs-seg-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .bcs-seg-item:hover { color: var(--bcs-ink); background: rgb(15 23 42 / 0.05); }
    .bcs-seg-item:is([aria-pressed="true"], [aria-selected="true"], :has(> input:checked)) { color: var(--bcs-on-primary); background: var(--bcs-primary); }
    .bcs-seg-item:focus-visible,
    .bcs-seg-item:has(> input:focus-visible) { z-index: 1; outline: none; box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-seg-item:is(:disabled, [aria-disabled="true"], :has(> input:disabled)) { opacity: .5; pointer-events: none; }

    .bcs-seg.is-subtle { background: var(--bcs-surface-muted); box-shadow: none; }
    .bcs-seg.is-subtle > .bcs-seg-item:is([aria-pressed="true"], [aria-selected="true"], :has(> input:checked)) {
        color: var(--bcs-ink); background: var(--bcs-surface); box-shadow: 0 1px 2px rgb(15 23 42 / 0.08), 0 0 0 1px rgb(15 23 42 / 0.06);
    }
    .bcs-seg.is-subtle > .bcs-seg-item:is([aria-pressed="true"], [aria-selected="true"], :has(> input:checked)):is(:focus-visible, :has(> input:focus-visible)) {
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.08), 0 0 0 1px rgb(15 23 42 / 0.06), 0 0 0 3px var(--bcs-focus);
    }

    .bcs-seg.h-control-sm > .bcs-seg-item { gap: 5px; padding: 0 12px; font-size: 12px; line-height: 16px; }
    .bcs-seg.h-control-sm > .bcs-seg-item > i { font-size: 11px; }
    .bcs-seg.h-control-lg > .bcs-seg-item { padding: 0 16px; font-size: 14px; line-height: 20px; }

    .bcs-seg.is-block { display: flex; width: 100%; }
    .bcs-seg.is-block > .bcs-seg-item { flex: 1 1 0; padding-left: 8px; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .bcs-seg-item { transition: none; }
}
/* --- end refresh: segmented control --- */

/* --- refresh: fields & empty states (.bcs-input, .bcs-empty, channel colours) --- */
/* Text field: every text-like <input> and every <textarea>. Same look as .bcs-select (dropdowns block): field border,
   8px radius, hover border, primary border + 3px focus ring, red when aria-invalid="true", grey when disabled.
     <input type="text" class="bcs-input w-full h-control-md text-small">          36px default; h-control-sm/-lg + text-* resize it
     <textarea rows="3" class="bcs-input w-full text-small"></textarea>           8px 12px padding, grows downward
   Leading icon: put the icon absolutely inside a .relative wrapper and add pl-9 / pl-10 to the input.
   Don't add border-*, shadow-* or focus:* utilities: utilities beat this layer and would cancel the states.
   Floating labels (adaptive input) colour the label with peer-focus:text-primary.
   Intentionally borderless fields (reply composer, .email-field rows) stay as they are. */
@layer components {
    .bcs-input {
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 13px;
        line-height: 18px;
        color: var(--bcs-ink);
        background-color: var(--bcs-surface);
        border: 1px solid var(--bcs-field-border);
        border-radius: 8px;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }
    input.bcs-input { height: 36px; }
    textarea.bcs-input { display: block; padding-top: 8px; padding-bottom: 8px; line-height: 20px; resize: vertical; }
    .bcs-input::placeholder { color: var(--bcs-ink-subtle); opacity: 1; }
    .bcs-input:hover { border-color: var(--bcs-field-border-hover); }
    .bcs-input:focus { outline: none; border-color: var(--bcs-primary); box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-input[readonly] { background-color: var(--bcs-surface-muted); }
}
/* States: unlayered so they beat colour utilities and the showcase's white stage fields (as .bcs-select does) */
.bcs-input:disabled { color: var(--bcs-ink-subtle); background-color: #f3f4f6; border-color: var(--bcs-edge); box-shadow: none; cursor: not-allowed; }
.bcs-input:disabled::placeholder { color: #9ca3af; }
.bcs-input[aria-invalid="true"] { border-color: var(--bcs-danger); }
.bcs-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(220 38 38 / 0.2); }

/* Empty state: what a list, table or panel shows when it has no rows. One design for <x-ui.empty-state>,
   table empty rows and list pages (from list-page.html's List empty state).
     <div class="bcs-empty">                                   "nothing yet": primary-tinted chip, primary action
       <span class="bcs-empty-icon" aria-hidden="true"><i class="fas fa-calendar-plus"></i></span>
       <p class="bcs-empty-title">No appointments this week</p>
       <p class="bcs-empty-desc">Appointments booked by agents or the AI receptionist appear here.</p>
       <div class="bcs-empty-actions">…buttons, h-control-sm…</div>        optional
     </div>
     .is-filtered   "no matches": neutral chip (use fa-magnifying-glass) and a secondary Clear filters button
     .is-boxed      standalone, outside a card or table: 1px dashed edge and 12px radius
     .is-compact    narrow panels and side columns: less padding
   In @layer components so utilities (padding, max-width) still win. */
@layer components {
    .bcs-empty { display: flex; flex-direction: column; align-items: center; padding: 48px 24px; text-align: center; }
    .bcs-empty.is-boxed { background-color: var(--bcs-surface); border: 1px dashed var(--bcs-field-border); border-radius: 12px; }
    .bcs-empty.is-compact { padding: 32px 16px; }
    .bcs-empty-icon {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px;
        background-color: var(--bcs-primary-soft); color: var(--bcs-primary-strong); font-size: 16px;
    }
    .bcs-empty.is-filtered .bcs-empty-icon { background-color: var(--bcs-surface-muted); color: var(--bcs-ink-subtle); box-shadow: inset 0 0 0 1px var(--bcs-edge); }
    .bcs-empty-title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--bcs-ink); }
    .bcs-empty-desc { max-width: 44ch; margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--bcs-ink-muted); }
    .bcs-empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
}

/* Channel colours: call, chat, email, ticket. .channel-icon, channel dots and channel cards read these (Tailwind:
   bg-channel-email, text-channel-email, bg-channel-email-soft, text-channel-email-strong …). They follow the status
   and action tokens, with two exceptions: tickets use a deeper amber, because white on warning (#f59e0b) is only
   2.15:1, and in the Indigo scheme email turns fuchsia, because the violet accent sits next to the indigo primary.
   Declared on every [data-scheme] element so var(--bcs-primary) resolves per scheme (custom schemes included). */
:root,
[data-scheme] {
    --bcs-channel-call: var(--bcs-success);
    --bcs-channel-call-soft: var(--bcs-success-soft);
    --bcs-channel-call-strong: var(--bcs-success-strong);
    --bcs-channel-chat: var(--bcs-primary);
    --bcs-channel-chat-soft: var(--bcs-primary-soft);
    --bcs-channel-chat-strong: var(--bcs-primary-strong);
    --bcs-channel-email: var(--bcs-accent);
    --bcs-channel-email-soft: var(--bcs-accent-soft);
    --bcs-channel-email-strong: var(--bcs-accent-strong);
    --bcs-channel-ticket: #b45309;
    --bcs-channel-ticket-soft: var(--bcs-warning-soft);
    --bcs-channel-ticket-strong: var(--bcs-warning-strong);
}
[data-scheme="indigo"] {
    --bcs-channel-email: #a21caf;
    --bcs-channel-email-soft: #fae8ff;
    --bcs-channel-email-strong: #86198f;
}

@media (prefers-reduced-motion: reduce) {
    .bcs-input, .filter-chip { transition: none; }
}
/* --- end refresh: fields & empty states --- */

/* --- res2: kit (pane overlay, side tab rail, agenda list, presence) --- */
/* Pane overlay (pattern 2.1): a panel that slides over one side pane, inside it, not over the page.
     <aside class="bcs-pane-host relative overflow-hidden" x-data="bcsPane" @keydown.escape="closePane()">
       …pane content…
       <section class="bcs-pane-overlay" x-show="pane === 'ticket-new'" x-cloak role="dialog" aria-modal="false">
         <header class="bcs-pane-overlay-head">
           <button type="button" class="bcs-pane-overlay-back" @click="closePane()" aria-label="Back"><i class="fas fa-arrow-left"></i></button>
           <h3 class="bcs-pane-overlay-title">New ticket</h3>
         </header>
         <div class="bcs-pane-overlay-body">…scrolls…</div>
         <footer class="bcs-pane-overlay-foot">…Cancel / primary action, right-aligned…</footer>
       </section>
     </aside>
   bg-surface, full size of the host, 1px border-edge head, no shadow wash, no page dim. 200ms slide from the
   right via the bcs-pane-enter/leave + bcs-pane-from/to transition classes (see bcsPane in bcs-kit.js). */
@layer components {
    .bcs-pane-host { position: relative; overflow: hidden; }
    .bcs-pane-overlay {
        position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column;
        background-color: var(--bcs-surface);
    }
    .bcs-pane-overlay-head {
        display: flex; flex: none; align-items: center; gap: 8px;
        padding: 12px 16px; border-bottom: 1px solid var(--bcs-edge);
    }
    .bcs-pane-overlay-back {
        display: inline-flex; flex: none; align-items: center; justify-content: center;
        width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent;
        color: var(--bcs-ink-muted); font-size: 14px; cursor: pointer; transition: background-color .15s ease, color .15s ease;
    }
    .bcs-pane-overlay-back:hover { background-color: var(--bcs-surface-muted); color: var(--bcs-ink); }
    .bcs-pane-overlay-back:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-pane-overlay-title {
        flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: 15px; line-height: 20px; font-weight: 600; color: var(--bcs-ink);
    }
    .bcs-pane-overlay-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }
    .bcs-pane-overlay-foot {
        display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 8px;
        padding: 12px 16px; border-top: 1px solid var(--bcs-edge);
    }

    .bcs-pane-enter, .bcs-pane-leave { transition: transform .2s ease; }
    .bcs-pane-from { transform: translateX(100%); }
    .bcs-pane-to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .bcs-pane-enter, .bcs-pane-leave { transition: none; }
}

/* Side tab rail (pattern 2.2): vertical icon-and-label tabs for a side pane, 72px wide. Sits right of its
   content by default (indicator on the item's left edge, facing the content); .bcs-rail.is-start puts it left
   of the content instead (indicator on the right edge). See bcsRail(initial) in bcs-kit.js.
     <div class="bcs-rail" role="tablist" aria-orientation="vertical" aria-label="Account details"
          x-data="bcsRail('overview')" @keydown="onKey($event)">
       <button type="button" class="bcs-rail-item" role="tab" id="rt-overview" aria-controls="rp-overview"
               :aria-selected="tab === 'overview'" :tabindex="tab === 'overview' ? 0 : -1" @click="select('overview')">
         <i class="fas fa-building" aria-hidden="true"></i><span>Overview</span>
         <span class="bcs-rail-count">2</span>   <!-- optional -->
       </button>
     </div> */
@layer components {
    .bcs-rail {
        display: flex; flex: none; flex-direction: column; width: 72px; gap: 2px; padding: 8px 0;
        border-left: 1px solid var(--bcs-edge); background-color: var(--bcs-surface); overflow-y: auto;
    }
    .bcs-rail.is-start { border-left: 0; border-right: 1px solid var(--bcs-edge); }
    .bcs-rail-item {
        position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 4px; min-height: 56px; margin: 0 4px; padding: 8px 2px; border: 0;
        border-radius: 8px; background: transparent; color: var(--bcs-ink-muted); text-align: center; cursor: pointer;
        transition: background-color .15s ease, color .15s ease;
    }
    .bcs-rail-item > i { flex: none; font-size: 16px; }
    .bcs-rail-item > span:not(.bcs-rail-count) {
        display: -webkit-box; width: 100%; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        font-size: 11px; line-height: 14px; font-weight: 500; overflow-wrap: normal; word-break: normal; hyphens: manual;
    }
    .bcs-rail-item:hover { background-color: var(--bcs-surface-muted); }
    .bcs-rail-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--bcs-focus); }
    .bcs-rail-item[aria-selected="true"] { background-color: var(--bcs-primary-soft); color: var(--bcs-primary-strong); }
    .bcs-rail-item[aria-selected="true"]::before {
        content: ''; position: absolute; top: 8px; bottom: 8px; left: -4px; width: 2px; border-radius: 0 2px 2px 0;
        background-color: var(--bcs-primary);
    }
    .bcs-rail.is-start .bcs-rail-item[aria-selected="true"]::before { left: auto; right: -4px; border-radius: 2px 0 0 2px; }
    .bcs-rail-count {
        position: absolute; top: 6px; right: 10px; display: inline-flex; min-width: 16px; height: 16px;
        align-items: center; justify-content: center; padding: 0 4px; border-radius: 9999px;
        background-color: var(--bcs-primary); color: var(--bcs-on-primary); font-size: 10px; line-height: 16px; font-weight: 600;
    }
}
@media (prefers-reduced-motion: reduce) {
    .bcs-rail-item { transition: none; }
}

/* Agenda list (pattern 2.3): upcoming appointments and call backs, grouped by day. .is-appointment gets a
   primary bar, .is-callback a success bar (the call colour); both are a 3px bar on the left. Rows can be a
   <button>, <a> or plain <div>, with hover bg-surface-muted and a focus ring.
     <div class="bcs-agenda">
       <p class="bcs-agenda-day">Today, Tue 6 Oct</p>
       <ul class="bcs-agenda-list">
         <li><button type="button" class="bcs-agenda-item is-callback">
           <span class="bcs-agenda-time">15:00</span>
           <span class="bcs-agenda-body"><span class="bcs-agenda-title">Call back Joseph Kariuki</span>
             <span class="bcs-agenda-meta"><i class="fas fa-phone" aria-hidden="true"></i>X-ray results</span></span>
         </button></li>
       </ul>
     </div> */
@layer components {
    .bcs-agenda { display: flex; flex-direction: column; }
    .bcs-agenda-day {
        margin: 0; padding: 12px 12px 4px; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--bcs-ink-subtle);
    }
    .bcs-agenda-day:first-child { padding-top: 8px; }
    .bcs-agenda-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
    .bcs-agenda-item {
        position: relative; display: flex; box-sizing: border-box; width: 100%; align-items: flex-start; gap: 10px;
        padding: 8px 12px 8px 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left;
        cursor: pointer; transition: background-color .15s ease;
    }
    .bcs-agenda-item::before {
        content: ''; position: absolute; top: 6px; bottom: 6px; left: 0; width: 3px; border-radius: 2px;
        background-color: var(--bcs-ink-subtle);
    }
    .bcs-agenda-item.is-appointment::before { background-color: var(--bcs-primary); }
    .bcs-agenda-item.is-callback::before { background-color: var(--bcs-success); }
    .bcs-agenda-item:hover, .bcs-agenda-item:focus-visible { background-color: var(--bcs-surface-muted); }
    .bcs-agenda-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--bcs-focus); }
    .bcs-agenda-time {
        flex: none; width: 44px; padding-top: 1px; font-size: 12px; line-height: 18px; font-weight: 600;
        color: var(--bcs-ink-muted); font-variant-numeric: tabular-nums;
    }
    .bcs-agenda-body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 2px; }
    .bcs-agenda-title { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--bcs-ink); }
    .bcs-agenda-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; color: var(--bcs-ink-subtle); }
    .bcs-agenda-meta > i { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .bcs-agenda-item { transition: none; }
}

/* Presence (2.4): .bcs-presence[data-state] is an 8px inline dot for text rows. Kit avatars get the same
   colours from BCS.avatar's status dot in bcs-kit.js (bg-success/-danger/-warning/-gray-400 + border-surface). */
@layer components {
    .bcs-presence {
        display: inline-block; box-sizing: border-box; width: 8px; height: 8px; border-radius: 9999px;
        background-color: #9ca3af; vertical-align: middle;
    }
    .bcs-presence[data-state="online"] { background-color: var(--bcs-success); }
    .bcs-presence[data-state="busy"] { background-color: var(--bcs-danger); }
    .bcs-presence[data-state="away"] { background-color: var(--bcs-warning); }
    .bcs-presence[data-state="offline"] { background-color: #9ca3af; }
}
/* --- end res2: kit --- */

/* --- res2: agent console (live dashboard page, console parts) --- */
/* Live dashboard (pages/agent-live-dashboard.html; views/agent/agent-live-dashboard.blade.php). Behaviour and demo data:
   assets/js/agent-live-dashboard.js (x-data="agentLiveDashboard").
     .bcs-live           page root: app sidebar + main column, full viewport (put .bcs-live-body on <body>)
     .bcs-live-nav       holds the kit sidebar: a 56px rail that widens over the console on hover; a drawer under 768px
                         (.nav-open on .bcs-live, .bcs-live-scrim behind it, .bcs-live-burger in .bcs-live-bar opens it)
     .bcs-live-row       the three panes, each with data-pane: .bcs-live-queue (engagements), .bcs-live-work (the middle,
                         a size container) and .bcs-live-details (the account pane, also a .bcs-pane-host)
     .bcs-live-split     the middle's Chat and Engagement flow columns (data-col="chat|flow"). Side by side when the middle
                         pane is 680px or wider; narrower, data-view="chat|flow" picks one and .bcs-live-viewswitch shows
     Under 1024px one pane shows at a time: data-mpane="queue|work|details" on .bcs-live, picked in .bcs-live-switch.
   Guided engagement flow (.bcs-guide-*): the flow agents follow live (Greeting, Query, Branch, Wrap-up). Also used by the
   "Guided engagement flow" part on agent-console.html.
     <ol class="bcs-guide"><li class="bcs-guide-stage" data-state="done|current|upcoming">
       <span class="bcs-guide-marker">…check or number…</span>
       <div class="bcs-guide-body"><div class="bcs-guide-title"><h4>Query</h4><span class="bcs-guide-state">Now</span></div> …</div></li></ol>
     .bcs-guide-option   a Query choice (<button aria-pressed>), .bcs-guide-choice the chosen one, .bcs-guide-steps the branch
     .bcs-guide-step     a step: .bcs-guide-check (checkbox), label.bcs-guide-step-text, .bcs-guide-result, .bcs-guide-action
                         (.is-primary on the current step); .is-current / .is-done on the row
     .bcs-guide-req      a required wrap-up item (Notes, Ticket); .is-done when it's met
   In @layer components so utilities still win. The sidebar overrides are unlayered, because the kit's sidebar rules are. */
@layer components {
    .bcs-live-body { height: 100dvh; overflow: hidden; background-color: var(--bcs-page); color: var(--bcs-ink); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
    .bcs-live { display: flex; height: 100dvh; overflow: hidden; }
    .bcs-live-nav { position: relative; z-index: 40; flex: none; width: var(--bcs-rail); }
    .bcs-live-scrim { display: none; }
    .bcs-live-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
    .bcs-live-bar, .bcs-live-switch { display: none; }
    .bcs-live-row { display: flex; flex: 1 1 auto; min-height: 0; }
    .bcs-live-queue { display: flex; flex: none; flex-direction: column; width: 256px; background-color: var(--bcs-surface); border-right: 1px solid var(--bcs-edge); }
    .bcs-live-work { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; background-color: var(--bcs-page); container-type: inline-size; }
    .bcs-live-details { display: flex; flex: none; flex-direction: column; width: 340px; background-color: var(--bcs-surface); border-left: 1px solid var(--bcs-edge); }
    .bcs-live-head {
        display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 20px;
        background-color: var(--bcs-surface); border-bottom: 1px solid var(--bcs-edge);
    }
    .bcs-live-party { display: flex; flex: 1 1 220px; align-items: center; gap: 12px; min-width: 0; }
    .bcs-live-viewswitch { flex: none; padding: 10px 20px; background-color: var(--bcs-surface); border-bottom: 1px solid var(--bcs-edge); }
    .bcs-live-split { display: flex; flex: 1 1 auto; min-height: 0; }
    .bcs-live-split > [data-col] { display: none; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; }
    .bcs-live-split[data-view="chat"] > [data-col="chat"],
    .bcs-live-split[data-view="flow"] > [data-col="flow"] { display: flex; }
    .bcs-live-flow { overflow-y: auto; background-color: var(--bcs-surface); }
    @container (min-width: 680px) {
        .bcs-live-viewswitch { display: none; }
        .bcs-live-split > [data-col] { display: flex; }
        .bcs-live-split > [data-col="flow"] { flex: none; width: 328px; border-left: 1px solid var(--bcs-edge); }
    }
    .bcs-live-foot {
        display: flex; flex: none; align-items: center; gap: 16px; height: 56px; padding: 0 24px;
        background-color: var(--bcs-surface); border-top: 1px solid var(--bcs-edge);
    }
    .bcs-live-foot-links { display: flex; align-items: center; gap: 20px; margin-left: auto; }
    .bcs-live-burger {
        display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: -8px;
        border: 0; border-radius: 8px; background: transparent; color: var(--bcs-ink-muted); font-size: 16px; cursor: pointer;
    }
    .bcs-live-burger:hover { background-color: var(--bcs-surface-muted); color: var(--bcs-ink); }
    .bcs-live-burger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bcs-focus); }

    /* Calendar week strip (Calendar tab): a day with dots for its appointments (primary) and call backs (success) */
    .bcs-live-day {
        display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 6px 0 5px;
        border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--bcs-ink); cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease;
    }
    .bcs-live-day:hover { background-color: var(--bcs-surface-muted); }
    .bcs-live-day:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-live-day-dow { font-size: 11px; line-height: 14px; color: var(--bcs-ink-subtle); }
    .bcs-live-day-num { font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .bcs-live-day-dots { display: flex; gap: 3px; height: 5px; }
    .bcs-live-day-dots > span { width: 5px; height: 5px; border-radius: 9999px; }
    .bcs-live-day.is-today { border-color: color-mix(in srgb, var(--bcs-primary) 35%, transparent); }
    .bcs-live-day.is-today .bcs-live-day-num { color: var(--bcs-primary-strong); }
    .bcs-live-day[aria-pressed="true"] { border-color: var(--bcs-primary); background-color: var(--bcs-primary-soft); }
    .bcs-live-day[aria-pressed="true"] .bcs-live-day-num { color: var(--bcs-primary-strong); }

    /* Phones and tablets: one pane at a time (after the container rule, so it wins) */
    @media (max-width: 1023.98px) {
        .bcs-live-bar {
            display: flex; flex: none; align-items: center; gap: 12px; height: 52px; padding: 0 16px;
            background-color: var(--bcs-surface); border-bottom: 1px solid var(--bcs-edge);
        }
        .bcs-live-switch { display: block; flex: none; padding: 8px 16px; background-color: var(--bcs-surface); border-bottom: 1px solid var(--bcs-edge); }
        .bcs-live-row > [data-pane] { display: none; flex: 1 1 auto; width: auto; min-width: 0; border-left: 0; border-right: 0; }
        .bcs-live[data-mpane="queue"] .bcs-live-queue,
        .bcs-live[data-mpane="work"] .bcs-live-work,
        .bcs-live[data-mpane="details"] .bcs-live-details { display: flex; }
        .bcs-live-viewswitch { display: none; }
        .bcs-live-split > [data-col] { display: none; }
        .bcs-live-split[data-view="chat"] > [data-col="chat"],
        .bcs-live-split[data-view="flow"] > [data-col="flow"] { display: flex; flex: 1 1 auto; width: auto; border-left: 0; }
        .bcs-live-head { padding: 12px 16px; }
        .bcs-live-foot { height: auto; padding: 8px 16px; }
        .bcs-live-foot-links { display: none; }
    }
    @media (min-width: 768px) {
        .bcs-live-burger { display: none; }
    }
    @media (min-width: 1280px) {
        .bcs-live-queue { width: 288px; }
        .bcs-live-details { width: 380px; }
    }
    @media (max-width: 767.98px) {
        .bcs-live-nav {
            position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(var(--bcs-rail-open), 80vw);
            transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s;
        }
        .bcs-live.nav-open .bcs-live-nav { transform: none; visibility: visible; transition: transform .2s ease; }
        .bcs-live-scrim { display: block; position: fixed; inset: 0; z-index: 55; background-color: rgb(15 23 42 / 0.4); }
    }

    /* ---- Guided engagement flow ---- */
    .bcs-guide-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--bcs-edge); }
    .bcs-guide { max-width: 600px; margin: 0; padding: 18px 16px 28px; list-style: none; }
    .bcs-guide-stage { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; padding-bottom: 24px; }
    .bcs-guide-stage:last-child { padding-bottom: 0; }
    .bcs-guide-stage:not(:last-child)::before {
        content: ''; position: absolute; top: 30px; bottom: 6px; left: 11.5px; width: 1px; background-color: var(--bcs-edge);
    }
    .bcs-guide-stage[data-state="done"]:not(:last-child)::before { background-color: color-mix(in srgb, var(--bcs-success) 45%, var(--bcs-edge)); }
    .bcs-guide-marker {
        display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 9999px;
        background-color: var(--bcs-surface); color: var(--bcs-ink-subtle); box-shadow: inset 0 0 0 1.5px var(--bcs-field-border);
        font-size: 11px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums;
    }
    .bcs-guide-stage[data-state="done"] .bcs-guide-marker { background-color: var(--bcs-success); color: #fff; box-shadow: none; font-size: 10px; }
    .bcs-guide-stage[data-state="current"] .bcs-guide-marker { background-color: var(--bcs-primary); color: var(--bcs-on-primary); box-shadow: 0 0 0 4px var(--bcs-primary-soft); }
    .bcs-guide-body { min-width: 0; padding-top: 2px; }
    .bcs-guide-title { display: flex; align-items: center; gap: 8px; min-height: 20px; margin-bottom: 8px; }
    .bcs-guide-title > h4 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--bcs-ink); }
    .bcs-guide-stage[data-state="upcoming"] .bcs-guide-title > h4 { color: var(--bcs-ink-muted); }
    .bcs-guide-state { margin-left: auto; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--bcs-ink-subtle); white-space: nowrap; }
    .bcs-guide-stage[data-state="done"] .bcs-guide-state { color: var(--bcs-success-strong); }
    .bcs-guide-stage[data-state="current"] .bcs-guide-state { color: var(--bcs-primary-strong); }
    .bcs-guide-state.is-warn { color: var(--bcs-warning-strong); }
    .bcs-guide-state.is-ok { color: var(--bcs-success-strong); }
    .bcs-guide-link {
        margin: -2px -4px -2px auto; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent;
        font-size: 12px; line-height: 16px; font-weight: 500; color: var(--bcs-primary); cursor: pointer;
    }
    .bcs-guide-link:hover { color: var(--bcs-primary-hover); text-decoration: underline; }
    .bcs-guide-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-guide-script { margin: 0; padding-left: 10px; border-left: 2px solid var(--bcs-edge); font-size: 13px; line-height: 19px; color: var(--bcs-ink-muted); }

    /* Query: the five options while choosing, then the chosen one */
    .bcs-guide-options { display: flex; flex-direction: column; gap: 6px; }
    .bcs-guide-option {
        display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 1px solid var(--bcs-edge); border-radius: 10px;
        background-color: var(--bcs-surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease;
    }
    .bcs-guide-option:hover { background-color: var(--bcs-surface-muted); }
    .bcs-guide-option[aria-pressed="true"] { border-color: var(--bcs-primary); background-color: var(--bcs-primary-soft); }
    .bcs-guide-option:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-guide-option-icon {
        display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px;
        background-color: var(--bcs-surface-muted); color: var(--bcs-ink-muted); font-size: 12px;
    }
    .bcs-guide-option[aria-pressed="true"] .bcs-guide-option-icon { background-color: var(--bcs-primary); color: var(--bcs-on-primary); }
    .bcs-guide-choice { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 10px; background-color: var(--bcs-surface-muted); }
    .bcs-guide-choice .bcs-guide-option-icon { background-color: var(--bcs-primary-soft); color: var(--bcs-primary-strong); }

    /* Branch: steps, each with a check, an optional result line and at most one action */
    .bcs-guide-steps { margin: 0; padding: 0; list-style: none; border: 1px solid var(--bcs-edge); border-radius: 12px; overflow: hidden; }
    .bcs-guide-step { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; background-color: var(--bcs-surface); }
    .bcs-guide-step + .bcs-guide-step { border-top: 1px solid var(--bcs-edge); }
    .bcs-guide-step.is-current { background-color: color-mix(in srgb, var(--bcs-primary-soft) 60%, var(--bcs-surface)); box-shadow: inset 3px 0 0 var(--bcs-primary); }
    .bcs-guide-check {
        flex: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1.5px solid var(--bcs-field-border); border-radius: 9999px;
        background: var(--bcs-surface) center / 12px 12px no-repeat; cursor: pointer; -webkit-appearance: none; appearance: none;
        transition: background-color .15s ease, border-color .15s ease;
    }
    .bcs-guide-check:hover { border-color: var(--bcs-field-border-hover); }
    .bcs-guide-step.is-current .bcs-guide-check { border-color: var(--bcs-primary); }
    .bcs-guide-check:checked {
        border-color: var(--bcs-success); background-color: var(--bcs-success);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.5 3 3 6-7' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .bcs-guide-check:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-guide-step-text { display: block; font-size: 13px; line-height: 19px; color: var(--bcs-ink); cursor: pointer; }
    .bcs-guide-step.is-current .bcs-guide-step-text { font-weight: 500; }
    .bcs-guide-step.is-done .bcs-guide-step-text { color: var(--bcs-ink-muted); }
    .bcs-guide-result { display: flex; align-items: flex-start; gap: 6px; margin: 3px 0 0; font-size: 12px; line-height: 16px; color: var(--bcs-success-strong); }
    .bcs-guide-result > i { margin-top: 2px; font-size: 11px; }
    .bcs-guide-action {
        display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-top: 8px; padding: 0 10px;
        border: 1px solid var(--bcs-field-border); border-radius: 8px; background-color: var(--bcs-surface);
        font: inherit; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--bcs-ink); white-space: nowrap; cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease;
    }
    .bcs-guide-action > i { font-size: 11px; color: var(--bcs-ink-subtle); }
    .bcs-guide-action:hover { background-color: var(--bcs-surface-muted); }
    .bcs-guide-action.is-primary { border-color: var(--bcs-primary); background-color: var(--bcs-primary); color: var(--bcs-on-primary); }
    .bcs-guide-action.is-primary > i { color: inherit; }
    .bcs-guide-action.is-primary:hover { border-color: var(--bcs-primary-hover); background-color: var(--bcs-primary-hover); }
    .bcs-guide-action:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bcs-focus); }
    /* A finished step keeps its action, as a quiet link (to open the article again, say) */
    .bcs-guide-step.is-done .bcs-guide-action {
        height: auto; margin-top: 4px; padding: 0; border: 0; background: transparent; color: var(--bcs-primary);
    }
    .bcs-guide-step.is-done .bcs-guide-action > i { color: inherit; }
    .bcs-guide-step.is-done .bcs-guide-action:hover { background: transparent; text-decoration: underline; }

    /* Wrap-up: the required items */
    .bcs-guide-reqs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
    .bcs-guide-req {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 12px;
        border: 1px solid color-mix(in srgb, var(--bcs-warning) 35%, var(--bcs-edge)); border-radius: 10px;
        background-color: color-mix(in srgb, var(--bcs-warning-soft) 45%, var(--bcs-surface));
    }
    .bcs-guide-req.is-done { border-color: var(--bcs-edge); background-color: var(--bcs-surface); }
    .bcs-guide-req-icon { flex: none; font-size: 15px; color: var(--bcs-warning); }
    .bcs-guide-req.is-done .bcs-guide-req-icon { color: var(--bcs-success); }
}
/* The kit sidebar inside .bcs-live-nav: absolute, so widening on hover covers the console instead of reflowing it;
   in the phone drawer, labels always show. Unlayered, like the kit's sidebar rules. */
.bcs-live-nav > .bcs-sidebar { position: absolute; top: 0; bottom: 0; left: 0; height: 100%; }
@media (max-width: 767.98px) {
    .bcs-live-nav > .bcs-sidebar { width: 100%; }
    .bcs-live-nav .bcs-sidebar .menu-label { opacity: 1; }
    .bcs-live-nav .bcs-sidebar .sub-menu-item { display: flex; opacity: 1; }
    .bcs-live-nav .bcs-sidebar .bcs-sidebar-footer button { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
    .bcs-live-nav, .bcs-live.nav-open .bcs-live-nav, .bcs-live-day, .bcs-guide-option, .bcs-guide-check, .bcs-guide-action { transition: none; }
}
/* --- end res2: agent console --- */

/* --- res2: flow builder (business console guided flow) --- */
/* Guided flow builder (pages/business-console.html): the engagement flow a business sets per channel (Call, Chat) and
   agents follow live in the console. Behaviour: Alpine.data('guidedFlowBuilder'), inline in that page.
     .bcs-gf-main        the shell's content area, container "gf". From 900px: flow and Agent preview side by side,
                         each scrolling on its own; below that, one at a time behind .bcs-gf-viewswitch (data-view).
     .bcs-gf-flow        <ol> of the four stages, container "gf-flow". From 560px the stage numbers sit on a rail to
                         the left of the cards; narrower, the number moves into the card header.
       .bcs-gf-stage     <li>; .is-current = the stage being edited (primary number, tinted edge)
       .bcs-gf-card(-head|-body|-title|-desc|-meta), .bcs-gf-marker (the stage number), .bcs-gf-label (field label)
     .bcs-gf-options > .bcs-gf-option   Query option row: .is-on, .is-selected (its branch is open below)
     .bcs-gf-steps > .bcs-gf-step       Branch step row: .is-open shows .bcs-gf-step-editor; .bcs-gf-chip = action chip
     .bcs-gf-req > .bcs-gf-req-item     locked wrap-up item; .bcs-gf-lock is its "Required" badge
     .bcs-gf-preview, .bcs-gf-pv-*      Agent preview: the same four stages as the console's tracker shows them
   In @layer components so utilities still win. */
@layer components {
    .bcs-gf-main { container: gf / inline-size; display: flex; flex-direction: column; min-height: 0; }
    .bcs-gf-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
    .bcs-gf-builder { container: gf-col / inline-size; min-width: 0; }
    .bcs-gf-viewswitch { margin-bottom: 16px; }
    .bcs-gf-label { display: block; margin: 0 0 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--bcs-ink); }
    .bcs-gf-hint { margin: 6px 0 0; font-size: 12px; line-height: 16px; color: var(--bcs-ink-subtle); }

    /* Stages */
    .bcs-gf-flow { container: gf-flow / inline-size; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
    .bcs-gf-stage { position: relative; min-width: 0; }
    .bcs-gf-card {
        position: relative; min-width: 0; background: var(--bcs-surface); border: 1px solid var(--bcs-edge); border-radius: 12px;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); transition: border-color .15s ease;
    }
    .bcs-gf-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
    .bcs-gf-card-body { padding: 16px; border-top: 1px solid var(--bcs-edge); }
    .bcs-gf-card-title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--bcs-ink); }
    .bcs-gf-card-desc { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--bcs-ink-muted); }
    .bcs-gf-card-meta { flex: none; margin-left: auto; font-size: 12px; line-height: 22px; color: var(--bcs-ink-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .bcs-gf-marker {
        flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: -1px;
        border-radius: 9999px; background: var(--bcs-surface); box-shadow: inset 0 0 0 1px var(--bcs-field-border);
        font-size: 12px; line-height: 1; font-weight: 600; color: var(--bcs-ink-muted); font-variant-numeric: tabular-nums;
        transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }
    .bcs-gf-stage.is-current .bcs-gf-marker { background: var(--bcs-primary); color: var(--bcs-on-primary); box-shadow: none; }
    .bcs-gf-stage.is-current > .bcs-gf-card { border-color: color-mix(in srgb, var(--bcs-primary) 32%, var(--bcs-edge)); }
    @container gf-flow (min-width: 560px) {
        .bcs-gf-stage { padding-left: 44px; }
        .bcs-gf-stage::before { content: ""; position: absolute; left: 13.5px; top: 48px; bottom: -24px; width: 1px; background: var(--bcs-field-border); }
        .bcs-gf-stage:last-child::before { display: none; }
        .bcs-gf-marker { position: absolute; left: -45px; top: 13px; width: 28px; height: 28px; margin: 0; font-size: 13px; }
        .bcs-gf-card-head { padding: 16px 20px; }
        .bcs-gf-card-body { padding: 20px; }
    }

    /* {agent} / {business} token buttons under a script field */
    .bcs-gf-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--bcs-ink-subtle); }
    .bcs-gf-token {
        display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 1px solid var(--bcs-edge); border-radius: 6px;
        background: var(--bcs-surface-muted); color: var(--bcs-ink); font: inherit; font-weight: 500; cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease;
    }
    .bcs-gf-token > i { font-size: 9px; color: var(--bcs-ink-subtle); }
    .bcs-gf-token:hover { border-color: var(--bcs-field-border-hover); background: var(--bcs-surface); }
    .bcs-gf-token:focus-visible { outline: none; border-color: var(--bcs-primary); box-shadow: 0 0 0 3px var(--bcs-focus); }

    /* Query option rows and wrap-up Required rows: one bordered list group */
    .bcs-gf-options, .bcs-gf-req { margin: 0; padding: 0; list-style: none; border: 1px solid var(--bcs-edge); border-radius: 10px; overflow: hidden; background: var(--bcs-surface); }
    .bcs-gf-option { display: flex; align-items: center; gap: 12px; padding-right: 12px; background: var(--bcs-surface); transition: background-color .15s ease, box-shadow .15s ease; }
    .bcs-gf-option + .bcs-gf-option, .bcs-gf-req-item + .bcs-gf-req-item { border-top: 1px solid var(--bcs-edge); }
    .bcs-gf-option-main {
        display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 10px 0 10px 12px; border: 0;
        background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
    }
    .bcs-gf-option-main:focus-visible { outline: none; }
    .bcs-gf-option:has(> .bcs-gf-option-main:focus-visible) { box-shadow: inset 0 0 0 2px var(--bcs-primary); }
    .bcs-gf-option.is-on:not(.is-selected):hover { background: var(--bcs-surface-muted); }
    .bcs-gf-option-main:disabled { cursor: default; }
    .bcs-gf-option-icon, .bcs-gf-req-icon {
        flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px;
        background: var(--bcs-surface-muted); box-shadow: inset 0 0 0 1px var(--bcs-edge); color: var(--bcs-ink-subtle); font-size: 13px;
    }
    .bcs-gf-option.is-on .bcs-gf-option-icon { background: var(--bcs-primary-soft); box-shadow: none; color: var(--bcs-primary-strong); }
    .bcs-gf-option-text, .bcs-gf-req-text { flex: 1 1 auto; min-width: 0; }
    .bcs-gf-option-name, .bcs-gf-req-name { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--bcs-ink); }
    .bcs-gf-option-desc, .bcs-gf-req-desc { display: block; margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--bcs-ink-muted); }
    .bcs-gf-option-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bcs-gf-option:not(.is-on) :is(.bcs-gf-option-name, .bcs-gf-option-desc) { color: var(--bcs-ink-subtle); }
    .bcs-gf-option-meta { flex: none; padding-left: 4px; font-size: 12px; line-height: 16px; color: var(--bcs-ink-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .bcs-gf-option.is-selected { background: color-mix(in srgb, var(--bcs-primary) 6%, var(--bcs-surface)); box-shadow: inset 3px 0 0 var(--bcs-primary); }
    .bcs-gf-option.is-selected:has(> .bcs-gf-option-main:focus-visible) { box-shadow: inset 3px 0 0 var(--bcs-primary), inset 0 0 0 2px var(--bcs-primary); }
    .bcs-gf-option.is-selected .bcs-gf-option-meta { color: var(--bcs-primary-strong); font-weight: 500; }

    .bcs-gf-req-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bcs-surface-muted); }
    .bcs-gf-req-icon { background: var(--bcs-surface); color: var(--bcs-ink-muted); }
    .bcs-gf-lock {
        flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 9999px;
        background: var(--bcs-surface); box-shadow: inset 0 0 0 1px var(--bcs-edge); color: var(--bcs-ink-muted);
        font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
    }
    .bcs-gf-lock > i { font-size: 10px; color: var(--bcs-ink-subtle); }

    /* Branch: option picker (segmented from 480px, a select below), steps, step editor */
    .bcs-gf-branch-seg { display: none; }
    .bcs-gf-branch-select { display: block; }
    @container gf-flow (min-width: 480px) {
        .bcs-gf-branch-seg { display: inline-flex; }
        .bcs-gf-branch-select { display: none; }
    }
    .bcs-gf-steps { container: gf-steps / inline-size; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .bcs-gf-step { background: var(--bcs-surface); border: 1px solid var(--bcs-edge); border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
    .bcs-gf-step:hover { border-color: var(--bcs-field-border); }
    .bcs-gf-step.is-open { border-color: color-mix(in srgb, var(--bcs-primary) 45%, var(--bcs-edge)); box-shadow: 0 1px 3px rgb(15 23 42 / 0.06); }
    .bcs-gf-step-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px 10px 12px; }
    .bcs-gf-step-num {
        flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 9999px;
        background: var(--bcs-surface-muted); box-shadow: inset 0 0 0 1px var(--bcs-edge);
        font-size: 11px; line-height: 1; font-weight: 600; color: var(--bcs-ink-muted); font-variant-numeric: tabular-nums;
    }
    .bcs-gf-step.is-open .bcs-gf-step-num { background: var(--bcs-primary-soft); box-shadow: none; color: var(--bcs-primary-strong); }
    .bcs-gf-step-main {
        flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 2px 0; border: 0;
        border-radius: 4px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
    }
    .bcs-gf-step-main:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: 3px; }
    .bcs-gf-step-text {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%;
        font-size: 13px; line-height: 18px; color: var(--bcs-ink);
    }
    .bcs-gf-step-text.is-empty { color: var(--bcs-ink-subtle); }
    .bcs-gf-step-action { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; min-width: 0; }
    .bcs-gf-step-detail { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--bcs-ink-subtle); }
    .bcs-gf-chip {
        flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 22px; padding: 0 8px;
        border-radius: 6px; background: var(--bcs-primary-soft); color: var(--bcs-primary-strong);
        font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
    }
    .bcs-gf-chip > i { flex: none; font-size: 11px; }
    .bcs-gf-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .bcs-gf-step-tools { flex: none; display: flex; align-items: center; gap: 2px; margin-top: -3px; }
    .bcs-gf-icon-btn {
        display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px;
        background: transparent; color: var(--bcs-ink-subtle); font-size: 12px; cursor: pointer; transition: background-color .15s ease, color .15s ease;
    }
    .bcs-gf-icon-btn:hover { background: var(--bcs-surface-muted); color: var(--bcs-ink); }
    .bcs-gf-icon-btn.is-danger:hover { background: var(--bcs-danger-soft); color: var(--bcs-danger); }
    .bcs-gf-icon-btn:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: -2px; }
    .bcs-gf-icon-btn:disabled { opacity: .35; background: transparent; color: var(--bcs-ink-subtle); cursor: default; }
    /* Narrow lists: the arrows stack and Remove step lives only in the open step's editor, so the script line keeps its width */
    @container gf-steps (max-width: 459.98px) {
        .bcs-gf-step-tools { flex-direction: column; gap: 0; margin: -4px -2px -4px 0; }
        .bcs-gf-step-tools > :is(.is-danger, .is-restore) { display: none; }
    }
    .bcs-gf-step-editor { padding: 14px 12px 12px; border-top: 1px solid var(--bcs-edge); border-radius: 0 0 9px 9px; background: var(--bcs-surface-muted); }
    .bcs-gf-add {
        display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; margin-top: 8px;
        border: 1px dashed var(--bcs-field-border); border-radius: 10px; background: transparent; color: var(--bcs-ink-muted);
        font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease;
    }
    .bcs-gf-add > i { font-size: 11px; }
    .bcs-gf-add:hover { border-color: var(--bcs-primary); color: var(--bcs-primary-strong); background: color-mix(in srgb, var(--bcs-primary) 4%, var(--bcs-surface)); }
    .bcs-gf-add:focus-visible { outline: none; border-color: var(--bcs-primary); box-shadow: 0 0 0 3px var(--bcs-focus); }

    /* Agent preview */
    .bcs-gf-preview { min-width: 0; background: var(--bcs-surface); border: 1px solid var(--bcs-edge); border-radius: 12px; box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); }
    .bcs-gf-preview-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--bcs-edge); }
    .bcs-gf-preview-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--bcs-ink); }
    .bcs-gf-preview-desc { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--bcs-ink-muted); }
    .bcs-gf-pv-track { margin: 0; padding: 16px; list-style: none; }
    .bcs-gf-pv-stage { position: relative; padding: 0 0 20px 32px; }
    .bcs-gf-pv-stage:last-child { padding-bottom: 0; }
    .bcs-gf-pv-stage::before { content: ""; position: absolute; left: 10.5px; top: 28px; bottom: 6px; width: 1px; background: var(--bcs-edge); }
    .bcs-gf-pv-stage:last-child::before { display: none; }
    .bcs-gf-pv-num {
        position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
        border-radius: 9999px; background: var(--bcs-surface); box-shadow: inset 0 0 0 1px var(--bcs-field-border);
        font-size: 11px; line-height: 1; font-weight: 600; color: var(--bcs-ink-muted); transition: background-color .15s ease, color .15s ease;
    }
    .bcs-gf-pv-stage.is-current .bcs-gf-pv-num { background: var(--bcs-primary); box-shadow: none; color: var(--bcs-on-primary); }
    .bcs-gf-pv-name { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13px; line-height: 22px; font-weight: 600; color: var(--bcs-ink); }
    .bcs-gf-pv-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 400; color: var(--bcs-ink-subtle); }
    .bcs-gf-pv-script {
        margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--bcs-surface-muted); box-shadow: inset 0 0 0 1px var(--bcs-edge);
        font-size: 13px; line-height: 19px; color: var(--bcs-ink); overflow-wrap: anywhere;
    }
    .bcs-gf-pv-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .bcs-gf-pv-opt {
        display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--bcs-field-border); border-radius: 9999px;
        background: var(--bcs-surface); color: var(--bcs-ink-muted); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    }
    .bcs-gf-pv-opt > i { font-size: 11px; }
    .bcs-gf-pv-opt:hover { border-color: var(--bcs-field-border-hover); color: var(--bcs-ink); }
    .bcs-gf-pv-opt[aria-pressed="true"] { border-color: var(--bcs-primary); background: var(--bcs-primary); color: var(--bcs-on-primary); }
    .bcs-gf-pv-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-gf-pv-steps, .bcs-gf-pv-req { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; }
    .bcs-gf-pv-step, .bcs-gf-pv-req > li {
        display: flex; align-items: flex-start; gap: 10px; margin: 0 -8px; padding: 6px 8px; border-radius: 8px;
        font-size: 13px; line-height: 18px; color: var(--bcs-ink); transition: background-color .15s ease;
    }
    .bcs-gf-pv-step.is-open { background: color-mix(in srgb, var(--bcs-primary) 8%, var(--bcs-surface)); }
    .bcs-gf-pv-check { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--bcs-field-border-hover); }
    .bcs-gf-pv-act {
        display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 26px; margin-top: 6px; padding: 0 8px;
        border: 1px solid var(--bcs-field-border); border-radius: 6px; background: var(--bcs-surface);
        font-size: 12px; line-height: 16px; font-weight: 500; color: var(--bcs-ink); white-space: nowrap;
    }
    .bcs-gf-pv-act > i { flex: none; font-size: 11px; color: var(--bcs-ink-subtle); }
    .bcs-gf-pv-act > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .bcs-gf-pv-tag { margin-left: auto; padding-left: 8px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--bcs-ink-subtle); white-space: nowrap; }
    /* End call / End chat simply ends (owner decision): the required items are listed, nothing blocks */
    .bcs-gf-pv-end {
        display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 36px; margin-top: 12px; border: 0; border-radius: 8px;
        background: var(--bcs-danger); color: #fff; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .15s ease;
    }
    .bcs-gf-pv-end:hover { background: var(--bcs-danger-strong); }
    .bcs-gf-pv-end:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bcs-surface), 0 0 0 4px var(--bcs-danger); }

    /* Template line above the flow, inline links, Customized / Added badges, removed template steps */
    .bcs-gf-tplbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -4px 0 16px; font-size: 13px; line-height: 18px; color: var(--bcs-ink-muted); }
    .bcs-gf-tplbar strong { font-weight: 600; color: var(--bcs-ink); }
    .bcs-gf-tplbar-sep { padding-left: 12px; border-left: 1px solid var(--bcs-field-border); }
    @container gf (max-width: 599.98px) {
        .bcs-gf-tplbar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; }
        .bcs-gf-tplbar > .bcs-gf-tplbar-sep { grid-column: 2; padding-left: 0; border-left: 0; }
    }
    .bcs-gf-link {
        display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 4px; background: none;
        font: inherit; font-weight: 500; color: var(--bcs-primary-strong); text-decoration: none; cursor: pointer;
    }
    .bcs-gf-link:hover { text-decoration: underline; text-underline-offset: 3px; }
    .bcs-gf-link:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: 2px; }
    .bcs-gf-link:disabled { color: var(--bcs-ink-subtle); text-decoration: none; cursor: default; }
    .bcs-gf-state { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 9999px; font-size: 11px; line-height: 16px; font-weight: 500; white-space: nowrap; }
    .bcs-gf-state.is-customized { background: var(--bcs-warning-soft); color: var(--bcs-warning-strong); }
    .bcs-gf-state.is-added { background: var(--bcs-success-soft); color: var(--bcs-success-strong); }
    .bcs-gf-removed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--bcs-ink-subtle); }
    .bcs-gf-removed > i { font-size: 11px; }

    /* Cards after the four stages (the fallback): no number, lined up with the stage cards when they sit on the rail */
    .bcs-gf-extra { margin-top: 16px; }
    @container gf-col (min-width: 566px) {
        .bcs-gf-extra { margin-left: 44px; }
        .bcs-gf-extra .bcs-gf-card-head { padding: 16px 20px; }
        .bcs-gf-extra .bcs-gf-card-body { padding: 20px; }
    }
    .bcs-gf-extra-icon {
        flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: -3px; border-radius: 8px;
        background: var(--bcs-surface-muted); box-shadow: inset 0 0 0 1px var(--bcs-edge); color: var(--bcs-ink-muted); font-size: 13px;
    }

    /* AI receptionist: current template, industry picker options, ability rows with channel tags, compiled prompt */
    .bcs-ai-current { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px 16px; }
    @container gf-col (max-width: 519.98px) {
        .bcs-ai-current > button { grid-column: 2 / -1; justify-self: start; }
    }
    .bcs-ai-tpl-icon {
        flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px;
        background: var(--bcs-primary-soft); color: var(--bcs-primary-strong); font-size: 16px;
    }
    .bcs-ai-tpl-icon.is-sm { width: 32px; height: 32px; border-radius: 8px; font-size: 13px; }
    .bcs-ai-industry { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--bcs-ink-muted); }
    .bcs-ai-tplname { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--bcs-ink); }
    .bcs-ai-tpldesc { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--bcs-ink-muted); }
    .bcs-ai-tpl {
        position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--bcs-edge); border-radius: 12px;
        background: var(--bcs-surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }
    .bcs-ai-tpl:hover { border-color: var(--bcs-field-border-hover); }
    .bcs-ai-tpl:has(> input:checked) { border-color: var(--bcs-primary); box-shadow: 0 0 0 1px var(--bcs-primary); background: color-mix(in srgb, var(--bcs-primary) 5%, var(--bcs-surface)); }
    .bcs-ai-tpl:has(> input:focus-visible) { box-shadow: 0 0 0 1px var(--bcs-primary), 0 0 0 4px var(--bcs-focus); }
    .bcs-ai-tpl .bcs-ai-tpldesc { font-size: 12px; line-height: 16px; }
    .bcs-ai-tpl-current {
        flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 9999px; background: var(--bcs-surface-muted);
        box-shadow: inset 0 0 0 1px var(--bcs-edge); font-size: 11px; line-height: 16px; font-weight: 500; color: var(--bcs-ink-muted);
    }
    .bcs-ai-ability { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bcs-surface); }
    .bcs-ai-ability + .bcs-ai-ability { border-top: 1px solid var(--bcs-edge); }
    .bcs-ai-ability-text { flex: 1 1 auto; min-width: 0; }
    .bcs-ai-ability:not(.is-on) .bcs-gf-option-name { color: var(--bcs-ink-muted); }
    .bcs-ai-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
    .bcs-ai-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 9999px; font-size: 11px; line-height: 16px; font-weight: 500; }
    .bcs-ai-tag > i { font-size: 9px; }
    .bcs-ai-tag.is-call { background: var(--bcs-channel-call-soft); color: var(--bcs-channel-call-strong); }
    .bcs-ai-tag.is-chat { background: var(--bcs-channel-chat-soft); color: var(--bcs-channel-chat-strong); }
    .bcs-ai-tag.is-email { background: var(--bcs-channel-email-soft); color: var(--bcs-channel-email-strong); }
    .bcs-ai-pv-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--bcs-edge); }
    .bcs-ai-prompt { padding: 0 16px 8px; }
    .bcs-ai-psec { padding: 14px 0; border-bottom: 1px solid var(--bcs-edge); font-size: 13px; line-height: 19px; color: var(--bcs-ink); }
    .bcs-ai-psec:last-child { border-bottom: 0; }
    .bcs-ai-psec > h5 { margin: 0 0 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--bcs-ink-muted); }
    .bcs-ai-psec > p { margin: 0; }
    .bcs-ai-psec > .bcs-gf-pv-script { margin: 0; }
    .bcs-ai-psec ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
    .bcs-ai-psec li { position: relative; padding-left: 14px; }
    .bcs-ai-psec li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 9999px; background: var(--bcs-ink-subtle); }
    .bcs-ai-psec strong { font-weight: 600; }
    .bcs-ai-facts { display: flex; flex-direction: column; gap: 8px; margin: 0; }
    .bcs-ai-facts dt { font-weight: 600; }
    .bcs-ai-facts dd { margin: 0; color: var(--bcs-ink-muted); }

    /* Wide: flow and preview side by side, each scrolling inside the shell; narrow: one at a time */
    @container gf (min-width: 900px) {
        .bcs-gf-viewswitch { display: none; }
        .bcs-gf-layout { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); }
        .bcs-gf-layout.is-wide-aside { grid-template-columns: minmax(0, 1fr) 360px; }
        .bcs-gf-builder { align-self: stretch; min-height: 0; overflow-y: auto; padding: 0 6px 24px 0; scrollbar-gutter: stable; }
        .bcs-gf-preview { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
    }
    @container gf (max-width: 899.98px) {
        .bcs-gf-layout[data-view="flow"] > .bcs-gf-preview,
        .bcs-gf-layout[data-view="preview"] > .bcs-gf-builder { display: none; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .bcs-gf-card, .bcs-gf-marker, .bcs-gf-token, .bcs-gf-option, .bcs-gf-step, .bcs-gf-icon-btn, .bcs-gf-add,
    .bcs-gf-pv-num, .bcs-gf-pv-opt, .bcs-gf-pv-step, .bcs-gf-pv-end, .bcs-ai-tpl { transition: none; }
}
/* --- end res2: flow builder --- */

/* --- res2: business modules (knowledge base, phone numbers, billing, settings) --- */
/* Three new .bcs-list variants (see the responsive list doc comment, "refresh: profile" block, for the base system).
   Each only needs its narrow (card) grid; the @container(min-width:860px) switch to a table is already generic. */
@layer components {
    /* Knowledge base articles: title + edit action on one line, category on its own line, used-by badges on the next. */
    .bcs-list--articles tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title act" "cat cat" "used used"; }
    .bcs-list--articles td[data-col="title"] { grid-area: title; }
    .bcs-list--articles td[data-col="cat"] { grid-area: cat; }
    .bcs-list--articles td[data-col="used"] { grid-area: used; }
    .bcs-list--articles td[data-col="act"] { grid-area: act; justify-self: end; align-self: start; }

    /* Owned phone numbers: number + status on one line, label on its own line, routing and cost each get a full line
       (routing is a select, which would otherwise truncate sharing a line with the cost text). */
    .bcs-list--numbers tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num status" "label label" "route route" "cost cost"; }
    .bcs-list--numbers td[data-col="num"] { grid-area: num; }
    .bcs-list--numbers td[data-col="label"] { grid-area: label; }
    .bcs-list--numbers td[data-col="route"] { grid-area: route; }
    .bcs-list--numbers td[data-col="cost"] { grid-area: cost; }
    .bcs-list--numbers td[data-col="status"] { grid-area: status; justify-self: end; align-self: start; }

    /* Products & services catalogue: name + send toggle on one line, price and duration on the next. */
    .bcs-list--products tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name send" "price duration"; }
    .bcs-list--products td[data-col="name"] { grid-area: name; }
    .bcs-list--products td[data-col="price"] { grid-area: price; }
    .bcs-list--products td[data-col="duration"] { grid-area: duration; }
    .bcs-list--products td[data-col="send"] { grid-area: send; justify-self: end; align-self: start; }
}
/* --- end res2: business modules --- */