/* =========================================================
   ZYBRON CHAT CANVAS — Phase 0 stylesheet
   Loaded ONLY when ChatCanvas layout mounts (via <HeadContent>).
   Every selector is namespaced under .zc-shell so it cannot
   bleed into MainLayout / Chatbox / module pages.
   ========================================================= */

/* ROOT SHELL ==============================================================
   The canvas inherits from the global SiteTheme tokens injected at :root by
   MainLayout (see Zybron.Core.Models.Admin.SiteTheme.ToCssVariables). Whatever
   theme the user has active — Dark (default), Light, High-Contrast, or a
   tenant custom theme — the canvas follows it. Each --zc-* token has a fallback
   to the Dark default so the shell renders even before the theme cascade lands.
   ========================================================================= */
.zc-shell {
    /* Position fixed + inset:0 covers App.razor body bg without editing it */
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow: hidden;

    /* Surfaces — pulled from SiteTheme */
    --zc-bg:        var(--bg, #0E1116);
    --zc-bg-2:      var(--surface-2, #1A2030);
    --zc-surface:   var(--card-bg, var(--surface-1, #141922));
    --zc-surface-2: var(--surface-2, #1A2030);
    --zc-surface-3: var(--surface-3, #232B3A);

    /* Borders */
    --zc-border:    var(--border, #232B3A);
    --zc-border-2:  var(--border, #232B3A);

    /* Text */
    --zc-text:      var(--text-primary, #E6E9EF);
    --zc-text-2:    var(--text-secondary, #7A8599);
    --zc-text-3:    var(--muted, #7A8599);
    --zc-text-4:    var(--muted, #7A8599);
    /* Single targeted alias — `var(--zc-text-muted, …)` is used by several
       canvas rules but was never defined as a CSS var, so the white-rgba
       fallback used to render invisible on Light theme. Maps to the
       existing themed muted token. Nothing else aliased here — broader
       aliasing overrode working definitions (chat dock background, zen
       card CTA arrows). A deliberate light-theme contrast pass is on the
       backlog. */
    --zc-text-muted: var(--muted, #7A8599);

    /* Brand — Zybron jade by default; tenant theme can override --brand-jade */
    --zc-jade:      var(--brand-jade, #00D68F);
    --zc-jade-bg:   rgba(0, 214, 143, .08);
    --zc-jade-ring: rgba(0, 214, 143, .22);

    /* ── Tone palette ──────────────────────────────────────────────────
       Curated 5-stop palette that complements Zybron jade. Used by home-
       card accents, status pills, and any "select-1-of-N tone" surface.
       Process.Color stores a tone key (jade / indigo / teal / amber /
       violet); rendering resolves through these custom properties so
       light/dark/high-contrast modes adapt without editing data.
       Legacy hex values still render via the fallback chain.            */
    --zc-tone-jade:        var(--brand-jade, #00D68F);
    --zc-tone-jade-bg:     rgba(0, 214, 143, .12);
    --zc-tone-indigo:      #818CF8;
    --zc-tone-indigo-bg:   rgba(129, 140, 248, .12);
    --zc-tone-teal:        #22D3EE;
    --zc-tone-teal-bg:     rgba(34, 211, 238, .12);
    --zc-tone-amber:       var(--warning, #FBBF24);
    --zc-tone-amber-bg:    rgba(251, 191, 36, .14);
    --zc-tone-violet:      #A78BFA;
    --zc-tone-violet-bg:   rgba(167, 139, 250, .14);
}

/* Light theme — deeper saturated tones read better on light surfaces.
   Triggered by SiteTheme adding [data-theme="light"] OR the user's OS
   pref via prefers-color-scheme. Either path lands here. */
.zc-shell[data-theme="light"],
@media (prefers-color-scheme: light) {
    .zc-shell {
        --zc-tone-jade:      #00B377;
        --zc-tone-jade-bg:   rgba(0, 179, 119, .10);
        --zc-tone-indigo:    #4F46E5;
        --zc-tone-indigo-bg: rgba(79, 70, 229, .10);
        --zc-tone-teal:      #0891B2;
        --zc-tone-teal-bg:   rgba(8, 145, 178, .10);
        --zc-tone-amber:     #D97706;
        --zc-tone-amber-bg:  rgba(217, 119, 6, .12);
        --zc-tone-violet:    #7C3AED;
        --zc-tone-violet-bg: rgba(124, 58, 237, .10);
    }
}

/* High-contrast — deeper foreground + denser bg for accessibility */
@media (prefers-contrast: more) {
    .zc-shell {
        --zc-tone-jade:      #00945F;
        --zc-tone-jade-bg:   rgba(0, 148, 95, .22);
        --zc-tone-indigo:    #312E81;
        --zc-tone-indigo-bg: rgba(49, 46, 129, .22);
        --zc-tone-teal:      #155E75;
        --zc-tone-teal-bg:   rgba(21, 94, 117, .22);
        --zc-tone-amber:     #92400E;
        --zc-tone-amber-bg:  rgba(146, 64, 14, .22);
        --zc-tone-violet:    #4C1D95;
        --zc-tone-violet-bg: rgba(76, 29, 149, .22);
    }
}

.zc-shell {
    /* Re-open the rule body so subsequent custom-property declarations
       below remain inside .zc-shell scope (the @media blocks above closed
       the original opening at line 15). Empty rule is harmless. */

    /* Status */
    --zc-amber:     var(--warning, #F59E0B);
    --zc-amber-bg:  rgba(245, 158, 11, .1);
    --zc-red:       var(--error, #DC3545);
    --zc-red-bg:    rgba(220, 53, 69, .08);
    --zc-blue:      var(--info, #2563EB);
    --zc-blue-bg:   rgba(37, 99, 235, .08);
    --zc-blue-ring: rgba(37, 99, 235, .22);

    /* Tenant accent — Zybron jade by default; per-tenant override flows
       through --brand-jade / --tenant-color from SiteTheme. */
    --zc-tenant:      var(--tenant-color, var(--brand-jade, #00D68F));
    --zc-tenant-bg:   var(--zc-jade-bg);
    --zc-tenant-ring: var(--zc-jade-ring);

    /* ── Library card token bridge ──────────────────────────────────
       The LibraryDocument/Upload cards style their inline markup with a
       parallel `--zybron-*` token namespace. SiteTheme never emits those
       names, so every reference fell through to a hardcoded slate/blue
       fallback that ignored the admin theme (and read low-contrast on the
       Light card). Map them onto the same admin-sourced --zc-* tokens the
       rest of the canvas uses so the Library cards track light / dark /
       high-contrast like every other card — no per-element edits needed. */
    --zybron-border:      var(--zc-border);
    --zybron-surface:     var(--zc-surface);
    --zybron-surface-2:   var(--zc-surface-2);
    --zybron-text-muted:  var(--zc-text-3);
    --zybron-muted:       var(--zc-text-3);
    --zybron-accent:      var(--zc-blue);
    --zybron-accent-soft: color-mix(in srgb, var(--zc-blue) 16%, transparent);
    --zybron-danger:      var(--zc-red);
    --zybron-success:     var(--success, #22c55e);

    /* Geometry — radii from SiteTheme; canvas-specific dock width stays local */
    --zc-r:        var(--radius-lg, 18px);
    --zc-r-sm:     var(--radius-md, 12px);
    --zc-r-xs:     var(--radius-sm, 8px);
    --zc-r-pill:   999px;
    /* Floor the rail at 64px even if an older saved theme still pins 56px —
       gives the 40px icons / 56px logo room to sit without the vertical
       scrollbar clipping them. */
    --zc-rail-w:   max(var(--micro-rail-w, 64px), 64px);
    --zc-dock-w:   720px;
    /* Narrower dock width used when the dock is pinned left/right, so the
       center of the canvas stays clear for a full-width doc. */
    --zc-dock-w-narrow: 420px;

    --zc-font: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    --zc-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

    /* Shadows tuned to work on both dark + light surfaces */
    --zc-shadow-sm: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06);
    --zc-shadow-md: 0 4px 12px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .08);
    --zc-shadow-lg: 0 20px 40px rgba(0, 0, 0, .28), 0 6px 12px rgba(0, 0, 0, .12);

    background:
        radial-gradient(1200px 600px at 50% -200px, rgba(0, 214, 143, .06), transparent 60%),
        var(--zc-bg);
    color: var(--zc-text);
    font-family: var(--zc-font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;

    display: grid;
    grid-template-columns: var(--zc-rail-w) 1fr;
}

/* Shell-visibility gate intentionally removed — the theme cookie loaded by
   App.razor injects the correct :root vars before Blazor connects, so the
   shell can paint normally on frame 1. Hiding the shell until AppState
   independently resolved the theme caused users to see only the zen text
   on a black void (rail + dock + cards all hidden) when the theme was
   already correct from the cookie. */

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

.zc-shell button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* MICRORAIL ==============================================================
   Uses the SiteTheme sidebar tokens so the canvas rail matches Classic
   (darker bg, mid-grey icons that read lighter by contrast). */
.zc-shell .zc-rail {
    background: var(--sidebar-bg, var(--zc-bg-2));
    border-right: 1px solid var(--sidebar-border, var(--zc-border));
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    z-index: 80;
    /* Scroll vertically when the viewport is too short for every icon, but
       never show scrollbar chrome — a visible vertical bar steals width and,
       combined with the old `overflow-x: visible` (which the spec promotes to
       `auto` next to `overflow-y: auto`), produced a phantom horizontal bar.
       Clip the horizontal axis outright and hide the bars on both axes. */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge */
}
.zc-shell .zc-rail::-webkit-scrollbar { width: 0; height: 0; }  /* WebKit/Blink */

.zc-shell .zc-rail-logo {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.zc-shell .zc-rail-logo:hover .zc-rail-img,
.zc-shell .zc-rail-logo:hover .zc-rail-mark {
    transform: scale(1.06);
    transition: transform .15s;
}

.zc-shell .zc-rail-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.zc-shell .zc-rail-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--zc-jade) 0%, #0AC07F 100%);
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.zc-shell .zc-rail-sep {
    width: 40px;
    height: 0;
    /* Same sidebar-border token MainLayout uses */
    border-top: 1px solid var(--sidebar-border, var(--zc-border));
    margin: 10px 8px;
    opacity: .6;
    flex-shrink: 0;
    /* Stay centered even when the rail switches to align-items: stretch in drawer mode. */
    align-self: center;
}

.zc-shell .zc-rail-section {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--zc-text-3);
    padding: 10px 0 4px;
    line-height: 1;
    flex-shrink: 0;
    text-align: center;
    width: 100%;
}

.zc-shell .zc-rail-btn {
    /* Mirror MainLayout's .rail-icon-button exactly:
       icon = --muted, hover bg = --surface-3, hover icon = --text-primary */
    position: relative;
    width: 40px;
    height: 40px;
    margin: 4px auto;
    border-radius: var(--radius-md, 8px);
    color: var(--muted, var(--zc-text-2));
    transition: all .2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.zc-shell .zc-rail-btn:hover {
    background: var(--surface-3, var(--zc-surface));
    color: var(--text-primary, var(--zc-text));
}

.zc-shell .zc-rail-btn:focus,
.zc-shell .zc-rail-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.zc-shell .zc-rail-btn .material-symbols-outlined {
    /* Match the visual weight of RadzenIcon in Classic — slightly smaller
       and lighter stroke than the 24/400 default. */
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 20;
}

.zc-shell .zc-rail-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    background: #EC4899;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--zc-bg-2);
}

.zc-shell .zc-rail-spacer {
    flex: 1;
    min-height: 8px;
}

.zc-shell .zc-rail-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 6px;
    gap: 2px;
    flex-shrink: 0;
}

.zc-shell .zc-rail-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.zc-shell .zc-rail-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-jade), #0AC07F);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--zc-bg-2), 0 0 0 3px rgba(0, 179, 119, .4);
    transition: all .15s;
}

.zc-shell .zc-rail-avatar:hover .zc-rail-ring {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px var(--zc-bg-2), 0 0 0 3px rgba(0, 179, 119, .7);
}

/* CONTENT COLUMN ========================================================== */
.zc-shell .zc-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* TOPBAR ================================================================== */
.zc-shell .zc-topbar {
    height: 60px;
    flex-shrink: 0;
    background: var(--topbar-bg, var(--zc-surface));
    border-bottom: 1px solid var(--topbar-border, var(--zc-border));
    color: var(--topbar-text, var(--zc-text));
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    z-index: 60;
}

.zc-shell .zc-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.zc-shell .zc-brand-name {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.01em;
    color: var(--zc-text);
}

.zc-shell .zc-brand-sub {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--zc-text-3);
    text-transform: uppercase;
}

/* Folio button under the brand — replaces the static "Folio Management" sub
   label. Click opens the folio selector. When a folio is active, the button
   shows its name; when none is active, "Folio Not Selected" prompts a pick.
   Styled as text-with-icons (not a heavy button) so it sits naturally under
   the brand name without competing for attention. */
.zc-shell .zc-brand-folio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 2px 6px 2px 0;
    margin-left: -2px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--zc-text-2);
    border-radius: 4px;
    transition: color .12s, background .12s;
}

.zc-shell .zc-brand-folio:hover {
    color: var(--zc-text);
    background: var(--zc-surface-2);
}

.zc-shell .zc-brand-folio .material-symbols-outlined {
    font-size: 16px;
    /* Theme-adaptive jade (dark/light/high-contrast variants) so the folder
       icon stays on-brand and readable in every theme. */
    color: var(--zc-tone-jade, #00D68F);
}

.zc-shell .zc-brand-folio.is-active .material-symbols-outlined {
    color: var(--zc-tone-jade, #00D68F);
}
.zc-shell .zc-brand-folio.is-active .zc-brand-folio-caret {
    color: var(--zc-text-3);
}

.zc-shell .zc-brand-folio .zc-brand-folio-caret {
    font-size: 16px;
    color: var(--zc-text-3);
    margin-left: -2px;
}

.zc-shell .zc-brand-folio-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Folio dropdown menu ===================================================== */
/* The .zc-brand wrapper needs position:relative so the absolutely-positioned
   menu anchors below the button. Backdrop is a full-viewport sibling that
   catches click-outside without blocking anything else. */
.zc-shell .zc-brand {
    position: relative;
}
.zc-shell .zc-folio-menu-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 199;
    cursor: default;
}
.zc-shell .zc-folio-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 320px;
    max-width: 400px;
    background: var(--surface-2, #1A2030);
    border: 1px solid var(--border, #232B3A);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    padding: 6px 0;
    z-index: 200;
    overflow: hidden;
}
.zc-shell .zc-folio-menu-loading,
.zc-shell .zc-folio-menu-empty {
    padding: 10px 14px;
    font-size: 12px;
    color: var(--zc-text-2);
    font-style: italic;
}
.zc-shell .zc-folio-menu-section-label {
    padding: 6px 14px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--zc-text-2);
}
.zc-shell .zc-folio-menu-row,
.zc-shell .zc-folio-menu-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: var(--zc-text);
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 80ms ease;
}
.zc-shell .zc-folio-menu-row:hover,
.zc-shell .zc-folio-menu-action:hover {
    background: var(--zc-surface-2);
}
.zc-shell .zc-folio-menu-row.is-active {
    background: var(--zc-tone-violet-bg);
}
.zc-shell .zc-folio-menu-code {
    font-family: var(--zc-mono, monospace);
    font-size: 11px;
    color: var(--zc-text);
    background: var(--zc-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
.zc-shell .zc-folio-menu-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.zc-shell .zc-folio-menu-active {
    color: rgb(60, 180, 100);
    font-size: 16px;
    flex-shrink: 0;
}
.zc-shell .zc-folio-menu-action .material-symbols-outlined {
    font-size: 16px;
    color: var(--zc-text-3);
    flex-shrink: 0;
}
.zc-shell .zc-folio-menu-action.is-primary {
    color: var(--zc-tone-violet);
    font-weight: 600;
}
.zc-shell .zc-folio-menu-action.is-primary .material-symbols-outlined {
    color: var(--zc-tone-violet);
}
.zc-shell .zc-folio-menu-action.is-danger {
    color: rgb(200, 110, 110);
}
.zc-shell .zc-folio-menu-action.is-danger .material-symbols-outlined {
    color: rgb(200, 110, 110);
}
.zc-shell .zc-folio-menu-sep {
    height: 1px;
    background: var(--border, #232B3A);
    margin: 4px 0;
}

.zc-shell .zc-topbar-spacer {
    flex: 1;
}

/* MODAL (tenant picker, future modals) ==================================== */
.zc-shell .zc-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--dialog-overlay, rgba(0, 0, 0, .55));
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    animation: zc-fade-in .12s ease-out;
}

@keyframes zc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.zc-shell .zc-modal-panel {
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-r);
    box-shadow: var(--zc-shadow-lg);
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.zc-shell .zc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--zc-border);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--zc-text);
}

.zc-shell .zc-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--zc-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all .12s;
}

.zc-shell .zc-modal-close:hover {
    background: var(--zc-surface-2);
    color: var(--zc-text);
}

.zc-shell .zc-modal-close .material-symbols-outlined {
    font-size: 18px;
}

.zc-shell .zc-modal-body {
    padding: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zc-shell .zc-modal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--zc-r-sm);
    text-align: left;
    width: 100%;
    color: var(--zc-text);
    transition: background .12s;
}

.zc-shell .zc-modal-item:hover {
    background: var(--zc-surface-2);
}

.zc-shell .zc-modal-item.active {
    background: var(--zc-jade-bg);
}

.zc-shell .zc-modal-item-icon {
    color: var(--zc-jade);
    font-size: 22px;
    flex-shrink: 0;
}

/* Per-tenant logo in the Switch-tenant list (replaces the generic domain glyph). */
.zc-shell .zc-modal-item-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 5px;
    flex-shrink: 0;
}

.zc-shell .zc-modal-item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.zc-shell .zc-modal-item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--zc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zc-shell .zc-modal-item-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--zc-text-3);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.zc-shell .zc-modal-item-check {
    color: var(--zc-jade);
    font-size: 18px;
    flex-shrink: 0;
}

.zc-shell .zc-modal-empty {
    padding: 24px 18px;
    text-align: center;
    color: var(--zc-text-3);
    font-size: 12.5px;
    font-weight: 600;
}

.zc-shell .zc-topbar-jobs {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    border-radius: var(--zc-r-pill);
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    font-size: 11px;
    font-weight: 700;
    color: var(--zc-text-2);
    transition: all .15s;
}

.zc-shell .zc-topbar-jobs:hover {
    background: var(--zc-surface);
    border-color: var(--zc-text-3);
}

.zc-shell .zc-pulse-orb {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zc-jade);
    box-shadow: 0 0 0 3px var(--zc-jade-ring);
    animation: zc-pulse 2.2s infinite;
}

@keyframes zc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}

.zc-shell .zc-topbar-jobs .zc-num {
    font-size: 12px;
    font-weight: 800;
    color: var(--zc-text);
    font-variant-numeric: tabular-nums;
}

.zc-shell .zc-topbar-jobs .zc-lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--zc-text-3);
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* CANVAS ================================================================== */
.zc-shell .zc-canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

.zc-shell .zc-canvas-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Tight padding — the dock is position:fixed and hovers over the
       content. We keep just enough bottom buffer (~180px) so a user who
       scrolls to the very end can still read the last lines without the
       dock's input frame eclipsing them; the rest of the module page
       gets the full screen height to work with. Page-side modules
       (Admin tables, Folio lists, etc.) that need extra bottom room
       can add their own scoped padding. */
    padding: 24px 24px 180px;
    overflow-y: auto;
    position: relative;
}

/* On the home route the zen + cards block is centered and benefits from
   the bigger reserved gutter so cards don't sit under the dock surface.
   ChatCanvas adds .zc-canvas-home to the inner wrapper when IsHomePage. */
.zc-shell .zc-canvas-inner.zc-canvas-home {
    padding-bottom: 320px;
}

/* Full-bleed pages — anything that wants the entire canvas-inner area
   without padding (Builder graph, Atlas map, future full-screen tools).
   Tag the page wrapper with `data-canvas-fullbleed` and the layout drops
   side + bottom padding so the page can claim the whole slot. */
.zc-shell .zc-canvas-inner:has(> [data-canvas-fullbleed]) {
    padding: 0;
}


/* ZEN STATE + MODULE CARDS ================================================ */
.zc-shell .zc-zen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Tight top — was 5vh which pushed the cards low enough that the bottom
       row tucked behind the dock. Eyebrow + headline now sit closer to the
       topbar so all five cards clear the dock with breathing room. */
    padding-top: 1.5vh;
}

/* Suppress the zen block during the prerender / pre-bootstrap pass so the
   user never sees a "Hi there" + empty-grid flash before AppState hydrates.
   Flipped to ready by ChatCanvas.OnInitializedAsync once both loaders finish. */
.zc-shell .zc-zen-pending {
    visibility: hidden;
}

.zc-shell .zc-zen-ready {
    visibility: visible;
    animation: zc-zen-fade-in 180ms ease-out;
}

@keyframes zc-zen-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.zc-shell .zc-zen-eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--zc-tenant);
    margin-bottom: 14px;
}

.zc-shell .zc-zen-h {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 0 0 10px;
    text-align: center;
    line-height: 1.12;
    color: var(--zc-text);
}

.zc-shell .zc-zen-sub {
    font-size: 16px;
    color: var(--zc-text-2);
    max-width: 620px;
    text-align: center;
    margin: 0 0 36px;
    line-height: 1.55;
}

/* Carousel wrapper — flanks the module-card row with prev/next arrows.
   Decorative today (3 cards fit; nothing to scroll). When the card set
   grows past what fits, the row will scroll horizontally and the arrows
   will page through it. */
.zc-shell .zc-module-carousel {
    width: 100%;
    max-width: 1140px;
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.zc-shell .zc-module-row {
    flex: 1;
    min-width: 0;
    display: grid;
    /* Responsive auto-fit: as many ~280px+ columns as fit. Yields 1 / 2 / 3
       columns naturally as the canvas widens. Replaces the old fixed-3
       grid that assumed exactly 3 hardcoded cards. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

/* Home grid card — pinned process surfaced via Flow.Permissions.HomeCardOrder.
   Visual matches ZybronChatCanvas-TenantAdmin.html: per-card accent color,
   subtle gradient overlay, icon pill, eyebrow tag, title, description,
   stats line with bold values, hover-revealed arrow chevron. */
/* Skeleton loaders — shown in the card slot while LoadHomeGridAsync resolves.
   Card-shaped pulsing placeholders so the layout doesn't jump when real cards
   replace them. Pure theme-token colors so they look right in light/dark/HC. */
.zc-shell .zc-home-card-skel {
    cursor: default;
    pointer-events: none;
    background: var(--zc-surface);
    border: 1.5px solid var(--zc-border);
    border-radius: 22px;
    padding: 22px 24px 18px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zc-shell .zc-home-card-skel-icon,
.zc-shell .zc-home-card-skel-line {
    background: linear-gradient(90deg,
        var(--zc-border) 0%,
        var(--zc-bg-elevated, var(--zc-surface)) 50%,
        var(--zc-border) 100%);
    background-size: 200% 100%;
    animation: zc-skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}

.zc-shell .zc-home-card-skel-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px; }
.zc-shell .zc-home-card-skel-line-eye   { width: 60%; height: 10px; }
.zc-shell .zc-home-card-skel-line-title { width: 80%; height: 18px; margin-top: 4px; }
.zc-shell .zc-home-card-skel-line-desc  { width: 95%; height: 12px; margin-top: 6px; }

@keyframes zc-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Real cards fade up when _cardsReady flips. Each card is a button so we
   target the live render (not the skeleton divs). */
.zc-shell button.zc-home-card {
    animation: zc-card-fade-in 280ms ease-out both;
}

@keyframes zc-card-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.zc-shell .zc-home-card {
    --card-accent: var(--zc-jade, #00D68F);
    --card-accent-bg: rgba(0, 214, 143, 0.10);
    background: var(--zc-surface);
    border: 1.5px solid var(--zc-border);
    border-radius: 22px;
    padding: 22px 24px 18px;
    text-align: left;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 240px;
    position: relative;
    overflow: hidden;
}

/* Subtle accent gradient at top — fades to transparent. Strengthens on hover. */
.zc-shell .zc-home-card-glow {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, var(--card-accent) 0%, transparent 60%);
    opacity: .06;
    pointer-events: none;
    transition: opacity .25s ease;
}

.zc-shell .zc-home-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
    border-color: var(--card-accent);
}

.zc-shell .zc-home-card:hover .zc-home-card-glow {
    opacity: .14;
}

.zc-shell .zc-home-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--card-accent-bg);
    color: var(--card-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.zc-shell .zc-home-card-icon .material-symbols-outlined {
    font-size: 26px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

.zc-shell .zc-home-card-eyebrow {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--card-accent);
    position: relative;
    z-index: 1;
}

.zc-shell .zc-home-card-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--zc-text);
    line-height: 1.18;
    letter-spacing: -0.018em;
    position: relative;
    z-index: 1;
    margin-top: -4px;
}

