/* ===========================================================================
   seller-additions.css   (v8 — theme isolation: orange↔cyan bleed fix)
   ---------------------------------------------------------------------------
   v8 CHANGES (surgical — no existing rules removed except dead duplicates):

     BUG FIX — Orange leaking into agent flow:
       • .ps-cat-card:hover and .ps-cat-card.selected (v4 section) had NO
         flow guard, so they applied inside the agent journey too, smearing
         sunset-orange onto category cards even when body[data-pa-flow="agent"]
         was set. Now scoped to body:not([data-pa-flow="agent"]).
       • .ps-change-role:hover was universally orange. Added a sibling rule
         that overrides it to cyan when in agent flow.

     CLEANUP — Removed duplicate rule blocks:
       • The #psBtnBack0 "← Back" override existed in both v4 and v6 sections
         (identical, both properly guarded). Removed the v4 copy.
       • The "Choose your property category" question rewrite existed in both
         v4 and v6 sections. Removed the v4 copy (v6's version has the
         -webkit-text-fill-color fix for gradient text clash).

   All other v3–v7 rules are unchanged. Agent-flow rules remain gated on
   body[data-pa-flow="agent"] — standalone seller flow is fully unaffected.
   ============================================================================
   seller-additions.css   (v7 — adds 11-step rail + cyan breadcrumb pill)
   ---------------------------------------------------------------------------
   v7 ADDITIONS (see bottom of file, marked "v7 APPENDED"):
     • Desktop visibility for .ps-breadcrumb when agent flow is active
       (private-seller hides it on >=769px; agent flow needs it always).
     • Cyan repaint of .ps-breadcrumb pill (background + border + text +
       icon + chevron) — overrides the orange tint shipped in
       private-seller.css's mobile rules.
     • Styling for the new <button class="ps-dot pa-rail-dot"> rail step
       dots produced by private-agent-rail.js. Includes hover, focus,
       disabled-future-step, and the active "pill" treatment.
     • Styling for the .pa-breadcrumb-injected wrapper that
       private-agent-rail.js inserts into Hub / Mandate / Commission
       scenes (Profile already ships its own breadcrumb).
     • Make the seller's rewritten #psBreadcrumb0 ("Property Agent") read
       in cyan rather than orange.
   ============================================================================
   seller-additions.css   (v6 — agent-flow: nav lock + cyan completeness)
   ---------------------------------------------------------------------------
   Iterates on v5 with two surgical additions, both targeted strictly at the
   shared seller portion of the AGENT journey (`body[data-pa-flow="agent"]`):

     ISSUE #4 — fix Back/Continue position:
        The seller's .ps-nav and .ps-nav-dna had `position: relative` so
        their on-screen Y position depended on each scene's body height.
        That made the buttons jump around as the user moved through the
        embedded seller scenes. We now make them `position: sticky;
        bottom: 0;` (with a thin top border + soft shadow) so they stay
        in the SAME on-screen position throughout the multi-step form,
        matching the new sticky-bottom nav added in private-agent-profile.css
        v7 for the agent-side scenes.

     ISSUE #5 / #6 — cyan accents for any remaining orange selectors:
        v5 was already comprehensive but a handful of styles still leaked
        the seller's sunset-orange into the agent journey:
            • .ps-btn-back hover/border (was --sj-orange)
            • .ps-cat-card hover (was orange even before .selected fires)
            • .ps-pkg-icon (non-featured packages)
            • .ps-pkg-check (selected check tick)
            • text-accent gradients on .ps-narrative-fill / .ps-launch-cta
            • .ps-helper-link / .ps-narrative-cta hovers
            • .ps-toast-success accent bar (visible on save/draft toasts)
        Each is now overridden under body[data-pa-flow="agent"] so the
        whole shared portion reads as cyan, end to end.

     ISSUE #7 — Back button (not "Change Role") at first shared seller
                scene in the agent flow:
        The visible label is already swapped via the v5 ::before override.
        The CLICK behaviour wiring lives in seller-additions.js v4 — when
        the seller is mounted inside the agent shell, the script routes
        #psBtnBack0 to Pa.goRail('commission') instead of letting the
        seller's own handler punt to the role picker.

   v3 / v4 / v5 sections remain unchanged; v6 is purely additive and
   guarded by body[data-pa-flow="agent"] so the standalone seller flow is
   completely untouched.
   =========================================================================== */

