/* ═══════════════════════════════════════════════════════════════
   Exchange Mobile Optimization
   Covers: /exchange-crypto, /exchange-crypto-etlp (swap cards)
           /exchange/et10-pro, /exchange/etlp-pro (pro terminal)
   Targets: Samsung Galaxy S24/S25, Galaxy Fold/Flip, iPhone 15/16,
            Pixel 9, Android tablets, iPads, Korean market phones
   ═══════════════════════════════════════════════════════════════ */

/* ── Viewport & Safe Area Foundation ──────────────────────────── */

.rcb-page,
.pro-terminal {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* ── Performance: content-visibility for below-fold sections ── */

.rcb-history,
.rcb-agent-quickstart,
.pro-bottom {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
}

/* ── Small Phones (≤430px) — iPhone 15/16 Pro Max, Galaxy S24+ ─ */

@media (max-width: 430px) {
    /* Swap card pages */
    .rcb-page {
        padding-top: 0.5rem;
        padding-bottom: 2rem;
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
    }

    .rcb-page-heading {
        margin-bottom: 0.75rem;
    }

    .rcb-page-heading h1 {
        font-size: 1.15rem;
        line-height: 1.25;
    }

    .swap-card {
        padding: 1rem 0.75rem;
        border-radius: 12px;
    }

    .swap-amount-input,
    .swap-amount-symbol {
        font-size: 1.6rem;
    }

    .swap-card-title {
        font-size: 0.95rem;
    }

    .hiw-card {
        padding: 1.25rem 1rem 1rem;
        border-radius: 14px;
    }

    /* Pro terminal */
    .pro-terminal {
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
        padding-bottom: 60px;
    }

    .pro-header {
        gap: 0.75rem;
        padding: 0.4rem 0;
    }

    .pro-pair {
        font-size: 1.1rem;
    }

    /* Orderbook — tighter rows */
    .ob-wrapper {
        height: 400px;
    }

    .ob-row {
        height: 26px;
        line-height: 26px;
    }

    /* Trade panel inputs */
    .t-input {
        min-height: 44px;
        padding: 0.5rem 0.6rem;
    }

    .btn-buy,
    .btn-sell {
        min-height: 48px;
        padding: 0.8rem;
    }

    /* Balance bar */
    .bal-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.4rem;
    }

    /* Orders table */
    .pro-bottom {
        max-height: 250px;
    }
}

/* ── Standard Mobile (431-600px) ─────────────────────────────── */

@media (min-width: 431px) and (max-width: 600px) {
    .rcb-page {
        padding-top: 0.75rem;
        padding-bottom: 2rem;
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
    }

    .swap-amount-input,
    .swap-amount-symbol {
        font-size: 2rem;
    }

    .pro-terminal {
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
    }
}

/* ── Tablet (601-1024px) ─────────────────────────────────────── */

@media (min-width: 601px) and (max-width: 1024px) {
    .rcb-page {
        padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
    }

    .pro-terminal {
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }

    /* Pro terminal: keep side panel on wider tablets */
    .pro-grid {
        gap: 0.75rem;
    }
}

/* ── Landscape Mode ──────────────────────────────────────────── */

@media (orientation: landscape) and (max-height: 500px) {
    .rcb-page-heading {
        margin-bottom: 0.5rem;
    }

    .rcb-page-heading .rcb-page-subtitle {
        display: none;
    }

    .swap-card {
        padding: 0.75rem 1rem;
    }

    /* Pro terminal landscape */
    .ob-wrapper {
        height: 350px;
    }

    .pro-header {
        padding: 0.25rem 0;
        margin-bottom: 0.25rem;
    }
}

/* ── Foldable Devices (Samsung Galaxy Fold/Flip) ─────────────── */

/* Galaxy Z Fold cover screen (~374px folded) */
@media (max-width: 380px) and (min-resolution: 2.5dppx) {
    .rcb-page-heading h1 {
        font-size: 1rem;
    }

    .swap-amount-input,
    .swap-amount-symbol {
        font-size: 1.4rem;
    }

    .swap-card {
        padding: 0.75rem 0.6rem;
    }

    .hiw-card {
        padding: 1rem 0.75rem;
        max-height: 85vh;
    }

    /* Pro terminal on fold cover */
    .pro-pair {
        font-size: 0.95rem;
    }

    .pro-stats {
        gap: 0.3rem 0.5rem;
    }

    .ob-row {
        height: 24px;
        line-height: 24px;
    }
}

