/*
 * Portal UI refinements.
 * Enqueued after tailwind.css (depends on tailwind-css) so these overrides win
 * on source order; selectors are also kept specific enough to beat utilities.
 */

/* Sidebar primary menu: icon spacing + size. The ^= match also covers the
   sidebar chat-view nav dropdown (#menu-primary-menu-links-chatnav) so its
   items look identical to the regular menu. */
[id^="menu-primary-menu-links"] .menu-icon {
    margin-right: .3rem !important;
}
[id^="menu-primary-menu-links"] .menu-icon .svg-icon.svg-icon-2,
[id^="menu-primary-menu-links"] .menu-icon .svg-icon.svg-icon-2 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    font-size: 1.25rem !important;
    line-height: 1.25rem !important;
}

/* (Tag title + count size is set inline in template-my-tasks.php to beat the
   fs-7/fs-8 utility classes.) */

/* Settings pages: one consistent page-title style across every tab pane
   (size, line-height, and spacing). */
.settings-page-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: #1F2430;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
}
.settings-page-title i {
    font-size: 20px;
}

/* My Tasks tag chips: reveal edit/delete only on hover */
.tag-list-item .btn-icon {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity .12s ease;
}
.tag-list-item:hover .btn-icon,
.tag-list-item:focus-within .btn-icon {
    opacity: 1 !important;
    pointer-events: auto;
}

/* Inline info hints ("Press Ctrl+Enter to send", etc.): consistent size + weight,
   site-wide. Any muted text that directly contains an info-circle icon.
   Placed in tailwind's `components` layer, with higher specificity than `.fs-7`,
   because that utility is a *layered* `!important` — an unlayered rule (even
   `!important`) loses to it per the CSS cascade-layer rules. */
@layer components {
    .text-muted:has(> .bi-info-circle),
    .text-muted:has(> i.bi-info-circle) {
        font-size: 11px !important;
        font-weight: 400 !important;
    }
}


/* ── Responsive record single-views (asset / location / ticket) ─────────────
   The record body switches between a two-column layout and a single-column
   tabbed layout based on the width of its CONTAINER, not the viewport. Only a
   container query reaches the pinned split-panel: a ~440-960px panel on a wide
   desktop still needs the stacked view, which a viewport media query can't see.
   Mobile and tablet get it for free (their container is narrow too).

   Mobile-first: stacked is the default; the two-column view is opt-in at a wide
   container. Browsers without container-query support keep the stacked view
   (fully functional). The 1100px threshold matches the layout's original intent
   (its comments read "two column >= 1100px"). */
.cove-record-responsive {
    container-type: inline-size;
    container-name: coverecord;
}
.cove-record-stacked { display: block; }
.cove-record-split   { display: none; }

@container coverecord (min-width: 1100px) {
    .cove-record-stacked { display: none; }
    /* .row here is only made a flex row by the old d-lg-flex utility we removed;
       re-assert it so the col-lg-* children lay out side by side. */
    .cove-record-split   { display: flex; flex-wrap: wrap; }
}

/* Locations use a single .row (no separate stacked view) with a fully-tabbed
   right column. Stack its two columns when the CONTAINER is narrow so the
   pinned panel / mobile / tablet read as one column. The col-lg-* widths are
   applied by a viewport media query, so the container-query override needs the
   extra .cove-location-responsive class to out-specify them. */