.zc-shell .zc-home-card-desc {
    font-size: 13.5px;
    color: var(--zc-text-2);
    line-height: 1.55;
    flex: 1;
    /* Three-line clamp keeps card heights aligned across variable descriptions. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.zc-shell .zc-home-card-stats {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--zc-border);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--zc-text-3);
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    position: relative;
    z-index: 1;
}

.zc-shell .zc-home-card-stats b {
    color: var(--zc-text);
    font-weight: 800;
}

/* Arrow chevron — subtle by default, fills with accent on hover. */
.zc-shell .zc-home-card-arrow {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--zc-surface-2, rgba(0,0,0,.04));
    color: var(--zc-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    z-index: 1;
}

.zc-shell .zc-home-card-arrow .material-symbols-outlined {
    font-size: 18px;
}

.zc-shell .zc-home-card:hover .zc-home-card-arrow {
    background: var(--card-accent);
    color: #fff;
    transform: translateX(2px);
}

.zc-shell .zc-carousel-arrow {
    flex-shrink: 0;
    align-self: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--zc-surface);
    border: 1.5px solid var(--zc-text-3);
    color: var(--zc-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .12s;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.zc-shell .zc-carousel-arrow:hover {
    color: var(--zc-jade);
    background: var(--zc-surface);
    border-color: var(--zc-jade);
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.zc-shell .zc-carousel-arrow .material-symbols-outlined { font-size: 22px; }

@media (max-width: 880px) {
    .zc-shell .zc-module-row { grid-template-columns: 1fr; }
    /* Hide the arrows on stacked layout — vertical scrolling handles it. */
    .zc-shell .zc-carousel-arrow { display: none; }
}

.zc-shell .zc-module-card {
    background: var(--zc-surface);
    border: 1.5px solid var(--zc-border);
    border-radius: 22px;
    padding: 24px;
    transition: all .25s ease;
    box-shadow: var(--zc-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    min-height: 240px;
    position: relative;
    overflow: hidden;
    color: var(--zc-text);
    font-family: inherit;
    font-size: 14px;
}

.zc-shell .zc-module-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, var(--zc-accent, var(--zc-jade)) 0%, transparent 60%);
    opacity: .05;
    pointer-events: none;
    transition: opacity .25s;
}

.zc-shell .zc-module-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--zc-shadow-lg);
    border-color: var(--zc-accent, var(--zc-text-3));
}

.zc-shell .zc-module-card:hover::before { opacity: .12; }

.zc-shell .zc-module-card .zc-ico-wrap {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zc-accent-bg, var(--zc-jade-bg));
    color: var(--zc-accent, var(--zc-jade));
    font-size: 24px;
}

.zc-shell .zc-module-card .zc-ttl-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zc-shell .zc-module-card .zc-ns {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--zc-accent, var(--zc-jade));
}

.zc-shell .zc-module-card .zc-ttl {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.018em;
    line-height: 1.18;
    color: var(--zc-text);
}

.zc-shell .zc-module-card .zc-meta {
    font-size: 13.5px;
    color: var(--zc-text-2);
    line-height: 1.55;
    flex: 1;
}

.zc-shell .zc-module-card .zc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    padding-top: 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--zc-text-3);
}

.zc-shell .zc-module-card .zc-stats span b {
    color: var(--zc-text);
    font-weight: 800;
}

.zc-shell .zc-module-card.launch { --zc-accent: #EA580C; --zc-accent-bg: rgba(234, 88, 12, .1); }
.zc-shell .zc-module-card.run    { --zc-accent: var(--zc-tenant); --zc-accent-bg: var(--zc-tenant-bg); }
.zc-shell .zc-module-card.prove  { --zc-accent: var(--zc-jade); --zc-accent-bg: var(--zc-jade-bg); }

/* Chevron arrow on the top-right of each module card (matches the
   ZybronChatCanvas-TenantAdmin.html wireframe). Plays the same role as
   .open-arrow in the wireframe HTML — slides + colors-up on hover. */
.zc-shell .zc-module-card .zc-open-arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--zc-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--zc-text-3);
    transition: all .2s;
    font-size: 18px;
}
.zc-shell .zc-module-card:hover .zc-open-arrow {
    background: var(--zc-accent, var(--zc-jade));
    color: #fff;
    transform: translateX(2px);
}

/* Module card icon — Material Symbols glyph inside the .zc-ico-wrap tile. */
.zc-shell .zc-module-card .zc-ico-wrap .material-symbols-outlined {
    font-size: 28px;
    line-height: 1;
}

/* Cursor — module cards in the zen state are buttons that route to a skill. */
.zc-shell .zc-module-card { cursor: pointer; }

/* FOCUS SCRIM — appears when the dock enters Focus mode. Sits above canvas
   content (z 0) and below the dock (z 50), topbar (z 60), rail (z 80) so
   chrome stays lit while cards behind dim. Click drops the dock to Work. */
.zc-shell .zc-canvas-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .50);
    z-index: 45;
    cursor: pointer;
    animation: zc-scrim-fade-in .18s ease;
}

@keyframes zc-scrim-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* DOCK ==================================================================== */
.zc-shell .zc-dock-wrap {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(calc(-50% + var(--zc-rail-w) / 2));
    width: calc(100% - 64px);
    max-width: var(--zc-dock-w);
    /* Above expanded skill cards (which use z-index: 201) so the chat composer
       stays reachable even when a card is fullscreened. User can always type. */
    z-index: 220;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.zc-shell .zc-dock-wrap > * { pointer-events: auto; }

.zc-shell .zc-dock {
    position: relative;   /* anchor for the .zc-dock-collapse chevron */
    width: 100%;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 18px;
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Subtle lift only — the heavy shadow was casting a haze upward that
       read as a dim band over the bottom of the canvas content. */
    box-shadow: var(--zc-shadow-md);
}

/* Chat history — small scrolling transcript above the input.
   Per conops §3.1 the canvas IS the conversation history; this thread is a
   short-term back-and-forth view for the in-flight session. */
.zc-shell .zc-dock-history {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Reserve a stable scrollbar gutter so the bar has its own lane and the
       transcript width doesn't jump when it appears. Extra top padding keeps
       the first turn clear of the top-right toggle chevron. */
    padding: 8px 2px 4px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    transition: max-height .18s ease;
}

/* Three modes — Peek (last bit, ambient), Work (recent turns, multitasking;
   default + cap for auto-resize), Focus (full transcript with canvas scrim).
   Focus uses calc(100vh - 220px) to fill the viewport while leaving room for
   the topbar (~60px) and the dock input frame (~140px) so the user can type. */
/* Peek/Work use `max-height` so the pane shrinks to fit content (ambient
   feel — small chat → small box). Focus uses both `min-height` and
   `max-height` so it always feels modal/intentional but never pushes past
   the viewport: 50vh floor for visual weight, capped well above the input
   frame so the composer stays on-screen. */
.zc-shell .zc-dock-history.zc-history-peek  { max-height: 36px; }
/* Work height is admin-editable (SiteTheme.ChatWorkHeight, default 200px) —
   the old 88px truncated even a single paragraph. See ZybronChatCanvas.md §3.5. */
.zc-shell .zc-dock-history.zc-history-work  { max-height: var(--zc-work-h, 200px); }
.zc-shell .zc-dock-history.zc-history-focus {
    min-height: 50vh;
    max-height: calc(100vh - 240px);
}

/* Dock-size selector — three borderless bar glyphs sitting in the topbar
   identity area. No frame, no segmented-control border; just the bars.
   Hover/active highlight via background tint only. */
.zc-shell .zc-dock-modes {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    margin-right: 8px;
}

.zc-shell .zc-dock-mode {
    width: 24px;     /* match the 24px grid column so size + position rows align column-by-column */
    height: 22px;
    background: transparent;
    color: var(--zc-text-3);
    border: none;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    border-radius: 4px;
    transition: color .12s, opacity .12s;
}

/* Hover: just bring the bar up to full text color — no background fill, so
   the bars stay clean. */
.zc-shell .zc-dock-mode:hover:not(.is-active) {
    color: var(--zc-text-2);
}

/* Active: brand jade on the bar itself, no background tint. The active
   selection reads instantly without any grey-box chrome competing with it. */
.zc-shell .zc-dock-mode.is-active {
    color: var(--zc-jade);
}

/* Mobile — drop the Peek pill (no canvas to recede behind on phone) and
   bump the remaining Work/Focus buttons to closer-to-44pt tap targets so
   fingers reliably hit the right one. */
@media (max-width: 640px) {
    .zc-shell .zc-dock-modes { gap: 4px; }
    .zc-shell .zc-dock-mode-peek { display: none; }
    .zc-shell .zc-dock-mode {
        width: 36px;
        height: 36px;
        font-size: 20px;
        padding-bottom: 4px;
    }
}

.zc-shell .zc-dock-history::-webkit-scrollbar {
    width: 4px;
}

.zc-shell .zc-dock-history::-webkit-scrollbar-thumb {
    background: var(--zc-border);
    border-radius: 2px;
}

.zc-shell .zc-turn {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

.zc-shell .zc-turn.user {
    /* Row-reverse puts the avatar on the right and the bubble grows to its
       natural width to the left of the avatar — no align-self collapse. */
    flex-direction: row-reverse;
}

.zc-shell .zc-turn-avatar {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 6px;
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.zc-shell .zc-turn.tzib .zc-turn-avatar {
    background: linear-gradient(135deg, var(--zc-jade), #0AC07F);
    /* "Tzib" is wider than 2-letter initials — let the chip grow horizontally. */
    width: auto;
    min-width: 24px;
    padding: 0 6px;
}

/* User-side avatar is intentionally not rendered — bubble color +
   row-reverse alignment carry the role identity. */

.zc-shell .zc-turn-bubble {
    /* Bubble takes its natural content width up to 75% of the row.
       Long words wrap normally; URLs and code break only when they overflow. */
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--zc-text);
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.zc-shell .zc-turn.user .zc-turn-bubble {
    background: var(--zc-tenant-bg);
    border-color: var(--zc-tenant-ring);
}

/* ── Debug-mode bubble variants ─────────────────────────────────────────
   Surfaced only when AppState.IsDebugMode is true (Debug button toggles it).
   Each kind gets a tiny uppercase tag and a distinct tint so backend traffic
   is scannable without dominating real Tzib responses. */

.zc-shell .zc-turn-kind-tag {
    display: inline-block;
    font-family: var(--zc-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
    opacity: .7;
}

.zc-shell .zc-turn.kind-debug .zc-turn-bubble,
.zc-shell .zc-turn.kind-thinking .zc-turn-bubble {
    background: rgba(122, 133, 153, 0.08);
    border-color: var(--zc-border);
    color: var(--zc-text-3);
    font-family: var(--zc-mono);
    font-size: 11.5px;
    line-height: 1.4;
}
.zc-shell .zc-turn.kind-thinking .zc-turn-bubble { font-style: italic; }

.zc-shell .zc-turn.kind-ai-trace .zc-turn-bubble,
.zc-shell .zc-turn.kind-mind-trace .zc-turn-bubble {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.22);
    color: var(--zc-text-2);
    font-family: var(--zc-mono);
    font-size: 11.5px;
    line-height: 1.4;
}

.zc-shell .zc-turn.kind-ai-trace .zc-turn-kind-tag {
    background: rgba(37, 99, 235, 0.18);
    color: var(--zc-blue);
}

.zc-shell .zc-turn.kind-mind-trace .zc-turn-kind-tag {
    background: var(--zc-jade-bg);
    color: var(--zc-jade);
}

.zc-shell .zc-turn.kind-system .zc-turn-bubble {
    background: var(--zc-amber-bg);
    border-color: rgba(245, 158, 11, 0.32);
    color: var(--zc-text);
}

.zc-shell .zc-turn.kind-system .zc-turn-kind-tag {
    background: rgba(245, 158, 11, 0.22);
    color: var(--zc-amber);
}

.zc-shell .zc-turn.kind-error .zc-turn-bubble {
    background: var(--zc-red-bg);
    border-color: rgba(220, 53, 69, 0.32);
    color: var(--zc-red);
}

.zc-shell .zc-turn.kind-error .zc-turn-kind-tag {
    background: rgba(220, 53, 69, 0.22);
    color: var(--zc-red);
}

/* Active state on rail buttons — used by the Debug button when ON */
.zc-shell .zc-rail-btn.active {
    background: var(--zc-jade-bg);
    color: var(--zc-jade);
}

/* Active state on dock buttons — VAD ON, PTT recording */
.zc-shell .zc-ibtn.active {
    background: var(--zc-jade-bg);
    color: var(--zc-jade);
}

/* ── Pending file chips (Tier 1C) ───────────────────────────────────── */
.zc-shell .zc-pending-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px 2px;
}

.zc-shell .zc-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 8px;
    border-radius: var(--zc-r-pill);
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    font-size: 11px;
    color: var(--zc-text);
    max-width: 240px;
}

.zc-shell .zc-file-chip .zc-file-icon {
    font-size: 14px;
    color: var(--zc-text-3);
}

.zc-shell .zc-file-chip .zc-file-name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.zc-shell .zc-file-chip .zc-file-size {
    font-size: 10px;
    color: var(--zc-text-3);
    font-variant-numeric: tabular-nums;
}

.zc-shell .zc-file-chip .zc-file-x {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--zc-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    padding: 0;
}

.zc-shell .zc-file-chip .zc-file-x:hover {
    background: var(--zc-red-bg);
    color: var(--zc-red);
}

.zc-shell .zc-file-chip .zc-file-x .material-symbols-outlined {
    font-size: 12px;
}

/* ── Markdown bubble content (Tier 1B) ──────────────────────────────────
   Same look as Chatbox.razor's .md-content, scoped to the dock so the
   dock-history bubbles render headings, lists, code blocks, etc. */

.zc-shell .zc-turn-bubble {
    position: relative;
}

.zc-shell .zc-turn-bubble .md-content {
    font-size: 13px;
    line-height: 1.5;
    color: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.zc-shell .zc-turn-bubble .md-content > *:first-child { margin-top: 0; }
.zc-shell .zc-turn-bubble .md-content > *:last-child  { margin-bottom: 0; }

.zc-shell .zc-turn-bubble .md-content p {
    margin: 6px 0;
}

.zc-shell .zc-turn-bubble .md-content h1,
.zc-shell .zc-turn-bubble .md-content h2,
.zc-shell .zc-turn-bubble .md-content h3,
.zc-shell .zc-turn-bubble .md-content h4 {
    margin: 10px 0 6px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--md-heading, var(--zc-text));
}
.zc-shell .zc-turn-bubble .md-content h1 { font-size: 1.35em; }
.zc-shell .zc-turn-bubble .md-content h2 { font-size: 1.2em; }
.zc-shell .zc-turn-bubble .md-content h3 { font-size: 1.08em; }
.zc-shell .zc-turn-bubble .md-content h4 { font-size: 1em; }

.zc-shell .zc-turn-bubble .md-content strong { font-weight: 800; }
.zc-shell .zc-turn-bubble .md-content em     { font-style: italic; }

.zc-shell .zc-turn-bubble .md-content a {
    color: var(--md-link, var(--zc-tenant));
    text-decoration: underline;
    text-underline-offset: 2px;
}
.zc-shell .zc-turn-bubble .md-content a:hover {
    color: var(--md-link-hover, var(--zc-tenant));
}

.zc-shell .zc-turn-bubble .md-content ul,
.zc-shell .zc-turn-bubble .md-content ol {
    margin: 6px 0;
    padding-left: 22px;
}
.zc-shell .zc-turn-bubble .md-content li { margin: 2px 0; }

.zc-shell .zc-turn-bubble .md-content code {
    font-family: var(--zc-mono);
    font-size: .9em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--md-inline-code-bg, var(--zc-surface-2));
    color: var(--md-inline-code-text, var(--zc-jade));
    border: 1px solid var(--zc-border);
}

.zc-shell .zc-turn-bubble .md-content pre {
    position: relative;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--code-block-bg, var(--zc-bg-2));
    border: 1px solid var(--code-block-border, var(--zc-border));
    overflow-x: auto;
    font-family: var(--zc-mono);
    font-size: 12px;
    line-height: 1.5;
}

