/*
 * 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.) */

/* Page header: inset the title + breadcrumb 1.5rem from the content edge so
   they sit inside the card column (the look My Tasks had). My Tasks renders
   its toolbar inside #cove_app_content_container, whose padding already
   supplies the inset, so it opts out. Desktop only (992px and up, where the
   sidebar is docked) — below that the headers stay flush with the content. */
@media (min-width: 992px) {
    #cove_app_toolbar .page-title {
        padding-left: 1.5rem;
    }
    #cove_app_content_container > #cove_app_toolbar .page-title {
        padding-left: 0;
    }
}

/* Page header on phones: the action buttons ran off the right edge (four
   buttons on /locations is ~650px of row). The row now wraps — the actions
   drop under the title as a block when they don't fit beside it, and wrap
   among themselves if one line isn't enough. Buttons keep their labels on
   one line so "Create Project" doesn't turn into a two-line pill. Covers the
   shared cove_page_toolbar_open() markup and the hand-written single-page
   toolbars (same .app-toolbar > .app-container shape). */
@media (max-width: 767.98px) {
    .app-toolbar > .app-container {
        flex-wrap: wrap;
        row-gap: .75rem;
    }
    .app-toolbar > .app-container > .page-title { min-width: 0; }
    /* Many templates nest their buttons in one more flex group, so wrap that
       level too. */
    .app-toolbar > .app-container > :not(.page-title),
    .app-toolbar > .app-container > :not(.page-title) > :is(.flex, .d-flex) {
        flex-wrap: wrap;
        max-width: 100%;
    }
    .app-toolbar .btn { white-space: nowrap; }
}

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

/* Settings panes: action buttons (Save …, Deactivate License, Test
   Connection …) used the base .btn size, 47px at 16px text, and on phones a
   row of three ran off the right edge. They now use the list-toolbar size
   (38px, 14px — see .cove-list-toolbar) and their rows wrap on phones.
   .btn-sm / .btn-icon buttons are already compact and stay as they are, and
   buttons joined to an input (.input-group) keep matching the input's height.
   Unlayered, so it beats the layered component sizes. */
.cove-settings-panes .btn:not(.btn-sm, .btn-icon, .input-group .btn, .dropdown-menu *, .modal *) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 2.375rem;
    padding: .375rem .875rem;
    font-size: .875rem;
    line-height: 1.25rem;
    white-space: nowrap;
}
.cove-settings-panes .btn:not(.btn-sm, .btn-icon, .input-group .btn, .dropdown-menu *, .modal *) > i { margin-right: 0; }
.cove-settings-panes .btn.d-none:not(.btn-sm, .btn-icon) { display: none; }
/* Phones: button rows wrap; a label too long for the pane wraps inside its
   button instead of running off the edge, and selects stay inside it. */
