/* DBO LIVE LAB V2.5.16 — mobile-first operational layer.
   Loaded last so phone ergonomics stay isolated from the desktop workspace. */

@media (max-width: 768px), (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
    :root {
        --mobile-nav-height: 68px;
        --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
        --mobile-safe-top: env(safe-area-inset-top, 0px);
        --mobile-gutter: 12px;
        --mobile-tap: 44px;
    }

    html {
        width: 100%;
        overflow-x: hidden;
        scroll-padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 16px);
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
        overscroll-behavior-x: none;
        -webkit-tap-highlight-color: transparent;
    }

    body,
    button,
    input,
    select,
    textarea { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea { font-size: 16px !important; }

    button,
    summary,
    select,
    input[type="range"],
    label[for] { touch-action: manipulation; }

    button:focus-visible,
    a:focus-visible,
    summary:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 3px solid rgba(78, 231, 208, .72);
        outline-offset: 2px;
    }

    .container,
    .tab-content,
    .glass-panel,
    .sd-shell,
    .idol-shell { min-width: 0; max-width: 100%; }

    /* Compact top status row + reachable bottom navigation. */
    .studio-header {
        position: sticky;
        top: 0;
        z-index: 9000;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "brand controls";
        gap: 8px;
        min-height: 58px;
        padding: calc(8px + var(--mobile-safe-top)) var(--mobile-gutter) 8px;
        border-bottom-color: rgba(132, 151, 193, .18);
        background: rgba(5, 11, 21, .94);
        box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
        /* A filtered ancestor traps position:fixed children on Safari/Chromium.
           Keep the navigation viewport-fixed by using an opaque mobile header. */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .brand-lockup { grid-area: brand; min-width: 0; }
    .brand-lockup .brand-mark { flex: 0 0 auto; }
    .brand-copy { min-width: 0; }
    .brand-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .header-right { grid-area: controls; min-width: 0; }
    .status-panel { max-width: 116px; }
    .status-copy { min-width: 0; }
    .status-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .studio-header .tab-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9990;
        display: flex;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        height: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
        padding: 6px max(6px, env(safe-area-inset-right)) var(--mobile-safe-bottom) max(6px, env(safe-area-inset-left));
        gap: 2px;
        overflow-x: auto;
        overflow-y: hidden;
        border: 0;
        border-top: 1px solid rgba(132, 151, 193, .2);
        border-radius: 0;
        background: rgba(6, 14, 26, .97);
        box-shadow: 0 -12px 30px rgba(0, 0, 0, .34);
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }

    .studio-header .tab-nav::-webkit-scrollbar { display: none; }
    .studio-header .tab-btn[hidden] { display: none !important; }
    .studio-header .tab-btn,
    .studio-header .tab-link {
        position: relative;
        display: grid;
        grid-template-rows: 24px 14px;
        place-items: center;
        flex: 1 0 66px;
        width: auto;
        min-width: 66px;
        min-height: 54px;
        height: 54px;
        padding: 5px 4px 4px;
        gap: 2px;
        overflow: hidden;
        border: 0;
        border-radius: 12px;
        color: #92a1b9;
        background: transparent;
        box-shadow: none;
        font-size: 9.5px;
        font-weight: 750;
        line-height: 1;
        scroll-snap-align: center;
        white-space: nowrap;
    }

    .studio-header .tab-btn > span:last-child,
    .studio-header .tab-link > span:last-child {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .studio-header .tab-btn .material-symbols-rounded,
    .studio-header .tab-link .material-symbols-rounded { font-size: 22px; line-height: 24px; }
    .studio-header .tab-btn.active {
        color: #fff;
        background: linear-gradient(145deg, rgba(116, 88, 255, .88), rgba(81, 65, 212, .86));
        box-shadow: 0 6px 18px rgba(101, 76, 235, .26);
        transform: none;
    }

    /* Account controls become a one-hand bottom sheet. */
    .account-menu summary { min-width: var(--mobile-tap); min-height: var(--mobile-tap); }
    .account-popover {
        position: fixed;
        top: auto;
        right: var(--mobile-gutter);
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 8px);
        left: var(--mobile-gutter);
        width: auto;
        max-height: min(520px, calc(100dvh - var(--mobile-nav-height) - 88px - var(--mobile-safe-top)));
        padding: 8px;
        overflow-y: auto;
        border-radius: 18px;
        box-shadow: 0 22px 70px rgba(0, 0, 0, .58);
    }
    .account-popover a,
    .account-popover button,
    .account-language { min-height: 48px; border-radius: 12px; }

    .tab-content,
    #tab-gifts,
    #tab-dev-test,
    #tab-history,
    #tab-idol-score {
        width: 100%;
        padding: 10px var(--mobile-gutter) 22px;
        overflow-x: clip;
    }

    /* Dashboard: clear vertical reading order and stable touch controls. */
    .connect-bar-mini button,
    .panel-save-button,
    .text-button,
    .btn-sm,
    .history-actions button { min-height: var(--mobile-tap); }

    .connect-bar-mini { overflow: hidden; }
    .connect-bar-mini input { min-width: 0; }
    .connect-bar-mini #connect-btn,
    .connect-bar-mini #disconnect-btn { white-space: nowrap; }

    .chat-col { grid-template-rows: minmax(360px, 56dvh) minmax(320px, 48dvh); }
    .chat-panel,
    .queue-panel { height: auto; min-height: 0; }
    .chat-messages,
    #audio-queue-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

    .profile-actions { grid-template-columns: 1fr; }
    .profile-actions button { width: 100%; }

    .now-playing-card { align-items: center; }
    .bgm-controls { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bgm-controls button { width: 100%; min-height: var(--mobile-tap); }

    .gifts-controls,
    .gifts-controls.is-favorites { grid-template-columns: 1fr; }
    .gift-search-field { grid-column: auto; }
    .gift-filter-field select,
    .gift-search-control { min-height: var(--mobile-tap); }

    .history-header { flex-direction: column; gap: 12px; }
    .history-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .history-card { padding: 14px; border-radius: 15px; }
    .history-stats { gap: 8px; }
    .history-stat { min-width: 0; padding: 10px; }

    /* Studio: compact show selector, scrollable scene rail and persistent runner. */
    #tab-studio,
    #tab-studio.active {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        overflow: visible;
    }

    .sd-shell {
        display: block;
        width: 100%;
        height: auto;
        border: 0;
        border-radius: 0;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        box-shadow: none;
    }

    .sd-program-panel,
    .sd-control-panel { padding: 14px var(--mobile-gutter); }
    .sd-program-panel { border-right: 0; border-bottom: 1px solid var(--sd-border); }
    .sd-panel-heading p { margin-top: 4px; }
    .sd-progress { height: 7px; margin-top: 10px; }

    .sd-manage-idols {
        display: inline-grid;
        width: calc(50% - 4px);
        min-height: 52px;
        margin-top: 11px;
        vertical-align: top;
    }
    .sd-manage-music { margin-left: 4px; }

    .sd-sections {
        display: flex;
        flex: none;
        gap: 7px;
        margin: 10px calc(-1 * var(--mobile-gutter)) 0;
        padding: 0 var(--mobile-gutter) 5px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .sd-section-button {
        flex: 0 0 148px;
        min-width: 148px;
        min-height: 54px;
        scroll-snap-align: start;
    }
    .sd-section-button.is-drop-before::before,
    .sd-section-button.is-drop-after::after {
        top: 4px;
        bottom: 4px;
        width: 3px;
        height: auto;
    }
    .sd-section-button.is-drop-before::before { right: auto; left: -5px; }
    .sd-section-button.is-drop-after::after { right: -5px; left: auto; }
    .sd-end-live { width: 100%; min-height: 50px; margin-top: 8px; }

    .sd-main-header {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px var(--mobile-gutter);
    }
    .sd-title-row h1 { font-size: 16px; }
    .sd-mode-switch,
    .sd-lock-button { grid-column: 1; grid-row: auto; width: 100%; justify-self: stretch; }
    .sd-mode-switch button { flex: 1; min-width: 0; min-height: var(--mobile-tap); }
    .sd-lock-button { min-height: 50px; }

    .sd-timeline-view,
    .sd-quick-view { padding-inline: var(--mobile-gutter); }
    .sd-main-panel { padding-bottom: 118px; }
    .sd-cue-row { min-height: 48px; }
    .sd-cue-menu { width: 36px; height: 40px; }
    .sd-quick-toolbar { align-items: flex-start; gap: 8px; }
    .sd-quick-toolbar button { min-height: var(--mobile-tap); }
    .sd-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-quick-card { min-height: 112px; }
    .sd-quick-grid.is-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .sd-effect-pad { min-height: 0; }
    .sd-effect-pad-controls { flex-wrap: wrap; }
    .sd-effect-navigation { width: 100%; }
    .sd-effect-tabs { min-height: 42px; }
    .sd-effect-pad-grid,
    .sd-effect-pad-grid.is-all {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(78px, auto);
        height: auto;
        max-height: 62dvh;
    }
    .sd-effect-pad-grid.is-all .sd-effect-pad-button { min-height: 72px; }

    .sd-runner-bar {
        position: fixed;
        right: 0;
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
        left: 0;
        z-index: 9800;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 8px var(--mobile-gutter);
        border-top: 1px solid rgba(143, 164, 208, .26);
        background: rgba(6, 16, 29, .96);
        box-shadow: 0 -12px 28px rgba(0, 0, 0, .34);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }
    #sd-prev-cue { grid-column: 1; grid-row: 2; }
    #sd-pause-timeline { grid-column: 2; grid-row: 2; }
    #sd-next-cue { grid-column: 3; grid-row: 2; }
    .sd-run-next { grid-column: 1 / -1; grid-row: 1; min-height: 48px; }
    .sd-runner-bar > button:not(.sd-run-next) { min-height: 46px; padding-inline: 2px; }
    .sd-auto-toggle {
        grid-column: 4;
        grid-row: 2;
        justify-self: stretch;
        justify-content: center;
        min-height: 46px;
        font-size: 8px;
        text-align: center;
    }
    .sd-cue-load {
        grid-column: 5;
        grid-row: 2;
        min-height: 46px;
    }
    .sd-cue-load > span { display: none; }
    .sd-cue-load button { justify-content: center; width: 100%; min-height: 46px; padding-inline: 4px; }

    .sd-control-panel { display: grid; grid-template-columns: 1fr; border-left: 0; }
    .sd-control-panel section { padding: 14px; }
    .sd-player-controls button { min-width: var(--mobile-tap); min-height: var(--mobile-tap); }
    .sd-player-controls .sd-player-main { width: 58px; height: 58px; }
    .sd-bgm-actions > * { min-height: var(--mobile-tap); }
    .sd-volume-panel label { min-height: var(--mobile-tap); }
    .sd-stop-all { min-height: 54px; }

    /* Idol scoreboard: MC-readable cards plus intentionally scrollable ledger. */
    .idol-shell { padding: 0; }
    .idol-header { gap: 14px; padding: 15px; border-radius: 16px; }
    .idol-title { align-items: flex-start; }
    .idol-title > .material-symbols-rounded { width: 44px; height: 44px; }
    .idol-title h1,
    .idol-header h2 { font-size: 1.15rem; }
    .idol-header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
    .idol-ledger-status { grid-column: 1 / -1; justify-content: center; min-height: var(--mobile-tap); }
    .idol-action-button { justify-content: center; min-height: var(--mobile-tap); padding-inline: 8px; }

    .idol-score-grid { grid-template-columns: 1fr; gap: 9px; }
    .idol-score-card { min-height: 126px; padding: 13px 15px; }
    .idol-diamond-total strong { font-size: 2rem; }
    .idol-control-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .idol-control-strip > div { min-height: 66px; padding: 10px; }
    .idol-live-grid { grid-template-columns: 1fr; }
    .idol-ledger-panel > header,
    .idol-mc-panel > header { height: auto; min-height: 60px; padding: 11px 13px; }
    .idol-ledger-table-wrap { width: 100%; height: min(430px, 56dvh); overflow: auto; -webkit-overflow-scrolling: touch; }
    .idol-ledger-table { min-width: 760px; }
    .idol-mc-panel { display: block; }

    /* Mobile dialogs use a familiar bottom-sheet pattern. */
    .sd-modal-backdrop,
    .idol-config-backdrop,
    .idol-gift-picker-backdrop {
        align-items: end;
        padding: 0;
    }
    .sd-cue-modal,
    .idol-config-modal,
    .idol-gift-picker {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: min(92dvh, calc(100dvh - var(--mobile-safe-top) - 8px));
        margin: 0;
        padding-bottom: calc(16px + var(--mobile-safe-bottom));
        overflow-y: auto;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 22px 22px 0 0;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .sd-cue-modal { padding: 18px var(--mobile-gutter) calc(18px + var(--mobile-safe-bottom)); }
    .sd-cue-modal header button,
    .idol-config-modal > header button,
    .idol-gift-picker header button { width: var(--mobile-tap); height: var(--mobile-tap); }
    .sd-modal-actions {
        position: sticky;
        bottom: calc(-18px - var(--mobile-safe-bottom));
        z-index: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 18px calc(-1 * var(--mobile-gutter)) calc(-18px - var(--mobile-safe-bottom));
        padding: 12px var(--mobile-gutter) calc(12px + var(--mobile-safe-bottom));
        border-top: 1px solid var(--sd-border);
        background: rgba(9, 22, 39, .97);
    }
    .sd-modal-actions > span { display: none; }
    .sd-modal-actions button { min-height: 46px; }
    .sd-modal-actions .sd-delete-cue { grid-column: 1 / -1; }

    .sd-effect-manager-item,
    .sd-music-item,
    .sd-bgm-library-row { min-width: 0; }
    .sd-effect-manager-list,
    .sd-music-library-list,
    .sd-bgm-library-list { max-height: 55dvh; }
    .sd-music-library-actions { position: sticky; bottom: 0; }

    .idol-config-modal > header,
    .idol-gift-picker > header { padding: 16px var(--mobile-gutter); }
    .idol-config-toolbar { align-items: stretch; flex-direction: column; padding-inline: var(--mobile-gutter); }
    .idol-config-toolbar button { justify-content: center; min-height: var(--mobile-tap); }
    .idol-config-list { grid-template-columns: 1fr; padding-inline: var(--mobile-gutter); }
    .idol-config-modal footer,
    .idol-gift-picker > footer {
        position: sticky;
        bottom: 0;
        padding: 12px var(--mobile-gutter) calc(12px + var(--mobile-safe-bottom));
        background: rgba(9, 22, 39, .98);
    }
    .idol-config-modal footer button,
    .idol-gift-picker > footer button { min-height: 46px; }
    .idol-gift-picker-controls { grid-template-columns: 1fr; padding-inline: var(--mobile-gutter); }
    .idol-gift-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px var(--mobile-gutter); }
    .idol-gift-tile { min-height: 138px; }

    .modal-overlay,
    .account-details-backdrop { align-items: end; padding: 0; }
    .modal-content,
    .account-details-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(92dvh, calc(100dvh - var(--mobile-safe-top) - 8px));
        margin: 0;
        border-radius: 22px 22px 0 0 !important;
        padding-bottom: calc(16px + var(--mobile-safe-bottom));
        overscroll-behavior: contain;
    }
}