.zc-shell .zc-turn-bubble .md-content pre code {
    padding: 0;
    background: transparent;
    border: none;
    color: var(--code-block-text, var(--zc-text));
    font-size: inherit;
}

.zc-shell .zc-turn-bubble .md-content blockquote {
    margin: 8px 0;
    padding: 4px 12px;
    border-left: 3px solid var(--md-blockquote-border, var(--zc-jade));
    background: var(--md-blockquote-bg, var(--zc-surface-2));
    color: var(--md-blockquote-text, var(--zc-text-2));
    border-radius: 4px;
}

.zc-shell .zc-turn-bubble .md-content table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
}
.zc-shell .zc-turn-bubble .md-content th,
.zc-shell .zc-turn-bubble .md-content td {
    padding: 4px 8px;
    border: 1px solid var(--md-table-border, var(--zc-border));
}
.zc-shell .zc-turn-bubble .md-content th {
    background: var(--md-table-header-bg, var(--zc-surface-2));
    font-weight: 700;
}

.zc-shell .zc-turn-bubble .md-content hr {
    border: none;
    border-top: 1px solid var(--md-hr, var(--zc-border));
    margin: 10px 0;
}

/* Code block copy button — added by chat.js addCodeCopyButtons.
   Reuses the existing .code-copy-btn class so chat.js doesn't have to know
   we're inside a different shell. Always visible (low opacity), full opacity
   on pre-hover, jade flash when copied. */
.zc-shell .zc-turn-bubble .md-content pre .code-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    background: var(--code-copy-btn-bg, var(--zc-surface-2));
    color: var(--zc-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s, color .15s, background .15s;
    z-index: 2;
}
.zc-shell .zc-turn-bubble .md-content pre:hover .code-copy-btn { opacity: 1; }
.zc-shell .zc-turn-bubble .md-content pre .code-copy-btn:hover {
    color: var(--zc-text);
    background: var(--zc-surface);
    opacity: 1;
}
.zc-shell .zc-turn-bubble .md-content pre .code-copy-btn.copied {
    background: var(--code-copy-btn-success, var(--zc-jade-bg));
    color: var(--zc-jade);
    opacity: 1;
}
.zc-shell .zc-turn-bubble .md-content pre .code-copy-btn svg {
    width: 14px;
    height: 14px;
}

/* Same per-code-block copy button styling, scoped to the GeneralResponse
   card body (the chat-bubble selector above doesn't reach inside skill
   cards). Without this, chat.js attaches the buttons but they render as
   default browser buttons with no positioning and end up invisible. */
.zc-shell .zc-genresp-body pre {
    position: relative;
}
.zc-shell .zc-genresp-body pre .code-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    background: var(--code-copy-btn-bg, var(--zc-surface-2));
    color: var(--zc-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Default opacity raised from .55 so users see the button without having
       to hover-discover it. Chat bubbles can stay subtler; cards are a
       larger reading surface where the copy affordance should be obvious. */
    opacity: .85;
    transition: opacity .15s, color .15s, background .15s, transform .15s;
    z-index: 2;
}
.zc-shell .zc-genresp-body pre:hover .code-copy-btn { opacity: 1; transform: scale(1.05); }
.zc-shell .zc-genresp-body pre .code-copy-btn:hover {
    color: var(--zc-text);
    background: var(--zc-surface);
    opacity: 1;
}
.zc-shell .zc-genresp-body pre .code-copy-btn.copied {
    background: var(--code-copy-btn-success, var(--zc-jade-bg));
    color: var(--zc-jade);
    opacity: 1;
}
.zc-shell .zc-genresp-body pre .code-copy-btn svg {
    width: 14px;
    height: 14px;
}

/* Expanded-mode breathing room for the GeneralResponse card —
   in compact view the card chrome already pads via .zc-skill-card-body
   (14/18px), but at full size the markdown content (esp. wide code
   blocks) reads cramped against the card edge. Add an extra inset so
   code blocks have visible margin all around, and pre's get a little
   more internal padding for readability at large sizes. */
.zc-shell .zc-skill-card.is-expanded .zc-genresp {
    padding: 8px 12px;
}
.zc-shell .zc-skill-card.is-expanded .zc-genresp-body {
    padding-right: 12px;
}
.zc-shell .zc-skill-card.is-expanded .zc-genresp-body pre {
    padding: 14px 16px;
}

/* Bubble-level copy button — appears on Tzib bubbles only on hover */
.zc-shell .zc-turn.tzib .zc-turn-bubble .zc-bubble-copy {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    background: var(--zc-surface-2);
    color: var(--zc-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, color .15s;
}
.zc-shell .zc-turn.tzib .zc-turn-bubble:hover .zc-bubble-copy { opacity: .85; }
.zc-shell .zc-turn.tzib .zc-turn-bubble .zc-bubble-copy:hover {
    color: var(--zc-text);
    opacity: 1;
}
.zc-shell .zc-turn.tzib .zc-turn-bubble .zc-bubble-copy.copied {
    background: var(--zc-jade-bg);
    color: var(--zc-jade);
    opacity: 1;
}
.zc-shell .zc-turn.tzib .zc-turn-bubble .zc-bubble-copy .material-symbols-outlined {
    font-size: 13px;
}

/* Typing indicator — three pulsing dots while waiting on Tzib */
.zc-shell .zc-turn-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
}

.zc-shell .zc-turn-typing span:not(.zc-thinking-label) {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zc-text-3);
    animation: zc-typing 1.2s infinite ease-in-out;
}

.zc-shell .zc-turn-typing span:not(.zc-thinking-label):nth-child(2) { animation-delay: .2s; }
.zc-shell .zc-turn-typing span:not(.zc-thinking-label):nth-child(3) { animation-delay: .4s; }

@keyframes zc-typing {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-2px); }
}

/* ThinkingMessage label — sits next to the typing dots while the pipeline runs.
   Backend sends "Routing…" / "Synthesizing…" / etc. translated for the user's locale. */
.zc-shell .zc-thinking-label {
    margin-left: .6rem;
    font-size: .8rem;
    color: var(--text-muted, #888);
    font-style: italic;
}

/* Stop button (replaces Send while a Tzib reply is in flight). */
.zc-shell .zc-ibtn.zc-stop {
    color: var(--accent-danger, #d33);
}
.zc-shell .zc-ibtn.zc-stop:hover {
    background: rgba(221, 51, 51, .08);
}

/* Identity block (§3.1) — right side of the topbar. Stacks the chat session
   title above the active folio (if any). Admin debug toggle reveals two
   monospace pills below with the raw SessionId + FolioId GUIDs. */
.zc-shell .zc-identity-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 4px 10px;
    margin-left: .5rem;
    border-radius: 12px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    max-width: 340px;
    line-height: 1.1;
}

.zc-shell .zc-identity-row {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}
.zc-shell .zc-identity-row .material-symbols-outlined {
    font-size: 14px;
    color: var(--zc-text-3);
    flex-shrink: 0;
}

.zc-shell .zc-identity-title {
    color: var(--zc-text);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.zc-shell .zc-identity-folio {
    color: var(--accent, #4a78ff);
    font-size: 11px;
    font-weight: 500;
}
.zc-shell .zc-identity-folio-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.zc-shell .zc-identity-folio-x {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0 0 0 2px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    opacity: .6;
}
.zc-shell .zc-identity-folio-x:hover { opacity: 1; }
.zc-shell .zc-identity-folio-x .material-symbols-outlined {
    font-size: 13px;
    color: inherit;
}

/* Debug pills — only render when admin Debug is on. Compact monospace
   chips so the GUIDs are visually contained instead of bleeding into prose. */
.zc-shell .zc-identity-debug {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-top: 2px;
}
.zc-shell .zc-debug-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--zc-bg-2);
    border: 1px solid var(--zc-border);
    font-family: var(--zc-mono);
    font-size: 9px;
    line-height: 1.4;
    color: var(--zc-text-3);
    max-width: 280px;
}
.zc-shell .zc-debug-pill-label {
    color: var(--zc-text-3);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.zc-shell .zc-debug-pill-val {
    color: var(--zc-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On phone the identity block competes with the hamburger + brand —
   shrink so it doesn't overflow the viewport, drop debug pills entirely. */
@media (max-width: 640px) {
    .zc-shell .zc-identity-block { max-width: 200px; margin-left: .25rem; padding: 3px 8px; }
    .zc-shell .zc-identity-title { max-width: 150px; font-size: 12px; }
    .zc-shell .zc-identity-folio-name { max-width: 130px; }
    .zc-shell .zc-identity-debug { display: none; }
}

/* Language-code badge on the rail Language button — small chip overlaid
   on the icon (e.g. "EN", "ES"). The drawer label already says
   "Language · EN" so the badge is mainly a desktop affordance. */
.zc-shell .zc-rail-btn-lang {
    position: relative;
}
.zc-shell .zc-rail-lang-code {
    position: absolute;
    bottom: 1px;
    right: 1px;
    background: var(--zc-tenant, var(--zc-jade));
    color: #ffffff;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    padding: 2px 3px;
    border-radius: 4px;
    pointer-events: none;
}

/* Tier D-1 — file chips inside a bubble (download links). */
.zc-shell .zc-bubble-files {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .55rem;
}
.zc-shell .zc-file-chip-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .55rem;
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    border-radius: 999px;
    background: var(--surface-elev1, rgba(255,255,255,.6));
    cursor: pointer;
    color: inherit;
    font: inherit;
    line-height: 1;
}
.zc-shell .zc-file-chip-link:hover {
    background: var(--accent-tint, rgba(80,130,255,.08));
    border-color: var(--accent, #4a78ff);
}

/* Tier D-2 — inline HTMLFragment iframe inside a bubble. */
.zc-shell .zc-bubble-html {
    display: block;
    width: 100%;
    min-height: 200px;
    margin-top: .55rem;
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    border-radius: .5rem;
    background: #fff;
}

/* Tier F-2/F-3 — VAD strip with state-driven glow ring. */
.zc-shell .zc-vad-strip {
    display: flex; align-items: center; justify-content: space-between;
    padding: .45rem .8rem;
    margin: 0 0 .55rem 0;
    border-radius: .6rem;
    background: var(--surface-elev1, rgba(255,255,255,.6));
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    transition: box-shadow .25s ease, border-color .25s ease;
}
.zc-shell .zc-vad-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; }
.zc-shell .zc-vad-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent, #4a78ff);
    box-shadow: 0 0 0 0 currentColor;
    animation: zc-vad-pulse 1.4s infinite ease-out;
}
.zc-shell .zc-vad-actions { display: inline-flex; gap: .35rem; }
.zc-shell .zc-vad-glow.zc-vad-state-listening {
    border-color: #2ea043;
    box-shadow: 0 0 0 3px rgba(46,160,67,.15);
}
.zc-shell .zc-vad-glow.zc-vad-state-listening .zc-vad-dot { background: #2ea043; color: #2ea043; }

.zc-shell .zc-vad-glow.zc-vad-state-speaking {
    border-color: #4a78ff;
    box-shadow: 0 0 0 3px rgba(80,130,255,.18);
}
.zc-shell .zc-vad-glow.zc-vad-state-speaking .zc-vad-dot { background: #4a78ff; color: #4a78ff; }

.zc-shell .zc-vad-glow.zc-vad-state-processing {
    border-color: #c97a00;
    box-shadow: 0 0 0 3px rgba(201,122,0,.15);
}
.zc-shell .zc-vad-glow.zc-vad-state-processing .zc-vad-dot { background: #c97a00; color: #c97a00; }

@keyframes zc-vad-pulse {
    0%   { box-shadow: 0 0 0 0   currentColor; }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0   transparent; }
}

/* Tier E-1 — drag-and-drop overlay over the input frame. */
.zc-shell .zc-input-frame { position: relative; }
.zc-shell .zc-input-frame.drag-over {
    outline: 2px dashed var(--accent, #4a78ff);
    outline-offset: -4px;
}
.zc-shell .zc-drag-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    gap: .5rem;
    background: rgba(80, 130, 255, .08);
    color: var(--accent, #4a78ff);
    font-weight: 600;
    pointer-events: none;
    border-radius: inherit;
    z-index: 5;
}

/* Tier E-4 — Add-to-Library toggle on each pending file chip. */
/* Add-to-Library toggle on file chips (Tier E-4). Mirrors Classic Chatbox's
   .add-to-library-toggle — same jade-green active state, same hover affordance,
   visible "Add to Library" label so the action is discoverable. */
.zc-shell .zc-file-lib {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--zc-text-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    margin: 0 .1rem 0 .2rem;
    border-radius: 4px;
    font-size: 11px;
    transition: color .15s ease, background .15s ease;
}
.zc-shell .zc-file-lib:hover {
    color: var(--brand-jade, var(--zc-jade));
    background: var(--zc-jade-bg);
}
.zc-shell .zc-file-lib.active {
    color: var(--brand-jade, var(--zc-jade));
}
.zc-shell .zc-file-lib .material-symbols-outlined { font-size: 1rem; }
.zc-shell .zc-file-lib-text { white-space: nowrap; }

/* Tier E-4 — PTT transcribing spinner (replaces the mic icon while waiting for the recognizer). */
.zc-shell .zc-ptt-spinner {
    display: inline-flex; gap: 3px; align-items: center;
}
.zc-shell .zc-ptt-spinner span {
    width: 4px; height: 4px; border-radius: 50%;
    background: currentColor;
    animation: zc-ptt-pulse 900ms infinite ease-in-out;
}
.zc-shell .zc-ptt-spinner span:nth-child(2) { animation-delay: .15s; }
.zc-shell .zc-ptt-spinner span:nth-child(3) { animation-delay: .30s; }
@keyframes zc-ptt-pulse {
    0%, 80%, 100% { opacity: .25; transform: scale(.85); }
    40%           { opacity: 1;   transform: scale(1.15); }
}
.zc-shell .zc-ibtn.transcribing { color: var(--accent, #4a78ff); }

/* Tier D-3 — ContentSource verification pill on Tzib bubbles.
   Solid backgrounds + white text — mirrors Chatbox.razor's .content-source.
   Sits at the top of the bubble, before the markdown content. */
.zc-shell .zc-content-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
}
.zc-shell .zc-content-source .material-symbols-outlined {
    font-size: 12px;
    color: inherit;
}
.zc-shell .zc-cs-validatedknowledge {
    background: #0BB36C;        /* solid green — "Verified" */
}
.zc-shell .zc-cs-mixed {
    background: #3B82F6;        /* solid blue — "Verified+AI" */
}
.zc-shell .zc-cs-generated {
    background: #4B5563;        /* solid grey — "AI" */
}

/* Input frame — two rows: textarea on top, button strip below.
   Mirrors the Classic Chatbox .chat-input-frame structure. */
.zc-shell .zc-input-frame {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 12px;
    padding: 6px 8px 8px;
    transition: border-color .15s, box-shadow .15s;
}

.zc-shell .zc-input-frame:focus-within {
    border-color: var(--zc-tenant);
    box-shadow: 0 0 0 3px var(--zc-tenant-ring);
}

/* Button strip — left group / right group, justified */
.zc-shell .zc-input-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.zc-shell .zc-input-buttons-left,
.zc-shell .zc-input-buttons-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Tzib | GPT segmented toggle */
.zc-shell .zc-mode-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-r-pill);
    padding: 2px;
    margin-right: 4px;
}

.zc-shell .zc-mode-label {
    padding: 4px 10px;
    border-radius: var(--zc-r-pill);
    font-size: 11px;
    font-weight: 700;
    color: var(--zc-text-3);
    transition: all .12s;
    line-height: 1;
}

.zc-shell .zc-mode-label:hover {
    color: var(--zc-text);
}

.zc-shell .zc-mode-label.active {
    background: var(--zc-tenant);
    color: var(--btn-primary-text, #fff);
}

.zc-shell .zc-ibtn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    color: var(--zc-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    padding: 0;
}

.zc-shell .zc-ibtn:hover:not(:disabled) {
    background: var(--zc-surface);
    color: var(--zc-text);
}

.zc-shell .zc-ibtn:disabled {
    cursor: not-allowed;
    opacity: .4;
}

.zc-shell .zc-ibtn svg {
    width: 16px;
    height: 16px;
}

/* Material symbol sizing inside dock buttons — keep them visually aligned with svg buttons */
.zc-shell .zc-ibtn .material-symbols-outlined {
    font-size: 18px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.zc-shell .zc-ibtn.zc-send {
    background: var(--zc-tenant);
    color: #fff;
}

.zc-shell .zc-ibtn.zc-send:hover:not(:disabled) {
    background: #009966;
    color: #fff;
}

.zc-shell .zc-ibtn.zc-send:disabled {
    background: var(--zc-surface-3);
    color: var(--zc-text-4);
}

/* Textarea sized to match Classic Chatbox (.chat-input) so the dock feels familiar */
.zc-shell .zc-dock-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--zc-text);
    resize: none;
    padding: 8px 6px;
    min-height: 40px;
    max-height: 200px;
    line-height: 20px;
    box-sizing: border-box;
}

.zc-shell .zc-dock-input::placeholder { color: var(--zc-text-3); }

/* Disabled state while ChatCanvas Stage 4 is still creating the MIND session.
   Subtle pulse on the placeholder keeps the user oriented without making the
   dock feel broken. */
.zc-shell .zc-dock-input-pending {
    opacity: 0.6;
    cursor: progress;
}
.zc-shell .zc-dock-input-pending::placeholder {
    animation: zc-dock-pending-pulse 1.4s ease-in-out infinite;
}
@keyframes zc-dock-pending-pulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1.0; }
}

/* RESPONSIVE ==============================================================
   Phone breakpoint: rail collapses out of the grid into a slide-in drawer
   triggered by the hamburger in the topbar. Dock spans full width.
   ========================================================================= */

/* Hamburger toggle — desktop hidden by default; revealed below 640px. */
.zc-shell .zc-rail-toggle {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--zc-text);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s;
}
.zc-shell .zc-rail-toggle:hover { background: var(--zc-surface-2); }
.zc-shell .zc-rail-toggle .material-symbols-outlined { font-size: 24px; }

/* Rail close-X — only visible inside the drawer on phone. Hidden on desktop. */
.zc-shell .zc-rail-close {
    display: none;
}

/* Rail-button text labels — hidden on desktop (icon-only rail).
   Revealed in drawer mode at ≤640px. */
.zc-shell .zc-rail-label {
    display: none;
}

/* Rail scrim — only used in drawer mode. Component renders it conditionally. */
.zc-shell .zc-rail-scrim {
    display: none;
}

@media (max-width: 640px) {
    /* Shell collapses to one column — rail leaves the grid flow. */
    .zc-shell {
        grid-template-columns: 1fr;
        --zc-rail-w: 240px;
    }

    /* Rail becomes a fixed slide-in drawer with text labels alongside icons. */
    .zc-shell .zc-rail {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 240px;
        max-width: 80vw;
        align-items: stretch;
        padding: 8px 12px;
        transform: translateX(-100%);
        transition: transform .22s ease-out, box-shadow .22s ease-out;
        z-index: 250;
    }
    .zc-shell .zc-rail.zc-rail-open {
        transform: translateX(0);
        box-shadow: var(--zc-shadow-lg);
    }

    /* Show the scrim when the drawer is open (component mounts the element). */
    .zc-shell .zc-rail-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--dialog-overlay, rgba(0, 0, 0, .55));
        z-index: 240;
        animation: zc-fade-in .12s ease-out;
    }

    /* Reveal the hamburger and close-X. */
    .zc-shell .zc-rail-toggle { display: inline-flex; }
    .zc-shell .zc-rail-close {
        display: inline-flex;
        align-self: flex-end;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        color: var(--zc-text-3);
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
        transition: background .12s, color .12s;
    }
    .zc-shell .zc-rail-close:hover {
        background: var(--zc-surface-2);
        color: var(--zc-text);
    }
    .zc-shell .zc-rail-close .material-symbols-outlined { font-size: 22px; }

    /* Buttons become full-width rows: icon left, label right. */
    .zc-shell .zc-rail-logo,
    .zc-shell .zc-rail-btn,
    .zc-shell .zc-rail-avatar {
        width: 100%;
        height: 44px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 10px;
        border-radius: 10px;
    }

    /* Logo gets its brand text alongside the mark when open. */
    .zc-shell .zc-rail-logo .zc-rail-img,
    .zc-shell .zc-rail-logo .zc-rail-mark {
        flex-shrink: 0;
    }

    /* Reveal labels in drawer mode. */
    .zc-shell .zc-rail-label {
        display: inline;
        font-size: 13px;
        font-weight: 600;
        color: var(--zc-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Section headers left-aligned with consistent indent. */
    .zc-shell .zc-rail-section {
        align-self: flex-start;
        padding-left: 10px;
    }

    .zc-shell .zc-canvas-inner { padding: 20px 16px 220px; }
    .zc-shell .zc-topbar { padding: 0 12px; gap: 8px; }
    .zc-shell .zc-dock-wrap {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        transform: none;
    }

    /* Picker modals (tenant, language, history) get more vertical room and
       tighter side padding on phone — denser lists, fewer rows hidden behind
       the scroll fold. */
    .zc-shell .zc-modal-overlay { padding: 16px 8px; }
    .zc-shell .zc-modal-panel { max-height: 90vh; }
}

/* ================================================================
   SKILL CARDS — adaptive (one component, four contexts)
   Per ZybronChatCanvas conops §5.6.5: same Razor + same DOM, the
   .is-compact / .is-expanded wrapper class drives layout. Mobile
   media queries handle the iPhone variants of each.
   ================================================================ */

.zc-shell .zc-skill-cards-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--zc-strip-gap, 14px);
    /* Margin replaced with padding — overflow-x:auto implicitly clips
       vertical content in most engines, so card shadows + rounded corners
       were getting cut off at top/bottom of each card. Padding gives them
       breathing room inside the same scroll container. */
    margin: 0;
    padding: 18px 0;
    width: 100%;
    /* Was 1140px — clamped two cards at ~1256px on wide displays even with
       plenty of empty canvas to the right. Let the strip fill the full
       canvas-inner width; the per-card clamp (~610px max) still keeps any
       single card from going absurd, and overflow-x handles >3-card cases. */
    max-width: 100%;
    overflow-x: auto;
    /* Explicitly allow vertical overflow so card shadows / focus rings
       aren't clipped — overrides the implicit clip from overflow-x:auto. */
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    /* Hide scrollbar but keep functionality — the bar would clip card shadows
       and visually compete with the dock. Wheel + drag still scroll fine. */
    scrollbar-width: none;
}
.zc-shell .zc-skill-cards-strip::-webkit-scrollbar { display: none; }
.zc-shell .zc-skill-cards-strip > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