@media (max-width: 767.98px) {
    .cove-settings-panes :is(.d-flex, .flex):has(> .btn) { flex-wrap: wrap; }
    .cove-settings-panes .btn:not(.input-group .btn) { max-width: 100%; white-space: normal; }
    .cove-settings-panes :is(select, .form-select) { max-width: 100%; }
}

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

    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-actions-link {
        font-size: .8125rem;
        color: var(--bs-gray-600, #78829d);
        margin: -.5rem 0 1.25rem;
    }
    :is(#cove_agents_tab, #cove_agent_drawer) .cove-agent-actions-link a { color: var(--bs-primary, #009ef7); font-weight: 600; }

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

/* ── Category-sidebar list pages (/projects, /clients, /assets, /locations) ──
   Each of these cards is [ category sidebar | search + table ]. The two columns
   were sized by VIEWPORT grid utilities (col-lg-2 / lg:col-span-2), so:
   1. the sidebar shrank below a usable width on smaller screens, and
   2. a pinned split panel (which narrows the CONTAINER, not the viewport)
      squeezed the whole card without ever collapsing the sidebar.
   The card is now a flex row that is also an inline-size container:
   - wide: the sidebar keeps its ~1/6 share but never drops below 190px;
   - narrow (< 989px of container): the sidebar is hidden and the category
     list is rolled up into a <select> inline with the search bar
     (.cove-catlist-select, rendered by the template, hidden when wide).
   The pinned-panel strip that stands in for the sidebar lives in
   split-panel.css (.cove-catlist-strip) since it keys off the panel state.
   Unlayered, so these beat the layered grid / col-* utilities. */
.cove-catlist {
    container-type: inline-size;
    container-name: covecatlist;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
}
.cove-catlist-side {
    flex: 0 0 16.666667%;
    width: auto;
    max-width: 100%;
    min-width: 190px;
}
.cove-catlist-main {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
}
.cove-catlist-select { display: none; }
/* Sidebar footer action ("View Archived" / "Back to …"). */
.cove-catlist-side .btn.w-full { font-size: 14px; }

@container covecatlist (max-width: 988.98px) {
    .cove-catlist-side { display: none; }
    .cove-catlist-select {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }
    .cove-catlist-select .form-select { min-width: 160px; }
}

/* ── List-page toolbars (search + filter + action rows on index pages) ──────
   Every index page drew its search/filter row from the base .form-control /
   .form-select / .btn sizes, which disagree with each other (45px selects at
   17px text next to 53px input-groups and 50px buttons). /clients/dashboards
   is the reference: 38px controls, 14px text. Put .cove-list-toolbar on the
   row (or the form) and every control in it lands on that one size; the
   dropdown menus hanging off those buttons are left alone.

   .cove-list-search marks the search box's own wrapper. Below 1120px it
   leaves the row and takes a full-width line above the other controls, so the
   selects and buttons keep their natural width instead of squeezing it. Works
   for flex rows (order + basis), .row/.col-* rows (width) and grid rows
   (grid-column). Unlayered, so it beats the layered component and
   utility sizes (h-9, py-2, form-control-sm ...) the templates carry. */
.cove-list-toolbar {
    --cove-lt-h: 2.375rem;
}
.cove-list-toolbar :is(.form-control, .form-select, input[type="text"], input[type="search"], input[type="date"], select):not(.dropdown-menu *) {
    height: var(--cove-lt-h);
    min-height: var(--cove-lt-h);
    padding-top: 0;
    padding-bottom: 0;
    font-size: .875rem;
    line-height: 1.25rem;
}
.cove-list-toolbar :is(.form-select, select):not(.dropdown-menu *) {
    padding-left: .75rem;
    padding-right: 2.25rem;
    background-position: right .625rem center;
}
.cove-list-toolbar .input-group-text:not(.dropdown-menu *) {
    height: var(--cove-lt-h);
    padding: 0 .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
}
.cove-list-toolbar .input-group { flex-wrap: nowrap; }
/* Toolbar menus open via the theme's own handler (no Popper placement), so
   they always hang off the toggle's left edge. The last one (Filter) sits at
   the row's right edge — anchor it right so it opens inward, not off-screen. */
.cove-list-toolbar .dropdown-menu-end {
    right: 0;
    left: auto;
}
.cove-list-toolbar .dropdown-menu {
    max-width: calc(100vw - 2rem);
}
/* Columns / Sort by / Filter: on phones the group wraps instead of pushing
   past the card, and the buttons stretch to fill each line — so a wrapped
   Filter spans the row and its right-anchored menu stays on screen. */
@media (max-width: 575.98px) {
    .cove-list-toolbar-menus {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }
    .cove-list-toolbar-menus > .dropdown {
        flex: 1 1 auto;
    }
    .cove-list-toolbar-menus > .dropdown > .btn {
        width: 100%;
        justify-content: center;
    }
}
.cove-list-toolbar .btn:not(.dropdown-menu *) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    height: var(--cove-lt-h);
    padding: 0 .875rem;
    font-size: .875rem;
    line-height: 1.25rem;
    white-space: nowrap;
}
.cove-list-toolbar .btn:not(.dropdown-menu *) > i { margin-right: 0; }
.cove-list-toolbar .btn.btn-icon:not(.dropdown-menu *) {
    width: var(--cove-lt-h);
    padding: 0;
}

/* A select sizes to its longest option, so one long client name used to eat
   the row the search box needed. Flex rows only (grid rows size by column),
   and only once the controls sit side by side. */
@media (min-width: 768px) {
    .cove-list-toolbar.flex :is(.form-select, select):not(.dropdown-menu *) { max-width: 240px; }
}

/* Rows carrying more filters than fit beside a usable search box at any width
   (.cove-list-toolbar-stack) put the search on its own line everywhere. */
.cove-list-toolbar-stack .cove-list-search {
    order: -1;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 1119.98px) {
    .cove-list-toolbar { flex-wrap: wrap; }
    .cove-list-toolbar .cove-list-search {
        order: -1;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        grid-column: 1 / -1;
    }
    .cove-list-toolbar .cove-list-search :is(input[type="text"], input[type="search"], .form-control) {
        width: 100%;
        max-width: none;
    }
    .cove-list-toolbar .cove-list-search .input-group { width: 100%; }
    .cove-list-toolbar .cove-list-search .input-group > .form-control { width: 1%; }
}

/* ── Pane-sized directory pages (clients; the sibling directory pages are the
   intended next callers) ────────────────────────────────────────────────────
   Same lesson as .cove-catlist above, one level in. A pinned split panel
   narrows the CONTENT PANE while the window stays wide, so viewport
   breakpoints lie about the room a page has: the clients grid was sized by
   md:grid-cols-2 / xl:grid-cols-3 and a 1728px window with a panel open still
   asked for three columns inside a ~750px pane, drawing 240px cards whose
   titles wrapped. These are shared primitives — template-projects.php,
   template-assets.php and template-locations.php share .cove-catlist and
   should reuse these rather than reach for viewport utilities again.

   auto-fill + a 300px floor tracks the pane continuously (including while the
   panel's handle is being dragged) with no media query and no JS; the second
   term of the max() caps the grid at --cove-cardgrid-cols so a wide, unpinned
   screen keeps the three-up layout it has today. The min() guards panes
   narrower than the floor itself, which would otherwise overflow.

   The percentage terms need a definite inline size, which the host has here
   (.cove-catlist-main is flex: 1 1 0; min-width: 0). Do not hang this grid off
   a content-sized box (float, inline-block, width: max-content, an auto track):
   percentages there resolve as auto and auto-fill silently collapses to one
   column. */
.cove-cardgrid {
    --cove-cardgrid-min: 300px;
    --cove-cardgrid-cols: 3;
    --cove-cardgrid-gap: 1rem;
    display: grid;
    gap: var(--cove-cardgrid-gap);
    grid-template-columns: repeat(
        auto-fill,
        minmax(
            max(
                min(var(--cove-cardgrid-min), 100%),
                (100% - (var(--cove-cardgrid-cols) - 1) * var(--cove-cardgrid-gap)) / var(--cove-cardgrid-cols)
            ),
            1fr
        )
    );
}
/* One column stretched across a 600px pane stops reading as a card: the
   justify-between rows pull label and value to opposite ends and the footer
   button becomes a banner. Below two columns' worth of room, cap the card. */
.cove-cardgrid-wrap {
    container-type: inline-size;
    container-name: covecardgrid;
}
@container covecardgrid (max-width: 615.98px) {
    .cove-cardgrid > * { max-width: 520px; }
}

/* ── Pane-sized list table (directory pages) ─────────────────────────────
   The list view of the same page is a wide, many-column table: ~1150px of
   natural width for /clients with every module on. In a pinned pane it could
   only be reached by scrolling sideways, which also pushed the Status column
   out of sight. Columns now go by priority tier as the pane narrows, and each
   shed value reappears in the summary line under the client's name, so the
   row keeps its data at every width (see the tier comment in
   template-clients.php — the bands themselves are derived there, per install,
   because six of the eleven columns are behind feature flags).

   Not the same mechanism as .cove-table-stack (tailwind-source.css, with
   assets/js/cove-table-stack.js), which turns a .table into stacked cards
   below 900px of .app-content. That one keys off the pane as a whole and
   needs the .table class and a <thead> to label from; this table is a
   bare grid of counts where shedding reads better than stacking, and it keys
   off its own width, which is narrower than the pane by the card's padding.

   The wrapper keeps overflow-x: auto as the last resort (very long client
   names, zoomed text), and cancels the global table{min-width:900px} so a
   trimmed table can fit the pane instead of scrolling anyway.

   Note the containment: container-type makes .cove-listtable the containing
   block for absolutely and fixed-positioned descendants. The row menus are
   fine (Bootstrap's .dropdown is position:relative, so they were already
   anchored inside), but anything new that must escape the scroller has to be
   teleported to <body>, the way the invoice and estimate modals are. */
.cove-listtable {
    container-type: inline-size;
    container-name: covelisttable;
}
.cove-listtable > table { min-width: 0; }

/* Shown one tier at a time by the derived @container bands in the template. */
.cove-listtable .cove-row-summary {
    display: none;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.5;
}
.cove-listtable .cove-sum { display: none; }


/* ── User Management: compact stacked rows ──────────────────────────────────
   Below 900px of content width (a phone, or a pinned split panel), the
   shared .cove-table-stacked layout (tailwind-source.css) turns each row into
   eight full-width "LABEL  value" lines — a single user fills the screen.
   The three user tables share one column order (checkbox, User, Role,
   Client(s), Added by, Last login, Date Added, Actions), so they get a
   denser card instead: checkbox + person + Actions on the first line, the
   five details as a two-column label/value grid under the name. Same layer
   and !important as the shared rules; the ids out-specify them. */
@layer components {
    @container coveapp (max-width: 899.98px) {
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody {
            gap: .5rem;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr {
            display: grid !important;
            grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) auto;
            column-gap: .75rem;
            row-gap: .5rem;
            align-items: start;
            padding: .75rem .875rem !important;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td {
            min-height: 0;
            padding: 0 !important;
            border: 0 !important;
            font-size: .8125rem;
            line-height: 1.35;
            min-width: 0;
            overflow-wrap: anywhere;
        }
        /* Row 1: checkbox · person · actions */
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(1) {
            grid-column: 1; grid-row: 1; align-self: center;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(2) {
            grid-column: 2 / 4; grid-row: 1; flex-wrap: nowrap !important;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:last-child {
            grid-column: 4; grid-row: 1; align-self: center;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(2) .symbol-50px .symbol-label,
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(2) .symbol-50px img {
            width: 36px; height: 36px; font-size: .75rem !important;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(2) .d-flex.flex-column {
            min-width: 0;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(2) .d-flex.flex-column > * {
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0 !important;
        }
        /* Row 1 cells carry no label. */
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(-n+2)::before,
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:last-child::before {
            content: none;
        }
        /* Rows 2+: the five details, label over value, two per line. */
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(3),
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(5),
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(7) {
            grid-column: 2;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(4),
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(6) {
            grid-column: 3 / 5;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(n+3):not(:last-child)::before {
            position: static;
            display: block;
            width: auto;
            padding: 0 0 .15rem;
            font-size: .625rem;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td.fs-9 {
            font-size: .75rem !important;
        }
        /* Row 1's Actions button: smaller, so the name keeps the room. */
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:last-child .btn-sm {
            padding: .3rem .6rem !important; font-size: .75rem !important;
        }
    }

    /* Phones: Actions floats top-right and the details reclaim the checkbox
       gutter, on symmetric columns so the two halves are equal width … */
    @container coveapp (max-width: 479.98px) {
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr {
            position: relative;
            grid-template-columns: 20px minmax(0, 1fr) 20px minmax(0, 1fr);
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(2) {
            grid-column: 2 / 5; padding-right: 96px !important;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:last-child {
            position: absolute !important; top: .75rem; right: .875rem;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:is(:nth-child(3), :nth-child(5), :nth-child(7)) {
            grid-column: 1 / 3 !important;
        }
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:is(:nth-child(4), :nth-child(6)) {
            grid-column: 3 / 5 !important;
        }
    }
    /* … and on the narrowest go one per line. */
    @container coveapp (max-width: 299.98px) {
        :is(#cove_datatable_techs, #cove_datatable_client_users, #cove_datatable_contractors).cove-table-stacked > tbody > tr > td:nth-child(n+3):not(:last-child) {
            grid-column: 1 / -1 !important;
        }
    }

    /* Filter bar: search takes the row, the select sits under it full width. */
    @container coveapp (max-width: 599.98px) {
        /* !important: the select's max-w-[200px] utility sits in a later layer. */
        .cove-um-filterbar .cove-um-search { width: 100%; flex: 1 1 100%; }
        .cove-um-filterbar .cove-um-select { max-width: none !important; flex: 1 1 100%; }
    }
}

/* Tickets list: the Subject column keeps its 280px on wide screens but never
   exceeds the visible table width on phones (minus the 40px checkbox column),
   so subject + client aren't clipped before you swipe to the other columns.
   cqw = the scroll wrapper's own width. */
.cove-tickets-table-wrap {
    container-type: inline-size;
}
.cove-tickets-table-wrap th.col-subject {
    min-width: 280px;
    min-width: min(280px, calc(100cqw - 40px));
}

/* Projects list on phones: no bulk-select column (or its action bar), and
   each project is a wrapping card instead of an 8-column table you have to
   swipe — name + status, then number · company · category · modified, then
   the actions. Desktop keeps the table. */
@media (max-width: 575.98px) {
    .cove-projects-table .cove-proj-select,
    #bulkActionsBar {
        display: none !important;
    }
    .cove-projects-table:has(.cove-proj-name) thead {
        display: none;
    }
    .cove-projects-table:has(.cove-proj-name),
    .cove-projects-table:has(.cove-proj-name) tbody {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }
    .cove-projects-table tbody tr:has(> .cove-proj-name) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: .5rem;
        row-gap: .35rem;
        padding: .85rem 0;
        border-bottom: 1px dashed var(--cc-border-color, #e4e6ef);
    }
    .cove-projects-table tbody tr:has(> .cove-proj-name) > td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
    }
    .cove-projects-table .cove-proj-name {
        order: 1;
        flex: 1 1 0;
        font-size: 1rem;
        line-height: 1.3;
    }
    .cove-projects-table .cove-proj-status {
        order: 2;
        flex: none;
    }
    /* Detail line: wraps as needed, dot-separated. */
    /* Zero-height full-width item: forces the details onto their own line. */
    .cove-projects-table tbody tr:has(> .cove-proj-name)::after {
        content: "";
        order: 3;
        flex-basis: 100%;
        height: 0;
    }
    .cove-projects-table .cove-proj-no,
    .cove-projects-table .cove-proj-client,
    .cove-projects-table .cove-proj-cat,
    .cove-projects-table .cove-proj-modified {
        order: 4;
        font-size: 12px !important;
        color: var(--cc-text-muted, #7e8299);
        overflow-wrap: anywhere;
    }
    .cove-projects-table .cove-proj-no::before { content: "#"; }
    .cove-projects-table .cove-proj-client:not(:empty)::before,
    .cove-projects-table .cove-proj-cat:not(:empty)::before,
    .cove-projects-table .cove-proj-modified:not(:empty)::before {
        content: "·";
        margin-right: .5rem;
    }
    .cove-projects-table .cove-proj-client:empty,
    .cove-projects-table .cove-proj-cat:empty,
    .cove-projects-table .cove-proj-modified:empty {
        display: none !important;
    }
    .cove-projects-table .cove-proj-actions {
        order: 5;
        flex: 1 1 100%;
    }
}

/* ========================================================================
   Invoices + Estimates lists (.cove-doc-*)
   Phones: search box + a Filters toggle (with an active-filter count); the
   Status / Client / From / To fields open below it in a 2-column grid. Rows
   become cards: number + status, client, Issued / Due (or Valid until) with
   the amount on the right, then the actions. Desktop is unchanged.
   ======================================================================== */
.cove-doc-search-row {
    display: flex;
    gap: .5rem;
}
.cove-doc-search-row > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}
/* .btn in the selector outranks `.cove-list-toolbar .btn:not(.dropdown-menu *)`
   (inline-flex), which would otherwise show the toggle on desktop. */
.cove-list-toolbar .btn.cove-doc-filters-toggle {
    display: none;
    position: relative;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
.cove-doc-filters-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--cc-primary, #7239ea);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.cove-doc-filters-toggle[aria-expanded="true"] {
    border-color: var(--cc-primary, #7239ea);
    color: var(--cc-primary, #7239ea);
}

@media (max-width: 575.98px) {
    /* --- Filters --- */
    .cove-doc-filters {
        grid-template-columns: 1fr 1fr !important;
        gap: .5rem !important;
        margin-bottom: .5rem !important;
    }
    .cove-doc-filters > * {
        margin-bottom: 0 !important;
        min-width: 0;
    }
    .cove-doc-filters > .cove-list-search {
        grid-column: 1 / -1;
    }
    .cove-doc-filters > .cove-list-search > .form-label {
        display: none;
    }
    .cove-list-toolbar .btn.cove-doc-filters-toggle {
        display: inline-flex;
    }
    .cove-doc-filters:not(.is-open) > .cove-doc-filter-extra {
        display: none;
    }
    .cove-doc-filter-extra > .form-label {
        font-size: .75rem;
        margin-bottom: .2rem;
    }
    /* Count + total on the left (wrapping if needed), Reset stays right. */
    .cove-doc-summary {
        flex-wrap: nowrap;
        gap: .5rem;
        font-size: .85rem;
    }
    .cove-doc-summary > .flex {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
    }
    .cove-doc-summary > .btn {
        flex: none;
    }

    /* --- Rows as cards --- */
    .cove-doc-table,
    .cove-doc-table tbody {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }
    .cove-doc-table thead {
        display: none;
    }
    .cove-doc-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: .6rem;
        row-gap: .3rem;
        padding: .85rem 1rem;
        border-bottom: 1px solid var(--cc-border-color, #eff2f5);
    }
    .cove-doc-table tbody tr > td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
        text-align: left;
    }
    .cove-doc-table .cove-doc-select  { order: 1; flex: none; }
    .cove-doc-table .cove-doc-no      { order: 2; flex: 1 1 0; }
    .cove-doc-table .cove-doc-status  { order: 3; flex: none; }
    /* Zero-height full-width item: details start on their own line. */
    .cove-doc-table tbody tr::after {
        content: "";
        order: 4;
        flex-basis: 100%;
        height: 0;
    }
    .cove-doc-table .cove-doc-client  { order: 5; flex: 1 1 100%; font-size: .85rem; }
    .cove-doc-table .cove-doc-issued,
    .cove-doc-table .cove-doc-due {
        order: 6;
        font-size: .8rem;
        color: var(--cc-text-muted, #7e8299);
    }
    .cove-doc-table .cove-doc-issued::before,
    .cove-doc-table .cove-doc-due::before {
        content: attr(data-label) " ";
        font-weight: 600;
    }
    .cove-doc-table .cove-doc-amount {
        order: 7;
        margin-left: auto;
        font-weight: 700;
        white-space: nowrap;
    }
    .cove-doc-table .cove-doc-actions { order: 8; flex: 1 1 100%; }
    .cove-doc-table .cove-doc-actions > .flex {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .3rem !important;
    }
    /* Slightly smaller action buttons so a full set fits one line. */
    .cove-doc-table .cove-doc-actions .btn-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px;
    }
    .cove-doc-table .cove-doc-actions .btn-icon i {
        font-size: .95rem !important;
    }
}

/* ========================================================================
   File Transfers list (.cove-xfer-*)
   Container query on the table's own scroll box, so it switches to cards
   whenever the 9 columns don't fit — phones, tablets, or a desktop with a
   pinned panel beside it. Cards: title + status, type, From → To, then
   Files · Expires · Created with View / Delete on the right. Two cards per
   row at tablet widths, one on phones. Wide screens keep the table.
   ======================================================================== */
.cove-xfer-wrap {
    container-type: inline-size;
}
@container (max-width: 900px) {
    .cove-xfer-table,
    .cove-xfer-table tbody {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }
    .cove-xfer-table thead {
        display: none;
    }
    .cove-xfer-table tbody {
        display: grid;
        grid-template-columns: 1fr;
        gap: .75rem;
        padding: .75rem;
        border: 0 !important;
    }
    .cove-xfer-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: .6rem;
        row-gap: .35rem;
        padding: .85rem 1rem;
        border: 1px solid var(--cc-border-color, #e4e6ef) !important;
        border-radius: .6rem;
        background: var(--cc-app-bg, #fff);
    }
    .cove-xfer-table tbody tr > td {
        display: block;
        min-width: 0;
        text-align: left;
    }
    .cove-xfer-table .cove-xfer-title   { order: 1; flex: 1 1 0; font-size: .95rem; font-weight: 600; }
    .cove-xfer-table .cove-xfer-status  { order: 2; flex: none; }
    .cove-xfer-table tbody tr::after {
        content: "";
        order: 3;
        flex-basis: 100%;
        height: 0;
    }
    .cove-xfer-table .cove-xfer-type    { order: 4; flex: 1 1 100%; }
    .cove-xfer-table .cove-xfer-from,
    .cove-xfer-table .cove-xfer-to      { order: 5; font-size: .85rem; }
    .cove-xfer-table .cove-xfer-to > div,
    .cove-xfer-table .cove-xfer-from > div { display: inline; }
    .cove-xfer-table .cove-xfer-to > .text-xs {
        display: block;
        overflow-wrap: anywhere;
    }
    .cove-xfer-table .cove-xfer-to     { margin-right: auto; }
    .cove-xfer-table .cove-xfer-files,
    .cove-xfer-table .cove-xfer-expires,
    .cove-xfer-table .cove-xfer-created { order: 6; font-size: .8rem; }
    .cove-xfer-table :is(.cove-xfer-from, .cove-xfer-to, .cove-xfer-files, .cove-xfer-expires, .cove-xfer-created)::before {
        content: attr(data-label) " ";
        font-weight: 600;
        color: var(--cc-text-muted, #7e8299);
    }
    .cove-xfer-table .cove-xfer-actions {
        order: 7;
        margin-left: auto;
    }
    .cove-xfer-table .cove-xfer-actions button {
        width: 34px;
        height: 34px;
        border-radius: .4rem;
    }
    .cove-xfer-table .cove-xfer-actions button:hover {
        background: rgba(0, 0, 0, .05);
    }
}
@container (min-width: 560px) and (max-width: 900px) {
    .cove-xfer-table tbody {
        grid-template-columns: 1fr 1fr;
    }
}

/* The cells carry px-6 / py-4 / whitespace-nowrap, which tailwind.css compiles
   as `!important` inside @layer components. For important declarations an
   EARLIER layer wins and unlayered loses, so the card reset has to live in
   @layer base (declared before components in tailwind.css). */
@layer base {
    @container (max-width: 900px) {
        .cove-xfer-table tbody tr > td {
            padding: 0 !important;
            white-space: normal !important;
        }
    }
}

/* ========================================================================
   New-message composer (#compose-message-box) below 1100px
   The docked 600px box ran off a phone. Below 1100px it opens as a full
   page (header / scrolling body / pinned Send footer) and the fullscreen
   toggle is hidden — it is already full. Minimize still collapses it to a
   bar. The box is shown/hidden with inline display, so "open" is matched
   as not display:none.
   ======================================================================== */
@media (max-width: 1099.98px) {
    #compose-fullscreen {
        display: none !important;
    }
    #compose-message-box:not(.minimized):not([style*="display: none"]) {
        display: flex !important;
        flex-direction: column;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        transform: none !important;
        border-radius: 0 !important;
        padding-bottom: 0 !important;
    }
    #compose-message-box:not(.minimized) > #compose-head {
        flex: none;
        padding-top: env(safe-area-inset-top);
    }
    #compose-message-box:not(.minimized) > #compose-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #compose-message-box:not(.minimized) > #compose-foot {
        flex: none;
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom)) !important;
    }
    /* Minimized: a full-width bar along the bottom. */
    #compose-message-box.minimized {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        transform: none !important;
        padding-bottom: 0 !important;
    }
    /* #cove_app_main is a z-index:1 stacking context under the z-index:100
       header; lift it while the composer is open so the full page covers
       the header too. */
    body:has(#compose-message-box:not(.minimized):not([style*="display: none"])) #cove_app_main {
        z-index: 200;
    }
    html:has(#compose-message-box:not(.minimized):not([style*="display: none"])) {
        overflow: hidden;
    }
}
@media (max-width: 575.98px) {
    /* Subject gets the full width; Label drops to its own line under it. */
    #compose-body .field-row:has(> .field-aside) {
        flex-wrap: wrap;
    }
    #compose-body .field-row:has(> .field-aside) > .field-main {
        flex: 1 1 100%;
    }
    #compose-body .field-row > .field-aside {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    #compose-body .field-row > .field-aside > .vr {
        display: none;
    }
    #compose-body .field-row > .field-aside > .form-select {
        flex: 1 1 auto;
        width: auto;
    }
    /* Footer: Cancel / Save draft / Send fit one line. */
    #compose-foot > .flex,
    #compose-foot > .d-flex {
        gap: .5rem;
    }
    /* Cancel duplicates the × in the composer header; drop it for room. */
    #compose-foot [data-bs-dismiss="modal"] {
        display: none;
    }
    #compose-foot #send-message-btn {
        white-space: nowrap;
    }
}