@media (max-width: 390px) {
    :root { --mobile-gutter: 10px; }
    .status-panel { max-width: 102px; padding-inline: 7px; }
    .studio-header .tab-btn,
    .studio-header .tab-link { flex-basis: 62px; min-width: 62px; }
    .sd-manage-idols { width: 100%; }
    .sd-manage-music { margin-top: 7px; margin-left: 0; }
    .sd-quick-grid.is-all,
    .sd-effect-pad-grid,
    .sd-effect-pad-grid.is-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .history-actions { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
    :root { --mobile-nav-height: 58px; }
    .studio-header { position: relative; padding-top: 7px; }
    .studio-header .tab-nav { padding-top: 3px; }
    .studio-header .tab-btn,
    .studio-header .tab-link { grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: 1fr; min-height: 46px; height: 46px; }
    .sd-main-panel { padding-bottom: 108px; }
    .chat-col { grid-template-rows: repeat(2, minmax(280px, 82dvh)); }
    .sd-effect-pad-grid,
    .sd-effect-pad-grid.is-all { max-height: 74dvh; }
}

@media (min-width: 769px) and (max-width: 1024px) and (pointer: coarse) {
    button,
    summary,
    select { min-height: 44px; }
    .studio-header .tab-nav {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .studio-header .tab-nav::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}