/* Carousel wrapper injected by chat.js so the prev/next arrows overlay
   the strip edges without joining its flex row. Arrows are hidden until
   the strip actually overflows, and at-start / at-end states fade the
   relevant arrow so the user gets a clear "no more this way" signal. */
.zc-shell .zc-strip-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
}
.zc-shell .zc-strip-wrap > .zc-skill-cards-strip {
    /* When wrapped, the strip takes the parent's width — drop its own
       max-width so the wrap controls the column. */
    max-width: 100%;
}
.zc-shell .zc-strip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.zc-shell .zc-strip-arrow-prev { left: -8px; }
.zc-shell .zc-strip-arrow-next { right: -8px; }
.zc-shell .zc-strip-wrap.has-overflow .zc-strip-arrow {
    opacity: 0.85;
    pointer-events: auto;
}
.zc-shell .zc-strip-wrap.has-overflow .zc-strip-arrow:hover { opacity: 1; }
/* Override the carousel-arrow hover transform: that rule sets `scale(1.05)`
   alone, which clobbers the `translateY(-50%)` we use to vertically center
   the strip arrows. Combine both transforms so the arrow grows in place
   instead of snapping down to top:50%. */
.zc-shell .zc-strip-arrow:hover {
    transform: translateY(-50%) scale(1.05);
}
.zc-shell .zc-strip-wrap.at-start .zc-strip-arrow-prev,
.zc-shell .zc-strip-wrap.at-end   .zc-strip-arrow-next {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 640px) {
    /* On mobile, native horizontal pan + (CSS-driven) column stack handle
       it — hide arrows so they don't clip card edges. */
    .zc-shell .zc-strip-arrow { display: none; }
}

/* When only one card is open, center it horizontally on the canvas. The
   single card becomes the focal point — paired with the dock below to
   form a clear card↔chat reading flow. */
.zc-shell .zc-skill-cards-strip.is-solo {
    justify-content: center;
    margin: 36px auto 24px auto;
}

/* Active card focus — when the strip is solo, the card gets a stronger
   shadow + accent rim so the eye lands on it. Bridges the visual gap to
   the dock where the user types responses. */
.zc-shell .zc-skill-cards-strip.is-solo .zc-skill-card.is-compact {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22),
                0 0 0 1px rgba(255, 255, 255, 0.06),
                0 0 0 2px rgba(255, 196, 84, 0.16);
}

/* =================================================================
   GATHER CARD — generalized renderer styles (global, not scoped)
   See ZybronSkillDefs.md v1.1 §"Skill Card Pattern"
   ================================================================= */

.zc-gather-empty {
    color: var(--zc-text-muted, #9aa6b2);
    font-style: italic;
    padding: 14px 6px;
    font-size: 13px;
}

/* Active prompt banner — the ONE focal question right now. Sits at top so
   the eye lands here first, then the user types in the dock below. */
.zc-gather-active-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 18px 0;
    border-radius: 10px;
    background: linear-gradient(135deg,
        rgba(255, 196, 84, 0.16) 0%,
        rgba(255, 196, 84, 0.05) 100%);
    border-left: 4px solid var(--zc-warn, #ffc454);
    animation: zc-banner-rise 240ms ease-out;
}

.zc-gather-active-tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--zc-warn, #ffc454);
    background: rgba(255, 196, 84, 0.20);
    margin-top: 2px;
    white-space: nowrap;
}

