` is in index.html unconditionally — the directive returns early for a user who has not opted in and simply leaves it there, empty. So any rule keyed on `.hsv-shell-root` alone applies to EVERYONE, opted in or not. That is not hypothetical. The loading skeleton below was written without the gate, and its `::after` — fixed, full height, 248px wide, at the inline-start edge — sat invisibly over the right-hand quarter of every page in the legacy app, swallowing clicks. Three E2E tests caught it as "checkbox not clickable". Do not un-gate anything here. */ .hsv-shell-next .hsv-shell-root { /* `position: relative` + a z-index makes this its own stacking context. That is necessary (it is what keeps the fixed header/rail above the legacy content), but it also means every z-index used INSIDE the shell — including its own popovers, which reach z-50 — is scoped to this local context. From outside, the whole shell paints as one flat layer at whatever number is below. 30, not 6: a React screen's sticky table header (DataTable's , z-10) has no positioned ancestor of its own between it and the document root, so it sits directly in the ROOT stacking context and compares 1:1 against this one. At z-index 6 the sticky header — and in fact any in-page z-index a screen ever used — painted OVER the entire shell, popovers included: opening the notifications popover while scrolled down the customers list put the table's sticky header on top of it. 30 sits strictly between the two ceilings this app actually uses: - in-page decoration (sticky headers, and anything similar a future screen adds) tops out at z-10 today — 30 clears it with headroom. - a real overlay (Dialog, Menu, Tooltip, and the shell's own popovers) is z-50 — 30 stays under it, so a screen's confirm dialog still correctly covers the header and rail, the way a modal should. Do not raise this to 50 or above; that would put ordinary chrome ahead of an actual modal. Still far below Bootstrap's legacy modal layer (1040+), so a legacy dialog also covers the chrome as it always has. */ position: relative; z-index: 30; } /* The shell host must occupy NO space. Every one of its children is position: fixed, so it is an anchor for a stacking context and nothing else, and it sits in normal flow immediately before `.wrapper`. mount() adds `.hsv-next` to it, and the bundle's own armor.css says `.hsv-next { height: 100%; overflow: auto }` — correct for a SCREEN, which is mounted into a fixed-height box inside ng-view and has to scroll internally. Applied here it would make this div a full-viewport, page-coloured, scrolling block that pushes the entire legacy app down off screen. The base layer also paints a background on it. !important because the bundle's stylesheet is injected at runtime, after every legacy , so it wins ties on source order at equal specificity. */ .hsv-shell-next .hsv-shell-root.hsv-next { height: 0 !important; overflow: visible !important; background: none !important; } /* Login, signup, order, purchase — fullPageDetect.js puts `full-screen` on the body and scss/reset.scss hides all chrome. Hide ours the same way, and drop the offsets with it: those pages lay themselves out edge to edge. This is belt and braces. AppShell.tsx also renders nothing when it sees the class — but the CSS applies before the bundle has even been requested. */ .hsv-shell-next body.full-screen .hsv-shell-root { display: none !important; } .hsv-shell-next body.full-screen .wrapper { padding-top: 0 !important; } .hsv-shell-next body.full-screen .content { margin-right: 0 !important; } /* ── Loading skeleton ─────────────────────────────────────────────────── */ /* The legacy chrome is hidden the moment the class lands, but the React bundle is an async import and takes a moment. `:empty` matches only until React renders its first child, so these vanish on their own with no JS involved. The `.hsv-shell-next` gate is what makes `:empty` mean "the bundle has not arrived yet" rather than "this user never opted in" — see the note above. Colours are the design system's --bg-elevated, --border and --brand-navy, written literally because tokens.css is inside the bundle we are waiting for. */ .hsv-shell-next .hsv-shell-root:empty::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--hsv-shell-nav-h); background-color: #ffffff; border-bottom: 1px solid #e4e6f0; } @media (min-width: 1024px) { .hsv-shell-next .hsv-shell-root:empty::after { content: ''; position: fixed; top: var(--hsv-shell-nav-h); bottom: 0; right: 0; width: var(--hsv-shell-w); background-color: #2d2d87; } } /* ═══ THE HELP RAIL — for EVERY user, not just the opted-in ones ═══ The teal support / training / remote-access rail on the left edge (web/src/shell/help/HelpRail.tsx) replaced the legacy . It renders from the same React root as the shell, and nextShell.js mounts that root for everyone — the top strip and side nav only when the user opted in. So the rules below are deliberately NOT gated on `.hsv-shell-next`. They are still safe for the reason the warning at the top of the gated block gives: each one keys on `.hsv-next` or `.hsv-help-rail`, and both exist only once the bundle has mounted. An empty host matches none of them. */ /* The host occupies no space, opted in or not — same reasoning as the gated rule above: armor.css gives `.hsv-next` a full height, a scroll and a background, which on a page-level host would push the legacy app down. */ .hsv-shell-root.hsv-next { height: 0 !important; overflow: visible !important; background: none !important; } /* Everywhere the legacy composer was hidden, the rail is too. !important because the bundle's stylesheet is injected after every legacy . */ body.full-screen .hsv-help-rail, body.ai-chat-running .hsv-help-rail, body.customers-add-page .hsv-help-rail, body.italogin-page .hsv-help-rail, body.ita-page .hsv-help-rail { display: none !important; } @media (max-width: 736px) { .hsv-help-rail { display: none !important; } }