/*
 * The results take the full canvas; the chat anchor floats over them.
 *
 * Gated on the mount succeeding, not on the viewport: `mountChat()` sets
 * `data-otto-canvas="on"` only once the anchor is on screen, and the error boundary clears it.
 * If the bundle 404s or Chat throws, the page keeps the two-column layout with the legacy chat,
 * so a full-width canvas never appears without the anchor floating over it.
 */

body[data-otto-canvas="on"] .chat-panel {
    /* The anchor is `position: fixed` at every width (floating panel >=1024px, bottom sheet
       below), so it needs no space in flow. What remains here is the legacy fallback, revealed
       only when the anchor has failed — and then this attribute is gone. */
    display: none;
}

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

/*
 * Room for the anchor to float over, narrow viewports only.
 *
 * The anchor does not displace content, so without a reserve the last cards sit underneath it
 * and cannot be scrolled clear. The reserve is the anchor's floor (40vh) plus its offset (5vh)
 * plus breathing room, not its ceiling: the panel scrolls internally rather than growing past
 * its cap.
 *
 * 1024 is ANCHOR_FLOATS_PX (web-next/src/lib/wideCanvas.js). Below it the anchor is a bottom
 * sheet over every surface's content, so a shell-wide rule is right. At or above it the anchor is
 * a bounded left column beside the grid; only results still needs a reserve, and that ships on
 * the results component root as `canvasFloor`. Keep this rule bounded by the media query.
 *
 * This is a window query on purpose: `lg:` is banned for the canvas because the canvas is a
 * container narrower than the window, but the anchor's float/sheet switch is a property of the
 * viewport — it is what ChatAnchor keys on.
 */
@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 {
        /*
         * No reserve here at wide widths. The 408px left reserve and the results bottom reserve
         * (`canvasFloor`) are applied in web-next/src/lib/wideCanvas.js on the component root,
         * container-keyed rather than by media query. Do not add `padding-left` or
         * `padding-bottom` here: this selector reaches all four surfaces (landing, wait,
         * failure, results), and CSS cannot scope it to results because <body> carries only
         * `data-otto-canvas="on"` — region.js never reflects the region into the DOM.
         */
    }
}

/*
 * The consent host, once mountChat() has reparented it into the canvas.
 *
 * #messages-container is not a message list; it hosts the A2P SMS opt-in card (ui-actions.js)
 * 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 only the space its contents need.
 */
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. `#sidebar-content` is the only scrolling element on the canvas
   (components/sidebar.css, `overflow-y: auto`); the grids declare no overflow.

   This hides the indicator, not the overflow: wheel, keyboard and scrollTo still reach the last
   row. `overflow: hidden` here would strand every card below the fold.

   Unlike the carousel's hidden bar, this vertical bar was the only cue of how much is left. The
   remaining cue is the grid row being visibly cut by the fold; a layout that ends flush at the
   fold would lose it. */
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;
}

/* Lift the 1536px cap. `.main-container` carries the legacy class `container`, and web-next's
   Tailwind emits its own `container` utility (max-width up to 1536px). Equal specificity, and
   the Tailwind bundle loads last, so it beats layout.css's `max-width: none`.

   The attribute selector plus the class wins without `!important`, and is confined to the
   canvas. */
body[data-otto-canvas="on"] .main-container {
    max-width: none;
}