.zc-gather-active-prompt {
    flex: 1;
    color: var(--zc-text, #1a2330);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.55;
}

@keyframes zc-banner-rise {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Subtle separator between banner and the variable list */
.zc-gather-separator {
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        var(--zc-border) 20%,
        var(--zc-border) 80%,
        transparent 100%);
    margin: 0 0 16px 0;
}

/* ─── AI Picker ──────────────────────────────────────────────────
   Rendered above the variable rows when a skill opts in via
   Validation.Provider = "<Module>.Picker" (currently folio.browse only).
   The hero block is the single high-confidence pick; the list below
   surfaces ranked alternatives, each with a one-line LLM-written reason. */
.zc-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(60, 100, 180, 0.04);
    border: 1px solid rgba(60, 100, 180, 0.15);
    border-radius: 10px;
    margin-bottom: 12px;
}
.zc-picker-heading {
    font-weight: 600;
    font-size: 13px;
    color: var(--zc-text, #222);
}
.zc-picker-echo {
    font-size: 12px;
    color: var(--zc-text-muted, #666);
    font-style: italic;
    margin-top: -2px;
}
.zc-picker-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--zc-bg, #fff);
    border: 1px solid rgba(60, 100, 180, 0.35);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 120ms ease, transform 80ms ease;
}
.zc-picker-hero:hover {
    border-color: rgba(60, 100, 180, 0.7);
}
.zc-picker-hero:active { transform: translateY(1px); }
.zc-picker-hero-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zc-picker-hero-code {
    font-family: var(--zc-mono, monospace);
    font-size: 12px;
    background: var(--zc-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
}
.zc-picker-hero-title {
    font-weight: 600;
    font-size: 14px;
}
.zc-picker-hero-reason {
    font-size: 12px;
    color: var(--zc-text-muted, #555);
}
.zc-picker-hero-cta {
    align-self: flex-end;
    font-size: 12px;
    color: rgb(60, 100, 180);
    font-weight: 600;
}
.zc-picker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Bound the candidate list so a long pool (8+ folios) doesn't push the
       card past the chat container and end up overlapping the chat input.
       Scroll the list internally instead. ~360px holds 5-6 rows before
       scrolling kicks in — enough to be useful, small enough to keep the
       footer + input visible on a standard chat width. */
    max-height: 360px;
    overflow-y: auto;
    /* Keep the inner scrollbar out of the way so it doesn't crowd the row
       content. Falls back to platform default if these CSS vars aren't set. */
    scrollbar-width: thin;
    scrollbar-color: var(--zc-border, rgba(120, 130, 150, 0.3)) transparent;
}
.zc-picker-list::-webkit-scrollbar { width: 6px; }
.zc-picker-list::-webkit-scrollbar-track { background: transparent; }
.zc-picker-list::-webkit-scrollbar-thumb {
    background-color: var(--zc-border, rgba(120, 130, 150, 0.3));
    border-radius: 3px;
}

.zc-picker-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    /* Visible row separator so candidates don't blur into a wall of text. */
    border: 1px solid transparent;
    background-color: var(--zc-surface-2);
}
.zc-picker-row:hover {
    background-color: rgba(60, 140, 200, 0.12);
    border-color: rgba(60, 140, 200, 0.35);
}
.zc-picker-row:active {
    transform: translateY(1px);
    background-color: rgba(60, 140, 200, 0.18);
}
.zc-picker-row:focus-visible {
    outline: 2px solid var(--brand-jade, #00D68F);
    outline-offset: 1px;
}
.zc-picker-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zc-picker-row-code {
    font-family: var(--zc-mono, monospace);
    font-size: 11px;
    background: var(--zc-surface-2);
    padding: 1px 5px;
    border-radius: 3px;
}
.zc-picker-row-title { font-weight: 500; font-size: 13px; }
.zc-picker-row-reason {
    font-size: 12px;
    color: var(--zc-text-muted, #666);
    padding-left: 4px;
}
.zc-picker-kind, .zc-picker-status {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 10px;
    padding: 1px 7px;
}
.zc-picker-kind {
    color: var(--zc-text-muted, #666);
    background: var(--zc-surface-2);
}
.zc-picker-status {
    color: rgba(150, 100, 0, 0.85);
    background: rgba(220, 160, 0, 0.12);
}
.zc-picker-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--zc-border);
    margin-top: 4px;
}
.zc-picker-foot-pill {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--zc-surface-2);
    color: var(--zc-text-muted, #666);
    padding: 2px 8px;
    border-radius: 10px;
}
.zc-picker-foot-pill.is-on {
    background: rgba(60, 100, 180, 0.12);
    color: rgb(60, 100, 180);
}
.zc-picker-foot-hint {
    font-size: 11px;
    color: var(--zc-text-muted, #888);
    flex: 1;
}
.zc-picker-foot-link {
    background: none;
    border: none;
    padding: 0;
    color: rgb(60, 100, 180);
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
}
.zc-picker-foot-link:hover { text-decoration: none; }

/* ─── Create-mode body (folio.resolve only) ─────────────────────── */
.zc-picker-create {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--zc-bg, #fff);
    border: 1px dashed rgba(60, 100, 180, 0.4);
    border-radius: 8px;
}
.zc-picker-create-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(60, 100, 180);
    font-weight: 600;
}
.zc-picker-create-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.zc-picker-create-field {
    display: flex;
    gap: 10px;
    align-items: baseline;
}
.zc-picker-create-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--zc-text-muted, #888);
    min-width: 50px;
}
.zc-picker-create-value {
    font-weight: 500;
    font-size: 14px;
}
.zc-picker-create-value.is-empty {
    color: var(--zc-text-muted, #aaa);
    font-style: italic;
    font-weight: 400;
}
.zc-picker-create-reason {
    font-size: 12px;
    color: var(--zc-text-muted, #666);
    font-style: italic;
}

/* ─── AskCreate proposal hero ────────────────────────────────────── */
.zc-picker-proposal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(220, 160, 0, 0.06);
    border: 1px solid rgba(220, 160, 0, 0.3);
    border-radius: 8px;
}
.zc-picker-proposal-q {
    font-size: 13px;
    color: var(--zc-text, #222);
}
.zc-picker-proposal-why {
    font-size: 11px;
    color: var(--zc-text-muted, #666);
    font-style: italic;
}
.zc-picker-proposal-actions {
    display: flex;
    gap: 8px;
}
.zc-picker-btn {
    border: 1px solid var(--zc-border);
    background: var(--zc-bg, #fff);
    color: var(--zc-text, #222);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.zc-picker-btn:hover { background: var(--zc-surface-2); }
.zc-picker-btn-primary {
    background: rgb(60, 100, 180);
    border-color: rgb(60, 100, 180);
    color: #fff;
}
.zc-picker-btn-primary:hover { background: rgb(50, 90, 170); }
.zc-picker-row.is-disabled { opacity: .5; pointer-events: none; }

/* ═══ FOLIO RESOLVE CARD ══════════════════════════════════════════
   Dedicated folio.resolve card — explicit "new vs. existing" gate.
   Reuses .zc-picker-list / .zc-picker-row / .zc-picker-kind etc. for the
   candidate picker; the rules below cover the gate, create form, and the
   resolved footer. All colors resolve through --zc-* canvas tokens. */
.zc-resolve { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.zc-resolve-head { display: flex; flex-direction: column; gap: 2px; }
.zc-resolve-title { font-weight: 700; font-size: 14px; color: var(--zc-text); }
.zc-resolve-prompt { font-size: 12px; color: var(--zc-text-muted); line-height: 1.35; }

/* Entry gate — two big choice buttons side by side (stacks on narrow). */
.zc-resolve-gate { display: flex; gap: 10px; flex-wrap: wrap; }
.zc-resolve-gate-btn {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px;
    border: 1px solid var(--zc-border);
    border-radius: 12px;
    background: var(--zc-surface-2);
    color: var(--zc-text);
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, background .12s;
}
.zc-resolve-gate-btn:hover {
    border-color: var(--zc-tone-violet);
    background: var(--zc-tone-violet-bg);
}
.zc-resolve-gate-btn .material-symbols-outlined { font-size: 22px; color: var(--zc-tone-violet); }
.zc-resolve-gate-label { font-weight: 600; font-size: 13px; }
.zc-resolve-gate-sub { font-size: 11px; color: var(--zc-text-muted); }

/* Create branch — name field + locked type. */
.zc-resolve-create, .zc-resolve-pick { display: flex; flex-direction: column; gap: 10px; }
.zc-resolve-field { display: flex; flex-direction: column; gap: 4px; }
.zc-resolve-field-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--zc-text-muted);
}
.zc-resolve-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--zc-border);
    border-radius: 8px;
    background: var(--zc-surface);
    color: var(--zc-text);
    font-size: 13px;
}
.zc-resolve-input:focus { outline: none; border-color: var(--zc-tone-violet); }
.zc-resolve-locked {
    font-size: 13px;
    font-weight: 600;
    color: var(--zc-text);
    padding: 6px 0;
}
.zc-resolve-locked-note { font-weight: 400; font-size: 11px; color: var(--zc-text-muted); }
.zc-resolve-actions { display: flex; justify-content: flex-end; gap: 8px; }
.zc-resolve-empty { font-size: 12px; color: var(--zc-text-muted); padding: 10px; text-align: center; }

/* Resolved footer. */
.zc-resolve-done { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.zc-resolve-done-icon { color: #22C55E; font-size: 22px; }
.zc-resolve-done-body { display: flex; flex-direction: column; gap: 4px; }
.zc-resolve-done-line { font-size: 13px; color: var(--zc-text); }

/* ─── Collaborate mode footer ────────────────────────────────────
   Card-side exit affordance for Collaborate Mode skills. Sits at the
   bottom of the gather card and posts the configured SyntheticMessage
   into the chat when clicked. */
.zc-gather-collaborate-foot {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px 4px;
    /* Pin the exit button to the bottom of the card. The card body is a
       fixed-height flex column, so margin-top:auto absorbs any free space
       above the foot — the Done button lands bottom-right on every card
       regardless of how much content it has (short Type/Audience cards
       match tall Objective/Schedule cards). */
    margin-top: auto;
    border-top: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
}
.zc-gather-collaborate-done {
    appearance: none;
    background: var(--accent, rgb(60, 100, 180));
    color: #fff;
    border: 1px solid var(--accent, rgb(60, 100, 180));
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.zc-gather-collaborate-done:hover { filter: brightness(0.92); }
.zc-gather-collaborate-done:active { filter: brightness(0.85); }

/* ─── Result footer ──────────────────────────────────────────────
   Shown after the post-gather Execute handler completes (e.g. folio.new
   wrote ZB-CM-0004). Confirms what was created so the user has closure. */
.zc-gather-result {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-top: 4px;
    background: rgba(40, 167, 69, 0.08);
    border: 1px solid rgba(40, 167, 69, 0.25);
    border-radius: 8px;
}
.zc-gather-result-check {
    color: #28a745;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}
.zc-gather-result-text { flex: 1; min-width: 0; }
.zc-gather-result-summary {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zc-gather-result-code {
    font-family: var(--zc-mono, monospace);
    font-size: 12px;
    background: var(--zc-surface-2);
    border-radius: 4px;
    padding: 1px 6px;
}
.zc-gather-result-kind {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--zc-text-muted, #666);
    background: var(--zc-surface-2);
    border-radius: 10px;
    padding: 1px 8px;
}
.zc-gather-result-detail {
    font-size: 13px;
    color: var(--zc-text-muted, #555);
    margin-top: 2px;
}

/* Numbered result list — pin numbers match the map markers. Tap a row to
   submit the pick to Tzib (same shape as map-pin clicks). Grows to fill
   the remaining card body and only scrolls when the list overflows the
   available height (typical: 5 rows fit without scroll on the compact
   card; long lists scroll). */
.zc-gather-result-items {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.zc-gather-result-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.zc-gather-result-item:hover,
.zc-gather-result-item:focus-visible {
    background: var(--zc-surface-3);
    border-color: var(--zc-jade);
    outline: none;
}
.zc-gather-result-item-num {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, #00D68F);
    color: var(--on-accent, #0b0f14);
    font-weight: 700;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.zc-gather-result-item-body { flex: 1; min-width: 0; }
.zc-gather-result-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 13px;
}
.zc-gather-result-item-rating {
    font-size: 11px;
    color: var(--warning, #fbbf24);
    font-weight: 500;
}
.zc-gather-result-item-subtitle {
    font-size: 12px;
    /* Bumped contrast — earlier version used 0.6 which faded the address
       into the card background in the 3-card layout where each column is
       narrow. The address should be readable at a glance. */
    color: var(--zc-text, rgba(255, 255, 255, 0.85));
    margin-top: 2px;
    /* Allow the address to wrap to a second line instead of disappearing
       behind an ellipsis when the card column is narrow. Two lines is
       enough for any street + city + state line; longer addresses still
       cap with ellipsis on the second line. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}
.zc-gather-result-item-detail {
    font-size: 11px;
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.72));
    margin-top: 3px;
}

/* ── Destination POI block (route navigation result) ─────────────────
   Replaces the "✓ Done" footer when a route is computed and the
   destination has Place Details. Google-Maps-ish layout: name + rating
   + open-now chips on top, address, action buttons (phone, website),
   collapsed hours. */
.zc-gather-destpoi {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zc-gather-destpoi-photo {
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 4px;
}
.zc-gather-destpoi-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zc-gather-destpoi-name {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    min-width: 0;
}
.zc-gather-destpoi-rating {
    font-size: 12px;
    color: var(--warning, #fbbf24);
    font-weight: 500;
}
.zc-gather-destpoi-open {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 500;
}
.zc-gather-destpoi-open.is-open {
    background: rgba(0, 214, 143, 0.15);
    color: var(--accent, #00D68F);
}
.zc-gather-destpoi-open.is-closed {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.zc-gather-destpoi-address {
    font-size: 12px;
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.65));
}
.zc-gather-destpoi-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.zc-gather-destpoi-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--info, #60a5fa);
    text-decoration: none;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    transition: background 120ms ease, border-color 120ms ease;
}
.zc-gather-destpoi-action:hover {
    background: var(--zc-surface-3);
    border-color: var(--zc-jade);
}
.zc-gather-destpoi-action .material-symbols-outlined { font-size: 14px; }
.zc-gather-destpoi-hours {
    font-size: 12px;
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.65));
    margin-top: 4px;
}
.zc-gather-destpoi-hours summary {
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}
.zc-gather-destpoi-hours ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 0 0 0 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Generic AI response card (GeneralResponse) ───────────────────
   The "show" surface for General-route answers with rich detail
   (code blocks, tables, structured lists). Re-uses the chat
   markdown CSS so syntax highlighting, copy buttons and code
   collapse all just work. */
.zc-genresp {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}
.zc-genresp-empty {
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.5));
    font-size: 12px;
    padding: 8px 4px;
}
.zc-genresp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.zc-genresp-kind {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.6));
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    padding: 2px 10px;
}
.zc-genresp-copy-all {
    /* Pin to the LEFT (next to the kind chip) so the SkillCard chrome's
       close X — which lives in the top-right corner in expanded mode —
       doesn't overlap. In compact mode there is no X so this just sits
       beside the chip; either way the right corner is reserved for chrome. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    color: var(--zc-text-muted, rgba(255, 255, 255, 0.7));
    background: transparent;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.zc-genresp-copy-all:hover {
    background: var(--zc-surface-2);
    border-color: var(--zc-jade);
    color: var(--zc-text);
}
.zc-genresp-copy-all.is-copied {
    background: var(--code-copy-btn-success, rgba(0, 214, 143, 0.15));
    border-color: var(--accent, #00D68F);
    color: var(--accent, #00D68F);
}
.zc-genresp-copy-all .material-symbols-outlined { font-size: 13px; }
.zc-genresp-body {
    font-size: 13px;
    color: var(--zc-text, rgba(255, 255, 255, 0.92));
    line-height: 1.55;
    overflow-x: auto;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 4px;
    overscroll-behavior: contain;
}
.zc-genresp-body > *:first-child { margin-top: 0; }
.zc-genresp-body > *:last-child { margin-bottom: 0; }
.zc-genresp-body pre {
    /* Match the chat-bubble code block (see `.zc-turn-bubble .md-content pre`):
       SOLID theme tokens, not the translucent --surface-1-alpha60 / --border-alpha15
       aliases. Those alpha tokens resolve to a near-white tint + a white-rgba
       border on the Light theme, so the box vanished against the white card
       (dark theme hid the bug because the same alphas read dark). --zc-bg-2
       (--surface-2) and --zc-border are real themed surfaces that contrast in
       both modes, giving the box a visible fill + outline everywhere. */
    background: var(--code-block-bg, var(--zc-bg-2));
    border: 1px solid var(--code-block-border, var(--zc-border));
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    font-size: 12px;
}
.zc-genresp-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.zc-genresp-body th,
.zc-genresp-body td {
    border: 1px solid var(--zc-border);
    padding: 6px 8px;
    text-align: left;
}
.zc-genresp-body th { background: var(--zc-surface-2); }
.zc-genresp-body ul,
.zc-genresp-body ol { padding-left: 1.25rem; }

/* ─── Variable rows ──────────────────────────────────────────────
   Layout: pill (left) | label + value stacked (right).
   The check / pill on the LEFT mirrors checklist UX — eye scans down
   the column to see what's done, what's pending. */

.zc-gather-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 18px 0;
    /* When the card has more rows than fit comfortably, scroll the rows section
       internally so the active-prompt banner stays visible at the top. The cap
       leaves room for the banner above + the card chrome around it; on shorter
       viewports the canvas-inner's overflow-y still picks up any remainder. */
    max-height: 56vh;
    overflow-y: auto;
    /* Small inset for the scrollbar so it doesn't crowd the row content. */
    padding-right: 4px;
    /* Hide horizontal scrollbar that could appear from the row's box-shadow. */
    overflow-x: hidden;
}

.zc-gather-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: start;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    transition: background-color 140ms ease, box-shadow 140ms ease;
    background: rgba(0, 0, 0, 0.02);
}

/* Per-state row backgrounds */
.zc-gather-row.is-untouched { background: rgba(0, 0, 0, 0.02); }
.zc-gather-row.is-drafting  { background: rgba(99, 168, 255, 0.10); }
.zc-gather-row.is-active    { background: rgba(255, 196, 84, 0.10); }
.zc-gather-row.is-in-edit   { background: rgba(99, 168, 255, 0.16); }
.zc-gather-row.is-confirmed { background: rgba(102, 217, 163, 0.07); }
.zc-gather-row.is-stale     { background: rgba(255, 152, 0, 0.12); }

/* The "Tzib is asking about THIS one right now" treatment. Strong accent
   so the eye finds it instantly — the pill on the left also pulses. */
.zc-gather-row.is-current {
    background: rgba(255, 196, 84, 0.20);
    box-shadow: inset 4px 0 0 0 var(--zc-warn, #ffc454);
    animation: zc-current-pulse 2.4s ease-in-out infinite;
}

.zc-gather-row.is-current .zc-gather-row-label {
    color: var(--zc-text, #1a2330);
    font-weight: 700;
}

@keyframes zc-current-pulse {
    0%, 100% { box-shadow: inset 4px 0 0 0 var(--zc-warn, #ffc454); }
    50%      { box-shadow: inset 4px 0 0 0 var(--zc-warn, #ffc454),
                          0 0 16px 0 rgba(255, 196, 84, 0.22); }
}

/* The pill column — sits in the 36px-wide left column */
.zc-gather-row-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding-top: 1px;
}

.zc-gather-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

.zc-pill-untouched {
    color: var(--zc-text-muted, #9aa6b2);
    background: transparent;
    font-weight: 400;
    opacity: 0.45;
    font-size: 14px;
}

.zc-pill-drafting {
    color: var(--zc-info, #2563eb);
    background: rgba(99, 168, 255, 0.18);
}

.zc-pill-active {
    color: var(--zc-warn, #b8860b);
    background: rgba(255, 196, 84, 0.22);
    box-shadow: 0 0 0 1px rgba(255, 196, 84, 0.40);
    padding: 0 10px;
    font-size: 11px;
}

.zc-pill-in-edit {
    color: var(--zc-info, #2563eb);
    background: rgba(99, 168, 255, 0.22);
    padding: 0 10px;
    font-size: 11px;
}

.zc-pill-confirmed {
    color: var(--zc-success, #15803d);
    background: rgba(102, 217, 163, 0.30);
    box-shadow: 0 0 0 1px rgba(102, 217, 163, 0.40);
}

.zc-pill-stale {
    color: var(--zc-warn-strong, #c2410c);
    background: rgba(255, 152, 0, 0.18);
    padding: 0 10px;
    font-size: 11px;
}

/* The label + value column — stacked vertically */
.zc-gather-row-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.zc-gather-row-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--zc-text-muted, #6b7785);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.zc-gather-row-value {
    color: var(--zc-text, #1a2330);
    font-size: 14px;
    line-height: 1.5;
}

.zc-gather-row-clickable {
    cursor: text;
    border-radius: 4px;
    padding: 1px 4px;
    margin: -1px -4px;
    transition: background-color 100ms ease;
}

.zc-gather-row-clickable:hover {
    background-color: var(--zc-hover, var(--zc-surface-2));
}

.zc-gather-row-empty {
    color: var(--zc-text-muted, #9aa6b2);
    opacity: 0.55;
    font-style: italic;
    font-size: 13px;
}

.zc-gather-row-text {
    display: inline-block;
    word-break: break-word;
    font-weight: 500;
}

.zc-gather-row-draft {
    margin: 0;
    padding: 8px 10px;
    background: var(--zc-surface-2);
    border-radius: 6px;
    font-family: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13.5px;
    line-height: 1.55;
}

.zc-gather-row-list {
    margin: 0;
    padding-left: 18px;
}

.zc-gather-row-list li {
    margin: 3px 0;
}

/* ─── Edit affordance: pencil icon visible on hover (and always on touch) ─ */

.zc-gather-row-value-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.zc-gather-row-value-wrap > :first-child {
    flex: 1;
    min-width: 0;
}

.zc-gather-row-edit-icon {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    color: var(--zc-text-muted, #9aa6b2);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-1px);
    transition: opacity 140ms ease, background-color 120ms ease, color 120ms ease;
}

.zc-gather-row:hover .zc-gather-row-edit-icon {
    opacity: 0.85;
}

.zc-gather-row-edit-icon:hover {
    background: rgba(99, 168, 255, 0.14);
    color: var(--zc-info, #2563eb);
    opacity: 1 !important;
}

/* On touch devices AND on narrow viewports (squeezed desktop simulating
   iPhone), hover is unreliable — keep the pencil always visible so the
   affordance is discoverable. */
@media (hover: none), (pointer: coarse), (max-width: 640px) {
    .zc-gather-row-edit-icon { opacity: 0.6; }
}

/* ─── Inline edit input (Slice 1.3) ───────────────────────────────────── */

.zc-gather-row-edit-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1.5px solid var(--zc-info, #2563eb);
    background: var(--zc-surface, #fff);
    color: var(--zc-text, #1a2330);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 168, 255, 0.16);
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

.zc-gather-row-edit-input:focus {
    border-color: var(--zc-accent, #4a90e2);
    box-shadow: 0 0 0 3px rgba(99, 168, 255, 0.28);
}

.zc-gather-row-edit-textarea {
    resize: vertical;
    min-height: 70px;
    max-height: 240px;
}

.zc-gather-row-edit-hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--zc-text-muted, #9aa6b2);
}

.zc-gather-row-edit-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 1.4;
    margin: 0 1px;
}

/* Save / Cancel buttons inside the edit row — required for mobile (no Enter/Esc). */
.zc-gather-row-edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.zc-gather-row-edit-btn {
    appearance: none;
    border: 0;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 100ms ease, transform 60ms ease, background-color 120ms ease;
}

.zc-gather-row-edit-btn-save {
    background: var(--zc-accent, #4a90e2);
    color: var(--zc-accent-fg, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.zc-gather-row-edit-btn-save:hover { background: var(--zc-accent-hover, #3a7bc8); }
.zc-gather-row-edit-btn-save:active { transform: translateY(1px); }

.zc-gather-row-edit-btn-cancel {
    background: transparent;
    color: var(--zc-text-muted, #6b7785);
    border: 1px solid var(--zc-border);
}

.zc-gather-row-edit-btn-cancel:hover {
    background: var(--zc-surface-2);
    color: var(--zc-text, #1a2330);
}

/* Hide the keyboard-shortcut hint on touch devices AND on narrow viewports
   (squeezed desktop windows simulating iPhone — pointer is still fine, but
   the screen-real-estate justification holds). The Save / Cancel buttons
   cover them either way. */
@media (hover: none), (pointer: coarse), (max-width: 640px) {
    .zc-gather-row-edit-hint { display: none; }
}

/* Typing dots for the Drafting state */
.zc-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.zc-typing-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    animation: zc-typing-bounce 1.2s infinite ease-in-out;
}

.zc-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.zc-typing-dots span:nth-child(3) { animation-delay: 0.30s; }

@keyframes zc-typing-bounce {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1.0; transform: translateY(-2px); }
}

/* Footer / primary action */
.zc-gather-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 2px 0;
    border-top: 1px solid var(--zc-border);
    margin-top: 8px;
}

.zc-gather-primary {
    appearance: none;
    border: 0;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--zc-accent, #4a90e2);
    color: var(--zc-accent-fg, #fff);
    transition: opacity 120ms ease, background-color 120ms ease, transform 60ms ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.zc-gather-primary:hover:not(:disabled) {
    background: var(--zc-accent-hover, #3a7bc8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.zc-gather-primary:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.zc-gather-primary:disabled {
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Frame: compact (default — sits on the canvas strip) ──────── */
.zc-shell .zc-skill-card.is-compact {
    /* Fluid sizing — uses available canvas real estate without breaking on
       narrow or huge screens, and capped so the card never extends under
       the dock (~200px reserved at the bottom).
         width  = clamp(480px, 40vw, 720px)
         height = fills available canvas height up to 680px
       Mobile (≤640px) overrides below. */
    /* Sized 15% smaller than the previous footprint — applied to width, the
       preferred vw value, the max cap, and the height clamp values. Bottom
       reservation unchanged (still clears the dock); the card just occupies
       less of the available canvas.
       --zc-scale (admin-editable, SiteTheme.CanvasScale, default 0.9) is a
       master multiplier on the card footprint — ships the "90%" density that
       read better in use. See ZybronChatCanvas.md §3.5.3. */
    width: clamp(calc(410px * var(--zc-scale, 0.9)), calc(34vw * var(--zc-scale, 0.9)), calc(610px * var(--zc-scale, 0.9)));
    flex: 0 0 auto;
    height: clamp(375px, calc((100vh - 320px) * 0.85), 510px);
    background: var(--zc-surface);
    /* Match the dock chrome (.zc-dock) so cards read with the same lift +
       border weight regardless of theme. On dark theme this is barely
       noticeable; on light theme it gives the cards visible boundaries
       against the near-white canvas. */
    border: 1px solid var(--zc-border);
    border-radius: 18px;
    padding: var(--zc-card-pad, 16px);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    box-shadow: var(--zc-shadow-md);
    color: var(--zc-text);
    display: flex;
    flex-direction: column;
}

/* Forward the flex chain through the shell so the body (and map) grow to
   fill the card's height. Without this, the map stays at min-height and
   leaves empty space at the bottom of the card. */
.zc-shell .zc-skill-card.is-compact .zc-skill-card-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.zc-shell .zc-skill-card.is-compact:hover {
    transform: translateY(-2px);
    box-shadow: var(--zc-shadow-md);
    border-color: var(--zc-text-3);
}

/* ── Frame: expanded (fullscreen overlay) ─────────────────────── */
.zc-shell .zc-skill-card.is-expanded {
    cursor: default;
    /* The card itself becomes a fixed positioning container; .zc-skill-card-shell
       inside is the visible expanded panel. */
}
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-shell {
    position: fixed;
    /* Nearly full-screen — small inset all around, just enough room at the
       bottom to keep the chat dock + composer visible. User can adjust the
       input box independently. */
    top: 70px;
    left: 4vw;
    right: 4vw;
    bottom: 24px;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 18px;
    box-shadow: var(--zc-shadow-lg);
    z-index: 201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
/* No scrim in expanded mode — card sits above canvas without dimming, so the
   user keeps full visibility + control of the dock. Class kept (no-op) in case
   any old markup references it. */
.zc-shell .zc-skill-card-scrim { display: none; }

/* ── Header (compact + expanded both render it; CSS varies padding) ── */
.zc-shell .zc-skill-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-header {
    margin-bottom: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--zc-border);
}
.zc-shell .zc-skill-card-title {
    font-weight: 700;
    font-size: var(--zc-card-title, 12px);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zc-text-2);
}
.zc-shell .zc-skill-card-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zc-jade);
    animation: zc-pulse-dot 1.2s ease-in-out infinite;
}
@keyframes zc-pulse-dot {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1.0; }
}
.zc-shell .zc-skill-card-close,
.zc-shell .zc-skill-card-expand,
.zc-shell .zc-skill-card-dismiss {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--zc-text-3);
    border-radius: 6px;
    padding: 4px;
    display: inline-flex;
}
/* First control in the header group gets the auto margin so the whole group
   sits right; siblings tuck in beside it (no per-button auto, or they'd each
   force their own gap). */
.zc-shell .zc-skill-card-close,
.zc-shell .zc-skill-card-expand { margin-left: auto; }
.zc-shell .zc-skill-card-close:hover,
.zc-shell .zc-skill-card-expand:hover,
.zc-shell .zc-skill-card-dismiss:hover { color: var(--zc-text); background: var(--zc-surface-2); }
/* Match the header title's compact icon scale. */
.zc-shell .zc-skill-card-expand .material-symbols-outlined,
.zc-shell .zc-skill-card-dismiss .material-symbols-outlined { font-size: 18px; }

/* Body — flex column so the map can expand to fill available space */
.zc-shell .zc-skill-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Expanded card body: NO outer scroll. Let inner content (e.g. the tab body
   inside LibraryDocumentDetail) own the scrolling so sticky headers / tab
   strips / download buttons stay visible while only the content area scrolls.
   Cards that need a single-scroll wrapper can override per-card. */
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-body {
    padding: 20px 28px 24px;
    overflow: hidden;
    min-height: 0;
}
/* Inner tab content (e.g. LibraryDocumentDetail) often sets its own min-width
   to force a baseline layout in compact mode. In expanded mode the card fills
   the viewport, so relax that constraint AND let children expand to fill the
   available height — the card has fixed size, the inner scroll lives inside. */
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-body > * {
    min-width: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
/* The list/browse cards carry no inner padding of their own in expanded — the
   chrome body padding above is the single, uniform inset so Library, Knowledge
   and Folio line up identically. Library's root sets an inline compact padding,
   so override it here (Knowledge's root has none; Folio is handled in its own
   rule). */
.zc-shell .zc-skill-card.is-expanded .zc-libdoclist { padding: 0 !important; }

/* Status visuals — three lifecycle states surface on the card frame:
     Pending → soft pulsing jade glow (Tzib is materializing this card)
     Active  → steady soft glow (eye lands here; it's the focus)
     Done    → dimmed + desaturated (completed; no longer the focus). No dashed
               border — the dim contrast is enough to communicate "finished".

   When several cards are on the canvas at once, `.is-active` makes the live
   one stand out and `.is-done` quiets the rest. */

.zc-shell .zc-skill-card.is-pending {
    border-color: var(--zc-jade);
    animation: zc-pulse 1.6s ease-in-out infinite;
}

.zc-shell .zc-skill-card.is-active {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14),
                0 0 0 1px rgba(255, 255, 255, 0.06),
                0 0 0 3px rgba(0, 214, 143, 0.18),
                0 0 22px 0 rgba(0, 214, 143, 0.10);
    transition: box-shadow 240ms ease, opacity 240ms ease;
}

.zc-shell .zc-skill-card.is-done {
    opacity: 0.62;
    filter: saturate(0.85);
    transition: opacity 240ms ease, filter 240ms ease;
}

.zc-shell .zc-skill-card.is-done:hover {
    opacity: 0.92;
    filter: none;
}

@keyframes zc-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 214, 143, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 214, 143, 0.18); }
}

/* ── Tablet / squeezed window: stack vertical, fluid width ────── */
/* !important + overflow-x: hidden on the inner scroller as a safety net.
   With more than one card, the desktop card width clamp(410px, ...) wins on
   width via stacking-context details, leaving the strip in row-direction
   with horizontal overflow. The !important + overflow-x:hidden combo
   guarantees a vertical scroll at narrow widths regardless of which rule
   wins the cascade race. */
@media (max-width: 1024px) {
    /* Header chrome cleanup at narrow widths — the dock-position pills
       (left/center/right) don't apply since the dock is bottom-only at this
       size, and Peek mode is awkward without canvas room. Only Work + Focus
       are useful. The .zc-dock-controls > selector beats the `display: contents`
       rule at line 3196 (which has higher specificity than a bare class
       selector). */
    .zc-shell .zc-dock-controls .zc-dock-positions { display: none !important; }
    .zc-shell .zc-dock-modes .zc-dock-mode-peek { display: none !important; }

    .zc-shell .zc-canvas-inner {
        overflow-x: hidden;
    }
    .zc-shell .zc-skill-cards-strip {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 12px;
        padding: 0 16px;
        max-width: 100% !important;
        overflow-x: hidden;
    }
    .zc-shell .zc-skill-cards-strip.is-solo {
        margin: 24px auto 16px auto;
        justify-content: flex-start;
    }
    .zc-shell .zc-skill-card.is-compact {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;     /* don't let flex shrink/grow the card height */
        height: auto !important;
        max-height: none !important;   /* let content drive height; canvas-inner scrolls */
        min-height: 0 !important;
    }
    .zc-shell .zc-skill-card.is-compact .zc-skill-card-body {
        overflow: visible;             /* belt + suspenders against any inherited clip */
    }
}

/* Non-expandable cards: no pointer cursor, no hover lift. The GatherCard sets
   Expandable=false; nothing to expand to (all content already visible inline). */
.zc-shell .zc-skill-card.is-not-expandable {
    cursor: default;
}
.zc-shell .zc-skill-card.is-not-expandable:hover {
    transform: none;
    box-shadow: var(--zc-shadow-sm);
    border-color: var(--zc-border);
}

/* ── Mobile (iPhone-sized): full-width, tighter padding, smaller glow ── */
/* Header chrome cleanup is handled by the 1024px block above so it kicks in
   for tablet/squeezed-window cases too, not just true mobile. */
@media (max-width: 640px) {
    .zc-shell .zc-skill-cards-strip {
        gap: 10px;
        padding: 0 12px;
        margin: 16px 0;
    }
    .zc-shell .zc-skill-cards-strip.is-solo {
        margin: 16px auto 12px auto;
        padding: 0 12px;
    }
    .zc-shell .zc-skill-card.is-compact {
        width: 100% !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 14px;
        border-radius: 14px;
    }

    /* Active glow scales down on mobile so it doesn't bleed into edges */
    .zc-shell .zc-skill-card.is-active {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12),
                    0 0 0 2px rgba(0, 214, 143, 0.18);
    }
    .zc-shell .zc-skill-cards-strip.is-solo .zc-skill-card.is-compact {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14),
                    0 0 0 2px rgba(255, 196, 84, 0.20);
    }

    /* Expanded card: fullscreen except for the dock at the bottom */
    .zc-shell .zc-skill-card.is-expanded .zc-skill-card-shell {
        top: 0; left: 0; right: 0; bottom: 140px;
        border-radius: 0;
    }

    /* Gather card rows: tighter padding, single-column-friendly */
    .zc-gather-rows {
        gap: 8px;
    }
    .zc-gather-row {
        grid-template-columns: 28px 1fr;
        gap: 10px;
        padding: 10px;
    }
    .zc-gather-active-banner {
        padding: 10px 12px;
        margin-bottom: 14px;
        font-size: 13.5px;
    }
    .zc-gather-active-tag {
        font-size: 9.5px;
        padding: 2px 7px;
    }
}

/* ================================================================
   ATLAS TRIP CARD — content (one render; CSS adapts per context)
   ================================================================ */

.zc-shell .atlas-trip-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 10px;
}

/* Summary: endpoints + meta + status. Compact = tight; expanded = breathes. */
.zc-shell .atlas-trip-card-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zc-shell .atlas-trip-card-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--zc-text-2);
    font-size: 13px;
    font-style: italic;
}
.zc-shell .atlas-trip-card-status .material-symbols-outlined {
    font-size: 16px;
    color: var(--zc-jade);
    animation: zc-spin 2s linear infinite;
}
@keyframes zc-spin {
    from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}

.zc-shell .atlas-trip-card-endpoints {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.zc-shell .atlas-trip-card-endpoints > div {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.zc-shell .atlas-trip-card-endpoints .material-symbols-outlined {
    font-size: 16px;
    color: var(--zc-jade);
}

/* Destination POI inline block — rating / open-now / phone / website /
   today's hours under the destination endpoint when PlaceDetails resolved.
   Indented to align with the place text above (icon column + gap). */
.zc-shell .atlas-trip-card-dest-poi {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-left: 22px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--zc-text-2);
    align-items: center !important;
}
.zc-shell .atlas-trip-card-dest-poi .material-symbols-outlined {
    font-size: 13px;
    color: var(--zc-text-3);
}
.zc-shell .atlas-trip-card-dest-rating { color: #FBBF24; font-weight: 600; }
.zc-shell .atlas-trip-card-dest-openstate {
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
}
.zc-shell .atlas-trip-card-dest-openstate.is-open  { background: rgba(0, 214, 143, 0.16); color: #00D68F; }
.zc-shell .atlas-trip-card-dest-openstate.is-closed{ background: rgba(239, 68, 68, 0.16); color: #EF4444; }
.zc-shell .atlas-trip-card-dest-phone,
.zc-shell .atlas-trip-card-dest-website {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--zc-text-2);
    text-decoration: none;
}
.zc-shell .atlas-trip-card-dest-phone:hover,
.zc-shell .atlas-trip-card-dest-website:hover { color: var(--zc-text); text-decoration: underline; }
.zc-shell .atlas-trip-card-dest-hours { color: var(--zc-text-3); }

.zc-shell .atlas-trip-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12px;
    color: var(--zc-text-2);
    padding-top: 6px;
    border-top: 1px solid var(--zc-border);
}
.zc-shell .atlas-trip-card-meta b { color: var(--zc-text); }
.zc-shell .atlas-trip-card-via { color: var(--zc-text-3); }
.zc-shell .atlas-trip-card-altpill {
    margin-left: auto;
    background: var(--zc-surface-2);
    color: var(--zc-text-3);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

/* Per-leg color legend for multi-modal trips (walk → bus → rail → walk).
   Each chip's swatch resolves from --route-color-{mode} so it always matches
   the polyline drawn on the map. */
.zc-shell .atlas-trip-card-leglegend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding-top: 6px;
}
.zc-shell .atlas-trip-card-legchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    padding: 2px 8px 2px 6px;
    font-size: 11px;
    color: var(--zc-text-2);
    line-height: 1.5;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.zc-shell .atlas-trip-card-legchip:hover {
    background: var(--zc-surface-3, var(--zc-surface-2));
    border-color: var(--zc-text-3);
    transform: translateY(-1px);
}
.zc-shell .atlas-trip-card-legchip:active {
    transform: translateY(0);
}
.zc-shell .atlas-trip-card-legchip:focus-visible {
    outline: 2px solid var(--zc-accent, var(--zc-text-2));
    outline-offset: 2px;
}
.zc-shell .atlas-trip-card-legchip-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--zc-border);
}
.zc-shell .atlas-trip-card-legchip-label {
    font-weight: 600;
    color: var(--zc-text);
}
.zc-shell .atlas-trip-card-legchip-dist {
    color: var(--zc-text-3);
}

/* Inline replan feedback — shown when a mode switch + Get Route returns
   nothing useful (e.g. transit requested but no transit reaches the
   destination). Stays visible until the next successful replan. */
.zc-shell .atlas-trip-card-replan-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--zc-text-2);
    line-height: 1.45;
}
.zc-shell .atlas-trip-card-replan-notice .material-symbols-outlined {
    font-size: 16px;
    color: var(--zc-text-3);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Map — fills available vertical space. Compact: bounded; expanded: flex. */
.zc-shell .atlas-trip-card-map {
    flex: 1;
    /* Compact: map gets the bulk of the card's vertical real estate. The
       summary header above is small (~80px); 320px floor here means the
       map is always the dominant element, never visually cramped. */
    min-height: 320px;
    background: var(--zc-surface-2);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-map { min-height: 280px; }
.zc-shell .atlas-trip-card-map > .atlas-map-container { width: 100%; height: 100%; }

/* Alternatives — hidden in compact, shown in expanded */
.zc-shell .atlas-trip-card-alternatives { display: none; }
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-alternatives {
    display: block;
    margin-top: 4px;
}
.zc-shell .atlas-trip-card-alternatives h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zc-text-2);
    margin: 0 0 8px;
}
.zc-shell .atlas-trip-card-alt {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--zc-border);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}
.zc-shell .atlas-trip-card-alt b { color: var(--zc-text); }

/* Mobile: tighter map height in compact, beefier in expanded */
@media (max-width: 640px) {
    .zc-shell .atlas-trip-card-map { min-height: 180px; }
    .zc-shell .zc-skill-card.is-expanded .atlas-trip-card-map { min-height: 50vh; }
}

/* ── Atlas trip card — directions drawer (expanded only) ───────── */

/* Compact: drawer + TMC header hidden; card uses single-column flex (summary on top, map). */
.zc-shell .zc-skill-card.is-compact .atlas-trip-card-drawer { display: none; }
.zc-shell .zc-skill-card.is-compact .atlas-trip-card-tmc    { display: none; }

/* Expanded: TMC bar across the top, then 2-column grid — drawer left (320px),
   summary + map on the right. Endpoints in the right summary are hidden in
   expanded since the drawer already shows them. */
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "tmc      tmc"
        "drawer   summary"
        "drawer   map";
    gap: 0;
    height: 100%;
}
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-tmc     { grid-area: tmc; }
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-drawer  { grid-area: drawer; }
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-summary { grid-area: summary; padding: 12px 18px; border-bottom: 1px solid var(--zc-border); }
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-map     { grid-area: map; border-radius: 0; min-height: 0; }

/* Hide the entire top summary in expanded — endpoints live in the drawer,
   meta lives in the floating pill on the map. Compact still uses the
   summary block since there's no drawer there. */
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card-summary { display: none; }
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card {
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "tmc      tmc"
        "drawer   map";
}

.zc-shell .atlas-trip-card-drawer {
    background: var(--zc-surface-2);
    border-right: 1px solid var(--zc-border);
    overflow-y: auto;
    padding: 12px 14px;
}
.zc-shell .atlas-trip-card-drawer header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.zc-shell .atlas-trip-card-drawer header span {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zc-text-2);
}

.zc-shell .atlas-trip-card-stops {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.zc-shell .atlas-trip-card-stop {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 10px;
    padding: 10px 12px;
}
.zc-shell .atlas-trip-card-stop-letter {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--zc-text-3);
}
.zc-shell .atlas-trip-card-stop.origin      .atlas-trip-card-stop-letter { background: var(--zc-jade); }
.zc-shell .atlas-trip-card-stop.waypoint    .atlas-trip-card-stop-letter { background: #F59E0B; }
.zc-shell .atlas-trip-card-stop.destination .atlas-trip-card-stop-letter { background: #DC2626; }

.zc-shell .atlas-trip-card-stop-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.zc-shell .atlas-trip-card-stop-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--zc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zc-shell .atlas-trip-card-stop-addr {
    font-size: 11px;
    color: var(--zc-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zc-shell .atlas-trip-card-drawer-alts {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--zc-border);
}
.zc-shell .atlas-trip-card-drawer-alts h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zc-text-3);
    margin: 0 0 8px;
}

/* Mobile expanded — drawer collapses to top instead of side */
@media (max-width: 640px) {
    .zc-shell .zc-skill-card.is-expanded .atlas-trip-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "summary"
            "drawer"
            "map";
    }
    .zc-shell .atlas-trip-card-drawer {
        max-height: 30vh;
        border-right: none;
        border-bottom: 1px solid var(--zc-border);
    }
}

/* ── Atlas trip card — TMC-style top header (expanded only) ───── */

.zc-shell .atlas-trip-card-tmc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--zc-surface);
    border-bottom: 1px solid var(--zc-border);
    min-height: 48px;
}

.zc-shell .atlas-trip-card-tmc-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .12em;
    color: var(--zc-text);
    flex-shrink: 0;
}
.zc-shell .atlas-trip-card-tmc-brand .material-symbols-outlined {
    font-size: 22px;
    color: var(--zc-jade);
}

.zc-shell .atlas-trip-card-tmc-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    padding: 4px 12px;
    height: 32px;
    max-width: 520px;
}
.zc-shell .atlas-trip-card-tmc-search .material-symbols-outlined {
    font-size: 18px;
    color: var(--zc-text-3);
}
.zc-shell .atlas-trip-card-tmc-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--zc-text-2);
    cursor: not-allowed;
}
.zc-shell .atlas-trip-card-tmc-search input::placeholder { color: var(--zc-text-3); }

/* ── Mode pills (display-only, mirrors legacy Drive/Bike/Walk/Transit row) ── */
.zc-shell .atlas-trip-card-modes {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.zc-shell .atlas-trip-card-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--zc-text-3);
}
.zc-shell .atlas-trip-card-mode .material-symbols-outlined {
    font-size: 14px;
}
.zc-shell .atlas-trip-card-mode.is-active {
    background: var(--zc-jade-bg);
    border-color: var(--zc-jade);
    color: var(--zc-jade);
}
/* Disabled when a prior replan proved this mode has no route for the
   current origin/destination pair. Stays clickable-looking just enough
   to read, but visibly inert; the inline notice + native tooltip carry
   the "why". Reset when a new trip Payload arrives. */
.zc-shell .atlas-trip-card-mode:disabled,
.zc-shell .atlas-trip-card-mode.is-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto;     /* keep title tooltip visible on hover */
    background: var(--zc-surface-2);
    border-color: var(--zc-border);
    color: var(--zc-text-3);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Mobile expanded — TMC header full-width above stacked drawer + map */
@media (max-width: 640px) {
    .zc-shell .zc-skill-card.is-expanded .atlas-trip-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas:
            "tmc"
            "summary"
            "drawer"
            "map";
    }
    .zc-shell .atlas-trip-card-tmc { padding: 8px 12px; }
    .zc-shell .atlas-trip-card-tmc-search { display: none; }  /* save space */
}

/* ── Expanded SkillCard — hide title strip; ATLAS bar is the header ── */

/* Header collapses to zero height. The X close button floats top-right
   so the user can dismiss without the dedicated header strip. */
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-header {
    border-bottom: none;
    padding: 0;
    margin: 0;
    height: 0;
    min-height: 0;
}
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-title,
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-status-dot { display: none; }
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 10;
    background: var(--zc-surface-2);
    border: 1px solid var(--zc-border);
}
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-close:hover {
    background: var(--zc-surface);
    color: var(--zc-text);
}
/* Body padding off in expanded ONLY for the Atlas trip card — its grid + embedded
   full-bleed map own their spacing. Scoped via :has() so it no longer clobbers
   the inner padding (set on `.is-expanded .zc-skill-card-body` above) for every
   other card. Without this scope, Library / Knowledge / Folio / GeneralResponse
   expanded views ran edge-to-edge with no padding. */
.zc-shell .zc-skill-card.is-expanded .zc-skill-card-body:has(.atlas-trip-card) { padding: 0; overflow: hidden; }

/* ── Atlas drawer — restyled to mimic legacy directions panel ── */

/* Stops as input rows (legacy look) */
.zc-shell .atlas-trip-card-stops {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zc-shell .atlas-trip-card-stop {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
}
.zc-shell .atlas-trip-card-stop-input {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 8px;
    padding-right: 4px;
}
.zc-shell .atlas-trip-card-stop-input input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    padding: 7px 10px;
    color: var(--zc-text);
    cursor: default;
    min-width: 0;
}
.zc-shell .atlas-trip-card-stop-action {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--zc-text-3);
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
}
.zc-shell .atlas-trip-card-stop-action:hover { color: var(--zc-text); background: var(--zc-surface-2); }
.zc-shell .atlas-trip-card-stop-action .material-symbols-outlined { font-size: 16px; }

.zc-shell .atlas-trip-card-add-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    border: 1px dashed var(--zc-border);
    border-radius: 8px;
    background: transparent;
    color: var(--zc-text-3);
    font-size: 12px;
    cursor: pointer;
    margin-top: 2px;
}
.zc-shell .atlas-trip-card-add-stop:hover { border-color: var(--zc-text-3); color: var(--zc-text-2); }
.zc-shell .atlas-trip-card-add-stop .material-symbols-outlined { font-size: 16px; }

/* Mode pills: inline horizontal, evenly distributed, no wrap */
.zc-shell .atlas-trip-card-modes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 14px 0 12px;
}
.zc-shell .atlas-trip-card-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--zc-text-3);
    overflow: hidden;
    white-space: nowrap;
}
.zc-shell .atlas-trip-card-mode .material-symbols-outlined { font-size: 14px; }
.zc-shell .atlas-trip-card-mode.is-active {
    background: var(--zc-jade-bg);
    border-color: var(--zc-jade);
    color: var(--zc-jade);
}

