/* ============================================================
   WOI Chart Fullscreen v4
   Desktop: existing full toolbar
   Mobile: dedicated compact proxy toolbar
   ============================================================ */

.woi-fullscreen-btn {
    white-space: nowrap;
}

html.woi-chart-fullscreen-open,
body.woi-chart-fullscreen-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Fullscreen workspace */
.chartwrap.woi-chart-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;

    width: 100vw !important;
    max-width: none !important;

    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;

    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
    background: #070d14 !important;
}

/*
 * Keep only the main chart controls and chart.
 * Analysis/narrative sections remain hidden in fullscreen.
 */
.chartwrap.woi-chart-fullscreen > :not(.overlaybox):not(.fibo-row):not(#chart-wrap):not(.woi-mobile-fullscreen-toolbar) {
    display: none !important;
}

/* Desktop toolbar layout */
.chartwrap.woi-chart-fullscreen > .overlaybox {
    display: block !important;
    flex: 0 0 auto !important;
}

.chartwrap.woi-chart-fullscreen > .fibo-row {
    display: flex !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    margin-left: 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Chart height is written in pixels by JS */
.chartwrap.woi-chart-fullscreen > #chart-wrap {
    position: relative !important;
    display: block !important;

    flex: 0 0 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 240px !important;

    margin: 0 !important;
    overflow: hidden !important;
}

.chartwrap.woi-chart-fullscreen #chart {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 240px !important;

    margin: 0 !important;
}

.chartwrap.woi-chart-fullscreen #chart > div,
.chartwrap.woi-chart-fullscreen #chart .dash-graph,
.chartwrap.woi-chart-fullscreen #chart .js-plotly-plot {
    width: 100% !important;
    min-width: 0 !important;
}

/* Desktop does not show the mobile toolbar */
.woi-mobile-fullscreen-toolbar {
    display: none;
}

/* Active fullscreen button */
.chartwrap.woi-chart-fullscreen .woi-fullscreen-btn {
    border-color: rgba(124, 255, 203, 0.48) !important;
    background: rgba(124, 255, 203, 0.12) !important;
    color: #dfffee !important;
}

/* Menus above Plotly */
.chartwrap.woi-chart-fullscreen .woi-indicator-menu[open],
.chartwrap.woi-chart-fullscreen .woi-indicator-popover {
    z-index: 50 !important;
}


/* ============================================================
   MOBILE FULLSCREEN
   ============================================================ */

@media (max-width: 760px) {

    .chartwrap.woi-chart-fullscreen {
        padding:
            max(5px, env(safe-area-inset-top))
            max(5px, env(safe-area-inset-right))
            max(5px, env(safe-area-inset-bottom))
            max(5px, env(safe-area-inset-left)) !important;
    }

    /*
     * Existing desktop controls are hidden completely.
     * Their real buttons remain in the DOM and receive proxy clicks.
     */
    .chartwrap.woi-chart-fullscreen > .overlaybox,
    .chartwrap.woi-chart-fullscreen > .fibo-row {
        display: none !important;
    }

    /*
     * Dedicated mobile toolbar.
     */
    .chartwrap.woi-chart-fullscreen > .woi-mobile-fullscreen-toolbar {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

        flex: 0 0 auto !important;

        width: 100% !important;
        box-sizing: border-box !important;

        gap: 5px !important;
        margin: 0 0 6px !important;
        padding: 5px !important;

        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 10px;

        background: rgba(7, 13, 20, 0.98);
    }

    .woi-mobile-fullscreen-tool {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-width: 0;
        min-height: 35px;

        box-sizing: border-box;
        padding: 6px 4px;

        border: 1px solid rgba(96, 165, 250, 0.22);
        border-radius: 8px;

        background: rgba(15, 23, 42, 0.94);
        color: #dbeafe;

        font-size: 10px;
        font-weight: 700;
        line-height: 1;

        white-space: nowrap;
        touch-action: manipulation;
        cursor: pointer;
    }

    .woi-mobile-fullscreen-tool:active {
        transform: translateY(1px);
        background: rgba(30, 64, 175, 0.55);
    }

    .woi-mobile-fullscreen-tool.is-active {
        border-color: rgba(96, 165, 250, 0.85);
        background: rgba(30, 64, 175, 0.72);
        color: #ffffff;
    }

    /*
     * Exit occupies the complete final row.
     */
    .woi-mobile-fullscreen-tool-exit {
        grid-column: 1 / -1;

        border-color: rgba(124, 255, 203, 0.48);
        background: rgba(124, 255, 203, 0.10);
        color: #dfffee;
    }

    /*
     * Seven tools + one exit:
     * first two rows remain compact.
     */
    .chartwrap.woi-chart-fullscreen > #chart-wrap {
        min-height: 300px !important;
    }
}


/* ============================================================
   Fullscreen is desktop-only
   ============================================================ */

@media (max-width: 760px) {
    #btn-chart-fullscreen,
    .woi-fullscreen-btn,
    .woi-mobile-fullscreen-toolbar {
        display: none !important;
    }
}