/* ============================================================================
private-agent-shared-scenes.css (v1 — clean rebuild)
----------------------------------------------------------------------------
PURPOSE
The single CSS source of truth for the shared-scene engine in
PrivateAgent.cshtml. Replaces the patch trio that kept fighting each
other:
- private-agent-bulletproof.css (cyan tinting via overrides)
- private-agent-layout-fix.css (height/width patches)
- journey-header-alignment.css (was just for the shell header)
Those three files should be removed from _Layout.cshtml's when
this one is added.
HOW THIS WORKS
The seller's own private-seller.css continues to style every shared
scene exactly as in the standalone seller — column layout, card grid,
pill chips, sticky headers, etc. We DO NOT re-style shared scenes;
we only:
(1) Set up the shell header bar (cyan rail + step counter).
(2) Define the visible mount slot (#paSellerHost) so it inherits
full height from .pa-stage.
(3) Hide the seller's "Private Seller" pill on Scene 0 only — every
later scene shows useful breadcrumb context (Residential > House)
which we KEEP.
(4) Hide the seller's own dot rail (.ps-progress) inside agent flow,
because the shell header already has the cyan rail.
(5) Make the .ps-nav (Back / Continue) sticky to the bottom of the
visible scene, no matter the content height.
(6) Theme accent colours via CSS custom properties scoped to
body[data-pa-flow="agent"] — no per-element overrides.
Anything outside agent flow renders untouched. The seller standalone
experience is exactly as before — sunset orange, no cyan bleed.
LOAD ORDER
This file loads AFTER private-seller.css and BEFORE the agent's own
scene-specific CSS files (profile.css etc.).
============================================================================ */
/* ───────────────────────────────────────────────────────────────────────────
1. SHELL HEADER BAR — single source of truth for progress
─────────────────────────────────────────────────────────────────────────── */
#privateAgentModule.pa-module-shell {
flex-direction: column !important;
}
#privateAgentModule .pa-shell-header {
flex: 0 0 auto;
height: 46px;
background: #ffffff;
border-bottom: 1px solid rgba(14, 14, 17, .08);
box-shadow: 0 2px 8px -4px rgba(14, 14, 17, .06);
z-index: 60;
position: relative;
overflow: hidden;
}
#privateAgentModule .pa-shell-header-inner {
display: flex;
align-items: center;
height: 100%;
padding: 0 18px;
gap: 12px;
}
#privateAgentModule .pa-shell-brand {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Outfit', sans-serif;
font-size: 0.75rem;
font-weight: 700;
color: #0e0e11;
flex: 0 0 auto;
white-space: nowrap;
}
#privateAgentModule .pa-shell-brand .pa-icon {
width: 14px;
height: 14px;
color: #3fa9d9;
}
#privateAgentModule .pa-shell-rail {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 5px;
overflow-x: auto;
scrollbar-width: none;
padding: 2px 0;
}
#privateAgentModule .pa-shell-rail::-webkit-scrollbar {
display: none;
}
#privateAgentModule .pa-shell-rail .ps-dot,
#privateAgentModule .pa-shell-rail .rail-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(14, 14, 17, .16);
flex-shrink: 0;
transition: background 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
cursor: default;
}
#privateAgentModule .pa-shell-rail .ps-dot.active,
#privateAgentModule .pa-shell-rail .rail-dot.active {
width: 10px;
height: 10px;
background: #56C4F8 !important;
box-shadow: 0 0 0 3px rgba(86, 196, 248, .25);
}
#privateAgentModule .pa-shell-rail .ps-dot.done,
#privateAgentModule .pa-shell-rail .rail-dot.done {
background: #3fa9d9;
}
#privateAgentModule .pa-shell-step-counter {
flex: 0 0 auto;
font-family: 'Outfit', sans-serif;
font-size: 0.6875rem;
font-weight: 700;
color: rgba(14, 14, 17, .45);
white-space: nowrap;
letter-spacing: 0.02em;
}
#privateAgentModule .pa-change-role {
position: static !important;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
border-radius: 999px;
background: #F4F7F9;
border: 1px solid rgba(14, 14, 17, .12);
color: rgba(14, 14, 17, .55);
font-family: 'Outfit', sans-serif;
font-size: 0.6875rem;
font-weight: 600;
cursor: pointer;
transition: background 0.18s, border-color 0.18s, color 0.18s;
white-space: nowrap;
}
#privateAgentModule .pa-change-role:hover {
background: rgba(86, 196, 248, .10);
border-color: rgba(86, 196, 248, .40);
color: #3fa9d9;
}
#privateAgentModule .pa-stage {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
position: relative;
}
/* ───────────────────────────────────────────────────────────────────────────
2. DUPLICATE-RAIL PREVENTION
Hide the per-scene .ps-progress dot row inside AGENT scenes (Hub,
Profile, Mandate, Commission) AND inside the shared mount. The shell
header is the single source of truth for progress.
─────────────────────────────────────────────────────────────────────────── */
#privateAgentModule .pa-host .pa-sticky-header .ps-progress,
#privateAgentModule .pa-host .pa-sticky-header [data-pa-progress-host],
#privateAgentModule #paSellerHost .ps-progress,
#privateAgentModule #paSellerHost [data-pa-progress-host] {
display: none !important;
}
/* ───────────────────────────────────────────────────────────────────────────
3. SHARED-SCENE SLOT — the visible mount where borrowed scenes appear
─────────────────────────────────────────────────────────────────────────── */
#privateAgentModule #paSellerHost {
width: 100%;
height: 100%;
min-height: 0;
display: none;
overflow: hidden;
background: #ffffff;
}
#privateAgentModule #paSellerHost.is-visible {
display: flex;
flex-direction: column;
}
/* The active borrowed scene fills the entire shared slot. */
#privateAgentModule #paSellerHost > .ps-scene {
display: flex !important;
flex: 1 1 auto !important;
width: 100% !important;
min-height: 0 !important;
height: 100% !important;
overflow: hidden !important;
}
/* Propagate min-height through the seller's own column structure so its
internal overflow:auto on .ps-left actually fires. */
#privateAgentModule #paSellerHost > .ps-scene > .ps-left,
#privateAgentModule #paSellerHost > .ps-scene > .ps-right {
min-height: 0 !important;
max-height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* ───────────────────────────────────────────────────────────────────────────
4. (reserved — v2 architecture has no separate hidden donor; the seller's
full carousel lives inside #paSellerHost which IS the visible mount when
a shared scene is active. Visibility is toggled by the .is-visible class.)
─────────────────────────────────────────────────────────────────────────── */
/* ───────────────────────────────────────────────────────────────────────────
5. HIDE THE SELLER'S OWN BREADCRUMB PILL AND SCENE-LABEL EYEBROW
The shell header at the top of #privateAgentModule already shows:
• Brand mark ("Agent Studio")
• Cyan dot rail
• "Step N / 12" counter
• Change Role button
So inside #paSellerHost we hide the seller's own redundant chrome:
• .ps-breadcrumb — would say "Private Seller" on scene 0,
"Residential > House" on later scenes (the
shell already conveys progress; keeping this
chrome wastes vertical space and is duplicative).
• .ps-scene-label — the small eyebrow text ("PROPERTY CHARACTER",
"DNA BUILDER", "VALUE INTELLIGENCE", etc.)
duplicates info already implicit in the user's
progress along the rail.
These rules ONLY apply inside #paSellerHost, so the seller's standalone
experience is untouched — the breadcrumb + eyebrow still appear there
exactly as before (sunset orange, with their full helpful context).
─────────────────────────────────────────────────────────────────────────── */
#privateAgentModule #paSellerHost .ps-breadcrumb,
#privateAgentModule #paSellerHost .ps-scene-label {
display: none !important;
}
/* SCENE 5 (Subtype) — hide the empty banner placeholder. Seller's
#psSubtypeBannerPlaceholder shows a broken-image icon + "Image coming
soon" label until a chip is selected. In agent flow this looks like
a layout glitch (empty dashed box). Hide the placeholder; the actual
image still appears when seller loads it (seller sets the image's
display:block once the photo loads). */
#privateAgentModule #paSellerHost #psSubtypeBannerPlaceholder {
display: none !important;
}
/* Belt-and-braces: if the seller's ![]()
inside #psSubtypeBanner is
rendered before a chip is clicked, it has no src and the browser
paints the broken-image glyph (the small picture-frame icon the
user reported as "the placeholder icon is showing"). Hide ANY
img inside the banner that doesn't have a real src yet.
:not([src]) catches the ![]()
with src attribute missing.
:not([src=""]) — added with a separate selector — catches the case
where seller's JS resets src="" when no chip is active. The
`[src=""]` form needs its own rule because :not(:not()) and
chained :not() pseudo-classes vary across older Chromium builds. */
#privateAgentModule #paSellerHost #psSubtypeBanner img:not([src]),
#privateAgentModule #paSellerHost #psSubtypeBanner img[src=""],
#privateAgentModule #paSellerHost #psSubtypeBanner img[src="#"] {
display: none !important;
visibility: hidden !important;
}
/* Also remove the banner's dashed-border placeholder treatment in agent
flow. Seller's CSS adds `border-style: dashed` whenever the placeholder
isn't display:none — but we've just made it display:none above, so the
`:has()` selector should already not match. This is a belt-and-braces
guard for browsers without :has() support. The transparent background
means there is no visible empty box at all when no chip is selected — the
banner disappears completely until the user picks a property type. */
#privateAgentModule #paSellerHost #psSubtypeBanner {
border-style: solid !important;
border-color: transparent !important;
border-width: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* When the banner has no loaded image yet (no .has-image class on the
banner OR the inner img), collapse the banner's visible footprint to
zero so the row underneath sits flush with the chips. Once seller
sets the img src, the :has() rule below releases the collapse and
the banner takes its natural height with the loaded illustration. */
#privateAgentModule #paSellerHost #psSubtypeBanner:not(:has(img[src]:not([src=""]))) {
min-height: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/* ───────────────────────────────────────────────────────────────────────────
6. STICKY NAV — Back / Continue ALWAYS pinned to the bottom of every
shared scene, regardless of content length.
How this works:
• .ps-left is forced to a full-height flex column with overflow-y:auto.
• All children except .ps-nav stay at their natural size (flex: 0 0 auto).
• .ps-nav uses margin-top: auto (push to bottom in flex flow) AND
position: sticky; bottom: 0 (stay visible when .ps-left scrolls).
• Together: short content → nav at bottom of viewport (pushed by margin).
Long content → nav sticks to bottom while content scrolls behind.
• The seller's own scrollbar-width: none is overridden so the user
actually sees a scrollbar when content overflows (step 6 Garages
was previously cut off because no scrollbar appeared).
─────────────────────────────────────────────────────────────────────────── */
#privateAgentModule #paSellerHost .ps-scene > .ps-left:not(.ps-workbench-left) {
/* Force the seller's own padding+layout to behave as a full-height
scroll container with the nav at the bottom. Override seller's
overflow:hidden (from the second .ps-left rule) and scrollbar:none.
Scene 3 (.ps-workbench-left) is excluded because it already has
its own internal scroll structure: .ps-workbench-canvas inside
takes care of overflow. Applying overflow-y:auto here too would
create nested scrollbars. */
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: thin !important; /* show a scrollbar when needed */
padding: 4px 28px 0 28px !important; /* tight top padding — heading sits near top, more room for content */
gap: 0 !important;
}
/* Scene 3 (.ps-workbench-left) — keep seller's overflow:hidden but ensure
flex column structure works for the heading-canvas-foot stacking. */
#privateAgentModule #paSellerHost .ps-scene > .ps-left.ps-workbench-left {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
/* keep seller's overflow:hidden — the .ps-workbench-canvas inside scrolls */
}
/* SCENE 7 (Features / Value Intelligence) — the .ps-workbench-canvas is the
actual scroll container. Seller hides its scrollbar by default; in agent
flow we make it visible so the user can see and use it when feature
clusters overflow (8 buyer personas don't always fit in the viewport). */
#privateAgentModule #paSellerHost .ps-workbench-canvas {
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: thin !important;
min-height: 0 !important;
}
#privateAgentModule #paSellerHost .ps-workbench-canvas::-webkit-scrollbar {
width: 6px;
}
#privateAgentModule #paSellerHost .ps-workbench-canvas::-webkit-scrollbar-track {
background: transparent;
}
#privateAgentModule #paSellerHost .ps-workbench-canvas::-webkit-scrollbar-thumb {
background: rgba(14, 14, 17, 0.18);
border-radius: 3px;
}
/* All direct children of .ps-left are fixed-size in the flex flow except
the nav which is auto-pushed to the bottom. */
#privateAgentModule #paSellerHost .ps-scene > .ps-left > * {
flex: 0 0 auto;
}
/* STICKY SCENE HEADER — keep BOTH the heading AND its supporting subtitle
pinned at the top of .ps-left, as a single visually-unified band, while
only the body content (cards, fields, etc.) scrolls underneath.
PREVIOUS BEHAVIOUR (and why it was wrong):
• Only .ps-question was sticky. .ps-subtitle was in normal flow.
• Result:
- When the viewport was narrow (agent right-rail compresses the
left column), the seller's What are you listing today?
wrapped to two lines. The em ("listing today?") wrapped onto
line 2. As the user scrolled, the subtitle slid up under
.ps-question — but because .ps-subtitle had no white background,
the body content beneath ALSO bled through and visually clipped
the em on line 2, which the user reported as "the em is missing".
- The seller's own ::before / ::after gradient on .ps-question
rendered as a "horizontal gradient line" right above the cards.
FIX (this rule):
• Both .ps-question and .ps-subtitle are sticky as a stack: heading at
top:0, subtitle at top:auto-after-heading via natural flow inside
a sticky group.
• Both carry an explicit, opaque #ffffff background and full-bleed
horizontal padding so body content scrolling underneath is fully
covered — no bleed-through.
• z-index high enough to clear any seller card hover shadows.
• Any pseudo-elements that drew the gradient line are neutralised. */
#privateAgentModule #paSellerHost .ps-scene > .ps-left > .ps-question {
position: sticky;
top: 0;
z-index: 6;
background: #ffffff !important;
background-color: #ffffff !important;
margin-left: -28px;
margin-right: -28px;
padding-left: 28px;
padding-right: 28px;
padding-top: 8px;
padding-bottom: 4px;
/* honor seller's natural h2 height — no min/max-height, no line-clamp.
Multi-line headings render at full height without clipping. */
}
/* Em inside the sticky heading: render INLINE so "What are you
listing today?" sits on the same line whenever the column is wide
enough. When the column wraps, the em wraps with the text rather
than being pulled onto its own line by an inherited display:block. */
#privateAgentModule #paSellerHost .ps-scene > .ps-left > .ps-question em,
#privateAgentModule #paSellerHost .ps-scene > .ps-left > .ps-question strong {
display: inline !important;
white-space: normal !important;
}
/* Kill any pseudo-element gradient line the seller's CSS may attach
to .ps-question (its sunset-orange divider). In agent flow the
sticky band itself is the divider — clean, no gradient. */
#privateAgentModule #paSellerHost .ps-scene > .ps-left > .ps-question::before,
#privateAgentModule #paSellerHost .ps-scene > .ps-left > .ps-question::after,
#privateAgentModule #paSellerHost .ps-scene > .ps-left > .ps-subtitle::before,
#privateAgentModule #paSellerHost .ps-scene > .ps-left > .ps-subtitle::after {
display: none !important;
content: none !important;
background: none !important;
border: none !important;
}
/* Subtitle ALSO sticky — sits directly under the heading, same opaque
white background, so the heading+paragraph travel together as one
fixed band. Positioned at top:auto via stacking-context (the heading
is at top:0 with its own height; subtitle naturally lays out below
inside the same .ps-left sticky stack via top:).
In practice top:48px covers the typical heading height; on overflow
the heading still wins (z-index 6 > 5) so they never visually swap. */
#privateAgentModule #paSellerHost .ps-scene > .ps-left > .ps-subtitle {
position: sticky;
top: 48px;
z-index: 5;
background: #ffffff !important;
background-color: #ffffff !important;
margin-left: -28px;
margin-right: -28px;
padding-left: 28px;
padding-right: 28px;
padding-top: 0;
padding-bottom: 10px;
margin-top: 0;
margin-bottom: 6px;
/* Soft shadow at the bottom edge so the user gets a visual cue that
content is scrolling UNDER the sticky band — without the harsh
gradient line we removed above. */
box-shadow: 0 6px 8px -8px rgba(14, 14, 17, 0.10);
/* No border-bottom — the box-shadow above is the divider. */
border-bottom: 0 !important;
}
/* SCENE 3 (Features / Value Intelligence) — different markup. The heading
lives inside .ps-workbench-heading inside .ps-workbench-top, and the
.ps-left has the additional class .ps-workbench-left. Scene 3's
.ps-workbench-top is already flex-shrink:0 (pinned at top of flex flow)
and .ps-workbench-canvas is its own scroll area. We just need to
reinforce the natural sticky behavior + add the sticky-foot rule below. */
#privateAgentModule #paSellerHost .ps-workbench-left > .ps-workbench-top {
position: sticky;
top: 0;
z-index: 4;
background: #ffffff;
flex-shrink: 0;
}
/* The nav: flex:auto-bottom + sticky to viewport bottom.
Covers BOTH .ps-nav (scenes 0,1,2,4,5,6,7) AND .ps-workbench-foot
(scene 3 = Features / Value Intelligence). Scene 3's foot lives inside
.ps-workbench-left (not .ps-left), so we use a separate selector. */
#privateAgentModule #paSellerHost .ps-scene > .ps-left > .ps-nav,
#privateAgentModule #paSellerHost .ps-workbench-left > .ps-workbench-foot {
margin-top: auto !important; /* short content → push to bottom */
position: sticky !important; /* long content → stay visible while scrolling */
bottom: 0 !important;
z-index: 5;
display: flex !important;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 0 16px 0 !important;
background: #ffffff !important; /* clean white, no gradient line */
border-top: none !important; /* kill seller's border-top on workbench-foot */
flex-shrink: 0;
}
/* WebKit scrollbar styling so the visible scrollbar isn't ugly. */
#privateAgentModule #paSellerHost .ps-scene > .ps-left::-webkit-scrollbar {
width: 6px;
}
#privateAgentModule #paSellerHost .ps-scene > .ps-left::-webkit-scrollbar-track {
background: transparent;
}
#privateAgentModule #paSellerHost .ps-scene > .ps-left::-webkit-scrollbar-thumb {
background: rgba(14, 14, 17, 0.18);
border-radius: 3px;
}
/* Same scroll treatment for the seller's right intel column so users
can see all market-signal / digital-twin readouts on tall screens. */
#privateAgentModule #paSellerHost .ps-scene > .ps-right {
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: thin !important;
min-height: 0 !important;
max-height: 100% !important;
}
#privateAgentModule #paSellerHost .ps-scene > .ps-right::-webkit-scrollbar {
width: 6px;
}
#privateAgentModule #paSellerHost .ps-scene > .ps-right::-webkit-scrollbar-thumb {
background: rgba(14, 14, 17, 0.18);
border-radius: 3px;
}
/* ───────────────────────────────────────────────────────────────────────────
7. CYAN ACCENT THEMING — applied via inheritance, not overrides
The seller's own classes (.ps-cat-card, .ps-chip, .ps-btn-next, etc.)
reference CSS custom properties. Inside agent flow we redefine those
properties to point at cyan. No per-element override needed.
─────────────────────────────────────────────────────────────────────────── */
body[data-pa-flow="agent"] #paSellerHost {
/* The seller's CSS uses --sj-orange / --sj-orange-dark / etc. (defined
in sell-journey.css :root). Re-declare them inside the agent's
seller host so cyan replaces sunset orange WITHOUT touching the
seller's own CSS files. This is the SINGLE source of theme override
— every cyan accent in shared scenes flows from these four lines. */
--sj-orange: #56C4F8;
--sj-orange-dark: #3FA9D9;
--sj-orange-light: #EAF7FE;
--sj-orange-mid: #B8E3F7;
}
/* Continue / Back buttons — the seller paints these with its accent.
With the var override above they'll already be cyan, but we set an
explicit cyan with high specificity to guard against hardcoded oranges
in private-seller.css. */
body[data-pa-flow="agent"] #paSellerHost .ps-btn-next:not(:disabled) {
background: linear-gradient(135deg, #56C4F8 0%, #3fa9d9 100%) !important;
color: #fff !important;
border: 1px solid #3fa9d9 !important;
box-shadow: 0 8px 18px -10px rgba(86, 196, 248, 0.55) !important;
}
body[data-pa-flow="agent"] #paSellerHost .ps-btn-next:disabled {
background: rgba(14, 14, 17, 0.08) !important;
background-image: none !important;
color: rgba(14, 14, 17, 0.45) !important;
border: 1px solid rgba(14, 14, 17, 0.10) !important;
box-shadow: none !important;
cursor: not-allowed !important;
opacity: 1 !important;
}
body[data-pa-flow="agent"] #paSellerHost .ps-btn-back {
background: #F4F7F9 !important;
border: 1px solid rgba(14, 14, 17, .12) !important;
color: rgba(14, 14, 17, .65) !important;
}
body[data-pa-flow="agent"] #paSellerHost .ps-btn-back:hover {
background: rgba(86, 196, 248, .10) !important;
border-color: rgba(86, 196, 248, .40) !important;
color: #3fa9d9 !important;
}
/* Selected state on cards / pills uses cyan. We override BOTH the card-
level styles AND the icon/name inside, because the seller hardcodes
rgba(245,130,32,...) shadows that the var redefinition can't reach. */
body[data-pa-flow="agent"] #paSellerHost .ps-cat-card.selected,
body[data-pa-flow="agent"] #paSellerHost .ps-chip.selected {
border-color: #3FA9D9 !important;
background: rgba(86, 196, 248, 0.08) !important;
box-shadow: 0 6px 20px rgba(86, 196, 248, 0.20) !important;
color: #0e0e11 !important;
}
body[data-pa-flow="agent"] #paSellerHost .ps-cat-card.selected .ps-cat-icon {
background: linear-gradient(135deg, #56C4F8 0%, #3FA9D9 100%) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(86, 196, 248, 0.30) !important;
}
body[data-pa-flow="agent"] #paSellerHost .ps-cat-card.selected .ps-cat-name {
color: #3FA9D9 !important;
}
/* Hover state — cyan tints replacing seller's orange tints. */
body[data-pa-flow="agent"] #paSellerHost .ps-cat-card:hover {
border-color: rgba(86, 196, 248, 0.30) !important;
box-shadow: 0 8px 22px rgba(86, 196, 248, 0.18) !important;
}
/* Question heading inside shared scenes uses cyan. */
body[data-pa-flow="agent"] #paSellerHost .ps-question em,
body[data-pa-flow="agent"] #paSellerHost .ps-question strong {
color: #3fa9d9 !important;
font-style: normal;
background: none !important;
}
/* (Breadcrumb + scene-label tinting rules removed — these elements are now
hidden in agent flow per section 5. The seller's standalone experience
keeps them in sunset orange exactly as before.) */
/* ───────────────────────────────────────────────────────────────────────────
8. CHANGE-ROLE BUTTON ON SHARED SCENES
The seller's psBtnBack0 says "Change Role" — but in agent flow it's
actually a "Back to Mandate" button (intercept handled in JS). Just
relabel via CSS (text replaced by content swap) to avoid confusion.
─────────────────────────────────────────────────────────────────────────── */
body[data-pa-flow="agent"] #paSellerHost #psBtnBack0 {
font-size: 0; /* hide original text */
}
body[data-pa-flow="agent"] #paSellerHost #psBtnBack0::before {
content: "← Back";
font-size: 0.875rem;
font-weight: 600;
}
body[data-pa-flow="agent"] #paSellerHost #psBtnBack0 i {
display: none;
}
/* ───────────────────────────────────────────────────────────────────────────
9. RESPONSIVE — same breakpoints as the seller's own CSS
─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
#privateAgentModule .pa-shell-header {
height: 42px;
}
#privateAgentModule #paSellerHost .ps-scene {
flex-direction: column !important;
}
#privateAgentModule #paSellerHost .ps-scene > .ps-left,
#privateAgentModule #paSellerHost .ps-scene > .ps-right {
width: 100% !important;
flex: 1 1 auto !important;
max-height: none !important;
}
}
@media (max-width: 540px) {
#privateAgentModule .pa-shell-brand span,
#privateAgentModule .pa-shell-step-counter {
display: none;
}
#privateAgentModule .pa-change-role span {
display: none;
}
#privateAgentModule .pa-shell-header-inner {
padding: 0 12px;
gap: 8px;
}
}
/* ───────────────────────────────────────────────────────────────────────────
10. DEFINITIVE OVERRIDES — beats every rule in seller-additions.css
This section exists because seller-additions.css ships SEVERAL competing
rule-sets that all use `body[data-pa-flow="agent"] #psModuleRoot ...`
selectors with `!important`. Those rules predate this file and were
never removed when the new shared-scenes architecture landed. They:
(a) Make .ps-progress / .ps-scene-label / .ps-question all sticky at
different `top` values (0 / 30 / 52, then a SECOND ruleset at 68),
and .ps-subtitle sticky at 112. Net effect: when the heading
wraps to 2 lines (because the agent right-rail narrows .ps-left
in cyan flow), the subtitle's sticky white band overlaps line 2
of the heading — which the user sees as "the em is missing"
because line 2 is exactly where "listing today?" sits.
(b) Apply a cyan-gradient text fill on .ps-question em via
`background: linear-gradient(...); -webkit-background-clip: text;
-webkit-text-fill-color: transparent;`. When the gradient is
#56c4f8 → #3fa9d9 over a white background, it can read as
near-invisible to the user (and on some browsers the gradient
clips wrong on wrapped text, rendering as fully transparent).
(c) Inject TWO ::before pseudo-elements with linear-gradient
backgrounds at top:110px and top:130px to create a "soft fade"
under the sticky band. Visually those render as a horizontal
gradient line right above the body content — the user has been
calling this "the gradient line that should be removed".
(d) The seller's .ps-dna-panel-location .ps-location-card ships a
`linear-gradient(145deg, #ffffff 0%, #fff7ed 46%, #f8fbff 100%)`
where #fff7ed is a sunset-orange wash. In agent-flow it bleeds
through as a peach tint at the top of the panel, which clashes
with the cyan theme.
We can't edit seller-additions.css from here without risk of breaking
the standalone seller flow (it's a shared file). Instead we override
in this scope-limited file, scoped to BOTH agent-flow AND the seller
host — selectors that will outrank or tie + win-by-cascade against
every rule in seller-additions.css for the same property. */
/* ── 10a. Em visibility — kill the gradient text fill, render solid cyan.
Selector pairs every variant the seller-additions and private-seller files
reach for. */
body[data-pa-flow="agent"] #paSellerHost .ps-question em,
body[data-pa-flow="agent"] #paSellerHost .ps-question strong,
body[data-pa-flow="agent"] #psModuleRoot .ps-question em,
body[data-pa-flow="agent"] #psModuleRoot .ps-question strong,
body[data-pa-flow="agent"] #privateAgentModule #paSellerHost .ps-question em,
body[data-pa-flow="agent"] #privateAgentModule #paSellerHost .ps-question strong {
background: none !important;
background-image: none !important;
background-color: transparent !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: var(--brand-cyan-deep, #3fa9d9) !important;
color: var(--brand-cyan-deep, #3fa9d9) !important;
font-style: normal !important;
font-weight: 700 !important;
/* Keep on the same line as surrounding text whenever the column allows;
only wrap when the column is too narrow to fit. */
display: inline !important;
white-space: normal !important;
/* Defensive — some browsers still honour an inherited `font-synthesis`
that can disable italic/bold, restore the default so the weight wins. */
font-synthesis: weight style !important;
}
/* ── 10b. STICKY-STACK NEUTRALIZATION — kill seller-additions's per-element
sticky rules. The two we need to cancel:
(i) body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-progress
/ .ps-scene-label / .ps-question — all `position: sticky;`
stacked at 0 / 30 / 52.
(ii) body[data-pa-flow="agent"] .pa-host .ps-left .ps-question /
.ps-subtitle — sticky at 68 / 112.
We can't undo position:sticky cleanly with another sticky rule of equal
specificity — it just stacks weirdly. Instead force the elements OUT of
the sticky chain entirely with `position: static !important; top: auto;`,
then re-apply OUR single sticky band (10c) below. */
body[data-pa-flow="agent"] #paSellerHost .ps-left .ps-progress,
body[data-pa-flow="agent"] #paSellerHost .ps-left .ps-scene-label,
body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-progress,
body[data-pa-flow="agent"] #psModuleRoot .ps-left .ps-scene-label {
/* These are already `display: none` from section 5 — reinforce so
even if a later rule turns them visible, they don't re-enter the
sticky chain. */
display: none !important;
position: static !important;
top: auto !important;
}
/* ── 10c. UNIFIED STICKY BAND for heading + subtitle.
Both elements stick to top:0 of the .ps-left scroll container, with a
solid white background and adequate padding, so that:
• the entire band moves as a single visual unit;
• body content cards / forms scroll UNDER the band, with no
bleed-through (background-color is opaque);
• the wrapped second line of the heading (when present) is part of
the same opaque band so the em "listing today?" / "the property?"
/ "market identity." remains visible — never covered by another
sticky element below it.
Heading at top:0, subtitle at top:auto (flows naturally inside the
sticky context). Together they form ONE sticky band that occupies
the full top of .ps-left until the user scrolls. Implemented using
the parent .ps-left as a flex column + the heading + subtitle as
sticky children at the same top reference. */
body[data-pa-flow="agent"] #paSellerHost .ps-scene > .ps-left > .ps-question,
body[data-pa-flow="agent"] #psModuleRoot .ps-left > .ps-question,
body[data-pa-flow="agent"] #privateAgentModule #paSellerHost .ps-scene > .ps-left > .ps-question {
position: sticky !important;
top: 0 !important;
z-index: 6 !important;
background: #ffffff !important;
background-color: #ffffff !important;
margin-left: -28px !important;
margin-right: -28px !important;
padding-left: 28px !important;
padding-right: 28px !important;
padding-top: 8px !important;
padding-bottom: 4px !important;
margin-bottom: 0 !important;
/* No shadow / border — the subtitle band just below will carry the
single divider for the whole sticky block. */
box-shadow: none !important;
border-bottom: 0 !important;
}
body[data-pa-flow="agent"] #paSellerHost .ps-scene > .ps-left > .ps-subtitle,
body[data-pa-flow="agent"] #psModuleRoot .ps-left > .ps-subtitle,
body[data-pa-flow="agent"] #privateAgentModule #paSellerHost .ps-scene > .ps-left > .ps-subtitle {
position: sticky !important;
/* Slightly under the heading. In practice .ps-question varies between
~36px (one-line) and ~64px (two-line) tall — at top:36px both
single-line and wrapped headings show the subtitle directly under
the heading. Browsers honour the larger value automatically when
the heading is taller because the subtitle is in the normal flow
beneath it; this `top` simply controls when it pins. */
top: 36px !important;
z-index: 5 !important;
background: #ffffff !important;
background-color: #ffffff !important;
margin-left: -28px !important;
margin-right: -28px !important;
padding-left: 28px !important;
padding-right: 28px !important;
padding-top: 0 !important;
padding-bottom: 10px !important;
margin-top: 0 !important;
margin-bottom: 6px !important;
/* The single visual divider for the whole sticky block — soft
shadow, no harsh line. */
box-shadow: 0 6px 8px -8px rgba(14, 14, 17, 0.10) !important;
border-bottom: 0 !important;
}
/* ── 10d. KILL ALL ::before / ::after gradient pseudo-elements that
render the "horizontal gradient line". Targets every selector path
seller-additions.css uses to attach them. */
body[data-pa-flow="agent"] #paSellerHost .ps-left::before,
body[data-pa-flow="agent"] #paSellerHost .ps-left::after,
body[data-pa-flow="agent"] #psModuleRoot .ps-left::before,
body[data-pa-flow="agent"] #psModuleRoot .ps-left::after,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left::before,
body[data-pa-flow="agent"] .pa-seller-slot #psModuleRoot .ps-left::after,
body[data-pa-flow="agent"] #paSellerHost .ps-question::before,
body[data-pa-flow="agent"] #paSellerHost .ps-question::after,
body[data-pa-flow="agent"] #paSellerHost .ps-subtitle::before,
body[data-pa-flow="agent"] #paSellerHost .ps-subtitle::after,
body[data-pa-flow="agent"] #psModuleRoot .ps-question::before,
body[data-pa-flow="agent"] #psModuleRoot .ps-question::after,
body[data-pa-flow="agent"] #psModuleRoot .ps-subtitle::before,
body[data-pa-flow="agent"] #psModuleRoot .ps-subtitle::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
border: 0 !important;
height: 0 !important;
margin: 0 !important;
}
/* ── 10e. NEUTRALIZE the seller's #fff7ed orange wash inside DNA scene
location card. Repaint with a pure-white + cyan radial accent so the
panel reads as cyan in agent flow. This rule is scoped to BOTH the
agent-flow body attribute AND the seller host so the seller's
standalone view keeps its sunset wash untouched. */
body[data-pa-flow="agent"] #paSellerHost .ps-dna-panel-location .ps-location-card,
body[data-pa-flow="agent"] #psModuleRoot .ps-dna-panel-location .ps-location-card {
background: radial-gradient(circle at 85% 12%, rgba(86, 196, 248, 0.18), transparent 32%), linear-gradient(145deg, #ffffff 0%, #f3f8fc 46%, #ffffff 100%) !important;
}
/* ── 10f. The DNA scene's .ps-dna-panel-twin and .ps-dna-panel-metrics
often inherit the same orange wash through other selectors. Force
their backgrounds to a clean cyan-tinted white so all three cards
match in agent flow. */
body[data-pa-flow="agent"] #paSellerHost .ps-dna-panel-metrics,
body[data-pa-flow="agent"] #paSellerHost .ps-dna-panel-twin,
body[data-pa-flow="agent"] #psModuleRoot .ps-dna-panel-metrics,
body[data-pa-flow="agent"] #psModuleRoot .ps-dna-panel-twin {
background: linear-gradient(145deg, #ffffff 0%, #f3f8fc 60%, #ffffff 100%) !important;
}
/* ── 10g. The "AWAITING PIN" pill in the spatial anchor section ships
in seller-orange tones; rebrand to cyan for agent flow. */
body[data-pa-flow="agent"] #paSellerHost .ps-panel-kicker,
body[data-pa-flow="agent"] #psModuleRoot .ps-panel-kicker {
background: rgba(86, 196, 248, 0.11) !important;
color: var(--brand-cyan-deep, #3fa9d9) !important;
}