/* Composer "To" — label inside the recipients box, matching the floating
   Subject field (54px, 8px radius, label top-left). All screen sizes. */
#compose-body .to-row > .field-main {
    position: relative;
}
#compose-body .to-float-label {
    position: absolute;
    top: 7px;
    left: 16px;
    /* Above the Select2 box, which messages CSS pins at z-index 100000. */
    z-index: 100002;
    margin: 0;
    font-size: 12px;
    line-height: 1;
    color: #a1a5b7;
    pointer-events: none;
}
#compose-body .to-row .select2-container .select2-selection--multiple {
    min-height: 54px !important;
    padding: 20px 8px 4px 10px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
}
#compose-body .to-row .select2-container--focus .select2-selection--multiple,
#compose-body .to-row .select2-container--open .select2-selection--multiple {
    border-color: var(--cc-primary, #7239ea) !important;
}

@media (max-width: 1099.98px) {
    /* Full-page composer: the editor fills the free space and its toolbar
       sits at the bottom, just above the Send footer. */
    #compose-message-box:not(.minimized) > #compose-body {
        display: flex;
        flex-direction: column;
    }
    #compose-message-box:not(.minimized) > #compose-body > :not(.tinymce-container) {
        flex: none;
    }
    #compose-message-box:not(.minimized) > #compose-body > .tinymce-container,
    #compose-body .tinymce-container .wp-editor-wrap,
    #compose-body .tinymce-container .wp-editor-container,
    #compose-body .tinymce-container .mce-tinymce,
    #compose-body .tinymce-container .mce-tinymce > .mce-container-body {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        width: 100% !important;
    }
    #compose-body .tinymce-container .mce-edit-area {
        order: 1;
        flex: 1 1 auto;
        min-height: 140px;
        display: flex;
        flex-direction: column;
    }
    #compose-body .tinymce-container .mce-edit-area > iframe {
        flex: 1 1 auto;
        height: 100% !important;
        min-height: 140px;
    }
    #compose-body .tinymce-container .mce-top-part {
        order: 2;
        flex: none;
    }
    #compose-body .tinymce-container .mce-statusbar {
        order: 3;
        flex: none;
    }
    /* Send matches the other (small) footer buttons. */
    #compose-foot #send-message-btn {
        font-size: .925rem !important;
        line-height: 1.5 !important;
        padding: .45rem .85rem !important;
    }
}