/* Get Route button — full-width jade primary */
.zc-shell .atlas-trip-card-get-route {
    width: 100%;
    background: var(--zc-jade);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 14px;
}
.zc-shell .atlas-trip-card-get-route .material-symbols-outlined { font-size: 18px; }
.zc-shell .atlas-trip-card-get-route:hover { filter: brightness(0.95); }

/* Routes list — Route 1/2/3 cards. Active = jade tint + checkmark. */
.zc-shell .atlas-trip-card-routes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.zc-shell .atlas-trip-card-route {
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
}
.zc-shell .atlas-trip-card-route.is-active {
    background: var(--zc-jade-bg);
    border-color: var(--zc-jade);
}
.zc-shell .atlas-trip-card-route-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.zc-shell .atlas-trip-card-route-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--zc-text);
}
.zc-shell .atlas-trip-card-route.is-active .atlas-trip-card-route-name { color: var(--zc-jade); }
.zc-shell .atlas-trip-card-route-check { font-size: 18px; color: var(--zc-jade); }
.zc-shell .atlas-trip-card-route-via {
    font-size: 11px;
    color: var(--zc-text-3);
    margin-bottom: 4px;
}
.zc-shell .atlas-trip-card-route-meta {
    display: flex;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--zc-text-2);
}

/* ── TMC search-input cursor + clear button ───────────────────── */
.zc-shell .atlas-trip-card-tmc-search input { cursor: text; }
.zc-shell .atlas-trip-card-tmc-clear {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--zc-text-3);
    padding: 2px;
    display: inline-flex;
}
.zc-shell .atlas-trip-card-tmc-clear:hover { color: var(--zc-text); }
.zc-shell .atlas-trip-card-tmc-clear .material-symbols-outlined { font-size: 16px; }