/* === v3 BASE: Change Role pill =================================== */
.ps-change-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.12);
    color: rgba(0,0,0,0.55);
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    margin-right: 8px;
    transition: all .18s ease;
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 36px;
}

    .ps-change-role:hover {
        border-color: var(--sj-orange, #f58220);
        color: var(--sj-orange, #f58220);
    }

/* In agent flow the Change Role button uses cyan */
body[data-pa-flow="agent"] .ps-change-role:hover {
    border-color: var(--brand-cyan, #56C4F8) !important;
    color: var(--brand-cyan-deep, #3FA9D9) !important;
}

.ps-change-role i {
    font-size: 12px;
}

.ps-nav:has(.ps-change-role) .ps-btn-back {
    margin-right: auto;
}

.ps-nav[data-cr-injected="1"] .ps-btn-back {
    margin-right: auto;
}

.ps-nav-dna .ps-change-role {
    margin-right: 8px;
}

.ps-nav-dna[data-cr-injected="1"] .ps-btn-back,
.ps-nav-dna:has(.ps-change-role) .ps-btn-back {
    margin-right: auto;
}

@media (max-width: 540px) {
    .ps-change-role {
        padding: 6px 9px;
    }

        .ps-change-role span {
            display: none;
        }
}

#psScene1 .ps-card,
#psScene1 .ps-tile,
#psScene1 [class*="ps-card"] {
    min-width: 0;
}

    #psScene1 .ps-card *,
    #psScene1 .ps-tile * {
        overflow-wrap: anywhere;
        text-overflow: clip;
    }

.pa-host #psScene0 .ps-change-role {
    display: none;
}


/* =============================================================================
   v4 APPENDED — Phase A bug fixes
   ============================================================================= */

/* 1. ANTI-RATTLE — neutralise all scale / translateY / 3D transforms on
   category cards. The root cause of both the text blur AND the click-through
   issue was transform-style: preserve-3d in private-seller.css. That has been
   removed there. These rules remain as a belt-and-braces guarantee:
     - will-change: auto — keeps cards on the CPU compositor path
     - transform-style: flat — explicitly kills any 3D context inheritance
     - transform: none — on the card itself AND on hover/selected states     */
.ps-cat-card {
    will-change: auto !important;
    transform: none !important;
    transform-style: flat !important;
}

    .ps-cat-card:hover,
    .ps-cat-card:focus,
    .ps-cat-card:active,
    .ps-cat-card.selected {
        transform: none !important;
        transform-style: flat !important;
    }

        .ps-cat-card:hover .ps-cat-icon,
        .ps-cat-card.selected .ps-cat-icon {
            transform: none !important;
        }

/* Seller-flow only (not agent): orange hover / selected treatment */
body:not([data-pa-flow="agent"]) .ps-cat-card:hover {
    border-color: rgba(245, 130, 32, 0.4) !important;
    box-shadow: 0 8px 22px -4px rgba(245, 130, 32, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

body:not([data-pa-flow="agent"]) .ps-cat-card.selected {
    border-color: var(--sj-orange, #f58220) !important;
    box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.18), 0 10px 24px -6px rgba(245, 130, 32, 0.22) !important;
}

/* 2. STICKY scene header inside the EMBEDDED SELLER portion of the agent shell.
      This applies ONLY to #psModuleRoot (the embedded seller), NOT to
      .pa-host agent scenes — those use the .pa-sticky-header wrapper injected
      by bulletproof.js, and these per-element rules would fight it.
      NOTE — the per-element sticky here ONLY applies to #psModuleRoot scenes
      (i.e. the shared seller scenes like category, subtype, etc.). */
body[data-pa-flow="agent"] #psModuleRoot .ps-left {
    position: relative;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-progress,
    body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-scene-label,
    body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-question {
        position: sticky;
        background: var(--pa-bg, #ffffff);
        z-index: 5;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-progress {
        top: 0;
        padding-top: 6px;
        padding-bottom: 4px;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-scene-label {
        top: 30px;
        padding-bottom: 4px;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-question {
        top: 52px;
        margin-bottom: 4px;
        padding-bottom: 4px;
    }

    /* Soft fade under the sticky header */
    body[data-pa-flow="agent"] #psModuleRoot .ps-left::before {
        content: "";
        position: sticky;
        top: 110px;
        display: block;
        height: 12px;
        margin-top: -12px;
        background: linear-gradient(180deg, var(--pa-bg, #fff) 0%, transparent 100%);
        z-index: 4;
        pointer-events: none;
    }

/* 3. ALWAYS-VISIBLE SCROLLBAR — embedded seller scenes only */
body[data-pa-flow="agent"] #psModuleRoot .ps-left {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(14,14,17,0.25) transparent;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-left::-webkit-scrollbar {
        width: 8px;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-left::-webkit-scrollbar-track {
        background: transparent;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-left::-webkit-scrollbar-thumb {
        background: rgba(14,14,17,0.18);
        border-radius: 4px;
    }

        body[data-pa-flow="agent"] #psModuleRoot .ps-left::-webkit-scrollbar-thumb:hover {
            background: rgba(14,14,17,0.32);
        }

/* 4. CYAN ACCENTS for SELLER SCENES inside the agent flow */

body[data-pa-flow="agent"] #psModuleRoot .ps-btn-next {
    background: linear-gradient(135deg, #56c4f8 0%, #3fa9d9 100%) !important;
    box-shadow: 0 8px 18px -8px rgba(86,196,248,0.45) !important;
    color: #0e0e11 !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-btn-next:hover:not(:disabled) {
        box-shadow: 0 12px 24px -10px rgba(86,196,248,0.55) !important;
    }

body[data-pa-flow="agent"] #psModuleRoot .ps-cat-card:hover {
    border-color: rgba(86, 196, 248, 0.45) !important;
    box-shadow: 0 8px 22px -4px rgba(86,196,248,0.22), inset 0 1px 1px rgba(255,255,255,0.9) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-cat-card:hover .ps-cat-icon {
        background: linear-gradient(135deg, #56c4f8, #3fa9d9) !important;
        color: white !important;
        box-shadow: 0 8px 16px rgba(86,196,248,0.35) !important;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-cat-card:hover .ps-cat-name {
        color: #2a7da8 !important;
    }

body[data-pa-flow="agent"] #psModuleRoot .ps-cat-card.selected {
    border-color: #56c4f8 !important;
    background: linear-gradient(135deg, #f3f8fc 0%, #fff 100%) !important;
    box-shadow: 0 0 0 2px rgba(86,196,248,0.18), 0 10px 24px -6px rgba(86,196,248,0.22) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-question em {
    color: #3fa9d9 !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-dot.active {
    background: #56c4f8 !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-dot.done {
    background: #3fa9d9 !important;
}

body[data-pa-flow="agent"] #psModuleRoot [class*="-card"].selected,
body[data-pa-flow="agent"] #psModuleRoot [class*="-tile"].selected,
body[data-pa-flow="agent"] #psModuleRoot .ps-card.selected {
    border-color: #56c4f8 !important;
    box-shadow: 0 0 0 2px rgba(86,196,248,0.18) !important;
}

body[data-pa-flow="agent"] #psModuleRoot input:focus,
body[data-pa-flow="agent"] #psModuleRoot select:focus,
body[data-pa-flow="agent"] #psModuleRoot textarea:focus {
    border-color: #56c4f8 !important;
    box-shadow: 0 0 0 3px rgba(86,196,248,0.18) !important;
}

/* 5. Selectable cards always receive pointer events */
.ps-cat-card {
    pointer-events: auto !important;
}

/* 6. Forward-locked dots */
.ps-dot[data-future="1"] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* =============================================================================
   v5 APPENDED — AGENT-FLOW CYAN OVERRIDES (comprehensive)
   ============================================================================= */

/* Progress dots */
body[data-pa-flow="agent"] #psModuleRoot .ps-dot {
    background: rgba(86, 196, 248, 0.25);
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-dot.active {
        background: var(--brand-cyan) !important;
        box-shadow: 0 0 8px rgba(86, 196, 248, 0.5) !important;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-dot.done {
        background: var(--brand-cyan-deep) !important;
    }

/* Scene label */
body[data-pa-flow="agent"] #psModuleRoot .ps-scene-label {
    color: var(--brand-cyan-deep) !important;
    background: rgba(86, 196, 248, 0.12) !important;
    border-color: rgba(86, 196, 248, 0.25) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-scene-label i {
        color: var(--brand-cyan-deep) !important;
    }

/* Category cards */
body[data-pa-flow="agent"] #psModuleRoot .ps-cat-card.selected {
    border-color: var(--brand-cyan) !important;
    background: linear-gradient(135deg, #f3f8fc 0%, #fff 100%) !important;
    box-shadow: 0 0 0 2px rgba(86, 196, 248, 0.18), 0 10px 24px -6px rgba(86, 196, 248, 0.22) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-cat-card.selected .ps-cat-name {
        color: var(--brand-cyan-deep) !important;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-cat-card.selected .ps-cat-icon {
        background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-cyan-deep) 100%) !important;
        color: var(--brand-charcoal) !important;
        box-shadow: 0 8px 18px rgba(86, 196, 248, 0.4) !important;
    }

/* Subtype chips */
body[data-pa-flow="agent"] #psModuleRoot .ps-chip:hover {
    border-color: rgba(86, 196, 248, 0.4) !important;
    color: var(--brand-cyan-deep) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-chip.selected {
    background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-cyan-deep) 100%) !important;
    border-color: var(--brand-cyan) !important;
    color: var(--brand-charcoal) !important;
}

/* DNA blocks / metric tiles */
body[data-pa-flow="agent"] #psModuleRoot .ps-metric-tile {
    border-color: rgba(86, 196, 248, 0.15) !important;
    background: linear-gradient(145deg, #ffffff 0%, #f3f8fc 100%) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-metric-tile:hover {
        border-color: rgba(86, 196, 248, 0.45) !important;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-metric-tile .ps-metric-icon {
        color: var(--brand-cyan-deep) !important;
        background: rgba(86, 196, 248, 0.14) !important;
    }

body[data-pa-flow="agent"] #psModuleRoot .ps-step-btn:hover {
    border-color: var(--brand-cyan) !important;
    color: var(--brand-cyan-deep) !important;
    background: rgba(86, 196, 248, 0.1) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-step-val {
    color: var(--brand-cyan-deep) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-size-input input:focus {
    border-color: var(--brand-cyan) !important;
    box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.12) !important;
}

/* Feature chips (Scene 4) */
body[data-pa-flow="agent"] #psModuleRoot .ps-feature-chip:hover {
    border-color: rgba(86, 196, 248, 0.4) !important;
    color: var(--brand-cyan-deep) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-feature-chip.selected {
    background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-cyan-deep) 100%) !important;
    border-color: var(--brand-cyan) !important;
    color: var(--brand-charcoal) !important;
}

/* Style pills (Scene 5) */
body[data-pa-flow="agent"] #psModuleRoot .ps-style-pill:hover {
    border-color: var(--brand-cyan) !important;
    color: var(--brand-cyan-deep) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-style-pill.active {
    background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-cyan-deep) 100%) !important;
    border-color: var(--brand-cyan) !important;
    color: var(--brand-charcoal) !important;
}

/* Price zones (Scene 6) */
body[data-pa-flow="agent"] #psModuleRoot .ps-price-zone:hover {
    border-color: rgba(86, 196, 248, 0.4) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-price-zone.selected {
    border-color: var(--brand-cyan) !important;
    background: rgba(86, 196, 248, 0.08) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-price-zone.selected .ps-price-zone-val {
        color: var(--brand-cyan-deep) !important;
    }

/* Packages (Scene 8) */
body[data-pa-flow="agent"] #psModuleRoot .ps-package:hover {
    border-color: rgba(86, 196, 248, 0.3) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-package.selected {
    border-color: var(--brand-cyan) !important;
    background: rgba(86, 196, 248, 0.06) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-package.featured {
    border-color: var(--brand-cyan) !important;
    background: linear-gradient(135deg, rgba(86, 196, 248, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-package.featured .ps-pkg-icon {
        background: var(--brand-cyan) !important;
        color: var(--brand-charcoal) !important;
    }

body[data-pa-flow="agent"] #psModuleRoot .ps-package.selected .ps-pkg-check {
    background: var(--brand-cyan) !important;
    border-color: var(--brand-cyan) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-pkg-badge {
    background: var(--brand-cyan) !important;
    color: var(--brand-charcoal) !important;
}

/* Location card */
body[data-pa-flow="agent"] #psModuleRoot .ps-location-card {
    border-color: rgba(86, 196, 248, 0.2) !important;
    background: radial-gradient(circle at 88% 10%, rgba(86, 196, 248, 0.22), transparent 30%), linear-gradient(145deg, #ffffff 0%, #f3f8fc 58%, #f8fbff 100%) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-location-card.is-locked {
        border-color: rgba(86, 196, 248, 0.5) !important;
        box-shadow: 0 16px 34px rgba(86, 196, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    }

body[data-pa-flow="agent"] #psModuleRoot .ps-location-kicker {
    color: var(--brand-cyan-deep) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-location-state {
    color: var(--brand-cyan-deep) !important;
    background: rgba(86, 196, 248, 0.14) !important;
    border-color: rgba(86, 196, 248, 0.22) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-location-search:focus {
    border-color: rgba(86, 196, 248, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(86, 196, 248, 0.10) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-location-result i {
    color: var(--brand-cyan-deep) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-location-result:hover {
    background: rgba(86, 196, 248, 0.09) !important;
}

/* Address visibility pills */
body[data-pa-flow="agent"] #psModuleRoot .ps-reveal-pill.ps-reveal-yes {
    border-color: rgba(86, 196, 248, 0.3) !important;
    color: var(--brand-cyan-deep) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-reveal-opt input[type="radio"]:checked + .ps-reveal-pill.ps-reveal-yes {
    background: rgba(86, 196, 248, 0.12) !important;
    border-color: var(--brand-cyan) !important;
    color: var(--brand-cyan-deep) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-reveal-label i {
    color: var(--brand-cyan-deep) !important;
}

/* Media studio sections */
body[data-pa-flow="agent"] #psModuleRoot .ps-media-module:hover {
    border-color: rgba(86, 196, 248, 0.4) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-upload-zone:hover {
    border-color: var(--brand-cyan) !important;
    background: rgba(86, 196, 248, 0.06) !important;
}

/* AI compose / narrative */
body[data-pa-flow="agent"] #psModuleRoot .ps-ai-compose-btn:hover {
    border-color: var(--brand-cyan) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-ai-compose-btn i {
    color: var(--brand-cyan) !important;
}

/* Price confidence card */
body[data-pa-flow="agent"] #psModuleRoot .ps-price-confidence {
    background: linear-gradient(135deg, #0E1A28 0%, var(--brand-charcoal-soft) 100%) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-price-confidence::before {
        background: var(--brand-cyan) !important;
    }

body[data-pa-flow="agent"] #psModuleRoot .ps-price-conf-bar {
    background: linear-gradient(90deg, var(--brand-cyan), var(--brand-cyan-deep)) !important;
}

/* Right panel cards */
body[data-pa-flow="agent"] #psModuleRoot .ps-intel-header i {
    color: var(--brand-cyan-deep) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-score-bar {
    background: linear-gradient(90deg, var(--brand-cyan), var(--brand-cyan-deep)) !important;
}

/* Success indicators */
body[data-pa-flow="agent"] #psModuleRoot .ps-metre-fill {
    background: linear-gradient(90deg, var(--brand-cyan), var(--brand-cyan-deep)) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-price-range span {
    color: var(--brand-cyan) !important;
}

/* Kinetic timeline energy line */
body[data-pa-flow="agent"] #psModuleRoot .sj-kt-energy-line {
    background: linear-gradient(90deg, var(--brand-cyan), var(--brand-cyan-deep)) !important;
    box-shadow: 0 0 8px rgba(86, 196, 248, 0.5), 0 0 16px rgba(86, 196, 248, 0.3) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .sj-kt-energy-line::after {
        background: var(--brand-cyan) !important;
        box-shadow: 0 0 10px rgba(86, 196, 248, 0.8), 0 0 20px rgba(86, 196, 248, 0.4) !important;
    }

body[data-pa-flow="agent"] #psModuleRoot .sj-kt-node.active .sj-kt-node-dot {
    background: var(--brand-cyan) !important;
    border-color: var(--brand-cyan) !important;
    box-shadow: 0 0 0 4px rgba(86, 196, 248, 0.15), 0 4px 14px rgba(86, 196, 248, 0.4) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .sj-kt-node.active .sj-kt-node-label {
    color: var(--brand-cyan-deep) !important;
}

/* Panel step chips */
body[data-pa-flow="agent"] #psModuleRoot .sj-panel-step-chip.private {
    background: rgba(86, 196, 248, 0.12) !important;
    color: var(--brand-cyan-deep) !important;
    border-color: rgba(86, 196, 248, 0.25) !important;
}

/* The "em" accent in questions */
body[data-pa-flow="agent"] #psModuleRoot .ps-question em {
    background: linear-gradient(135deg, var(--brand-cyan), var(--brand-cyan-deep)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* FIX (v12) Bug 2: heading is now mutated by JS (seller-additions.js v12
   block) so the markup matches the next scene exactly:
       <h2 class="ps-question">Choose your <em>property category</em>.</h2>
   We don't override font-size or layout here — let the seller's existing
   .ps-question rule paint the heading at the same weight/size as Property
   Type (psScene1). All we do is paint the <em> brand-cyan + italic so the
   emphasis matches the agent palette instead of the seller's orange.
   The subtitle paragraph (sibling <p class="ps-subtitle">) is also
   injected by JS and inherits the seller's existing paragraph styling. */
body[data-pa-flow="agent"] #paSellerSlot #psScene0 .ps-question em {
    color: var(--brand-cyan-deep, #3FA9D9) !important;
    -webkit-text-fill-color: var(--brand-cyan-deep, #3FA9D9) !important;
    background: none !important;
    font-style: italic;
    font-weight: 700;
    font-synthesis: none;
}
/* Ensure the JS-injected subtitle reads as a normal seller subtitle. */
body[data-pa-flow="agent"] #paSellerSlot #psScene0 .ps-question + .ps-subtitle,
body[data-pa-flow="agent"] #paSellerSlot #psScene0 p.ps-subtitle[data-pa-agent-subtitle="1"] {
    display: block !important;
    visibility: visible !important;
    font-size: 16px;
    line-height: 1.55;
    color: var(--pa-muted, #5a5d6c);
    margin: 6px 0 22px 0;
    max-width: 56ch;
}

/* FIX (v11) Bug 2: replace the seller's "Private Seller" scene-label
   text on scene 0 with "Property Agent" so the agent journey reads
   correctly. We collapse the original label text via font-size:0 (it
   keeps its layout box and icon) and paint the agent-flow label via
   the ::after pseudo-element. */
body[data-pa-flow="agent"] #paSellerSlot #psScene0 .ps-scene-label {
    font-size: 0 !important;
}

    body[data-pa-flow="agent"] #paSellerSlot #psScene0 .ps-scene-label i,
    body[data-pa-flow="agent"] #paSellerSlot #psScene0 .ps-scene-label svg {
        font-size: 13px !important;
    }

    body[data-pa-flow="agent"] #paSellerSlot #psScene0 .ps-scene-label::after {
        content: "Property Agent";
        font-size: 12px;
        font-weight: 700;
        color: var(--brand-cyan-deep, #3FA9D9);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-left: 6px;
    }

/* Back button override for Scene 0 inside agent shell */
body[data-pa-flow="agent"] #paSellerSlot #psBtnBack0 {
    font-size: 0 !important;
}

    body[data-pa-flow="agent"] #paSellerSlot #psBtnBack0::before {
        content: "← Back";
        font-size: 14px;
        font-family: inherit;
        font-weight: inherit;
        letter-spacing: 0;
    }

    body[data-pa-flow="agent"] #paSellerSlot #psBtnBack0 i {
        display: none !important;
    }

/* Forward-locked dots */
.ps-dot[data-future="1"] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* =============================================================================
   v6 APPENDED — sticky-bottom nav + cyan completeness for the embedded
                seller portion when in agent flow
   ============================================================================= */

/* ── Sticky-bottom Back/Continue (Issue #4) ───────────────────────────────
   The embedded seller scenes inside the agent shell now pin their .ps-nav
   bar to the bottom of #psModuleRoot's scroll viewport, mirroring the
   sticky-bottom nav rule added to .pa-host .ps-left .ps-nav in
   private-agent-profile.css v7. The user sees Back / Continue in the SAME
   on-screen position throughout the entire multi-step form. Standalone
   seller flow is untouched (rule is gated on body[data-pa-flow="agent"]). */
body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-nav,
body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-nav-dna {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 25 !important;
    background: var(--pa-bg, #ffffff) !important;
    margin: 12px -22px 0 !important;
    padding: 12px 22px !important;
    border-top: 1px solid var(--pa-line, rgba(14,14,17,0.08)) !important;
    box-shadow: 0 -4px 12px -8px rgba(14, 14, 17, 0.10) !important;
}

@media (max-width: 720px) {
    body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-nav,
    body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-nav-dna {
        margin: 12px -14px 0 !important;
        padding: 10px 14px !important;
    }
}

/* Ensure the seller's .ps-left has a real scroll viewport so the sticky
   bottom rule has something to anchor against. Without overflow-y: auto
   the sticky behaviour silently degrades to relative positioning. */
body[data-pa-flow="agent"] #psModuleRoot .ps-left {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(14,14,17,0.25) transparent;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-left::-webkit-scrollbar {
        width: 8px;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-left::-webkit-scrollbar-thumb {
        background: rgba(14,14,17,0.18);
        border-radius: 4px;
    }


/* ── Cyan completeness — selectors v5 missed (Issues #5 / #6) ─────────────
   These are the few remaining places where the seller's sunset-orange
   leaked through. Each rule is scoped to body[data-pa-flow="agent"] so
   the standalone seller flow stays sunset-orange. */

/* Back-button border + hover (was orange via private-seller.css) */
body[data-pa-flow="agent"] #psModuleRoot .ps-btn-back {
    color: var(--pa-ink, #0e0e11) !important;
    border-color: rgba(86, 196, 248, 0.25) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-btn-back:hover {
        border-color: var(--brand-cyan) !important;
        color: var(--brand-cyan-deep) !important;
        background: rgba(86, 196, 248, 0.06) !important;
    }

/* Category-card hover (already overridden in v4 with !important — this
   rule is here purely for completeness in case the v4 rule is ever
   tightened). */
body[data-pa-flow="agent"] #psModuleRoot .ps-cat-card:hover {
    border-color: rgba(86, 196, 248, 0.45) !important;
    box-shadow: 0 8px 22px -4px rgba(86, 196, 248, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

/* Non-featured package icon (the small icon left of the package title) */
body[data-pa-flow="agent"] #psModuleRoot .ps-package .ps-pkg-icon {
    background: rgba(86, 196, 248, 0.14) !important;
    color: var(--brand-cyan-deep) !important;
}

body[data-pa-flow="agent"] #psModuleRoot .ps-package.selected .ps-pkg-icon {
    background: var(--brand-cyan) !important;
    color: var(--brand-charcoal) !important;
}

/* Narrative builder accents (Scene 6 — AI Composer) */
body[data-pa-flow="agent"] #psModuleRoot .ps-narrative-fill,
body[data-pa-flow="agent"] #psModuleRoot .ps-narrative-cta {
    background: linear-gradient(135deg, var(--brand-cyan), var(--brand-cyan-deep)) !important;
    color: var(--brand-charcoal) !important;
    border-color: var(--brand-cyan) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-narrative-cta:hover {
        box-shadow: 0 8px 18px -8px rgba(86, 196, 248, 0.45) !important;
    }

/* Launch CTA (Scene 7) — gradient text + button */
body[data-pa-flow="agent"] #psModuleRoot .ps-launch-cta {
    background: linear-gradient(135deg, var(--brand-cyan), var(--brand-cyan-deep)) !important;
    color: var(--brand-charcoal) !important;
    box-shadow: 0 12px 24px -10px rgba(86, 196, 248, 0.45) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-launch-cta:hover {
        box-shadow: 0 16px 30px -12px rgba(86, 196, 248, 0.55) !important;
    }

/* Helper / tooltip links inside seller scenes */
body[data-pa-flow="agent"] #psModuleRoot .ps-helper-link,
body[data-pa-flow="agent"] #psModuleRoot .ps-narrative-cta {
    color: var(--brand-cyan-deep) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-helper-link:hover {
        color: var(--brand-cyan) !important;
    }

/* Save / Draft toast accent bar (visible briefly after auto-save) */
body[data-pa-flow="agent"] #psModuleRoot .ps-toast-success {
    border-left-color: var(--brand-cyan) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-toast-success i {
        color: var(--brand-cyan-deep) !important;
    }

/* Scene-label + question-bar gradient that some scenes use behind the title */
body[data-pa-flow="agent"] #psModuleRoot .ps-scene-bar,
body[data-pa-flow="agent"] #psModuleRoot .ps-question-bar {
    background: linear-gradient(90deg, rgba(86, 196, 248, 0.18), rgba(86, 196, 248, 0)) !important;
}

/* Right-panel intel headers and accent strokes */
body[data-pa-flow="agent"] #psModuleRoot .ps-intel-card {
    border-color: rgba(86, 196, 248, 0.2) !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-intel-card .ps-intel-accent {
        background: linear-gradient(135deg, var(--brand-cyan), var(--brand-cyan-deep)) !important;
    }


/* =============================================================================
   v7 APPENDED — 11-step rail + cyan breadcrumb pill (agent flow only)
   =============================================================================
   Everything below is gated on body[data-pa-flow="agent"] so the standalone
   private-seller flow keeps its 8-dot orange treatment unchanged. */


/* ── 1. SHOW the breadcrumb pill on every viewport in agent flow ─────────
   private-seller.css hides .ps-breadcrumb on desktop (display:none) and
   reveals it only at <=768px. In agent flow we want it visible always,
   styled in cyan. We force display:flex with !important to outrank the
   selector specificity of the seller's mobile-only rule. */
body[data-pa-flow="agent"] #psModuleRoot .ps-breadcrumb,
body[data-pa-flow="agent"] .pa-host .ps-breadcrumb,
body[data-pa-flow="agent"] .pa-breadcrumb-injected {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 10px 0 !important;
    padding: 6px 12px 6px 6px !important;
    background: linear-gradient(135deg, rgba(86, 196, 248, 0.10) 0%, rgba(86, 196, 248, 0.04) 100%) !important;
    border: 1px solid rgba(86, 196, 248, 0.28) !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--brand-cyan-deep, #3FA9D9) !important;
    width: fit-content !important;
    max-width: 100% !important;
    overflow: hidden !important;
    letter-spacing: 0.01em !important;
}

    body[data-pa-flow="agent"] #psModuleRoot .ps-breadcrumb-icon,
    body[data-pa-flow="agent"] .pa-host .ps-breadcrumb-icon,
    body[data-pa-flow="agent"] .pa-breadcrumb-injected .ps-breadcrumb-icon {
        flex-shrink: 0 !important;
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, var(--brand-cyan, #56C4F8) 0%, var(--brand-cyan-deep, #3FA9D9) 100%) !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.7rem !important;
        box-shadow: 0 2px 6px rgba(86, 196, 248, 0.30) !important;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-breadcrumb-text,
    body[data-pa-flow="agent"] .pa-host .ps-breadcrumb-text,
    body[data-pa-flow="agent"] .pa-breadcrumb-injected .ps-breadcrumb-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: inherit !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    body[data-pa-flow="agent"] #psModuleRoot .ps-breadcrumb-chevron,
    body[data-pa-flow="agent"] .pa-host .ps-breadcrumb-chevron,
    body[data-pa-flow="agent"] .pa-breadcrumb-injected .ps-breadcrumb-chevron {
        flex-shrink: 0 !important;
        color: rgba(86, 196, 248, 0.65) !important;
        font-size: 0.65rem !important;
        margin: 0 2px !important;
    }

/* The clickable "Property Agent" segment inside Hub-anchored breadcrumbs */
body[data-pa-flow="agent"] .pa-breadcrumb-back {
    background: transparent !important;
    border: none !important;
    color: var(--brand-cyan-deep, #3FA9D9) !important;
    font: inherit !important;
    cursor: pointer !important;
    padding: 0 !important;
    text-decoration: none !important;
    transition: color 0.18s ease !important;
}

    body[data-pa-flow="agent"] .pa-breadcrumb-back:hover {
        color: var(--brand-cyan, #56C4F8) !important;
        text-decoration: underline !important;
    }

body[data-pa-flow="agent"] .pa-breadcrumb-current {
    color: var(--pa-ink, #0E0E11) !important;
    font-weight: 700 !important;
}

    body[data-pa-flow="agent"] .pa-breadcrumb-current strong {
        color: var(--brand-cyan-deep, #3FA9D9) !important;
        font-weight: 700 !important;
    }


/* ── 2. RAIL DOT — buttons rendered by private-agent-rail.js ─────────────
   Override the seller's .ps-dot rules (orange `active`, gray `done`) so
   our rail dots read in cyan and behave like buttons (hover, focus,
   disabled). Selectors use `button.ps-dot` to outrank the seller's
   `.ps-dot { background: rgba(0,0,0,0.12) }` plain selector. */
body[data-pa-flow="agent"] .ps-progress[data-pa-rail-key] {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

body[data-pa-flow="agent"] button.ps-dot.pa-rail-dot {
    width: 7px !important;
    height: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(14, 14, 17, 0.14) !important;
    cursor: pointer !important;
    transition: width 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.18s ease !important;
    flex-shrink: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
}

    body[data-pa-flow="agent"] button.ps-dot.pa-rail-dot:hover:not(:disabled) {
        background: rgba(86, 196, 248, 0.55) !important;
        transform: scale(1.25) !important;
    }

    body[data-pa-flow="agent"] button.ps-dot.pa-rail-dot:focus-visible {
        outline: 2px solid var(--brand-cyan, #56C4F8) !important;
        outline-offset: 3px !important;
    }

    /* Active step — pill with cyan gradient + soft glow */
    body[data-pa-flow="agent"] button.ps-dot.pa-rail-dot.active {
        width: 24px !important;
        border-radius: 4px !important;
        background: linear-gradient(135deg, var(--brand-cyan, #56C4F8) 0%, var(--brand-cyan-deep, #3FA9D9) 100%) !important;
        box-shadow: 0 0 10px rgba(86, 196, 248, 0.55), 0 0 0 2px rgba(86, 196, 248, 0.10) !important;
    }

    /* Completed steps — solid cyan-deep */
    body[data-pa-flow="agent"] button.ps-dot.pa-rail-dot.done {
        background: var(--brand-cyan-deep, #3FA9D9) !important;
    }

        body[data-pa-flow="agent"] button.ps-dot.pa-rail-dot.done:hover {
            background: var(--brand-cyan, #56C4F8) !important;
        }

    /* Future / locked steps — slightly faded, not-allowed cursor */
    body[data-pa-flow="agent"] button.ps-dot.pa-rail-dot.pa-rail-future,
    body[data-pa-flow="agent"] button.ps-dot.pa-rail-dot:disabled {
        background: rgba(14, 14, 17, 0.10) !important;
        cursor: not-allowed !important;
        opacity: 0.7 !important;
    }

        body[data-pa-flow="agent"] button.ps-dot.pa-rail-dot.pa-rail-future:hover,
        body[data-pa-flow="agent"] button.ps-dot.pa-rail-dot:disabled:hover {
            transform: none !important;
            background: rgba(14, 14, 17, 0.10) !important;
        }


/* ── 3. Make sure .ps-progress within agent scenes does NOT collapse to
       the seller's mobile-hidden rule. Keep it horizontal and visible. */
body[data-pa-flow="agent"] .pa-host .ps-progress,
body[data-pa-flow="agent"] #psModuleRoot .ps-progress {
    display: flex !important;
    align-items: center !important;
}


/* ── 4. The Hub scene has no .ps-scene-label / .ps-question, so the
       breadcrumb + progress sit alone above the .pa-hub block. Add a
       little breathing room. */
body[data-pa-flow="agent"] [data-pa-hub-scene] .ps-progress[data-pa-rail-key] {
    margin-top: 6px !important;
    margin-bottom: 18px !important;
}

body[data-pa-flow="agent"] [data-pa-hub-scene] .pa-breadcrumb-injected {
    margin-top: 4px !important;
    margin-bottom: 10px !important;
}


/* ── 5. Tighten the breadcrumb on small screens (still visible, smaller
       padding) so it doesn't push other content. */
@media (max-width: 540px) {
    body[data-pa-flow="agent"] #psModuleRoot .ps-breadcrumb,
    body[data-pa-flow="agent"] .pa-host .ps-breadcrumb,
    body[data-pa-flow="agent"] .pa-breadcrumb-injected {
        font-size: 0.66rem !important;
        padding: 4px 10px 4px 4px !important;
    }

        body[data-pa-flow="agent"] #psModuleRoot .ps-breadcrumb-icon,
        body[data-pa-flow="agent"] .pa-host .ps-breadcrumb-icon,
        body[data-pa-flow="agent"] .pa-breadcrumb-injected .ps-breadcrumb-icon {
            width: 18px !important;
            height: 18px !important;
            font-size: 0.62rem !important;
        }
}


/* =============================================================================
   v8 APPENDED — Three-bug fix block
   -----------------------------------------------------------------------------
   Addresses three reported issues:

   BUG 1 (Agent): Desktop scenes had .ps-left and .ps-right stacked vertically
   instead of side by side. Root cause was flex-direction: column on .ps-scene
   inside private-agent-bulletproof.css (now fixed there). The rules below are
   defensive reinforcements scoped to the agent shell.

   BUG 2 (Seller): Category cards were not clickable in some cases. Root causes:
     a) transform-style: preserve-3d (removed from private-seller.css) created
        GPU layers that could swallow pointer events in certain compositing paths.
     b) .ps-scene#psScene0 .ps-left { overflow: hidden } (now removed from
        private-seller.css FIX 1 block) was clipping card hit-targets when
        the scale(1.02) hover pushed cards to the edge.
     c) .pa-stage .pa-host { pointer-events: none } in private-agent.css could
        leak into seller context. The rule below ensures auto in all seller flows.

   BUG 3 (Seller): Blurry / truncated text on category cards. Root cause was
   transform-style: preserve-3d (removed from private-seller.css) combined with
   scale transforms. With both removed the text renders sharply. Additional
   text rules below prevent any clipping or -webkit-line-clamp truncation.
   ============================================================================= */


/* ── BUG 2 REINFORCEMENT: Pointer-events chain for seller cat cards ───── */

/* Guarantee the entire ancestor chain from .ps-left down to card is clickable
   in the standalone seller flow (no agent shell active). */
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-left,
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-cat-grid,
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-cat-card {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* The shimmer sweep ::after pseudo must never eat clicks */
.ps-cat-card::after {
    pointer-events: none !important;
}

/* The glowing ::before overlay must never eat clicks */
.ps-cat-card::before {
    pointer-events: none !important;
}


/* ── BUG 3 REINFORCEMENT: Sharp, non-clipped text on cat cards ────────── */

/* Kill any leftover 3D context that could trigger subpixel blur */
.ps-cat-card,
.ps-cat-card:hover,
.ps-cat-card.selected {
    transform-style: flat !important;
    -webkit-transform-style: flat !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    /* No perspective — prevents browser from creating a compositing layer */
    perspective: none !important;
}

/* Text inside cards: always fully visible, no truncation, no blur.
   IMPORTANT: Do NOT add transform: translateZ(0) here — GPU layer promotion
   causes subpixel text blur. Do NOT add overflow: visible — it conflicts with
   bulletproof.css's overflow: hidden on the standalone seller.
   The original private-seller.css only sets position: relative; z-index: 1
   on these elements — that baseline is correct and must not be overridden. */
.ps-cat-name,
.ps-cat-meta {
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    /* Restore CPU text rendering path — no 3D/GPU compositing */
    transform: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
}

/* In agent flow the bulletproof.css already sets normal/anywhere — reinforce */
body[data-pa-flow="agent"] .ps-cat-name,
body[data-pa-flow="agent"] .ps-cat-meta {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}


/* ── BUG 1 REINFORCEMENT: Agent two-column layout ─────────────────────── */

/* Defensive: the .pa-host active display should be flex (not just block)
   so the child .ps-scene can be a flex-row and fill height naturally. */
body[data-pa-flow="agent"] .pa-host.pa-host-active {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* All agent .ps-scene children: row layout by default (two-column) */
body[data-pa-flow="agent"] .pa-host .ps-scene {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Collapse to column on mobile */
@media (max-width: 768px) {
    body[data-pa-flow="agent"] .pa-host .ps-scene {
        flex-direction: column !important;
    }

    body[data-pa-flow="agent"] .pa-host .ps-right {
        display: none !important;
    }
}


/* =============================================================================
   v9 — Scene 0 category card: meta-text visibility fix
   -----------------------------------------------------------------------------
   Problem: .ps-cat-meta ("7 guided scenes") was truncated/clipped because:
     1. .ps-cat-card has overflow:hidden (needed to contain ::before overlay).
     2. The icon (36px) + gap (5px) + name + gap (5px) + meta left insufficient
        vertical room, so meta wrapped and the second line was hidden.

   Fix strategy — standalone seller only (not agent flow, which has its own
   sizing). Reduce the icon from 36px→32px and card gap from 5px→4px.
   This recovers ~9px of vertical space, enough for the meta to sit on one
   line in a 3-column card without any name-size change. The card padding
   and name font are left completely untouched.

   All rules are scoped to body:not([data-pa-flow="agent"]) so agent flow
   is 100% unaffected.
   ============================================================================= */

body:not([data-pa-flow="agent"]) #psModuleRoot .ps-cat-card {
    gap: 4px !important;
    padding: 9px 7px !important;
}

body:not([data-pa-flow="agent"]) #psModuleRoot .ps-cat-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
}

/* Ensure meta text wraps cleanly rather than overflowing */
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-cat-meta {
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Keep the ::before hover overlay clipped to the card border-radius
   even though we need the text to be visible — achieved by keeping
   overflow:hidden on the card itself but removing it from child text
   via the parent not clipping them (text is within normal flow bounds
   after the size reduction above so this is a non-issue). */


/* =============================================================================
   v10 — Scene 1 (subtype chips) + Scene 2 (DNA builder): truncation fixes
   -----------------------------------------------------------------------------
   Both fixes are scoped to body:not([data-pa-flow="agent"]) so the agent
   flow is 100% unaffected. All changes are reductions to recover vertical
   space — no structural or layout changes.

   SCENE 1 (Property Type — chips + banner):
     Problem: the subtype banner (291px tall, flex-shrink: 1) consumes most
     of .ps-left's height, leaving the chip-grid with too little room.
     The chip-grid has overflow-y: auto so it scrolls, but the last chips
     are hidden below the fold with no scroll indicator visible to the user.
     Fix: reduce banner height clamp ceiling from 210px → 160px, reduce
     chip padding and font-size slightly, tighten chip-grid gap and margin.

   SCENE 2 (DNA Builder — metrics + nav truncation):
     Problem: .ps-metric-tile min-height (112px) × multiple tiles + panel
     kicker/title margins overflow .ps-dna-left which has overflow: hidden.
     The Back/Continue nav is sticky at bottom but content beneath it in
     the scrollable workarea is cut off.
     Fix: reduce metric-tile min-height, reduce dna-block padding, tighten
     panel kicker and title margins, ensure workarea panels are individually
     scrollable.
   ============================================================================= */


/* ── SCENE 1: Subtype chips — standalone seller ──────────────────────────── */

/* Tighten the banner so chips get more vertical room */
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-subtype-banner {
    flex: 0 1 clamp(100px, 20vh, 160px) !important;
    height: clamp(100px, 20vh, 160px) !important;
    min-height: 90px !important;
    margin-top: clamp(6px, 1vh, 10px) !important;
    margin-bottom: clamp(6px, 1vh, 10px) !important;
}

/* Smaller chips: reduce padding and font so more fit before scrolling */
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-chip {
    padding: 7px 13px !important;
    font-size: 0.76rem !important;
}

/* Tighten chip grid gap and bottom margin */
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-chip-grid {
    gap: 6px !important;
    margin-bottom: 8px !important;
}


/* ── SCENE 2: DNA Builder — standalone seller ────────────────────────────── */

/* Reduce metric tile min-height so more tiles fit without forcing scroll */
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-metric-tile {
    min-height: clamp(76px, 11vh, 96px) !important;
    padding: clamp(9px, 1.3vh, 11px) !important;
}

/* Reduce dna-block padding to match */
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-dna-block {
    padding: 11px !important;
}

/* Tighten panel kicker and title so they eat less vertical space */
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-panel-kicker {
    padding: 4px 9px !important;
    font-size: 0.59rem !important;
    margin-bottom: 6px !important;
}

body:not([data-pa-flow="agent"]) #psModuleRoot .ps-panel-title {
    font-size: clamp(0.86rem, 1.2vw, 0.98rem) !important;
    margin-bottom: 8px !important;
}

/* Ensure each panel inside the workarea is individually scrollable
   so content is never hard-clipped — panels scroll internally */
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-dna-workarea .ps-dna-panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0,0,0,0.1) transparent !important;
}

/* Tighten workarea gap slightly */
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-dna-workarea {
    gap: clamp(8px, 1vw, 12px) !important;
}

/* Reduce DNA left heading bottom margins so workarea gets more room */
body:not([data-pa-flow="agent"]) #psModuleRoot .ps-dna-left .ps-question {
    margin-bottom: 1px !important;
    font-size: clamp(0.95rem, 1.55vw, 1.3rem) !important;
}

body:not([data-pa-flow="agent"]) #psModuleRoot .ps-dna-left .ps-subtitle {
    margin: 0 0 clamp(6px, 0.8vh, 10px) !important;
}

body:not([data-pa-flow="agent"]) #psModuleRoot .ps-dna-left .ps-scene-label {
    margin-bottom: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIX (v11) Bug 3 — Property Type pills appearing BELOW the rendered
   image on scene 1. The image's stacking context was overlapping the
   subtype list. Lift the pill list above the image and let it wrap
   cleanly. Scoped to agent flow so the standalone seller is untouched.
   ═══════════════════════════════════════════════════════════════════ */
body[data-pa-flow="agent"] #psModuleRoot #psScene1 .ps-subtype-list,
body[data-pa-flow="agent"] #psModuleRoot #psScene1 .ps-subtype-grid,
body[data-pa-flow="agent"] #psModuleRoot #psScene1 .ps-subtypes,
body[data-pa-flow="agent"] #psModuleRoot #psScene1 [class*="subtype"]:not(img):not([class*="image"]),
body[data-pa-flow="agent"] #psModuleRoot #psScene1 [class*="-pills"] {
    position: relative !important;
    z-index: 5 !important;
    flex-wrap: wrap !important;
    display: flex !important;
    gap: 10px !important;
    align-content: flex-start !important;
}

body[data-pa-flow="agent"] #psModuleRoot #psScene1 [class*="image"],
body[data-pa-flow="agent"] #psModuleRoot #psScene1 [class*="-hero"],
body[data-pa-flow="agent"] #psModuleRoot #psScene1 .ps-subtype-img,
body[data-pa-flow="agent"] #psModuleRoot #psScene1 picture,
body[data-pa-flow="agent"] #psModuleRoot #psScene1 img {
    position: relative !important;
    z-index: 1 !important;
}
/* Ensure the pill items themselves (.ps-pill, .ps-subtype-pill, etc) are
   on top of the image and individually clickable. */
body[data-pa-flow="agent"] #psModuleRoot #psScene1 .ps-pill,
body[data-pa-flow="agent"] #psModuleRoot #psScene1 .ps-subtype-pill,
body[data-pa-flow="agent"] #psModuleRoot #psScene1 [role="radio"],
body[data-pa-flow="agent"] #psModuleRoot #psScene1 [role="button"][class*="subtype"] {
    position: relative !important;
    z-index: 6 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIX (v11) Bug 4 — DNA Builder body cut off (~95% visible) under the
   sticky bottom nav. Push the sticky nav DOWN inside the scrollable
   .ps-left flex column so the last 50–80px of body content can scroll
   fully into view above it. The nav itself is still sticky-pinned at
   bottom: 0, so it remains visible during scroll.
   ═══════════════════════════════════════════════════════════════════ */
body[data-pa-flow="agent"] #psModuleRoot #psScene2 .ps-left .ps-nav-dna,
body[data-pa-flow="agent"] #psModuleRoot #psScene2 .ps-left .ps-nav {
    margin-top: 96px !important;
}
/* Belt-and-braces: also add scroll-padding so anchored elements
   reveal above the nav. */
body[data-pa-flow="agent"] #psModuleRoot #psScene2 .ps-left {
    scroll-padding-bottom: 96px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIX (v11) Bug 5a — Media Studio uploads need a click spinner like
   the Profile photo upload zone. Mirrors the .pa-photo-upload-zone
   .is-loading treatment (cyan tint + dimmed opacity + spinner).
   ═══════════════════════════════════════════════════════════════════ */
body[data-pa-flow="agent"] #psModuleRoot #psScene4 .ps-upload-zone,
body[data-pa-flow="agent"] #psModuleRoot #psScene4 .ps-media-upload,
body[data-pa-flow="agent"] #psModuleRoot #psScene4 [class*="upload-zone"],
body[data-pa-flow="agent"] #psModuleRoot #psScene4 [class*="media-tile"][class*="empty"],
body[data-pa-flow="agent"] #psModuleRoot #psScene4 [data-upload-target] {
    position: relative;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

    body[data-pa-flow="agent"] #psModuleRoot #psScene4 .ps-upload-zone.is-loading,
    body[data-pa-flow="agent"] #psModuleRoot #psScene4 .ps-media-upload.is-loading,
    body[data-pa-flow="agent"] #psModuleRoot #psScene4 [class*="upload-zone"].is-loading,
    body[data-pa-flow="agent"] #psModuleRoot #psScene4 [data-upload-target].is-loading {
        border-color: var(--brand-cyan, #56C4F8) !important;
        opacity: 0.65;
        pointer-events: none;
    }

        body[data-pa-flow="agent"] #psModuleRoot #psScene4 .ps-upload-zone.is-loading::after,
        body[data-pa-flow="agent"] #psModuleRoot #psScene4 .ps-media-upload.is-loading::after,
        body[data-pa-flow="agent"] #psModuleRoot #psScene4 [class*="upload-zone"].is-loading::after,
        body[data-pa-flow="agent"] #psModuleRoot #psScene4 [data-upload-target].is-loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 28px;
            height: 28px;
            margin: -14px 0 0 -14px;
            border: 3px solid rgba(86,196,248,0.25);
            border-top-color: var(--brand-cyan-deep, #3FA9D9);
            border-radius: 50%;
            animation: pa-media-upload-spin 0.7s linear infinite;
            z-index: 5;
            pointer-events: none;
        }

@keyframes pa-media-upload-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FIX (v11) Bug 5b — Media Studio tabs: white-gradient sticky-fade
   line was painting OVER the tab labels when content scrolled, making
   the text disappear. Lift the tab strip above the fade and disable
   the fade rendering on Media Studio specifically.
   ═══════════════════════════════════════════════════════════════════ */
body[data-pa-flow="agent"] #psModuleRoot #psScene4 .ps-tabs,
body[data-pa-flow="agent"] #psModuleRoot #psScene4 [role="tablist"],
body[data-pa-flow="agent"] #psModuleRoot #psScene4 .ps-media-tabs,
body[data-pa-flow="agent"] #psModuleRoot #psScene4 [class*="tabs"] {
    position: relative !important;
    z-index: 12 !important;
    background: var(--pa-bg, #ffffff) !important;
}
/* Suppress the .ps-left::before sticky fade overlay just on scene 4 so
   the tab labels are never covered by a translucent gradient. */
body[data-pa-flow="agent"] #psModuleRoot #psScene4 .ps-left::before,
body[data-pa-flow="agent"] #psModuleRoot:has(#psScene4.ps-scene-active) .ps-left::before {
    display: none !important;
    content: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIX (v11) Bug 7 — Tooltip clip escape on the seller-side scenes too.
   The disabled-Continue tooltip from the agent journey now needs to
   clear .ps-nav overflow on every shared seller scene as well.
   ═══════════════════════════════════════════════════════════════════ */
body[data-pa-flow="agent"] #psModuleRoot .ps-nav,
body[data-pa-flow="agent"] #psModuleRoot .ps-nav-dna {
    overflow: visible !important;
}


/* ===========================================================================
   v12 ENHANCEMENTS — supersede the v11 attempts for Bugs 3, 4, 5.
   These rules sit AFTER the v11 rules so they win on cascade order.
   =========================================================================== */

/* ── BUG 3 v12 — Property Type pills above hero image ─────────────────────
   v11's z-index alone wasn't enough because the image's parent wrapper
   created its own stacking context. We now isolate the pills container,
   force it above ALL siblings, and make the image a non-isolated background
   that can never paint over interactive content.                            */
body[data-pa-flow="agent"] #paSellerSlot #psScene1 .ps-pillgrid,
body[data-pa-flow="agent"] #paSellerSlot #psScene1 .ps-type-grid,
body[data-pa-flow="agent"] #paSellerSlot #psScene1 [class*="ps-pill"][class*="grid"],
body[data-pa-flow="agent"] #paSellerSlot #psScene1 [class*="property-type"] {
    position: relative !important;
    z-index: 50 !important;
    isolation: isolate;
    flex-wrap: wrap !important;
    overflow: visible !important;
}

    body[data-pa-flow="agent"] #paSellerSlot #psScene1 .ps-pillgrid > *,
    body[data-pa-flow="agent"] #paSellerSlot #psScene1 .ps-type-grid > * {
        position: relative;
        z-index: 51;
    }

body[data-pa-flow="agent"] #paSellerSlot #psScene1 .ps-right,
body[data-pa-flow="agent"] #paSellerSlot #psScene1 .ps-hero,
body[data-pa-flow="agent"] #paSellerSlot #psScene1 [class*="hero"][class*="image"],
body[data-pa-flow="agent"] #paSellerSlot #psScene1 [class*="ps-illustration"] {
    z-index: 1 !important;
    pointer-events: none;
}

body[data-pa-flow="agent"] #paSellerSlot #psScene1 .ps-left {
    overflow: visible !important;
    padding-bottom: 24px;
}

body[data-pa-flow="agent"] #paSellerSlot #psScene1 .ps-scene {
    overflow: visible !important;
}

/* ── BUG 4 v12 — DNA Builder bottom truncation ────────────────────────────
   v11 added margin-top to .ps-nav-dna which didn't push body content out
   from under the sticky nav. Add scroll-padding to the scrollable parent
   AND ensure the scene body itself reserves bottom space below the sticky
   nav (which is roughly 96px tall).                                         */
body[data-pa-flow="agent"] #paSellerSlot .ps-scene--dna,
body[data-pa-flow="agent"] #paSellerSlot [data-scene*="dna"],
body[data-pa-flow="agent"] #paSellerSlot [class*="ps-scene"][class*="dna"],
body[data-pa-flow="agent"] #paSellerSlot #psScene3 {
    padding-bottom: 140px !important;
    scroll-padding-bottom: 140px;
}

    body[data-pa-flow="agent"] #paSellerSlot .ps-scene--dna .ps-left,
    body[data-pa-flow="agent"] #paSellerSlot #psScene3 .ps-left,
    body[data-pa-flow="agent"] #paSellerSlot [class*="dna"][class*="builder"] {
        padding-bottom: 140px !important;
        overflow-y: auto;
        max-height: calc(100vh - 60px);
    }
    /* Ensure the sticky nav sits ABOVE the body content with a clear visual gap.
   We also pin a soft white-to-transparent fade above the nav so the last
   row of body content doesn't appear cut on its own. */
    body[data-pa-flow="agent"] #paSellerSlot .ps-nav-dna,
    body[data-pa-flow="agent"] #paSellerSlot #psScene3 .ps-nav {
        position: sticky;
        bottom: 0;
        z-index: 20;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 18%, #fff 38%) !important;
        padding-top: 24px !important;
        margin-top: 24px;
    }

/* ── BUG 5 v12 — Media Studio upload spinner (visual side) ────────────────
   The .is-loading class is now toggled by JS (seller-additions.js v12
   block). These rules paint the cyan tint, dim the zone, and overlay a
   centered spinner — same vocabulary as the profile/agency-logo zones in
   private-agent-profile.css.                                                */
body[data-pa-flow="agent"] #paSellerSlot #psScene4 .is-loading,
body[data-pa-flow="agent"] #paSellerSlot #psScene4 [class*="upload"].is-loading,
body[data-pa-flow="agent"] #paSellerSlot #psScene4 .ps-media-zone.is-loading,
body[data-pa-flow="agent"] #paSellerSlot #psScene4 .ps-upload-zone.is-loading {
    position: relative;
    pointer-events: none;
    background-color: rgba(86, 196, 248, 0.08) !important;
    border-color: var(--brand-cyan-deep, #3FA9D9) !important;
    transition: background-color .2s ease, border-color .2s ease;
}

    body[data-pa-flow="agent"] #paSellerSlot #psScene4 .is-loading > *:not(.pa-zone-spinner) {
        opacity: 0.4;
        transition: opacity .2s ease;
    }

    body[data-pa-flow="agent"] #paSellerSlot #psScene4 .is-loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
        border: 3px solid rgba(86, 196, 248, 0.25);
        border-top-color: var(--brand-cyan-deep, #3FA9D9);
        border-radius: 50%;
        animation: paZoneSpin 0.7s linear infinite;
        z-index: 5;
        pointer-events: none;
    }

@keyframes paZoneSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ── TOOLTIP EXTENSION v12 — disabled-Continue on shared seller scenes ────
   Mirror the agent-side tooltip (private-agent.css v11) for the seller's
   psBtnNext0..5 buttons. Triggered by [disabled][data-hint] OR
   [aria-disabled="true"][data-hint]. Anchored to right edge so the tooltip
   never overflows the viewport. The data-hint attribute is set by the
   seller-additions.js v12 block. */
body[data-pa-flow="agent"] #paSellerSlot .ps-nav,
body[data-pa-flow="agent"] #paSellerSlot .ps-nav-dna {
    overflow: visible !important;
}

body[data-pa-flow="agent"] #paSellerSlot .ps-btn-next[data-hint] {
    position: relative;
}

    body[data-pa-flow="agent"] #paSellerSlot .ps-btn-next[data-hint][disabled]:hover::after,
    body[data-pa-flow="agent"] #paSellerSlot .ps-btn-next[data-hint][aria-disabled="true"]:hover::after,
    body[data-pa-flow="agent"] #paSellerSlot .ps-btn-next[data-hint][disabled]:focus-visible::after,
    body[data-pa-flow="agent"] #paSellerSlot .ps-btn-next[data-hint][aria-disabled="true"]:focus-visible::after {
        content: attr(data-hint);
        position: absolute;
        bottom: calc(100% + 10px);
        right: 0;
        left: auto;
        transform: none;
        background: #0e0e11;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        padding: 8px 12px;
        border-radius: 8px;
        white-space: normal;
        width: max-content;
        max-width: 280px;
        text-align: left;
        box-shadow: 0 8px 24px rgba(14, 14, 17, 0.18);
        z-index: 9999;
        pointer-events: none;
    }

    body[data-pa-flow="agent"] #paSellerSlot .ps-btn-next[data-hint][disabled]:hover::before,
    body[data-pa-flow="agent"] #paSellerSlot .ps-btn-next[data-hint][aria-disabled="true"]:hover::before,
    body[data-pa-flow="agent"] #paSellerSlot .ps-btn-next[data-hint][disabled]:focus-visible::before,
    body[data-pa-flow="agent"] #paSellerSlot .ps-btn-next[data-hint][aria-disabled="true"]:focus-visible::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 4px);
        right: 16px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-top-color: #0e0e11;
        z-index: 9999;
        pointer-events: none;
    }

/* =============================================================================
   v14 — STRUCTURAL CONSISTENCY PASS
   -----------------------------------------------------------------------------
   Goal: Every scene in the property-agent multi-step form (agent-own scenes
   Hub / Profile / Mandate / Commission AND the shared seller scenes Category /
   Location / Details / Features / Media / Pricing / Composer / Launch) must
   share the SAME four-zone layout used by private-seller.css Scene 0 (category):

     ┌─────────────────────────────────────────────────────────┐
     │  .ps-left (flex column, overflow-y:auto)                │
     │  ┌───────────────────────────────────────────────────┐  │
     │  │  STICKY HEADER (position:sticky top:0)            │  │
     │  │  .ps-progress  ← 12-dot rail breadcrumb           │  │
     │  │  .ps-scene-label ← cyan pill (vs orange)          │  │
     │  │  .ps-question    ← h2 with em in cyan             │  │
     │  │  .ps-subtitle    ← helper text                    │  │
     │  └───────────────────────────────────────────────────┘  │
     │                                                          │
     │  SCROLLABLE BODY  (cards / fields / chips / tiles)      │
     │                                                          │
     │  ┌───────────────────────────────────────────────────┐  │
     │  │  STICKY FOOTER (position:sticky bottom:0)         │  │
     │  │  .ps-nav  ← Back + Continue buttons               │  │
     │  └───────────────────────────────────────────────────┘  │
     │                                                          │
     ├──────────────────────────────────────────────────────────┤
     │  .ps-right  (fixed-width, overflow-y:auto)               │
     │  AI intel card (sticky top:0)                           │
     └─────────────────────────────────────────────────────────┘

   Accent colours:
     Private Seller  →  sunset orange  (#F58220 / --sj-orange)
     Property Agent  →  brand cyan     (#56C4F8 / --brand-cyan)

   RULES:
   • All rules below are gated on body[data-pa-flow="agent"] so the
     standalone private-seller flow is 100% untouched.
   • No !important is added to layout dimensions — only to sticky/overflow
     rules that must beat the seller's own bulletproof.css overrides.
   • The v8 block's .ps-left sticky-nav rule stays; this block REINFORCES
     and EXTENDS it to cover agent-own scenes and the right panel.
   ============================================================================= */

/* ── A. BOTH SLOTS: .pa-host (agent scenes) + #psModuleRoot (seller scenes)
       must fill the available stage height as a flex column so sticky
       positioning on children works correctly. ── */
body[data-pa-flow="agent"] .pa-host.pa-host-active,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot,
body[data-pa-flow="agent"] .pa-seller-slot .ps-viewport {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

    /* ── B. .ps-scene in BOTH slots: always a flex row (two-column) ── */
    body[data-pa-flow="agent"] .pa-host .ps-scene,
    body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-scene {
        display: flex !important;
        flex-direction: row !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

@media (max-width: 768px) {
    body[data-pa-flow="agent"] .pa-host .ps-scene,
    body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-scene {
        flex-direction: column !important;
    }
}

/* ── C. LEFT COLUMN — mirrors private-seller.css exactly ── */
/* Dimensions taken from private-seller.css .ps-left (lines 35-49)
   + the sticky overrides from private-seller.css FIX 2 (lines 2373-2379)   */
body[data-pa-flow="agent"] .pa-host .ps-left,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left {
    flex: 1 1 55% !important;
    min-width: 0 !important;
    padding: 0 28px 0 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(14,14,17,0.18) transparent !important;
}

    body[data-pa-flow="agent"] .pa-host .ps-left::-webkit-scrollbar,
    body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left::-webkit-scrollbar {
        width: 5px !important;
    }

    body[data-pa-flow="agent"] .pa-host .ps-left::-webkit-scrollbar-thumb,
    body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left::-webkit-scrollbar-thumb {
        background: rgba(14,14,17,0.14) !important;
        border-radius: 4px !important;
    }

@media (max-width: 720px) {
    body[data-pa-flow="agent"] .pa-host .ps-left,
    body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left {
        padding: 0 16px 0 16px !important;
    }
}

/* ── D. STICKY HEADER GROUP — breadcrumb + scene-label + question
       Mirrors private-seller.css FIX 2 sticky order.
       private-agent-profile.css wraps these in .pa-sticky-header for
       PROFILE scene — that wrapper overrides these (see its own rule).
       For all OTHER scenes (Hub, Mandate, Commission, all seller scenes)
       these per-element stickies apply. ── */
body[data-pa-flow="agent"] .pa-host .ps-left .ps-progress,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left .ps-progress {
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
    background: var(--pa-bg, #fff) !important;
    padding-top: 14px !important;
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
    /* negative margin bleeds to both padding edges so bg masks scroll */
    margin-left: -22px !important;
    margin-right: -28px !important;
    padding-left: 22px !important;
    padding-right: 28px !important;
}

body[data-pa-flow="agent"] .pa-host .ps-left .ps-scene-label,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left .ps-scene-label {
    position: sticky !important;
    top: 38px !important;
    z-index: 11 !important;
    background: var(--pa-bg, #fff) !important;
    padding-bottom: 4px !important;
    margin-top: 8px !important;
}

body[data-pa-flow="agent"] .pa-host .ps-left .ps-question,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left .ps-question {
    position: sticky !important;
    top: 68px !important;
    z-index: 10 !important;
    background: var(--pa-bg, #fff) !important;
    padding-bottom: 4px !important;
    margin-bottom: 2px !important;
}

body[data-pa-flow="agent"] .pa-host .ps-left .ps-subtitle,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left .ps-subtitle {
    position: sticky !important;
    top: 112px !important;
    z-index: 9 !important;
    background: var(--pa-bg, #fff) !important;
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
}

/* Thin fade-line under the sticky block to mask scroll bleed */
body[data-pa-flow="agent"] .pa-host .ps-left::before,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left::before {
    content: "" !important;
    position: sticky !important;
    top: 130px !important;
    display: block !important;
    height: 14px !important;
    margin-top: -14px !important;
    margin-left: -22px !important;
    margin-right: -28px !important;
    background: linear-gradient(180deg, var(--pa-bg, #fff) 0%, transparent 100%) !important;
    z-index: 8 !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
}

/* ── E. STICKY FOOTER NAV — Back + Continue always visible ──
       Mirrors private-seller.css FIX 2 (.ps-nav sticky rule lines 2349-2358)
       + v6 block's agent-specific reinforcement. ── */
body[data-pa-flow="agent"] .pa-host .ps-left .ps-nav,
body[data-pa-flow="agent"] .pa-host .ps-left .ps-nav-dna,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left .ps-nav,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left .ps-nav-dna {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 25 !important;
    /* Bleed to padding edges same as sticky header */
    margin-top: auto !important;
    margin-left: -22px !important;
    margin-right: -28px !important;
    padding: 12px 28px 14px 22px !important;
    background: var(--pa-bg, #ffffff) !important;
    border-top: 1px solid var(--pa-line, rgba(14,14,17,0.08)) !important;
    box-shadow: 0 -4px 16px -8px rgba(14,14,17,0.10) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

@media (max-width: 720px) {
    body[data-pa-flow="agent"] .pa-host .ps-left .ps-nav,
    body[data-pa-flow="agent"] .pa-host .ps-left .ps-nav-dna,
    body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left .ps-nav,
    body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left .ps-nav-dna {
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding: 10px 16px 12px !important;
    }
}

/* ── F. RIGHT COLUMN — mirrors private-seller.css .ps-right (lines 51-67) ──
       Fixed width, gradient background, border-left, scrollable. ── */
body[data-pa-flow="agent"] .pa-host .ps-right,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-right {
    flex: 0 0 42% !important;
    min-width: 260px !important;
    max-width: 340px !important;
    background: linear-gradient(160deg, #fafbfc 0%, #f3f4f6 100%) !important;
    border-left: 1px solid rgba(14,14,17,0.06) !important;
    padding: 20px 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
}

    body[data-pa-flow="agent"] .pa-host .ps-right::-webkit-scrollbar,
    body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-right::-webkit-scrollbar {
        display: none !important;
    }

    /* First intel card sticks to top of right column as user scrolls left */
    body[data-pa-flow="agent"] .pa-host .ps-right > *:first-child,
    body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-right > *:first-child {
        position: sticky !important;
        top: 0 !important;
    }

@media (max-width: 768px) {
    body[data-pa-flow="agent"] .pa-host .ps-right,
    body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-right {
        display: none !important;
    }
}

/* ── G. SCROLLABLE BODY ZONE — breathing room between sticky header and footer
       The content between the sticky header and sticky nav is the scrollable
       zone. A min-height ensures it never collapses and pushes out the footer. */
body[data-pa-flow="agent"] .pa-host .ps-left > *:not(.ps-progress):not(.ps-scene-label):not(.ps-question):not(.ps-subtitle):not(.ps-nav):not(.ps-nav-dna),
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left > *:not(.ps-progress):not(.ps-scene-label):not(.ps-question):not(.ps-subtitle):not(.ps-nav):not(.ps-nav-dna) {
    position: relative;
    z-index: 1;
}

/* ── H. PROFILE SCENE EXCEPTION — .pa-sticky-header wrapper overrides ──
       private-agent-profile.css wraps all four header elements in a single
       <div class="pa-sticky-header">. When that wrapper is present the
       per-element stickies (D above) must be neutralised — the wrapper
       already handles the combined sticky. ── */
body[data-pa-flow="agent"] .pa-host .ps-left .pa-sticky-header .ps-progress,
body[data-pa-flow="agent"] .pa-host .ps-left .pa-sticky-header .ps-scene-label,
body[data-pa-flow="agent"] .pa-host .ps-left .pa-sticky-header .ps-question,
body[data-pa-flow="agent"] .pa-host .ps-left .pa-sticky-header .ps-subtitle {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Also disable the ::before fade when .pa-sticky-header is present */
body[data-pa-flow="agent"] .pa-host .ps-left:has(.pa-sticky-header)::before {
    display: none !important;
}

/* ── I. HUB SCENE — no ps-scene-label / ps-question, so progress dots sit
       at the top with more breathing room below. ── */
body[data-pa-flow="agent"] [data-pa-hub-scene] .ps-left .ps-progress {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
}

/* ── J. DNA Builder scene — workarea needs extra bottom padding so last
       row is visible above the sticky nav. ── */
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot #psScene2 .ps-left,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-scene--dna .ps-left {
    scroll-padding-bottom: 80px !important;
}

body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot #psScene2 .ps-dna-workarea,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-scene--dna .ps-dna-workarea {
    padding-bottom: 80px !important;
}


/* ============================================================================
   SCENE 1 (Property Character) — subtype banner growth (v2 breadcrumb space)
   ----------------------------------------------------------------------------
   Flattening the breadcrumb and dropping the redundant scene-label pill freed
   vertical room on this scene. Grow the subtype preview image by ~20% on
   DESKTOP only so it reads as a proper banner. Scoped to:
     • the standalone seller flow (body:not([data-pa-flow="agent"]))
     • #psScene1's own .ps-left (so nothing else is touched)
     • min-width:769px (mobile keeps its existing scroll-region treatment from
       private-seller-mobile-redesign.css — untouched)
   We override flex-BASIS + height only (not flex-grow/shrink), so the banner
   stays `flex: 0 1` — i.e. it can still shrink if space is tight and therefore
   can never push the Back/Continue bar or the chip grid out of place; the
   scrollable chip grid absorbs the difference.
   Specificity (2,3,1) clears the base rule above and every #psScene1 rule. */
@media (min-width: 769px) {
    body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene#psScene1 > .ps-left > .ps-subtype-banner {
        flex-basis: clamp(132px, 26vh, 211px) !important; /* +10% again (was 120/24vh/192) */
        height: clamp(132px, 26vh, 211px) !important;
        min-height: 118px !important; /* +10% (was 108) */
    }
}