/*
 * A1 — THE RESULTS TAKE THE FULL CANVAS.
 *
 * Canvas-flow amendment A1 (Phillip, 2026-08-04): "Chat anchor is a floating panel… (supersedes
 * the full-height 'spine'). Conversation is NOT a full-height left column."
 *
 * The page never got the message. `.chat-container` is still a flex row of a `flex:1` chat column
 * and a fixed 32rem sidebar, so on a 1378px screen the cars were crammed into 32rem while more
 * than half the canvas sat white — and the chat anchor, which is supposed to float OVER results,
 * floated over nothing. Every argument for the floating form assumes cars behind the panel.
 *
 * GATED ON THE MOUNT ACTUALLY SUCCEEDING, not on the viewport. `mountChat()` sets
 * `data-otto-canvas="on"` only after the anchor is really on screen, and the error boundary
 * clears it. So if the bundle 404s or Chat throws, the page keeps TODAY's two-column layout with
 * the legacy chat in it, exactly as it degrades now. The layout and the component that justifies
 * it arrive together or not at all — a full-width canvas with no anchor floating over it would be
 * a results page with the conversation deleted.
 *
 * This is a NEW FILE rather than edits to layout.css / sidebar.css / chat.css deliberately: those
 * are shared and Clev is active in this repo. A new file cannot collide, and the whole A1 change
 * is legible in one place instead of as three diffs against rules that predate the amendment.
 */

body[data-otto-canvas="on"] .chat-panel {
    /* The conversation is no longer a column. The anchor is `position: fixed` at every width —
       a floating panel at >=1024px, a bottom sheet below it — so it needs no space in flow.
       What remains inside this element is the LEGACY fallback (welcome turn + input dock), which
       is only ever revealed when the anchor has failed, and at that point this attribute is gone. */
    display: none;
}

body[data-otto-canvas="on"] .sidebar {
    /* Not a sidebar any more; it is the canvas. */
    width: 100%;
    border-left: 0;
}

/*
 * ROOM FOR THE ANCHOR TO FLOAT OVER — NARROW ONLY, SINCE 2026-09-14.
 *
 * The anchor does not displace content, so without a reserve the last cards sit UNDERNEATH it and
 * cannot be scrolled clear. "Floats over the results" has to mean the shopper can still reach
 * every result. The reserve is the anchor's FLOOR (40vh) plus its offset (5vh) plus breathing
 * room, not its ceiling: reserving 85vh would leave a permanent hole under a panel that is
 * usually 40%, and the panel scrolls internally rather than growing past its cap.
 *
 * 🔴 THE MEDIA QUERY IS THE FIX AND IT IS NOT A TIDY-UP. This rule was UNBOUNDED, and the
 * ≥ 1024 block below merely OVERRODE it with a slightly larger value. So withdrawing that block
 * did not withdraw the reserve — it fell back to THIS declaration, and the wide canvas kept
 * 45vh + 1.5rem of empty space under content that ends above the fold. Measured: the landing still
 * reported 1184px of content in an 842px viewport after the override was removed, against 1192
 * before. Removing an override is not removing a rule.
 *
 * ⚠️ 1024 IS ANCHOR_FLOATS_PX (web-next/src/lib/wideCanvas.js). BELOW it the anchor is a BOTTOM
 * SHEET across the viewport, genuinely over every surface's content, so all four surfaces owe the
 * reserve and a shell-wide rule is right. AT OR ABOVE it the anchor is a bounded LEFT COLUMN
 * beside the grid — nothing is underneath anything — and only RESULTS, whose cards do scroll,
 * still needs one. That one ships on the results component root as `canvasFloor`.
 *
 * ⚠️ THIS IS A WINDOW QUERY AND IT IS ALLOWED TO BE, which is worth saying next to a codebase
 * rule that says the opposite. `lg:` is banned for the CANVAS because the canvas is a CONTAINER
 * whose width differs from the window's. The anchor's float/sheet switch is genuinely a property
 * of the VIEWPORT — it is what ChatAnchor itself keys on — so the window is the right box here.
 */
@media (max-width: 1023.98px) {
    body[data-otto-canvas="on"] .sidebar-content {
        padding-bottom: calc(45vh + 1.5rem);
    }
}

