/* Make buttons & selects responsive */
.chart-controls .timeframe-dropdown,
.tool-item,
.chart-controls button,
#trash-bin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* auto, not 100% - a flex item's height only actually stretches to
       match its taller row-mates (.tool-row's default align-items:stretch)
       when its own height is auto; 100% short-circuits that; since .tool-row
       itself has no definite height (auto, sized by content), a 100% height
       here doesn't resolve to anything meaningful anyway - it just happened
       to make every button size to its own independent natural/min-height
       content height, ignoring its siblings entirely (e.g. a longer label
       that wraps to two lines stayed taller than a one-line sibling right
       next to it in the same row, instead of both matching). */
    height: auto;
    flex: 1 1 0;
    padding: 0.5em 0.8em;
    min-height: 2.6em;
    max-height: 6em;
    box-sizing: border-box;
    /* cqw (container query width), not vw - relative to the panel's own
       resized width (see .chart-controls' container-type) so these actually
       scale down if the panel is manually narrowed, instead of staying
       viewport-sized and overflowing/wrapping oddly. */
    font-size: clamp(14px, 1.2cqw, 22px);
}

.chart-controls button:hover,
.tool-item:hover {
    background: #444;
}

/* Shared small-screen sizing - shrinks buttons/selects regardless of
   orientation. Layout placement (below vs. beside the chart) is decided by
   the two orientation-specific blocks further down. */
@media (max-width: 768px) {
    .chart-controls {
        padding: 0.5em 0.4em;
        font-size: clamp(11px, 3vw, 15px);
    }

    .chart-controls-content {
        gap: 0.4em;
    }

    .chart-controls .timeframe-dropdown,
    .tool-item,
    .chart-controls button,
    #trash-bin {
        min-height: 2em;
        padding: 0.35em 0.5em;
        font-size: clamp(11px, 2.8vw, 15px);
    }

    .tool-row .btn,
    .tool-row #trash-bin {
        min-height: 2.2em;
        padding: 0.4em 0.3em;
        font-size: clamp(13px, 3.4vw, 17px);
    }
}

/* Free dragging a small floating panel over an already-tiny chart doesn't
   work well on a phone - on mobile the panel becomes a plain static block
   instead (no drag, no resize-to-fit), placed below the chart in portrait
   and beside it in landscape (see the two blocks below). Widths/heights here
   intentionally override the floating-panel sizing above. */