/* Foldable unfolded (Fold inner display ~717px) */
@media (min-width: 700px) and (max-width: 768px) and (min-resolution: 2.5dppx) {
    .pro-book-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Screen-spanning (dual-screen foldables — Galaxy Fold, Surface Duo) */
@media (horizontal-viewport-segments: 2) {
    .pro-terminal {
        display: grid;
        grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
        column-gap: env(viewport-segment-left 1 0, 0px);
    }

    .pro-terminal > * {
        grid-column: 1 / -1;
    }

    /* Split chart and trade panel across the hinge */
    .pro-left {
        grid-column: 1;
    }

    .trade-panel {
        grid-column: 2;
    }
}

/* ── Touch Targets ───────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Swap card buttons */
    .swap-toggle-display {
        min-height: 44px;
    }

    .rcb-rst-link-btn,
    .rcb-etlp-link-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .hiw-close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Pro terminal buttons */
    .ot-tab {
        min-height: 40px;
    }

    .trade-tab {
        min-height: 44px;
    }

    .pct-btn {
        min-height: 40px;
    }

    .btn-buy,
    .btn-sell {
        min-height: 48px;
    }

    .cancel-btn {
        min-height: 36px;
        padding: 0.3rem 0.6rem;
    }

    .orders-tab {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Chart toolbar buttons */
    .pro-chart-toolbar button {
        min-height: 36px;
        min-width: 36px;
    }

    /* Predict panel buttons */
    .pp-amt-btn {
        min-height: 40px;
    }

    .pp-btn-bull,
    .pp-btn-bear {
        min-height: 48px;
    }

    /* Pair selector */
    .pair-selector-btn {
        min-height: 44px;
    }

    /* Unfurl panel tap highlight removal */
    .swap-card,
    .pair-selector-btn {
        -webkit-tap-highlight-color: transparent;
    }

    /* Withdraw alert button */
    .withdraw-alert-btn {
        min-height: 36px;
    }

    /* Epoch banner */
    .epoch-banner {
        min-height: 44px;
    }

    /* Route mode tabs */
    .rm-tab {
        min-height: 36px;
    }
}

/* ── Samsung Internet Fixes ──────────────────────────────────── */

@supports not (backdrop-filter: blur(4px)) {
    .swap-card {
        background: rgba(17, 26, 40, 0.85);
    }

    .pro-chart-wrap {
        background: rgba(17, 26, 40, 0.85);
    }

    .hiw-overlay {
        background: rgba(0, 0, 0, 0.85);
    }
}

/* ── History Table — Card Layout on Mobile ───────────────────── */

@media (max-width: 600px) {
    .rcb-history-table {
        display: block !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        white-space: normal !important;
    }

    .rcb-history-table thead {
        display: none !important;
    }

    .rcb-history-table tbody,
    .rcb-history-table tr {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .rcb-history-table tr {
        padding: 0.85rem 1rem;
        margin: 0 auto 0.5rem;
        max-width: 28rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
        border: 1px solid rgba(0, 150, 255, 0.1);
        border-bottom: 1px solid rgba(0, 150, 255, 0.1);
        box-sizing: border-box;
        overflow: hidden;
    }

    .rcb-history-table td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0.35rem 0 !important;
        border-bottom: none !important;
        box-sizing: border-box;
        overflow: hidden !important;
        white-space: normal !important;
        word-break: break-word;
        text-align: right;
    }

    .rcb-history-table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.7);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 600;
        flex-shrink: 0;
        min-width: 7rem;
        text-align: left;
    }

    .rcb-history-table td[data-label=""]::before,
    .rcb-history-table td:not([data-label])::before {
        display: none;
    }

    /* Card mode: no horizontal scroll needed, remove fade overlay */
    .rcb-history-wrap {
        overflow: hidden !important;
    }
    .rcb-history-wrap::after {
        display: none !important;
    }

    /* Pro terminal orders table — card layout */
    .orders-table {
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    .orders-table thead {
        display: none !important;
    }

    .orders-table tbody,
    .orders-table tr {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .orders-table tr {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 8px;
        border-bottom: none;
        box-sizing: border-box;
        overflow: hidden;
    }

    .orders-table td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0.3rem 0 !important;
        border-bottom: none !important;
        box-sizing: border-box;
        overflow: hidden !important;
        white-space: normal !important;
        word-break: break-word;
    }

    .orders-table td::before {
        content: attr(data-label);
        font-size: 0.65rem;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        flex-shrink: 0;
        min-width: 5rem;
    }

    .orders-table td[data-label=""]::before,
    .orders-table td:not([data-label])::before {
        display: none;
    }

    .orders-table td[data-label=""] {
        justify-content: flex-end;
    }
}

/* ── Deposit Modal — Bottom Sheet on Mobile ──────────────────── */

@media (max-width: 600px) {
    #depositModal .modal-content {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* HIW overlay — safer bottom padding */
    .hiw-card {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Balance Bar Mobile (Pro Terminal) ───────────────────────── */

@media (max-width: 600px) {
    .bal-bar {
        flex-direction: row;
        justify-content: space-around;
        gap: 0.25rem;
        padding: 0.35rem 0.4rem;
    }

    .bal-item {
        flex: 1;
        min-width: 0;
    }

    .bal-token {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── Reduce Motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .rcb-spinner,
    .rcb-loading {
        animation: none;
    }

    .hiw-scene {
        transition: none;
    }

    .hiw-cursor.bounce,
    .hiw-cursor.clicking,
    .hiw-click-ring.active,
    .hiw-dropdown-item.slide-in,
    .hiw-mock-input.typing,
    .hiw-mock-btn.shimmer,
    .hiw-flight-coin.fly,
    .hiw-flight-arrow.pulse,
    .hiw-coin-particle.fall {
        animation: none;
    }

    .ob-flash,
    .ts-flash,
    .bal-flash-up,
    .bal-flash-down {
        animation: none;
    }

    .btn-buy:hover,
    .btn-sell:hover,
    .pp-btn-bull:hover,
    .pp-btn-bear:hover {
        transform: none;
    }
}

/* Font sizes for exchange elements are controlled by mobile-responsive.css
   and inline <style> blocks with specific overrides. Do NOT set font-size
   here without !important — inline styles and mobile-responsive.css will override. */