/* Mobile UX layer — loaded last, after inline <style> blocks.
   Breakpoints: 900 (tablet), 720 (phone), 480 (small phone), 400 (narrow). */

:root {
    --m-tap: 46px;
    --m-pad: 14px;
    --m-gap: 10px;
    --m-radius: 14px;
    --m-sheet-radius: 20px;
    --rdv-cta-h: 80px;
}

/* ---------- 1. Global guards: nothing overflows, nothing zooms ---------- */

@media (max-width: 900px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* `clip` (not `hidden`) — `hidden` would make body a scroll container and
       kill `position: sticky` on the topbar. */
    body {
        overflow-x: clip;
    }

    img,
    video,
    canvas,
    iframe,
    embed,
    object {
        max-width: 100%;
    }

    input,
    select,
    textarea,
    .auth-field,
    .svc-textarea,
    #recover-guest-code {
        font-size: 16px !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .shell {
        padding-left: max(var(--m-pad), env(safe-area-inset-left, 0px));
        padding-right: max(var(--m-pad), env(safe-area-inset-right, 0px));
    }

    .svc-copy-stack {
        margin-left: 0;
        margin-right: 0;
    }

    .topbar-api-error {
        white-space: normal;
        font-size: 0.74rem;
        line-height: 1.3;
    }
}

/* ---------- 2. Topbar: single row, never squeezed or overlapping ---------- */