/* ── Drawer hide/show toggle (TMC bar, top-right) ─────────────── */
.zc-shell .atlas-trip-card-drawer-toggle {
    background: transparent;
    border: 1px solid var(--zc-border);
    cursor: pointer;
    color: var(--zc-text-2);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-right: 36px; /* leave room for the absolute X close button */
}
.zc-shell .atlas-trip-card-drawer-toggle:hover {
    background: var(--zc-surface-2);
    color: var(--zc-text);
}
.zc-shell .atlas-trip-card-drawer-toggle .material-symbols-outlined { font-size: 18px; }

/* ── Drawer-hidden layout: map fills full width ──────────────── */
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card.drawer-hidden {
    grid-template-columns: 1fr;
    grid-template-areas:
        "tmc"
        "summary"
        "map";
}
.zc-shell .zc-skill-card.is-expanded .atlas-trip-card.drawer-hidden .atlas-trip-card-drawer {
    display: none;
}

/* Floating route summary — bottom-center over the map (legacy Atlas pattern).
   Subtle pill that doesn't compete with the route polyline or markers. */
.zc-shell .atlas-trip-card-floating-summary {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    background: var(--bg-alpha88, rgba(255, 255, 255, 0.92));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--zc-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--zc-text-2);
    display: flex;
    gap: 6px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 12;
    max-width: calc(100% - 80px);  /* leave room for the radar toggle */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.zc-shell .atlas-trip-card-floating-summary b { color: var(--zc-text); }

/* ── Dock controls cluster — size pills + position pills, stacked ─── */

.zc-shell .zc-dock-controls {
    /* 3-column grid so the size pills (top row) and position frames
       (bottom row) line up column-by-column. Both rows share the same
       cell width — left button under left button, etc. */
    display: grid;
    grid-template-columns: repeat(3, 24px);
    gap: 4px 2px;
    align-items: center;
    justify-items: center;
}

/* Both row containers behave as "transparent" so their button children
   participate directly in the parent grid columns. */
.zc-shell .zc-dock-controls .zc-dock-modes,
.zc-shell .zc-dock-controls .zc-dock-positions {
    display: contents;
}

/* In-dock collapse chevron — top-right corner of the dock chrome. Tucks the
   whole dock away; a floating bubble (.zc-dock-reopen) brings it back. */
.zc-shell .zc-dock-collapse {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Opaque chip + border so the toggle reads as a button on top of the
       transcript and never blends into the history scrollbar behind it
       (the bar otherwise shows through a transparent button). The dock-history
       reserves a stable scrollbar gutter so the 4px track sits in its own lane,
       clear of this corner. */
    background: var(--zc-surface);
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    color: var(--zc-text-3);
    cursor: pointer;
    padding: 0;
    z-index: 3;
    transition: background .12s, color .12s;
}
.zc-shell .zc-dock-collapse:hover {
    background: var(--zc-surface-2);
    color: var(--zc-text);
}
.zc-shell .zc-dock-collapse .material-symbols-outlined {
    font-size: 18px;
}

/* Floating reopen bubble — shown only while the dock is hidden, anchored
   bottom-right where the dock's corner sat. Carries the Zybron mark; jade
   ring keeps it discoverable against the canvas. */
.zc-shell .zc-dock-reopen {
    position: fixed;
    bottom: 18px;
    right: 24px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zc-surface);
    border: 2px solid var(--zc-jade);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    z-index: 55;
    box-shadow: var(--zc-shadow-md);
    transition: transform .12s, box-shadow .12s;
}
.zc-shell .zc-dock-reopen:hover {
    transform: translateY(-2px);
    box-shadow: var(--zc-shadow-lg, var(--zc-shadow-md));
}
.zc-shell .zc-dock-reopen-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.zc-shell .zc-dock-reopen-mark {
    font-weight: 700;
    font-size: 22px;
    color: var(--zc-jade);
}

/* Dock fully hidden — drop the dock and the topbar size/position cluster
   (meaningless with no dock). The floating reopen bubble stays. */
.zc-shell.zc-dock-hidden .zc-dock-wrap,
.zc-shell.zc-dock-hidden .zc-dock-controls {
    display: none !important;
}

.zc-shell .zc-dock-pos {
    width: 24px;     /* match the 24px grid column — same width as the size pills above */
    height: 18px;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    transition: background .12s;
}
.zc-shell .zc-dock-pos:hover:not(.is-active) {
    background: var(--zc-surface-2);
}

/* Tiny frame + position tile — visualizes "where the dock sits" with a
   little box positioned in the left / center / right portion of a wider
   frame. Same minimalist vibe as the ▁▂▃ size pills above. */
.zc-shell .zc-dock-pos-frame {
    position: relative;
    width: 16px;
    height: 8px;
    border: 1px solid var(--zc-text-3);
    border-radius: 2px;
    display: inline-block;
}
.zc-shell .zc-dock-pos-tile {
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 4px;
    background: var(--zc-text-3);
    border-radius: 1px;
    transition: background .12s;
}
.zc-shell .zc-dock-pos-tile.pos-left   { left: 1px; }
.zc-shell .zc-dock-pos-tile.pos-center { left: 50%; transform: translateX(-50%); }
.zc-shell .zc-dock-pos-tile.pos-right  { right: 1px; }

/* Active state — both frame outline + inner tile go jade. */
.zc-shell .zc-dock-pos.is-active .zc-dock-pos-frame { border-color: var(--zc-jade); }
.zc-shell .zc-dock-pos.is-active .zc-dock-pos-tile  { background: var(--zc-jade); }

/* ── Dock horizontal position — overrides the default centering on
   .zc-dock-wrap. Default = center (no override). Left aligns to canvas-inner
   left padding (~36px); right aligns to canvas-inner right padding. */
.zc-shell.zc-dock-h-left .zc-dock-wrap {
    left: calc(var(--zc-rail-w) + 36px);
    right: auto;
    transform: none;
    /* Narrower when off to the side so the center of the canvas stays
       readable for a full-width doc behind the dock. */
    width: min(var(--zc-dock-w-narrow), calc(100% - var(--zc-rail-w) - 72px));
    max-width: var(--zc-dock-w-narrow);
}
.zc-shell.zc-dock-h-right .zc-dock-wrap {
    left: auto;
    right: 36px;
    transform: none;
    width: min(var(--zc-dock-w-narrow), calc(100% - var(--zc-rail-w) - 72px));
    max-width: var(--zc-dock-w-narrow);
}

/* ── Focus mode — two-state dock (ZybronChatCanvas.md §3.5.2) ──────────────
   Chat docks to the right as a full-height column; the canvas reflows its
   card strip into the remaining left lane. NO scrim — cards stay lit and
   interactive beside the conversation. Replaces the old centered overlay +
   50%-black scrim. Width is admin-editable via --zc-focus-chat-w. */
.zc-shell.zc-dock-focus .zc-dock-wrap {
    left: auto;
    right: 0;
    top: 60px;            /* clear the ~60px topbar */
    bottom: 0;
    transform: none;
    width: var(--zc-focus-chat-w, 440px);
    max-width: var(--zc-focus-chat-w, 440px);
    height: auto;
    align-items: stretch;
    padding: 0 16px 16px 0;
}
.zc-shell.zc-dock-focus .zc-dock { height: 100%; }
/* Transcript fills the docked column instead of the viewport-height calc. */
.zc-shell.zc-dock-focus .zc-dock-history.zc-history-focus {
    min-height: 0;
    max-height: none;
    flex: 1;
}
/* Reserve the right lane so cards never sit under the docked chat. In Focus
   the dock is docked right (not floating over the bottom), so the tall bottom
   gutter that Work mode needs becomes dead space and forces a needless vertical
   scroll — collapse it back to normal padding here (covers the home variant's
   320px bottom too). */
.zc-shell.zc-dock-focus .zc-canvas-inner,
.zc-shell.zc-dock-focus .zc-canvas-inner.zc-canvas-home {
    padding-right: calc(var(--zc-focus-chat-w, 440px) + 24px);
    padding-bottom: 24px;
}

/* Expanded card in Focus mode — the chat is docked to the right lane (z-index
   220, above the card's 201), so a normal fullscreen expand (right: 4vw) slides
   under the dock and the composer covers the card's right edge. Pull the card's
   right edge in to clear the docked chat column so it fills ONLY the open left
   lane. Bottom returns to a small inset since the dock no longer floats over the
   bottom in Focus. */
.zc-shell.zc-dock-focus .zc-skill-card.is-expanded .zc-skill-card-shell {
    left: 24px;
    right: calc(var(--zc-focus-chat-w, 440px) + 32px);
    bottom: 24px;
}

/* iPhone vertical — drop the position pills entirely; dock is always
   bottom-only on phones. */
@media (max-width: 640px) {
    .zc-shell .zc-dock-positions { display: none; }
    /* Force-reset any user-selected position (we ignore it on mobile). */
    .zc-shell.zc-dock-h-left .zc-dock-wrap,
    .zc-shell.zc-dock-h-right .zc-dock-wrap {
        left: 50%;
        right: auto;
        transform: translateX(calc(-50% + var(--zc-rail-w) / 2));
    }
    /* Focus stays bottom-only on phones — no right dock, no reflow (there's
       no room for a side-by-side lane). The taller transcript still applies. */
    .zc-shell.zc-dock-focus .zc-dock-wrap {
        left: 50%;
        right: auto;
        top: auto;
        bottom: 18px;
        transform: translateX(calc(-50% + var(--zc-rail-w) / 2));
        width: calc(100% - 64px);
        max-width: var(--zc-dock-w);
        height: auto;
        padding: 0;
    }
    .zc-shell.zc-dock-focus .zc-canvas-inner { padding-right: 24px; }
    /* Focus dock is bottom-only on phones — undo the right-lane reservation so
       an expanded card goes back to fullscreen-minus-dock (handled by the
       narrow-width expanded rule above). */
    .zc-shell.zc-dock-focus .zc-skill-card.is-expanded .zc-skill-card-shell {
        left: 0;
        right: 0;
        bottom: 140px;
    }
}

/* FOLIO WORKSPACE DRAWER + HANDLE (v0.10) ===================================
   Light-touch addition to the Chat Canvas when a folio context is active.
   Per ZybronSkillDefs-Folio.md §8 — chat canvas stays untouched when no
   folio is loaded; when one is, a thin handle docks to the left edge and
   a slide-in overlay drawer hosts the section launcher menu.
   ========================================================================= */

/* Header tint — when a folio context is active, give the topbar a subtle
   accent border so the user can see at a glance they're "in" a folio.
   Pure visual cue; layout is unchanged. */
.zc-shell.zc-shell-folio-active .zc-topbar {
    box-shadow: inset 0 -2px 0 0 var(--zc-tone-jade, #00D68F);
}

/* HANDLE — vertical tab on the left edge of the canvas (desktop).
   Mobile (≤640px) flips it to a thin horizontal tab anchored to the top. */
.zc-shell .zc-folio-handle {
    position: fixed;
    top: calc(var(--zc-topbar-h, 56px) + 12px);
    left: calc(var(--zc-rail-w, 64px) + 0px);
    width: 28px;
    min-height: 96px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 4px;
    border: 1px solid var(--zc-border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    background: var(--zc-surface-2);
    color: var(--zc-text);
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.zc-shell .zc-folio-handle:hover {
    background: var(--zc-surface-3);
    transform: translateX(1px);
}
.zc-shell .zc-folio-handle.is-open {
    box-shadow: 4px 0 12px rgba(0,0,0,0.18);
}
.zc-shell .zc-folio-handle.is-active {
    border-color: var(--zc-tone-violet);
    color: var(--zc-tone-violet);
    background: var(--zc-tone-violet-bg);
}
.zc-shell .zc-folio-handle.is-closed {
    opacity: 0.65;
}
.zc-shell .zc-folio-handle-icon {
    font-size: 18px;
    line-height: 1;
}
.zc-shell .zc-folio-handle-code {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* DRAWER — left-edge overlay panel, ~300px wide on desktop. Sits over the
   chat canvas without reflowing it. */
.zc-shell .zc-folio-drawer-backdrop {
    position: fixed;
    inset: var(--zc-topbar-h, 56px) 0 0 var(--zc-rail-w, 64px);
    background: rgba(0, 0, 0, 0.18);
    z-index: 70;
    animation: zcDrawerFade 120ms ease-out;
}
.zc-shell .zc-folio-drawer {
    position: fixed;
    top: var(--zc-topbar-h, 56px);
    bottom: 0;
    left: var(--zc-rail-w, 64px);
    width: 300px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    background: var(--zc-surface);
    color: var(--zc-text);
    border-right: 1px solid var(--zc-border);
    box-shadow: 4px 0 16px rgba(0,0,0,0.24);
    animation: zcDrawerSlideIn 140ms ease-out;
    overflow-y: auto;
}
@keyframes zcDrawerFade {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes zcDrawerSlideIn {
    from { transform: translateX(-12px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; }
}

.zc-shell .zc-folio-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 10px 14px;
    border-bottom: 1px solid var(--zc-border);
}
.zc-shell .zc-folio-drawer-title { min-width: 0; flex: 1; }
.zc-shell .zc-folio-drawer-code {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--zc-text-muted);
    text-transform: uppercase;
}
.zc-shell .zc-folio-drawer-name {
    font-size: 15px;
    font-weight: 600;
    margin-top: 2px;
    line-height: 1.25;
    color: var(--zc-text);
    word-break: break-word;
}
.zc-shell .zc-folio-drawer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.zc-shell .zc-folio-drawer-pill {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--zc-surface-2);
    color: var(--zc-text-2);
}
.zc-shell .zc-folio-drawer-pill.is-status {
    background: var(--zc-tone-violet-bg);
    color: var(--zc-tone-violet);
}
.zc-shell .zc-folio-drawer-close {
    background: transparent;
    border: none;
    color: var(--zc-text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 4px;
}
.zc-shell .zc-folio-drawer-close:hover {
    background: var(--zc-surface-2);
    color: var(--zc-text);
}

.zc-shell .zc-folio-drawer-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--zc-text-muted);
    padding: 12px 14px 6px 14px;
}

.zc-shell .zc-folio-drawer-menu {
    display: flex;
    flex-direction: column;
    padding: 0 6px;
}
.zc-shell .zc-folio-drawer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    color: var(--zc-text);
    cursor: pointer;
    text-align: left;
    transition: background-color 80ms ease, border-color 80ms ease;
}
.zc-shell .zc-folio-drawer-row:hover {
    background: var(--zc-surface-2);
    border-color: var(--zc-border);
}
.zc-shell .zc-folio-drawer-row:active {
    transform: translateY(1px);
}
.zc-shell .zc-folio-drawer-row-icon {
    font-size: 18px;
    color: var(--zc-text-muted);
    flex: 0 0 auto;
}
.zc-shell .zc-folio-drawer-row-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
}
.zc-shell .zc-folio-drawer-row-badge {
    font-size: 11px;
    font-weight: 600;
    background: var(--zc-surface-3);
    color: var(--zc-text-2);
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}
.zc-shell .zc-folio-drawer-row-caret {
    font-size: 16px;
    color: var(--zc-text-muted);
}

.zc-shell .zc-folio-drawer-footer {
    margin-top: auto;
    padding: 14px;
    border-top: 1px solid var(--zc-border);
}
.zc-shell .zc-folio-drawer-exit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    color: var(--zc-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease;
}
.zc-shell .zc-folio-drawer-exit:hover {
    background: var(--zc-red-bg);
    border-color: var(--zc-red);
    color: var(--zc-red);
}