@media (max-width: 768px) and (orientation: portrait) {
    .chart-area {
        flex-direction: column;
        overflow: visible;
        /* .chart-area's base rule (layout.css) sets justify-content:
           space-between - correct on desktop, where .chart-controls is
           position:absolute and so isn't actually a flex child there at
           all (nothing for space-between to act on). Here, though,
           .chart-controls becomes a real flex sibling again (position:
           static, below), and .chart-canvas used to have a FIXED, non-
           growing height (flex: 0 0 55vh) - so on any phone taller than
           55vh + the controls' own height, the inherited space-between
           was shoving .chart-controls down to the very bottom of
           .chart-area, leaving a plain dark, empty gap between it and the
           chart above. flex-start (below) stops that; making
           .chart-canvas growable (below) is what actually reclaims that
           space as more chart instead of just relocating the same gap to
           below the controls. */
        justify-content: flex-start;
    }

    .chart-canvas {
        /* Grow (1) to absorb any leftover vertical space instead of
           leaving it as a gap - was flex: 0 0 55vh (fixed, non-growing).
           55vh/55dvh stays as the shrink/grow BASIS (still a sensible
           starting height on a normal phone), min-height as the floor.
           dvh (not plain vh) for the same reason as .chart-wrapper's own
           min-height in layout.css - tracks the browser's URL bar
           actually showing/hiding instead of assuming it's always
           hidden; declared after the plain-vh version, not replacing it,
           so a browser too old to understand dvh keeps that one instead. */
        flex: 1 1 55vh;
        flex: 1 1 55dvh;
        /* 0, not a fixed floor: the panel below never shrinks or scrolls
           (see .chart-controls), so the chart is the one part that gives
           way when the panel grows - a floor here is exactly what pushed
           the panel's bottom off the screen before. */
        min-height: 0;
    }

    .chart-controls {
        /* !important: overrides a leftover inline position:absolute/
           transform that dragPanel.js/resizePanel.js may have set while the
           viewport was still wide enough to count as the floating desktop
           layout (e.g. resizing a browser window down past this breakpoint
           without a reload). */
        position: static !important;
        transform: none !important;
        /* Always its full natural height - never shrunk, never scrolled
           inside, never cut off. The page doesn't scroll in portrait either
           (layout.css), so the chart above absorbs whatever room the panel
           needs (.chart-canvas' min-height: 0). */
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: none;
        overflow: visible;
        border-radius: 0;
        touch-action: auto;
        cursor: default;
    }

    .chart-controls-handle,
    .chart-controls-resize-handle,
    .chart-controls-resize-right,
    .chart-controls-resize-bottom {
        display: none;
    }

    /* The actual tab split (only .active shows) applies on every layout by
       default now - see the un-queried .mobile-tab-group.active rule above.
       Only "handy" (phone) layouts add swipe-to-switch on top of that, plus
       this touch-action (needed for it to register anywhere over the active
       tab's content, not just on its individual buttons/selects: pan-y keeps
       the browser handling vertical scroll gestures itself - e.g. a tall
       params-popup - leaving only horizontal movement for
       mobilePanelTabs.js's own pointer handling to interpret as a swipe,
       instead of the browser's default horizontal-scroll/back-navigation
       gesture fighting it). Same duplicated rule in the landscape-phone
       query below, since each media query is independent. */
    .mobile-tab-group.active {
        touch-action: pan-y;
    }

    /* The desktop sidebar has no room on a phone-width panel - hidden here
       (and in the landscape-phone query below) so .mobile-tab-panels alone
       stacks full-width, same as before .tab-sidebar existed. */
    .tab-layout {
        display: contents;
    }

    .tab-sidebar {
        display: none;
    }

    /* .tab-layout's own display:contents (above) removes IT from the flex
       item it'd otherwise be, but .mobile-tab-panels is still a real element
       underneath it - its flex-grow (set for desktop's row layout further
       up) would otherwise carry over here and make it grow along
       .chart-controls-content's own (vertical, column) main axis instead,
       which it never used to do. Reset back to a plain, ungrown flex item. */
    .mobile-tab-panels {
        flex: initial;
        /* Trade and Params stacked on the same grid cell, the inactive one
           only invisible (still taking up room) instead of display:none -
           the panel is then always as tall as the taller of the two, so
           swiping between them never makes it (and the chart above) jump. */
        display: grid;
    }

    .mobile-tab-group {
        grid-area: 1 / 1;
    }

    .mobile-tab-group[data-mobile-tab="trade"],
    .mobile-tab-group[data-mobile-tab="params"] {
        display: flex;
        flex-direction: column;
        gap: 0.4em;
        visibility: hidden;
    }

    .mobile-tab-group.active {
        visibility: visible;
    }

    /* No text labels (no room) - just which tab is active. A dot
       is still a plain click target as a fallback; the primary way to
       switch is swiping the tab content above (see mobilePanelTabs.js).
       Selectors here are deliberately more specific than the shared
       ".chart-controls button" sizing rule elsewhere in this file (which
       would otherwise blow these up to full button size) rather than
       reaching for !important. */
    .mobile-tab-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 0.4em;
    }

    .mobile-tab-dots .mobile-tab-dot {
        width: 8px;
        height: 8px;
        min-height: 0;
        max-height: none;
        flex: 0 0 auto;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.25);
        cursor: pointer;
    }

    .mobile-tab-dots .mobile-tab-dot.active {
        background: #2962FF;
    }

    /* The ⚙️ popup floats above the Params tab's buttons, over the chart,
       instead of pushing them up (the panel and the chart above it kept
       jumping). Above the left drawing panel too (.chart-controls' own
       z-index 10 over its 5). Closed on a swipe to the Trade tab
       (mobilePanelTabs.js). */
    .mobile-tab-group[data-mobile-tab="params"] {
        position: relative;
    }

    .chart-controls #params-popup {
        position: absolute;
        bottom: calc(100% + 0.4em);
        right: 0;
        z-index: 30;
        width: max-content;
        max-width: calc(100vw - 16px);
    }

    /* .chart-controls' buttons grow from a zero basis (flex:1) to share a
       row - in this popup's column that squeezed "Advanced Settings" to
       its padding. */
    .chart-controls #params-popup .btn {
        flex: none;
    }
}

/* Landscape phones: height is the scarce dimension here, not width - the
   panel becomes a narrow vertical strip along the right edge instead, so
   the chart keeps nearly the whole screen. Everything inside stacks top to
   bottom, the tab dots too (in a column beside the content), and tabs
   switch by swiping up/down (mobilePanelTabs.js). Scoped to short
   viewports (not just max-width) so a landscape tablet, which has plenty
   of height to spare, keeps the normal floating/draggable panel. */