@container coverecord (max-width: 1099.98px) {
    .cove-location-responsive > .row > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Account page (settings-style vertical-tab card). When the CONTAINER is narrow
   — a pinned split panel, tablet, or mobile — a vertical nav sidebar wastes the
   little width available. Collapse the two columns into one and turn the nav
   into a dropdown (the same pattern as the sidebar Chat-view nav): a trigger
   button shows the active tab, and the existing settings-nav <ul> becomes an
   absolutely-positioned dropdown panel. Scoped to .cove-settings-responsive
   (only the account card) so the grouped /settings/ nav is left untouched. The
   col-lg-* widths come from a viewport media query (specificity 0-1-0), so
   these selectors out-specify them without !important. */
.cove-settings-responsive {
    container-type: inline-size;
    container-name: covesettings;
}
/* The dropdown trigger only exists for the narrow layout; hidden by default so
   the wide layout keeps the plain vertical sidebar. */
.cove-settings-current { display: none; }

@container covesettings (max-width: 900px) {
    .cove-settings-responsive > .card-body > .row > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .cove-settings-responsive .col-lg-2.border-end {
        border-right: 0 !important;
        border-bottom: 1px solid var(--color-gray-200, #eaecf0);
    }
    .cove-settings-navdrop { position: relative; padding: .625rem .75rem; }

    /* Trigger button — mirrors .cove-chat-current from the sidebar chat nav. */
    .cove-settings-current {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: 8px;
        background: #fff;
        color: var(--color-gray-700, #3f4254);
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
    }
    .cove-settings-current:hover { border-color: var(--color-primary, #7239ea); }
    .cove-settings-current-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
    .cove-settings-current-icon i { font-size: 16px; }
    .cove-settings-current-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cove-settings-current-caret { flex: 0 0 auto; font-size: 12px; opacity: .6; transition: transform .15s; }
    .cove-settings-navdrop.is-open .cove-settings-current-caret { transform: rotate(180deg); }

    /* The <ul> becomes the dropdown panel — mirrors .cove-chat-navmenu. It keeps
       its native flex-direction: column (a vertical list), so no layer fight. */
    .cove-settings-navdrop .settings-nav.flex-column {
        position: absolute;
        left: .75rem;
        right: .75rem;
        top: calc(100% - 2px);
        z-index: 40;
        max-height: 60vh;
        overflow-y: auto;
        margin: 0;
        padding: 6px !important;
        background: #fff;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    }
    .cove-settings-navdrop:not(.is-open) .settings-nav.flex-column { display: none; }

    .cove-settings-responsive .tab-content.p-8 {
        padding: 1.25rem !important;
    }
}

/* /settings/ (template-application-settings.php) already ships a mobile nav
   toggle (#settingsNavToggle reveals the grouped #settingsNavList), but it is
   gated by the `lg` VIEWPORT (lg:hidden), so a pin on a wide screen never shows
   it. Reuse that same toggle, driven by the CONTAINER instead: when the settings
   card is narrow, stack the sidebar + content, reveal the toggle, and float the
   grouped list as a dropdown panel. The toggle's own JS already syncs the label
   and auto-collapses (its isMobile() now keys off the toggle being visible). */
@container covesettings (max-width: 900px) {
    .cove-settings-flex { flex-direction: column; }
    .cove-settings-navcol {
        position: relative;
        border-right: 0 !important;
        padding: .75rem !important;
    }
    /* Reveal the trigger (overrides the lg:hidden viewport utility). */
    .cove-settings-navcol #settingsNavToggle {
        display: flex;
        margin-bottom: 0 !important;
    }
    /* The grouped list floats as a dropdown panel (mirrors .cove-chat-navmenu). */
    .cove-settings-navcol #settingsNavList {
        position: absolute;
        left: .75rem;
        right: .75rem;
        top: calc(100% - .25rem);
        z-index: 40;
        max-height: 60vh;
        overflow-y: auto;
        margin: 0;
        padding: 6px 8px;
        background: #fff;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    }
    /* Respect the toggle's JS: when it marks the list hidden, actually hide it
       (an unlayered rule beats the layered lg:block utility). */
    .cove-settings-navcol #settingsNavList.hidden { display: none; }
}

/* Invoice / estimate single view. The PDF-like card sits in a centered
   col-lg-10 col-xl-9 column whose widths come from VIEWPORT breakpoints, so a
   pinned split panel squeezes the card and offsets it (the column stays 75% wide
   and centered inside the already-narrow content area). When the content
   container is narrow, force that column full width and left-aligned. Reuses the
   coverecord container established by .cove-record-responsive on the content
   container; the selectors out-specify the col-* viewport utilities. */
@container coverecord (max-width: 1099.98px) {
    .cove-invoice-responsive .row.justify-content-center {
        justify-content: flex-start !important;
    }
    .cove-invoice-responsive .row.justify-content-center > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Asset / location record header (title + client logo). Two fixes:
   1. The title must shrink with its CONTAINER, not the viewport — in a pinned
      split panel the container is narrow while the viewport is still wide, so
      text-3xl stayed oversized. cqi units size it to the header's own width.
   2. The title is often a long unbroken string (a domain like
      "Account.Clientcove.io") that overflowed its column and ran over the logo.
      overflow-wrap lets it wrap, and a cqw cap keeps a wide logo from crowding
      it — so the two never overlap. Needs the header to be a container. */
.cove-record-header { container-type: inline-size; }
.cove-record-header h1.page-heading {
    display: block;
    min-width: 0;
    font-size: clamp(1.125rem, 4.2cqi, 1.875rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.cove-record-header img {
    max-width: 38cqw;
    height: auto;
}

/* ── Reference picker (shared by Messages + ticket reply) ───────────────────
   Moved out of template-messages.php so the ticket reply can use the same
   "Insert reference" modal + inline chip. See includes/parts/global/reference-picker.php. */
#reference-picker.ref-backdrop { position: fixed; inset: 0; z-index: 100050; background: transparent; display: flex; align-items: center; justify-content: center; }
#reference-picker .ref-modal { width: 92%; max-width: 640px; max-height: 80vh; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; }
#reference-picker .ref-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eceff4; }
#reference-picker .ref-head h6 { margin: 0; font-weight: 700; }
#reference-picker .ref-types { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid #f1f3f7; }
#reference-picker .ref-type { border: 1px solid #e3e7ee; background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: #5b6472; }
#reference-picker .ref-type.is-active { background: #e9effd; border-color: #b9cdfa; color: #1f4bd8; }
#reference-picker .ref-search { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #f1f3f7; color: #8b93a1; }
#reference-picker .ref-search input { flex: 1; border: 0; outline: 0; font-size: 14px; }
#reference-picker .ref-results { overflow-y: auto; padding: 6px 8px; flex: 1; min-height: 120px; }
#reference-picker .ref-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
#reference-picker .ref-row:hover, #reference-picker .ref-row.is-active { background: #f4f6f9; }
#reference-picker .ref-row .ref-ic { color: #6b7280; }
#reference-picker .ref-row .ref-t { font-weight: 600; }
#reference-picker .ref-row .ref-badge { margin-left: auto; font-size: 11px; color: #8b93a1; text-transform: uppercase; letter-spacing: .03em; }
#reference-picker .ref-empty { text-align: center; color: #8b93a1; padding: 28px 12px; font-size: 13.5px; }
#reference-picker .ref-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid #eceff4; }
#reference-picker .ref-count { font-size: 12px; color: #8b93a1; }
.cove-msg-ref { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; margin: 0 2px; border-radius: 999px; background: #e9effd; color: #1f4bd8 !important; font-weight: 600; font-size: .92em; text-decoration: none !important; line-height: 1.7; }
.cove-msg-ref:hover { background: #dbe6fd; }
.cove-msg-ref i { font-size: .9em; }

/* ── Ticket reply submit split button (design handoff: Submit Status Split Button) ── */
.cove-reply-toggle { position: relative; width: 44px; height: 24px; border-radius: 999px; padding: 2px; background: #d4d7dd; transition: background .18s; display: inline-block; flex: 0 0 auto; }
.cove-reply-toggle.is-on { background: #0f172a; }
.cove-reply-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.25); transition: transform .18s cubic-bezier(.32,.72,0,1); }
.cove-reply-toggle.is-on .cove-reply-toggle-knob { transform: translateX(20px); }
.cove-reply-toggle-label { font-size: 14px; font-weight: 500; color: #334155; }
.cove-reply-cancel { background: #f59e0b; color: #7c2d12; font-size: 14px; font-weight: 600; border: 0; border-radius: 8px; padding: 9px 16px; cursor: pointer; transition: background .15s, color .15s; }
.cove-reply-cancel:hover { background: #d97706; color: #fff; }
.cove-reply-cancel:active { background: #b45309; }
.cove-reply-cancel:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245,158,11,.4); }
.cove-reply-split { position: relative; display: inline-flex; border-radius: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.cove-reply-primary { display: inline-flex; align-items: center; gap: 9px; background: #0f172a; color: #fff; font-size: 14px; font-weight: 600; border: 0; border-radius: 10px 0 0 10px; padding: 10px 16px; white-space: nowrap; cursor: pointer; transition: background .15s; }
.cove-reply-primary:hover { background: #1e293b; }
.cove-reply-primary:active { background: #0b1220; }
.cove-reply-primary:disabled { opacity: .55; cursor: default; }
.cove-reply-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15,23,42,.28); }
.cove-reply-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.18); flex: 0 0 auto; }
.cove-reply-divider { width: 1px; background: rgba(255,255,255,.18); position: relative; z-index: 1; }
.cove-reply-caret { display: inline-flex; align-items: center; justify-content: center; background: #0f172a; color: #cbd5e1; border: 0; border-radius: 0 10px 10px 0; padding: 0 11px; cursor: pointer; transition: background .15s, color .15s; }
.cove-reply-caret:hover { background: #1e293b; color: #fff; }
.cove-reply-caret.is-open { background: #1e293b; color: #fff; }
.cove-reply-caret:disabled { opacity: .55; cursor: default; }
.cove-reply-caret:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15,23,42,.28); }
.cove-reply-caret i { font-size: 13px; transition: transform .2s cubic-bezier(.32,.72,0,1); display: inline-flex; }
.cove-reply-caret.is-open i { transform: rotate(180deg); }
.cove-reply-statusmenu { position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 236px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px -8px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.06); z-index: 100060; animation: coveReplyMenuIn .16s cubic-bezier(.32,.72,0,1); }
@keyframes coveReplyMenuIn { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.cove-reply-statusmenu-head { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; padding: 8px 10px 6px; }
.cove-reply-status-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; cursor: pointer; transition: background .12s; }
.cove-reply-status-row:hover { background: #f4f5f7; }
.cove-reply-status-row.is-selected { background: #f8f9fb; }
.cove-reply-status-pill { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; border-radius: 7px; padding: 5px 11px; white-space: nowrap; }
.cove-reply-status-hint { flex: 1; text-align: right; font-size: 11.5px; color: #94a3b8; white-space: nowrap; }
.cove-reply-status-check { font-size: 15px; color: #0f172a; }
@media (prefers-reduced-motion: reduce) { .cove-reply-statusmenu { animation: none; } .cove-reply-caret i, .cove-reply-toggle-knob { transition: none; } }


/* ── User Management page shell (intake-manager parity) ─────────────────────
   Reusable classes for the User Management shell (templates/template-user-management.php).
   Kept in the `components` layer so they beat Tailwind's *layered* `!important`
   utilities (per the CSS-override gotcha). Tokens: site --color-primary (#7239ea)
   and --cc-border-color (#e4e6ef); no new palette. */
@layer components {
    /* Search input-group: fixed-ish width, matches intake's search box. */
    .cove-um-search {
        width: 250px;
        max-width: 100%;
    }

    /* Underline tab bar — replaces the Metronic `nav nav-tabs nav-line-tabs`.
       The <ul> carries the bottom border (Tailwind border-b border-gray-200);
       each <a> sits on it with a transparent 2px underline that fills in on
       hover / active, echoing the generic coveTabs `tab()` binding. */
    .cove-um-tabs {
        list-style: none;
        padding-left: 0;
    }
    .cove-um-tab-item {
        margin-bottom: 0;
    }
    .cove-um-tab {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .7rem .95rem;
        margin-bottom: -1px; /* overlap the bar's 1px bottom border */
        font-size: .95rem;
        font-weight: 500;
        line-height: 1.4;
        color: var(--bs-gray-600, #78829d);
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        white-space: nowrap;
        text-decoration: none;
        transition: color .15s ease, border-color .15s ease;
    }
    .cove-um-tab:hover,
    .cove-um-tab:focus {
        color: var(--bs-gray-800, #3f4254);
        border-bottom-color: var(--cc-border-color, #e4e6ef);
    }
    .cove-um-tab.cove-um-tab-active {
        color: var(--color-primary, #7239ea);
        border-bottom-color: var(--color-primary, #7239ea);
    }
}


/* ── Agents tab: create-agent form (R4b T2) ─────────────────────────────────
   Restyles the New-agent form to the mockup's LAYOUT in site tokens
   (intake-manager parity): --color-primary (#7239ea) for selection/accent,
   --cc-border-color (#e4e6ef) for borders, the site font. NOT the mockup's
   warm palette. In the `components` layer so it beats Tailwind's *layered*
   !important utilities (per the CSS-override gotcha). Custom controls
   (model cards, autonomy segmented, tier pills, all-clients switch) get real
   radiogroup/switch semantics in the markup + agents-tab.js. */
@layer components {
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-lede {
        max-width: 70ch;
        font-size: .8125rem;
        line-height: 1.5;
        color: var(--bs-gray-600, #78829d);
        margin: 0 0 1rem;
    }

    /* New-agent trigger + create panel (R4b UI slim) — replaces the old
       Bootstrap card + peach card-header. The trigger is a plain primary
       button; the open panel is a clean bordered panel in site tokens. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-create-wrap { margin-bottom: 1.5rem; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-new-trigger { min-height: 40px; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-create-panel {
        margin-top: 1rem;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: .75rem;
        background: #fff;
        padding: 1.25rem 1.25rem 1.125rem;
    }

    /* Advanced expander (model / autonomy / tier) — collapsed by default. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-advanced {
        margin-bottom: 1rem;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: .625rem;
        background: var(--bs-gray-100, #f9f9f9);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-advanced-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .25rem 1rem;
        justify-content: space-between;
        padding: .625rem .875rem;
        min-height: 44px;
        cursor: pointer;
        list-style: none;
        font-size: .8125rem;
        font-weight: 700;
        color: var(--bs-gray-800, #3f4254);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-advanced-summary::-webkit-details-marker { display: none; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-advanced-title::before {
        content: "\25B8";
        display: inline-block;
        margin-right: .375rem;
        color: var(--bs-gray-600, #78829d);
        transition: transform .15s ease;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-advanced[open] .cove-agent-advanced-title::before { transform: rotate(90deg); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-advanced-hint { font-weight: 500; color: var(--bs-gray-600, #78829d); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-advanced-values {
        font-weight: 500;
        color: var(--bs-gray-600, #78829d);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-advanced[open] .cove-agent-advanced-values { display: none; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-advanced-summary:focus-visible {
        outline: 2px solid var(--color-primary, #7239ea);
        outline-offset: -2px;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-advanced-body {
        padding: .5rem .875rem 1rem;
        border-top: 1px solid var(--cc-border-color, #e4e6ef);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-advanced-body .cove-agent-form-section:last-child { margin-bottom: 0; }

    /* Model select — compact, capped width like the other create inputs. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-model-select { max-width: 420px; }

    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-form-section { margin-bottom: 1rem; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-form-section:empty { margin-bottom: 0; }

    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-section-label {
        display: block;
        font-size: .8125rem;
        font-weight: 700;
        color: var(--bs-gray-800, #3f4254);
        margin-bottom: .5rem;
    }

    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-help {
        font-size: .8125rem;
        line-height: 1.55;
        color: var(--bs-gray-600, #78829d);
        margin: .5rem 0 0;
        max-width: 70ch;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-help strong { color: var(--bs-gray-800, #3f4254); }

    /* Text inputs — match intake-manager's inputs. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-input {
        width: 100%;
        max-width: 420px;
        box-sizing: border-box;
        padding: .625rem .75rem;
        min-height: 44px;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: .625rem;
        font-size: .9rem;
        color: var(--bs-gray-900, #181c32);
        background: #fff;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-input:focus {
        outline: none;
        border-color: var(--color-primary, #7239ea);
        box-shadow: 0 0 0 .2rem rgba(114, 57, 234, .15);
    }

    /* Preset picker (Brief / Studio / Books / Custom) — R4b T3. Same visual
       language as the model cards; the "Good for" line + tier badge + starter
       note teach what each preset does before it pre-fills the form. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-preset-grid {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-preset-chip {
        flex: 1 1 150px;
        min-width: 140px;
        max-width: 230px;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: .125rem;
        padding: .5rem .75rem;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: .625rem;
        background: #fff;
        cursor: pointer;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-preset-chip:hover { background: var(--bs-gray-100, #f9f9f9); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-preset-chip.is-selected {
        border-color: var(--color-primary, #7239ea);
        box-shadow: 0 0 0 1px var(--color-primary, #7239ea);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-preset-chip-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .375rem;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-preset-label {
        font-size: .875rem;
        font-weight: 700;
        color: var(--bs-gray-900, #181c32);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-preset-tier {
        flex: none;
        font-size: .625rem;
        font-weight: 700;
        letter-spacing: .02em;
        color: var(--color-primary, #7239ea);
        background: rgba(114, 57, 234, .1);
        border-radius: .5rem;
        padding: .0625rem .4375rem;
        white-space: nowrap;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-preset-sub {
        font-size: .75rem;
        line-height: 1.35;
        color: var(--bs-gray-600, #78829d);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Partial-success banner: agent created, its starter keyring failed to
       apply (the non-atomic create->keyring two-step). Amber, with a retry
       that re-POSTs only the keyring — never a second create. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-partial-banner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: 1.25rem;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-partial-msg { font-size: .8125rem; line-height: 1.5; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-partial-detail { color: var(--bs-gray-700, #5e6278); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-partial-actions {
        display: flex;
        gap: .5rem;
        flex: none;
    }

    /* Create-panel + drawer form controls (custom model field, autonomy segmented
       control, max-tier pills, client-scope grid, all-clients switch, live summary,
       actions row). Restored in 4.86.1 — the 4.86.0 cleanup removed them by mistake. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-custom-model { margin-top: .75rem; }

    /* Autonomy segmented control. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-segmented {
        display: inline-flex;
        gap: .25rem;
        padding: .25rem;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: .625rem;
        background: var(--bs-gray-100, #f9f9f9);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-seg-btn {
        flex: 1;
        min-width: 130px;
        min-height: 40px;
        padding: .5rem 1rem;
        border: 1px solid transparent;
        border-radius: .5rem;
        background: transparent;
        font-size: .875rem;
        font-weight: 600;
        color: var(--bs-gray-600, #78829d);
        cursor: pointer;
        transition: color .15s ease, background .15s ease, box-shadow .15s ease;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-seg-btn:hover { color: var(--bs-gray-900, #181c32); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-seg-btn.is-selected {
        background: #fff;
        border-color: var(--cc-border-color, #e4e6ef);
        color: var(--color-primary, #7239ea);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    }

    /* Max-tier pill row. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tier-row {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tier-pill {
        padding: .5rem 1rem;
        min-height: 40px;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: 999px;
        background: #fff;
        font-size: .875rem;
        font-weight: 600;
        color: var(--bs-gray-700, #5e6278);
        cursor: pointer;
        transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tier-pill:hover { background: var(--bs-gray-100, #f9f9f9); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tier-pill.is-selected {
        border-color: var(--color-primary, #7239ea);
        color: var(--color-primary, #7239ea);
        box-shadow: 0 0 0 1px var(--color-primary, #7239ea);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tier-hint {
        margin: .625rem 0 0;
        font-size: .8125rem;
        color: var(--bs-gray-700, #5e6278);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tier-footnote {
        margin: .375rem 0 0;
        font-size: .75rem;
        line-height: 1.5;
        color: var(--bs-gray-600, #78829d);
        max-width: 70ch;
    }

    /* Client scope. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-scope-head {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        align-items: center;
        justify-content: space-between;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-scope-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: .25rem;
        margin-top: .625rem;
        padding: .75rem;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: .75rem;
        background: #fff;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-scope-grid.is-disabled {
        opacity: .5;
        pointer-events: none;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-scope-item {
        display: flex;
        align-items: center;
        gap: .625rem;
        min-height: 44px;
        padding: .375rem .5rem;
        border-radius: .5rem;
        font-size: .875rem;
        font-weight: 500;
        color: var(--bs-gray-800, #3f4254);
        cursor: pointer;
        margin: 0;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-scope-item:hover { background: var(--bs-gray-100, #f9f9f9); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-scope-item input[type="checkbox"] {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        accent-color: var(--color-primary, #7239ea);
        cursor: pointer;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-scope-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* All-clients switch (a real checkbox styled as a switch). */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-switch {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-size: .8125rem;
        font-weight: 600;
        color: var(--bs-gray-800, #3f4254);
        cursor: pointer;
        margin: 0;
        min-height: 44px;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-switch-track {
        position: relative;
        display: inline-block;
        width: 38px;
        height: 22px;
        flex: 0 0 38px;
        border-radius: 999px;
        background: var(--bs-gray-300, #dbdfe9);
        transition: background .16s ease;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-switch-knob {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        transition: left .16s ease;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-switch input:checked + .cove-agent-switch-track { background: var(--color-primary, #7239ea); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-switch input:checked + .cove-agent-switch-track .cove-agent-switch-knob { left: 19px; }

    /* Live summary. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-summary {
        margin: 0 0 1.25rem;
        font-size: .8125rem;
        color: var(--bs-gray-700, #5e6278);
        min-height: 1.2em;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-summary:empty { margin: 0; }

    /* Actions row + submit. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        align-items: center;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-submit { min-height: 44px; }


    /* Focus-visible outlines in a token color, adequate contrast. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-seg-btn:focus-visible,
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tier-pill:focus-visible,
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-scope-item input:focus-visible,
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-switch input:focus-visible + .cove-agent-switch-track {
        outline: 2px solid var(--color-primary, #7239ea);
        outline-offset: 2px;
    }

    /* ── Agents tab: pending-approvals bar (R4b T4) ──────────────────────
       The R3 out-of-band approval queue, wired to the REAL per-owner
       pending count (count($pending_actions) at render). Empty state uses
       the plan's locked copy; a non-empty state shows the count above the
       Approve/Deny table (whose buttons keep their shipped handlers). */
    /* (C1) the two approvals/drafts bars were replaced by .cove-inbox — see the Workstream C1 block at the end of this file. */

    /* ── Agents tab: agent list grid table (R4b T4) ──────────────────────
       Mockup's 8-column grid in site tokens. Desktop = horizontal-scroll
       grid (min-width guard); <768px = each agent stacks to a labeled card
       (see the media query below) so phones never side-scroll. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-list-card {
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: .75rem;
        background: #fff;
        margin-bottom: 1.5rem;
        overflow: hidden;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-list-head {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--cc-border-color, #e4e6ef);
        background: var(--bs-gray-100, #f9f9f9);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-list-owner { font-size: .95rem; font-weight: 700; color: var(--bs-gray-900, #181c32); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-list-meta { margin-left: .5rem; font-size: .78rem; font-weight: 600; color: var(--bs-gray-600, #78829d); }

    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-grid-scroll { overflow-x: auto; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-grid-inner { min-width: 900px; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-grid-row {
        display: grid;
        grid-template-columns: 1.5fr 1.15fr .85fr .85fr 1.1fr .8fr .8fr 2fr;
        gap: .75rem;
        align-items: center;
        padding: .875rem 1.25rem;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-grid-head {
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--bs-gray-600, #78829d);
        border-bottom: 1px solid var(--cc-border-color, #e4e6ef);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-grid-head .cove-agent-cell-actions { display: block; text-align: right; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-row-wrap { border-bottom: 1px solid var(--cc-border-color, #e4e6ef); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-row-wrap:last-child { border-bottom: 0; }

    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-ident { display: flex; align-items: center; gap: .625rem; min-width: 0; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-avatar {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 9px;
        background: rgba(114, 57, 234, .1);
        color: var(--color-primary, #7239ea);
        font-size: .75rem;
        font-weight: 800;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-ident-text { min-width: 0; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-ident-name {
        display: block;
        font-size: .875rem;
        font-weight: 700;
        color: var(--bs-gray-900, #181c32);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-ident-handle {
        display: block;
        font-size: .75rem;
        color: var(--bs-gray-600, #78829d);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-cell-model {
        font-size: .8rem;
        color: var(--bs-gray-800, #3f4254);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-cell-tier { font-size: .85rem; font-weight: 600; color: var(--bs-gray-800, #3f4254); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-cell-scope,
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-cell-keyring {
        font-size: .85rem;
        color: var(--bs-gray-700, #5e6278);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-cell-keyring .text-muted { color: var(--bs-gray-500, #99a1b7) !important; }

    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-status-pill {
        display: inline-block;
        padding: .25rem .625rem;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 700;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-status-active { background: #e8fff3; color: #17c653; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-status-revoked { background: #fff5f8; color: #f8285a; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-status-paused { background: #fff4de; color: #b96b00; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-autonomy-pill {
        display: inline-block;
        padding: .25rem .625rem;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 700;
        background: var(--bs-gray-200, #f1f1f2);
        color: var(--bs-gray-700, #5e6278);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-autonomy-pill.is-autonomous { background: rgba(114, 57, 234, .1); color: var(--color-primary, #7239ea); }

    /* Row action buttons — keep the shipped .cove-agent-*-btn hooks; this is
       presentational only. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-cell-actions { display: flex; flex-wrap: wrap; gap: .375rem; justify-content: flex-end; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-act-btn {
        padding: .375rem .75rem;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        background: #fff;
        border-radius: .5rem;
        font-size: .78rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--bs-gray-800, #3f4254);
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease, color .15s ease;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-act-btn:hover { background: var(--bs-gray-100, #f9f9f9); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-act-btn.is-primary { color: var(--color-primary, #7239ea); border-color: rgba(114, 57, 234, .35); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-act-btn.is-primary:hover { background: rgba(114, 57, 234, .08); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-act-btn.is-danger { color: #f8285a; border-color: #fbd9e2; background: #fff8fa; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-act-btn.is-danger:hover { background: #fff5f8; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-act-btn:focus-visible {
        outline: 2px solid var(--color-primary, #7239ea);
        outline-offset: 2px;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-row-dash { font-size: .78rem; color: var(--bs-gray-500, #99a1b7); }

    /* Edit panel controls — site-token parity with the create form. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-edit-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-edit-grid .cove-agent-edit-full { grid-column: 1 / -1; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-select {
        width: 100%;
        box-sizing: border-box;
        padding: .625rem .75rem;
        min-height: 44px;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: .625rem;
        font-size: .9rem;
        color: var(--bs-gray-900, #181c32);
        background: #fff;
    }
    #cove_agents_tab select.cove-agent-select[multiple] { min-height: 6.5rem; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-select:focus {
        outline: none;
        border-color: var(--color-primary, #7239ea);
        box-shadow: 0 0 0 .2rem rgba(114, 57, 234, .15);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-edit-actions { margin-top: 1rem; }

    /* Keyring panel — mockup's inline tool list in site tokens. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-keyring-head {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: .5rem;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-keyring-title { font-size: .95rem; font-weight: 700; color: var(--bs-gray-900, #181c32); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-keyring-note { font-size: .8125rem; color: var(--bs-gray-600, #78829d); }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-keyring-group {
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--bs-gray-600, #78829d);
        margin: .875rem 0 .25rem;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tool-row {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem 1rem;
        align-items: center;
        justify-content: space-between;
        padding: .75rem 0;
        border-top: 1px solid var(--cc-border-color, #e4e6ef);
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tool-main { display: flex; align-items: flex-start; gap: .625rem; min-width: 240px; flex: 1; margin: 0; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tool-grant {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        margin-top: .125rem;
        accent-color: var(--color-primary, #7239ea);
        cursor: pointer;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tool-name {
        font-size: .8125rem;
        font-weight: 700;
        color: var(--bs-gray-900, #181c32);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tool-desc { font-size: .78rem; color: var(--bs-gray-600, #78829d); margin-top: .125rem; line-height: 1.45; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tool-meta { display: flex; align-items: center; gap: .625rem; flex: none; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tool-tier {
        padding: .1875rem .5rem;
        border-radius: 999px;
        background: var(--bs-gray-200, #f1f1f2);
        font-size: .6875rem;
        font-weight: 700;
        color: var(--bs-gray-700, #5e6278);
        white-space: nowrap;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tool-confirm-label {
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        font-size: .72rem;
        font-weight: 600;
        color: var(--bs-gray-600, #78829d);
        margin: 0;
        cursor: pointer;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-tool-confirm { width: 16px; height: 16px; accent-color: var(--color-primary, #7239ea); cursor: pointer; }

    /* Card-stack the agent grid on phones (plan's preferred mobile UX). */
    @media (max-width: 767.98px) {
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-grid-inner { min-width: 0; }
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-grid-scroll { overflow-x: visible; }
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-grid-head { display: none; }
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-grid-row {
            grid-template-columns: 1fr;
            gap: .5rem;
            padding: 1rem 1.25rem;
        }
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-grid-row > [data-label] {
            display: flex;
            gap: 1rem;
            align-items: baseline;
            justify-content: space-between;
            white-space: normal;
        }
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-grid-row > [data-label]::before {
            content: attr(data-label);
            flex: 0 0 auto;
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--bs-gray-600, #78829d);
        }
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-cell-scope,
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-cell-keyring,
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-cell-model { text-align: right; overflow: visible; }
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-cell-actions { justify-content: flex-start; padding-top: .25rem; }
    }

    @media (max-width: 767.98px) {
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-preset-grid { grid-template-columns: 1fr; }
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-scope-grid { grid-template-columns: 1fr; }
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-segmented { display: flex; width: 100%; }
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-input { max-width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-switch-track,
        :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-switch-knob { transition: none; }
    }
}

/* ==========================================================================
   R4b — Permissions tab (User Management). Chrome only: cards, nav, buttons,
   tables, selects, alerts. The matrix cell state (granted/forbidden/dot) and
   the savebar container are styled in assets/css/permissions-matrix.css and
   are intentionally NOT overridden here. Site tokens only (--color-primary
   #7239ea, --cc-border-color #e4e6ef) — intake-manager parity with the Agents
   tab. Scoped to #cove_perm_tab; @layer components so it can out-specify
   Tailwind utilities per the CSS-override gotcha. */
@layer components {

    #cove_perm_tab { color: var(--bs-gray-900, #181c32); }

    /* Layout ------------------------------------------------------------- */
    #cove_perm_tab .cove-perm-main { flex: 1 1 auto; min-width: 0; }
    #cove_perm_tab .cove-perm-aside { width: 100%; }
    @media (min-width: 1024px) {
        #cove_perm_tab .cove-perm-aside { flex: 0 0 190px; width: 190px; }
    }

    /* Sidebar nav -------------------------------------------------------- */
    #cove_perm_tab .cove-perm-nav {
        display: flex; flex-direction: column;
        background: #fff;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: .75rem;
        overflow: hidden;
    }
    #cove_perm_tab .cove-perm-nav-btn {
        display: block; width: 100%; text-align: left;
        min-height: 44px; padding: .625rem 1rem;
        font-size: .875rem; font-weight: 600;
        color: var(--bs-gray-700, #5e6278);
        background: transparent; border: 0;
        border-left: 3px solid transparent;
        cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    }
    #cove_perm_tab .cove-perm-nav-btn + .cove-perm-nav-btn {
        border-top: 1px solid var(--cc-border-color, #e4e6ef);
    }
    #cove_perm_tab .cove-perm-nav-btn:hover { background: var(--bs-gray-100, #f9f9f9); color: var(--bs-gray-900, #181c32); }
    #cove_perm_tab .cove-perm-nav-btn.active {
        color: var(--color-primary, #7239ea);
        border-left-color: var(--color-primary, #7239ea);
        background: rgba(114, 57, 234, .06);
    }
    #cove_perm_tab .cove-perm-nav-btn:focus-visible {
        outline: 2px solid var(--color-primary, #7239ea); outline-offset: -2px;
    }

    /* Cards -------------------------------------------------------------- */
    #cove_perm_tab .cove-perm-card {
        background: #fff;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: .75rem;
        box-shadow: 0 1px 2px rgba(24, 28, 50, .04);
        overflow: hidden;
    }
    #cove_perm_tab .cove-perm-card-mb { margin-bottom: 1rem; }
    #cove_perm_tab .cove-perm-card-head {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--cc-border-color, #e4e6ef);
    }
    #cove_perm_tab .cove-perm-card-head-row {
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: .75rem;
    }
    #cove_perm_tab .cove-perm-card-title {
        margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3;
        color: var(--bs-gray-900, #181c32);
    }
    #cove_perm_tab .cove-perm-card-sub {
        margin: .25rem 0 0; font-size: .8125rem; line-height: 1.45;
        color: var(--bs-gray-600, #78829d);
    }
    #cove_perm_tab .cove-perm-card-body { padding: 1.25rem; }
    #cove_perm_tab .cove-perm-card-body-flush { padding: 0; }
    #cove_perm_tab .cove-perm-card-foot {
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: .75rem;
        padding: .75rem 1.25rem;
        border-top: 1px solid var(--cc-border-color, #e4e6ef);
    }
    #cove_perm_tab .cove-perm-empty {
        padding: 2rem 1rem; text-align: center;
        font-size: .875rem; color: var(--bs-gray-600, #78829d);
    }
    #cove_perm_tab .cove-perm-body-note { margin: 0 0 .875rem; }

    /* Filters / selects -------------------------------------------------- */
    #cove_perm_tab .cove-perm-filters {
        display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
        margin-left: auto;
    }
    #cove_perm_tab .cove-perm-select {
        appearance: none;
        padding: .5rem 2rem .5rem .75rem;
        font-size: .875rem; line-height: 1.4;
        color: var(--bs-gray-900, #181c32);
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2378829d'%3E%3Cpath d='M4.5 6l3.5 3.5L11.5 6z'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right .5rem center; background-size: 14px;
        border: 1px solid var(--cc-border-color, #e4e6ef);
        border-radius: .5rem; cursor: pointer;
    }
    #cove_perm_tab .cove-perm-select-sm { padding-top: .375rem; padding-bottom: .375rem; font-size: .8125rem; }
    #cove_perm_tab .cove-perm-select:focus-visible {
        outline: none; border-color: var(--color-primary, #7239ea);
        box-shadow: 0 0 0 3px rgba(114, 57, 234, .18);
    }

    /* File input --------------------------------------------------------- */
    #cove_perm_tab .cove-perm-field-label {
        display: block; margin-bottom: .375rem;
        font-size: .8125rem; font-weight: 600; color: var(--bs-gray-700, #5e6278);
    }
    #cove_perm_tab .cove-perm-file {
        display: block; width: 100%; max-width: 28rem;
        font-size: .875rem; color: var(--bs-gray-800, #3f4254);
        padding: .375rem; margin-bottom: 1rem;
        border: 1px solid var(--cc-border-color, #e4e6ef); border-radius: .5rem;
        background: #fff;
    }
    #cove_perm_tab .cove-perm-file::file-selector-button {
        margin-right: .75rem; padding: .4rem .75rem;
        font-size: .8125rem; font-weight: 600;
        color: var(--bs-gray-800, #3f4254);
        background: var(--bs-gray-100, #f9f9f9);
        border: 1px solid var(--cc-border-color, #e4e6ef); border-radius: .375rem;
        cursor: pointer;
    }
    #cove_perm_tab .cove-perm-file:focus-visible {
        outline: none; border-color: var(--color-primary, #7239ea);
        box-shadow: 0 0 0 3px rgba(114, 57, 234, .18);
    }

    /* Tables (audit + resets) ------------------------------------------- */
    #cove_perm_tab .cove-perm-table-wrap { overflow-x: auto; }
    #cove_perm_tab .cove-perm-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
    #cove_perm_tab .cove-perm-table thead th {
        text-align: left; padding: .625rem 1rem; white-space: nowrap;
        font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
        color: var(--bs-gray-600, #78829d);
        background: var(--bs-gray-100, #f9f9f9);
        border-bottom: 1px solid var(--cc-border-color, #e4e6ef);
    }
    #cove_perm_tab .cove-perm-table tbody td {
        padding: .625rem 1rem; vertical-align: middle;
        color: var(--bs-gray-800, #3f4254);
        border-bottom: 1px solid var(--cc-border-color, #e4e6ef);
    }
    #cove_perm_tab .cove-perm-table tbody tr:last-child td { border-bottom: 0; }
    #cove_perm_tab .cove-perm-table tbody tr:hover td { background: var(--bs-gray-100, #f9f9f9); }
    #cove_perm_tab .cove-perm-td-end { text-align: right; white-space: nowrap; }
    #cove_perm_tab .cove-perm-table-empty {
        text-align: center; padding: 1.25rem 1rem !important;
        color: var(--bs-gray-600, #78829d);
    }
    #cove_perm_tab .cove-perm-override-count { margin-right: .625rem; }

    /* Buttons ------------------------------------------------------------ */
    #cove_perm_tab .cove-perm-btn {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 40px; padding: .5rem 1rem; gap: .375rem;
        font-size: .875rem; font-weight: 600; line-height: 1.2;
        border-radius: .5rem; border: 1px solid transparent;
        cursor: pointer; text-decoration: none;
        transition: background .15s, color .15s, border-color .15s, opacity .15s;
    }
    #cove_perm_tab .cove-perm-btn-sm { min-height: 34px; padding: .375rem .75rem; font-size: .8125rem; }
    #cove_perm_tab .cove-perm-btn:disabled,
    #cove_perm_tab .cove-perm-btn[disabled] { opacity: .5; cursor: not-allowed; }
    #cove_perm_tab .cove-perm-btn:focus-visible {
        outline: 2px solid var(--color-primary, #7239ea); outline-offset: 2px;
    }
    #cove_perm_tab .cove-perm-btn-primary { background: var(--color-primary, #7239ea); color: #fff; }
    #cove_perm_tab .cove-perm-btn-primary:hover:not(:disabled) { background: #5e1fd6; }
    #cove_perm_tab .cove-perm-btn-light {
        background: #fff; color: var(--bs-gray-800, #3f4254);
        border-color: var(--cc-border-color, #e4e6ef);
    }
    #cove_perm_tab .cove-perm-btn-light:hover:not(:disabled) { background: var(--bs-gray-100, #f9f9f9); }
    #cove_perm_tab .cove-perm-btn-danger { background: #fff; color: #f8285a; border-color: #fbd9e2; }
    #cove_perm_tab .cove-perm-btn-danger:hover:not(:disabled) { background: #fff5f8; }
    #cove_perm_tab .cove-perm-btn-row,
    #cove_perm_tab .cove-perm-foot-actions,
    #cove_perm_tab .cove-perm-savebar-actions { display: flex; align-items: center; gap: .5rem; }
    #cove_perm_tab .cove-perm-savebar-actions { margin-left: auto; }
    #cove_perm_tab .cove-perm-savebar-count { font-size: .875rem; font-weight: 600; color: var(--bs-gray-800, #3f4254); }

    /* Import preview + alerts ------------------------------------------- */
    #cove_perm_tab .cove-perm-subhead {
        margin: 0 0 .625rem; font-size: .875rem; font-weight: 700;
        color: var(--bs-gray-900, #181c32);
    }
    #cove_perm_tab .cove-perm-diff-list {
        margin: 0 0 1rem; padding-left: 1.1rem; font-size: .8125rem;
        color: var(--bs-gray-800, #3f4254);
    }
    #cove_perm_tab .cove-perm-diff-list li { margin-bottom: .2rem; }
    #cove_perm_tab .cove-perm-code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: .8125rem; color: var(--bs-gray-600, #78829d);
        background: var(--bs-gray-100, #f9f9f9);
        padding: .05rem .35rem; border-radius: .3rem;
    }
    #cove_perm_tab .cove-perm-alert-danger {
        margin-top: 1rem; padding: .875rem 1rem;
        font-size: .8125rem; color: #a4123f;
        background: #fff5f8; border: 1px solid #fbd9e2; border-radius: .5rem;
    }
    #cove_perm_tab .cove-perm-alert-list { margin: .375rem 0 0; padding-left: 1.1rem; }

    #cove_perm_tab .cove-perm-muted { font-size: .8125rem; color: var(--bs-gray-600, #78829d); }
}


/* ── User Management DataTables grids (R4b T6) ──────────────────────────────
   THEME ONLY for the three DataTables-backed tabs (Client Users / Contractors
   / Techs), rendered by includes/parts/user/table-*.php and initialised in
   assets/js/user-management.js. Restyles the Metronic table chrome — header
   row, dashed row separators, cell rhythm, hover, client chip, name/email
   type — to intake-manager parity using site tokens (--color-primary #7239ea,
   --cc-border-color #e4e6ef). NOTHING structural is touched: the table ids,
   column order/count, data-* attributes and every JS hook are preserved; this
   is CSS only. Scoped to the three ids so other site DataTables (orders,
   project-templates, dashboards) are unaffected. In the `components` layer so
   it beats Metronic's unlayered class rules (per the CSS-override gotcha). */
@layer components {
    /* Header row: quiet uppercase labels on a single hairline rule. */
    #cove_datatable_client_users > thead > tr > th,
    #cove_datatable_contractors > thead > tr > th,
    #cove_datatable_techs > thead > tr > th {
        padding: .35rem .75rem .8rem;
        font-size: .7rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--bs-gray-600, #78829d);
        background: transparent;
        border-bottom: 1px solid var(--cc-border-color, #e4e6ef);
        vertical-align: middle;
    }

    /* DataTables active-sort column tints to primary. */
    #cove_datatable_client_users > thead > tr > th.sorting_asc,
    #cove_datatable_client_users > thead > tr > th.sorting_desc,
    #cove_datatable_contractors > thead > tr > th.sorting_asc,
    #cove_datatable_contractors > thead > tr > th.sorting_desc,
    #cove_datatable_techs > thead > tr > th.sorting_asc,
    #cove_datatable_techs > thead > tr > th.sorting_desc {
        color: var(--color-primary, #7239ea);
    }

    /* Body cells: comfortable rhythm, dashed separators from tokens. */
    #cove_datatable_client_users > tbody > tr > td,
    #cove_datatable_contractors > tbody > tr > td,
    #cove_datatable_techs > tbody > tr > td {
        padding: .8rem .75rem;
        border-top: 1px dashed var(--cc-border-color, #e4e6ef);
        border-bottom: 0;
        vertical-align: middle;
        font-size: .875rem;
    }
    /* No double rule between the header underline and the first row. */
    #cove_datatable_client_users > tbody > tr:first-child > td,
    #cove_datatable_contractors > tbody > tr:first-child > td,
    #cove_datatable_techs > tbody > tr:first-child > td {
        border-top: 0;
    }

    /* Row hover: faint primary wash (matches intake-manager rows). */
    #cove_datatable_client_users > tbody > tr:hover > td,
    #cove_datatable_contractors > tbody > tr:hover > td,
    #cove_datatable_techs > tbody > tr:hover > td {
        background: rgba(114, 57, 234, .035);
    }

    /* Name = strong ink, email = muted — echoes the shell type scale. */
    #cove_datatable_client_users .text-hover-primary,
    #cove_datatable_contractors .text-hover-primary,
    #cove_datatable_techs .text-hover-primary {
        font-weight: 600;
        color: var(--bs-gray-900, #181c32);
    }
    #cove_datatable_client_users .text-hover-primary:hover,
    #cove_datatable_contractors .text-hover-primary:hover,
    #cove_datatable_techs .text-hover-primary:hover {
        color: var(--color-primary, #7239ea);
    }
    #cove_datatable_client_users .d-flex.flex-column > span:last-child,
    #cove_datatable_client_users .d-flex.justify-content-start.flex-column > span:last-child,
    #cove_datatable_contractors .d-flex.flex-column > span:last-child,
    #cove_datatable_techs .d-flex.flex-column > span:last-child {
        font-size: .8125rem;
        color: var(--bs-gray-600, #78829d);
    }

    /* Client chip: token-styled soft pill instead of the flat Metronic badge. */
    #cove_datatable_client_users .badge.badge-light,
    #cove_datatable_contractors .badge.badge-light,
    #cove_datatable_techs .badge.badge-light {
        display: inline-block;
        padding: .3rem .6rem;
        font-size: .78rem;
        font-weight: 600;
        color: var(--bs-gray-700, #5e6278);
        background: var(--bs-gray-100, #f4f4f6);
        border-radius: .5rem;
    }

    /* Actions trigger: align the light button's hover accent to primary. */
    #cove_datatable_client_users .cove-action-dropdown .btn-light:hover,
    #cove_datatable_contractors .cove-action-dropdown .btn-light:hover,
    #cove_datatable_techs .cove-action-dropdown .btn-light:hover {
        color: var(--color-primary, #7239ea);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   R4c — Agent draft-reply approval card (staff-only, above the ticket composer)

   Rendered by assets/js/vue/components/AgentDraftCard.js. Visually distinct
   from a posted reply (it is a PROPOSAL, not yet in the thread) but consistent
   with the thread's density. @layer components so it can out-specify Tailwind
   utilities without unlayered !important (see the css-override-layer gotcha).
   ────────────────────────────────────────────────────────────────────────── */
@layer components {
    .agent-draft-card {
        border: 1px dashed var(--bs-primary, #009ef7);
        border-radius: 0.625rem;
        background: var(--bs-primary-light, #f1faff);
    }

    .agent-draft-card .card-body {
        padding: 0.85rem 1rem;
    }

    .agent-draft-card__head {
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
        margin-bottom: 0.5rem;
    }

    .agent-draft-card__avatar .symbol-label {
        background: var(--bs-primary, #009ef7);
        color: #fff;
    }

    .agent-draft-card__meta {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
    }

    .agent-draft-card__badge {
        align-self: flex-start;
    }

    .agent-draft-card__byline {
        line-height: 1.2;
    }

    .agent-draft-card__note {
        margin: 0 0 0.5rem 0;
        font-style: italic;
    }

    /* Proposed reply body — plain, pre-wrapped, text only (never rich HTML). */
    .agent-draft-card__body {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
        background: var(--bs-body-bg, #fff);
        border: 1px solid var(--bs-border-color, #e4e6ef);
        border-radius: 0.475rem;
        padding: 0.625rem 0.75rem;
        color: var(--bs-gray-800, #3f4254);
        font-size: 0.925rem;
        line-height: 1.5;
        max-height: 22rem;
        overflow-y: auto;
    }

    /* Proposed ticket_update field changes — same boxed treatment as the reply
       body, rendered as a plain list of escaped, text-interpolated strings. */
    .agent-draft-card__changes {
        margin: 0;
        padding: 0.625rem 0.75rem 0.625rem 1.6rem;
        background: var(--bs-body-bg, #fff);
        border: 1px solid var(--bs-border-color, #e4e6ef);
        border-radius: 0.475rem;
        color: var(--bs-gray-800, #3f4254);
        font-size: 0.925rem;
        line-height: 1.5;
        list-style: disc;
    }

    .agent-draft-card__changes li {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .agent-draft-card__changes li + li {
        margin-top: 0.2rem;
    }

    .agent-draft-card__error {
        margin-top: 0.5rem;
    }

    .agent-draft-card__actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .agent-draft-card__actions .btn {
        flex: 0 0 auto;
    }

    /* Estimate draft: server-priced line table + per-line provenance (D2).
       Tuned to read cleanly at the ~350px pinned split-panel width. */
    .agent-draft-card__estimate {
        background: var(--bs-body-bg, #fff);
        border: 1px solid var(--bs-border-color, #e4e6ef);
        border-radius: 0.475rem;
        padding: 0.5rem 0.625rem;
        color: var(--bs-gray-800, #3f4254);
        font-size: 0.8rem;
        line-height: 1.35;
    }

    .agent-draft-card__lines {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    .agent-draft-card__lines th,
    .agent-draft-card__lines td {
        padding: 0.3rem 0.25rem;
        vertical-align: top;
        text-align: left;
        border-bottom: 1px solid var(--bs-border-color, #e4e6ef);
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .agent-draft-card__lines th {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--bs-gray-600, #7e8299);
        font-weight: 600;
    }

    .agent-draft-card__lines .agent-draft-card__num {
        text-align: right;
        white-space: nowrap;
        width: 3.4rem;
    }

    .agent-draft-card__desc {
        display: block;
        color: var(--bs-gray-700, #5e6278);
    }

    .agent-draft-card__source {
        display: block;
        font-size: 0.72rem;
        margin-top: 0.15rem;
    }

    .agent-draft-card__needs-badge {
        margin-left: 0.25rem;
    }

    /* Needs-pricing line: subtle warning tint across the whole row. */
    .agent-draft-card__line--needs td {
        background: var(--bs-danger-light, #fff5f8);
    }

    .agent-draft-card__totals {
        margin-top: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .agent-draft-card__totals-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
    }

    .agent-draft-card__totals-row--total {
        font-weight: 700;
        color: var(--bs-gray-900, #181c32);
        border-top: 1px solid var(--bs-border-color, #e4e6ef);
        padding-top: 0.25rem;
    }

    .agent-draft-card__needs-note {
        font-size: 0.75rem;
        font-weight: 600;
    }

    /* T5 (P1-A): SERVER-computed billing headline above the estimate lines.
       This is the authority (not the agent). Wraps cleanly at the 350px panel
       width — the pill drops under the plan line. */
    .agent-draft-card__billing {
        margin-bottom: 0.5rem;
        padding: 0.4rem 0.55rem;
        border: 1px solid var(--bs-border-color, #e4e6ef);
        border-left-width: 3px;
        border-radius: 0.475rem;
        font-size: 0.78rem;
        line-height: 1.35;
    }
    .agent-draft-card__billing--over {
        border-left-color: var(--bs-danger, #f1416c);
        background: var(--bs-danger-light, #fff5f8);
    }
    .agent-draft-card__billing--within {
        border-left-color: var(--bs-warning, #ffc700);
        background: var(--bs-warning-light, #fff8dd);
    }
    .agent-draft-card__billing-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.5rem;
    }
    .agent-draft-card__billing-plan {
        font-weight: 600;
        color: var(--bs-gray-900, #181c32);
    }
    .agent-draft-card__billing-pill {
        display: inline-block;
        padding: 0.1rem 0.4rem;
        border-radius: 0.35rem;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
    .agent-draft-card__billing-pill--over {
        color: #fff;
        background: var(--bs-danger, #f1416c);
    }
    .agent-draft-card__billing-pill--within {
        color: var(--bs-warning-inverse, #7e6a00);
        background: var(--bs-warning, #ffc700);
    }
        .agent-draft-card__billing--feature {
        background: var(--bs-gray-100, #f5f6f8);
        border-left: 3px solid var(--bs-gray-400, #b5b5c3);
    }
.agent-draft-card__billing-pill--unverified {
        color: var(--bs-gray-700, #4b5675);
        background: var(--bs-gray-200, #e9ecef);
    }
    .agent-draft-card__billing-caveat {
        margin-top: 0.2rem;
        font-size: 0.72rem;
    }
    .agent-draft-card__billing-mismatch {
        margin-top: 0.25rem;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--bs-danger, #f1416c);
    }

    /* Slice 1b-covered: the within-allowance (COVERED) reply banner. Unlike the
       estimate card (where within-allowance is a MISMATCH → yellow), a covered
       reply within allowance is the GOOD state → green. The over-allowance
       reply mismatch reuses --over (red) above. */
    .agent-draft-card__billing--covered {
        border-left-color: var(--bs-success, #50cd89);
        background: var(--bs-success-light, #e8fff3);
    }
    .agent-draft-card__billing-pill--covered {
        color: #fff;
        background: var(--bs-success, #50cd89);
    }
    .agent-draft-card__billing-covered-copy {
        margin-top: 0.2rem;
        font-size: 0.72rem;
        color: var(--bs-gray-700, #5e6278);
    }
}

/* In a narrow pinned split panel (view.php coverecord container), stack the
   Publish/Discard buttons full-width so they don't wrap awkwardly. */
@container coverecord (max-width: 480px) {
    #ticket-app .agent-draft-card__actions {
        flex-direction: column;
        align-items: stretch;
    }
    #ticket-app .agent-draft-card__actions .btn {
        width: 100%;
    }
}

/* Slice 2b-B: pending agent estimate drafts review queue on /estimates/ */
@layer components {
    .cove-estimate-drafts__item { margin-bottom: 1rem; }
    .cove-estimate-drafts__ctx { display: flex; align-items: center; gap: 0.25rem; }
    .cove-estimate-drafts__ctx a { text-decoration: none; }
}

/* ── Workstream C1: Agents tab — inbox, toolbar, live pills, tab badge ── */
@layer components {
    .cove-um-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; margin-left: .4rem; border-radius: 999px; background: var(--color-primary, #7239ea); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; vertical-align: middle; }
    .cove-um-tab-badge[hidden] { display: none; }

    .cove-inbox { border: 1px solid var(--cc-border-color, #e4e6ef); border-radius: .75rem; background: #fff; margin-bottom: 1.25rem; overflow: hidden; }
    .cove-inbox.is-pending { border-color: color-mix(in srgb, var(--color-primary, #7239ea) 35%, var(--cc-border-color, #e4e6ef)); }
    .cove-inbox-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; background: var(--bs-gray-100, #f9f9f9); border-bottom: 1px solid var(--cc-border-color, #e4e6ef); }
    .cove-inbox-title { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--bs-gray-900, #181c32); }
    .cove-inbox-title .bi { color: var(--color-primary, #7239ea); }
    .cove-inbox-total { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--color-primary, #7239ea); color: #fff; font-size: .75rem; font-weight: 700; }
    .cove-inbox:not(.is-pending) .cove-inbox-total { background: var(--bs-gray-300, #dbdfe9); color: var(--bs-gray-700, #5e6278); }
    .cove-inbox-filters { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
    .cove-inbox-pill, .cove-agent-seg-btn { min-height: 44px; padding: 0 .85rem; border: 1px solid var(--cc-border-color, #e4e6ef); border-radius: 999px; background: #fff; color: var(--bs-gray-700, #5e6278); font-size: .8rem; font-weight: 600; cursor: pointer; }
    .cove-inbox-pill span { margin-left: .25rem; color: var(--bs-gray-600, #78829d); font-weight: 700; }
    .cove-inbox-pill.is-active, .cove-agent-seg-btn.is-active { background: var(--bs-gray-900, #181c32); border-color: var(--bs-gray-900, #181c32); color: #fff; }
    .cove-inbox-pill.is-active span { color: rgba(255,255,255,.75); }
    .cove-inbox-empty { padding: 1rem; color: var(--bs-gray-700, #5e6278); font-size: .875rem; }
    .cove-inbox-empty p { margin: 0; display: flex; gap: .5rem; align-items: flex-start; }
    .cove-inbox-empty p + p { margin-top: .5rem; }
    .cove-inbox-list { display: flex; flex-direction: column; }
    .cove-inbox-row { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem 1rem; align-items: start; padding: .85rem 1rem; border-bottom: 1px solid var(--cc-border-color, #e4e6ef); }
    .cove-inbox-row:last-child { border-bottom: 0; }
    .cove-inbox-row.is-expired, .cove-inbox-row.is-inactive { opacity: .6; }
    .cove-inbox-tag { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .55rem; border-radius: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; margin-top: .1rem; }
    .cove-inbox-tag.is-request { background: #fff4de; color: #b96b00; }
    .cove-inbox-tag.is-draft { background: #e8f1ff; color: #1b59c6; }
    .cove-inbox-main { min-width: 0; }
    .cove-inbox-line { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; color: var(--bs-gray-900, #181c32); font-size: .875rem; }
    .cove-inbox-tool { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; color: var(--bs-gray-700, #5e6278); }
    .cove-inbox-client { color: var(--bs-gray-600, #78829d); font-size: .8rem; }
    .cove-inbox-summary { margin-top: .2rem; color: var(--bs-gray-800, #3f4254); font-size: .875rem; overflow-wrap: anywhere; }
    .cove-inbox-meta { margin-top: .2rem; color: var(--bs-gray-600, #78829d); font-size: .75rem; }
    .cove-inbox-actions { display: flex; align-items: center; }
    .cove-inbox-btns { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
    .cove-inbox-btns .cove-agent-act-btn { min-height: 44px; }
    .cove-inbox-truncated { padding: .6rem 1rem; font-size: .78rem; color: var(--bs-gray-600, #78829d); background: var(--bs-gray-100, #f9f9f9); }

    .cove-agent-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0 .75rem; }
    .cove-agent-seg { display: inline-flex; gap: .3rem; }
    .cove-agent-owner-select { min-height: 44px; }
    .cove-agent-toolbar-count { margin-left: auto; font-size: .8rem; color: var(--bs-gray-600, #78829d); }
    .cove-agent-zero { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px dashed var(--cc-border-color, #e4e6ef); border-radius: .75rem; color: var(--bs-gray-700, #5e6278); font-size: .875rem; margin-bottom: 1rem; }
    .cove-agent-live { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
    .cove-agent-live-pill { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .45rem; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap; }
    .cove-agent-live-pill.is-request { background: #fff4de; color: #b96b00; }
    .cove-agent-live-pill.is-draft { background: #e8f1ff; color: #1b59c6; }
    .cove-agent-live-pill.is-conn { background: #e6f7ee; color: #1b7a3d; }
    .cove-agent-live-last { font-size: .68rem; color: var(--bs-gray-600, #78829d); white-space: nowrap; }
    .cove-agent-row-wrap[hidden], .cove-agent-list-card[hidden] { display: none; }

    @media (max-width: 767px) {
        .cove-inbox-row { grid-template-columns: auto 1fr; }
        .cove-inbox-actions { grid-column: 1 / -1; }
        .cove-agent-toolbar .cove-agent-owner-select { width: 100%; }
        .cove-agent-toolbar-count { margin-left: 0; width: 100%; }
    }
}

/* ── Workstream C2: Agents tab — per-agent drawer, JSON list bits ── */
@layer components {
    /* Width via the id selector so it beats .offcanvas-end in the same layer. */
    #cove_agent_drawer { width: 560px; max-width: 100vw; }
    #cove_agent_drawer .cove-agent-drawer-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
    #cove_agent_drawer .cove-agent-drawer-head { align-items: flex-start; gap: .75rem; border-bottom: 1px solid var(--cc-border-color, #e4e6ef); }
    #cove_agent_drawer .cove-agent-drawer-ident { display: flex; gap: .75rem; align-items: center; min-width: 0; }
    #cove_agent_drawer .cove-agent-avatar { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-primary, #7239ea) 12%, #fff); color: var(--color-primary, #7239ea); font-weight: 700; }
    #cove_agent_drawer .cove-agent-drawer-ident-text { min-width: 0; }
    #cove_agent_drawer .cove-agent-drawer-title { font-size: 1.05rem; font-weight: 700; color: var(--bs-gray-900, #181c32); margin: 0; overflow-wrap: anywhere; }
    #cove_agent_drawer .cove-agent-drawer-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .2rem; font-size: .78rem; color: var(--bs-gray-600, #78829d); }
    #cove_agent_drawer .cove-agent-drawer-sub .cove-agent-live { margin-top: 0; }
    #cove_agent_drawer .cove-agent-drawer-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .5rem 1rem 0; border-bottom: 1px solid var(--cc-border-color, #e4e6ef); }
    #cove_agent_drawer .cove-agent-drawer-tab { min-height: 44px; padding: 0 .85rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--bs-gray-700, #5e6278); font-size: .85rem; font-weight: 600; cursor: pointer; }
    #cove_agent_drawer .cove-agent-drawer-tab.is-active { color: var(--color-primary, #7239ea); border-bottom-color: var(--color-primary, #7239ea); }
    #cove_agent_drawer .cove-agent-drawer-tab:focus-visible { outline: 2px solid var(--color-primary, #7239ea); outline-offset: -2px; border-radius: .35rem; }
    #cove_agent_drawer .cove-agent-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem 1.5rem; }
    #cove_agent_drawer .cove-agent-drawer-skeleton { display: grid; gap: .6rem; }
    #cove_agent_drawer .cove-agent-drawer-skeleton span { display: block; height: 1rem; border-radius: .35rem; background: linear-gradient(90deg, #f1f1f4 25%, #e9e9ee 50%, #f1f1f4 75%); background-size: 200% 100%; animation: cove-agent-shimmer 1.2s infinite; }
    #cove_agent_drawer .cove-agent-drawer-skeleton span:nth-child(2) { width: 70%; } #cove_agent_drawer .cove-agent-drawer-skeleton span:nth-child(3) { width: 45%; }
    @keyframes cove-agent-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
    @media (prefers-reduced-motion: reduce) { #cove_agent_drawer .cove-agent-drawer-skeleton span { animation: none; } }
    #cove_agent_drawer .cove-agent-drawer-error { padding: 1rem; border: 1px dashed var(--cc-border-color, #e4e6ef); border-radius: .75rem; color: var(--bs-gray-700, #5e6278); font-size: .9rem; display: grid; gap: .75rem; justify-items: start; }
    #cove_agent_drawer .cove-agent-kv { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1rem; margin: 0 0 1rem; font-size: .875rem; }
    #cove_agent_drawer .cove-agent-kv dt { color: var(--bs-gray-600, #78829d); font-weight: 600; }
    #cove_agent_drawer .cove-agent-kv dd { margin: 0; color: var(--bs-gray-900, #181c32); overflow-wrap: anywhere; }
    #cove_agent_drawer .cove-agent-kv-hint { color: var(--bs-gray-600, #78829d); font-size: .8rem; }
    #cove_agent_drawer .cove-agent-link { border: 0; background: none; padding: 0; margin-left: .35rem; color: var(--color-primary, #7239ea); font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: underline; }
    #cove_agent_drawer .cove-agent-drawer-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
    #cove_agent_drawer .cove-agent-danger { margin-top: 1.5rem; padding: 1rem; border: 1px solid color-mix(in srgb, #ef4444 40%, var(--cc-border-color, #e4e6ef)); border-radius: .75rem; background: #fff7f7; }
    #cove_agent_drawer .cove-agent-danger-title { font-weight: 700; color: #b42318; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .5rem; }
    #cove_agent_drawer .cove-agent-danger-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
    #cove_agent_drawer .cove-agent-danger-row p { margin: 0; font-size: .85rem; color: var(--bs-gray-700, #5e6278); max-width: 34ch; }
    #cove_agent_drawer .cove-agent-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
    #cove_agent_drawer .cove-agent-edit-full { grid-column: 1 / -1; }
    #cove_agent_drawer .cove-agent-edit-actions { display: flex; gap: .5rem; margin-top: .75rem; }
    #cove_agent_drawer .cove-agent-presets-apply { margin-bottom: 1rem; }
    #cove_agent_drawer .cove-agent-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
    #cove_agent_drawer .cove-agent-activity-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
    #cove_agent_drawer .cove-agent-activity-filters .cove-agent-select { min-height: 44px; flex: 1 1 10rem; }
    #cove_agent_drawer .cove-agent-notice { font-size: .78rem; }
    #cove_agent_drawer .cove-agent-activity-list { display: flex; flex-direction: column; border: 1px solid var(--cc-border-color, #e4e6ef); border-radius: .75rem; overflow: hidden; }
    #cove_agent_drawer .cove-agent-activity-list:empty { display: none; }
    #cove_agent_drawer .cove-agent-activity-row { display: grid; grid-template-columns: auto 1fr; gap: .5rem .75rem; padding: .65rem .85rem; border-bottom: 1px solid var(--cc-border-color, #e4e6ef); }
    #cove_agent_drawer .cove-agent-activity-row:last-child { border-bottom: 0; }
    #cove_agent_drawer .cove-agent-act-status.is-success { background: #e6f7ee; color: #1b7a3d; }
    #cove_agent_drawer .cove-agent-act-status.is-error { background: #fdecec; color: #b42318; }
    #cove_agent_drawer .cove-agent-act-status.is-denied { background: #fdecec; color: #b42318; }
    #cove_agent_drawer .cove-agent-act-status.is-requested { background: #fff4de; color: #b96b00; }
    #cove_agent_drawer .cove-agent-endpoint, #cove_agent_drawer .cove-agent-tokens, #cove_agent_drawer .cove-agent-connections { margin-bottom: 1.25rem; }
    #cove_agent_drawer .cove-agent-copyrow { display: flex; gap: .5rem; align-items: center; }
    #cove_agent_drawer .cove-agent-copyrow .cove-agent-input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
    #cove_agent_drawer .cove-agent-token-card { margin-top: .75rem; padding: 1rem; border: 1px solid color-mix(in srgb, #f59e0b 50%, var(--cc-border-color, #e4e6ef)); border-radius: .75rem; background: #fffaf0; display: grid; gap: .5rem; }
    #cove_agent_drawer .cove-agent-token-warn { margin: 0 0 .25rem; font-size: .85rem; color: #92400e; font-weight: 600; }
    #cove_agent_drawer .cove-agent-connection-list { margin: 0 0 .75rem; padding-left: 1.1rem; font-size: .875rem; color: var(--bs-gray-900, #181c32); }
    #cove_agent_drawer code { font-size: .78rem; overflow-wrap: anywhere; }
    #cove_agent_drawer .cove-agent-act-btn, #cove_agent_drawer .btn { min-height: 44px; }

    /* List: the name is now a button that opens the drawer. */
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-ident-name.cove-agent-open { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-weight: 600; color: var(--bs-gray-900, #181c32); cursor: pointer; }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-ident-name.cove-agent-open:hover, :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-ident-name.cove-agent-open:focus-visible { color: var(--color-primary, #7239ea); text-decoration: underline; outline: none; }

    @media (max-width: 767px) {
        #cove_agent_drawer { width: 100%; }
        #cove_agent_drawer .cove-agent-kv { grid-template-columns: 1fr; gap: .15rem .5rem; }
        #cove_agent_drawer .cove-agent-kv dt { margin-top: .5rem; }
        #cove_agent_drawer .cove-agent-edit-grid { grid-template-columns: 1fr; }
        #cove_agent_drawer .cove-agent-copyrow { flex-wrap: wrap; }
    }
}

/* ── Workstream C3: standing instructions, guided connect ── */
@layer components {
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-textarea { width: 100%; min-height: 7rem; resize: vertical; line-height: 1.45; font-family: inherit; }
    #cove_agent_drawer .cove-agent-instructions { margin: .25rem 0 1rem; }
    #cove_agent_drawer .cove-agent-instructions-text { margin: 0 0 .35rem; padding: .75rem .85rem; max-height: 14rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .875rem; color: var(--bs-gray-900, #181c32); background: var(--bs-gray-100, #f9f9f9); border: 1px solid var(--cc-border-color, #e4e6ef); border-radius: .75rem; }
    #cove_agent_drawer .cove-agent-connect-lede { margin-bottom: 1rem; }
    #cove_agent_drawer .cove-agent-guided { margin-bottom: 1.25rem; }
    #cove_agent_drawer .cove-agent-client-picker { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
    #cove_agent_drawer .cove-agent-client-tab { min-height: 44px; }
    #cove_agent_drawer .cove-agent-steps { margin: 0 0 .5rem; padding-left: 1.25rem; list-style: decimal; font-size: .875rem; color: var(--bs-gray-800, #3f4254); display: grid; gap: .25rem; }
    #cove_agent_drawer .cove-agent-steps li { display: list-item; }
    #cove_agent_drawer .cove-agent-client-tab.is-active { background: var(--bs-gray-900, #181c32); border-color: var(--bs-gray-900, #181c32); color: #fff; }
    #cove_agent_drawer .cove-agent-snippet-wrap { display: grid; gap: .5rem; }
    #cove_agent_drawer .cove-agent-snippet { margin: 0; padding: .75rem .85rem; max-width: 100%; overflow-x: auto; white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.5; color: var(--bs-gray-900, #181c32); background: var(--bs-gray-100, #f9f9f9); border: 1px solid var(--cc-border-color, #e4e6ef); border-radius: .75rem; }
    #cove_agent_drawer .cove-agent-snippet-copy { justify-self: start; }
    @media (max-width: 767px) {
        #cove_agent_drawer .cove-agent-client-picker { display: grid; grid-template-columns: 1fr 1fr; }
    }
}

/* ── Workstream B3: lifecycle block, paused tag ── */
@layer components {
    #cove_agent_drawer .cove-agent-lifecycle { border-color: var(--cc-border-color, #e4e6ef); background: var(--bs-gray-100, #f9f9f9); }
    #cove_agent_drawer .cove-agent-lifecycle .cove-agent-danger-title { color: var(--bs-gray-700, #5e6278); }
    #cove_agent_drawer .cove-agent-lifecycle-by { margin: -.25rem 0 .75rem; }
    #cove_agent_drawer .cove-agent-lifecycle-divider { margin: .85rem 0; border: 0; border-top: 1px solid var(--cc-border-color, #e4e6ef); }
    #cove_agent_drawer .cove-agent-lifecycle .cove-agent-danger-row + .cove-agent-danger-row { margin-top: .75rem; }
    #cove_agents_tab .cove-inbox-agent-tag { font-size: .68rem; height: 1.25rem; padding: 0 .45rem; }
    @media (max-width: 767px) {
        #cove_agent_drawer .cove-agent-lifecycle .cove-agent-danger-row { flex-direction: column; align-items: stretch; }
        #cove_agent_drawer .cove-agent-lifecycle .cove-agent-act-btn { width: 100%; min-height: 44px; }
    }
}


/* ── Plans & Rate Cards (System Settings, S1) + client Billing tab (S2a) ──
   Scoped to the panel, its drawer (coveDrawer teleports the drawer to
   <body>, so it needs its own id in the selector) and the client tab.
   Never delete by range: PlansRateCardsSourceTest locks the scoping selector. */
@layer components {
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-lede { margin-bottom: 1.25rem; max-width: 68ch; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .35rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-h4 { font-size: .95rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-muted { color: #6b7280; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-small { font-size: .8125rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-strong { font-weight: 600; color: #111827; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-count { display: inline-block; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: .75rem; text-align: center; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-card { border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem 1.25rem; margin-bottom: 1rem; background: #fff; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem 1.5rem; margin: 0 0 .75rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-facts dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-facts dd { margin: 0; font-size: .875rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-empty { color: #6b7280; font-size: .875rem; margin: 0; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-attention { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: .5rem; padding: .5rem .75rem; font-size: .8125rem; margin: 0 0 .75rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-badge { display: inline-block; margin-left: .5rem; padding: 0 .4rem; border-radius: 999px; background: #f3f4f6; color: #6b7280; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-table-wrap { overflow-x: auto; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; padding: .35rem .5rem; border-bottom: 1px solid #e5e7eb; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-table td { padding: .5rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-table .is-actions { text-align: right; white-space: nowrap; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-preview-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .75rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-preview-pick .form-select { max-width: 24rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-label { display: block; font-size: .75rem; font-weight: 600; color: #374151; margin-bottom: .25rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-chain { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-step { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: .25rem .75rem; padding: .5rem .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: #fafafa; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-step.is-active { border-color: #4f46e5; background: #eef2ff; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-step.is-unset { opacity: .6; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-step-label { font-weight: 600; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-step-state { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #4f46e5; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-step.is-unset .cove-billing-step-state { color: #6b7280; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-field { margin-bottom: 1rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-field.has-error .form-control, :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-field.has-error .form-select { border-color: #dc2626; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; margin: .15rem 0; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-rows { display: grid; gap: .5rem; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-row { display: grid; grid-template-columns: 1fr 7rem 7rem auto; gap: .5rem; align-items: center; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-row.has-error .form-control { border-color: #dc2626; }
    :is(#cove_plans_rate_cards, #cove_billing_scope_drawer, #cove_client_billing, #cove_client_agents) .cove-billing-drawer-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }
    #cove_billing_scope_drawer { width: min(34rem, 100vw); }
    #cove_client_billing .cove-billing-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
    #cove_client_billing .cove-billing-editor { border-top: 1px solid #f3f4f6; padding-top: 1rem; }
    #cove_client_billing .cove-billing-chain .cove-billing-step { grid-template-columns: auto auto 1fr; }
    @media (max-width: 640px) {
        #cove_plans_rate_cards .cove-billing-table--rows thead { display: none; }
        #cove_plans_rate_cards .cove-billing-table--rows tr { display: block; border-bottom: 1px solid #e5e7eb; padding: .5rem 0; }
        #cove_plans_rate_cards .cove-billing-table--rows td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .2rem 0; }
        #cove_plans_rate_cards .cove-billing-table--rows td::before { content: attr(data-label); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
        #cove_plans_rate_cards .cove-billing-table--rows td.is-actions { justify-content: flex-end; }
        #cove_plans_rate_cards .cove-billing-table--rows td.is-actions::before { content: none; }
        #cove_billing_scope_drawer .cove-billing-row, #cove_client_billing .cove-billing-row { grid-template-columns: 1fr 1fr; }
        #cove_client_billing .cove-billing-step { grid-template-columns: 1fr auto; }
    }
}

/* ── Client Agents tab (S2b) — scoped to #cove_client_agents; the lede/card/
   count classes come from the shared selector above. */
@layer components {
    #cove_client_agents .cove-client-agent-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
    #cove_client_agents .cove-client-agent-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .6rem .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: #fafafa; }
    #cove_client_agents .cove-client-agent-item-side { flex-shrink: 0; }
    #cove_client_agents .cove-client-agent-msg { color: #374151; margin-top: .2rem; overflow-wrap: anywhere; }
    #cove_client_agents .cove-client-agent-pill { display: inline-block; padding: 0 .45rem; border-radius: 999px; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; background: #f3f4f6; color: #374151; }
    #cove_client_agents .cove-client-agent-pill.is-ok { background: #ecfdf5; color: #065f46; }
    #cove_client_agents .cove-client-agent-pill.is-denied { background: #fef2f2; color: #991b1b; }
    #cove_client_agents .cove-client-agent-pill.is-requested { background: #fffbeb; color: #92400e; }
    @media (max-width: 640px) {
        #cove_client_agents .cove-client-agent-item { flex-direction: column; }
    }
}