.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.chart-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1vh;   
    /* Keeps everything clear of the phone's own on-screen bars - the
       Android navigation buttons at the bottom, a notch/status bar at the
       top. index.html's viewport-fit=cover lets the page draw edge to edge
       (as Android does anyway in standalone/PWA mode) and is what makes
       these env() values non-zero; 0 on desktop. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.chart-area {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    /* For absolute overlays (toolbox & dropdown & top bar) */
    position: relative;
    overflow: hidden; /* Prevents layout jumps when the canvas resizes */
    min-height: 0;   /* Forces flexbox to give the canvas a fixed height */
}

/* Persistent top bar (TradingView-style) - exchange/timeframe on the left,
   account/network + the global ❓ help toggle on the right. Floats directly
   over the chart itself (position:absolute against .chart-area, its own
   positioning context) instead of taking up a row of its own - the "Live
   BTC Candles" heading this replaced took real vertical space above the
   chart, this shouldn't. pointer-events:none on the bar itself lets
   pan/zoom drags in the empty middle strip still reach the chart
   underneath; only the two pill groups (pointer-events:auto,
   components/chart-controls.css) actually intercept clicks. z-index above .chart-controls
   (10). */
.top-bar {
    position: absolute;
    top: 0.6em;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
    padding: 0 0.6em;
    pointer-events: none;
}

.top-bar-group {
    display: flex;
    align-items: center;
    gap: 0.5em;
    pointer-events: auto;
    /* Safety net for .top-bar's own flex-wrap: nowrap above - on a narrow
       phone, 5 controls (profile/exchange/timeframe/network/account) can
       add up to more than the screen width even after components/top-bar.css's own
       per-control mobile shrinking. Scrolling WITHIN this pill instead of
       letting it overflow past the real screen edge (what nowrap alone
       would otherwise do, since nothing here clips it - .chart-area's own
       overflow:hidden clips the boundary of the chart, not what a user
       visually perceives as "off the phone screen" the same way). A no-op
       on desktop, where everything already fits with room to spare. */
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox - this is a toolbar, not content meant to look scrollable */
}

.top-bar-group::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge - same reasoning as scrollbar-width above */
}

/* Anchors the wallet-method popup (position:absolute, components/top-bar.css) below
   this group instead of the whole bar/page. A second flex child of .top-bar
   now (index.html), not nested inside .top-bar-group - see the comment
   there for why (its overflow-x:auto was silently clipping the popup).
   pointer-events:auto of its own since .top-bar itself sets pointer-
   events:none and this is no longer inside .top-bar-group (which supplied
   that before). */
.top-bar-account {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4em;
    pointer-events: auto;
}

/* The chart itself plus its own overlays (risk/profit zones, work-in-progress
   label) - kept as one positioned box separate from .chart-controls, which on
   desktop floats on top of it (see components/chart-controls.css) but on mobile instead sits
   beside/below it as a normal flex sibling. Always first in DOM/flex order in
   every layout, so its top-left corner reliably coincides with .chart-area's
   own - lineHoverPopup.js positions its popup using that assumption. */
.chart-canvas {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

/* Portrait mobile stacks the control panel below the chart (see
   components/controls-responsive.css). The page itself is pinned to exactly
   the visible screen height and never scrolls: when it could (it used to be
   min-height + overflow-y:auto here), a taller tab/popup in the panel or the
   on-screen keyboard pushed the whole page down, the top bar and chart went
   off the top of the screen and had to be scrolled back by hand. Now only
   the chart shrinks; the panel always keeps its full height and never
   scrolls (controls-responsive.css).

   100dvh (dynamic viewport height), not 100vh: 100vh is the LARGE viewport
   (as if the browser's URL bar were always hidden), so the panel's bottom
   ran under the bar whenever it showed. Declared after the plain 100vh so
   a browser without dvh keeps that one. */
@media (max-width: 768px) and (orientation: portrait) {
    html, body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* position:fixed on top of that: overflow:hidden alone still lets the
       browser scroll the document programmatically (focusing an input,
       the keyboard opening, a popup reaching past the bottom), and every
       time it did the whole layout slid down with the panel's bottom cut
       off. A fixed box stays glued to the visible screen no matter where
       the document itself ends up. */
    .chart-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        height: 100dvh;
    }
}