/* Composer Google-file buffer: its toggle now lives in the icon toolbar, so
   the buffer block only takes space once it holds linked-file chips. */
#compose_glink_buffer .cove-glink-buffer-chips:not(:empty) {
    margin-top: .5rem;
}

/* ========================================================================
   Assets + Locations lists on phones: each row is a wrapping card —
   checkbox, name and View on top; the other columns follow as labelled
   pieces that wrap (Client, Location, Status, Type, Vendor, Installed,
   Next service, Updated, Address). Columns hidden via the Columns menu stay
   hidden (inline display:none wins). Desktop keeps the table.
   ======================================================================== */
@media (max-width: 767.98px) {
    :is(#assetsTable, #locationsTable) {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }
    :is(#assetsTable, #locationsTable) thead {
        display: none;
    }
    :is(#assetsTable, #locationsTable) tbody {
        display: block;
        width: 100%;
    }
    :is(#assetsTable, #locationsTable) tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: .75rem;
        row-gap: .3rem;
        padding: .85rem 0;
        border-bottom: 1px solid var(--cc-border-color, #eff2f5);
    }
    :is(#assetsTable, #locationsTable) tbody tr > td {
        display: block;
        border: 0 !important;
        min-width: 0;
        text-align: left;
    }
    :is(#assetsTable, #locationsTable) .col-checkbox { order: 1; flex: none; }
    #assetsTable .col-asset,
    #locationsTable .col-location {
        order: 2;
        flex: 1 1 0;
        font-size: .95rem;
    }
    :is(#assetsTable, #locationsTable) tbody tr > td:last-child {
        order: 3;
        flex: none;
        text-align: right;
    }
    /* Zero-height full-width item: the details start on their own line. */
    :is(#assetsTable, #locationsTable) tbody tr::after {
        content: "";
        order: 4;
        flex-basis: 100%;
        height: 0;
    }
    :is(#assetsTable, #locationsTable) tbody tr > td:not(.col-checkbox):not(:last-child) {
        order: 5;
        font-size: .8rem;
        color: var(--cc-text-muted, #5e6278);
        overflow-wrap: anywhere;
    }
    #assetsTable .col-asset,
    #locationsTable .col-location {
        order: 2 !important;
        color: inherit;
        font-size: .95rem;
    }
    :is(#assetsTable, #locationsTable) tbody td::before {
        font-weight: 600;
        color: var(--cc-text-muted, #a1a5b7);
        margin-right: .3rem;
    }
    :is(#assetsTable, #locationsTable) .col-client::before  { content: "Client"; }
    #assetsTable .col-location::before                      { content: "Location"; }
    :is(#assetsTable, #locationsTable) .col-status::before  { content: "Status"; }
    :is(#assetsTable, #locationsTable) .col-type::before    { content: "Type"; }
    :is(#assetsTable, #locationsTable) .col-vendor::before  { content: "Vendor"; }
    :is(#assetsTable, #locationsTable) .col-install::before { content: "Installed"; }
    :is(#assetsTable, #locationsTable) .col-service::before { content: "Next service"; }
    :is(#assetsTable, #locationsTable) .col-updated::before { content: "Updated"; }
    #locationsTable .col-address                            { flex-basis: 100%; }
    #locationsTable .col-address::before                    { content: "Address"; }
}
/* Cell padding utilities (px-*, pl-0 …) are layered !important in
   tailwind.css; the card reset has to come from an earlier layer. */
@layer base {
    @media (max-width: 767.98px) {
        :is(#assetsTable, #locationsTable) tbody tr > td {
            padding: 0 !important;
        }
    }
}

/* Tickets list on phones — same card treatment as Assets / Locations:
   checkbox, subject block (with its requester · category · # line) and the
   status badges on top; Client, Priority, Opened, Due, Tech and Updated
   follow as labelled pieces that wrap. Desktop keeps the table. */
@media (max-width: 767.98px) {
    .cove-tickets-table-wrap > table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }
    .cove-tickets-table-wrap > table > thead { display: none; }
    .cove-tickets-table-wrap > table > tbody { display: block; width: 100%; }
    .cove-tickets-table-wrap > table > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: .75rem;
        row-gap: .3rem;
        padding: .85rem 0;
        border-bottom: 1px solid var(--cc-border-color, #eff2f5);
    }
    .cove-tickets-table-wrap > table > tbody > tr > td {
        display: block;
        border: 0 !important;
        min-width: 0;
        text-align: left !important;
    }
    .cove-tickets-table-wrap .col-checkbox { order: 1; flex: none; }
    .cove-tickets-table-wrap .col-subject  { order: 2; flex: 1 1 0; min-width: 0 !important; }
    .cove-tickets-table-wrap .col-status   { order: 3; flex: none; text-align: right !important; }
    .cove-tickets-table-wrap > table > tbody > tr::after {
        content: "";
        order: 4;
        flex-basis: 100%;
        height: 0;
    }
    .cove-tickets-table-wrap :is(.col-client, .col-priority, .col-date, .col-due, .col-tech, .col-updated) {
        order: 5;
        font-size: .8rem;
        overflow-wrap: anywhere;
    }
    .cove-tickets-table-wrap .col-updated > div { display: inline; margin-left: .25rem; }
    /* The row pin button is 39px tall and stretched the title's line (a gap
       even when it is hidden until hover); keep it compact on the card. */
    .cove-tickets-table-wrap .col-subject .cove-row-pin { vertical-align: middle; }
    .cove-tickets-table-wrap .col-subject .cove-row-pin .btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px;
        padding: 0 !important;
    }
    .cove-tickets-table-wrap .col-subject .cove-row-pin .btn i { font-size: .75rem; }
    .cove-tickets-table-wrap tbody td::before {
        font-weight: 600;
        color: var(--cc-text-muted, #a1a5b7);
        margin-right: .3rem;
    }
    .cove-tickets-table-wrap tbody .col-client::before   { content: "Client"; }
    .cove-tickets-table-wrap tbody .col-priority::before { content: "Priority"; }
    .cove-tickets-table-wrap tbody .col-date::before     { content: "Opened"; }
    .cove-tickets-table-wrap tbody .col-due::before      { content: "Due"; }
    .cove-tickets-table-wrap tbody .col-tech::before     { content: "Tech"; }
    .cove-tickets-table-wrap tbody .col-updated::before  { content: "Updated"; }
}
@layer base {
    @media (max-width: 767.98px) {
        .cove-tickets-table-wrap > table > tbody > tr > td { padding: 0 !important; }
    }
}

/* Account page: tab content + card padding scale with the screen (was a
   fixed p-8 / p-10 — 32–40px of padding on a phone). */
.cove-account-tab-content { padding: 0.5rem; }
.cove-account-card-body   { padding: 1rem; }
@media (min-width: 768px) {
    .cove-account-tab-content { padding: 1.25rem; }
    .cove-account-card-body   { padding: 1.5rem; }
}
@media (min-width: 1200px) {
    .cove-account-tab-content { padding: 1.5rem; }
    .cove-account-card-body   { padding: 2rem; }
}
/* Account forms (Profile, Security …) sized like the rest of the site's
   forms: ~38px controls, 14px text, 14px labels. */
#accountTabContent :is(input.form-control, select.form-select, .form-select) {
    min-height: 38px;
    height: 38px;
    padding: .4rem .75rem;
    font-size: .875rem;
    line-height: 1.4;
}
#accountTabContent textarea.form-control {
    padding: .5rem .75rem;
    font-size: .875rem;
}
/* Labels carry fs-6 (a layered !important utility), so their size comes
   from an earlier layer. */
@layer base {
    #accountTabContent .col-form-label,
    #accountTabContent .form-label {
        font-size: .875rem !important;
    }
}
/* Profile: the save-alert slot reserves 40px + a row margin even when empty;
   collapse it until an alert is actually shown. */
@layer base {
    /* h-40px / mb-6 are layered !important utilities — reset from an
       earlier layer. */
    #account_profile #alert-container:empty { height: 0 !important; }
    #account_profile .row:has(> div > #alert-container:empty) { margin-bottom: 0 !important; }
    @media (max-width: 767.98px) {
        #accountTabContent .card > .card-header {
            min-height: 0 !important;
            padding: .75rem 1rem !important;
        }
        #accountTabContent .card > .card-header .card-title {
            margin: 0 !important;
            font-size: 1.05rem !important;
        }
    }
}
@media (max-width: 767.98px) {
    #accountTabContent .card > .card-body { padding: 1rem; }
    #accountTabContent .card > .card-footer { padding: .75rem 1rem; }
}
/* Security → active sessions (Device / IP / Login time / Actions): a card
   per session on phones instead of a 900px-min table to swipe. */
@media (max-width: 767.98px) {
    #account_security .table-responsive > table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }
    #account_security .table-responsive > table > thead { display: none; }
    #account_security .table-responsive > table > tbody { display: block; }
    #account_security .table-responsive > table > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: .75rem;
        row-gap: .2rem;
        padding: .75rem .25rem;
        border-bottom: 1px solid var(--cc-border-color, #eff2f5);
    }
    #account_security .table-responsive > table > tbody > tr > td {
        display: block;
        border: 0 !important;
        min-width: 0;
    }
    #account_security .table-responsive > table > tbody > tr > td:nth-child(1) { order: 1; flex: 1 1 0; }
    #account_security .table-responsive > table > tbody > tr > td:nth-child(4) { order: 2; flex: none; }
    #account_security .table-responsive > table > tbody > tr::after {
        content: ""; order: 3; flex-basis: 100%; height: 0;
    }
    #account_security .table-responsive > table > tbody > tr > td:nth-child(2),
    #account_security .table-responsive > table > tbody > tr > td:nth-child(3) {
        order: 4;
        font-size: .8rem;
    }
    #account_security .table-responsive > table > tbody > tr > td:nth-child(2)::before {
        content: "IP ";
        font-weight: 600;
        color: var(--cc-text-muted, #a1a5b7);
    }
    #account_security .table-responsive > table > tbody > tr > td:nth-child(3) > div {
        display: inline;
        margin-right: .35rem;
    }
}
@layer base {
    @media (max-width: 767.98px) {
        #account_security .table-responsive > table > tbody > tr > td { padding: 0 !important; }
    }
}