@media (min-width: 1024px) {
    body[data-otto-canvas="on"] .sidebar-content {
        /*
         * 🔴 SUPERSEDED 2026-09-03 BY PHILLIP: THE LEFT RESERVE IS BACK, AND IT IS NOT HERE.
         *
         * READ THIS BEFORE ACTING ON THE PARAGRAPH BELOW — the paragraph is kept because the
         * measurement in it is real and was never retracted, but it NO LONGER GOVERNS.
         *
         * The 408px reserve now ships on all four panel surfaces (landing, wait, failure,
         * results), applied in `web-next/src/lib/wideCanvas.js` on the COMPONENT ROOT rather
         * than on `.sidebar-content`. So this rule and that hook are not in conflict in the
         * cascade — they act on different elements — but they ARE opposite answers to one
         * question, and for 17 days both cited Phillip.
         *
         * LOCATOR, because the block below cites 915b322 and this one cited nothing: the
         * ruling was given to Clev in session recDQQCj24Nn9KAHC on 2026-09-03, relayed to
         * Teepra in Artere message recstzMELXjXW0wtn. A future reader can reach it there
         * rather than having to ask whoever wrote this.
         *
         * ⚠️ AND THE SCOPE IS PHILLIP'S, NOT A GLOSS ON IT: he was shown the three options
         * (reserve everywhere / reserve only on the non-scrolling screens / revert it) with
         * the cost of each stated, and chose "keep 408px" on ALL FOUR SURFACES, with the
         * lost column of cars named in the option he took.
         *
         * ⚫ WHY THE OLD ANSWER LOST, STATED SO NOBODY RE-DERIVES IT: reachability-by-scroll
         * is a guarantee about CARDS, and three of the four surfaces are not scrollable card
         * lists. The landing, the wait and the failure states have nothing to scroll past, so
         * "scroll it clear" is not available to them and the content simply stayed hidden.
         * That is the bug Phillip reported on the landing on 2026-08-30 and 2026-08-31.
         *
         * ⚠️ DO NOT RE-ADD `padding-left` HERE. The reserve is container-keyed in the hook,
         * never a media query — `lg:` asks the WINDOW and matches inside a 420px sidebar in a
         * 1280px window, which has shipped twice. This element is the wrong place for it.
         *
         * ─────────────────────────────────────────────────────────────────────────────────
         * THE ORIGINAL 2026-08-17 REASONING (915b322) — HISTORICAL, NOT OPERATIVE:
         *
         * NO LEFT RESERVE. The first version padded 408px off the left so nothing could ever sit
         * behind the panel — and measured, that cost a whole COLUMN of cars for the full height
         * of the page, to dodge something that occupies one corner at the bottom.
         *
         * The floating form's entire premise is that Otto growing costs the shopper nothing
         * BECAUSE THE CARS ARE STILL THERE, BEHIND HIM. Permanently reserving a strip so nothing
         * is ever behind him concedes exactly what the form was chosen to avoid, and turns the
         * panel back into a column that merely looks like it floats.
         *
         * So cards use the full width and scroll past behind the panel. What must be guaranteed
         * is REACHABILITY, not permanent clearance: the reserve below means the last row can always be
         * scrolled clear of the panel, so no card is permanently unreadable.
         */
        /*
         * 🔴 WITHDRAWN 2026-09-14 — AND THE PARAGRAPHS ABOVE ARE KEPT BECAUSE THEY ARE STILL
         * TRUE OF RESULTS. What changed is not the argument; it is WHICH SURFACES THE ARGUMENT
         * REACHES. This selector reaches all four, and three of them have nothing to scroll past.
         *
         * Clev measured the cost on the live site, at a 1200px window: this rule was
         * 540 + 32 = 572px, the LANDING's content ended at 789 inside a 1142px panel — 295px
         * ABOVE the fold — and 789 + 572 = 1361 against 1142 visible. The landing scrolled 219px
         * and every pixel of it was empty reserve. Phillip: "remove the scroll bar from the ML
         * and results grid."
         *
         * ⚖️ THE RESERVE ITSELF IS NOT WRONG, IT WAS IN THE WRONG PLACE. It now ships on the
         * RESULTS component root as `canvasFloor` (web-next/src/lib/wideCanvas.js), beside the
         * LEFT reserve that already works that way for the same reason — that one's note reads
         * "DO NOT RE-ADD `padding-left` HERE… This element is the wrong place for it."
         *
         * ⚠️ CSS COULD NOT HAVE SCOPED IT HERE EVEN IF WE WANTED TO. `<body>` carries only
         * `data-otto-canvas="on"`; region.js holds the region in a module variable and never
         * reflects it into the DOM, so no selector can say "results but not landing".
         *
         * ⚠️ THE BASE RULE ABOVE (line ~50) STAYS AND IS NOT AN OVERSIGHT. Below 1024 the anchor
         * is a BOTTOM SHEET across the viewport, genuinely over every surface's content, so all
         * four still owe the reserve there. Only the WIDE arm — where the anchor is a bounded
         * left column beside the grid — is what the restructure falsified.
         */
    }
}