@media (max-width: 720px) {
    .topbar {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .topbar-row {
        min-height: 54px;
        gap: 6px;
        flex-wrap: nowrap;
        align-items: center;
    }

    .logo {
        min-width: 0;
        flex: 0 1 auto;
        gap: 8px;
    }

    .logo-text {
        font-size: 0.88rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar-actions {
        gap: 6px;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .topbar-balance-pill {
        min-width: 0;
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar-balance-pill,
    .topbar-topup-btn,
    .topbar-bot-btn,
    .topbar-auth-btn,
    .topbar-logout-btn {
        min-height: 42px;
        padding: 8px 13px;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    .topbar-topup-btn {
        max-width: 34vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 400px) {
    .logo-text {
        display: none;
    }

    .topbar-balance-pill,
    .topbar-topup-btn,
    .topbar-bot-btn,
    .topbar-auth-btn,
    .topbar-logout-btn {
        padding: 8px 11px;
        font-size: 0.76rem;
    }
}

/* ---------- 3. Bottom action bar + matching body padding ---------- */

@media (max-width: 720px) {
    .global-mobile-cta {
        gap: var(--m-gap);
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .global-mobile-cta .act {
        min-height: 50px;
        padding: 13px 12px;
        font-size: 0.92rem;
    }

    body.has-mobile-cta {
        padding-bottom: calc(var(--rdv-cta-h) + env(safe-area-inset-bottom, 0px));
    }

    body.nav-minimal.page-studio.has-mobile-cta {
        padding-bottom: 28px;
    }
}

/* ---------- 4. Touch targets and typography ---------- */

@media (max-width: 720px) {
    .act,
    .ui-btn-primary,
    .ui-btn-secondary,
    .auth-submit,
    .studio-side-btn,
    .mini-act,
    .btn-find-bot,
    .btn-go-bot,
    .bot-copy-nick {
        min-height: var(--m-tap);
        font-size: 0.9rem;
    }

    .act {
        padding: 12px 18px;
    }

    .act-lg {
        min-height: 52px;
        padding: 14px 20px;
        font-size: 0.98rem;
    }

    .auth-tab,
    .auth-method-tab {
        min-height: 42px;
        font-size: 0.84rem;
        padding: 9px 13px;
    }

    .mega-h1 {
        font-size: clamp(2.1rem, 9.2vw, 3.15rem);
        letter-spacing: -1px;
        line-height: 1.03;
    }

    .section-h {
        font-size: clamp(1.5rem, 6.4vw, 2.1rem);
        letter-spacing: -0.5px;
    }

    .section {
        padding: 48px 0;
    }

    /* Nothing below ~12.5px on a phone. */
    .svc-tab-sub,
    .hot-scene-card span,
    .up-stats .lbl,
    .lv-idx,
    .studio-history-head,
    .topup-card__promo-label,
    .post-c-tag,
    .bot-col h5,
    body.nav-minimal .section-num,
    body .section-num {
        font-size: 0.78rem;
        line-height: 1.3;
    }

    .studio-history-empty {
        font-size: 0.8rem;
        line-height: 1.45;
    }

    /* Navigational links need a real tap target; prose links stay inline. */
    .topbar .logo {
        min-height: 44px;
        min-width: 44px;
    }

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

    .bot-col a,
    .bot-bot a {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
    }

    .bot-col li {
        margin-bottom: 2px;
    }
}

/* ---------- 5. Landing: every row collapses cleanly ---------- */

@media (max-width: 720px) {
    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: var(--m-gap);
    }

    .hero-cta .act {
        width: 100%;
        justify-content: center;
    }

    .hero-meta {
        flex-wrap: wrap;
        gap: 12px 16px;
    }

    .meta-cell {
        min-width: 0;
        flex: 1 1 42%;
    }

    .up-stats {
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
        gap: 8px;
    }

    .svc-tabs {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .svc-tab {
        min-height: 58px;
        padding: 13px 14px;
    }

    .topup-packages--grid {
        grid-template-columns: 1fr;
    }

    .posts-row,
    .reviews-strip,
    .bot-grid,
    .rate-table {
        grid-template-columns: 1fr;
    }

    .section-row {
        gap: 10px;
    }

    .tg-cta {
        padding: 36px 18px;
    }

    .bot-finder-card {
        padding: 32px 18px 28px;
    }

    .bot-finder-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bot-finder-actions .btn-find-bot {
        width: 100%;
    }

    .bot-finder-result__btns .btn-go-bot,
    .bot-copy-nick {
        width: 100%;
    }
}

/* ---------- 6. Modals become bottom sheets that always scroll ---------- */

@media (max-width: 720px) {
    .ui-overlay {
        align-items: flex-end;
        justify-content: center;
        padding: 0;
        overflow-y: auto;
    }

    .ui-overlay > * {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        max-height: 92dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--m-sheet-radius) var(--m-sheet-radius) 0 0;
    }

    .ui-card,
    .auth-modal-card,
    .pay-sheet,
    .bonus-modal-card,
    .link-tg-modal-card,
    .result-viewer-card {
        padding: 22px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .studio-drawer {
        align-items: flex-end;
        padding: 0;
    }

    .studio-drawer-card {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: var(--m-sheet-radius) var(--m-sheet-radius) 0 0;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .ui-card-close,
    .auth-modal-close,
    .result-viewer-close,
    .studio-drawer-close {
        min-width: 44px;
        min-height: 44px;
    }

    .pay-sheet__methods {
        gap: var(--m-gap);
    }

    .overlay-gate {
        padding: 14px;
    }

    .captcha-panel {
        padding: 24px 16px 20px;
    }

    .captcha-check-row {
        padding: 14px 12px;
    }
}

/* ---------- 7. Age gate (inline styles need overriding) ---------- */

@media (max-width: 720px) {
    #age-gate {
        padding: 12px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    #age-gate > div {
        max-width: none !important;
        padding: 24px 16px !important;
        border-radius: 18px !important;
    }

    #age-gate h2 {
        font-size: 19px !important;
        letter-spacing: 1px !important;
    }

    #age-gate label {
        font-size: 14px !important;
    }

    #age-accept,
    #age-reject {
        width: 100% !important;
        min-width: 0 !important;
        padding: 15px 18px !important;
        font-size: 14px !important;
    }
}

/* ---------- 8. Studio: mode grid, roomy controls, stacked history ---------- */

@media (max-width: 768px) {
    /* Flatten the aside so modes / workspace / history / account can be reordered
       independently: work area sits right under the mode picker. */
    .studio-shell,
    .studio-shell--wide {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .studio-sidebar {
        display: contents;
    }

    .studio-nav {
        order: 1;
    }

    .studio-main {
        order: 2;
    }

    .studio-history {
        order: 3;
    }

    .studio-sidebar-foot {
        order: 4;
    }

    .up-panel {
        padding: 18px 14px;
    }

    .studio-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding: 0;
    }

    .studio-nav-item {
        min-height: 48px;
        padding: 10px 12px;
        font-size: 0.86rem;
        justify-content: center;
        text-align: center;
        border-radius: 12px;
    }

    .studio-nav-item:last-child {
        grid-column: 1 / -1;
    }

    .studio-sidebar-foot {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
        gap: 8px;
        width: 100%;
        margin: 0;
    }

    .studio-sidebar-foot .studio-side-btn {
        min-height: 44px;
        font-size: 0.82rem;
        padding: 10px 12px;
    }

    .drop-zone {
        padding: 26px 14px;
    }

    .drop-status {
        flex-wrap: wrap;
        gap: 8px;
    }

    .drop-change-btn {
        min-height: 40px;
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .studio-run-block .act {
        min-height: 52px;
        font-size: 0.96rem;
    }

    .hot-scene-dur {
        flex-wrap: wrap;
        gap: 8px;
    }

    .hot-scene-dur-btn {
        flex: 1 1 132px;
        min-height: 44px;
        padding: 11px 10px;
        font-size: 0.84rem;
        border-radius: 10px;
        white-space: nowrap;
    }

    .hot-scene-cats {
        gap: 8px;
    }

    .hot-scene-cat-btn {
        min-height: 40px;
        padding: 9px 14px;
        font-size: 0.82rem;
    }

    .hot-scene-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    .svc-fs-tab {
        min-height: 44px;
        font-size: 0.84rem;
    }

    .svc-face-drop {
        min-height: 52px;
        font-size: 0.84rem;
    }

    .studio-history-filters {
        gap: 8px;
    }

    .studio-history-filter {
        min-height: 40px;
        padding: 9px 13px;
        font-size: 0.78rem;
        border-radius: 999px;
    }

    .studio-history-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
    }

    .studio-history-empty {
        grid-column: 1 / -1;
    }

    .studio-history-item img,
    .studio-history-item video {
        max-height: 120px;
        object-fit: cover;
    }

    .gen-result-toolbar .act,
    .result-viewer-toolbar .act {
        min-width: 0;
        flex: 1 1 140px;
    }

    .result-viewer-media-wrap {
        min-height: 180px;
    }
}

@media (max-width: 480px) {
    .up-panel {
        padding: 16px 12px;
    }

    .studio-nav-item {
        font-size: 0.82rem;
        padding: 10px 8px;
    }

    .studio-history-list {
        grid-template-columns: 1fr;
    }

    .hot-scene-dur-btn {
        flex: 1 1 100%;
    }
}