/* Clients on phones.
   Grid cards: the 7 stats sit in two columns (they were one per line,
   making each card ~380px tall) and Created / Last login share a line.
   List view: the client logo shrinks so the name + summary get the width. */
@layer base {
    @media (max-width: 767.98px) {
        .cove-client-stats {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            column-gap: 2rem;
            row-gap: .35rem !important;
        }
        .cove-client-dates {
            flex-direction: row !important;
            flex-wrap: wrap;
            column-gap: .9rem;
        }
        .cove-client-logo {
            width: 40px !important;
        }
    }
}
@media (max-width: 767.98px) {
    .cove-client-stats > div { min-width: 0; }
    .cove-client-stats > div > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cove-client-stats > div > span > i { margin-right: .35rem !important; }
}

/* ── Agent profile page (?agent_profile=<id>) + links into it ─────────────────
   An instrument-panel read of one agent: LED + spec sheet header, a counter
   strip, "what it handles", and a dense log. Mono for times/counts/keys only.
   Spec: docs/superpowers/specs/2026-09-30-agent-profile-page-design.md */
@layer components {
    #cove_agents_tab .cove-agent-name-row { display: flex; align-items: center; gap: .35rem; min-width: 0; }
    #cove_agents_tab .cove-agent-name-row .cove-agent-ident-name { min-width: 0; }
    /* "Profile" in the row actions is a link styled as the row's buttons. */
    #cove_agents_tab a.cove-agent-act-btn { display: inline-flex; align-items: center; text-decoration: none; }
    #cove_agents_tab a.cove-agent-act-btn:hover,
    #cove_agents_tab a.cove-agent-act-btn:focus-visible { color: var(--bs-gray-800, #3f4254); text-decoration: none; }
    #cove_agents_tab .cove-agent-profile-link { flex: 0 0 auto; font-size: .75rem; color: var(--bs-gray-500, #99a1b7); line-height: 1; }
    #cove_agents_tab .cove-agent-profile-link:hover,
    #cove_agents_tab .cove-agent-profile-link:focus-visible { color: var(--color-primary, #7239ea); }

    .cove-agent-profile {
        --ap-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        --ap-line: var(--bs-gray-200, #eef0f4);
        --ap-muted: var(--bs-gray-600, #78829d);
        --ap-ink: var(--bs-gray-900, #181c32);
        --ap-accent: var(--color-primary, #7239ea);
        --ap-good: #17a34a;
        --ap-bad: #dc2626;
        --ap-wait: #d97706;
        display: flex; flex-direction: column; gap: 1rem;
        padding-bottom: 2rem; color: var(--ap-ink); min-width: 0;
        container: cove-ap / inline-size;
    }
    .cove-agent-profile .cove-ap-panel {
        background: #fff; border: 1px solid var(--ap-line); border-radius: .75rem;
        padding: 1.25rem; min-width: 0;
    }
    .cove-agent-profile .cove-ap-h { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
    .cove-agent-profile h2 { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ap-muted); margin: 0; }
    .cove-agent-profile h3 { font-size: .8125rem; font-weight: 700; color: var(--ap-ink); margin: 1.1rem 0 .4rem; }
    .cove-agent-profile h4 { font-size: .75rem; font-weight: 600; color: var(--ap-muted); margin: .75rem 0 .3rem; }
    .cove-agent-profile .cove-ap-muted { color: var(--ap-muted); font-size: .8125rem; margin: 0; }

    /* header */
    .cove-agent-profile .cove-ap-head { display: flex; gap: 1rem; align-items: flex-start; }
    .cove-agent-profile .cove-ap-avatar {
        flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: .75rem;
        display: inline-flex; align-items: center; justify-content: center;
        font-family: var(--ap-mono); font-weight: 700; font-size: 1.05rem;
        background: color-mix(in srgb, var(--ap-accent) 10%, #fff); color: var(--ap-accent);
        border: 1px solid color-mix(in srgb, var(--ap-accent) 25%, #fff);
    }
    .cove-agent-profile .cove-ap-ident { min-width: 0; flex: 1 1 auto; }
    .cove-agent-profile .cove-ap-name { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: 1.25rem; font-weight: 700; margin: 0 0 .6rem; overflow-wrap: anywhere; }
    .cove-agent-profile .cove-ap-led { width: .6rem; height: .6rem; border-radius: 999px; background: var(--bs-gray-400, #c4cada); flex: 0 0 auto; }
    .cove-agent-profile .cove-ap-led.is-on { background: var(--ap-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-good) 20%, transparent); }
    .cove-agent-profile .cove-ap-led.is-paused { background: var(--ap-wait); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-wait) 20%, transparent); }
    .cove-agent-profile .cove-ap-status { font-size: .6875rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; background: var(--bs-gray-100, #f9f9f9); color: var(--ap-muted); }
    .cove-agent-profile .cove-ap-status.is-active { background: color-mix(in srgb, var(--ap-good) 12%, #fff); color: var(--ap-good); }
    .cove-agent-profile .cove-ap-status.is-paused { background: color-mix(in srgb, var(--ap-wait) 12%, #fff); color: var(--ap-wait); }
    .cove-agent-profile .cove-ap-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem 1.25rem; margin: 0; }
    .cove-agent-profile .cove-ap-specs dt { font-family: var(--ap-mono); font-size: .6875rem; font-weight: 500; color: var(--ap-muted); text-transform: lowercase; }
    .cove-agent-profile .cove-ap-specs dd { margin: 0; font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere; }

    /* outcomes strip */
    .cove-agent-profile .cove-ap-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1px; background: var(--ap-line); border: 1px solid var(--ap-line); border-radius: .75rem; overflow: hidden; }
    .cove-agent-profile .cove-ap-stat { background: #fff; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
    .cove-agent-profile .cove-ap-num { font-family: var(--ap-mono); font-size: 1.375rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .cove-agent-profile .cove-ap-lbl { font-size: .75rem; color: var(--ap-muted); }
    .cove-agent-profile .cove-ap-stat.is-wait .cove-ap-num { color: var(--ap-wait); }
    .cove-agent-profile .cove-ap-stat.is-bad .cove-ap-num { color: var(--ap-bad); }

    /* needs you */
    .cove-agent-profile .cove-ap-needs { border-color: color-mix(in srgb, var(--ap-wait) 35%, #fff); }
    .cove-agent-profile .cove-ap-needs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
    .cove-agent-profile .cove-ap-needs-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; font-size: .8125rem; }
    .cove-agent-profile .cove-ap-needs-list li > i { color: var(--ap-wait); }

    /* two columns */
    .cove-agent-profile .cove-ap-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
    /* Width of the content pane, not the viewport (the pane shrinks with the
       nav and any docked panel) — a container query, not a media query. */
    @container cove-ap (min-width: 960px) {
        .cove-agent-profile .cove-ap-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    }

    /* what it handles */
    .cove-agent-profile .cove-ap-guard { display: flex; gap: .5rem; align-items: flex-start; font-size: .8125rem; background: var(--bs-gray-100, #f9f9f9); border-radius: .5rem; padding: .6rem .75rem; margin: 0; }
    .cove-agent-profile .cove-ap-guard > i { color: var(--ap-accent); }
    .cove-agent-profile .cove-ap-clients { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
    .cove-agent-profile .cove-ap-clients li { font-size: .75rem; border: 1px solid var(--ap-line); border-radius: 999px; padding: .15rem .6rem; }
    .cove-agent-profile .cove-ap-instr summary { cursor: pointer; font-size: .8125rem; color: var(--ap-accent); }
    .cove-agent-profile .cove-ap-instr pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--ap-mono); font-size: .75rem; background: var(--bs-gray-100, #f9f9f9); border-radius: .5rem; padding: .75rem; margin: .5rem 0 0; max-height: 22rem; overflow: auto; }
    .cove-agent-profile .cove-ap-group ul { list-style: none; margin: 0; padding: 0; }
    .cove-agent-profile .cove-ap-group li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; font-size: .8125rem; padding: .3rem 0; border-bottom: 1px dashed var(--ap-line); }
    .cove-agent-profile .cove-ap-group li:last-child { border-bottom: 0; }
    .cove-agent-profile .cove-ap-badge { flex: 0 0 auto; font-family: var(--ap-mono); font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .4rem; border-radius: .25rem; background: var(--bs-gray-100, #f9f9f9); color: var(--ap-muted); white-space: nowrap; }
    .cove-agent-profile .cove-ap-badge.is-drafts-for-review { background: color-mix(in srgb, var(--ap-accent) 10%, #fff); color: var(--ap-accent); }
    .cove-agent-profile .cove-ap-badge.is-needs-approval { background: color-mix(in srgb, var(--ap-wait) 12%, #fff); color: var(--ap-wait); }
    .cove-agent-profile .cove-ap-badge.is-acts-live { background: color-mix(in srgb, var(--ap-bad) 10%, #fff); color: var(--ap-bad); }

    /* the log */
    .cove-agent-profile .cove-ap-list { list-style: none; margin: 0; padding: 0 0 0 .1rem; position: relative; }
    .cove-agent-profile .cove-ap-list::before { content: ""; position: absolute; left: .85rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--ap-line); }
    .cove-agent-profile .cove-ap-item { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: .6rem; padding: .5rem 0; align-items: start; }
    .cove-agent-profile .cove-ap-glyph { position: relative; z-index: 1; width: 1.75rem; height: 1.75rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; background: #fff; border: 1px solid var(--ap-line); color: var(--ap-muted); }
    .cove-agent-profile .cove-ap-item.is-draft .cove-ap-glyph { color: var(--ap-accent); border-color: color-mix(in srgb, var(--ap-accent) 35%, #fff); }
    .cove-agent-profile .cove-ap-item.is-live .cove-ap-glyph { color: var(--ap-good); border-color: color-mix(in srgb, var(--ap-good) 35%, #fff); }
    .cove-agent-profile .cove-ap-item.is-request .cove-ap-glyph { color: var(--ap-wait); border-color: color-mix(in srgb, var(--ap-wait) 35%, #fff); }
    .cove-agent-profile .cove-ap-item.is-blocked .cove-ap-glyph,
    .cove-agent-profile .cove-ap-item.is-error .cove-ap-glyph { color: var(--ap-bad); border-color: color-mix(in srgb, var(--ap-bad) 35%, #fff); }
    .cove-agent-profile .cove-ap-item.is-reads .cove-ap-text { color: var(--ap-muted); font-weight: 500; }
    .cove-agent-profile .cove-ap-body { min-width: 0; padding-top: .2rem; }
    .cove-agent-profile .cove-ap-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; font-size: .8125rem; }
    .cove-agent-profile .cove-ap-text { font-weight: 600; }
    .cove-agent-profile .cove-ap-chip { display: inline-flex; align-items: baseline; gap: .3rem; max-width: 100%; font-size: .75rem; padding: .05rem .45rem; border-radius: .3rem; background: var(--bs-gray-100, #f9f9f9); color: var(--ap-ink); text-decoration: none; overflow-wrap: anywhere; }
    .cove-agent-profile a.cove-ap-chip:hover { background: color-mix(in srgb, var(--ap-accent) 10%, #fff); color: var(--ap-accent); }
    .cove-agent-profile .cove-ap-chip-type { font-family: var(--ap-mono); font-size: .625rem; text-transform: uppercase; color: var(--ap-muted); }
    .cove-agent-profile .cove-ap-client { font-size: .6875rem; color: var(--ap-muted); border: 1px solid var(--ap-line); border-radius: 999px; padding: 0 .45rem; }
    .cove-agent-profile .cove-ap-detail { font-family: var(--ap-mono); font-size: .6875rem; color: var(--ap-muted); margin-top: .15rem; overflow-wrap: anywhere; }
    .cove-agent-profile .cove-ap-outcome { font-size: .75rem; margin-top: .2rem; color: var(--ap-muted); }
    .cove-agent-profile .cove-ap-outcome.is-good { color: var(--ap-good); }
    .cove-agent-profile .cove-ap-outcome.is-bad { color: var(--ap-bad); }
    .cove-agent-profile .cove-ap-outcome.is-wait { color: var(--ap-wait); }
    .cove-agent-profile .cove-ap-reason { color: var(--ap-muted); }
    .cove-agent-profile .cove-ap-time { font-family: var(--ap-mono); font-size: .6875rem; color: var(--ap-muted); white-space: nowrap; padding-top: .3rem; }
    .cove-agent-profile .cove-ap-more { margin-top: .75rem; }
    .cove-agent-profile .cove-ap-empty { padding: .5rem 0; }

    /* not found */
    .cove-agent-profile .cove-ap-notfound { text-align: center; padding: 3rem 1.25rem; }
    .cove-agent-profile .cove-ap-notfound > i { font-size: 2rem; color: var(--ap-muted); }
    .cove-agent-profile .cove-ap-notfound h2 { margin: .75rem 0 .25rem; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ap-ink); }
    .cove-agent-profile .cove-ap-notfound p { color: var(--ap-muted); font-size: .8125rem; }

    @container cove-ap (max-width: 575px) {
        .cove-agent-profile .cove-ap-panel { padding: 1rem; }
        .cove-agent-profile .cove-ap-item { grid-template-columns: 1.75rem minmax(0, 1fr); }
        .cove-agent-profile .cove-ap-item .cove-ap-time { grid-column: 2; padding-top: 0; }
    }
}