/*
 * THE CONSENT HOST, once it has been reparented into the canvas by mountChat().
 *
 * #messages-container is not a message list any more — the transcript was retired 2026-08-17. It
 * survives as the host for two things that were never messages and are simply anchored to it:
 * the A2P SMS opt-in card (ui-actions.js — identity, rates, STOP/HELP, Terms, Privacy) and the
 * budget widget (budget-enhanced.js).
 *
 * It keeps `flex: 1` from chat.css, which inside the canvas would make an EMPTY host claim the
 * whole column and push the cards off screen. Here it takes exactly the space its contents need,
 * which is none until something is injected.
 */
body[data-otto-canvas="on"] #messages-container {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;      /* a consent gate must never be scrolled out of its own container */
    padding: 0;
    gap: 0.75rem;
}

body[data-otto-canvas="on"] #messages-container:empty {
    display: none;          /* no empty gap above the results when nothing is hosted */
}

/* 🔴 NO SCROLLBAR BESIDE THE CARDS. Phillip, 2026-09-14: "remove the scroll bar from the ML and
   results grid."

   `#sidebar-content` is the ONLY scrolling element on the canvas — measured on localhost at
   1600×900: scrollHeight 1219 against clientHeight 842, and nothing else on the page scrolls at
   all. The grids themselves declare no overflow, so there was never a bar to remove from them;
   the bar he is looking at belongs to the surface they sit on, and this is where it lives
   (components/sidebar.css:31, `overflow-y: auto`).

   ⚠️ THE SCROLL IS UNTOUCHED — this hides the INDICATOR, not the overflow, exactly as the
   carousel rule in web-next/src/index.css does. Wheel, trackpad, keyboard, Page Down and
   programmatic scrollTo all still reach the last row. `overflow: hidden` here would strand every
   card below the fold, and that is the change this deliberately is not.

   ⚫ BUT IT IS NOT THE SAME CALL AS THE CAROUSEL'S, AND SAYING SO IS THE POINT OF THIS NOTE. The
   strip is a horizontal track whose PEEK carries the affordance, so the bar was redundant there.
   This is a vertical page scroller, and its bar is the only thing that says how much is left —
   Phillip chose six ML cards knowing they "run past the fold" (2026-09-13), so there IS content
   below and now no persistent cue that it exists. What carries it instead is the grid row being
   visibly cut by the fold. If a future layout ever ends flush at the fold, that cue is gone and
   this rule becomes a real usability problem rather than a cosmetic one. */
body[data-otto-canvas="on"] .sidebar-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body[data-otto-canvas="on"] .sidebar-content::-webkit-scrollbar {
    display: none;
}

/* 🔴 THE CANVAS IS NOT A 1536px COLUMN — Phillip, 2026-09-14: "widen the cards by 10% each."
   AND THE CAP WAS NEVER A DESIGN DECISION. It is a COLLISION. `.main-container` carries the
   legacy class `container`, and web-next's Tailwind emits its own `container` UTILITY — width
   100%, then a per-breakpoint max-width topping out at 1536px. Two single-class selectors of
   equal specificity, so SOURCE ORDER decides, and the Tailwind bundle loads last. layout.css:91
   already says `max-width: none` for this element and has been losing that argument silently.

   MEASURED at a 1600px window, before: the canvas stopped at 1536, the ML module ended at 1520,
   and 80px of the window went unused — 64 from the cap, 16 from the shell's right padding. The
   grid had 814px for three cards at 260.7 each, hemmed by the chat column on the left and
   nothing at all on the right.

   ⚠️ THIS IS A SPECIFICITY OVERRIDE, WHICH IS WHY IT IS SCOPED AND NOT `!important`. The attribute
   selector plus the class beats a bare utility class without escalating, and it is confined to the
   canvas so nothing outside LANDING·A changes.

   ⚫ AND IT DOES NOT WIDEN BY A FIXED 10% — that is worth saying plainly rather than letting the
   number in the instruction imply it. The cards now take whatever the window gives past the chat
   column, so the gain IS 10% at ~1600 and grows on a wider display. Below 1536 the cap was never
   binding and nothing here changes anything. */
body[data-otto-canvas="on"] .main-container {
    max-width: none;
}