/* ============================================================ 2BE CLOTHING WORLD — PHASE 9 STYLE ASSISTANT Corner launcher + side panel. Guide tokens only: radius 0 (§01), 8px grid (§04), Archivo display + Inter body (§03), oxblood used as a thin accent rule and nothing else (§04.1 squint test — the panel is chrome, not a campaign surface, so it stays on the dark surface with a single accent hairline). NOT A MODAL. There is deliberately no scrim, no `overflow:hidden` on the document, and no focus trap: the brief asks that the page stay browsable while the panel is open. That is also why the panel starts below the fixed nav (top:var(--nav-h)) instead of covering it — the nav, the bag and the page all stay reachable with the assistant open. Motion lives in motion.css with every other animation, scoped through the html.motion gate (Phase 3 contract). ============================================================ */ /* ---------- LAUNCHER ---------- Bottom-RIGHT. .toast is bottom-CENTRE (site.css) and the cart drawer enters from the right edge above this layer, so this corner is the one piece of fixed real estate nothing else claims. */ /* [hidden] FIRST and explicitly: the display:flex below would otherwise silently defeat the attribute, which is the exact trap shop.css documents for .drawer and Phase 7 hit again on .acct. assistant.js hides the launcher while the footer is on screen. */ .asst__launch[hidden]{ display:none; } /* A SQUARE, at every width. It was a 122x48 pill on desktop and a 44x48 near-square on phones — two shapes for one control, and neither actually square. The word "Styling" cannot survive at 48px wide, so it moves to the accessible name rather than being truncated: the visible mark is the diamond, and aria-label carries "Open the style assistant" for anyone who cannot see it. 48 clears the 44px floor. */ .asst__launch{ /* --buybar-h lifts the launcher clear of the PDP's sticky purchase bar, the same way --consent-h works for the consent bar. Unset everywhere else, so the fallback is the plain 24px this has always had. */ position:fixed; right:24px; bottom:calc(24px + var(--buybar-h,0px)); z-index:var(--z-assistant); display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; background:var(--dark); color:var(--ink-on-dark); border:1px solid rgba(245,245,245,.24); cursor:pointer; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; } .asst__launch:hover{ border-color:var(--accent); } /* STAND DOWN WHILE THE CONSENT QUESTION IS OPEN. The launcher is fixed to the bottom-right corner and the consent bar is fixed to the bottom edge, so on a first visit they occupy the same corner. The z-scale already puts consent above the assistant (see --z-consent), which means the launcher is not covering the Accept button — it is simply sitting invisibly behind the bar, contributing nothing and still taking a 48px bite out of the one screen a phone visitor has to answer a question in. Hiding it until the question is answered is the honest version of what the z-order was already doing visually, and it gives the smallest screens one less fixed thing in the corner. `html.consent-open` is set by consent.js alongside --consent-h. */ .consent-open .asst__launch{ display:none; } .asst__launch-icon{ font-size:14px; line-height:1; } /* The label is visually hidden at EVERY width now, not only on phones. The accessible name lives on aria-label and is unaffected. */ .asst__launch-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .asst__launch-icon{ font-size:16px; } /* The launcher is fixed over the bottom-right corner, so whatever the page ends with has to clear it — on /shop/order/ at 360px it sat directly on top of the footer's "Wholesale" link, which is a link nobody could tap. Reserving the corner's height at the end of the page is cheaper and more reliable than trying to dodge it per-page. */ .footer{ padding-bottom:88px; } @media (min-width:640px){ .footer{ padding-bottom:96px; } } /* ---------- PANEL ---------- `[hidden]` first and explicitly: an author `display:` on this class would silently defeat the attribute, which is exactly the bug shop.css already documents for .drawer and Phase 7 hit again on .acct. */ .asst__panel[hidden]{ display:none; } .asst__panel{ position:fixed; right:0; top:var(--nav-h); bottom:0; z-index:var(--z-assistant); width:min(400px,100vw); display:flex; flex-direction:column; background:var(--dark); color:var(--ink-on-dark); border-left:1px solid rgba(245,245,245,.16); box-shadow:-24px 0 48px rgba(0,0,0,.4); } .asst__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px; border-bottom:1px solid var(--accent); } .asst__title{ font-size:20px; } /* The honesty line, per the phase brief: this is a rule engine reading the live catalog, and it says so rather than implying a model behind it. */ .asst__note{ font-size:12px; line-height:1.5; color:var(--muted); margin-top:8px; } .asst__close{ background:none; border:1px solid rgba(245,245,245,.24); cursor:pointer; padding:8px 12px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; flex-shrink:0; } .asst__close:hover{ border-color:var(--accent); } .asst__log{ flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:16px; } .asst__msg{ font-size:14px; line-height:1.6; } .asst__msg--you{ color:var(--ink-on-dark); text-align:right; } .asst__msg--you .asst__bubble{ display:inline-block; padding:8px 16px; background:rgba(245,245,245,.08); text-align:left; max-width:88%; overflow-wrap:anywhere; } .asst__msg--bot .asst__bubble{ display:block; color:var(--ink-on-dark); } /* Knot steps + any other structured list the engine returns. */ .asst__steps{ margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; } .asst__steps li{ display:flex; gap:8px; font-size:14px; color:var(--muted); } .asst__steps b{ color:var(--ink-on-dark); font-weight:600; flex-shrink:0; } /* Product results — real catalog items, so they carry the real price and link to the real PDP. No image: the panel is a conversation, and a thumbnail grid here would duplicate the PLP it links into. */ .asst__items{ display:flex; flex-direction:column; gap:8px; margin-top:8px; } .asst__item{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 16px; border:1px solid rgba(245,245,245,.16); min-width:0; } .asst__item:hover{ border-color:var(--accent); } .asst__item-name{ font-size:14px; min-width:0; overflow-wrap:anywhere; } .asst__item-meta{ font-size:12px; color:var(--muted); white-space:nowrap; } /* Used by BOTH the WhatsApp and the Phase 12 handoff