/* Mobile — handle becomes a thin top tab, drawer becomes a top-down sheet. */
@media (max-width: 640px) {
    .zc-shell .zc-folio-handle {
        top: var(--zc-topbar-h, 56px);
        left: 0;
        right: 0;
        width: auto;
        min-height: 0;
        height: 32px;
        flex-direction: row;
        gap: 8px;
        padding: 0 14px;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--zc-border);
    }
    .zc-shell .zc-folio-handle-code {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 12px;
    }
    .zc-shell .zc-folio-drawer-backdrop {
        inset: calc(var(--zc-topbar-h, 56px) + 32px) 0 0 0;
    }
    .zc-shell .zc-folio-drawer {
        top: calc(var(--zc-topbar-h, 56px) + 32px);
        left: 0;
        right: 0;
        width: auto;
        max-height: 65vh;
        bottom: auto;
        border-right: none;
        border-bottom: 1px solid var(--zc-border);
        box-shadow: 0 6px 16px rgba(0,0,0,0.24);
    }
}

/* FOLIO BROWSE CARD (v0.10) ==================================================
   Compact + expanded forms — emitted by folio.browse, rendered inside the
   chat stream. Compact shows totals + 5 recent chips; expanded reveals
   filter tabs, search, type filter, and the sortable table.
   See ZybronSkillDefs-Folio.md §8.2.
   ========================================================================= */
.zc-shell .folio-browse-card {
    /* Flat inside the SkillCard chrome (matches Library / Knowledge). The chrome
       already supplies the surface + border + rounding, so this card no longer
       paints its own — that was the redundant inner border. It's a height-bounded
       flex column so the folio list scrolls inside the card instead of clipping
       at the card edge. Colors come from the admin theme via --zc-* tokens. */
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    color: var(--zc-text);
    border: none;
    /* No own padding — the compact card frame (.is-compact, 18px) and the
       expanded body (20/28/24) supply the inset, so the KPI bar lines up at the
       same level as Knowledge / Library (whose roots also pad to 0). */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.zc-shell .folio-browse-card.is-expanded { padding: 0; }
/* Only the list grows/shrinks; the header rows (KPI bar, pills, search, bulk
   bar, footer) keep their natural height. Without this, a tall list or the
   bulk-action bar squeezed the flex column and clipped the pills row (which
   has overflow-y:hidden for its horizontal scroll). The `.folio-browse-list`
   rule below re-enables flex on the list (later = wins the specificity tie). */
.zc-shell .folio-browse-card > * { flex-shrink: 0; }
/* Same guard for the Library + Knowledge list cards (height-bounded flex
   columns). Only their list scrolls; the KPI/pills/search rows never shrink.
   Each card's list re-enables flex via its own inline flex:1 (inline beats
   this external rule). */
.zc-shell .zc-libdoclist > * { flex-shrink: 0; }
.zc-shell .zc-kbreview > * { flex-shrink: 0; }

.zc-shell .folio-browse-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--zc-text-muted, #9ca3af);
    padding: 8px 4px;
}

.zc-shell .folio-browse-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.zc-shell .folio-browse-header-main { flex: 1; min-width: 0; }
.zc-shell .folio-browse-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--zc-accent, #2563eb);
}
.zc-shell .folio-browse-eyebrow .material-symbols-outlined { font-size: 16px; }
.zc-shell .folio-browse-title {
    font-size: 15px;
    font-weight: 600;
    margin: 4px 0 0 0;
    line-height: 1.3;
}
.zc-shell .folio-browse-title-muted {
    font-weight: 400;
    color: var(--zc-text-muted, #9ca3af);
}
.zc-shell .folio-browse-query {
    font-size: 12px;
    color: var(--zc-text-muted, #9ca3af);
    margin-top: 3px;
    font-style: italic;
}
.zc-shell .folio-browse-expand {
    background: transparent;
    border: 1px solid var(--zc-border, rgba(255,255,255,0.12));
    color: var(--zc-text-muted, #cbd5e1);
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    line-height: 1;
    transition: background-color 80ms ease, color 80ms ease;
}
.zc-shell .folio-browse-expand:hover {
    background: var(--zc-surface-2, #1f2937);
    color: var(--zc-text, #e5e7eb);
}

/* COMPACT — chip list of recents. */
.zc-shell .folio-browse-recents {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.zc-shell .folio-browse-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--zc-surface-2, #1f2937);
    color: var(--zc-text, #e5e7eb);
    border: 1px solid var(--zc-border, rgba(255,255,255,0.10));
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    max-width: 220px;
    overflow: hidden;
    transition: background-color 80ms ease, border-color 80ms ease, transform 80ms ease;
}
.zc-shell .folio-browse-chip:hover {
    background: var(--zc-surface-3, #2d3748);
    border-color: var(--zc-accent, #2563eb);
}
.zc-shell .folio-browse-chip:active { transform: translateY(1px); }
.zc-shell .folio-browse-chip-code {
    font-weight: 600;
    color: var(--zc-accent, #2563eb);
    flex: 0 0 auto;
}
.zc-shell .folio-browse-chip-name {
    color: var(--zc-text-muted, #cbd5e1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zc-shell .folio-browse-muted {
    font-size: 12px;
    color: var(--zc-text-muted, #9ca3af);
}

/* EXPANDED — tabs · toolbar · table · footer. */
/* Stage filters as PILLS (matches the Knowledge / Library chip pills) on a
   single non-wrapping row — "Closed" never drops to a second line; the row
   scrolls horizontally if the card is too narrow to fit all pills. */
.zc-shell .folio-browse-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    /* No reserved scrollbar space — keeps the pill row exactly one pill tall so
       the search bar below lines up with Knowledge / Library. macOS overlay
       scrollbars don't take layout space; the row still scrolls horizontally. */
    padding-bottom: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--zc-border) transparent;
}
.zc-shell .folio-browse-tabs::-webkit-scrollbar { height: 6px; }
.zc-shell .folio-browse-tabs::-webkit-scrollbar-track { background: transparent; }
.zc-shell .folio-browse-tabs::-webkit-scrollbar-thumb { background: var(--zc-border); border-radius: 3px; }
.zc-shell .folio-browse-tab {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--zc-border);
    color: var(--zc-text-muted, #9ca3af);
    padding: 3px 10px;
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 12px;
    transition: color 80ms ease, border-color 80ms ease, background-color 80ms ease;
}
.zc-shell .folio-browse-tab:hover {
    color: var(--zc-text, #e5e7eb);
    background: var(--zc-surface-2);
}
/* Active pill = blue, consistent with Library / Knowledge (admin --info via --zc-blue). */
.zc-shell .folio-browse-tab.is-active {
    color: var(--zc-blue);
    border-color: var(--zc-blue);
    background: color-mix(in srgb, var(--zc-blue) 16%, transparent);
}
/* Divider between the scope pills (Mine/All) and the status pills (New…Closed). */
.zc-shell .folio-browse-tab-divider {
    flex: 0 0 auto;
    align-self: center;
    color: var(--zc-text-muted);
    opacity: 0.5;
    padding: 0 2px;
    user-select: none;
}

.zc-shell .folio-browse-toolbar {
    display: flex;
    gap: 8px;
    /* 12px to match the KPI→pills→search rhythm of the Knowledge / Library
       cards so the search bars line up card-to-card. */
    margin-top: 12px;
    align-items: center;
}
.zc-shell .folio-browse-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    background: var(--zc-surface-2, #1f2937);
    border: 1px solid var(--zc-border, rgba(255,255,255,0.10));
    border-radius: 6px;
    padding: 5px 8px;
}
.zc-shell .folio-browse-search .material-symbols-outlined {
    font-size: 16px;
    color: var(--zc-text-muted, #9ca3af);
}
.zc-shell .folio-browse-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--zc-text, #e5e7eb);
    font-size: 13px;
}
.zc-shell .folio-browse-type-filter {
    background: var(--zc-surface-2, #1f2937);
    color: var(--zc-text, #e5e7eb);
    border: 1px solid var(--zc-border, rgba(255,255,255,0.10));
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 13px;
    cursor: pointer;
}
.zc-shell .folio-browse-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zc-surface-2, #1f2937);
    color: var(--zc-text-muted, #9ca3af);
    border: 1px solid var(--zc-border, rgba(255,255,255,0.10));
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
}
.zc-shell .folio-browse-refresh:hover {
    color: var(--zc-text, #e5e7eb);
    border-color: var(--zc-tone-violet, #8b5cf6);
}
.zc-shell .folio-browse-refresh .material-symbols-outlined {
    font-size: 16px;
}

.zc-shell .folio-browse-list {
    margin-top: 10px;
    /* Fill remaining card height AND cap at 60vh so a long folio list always
       gets its own vertical scrollbar regardless of how the chrome resolves
       its height (mirrors the Library list). */
    flex: 1 1 auto;
    min-height: 120px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* No outer box around the list — the mini-card rows carry their own borders,
       matching the Library / Knowledge lists (which have no container border). */
    scrollbar-width: thin;
    scrollbar-color: var(--zc-border) transparent;
}
.zc-shell .folio-browse-list::-webkit-scrollbar { width: 8px; }
.zc-shell .folio-browse-list::-webkit-scrollbar-track { background: transparent; }
.zc-shell .folio-browse-list::-webkit-scrollbar-thumb {
    background-color: var(--zc-border);
    border-radius: 4px;
}
.zc-shell .folio-browse-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
}
/* Fixed column widths — Name (col 4) absorbs the remainder; the rest are
   sized to their content so the table never grows past the card width.
   Col 1 is the bulk-select checkbox. */
.zc-shell .folio-browse-table th:nth-child(1),
.zc-shell .folio-browse-table td:nth-child(1) { width: 32px; text-align: center; }  /* Checkbox */
.zc-shell .folio-browse-table th:nth-child(2),
.zc-shell .folio-browse-table td:nth-child(2) { width: 62px; }   /* Status   */
.zc-shell .folio-browse-table th:nth-child(3),
.zc-shell .folio-browse-table td:nth-child(3) { width: 104px; }  /* Code     */
.zc-shell .folio-browse-table th:nth-child(5),
.zc-shell .folio-browse-table td:nth-child(5) { width: 80px; }   /* Type     */
.zc-shell .folio-browse-table th:nth-child(6),
.zc-shell .folio-browse-table td:nth-child(6) { width: 58px; }   /* Priority */
.zc-shell .folio-browse-table th:nth-child(7),
.zc-shell .folio-browse-table td:nth-child(7) { width: 92px; white-space: nowrap; }  /* Created */
.zc-shell .folio-browse-table td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
}
.zc-shell .folio-browse-check-col input[type="checkbox"] { cursor: pointer; margin: 0; }
.zc-shell .folio-browse-lock {
    font-size: 14px;
    color: var(--zc-text-muted, #9ca3af);
    opacity: 0.5;
}

/* Bulk action bar — owner-gated state change for the checked folios. */
.zc-shell .folio-browse-bulkbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--zc-tone-violet-bg, rgba(139,92,246,0.10));
    border: 1px solid var(--zc-tone-violet, #8b5cf6);
    border-radius: 6px;
}
.zc-shell .folio-browse-bulk-count { font-size: 12px; font-weight: 600; color: var(--zc-text, #e5e7eb); }
.zc-shell .folio-browse-bulk-confirm { font-size: 12px; color: var(--zc-text, #e5e7eb); }
.zc-shell .folio-browse-bulk-msg {
    margin-top: 8px;
    font-size: 12px;
    color: var(--zc-text-muted, #9ca3af);
}
.zc-shell .folio-browse-action.is-primary {
    background: var(--zc-tone-violet, #8b5cf6);
    color: #fff;
    border-color: var(--zc-tone-violet, #8b5cf6);
}
.zc-shell .folio-browse-action.is-danger {
    background: var(--zc-red-bg, rgba(220,38,38,0.12));
    color: var(--zc-red, #ef4444);
    border-color: var(--zc-red, #ef4444);
}
.zc-shell .folio-browse-action:disabled { opacity: 0.5; cursor: default; }
.zc-shell .folio-browse-table th {
    text-align: left;
    background: var(--zc-surface-2, #1f2937);
    color: var(--zc-text-muted, #9ca3af);
    padding: 6px 8px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--zc-border, rgba(255,255,255,0.08));
    position: sticky;
    top: 0;
}
/* Clickable sort headers + per-column type filter. */
.zc-shell .folio-browse-th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 80ms ease;
}
.zc-shell .folio-browse-th-sort:hover { color: var(--zc-text); }
.zc-shell .folio-browse-th-filter {
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--zc-text-muted);
    background: transparent;
    border: 1px solid var(--zc-border);
    border-radius: 6px;
    padding: 2px 4px;
    cursor: pointer;
    max-width: 120px;
}
.zc-shell .folio-browse-th-filter.is-active {
    color: var(--zc-blue);
    border-color: var(--zc-blue);
}
.zc-shell .folio-browse-row td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--zc-border, rgba(255,255,255,0.06));
    color: var(--zc-text, #e5e7eb);
}
.zc-shell .folio-browse-row {
    cursor: pointer;
    transition: background-color 80ms ease;
}
.zc-shell .folio-browse-row:hover { background: var(--zc-surface-2, #1f2937); }
.zc-shell .folio-browse-row:last-child td { border-bottom: none; }
.zc-shell .folio-browse-row-code {
    font-weight: 600;
    color: var(--zc-accent, #2563eb);
    white-space: nowrap;
}
.zc-shell .folio-browse-row-name { font-weight: 500; }

.zc-shell .folio-browse-status {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--zc-surface-3, #374151);
    color: var(--zc-text-muted, #cbd5e1);
}
.zc-shell .folio-browse-status.is-new        { background: rgba(59, 130, 246, 0.18); color: #60a5fa; }
.zc-shell .folio-browse-status.is-triage     { background: rgba(250, 204, 21, 0.18); color: #facc15; }
.zc-shell .folio-browse-status.is-prioritize { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
.zc-shell .folio-browse-status.is-solve      { background: rgba(14, 165, 233, 0.18); color: #38bdf8; }
.zc-shell .folio-browse-status.is-execute    { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.zc-shell .folio-browse-status.is-closed     { background: rgba(148, 163, 184, 0.22); color: #94a3b8; }

.zc-shell .folio-browse-footer {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--zc-border, rgba(255,255,255,0.06));
}
.zc-shell .folio-browse-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--zc-border, rgba(255,255,255,0.12));
    border-radius: 6px;
    color: var(--zc-text, #e5e7eb);
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease;
}
.zc-shell .folio-browse-action:hover {
    background: var(--zc-surface-2, #1f2937);
    border-color: var(--zc-accent, #2563eb);
}
.zc-shell .folio-browse-action .material-symbols-outlined { font-size: 16px; }

/* ───────────────────────── Builder process-list card ─────────────────────────
   Canvas-native landing for the Builder module (SkillKinds.BuilderProcessList).
   ZybronAdmin-only. Mirrors the Folio/Knowledge list-card visual language. */
.zc-shell .builder-list-card { display:flex; flex-direction:column; gap:12px; min-height:0; max-height:100%; }
.zc-shell .builder-list-empty,
.zc-shell .builder-list-empty-rows {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:28px 12px; opacity:0.7; text-align:center;
}
.zc-shell .builder-list-empty .material-symbols-outlined,
.zc-shell .builder-list-empty-rows .material-symbols-outlined { font-size:32px; }

.zc-shell .builder-list-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; flex-wrap:wrap;
}
.zc-shell .builder-list-filters { display:flex; gap:6px; flex-wrap:wrap; }
.zc-shell .builder-list-tab {
    padding:4px 10px; border-radius:999px; font-size:0.8em; cursor:pointer;
    background:transparent; color:var(--zc-text, #e5e7eb);
    border:1px solid var(--zybron-border, rgba(148,163,184,0.25));
}
.zc-shell .builder-list-tab.is-active {
    background:var(--zc-accent, #2563eb); border-color:var(--zc-accent, #2563eb);
    color:var(--btn-primary-text, #fff);
}
.zc-shell .builder-list-toolbar-right { display:flex; align-items:center; gap:8px; }
.zc-shell .builder-list-search {
    padding:5px 10px; border-radius:8px; font-size:0.82em; min-width:160px;
    background:var(--zc-surface-2, #1f2937); color:var(--zc-text, #e5e7eb);
    border:1px solid var(--zybron-border, rgba(148,163,184,0.25));
}
.zc-shell .builder-list-new {
    display:inline-flex; align-items:center; gap:4px; cursor:pointer;
    padding:5px 12px; border-radius:8px; font-size:0.82em; font-weight:600;
    background:var(--zc-accent, #2563eb); color:var(--btn-primary-text, #fff);
    border:1px solid var(--zc-accent, #2563eb);
}
.zc-shell .builder-list-new .material-symbols-outlined { font-size:16px; }

.zc-shell .builder-list-loading { padding:18px; opacity:0.7; font-size:0.85em; }

.zc-shell .builder-list-rows {
    list-style:none; margin:0; padding:0 2px 2px 0;
    display:flex; flex-direction:column; gap:2px;
    flex:1 1 auto; min-height:0; overflow-y:auto; max-height:52vh;
}
/* Module accordion header — clickable, like the webapp hierarchy tree. */
.zc-shell .builder-list-group-head {
    display:flex; align-items:center; gap:6px; cursor:pointer;
    padding:7px 8px; margin-top:4px; border-radius:8px;
    font-size:0.72em; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--zc-text, #e5e7eb); opacity:0.78;
    background:var(--zc-surface-2, rgba(148,163,184,0.08));
    border:1px solid transparent;
    position:sticky; top:0; z-index:1;
}
.zc-shell .builder-list-group-head:hover { opacity:1; border-color:var(--zybron-border, rgba(148,163,184,0.25)); }
.zc-shell .builder-list-group-head.is-open { opacity:1; }
.zc-shell .builder-list-chevron { font-size:18px; flex-shrink:0; }
.zc-shell .builder-list-group-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zc-shell .builder-list-group-count {
    flex-shrink:0; font-size:0.92em; letter-spacing:0; text-transform:none;
    padding:1px 7px; border-radius:999px; opacity:0.85;
    background:var(--bg-alpha, rgba(0,0,0,0.25));
}
.zc-shell .builder-list-row {
    display:flex; align-items:center; gap:10px; cursor:pointer;
    padding:8px 10px; border-radius:10px;
    border:1px solid var(--zybron-border, rgba(148,163,184,0.18));
    background:var(--card-bg, rgba(255,255,255,0.02));
}
.zc-shell .builder-list-row:hover { border-color:var(--zc-accent, #2563eb); }
.zc-shell .builder-list-row.is-readonly { opacity:0.72; }
.zc-shell .builder-list-row-icon .material-symbols-outlined { font-size:20px; }
.zc-shell .builder-list-row-main { display:flex; flex-direction:column; min-width:0; flex:1; }
.zc-shell .builder-list-row-name { font-weight:600; font-size:0.9em; }
.zc-shell .builder-list-row-desc {
    font-size:0.74em; opacity:0.65; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.zc-shell .builder-list-row-meta { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.zc-shell .builder-list-pill {
    display:inline-flex; align-items:center; gap:3px;
    padding:2px 7px; border-radius:999px; font-size:0.68em; opacity:0.85;
    background:var(--zc-surface-2, rgba(148,163,184,0.12));
}
.zc-shell .builder-list-pill-ro .material-symbols-outlined { font-size:12px; }