@media (orientation: landscape) and (max-height: 500px) {
    .chart-area {
        flex-direction: row;
    }

    .chart-canvas {
        flex: 1 1 auto;
        min-width: 0;
    }

    .chart-controls {
        /* !important: overrides a leftover inline position:absolute/
           transform that dragPanel.js/resizePanel.js may have set while the
           viewport was still wide enough to count as the floating desktop
           layout (e.g. resizing a browser window down past this breakpoint
           without a reload). */
        position: relative !important;
        /* The floating layout's own top/left offsets (chart-controls.css,
           or dragPanel.js inline) would shift a relative box. */
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        flex: 0 0 auto;
        width: clamp(104px, 15vw, 132px);
        min-width: 0;
        max-width: none;
        height: 100%;
        max-height: none;
        padding: 0.5em 0.4em;
        border-radius: 0;
        touch-action: auto;
        cursor: default;
        font-size: 13px;
        /* Never scrolls, same as portrait. visible, not hidden: the ⚙️
           popup opens to the LEFT of the strip, over the chart (below) -
           relative (above, not portrait's static) is what anchors it here. */
        overflow: visible;
    }

    .chart-controls-handle,
    .chart-controls-resize-handle,
    .chart-controls-resize-right,
    .chart-controls-resize-bottom {
        display: none;
    }

    /* Content column + dot column side by side. */
    .chart-controls-content {
        flex-direction: row;
        align-items: center;
        gap: 0.35em;
    }

    .tab-layout {
        display: contents;
    }

    .tab-sidebar {
        display: none;
    }

    /* Same stacking as the portrait-phone query above: Trade and Params on
       one grid cell, so the strip's content doesn't jump between tabs. */
    .mobile-tab-panels {
        flex: 1 1 auto;
        min-width: 0;
        display: grid;
        /* minmax(0, ...), not the default auto column: that one sizes to
           the content's widest natural width (an input's default size)
           and pushed it past the strip, over the dots. */
        grid-template-columns: minmax(0, 1fr);
    }

    .mobile-tab-group {
        grid-area: 1 / 1;
    }

    .mobile-tab-group[data-mobile-tab="trade"],
    .mobile-tab-group[data-mobile-tab="params"] {
        display: flex;
        flex-direction: column;
        gap: 0.4em;
        visibility: hidden;
    }

    /* none, not portrait's pan-y: the swipe here IS vertical, and with pan-y
       the browser would claim it (pointercancel) before mobilePanelTabs.js
       ever saw the pointerup. Nothing in the strip scrolls anyway. */
    .mobile-tab-group.active {
        visibility: visible;
        touch-action: none;
    }

    /* Button rows become columns - one full-width button per line. Every
       selector below carries an extra .chart-controls(-content) because
       tools.css/trade-panel.css load after this file and would otherwise
       win the tie. */
    .chart-controls-content .tool-row {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.4em;
    }

    .chart-controls .chart-controls-content .tool-row .btn {
        flex: 0 0 auto;
        width: 100%;
        min-height: 2.8em;
        max-height: none;
        padding: 0.4em 0.3em;
        font-size: 13px;
    }

    .chart-controls .trade-action-row {
        margin-top: 0;
    }

    .chart-controls .place-order-btn {
        padding: 0.5em 0.3em !important;
        font-size: 13px;
    }

    /* Risk / Max margin / Balance: label text above its input instead of
       beside it - there's no room for both on one line. */
    .chart-controls .trade-risk-inline {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0.4em;
        font-size: 12px;
    }

    .chart-controls .trade-risk-inline label {
        flex-direction: column;
        align-items: stretch;
        gap: 0.2em;
        white-space: normal;
        text-align: left;
    }

    .chart-controls .trade-risk-inline input,
    .chart-controls .trade-risk-inline .max-margin-field input[type="range"],
    .chart-controls #spot-perp-toggle-btn {
        width: 100%;
        min-width: 0;
    }

    /* The ⚙️ popup doesn't fit a strip this narrow - it floats to the left
       of it over the chart instead, vertically centered. Only visible
       while the Params tab is (visibility inherits from its group). */
    .chart-controls #params-popup {
        position: absolute;
        right: calc(100% + 0.4em);
        top: 50%;
        transform: translateY(-50%);
        z-index: 30;
        width: max-content;
        max-width: 60vw;
        gap: 0.2em;
        padding: 0.4em 0.7em;
        font-size: 13px;
    }

    .chart-controls #params-popup input,
    .chart-controls #params-popup button,
    .chart-controls #params-popup .custom-select-trigger {
        padding-top: 0.15em;
        padding-bottom: 0.15em;
        min-height: 0;
    }

    /* Dots stacked top (Trade) to bottom (Params), same order as the swipe. */
    .mobile-tab-dots {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        margin-top: 0;
    }

    .mobile-tab-dots .mobile-tab-dot {
        width: 8px;
        height: 8px;
        min-height: 0;
        max-height: none;
        flex: 0 0 auto;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.25);
        cursor: pointer;
    }

    .mobile-tab-dots .mobile-tab-dot.active {
        background: #2962FF;
    }
}