/* Mobile layouts are isolated from desktop styles and loaded last. */
.mobile-nav, .mobile-menu, .mobile-section-toggle { display:none; }
@media (max-width:820px) {
    html { -webkit-text-size-adjust:100%; scroll-padding-bottom:24px; }
    body { min-width:0; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size:16px !important; }
    button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
    button, a { touch-action:manipulation; }
    button:focus-visible, a:focus-visible { outline:2px solid #6366f1; outline-offset:3px; }
    [data-mobile-page="index"], [data-mobile-page="index"] body { height:var(--mobile-height,100dvh); overflow:hidden; }
    [data-mobile-page="index"] .app-shell { height:var(--mobile-height,100dvh); min-height:0; --mobile-nav-height:64px; }
    [data-mobile-page="index"] #studioSidebar { display:none !important; }
    /* Leave room for the floating dock without covering iframe controls. */
    [data-mobile-page="index"] .stage { bottom:calc(94px + env(safe-area-inset-bottom,0px)); }
    .mobile-nav {
        --glass-fill:rgba(248,250,255,.72);
        --glass-edge:rgba(255,255,255,.85);
        --glass-highlight:rgba(255,255,255,.78);
        --glass-selected:rgba(222,231,246,.72);
        position:fixed; z-index:600;
        left:max(12px,env(safe-area-inset-left,0px)); right:max(12px,env(safe-area-inset-right,0px));
        bottom:calc(14px + env(safe-area-inset-bottom,0px));
        width:auto; max-width:480px; margin-inline:auto; height:68px; box-sizing:border-box;
        display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:6px;
        border:1px solid var(--glass-edge); border-radius:26px; color:var(--text,#172033);
        background:linear-gradient(145deg,rgba(255,255,255,.34),transparent 48%,rgba(173,194,230,.12)),var(--glass-fill);
        -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
        box-shadow:0 10px 32px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.06),inset 0 1px 0 var(--glass-highlight),inset 0 -1px 0 rgba(255,255,255,.22);
        isolation:isolate;
    }
    .mobile-nav::before {
        content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
        background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 32% 68%,rgba(255,255,255,.1));
    }
    .mobile-nav button {
        min-width:0; min-height:44px; position:relative; border:1px solid transparent; border-radius:20px;
        background:transparent; color:inherit; display:flex; flex-direction:column; align-items:center;
        justify-content:center; gap:4px; font-size:11px; font-weight:650;
        transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
    }
    .mobile-nav svg { width:21px; height:21px; flex-shrink:0; }
    .mobile-nav button.active {
        background:linear-gradient(155deg,rgba(255,255,255,.26),transparent),var(--glass-selected);
        color:var(--text,#172033); border-color:var(--glass-edge);
        box-shadow:inset 0 1px 0 var(--glass-highlight),0 2px 7px rgba(15,23,42,.07);
    }
    .mobile-nav button:active { transform:scale(.94); }
    html.theme-dark .mobile-nav {
        --glass-fill:rgba(25,34,49,.78); --glass-edge:rgba(191,211,241,.2);
        --glass-highlight:rgba(224,237,255,.18); --glass-selected:rgba(65,84,112,.82);
        background:linear-gradient(145deg,rgba(160,185,225,.12),transparent 48%,rgba(114,149,208,.08)),var(--glass-fill);
        box-shadow:0 12px 36px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.16),inset 0 1px 0 var(--glass-highlight);
    }
    @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
        .mobile-nav { --glass-fill:#f1f5fb; }
        html.theme-dark .mobile-nav { --glass-fill:#202b3d; }
    }
    @media (prefers-reduced-motion:reduce) {
        .mobile-nav button { transition:none; }
        .mobile-nav button:active { transform:none; }
    }
    .mobile-menu[open] { display:flex; flex-direction:column; position:fixed; inset:auto 0 0; margin:0; width:100%; max-width:none; max-height:85dvh; padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px)); border:0; border-radius:24px 24px 0 0; color:var(--text,#172033); background:var(--sidebar-bg,#fff); box-shadow:0 -16px 60px #0002; overflow:auto; }
    .mobile-menu::backdrop { background:rgba(15,23,42,.45); }
    .mobile-menu-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:18px; font-weight:750; }
    .mobile-menu button { min-height:48px; border:1px solid var(--border,#e2e8f0); border-radius:12px; background:transparent; color:inherit; font-size:14px; }
    .mobile-menu-head button { width:44px; min-height:44px; }
    .mobile-menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .mobile-menu-grid button.active { background:var(--nav-active-bg,#e9edf5); color:var(--text,#172033); border-color:var(--nav-active-border,#cbd5e1); font-weight:750; }
    .mobile-menu-actions { display:flex; gap:10px; margin-top:18px; }
    .mobile-menu-actions button { flex:1; }
    [data-mobile-page="index"].mobile-keyboard .mobile-nav { display:none; }
    [data-mobile-page="index"].mobile-keyboard .stage { bottom:0; }

    /* Settings: compact, horizontally scrollable provider selection and a reachable save bar. */
    [data-mobile-page="api-settings"] .page { padding:16px 12px 32px; }
    [data-mobile-page="api-settings"] .page-head { margin-bottom:16px; gap:8px; }
    [data-mobile-page="api-settings"] .title { font-size:24px; }
    [data-mobile-page="api-settings"] .layout { gap:14px; min-width:0; }
    [data-mobile-page="api-settings"] .sidebar { padding:12px; min-width:0; }
    [data-mobile-page="api-settings"] .provider-list { display:flex; overflow-x:auto; gap:8px; padding:4px 0 8px; scroll-snap-type:x proximity; }
    [data-mobile-page="api-settings"] .provider-card { flex:0 0 160px; min-width:0; scroll-snap-align:start; min-height:58px; }
    [data-mobile-page="api-settings"] .add-btn { margin-top:8px; min-height:44px; }
    [data-mobile-page="api-settings"] .content { min-width:0; gap:14px; }
    [data-mobile-page="api-settings"] .content-head { position:sticky; top:0; z-index:25; padding:12px; display:flex; flex-direction:row; align-items:center; gap:8px; background:var(--card,#fff); border:1px solid var(--line,#e2e8f0); border-radius:14px; }
    [data-mobile-page="api-settings"] .content-head > div:first-child { min-width:0; flex:1; }
    [data-mobile-page="api-settings"] .editor-title { font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    [data-mobile-page="api-settings"] .editor-sub { display:none; }
    [data-mobile-page="api-settings"] .content-actions { width:auto; flex-shrink:0; }
    [data-mobile-page="api-settings"] .block { padding:16px; }
    [data-mobile-page="api-settings"] :is(.action-btn,.key-btn,.icon-btn) { min-height:44px; min-width:44px; }
    [data-mobile-page="api-settings"] :is(.form,.model-grid,.endpoint-grid) { grid-template-columns:minmax(0,1fr); }

    /* Asset tabs must scroll within their container, not widen the entire viewport. */
    [data-mobile-page="asset-manager"] body { overflow-x:hidden; }
    [data-mobile-page="asset-manager"] .asset-page { width:100%; min-width:0; padding:14px 12px; }
    [data-mobile-page="asset-manager"] .asset-tabs { width:100%; max-width:100%; overflow-x:auto; flex-shrink:0; }
    [data-mobile-page="asset-manager"] .asset-tabs button { flex-shrink:0; min-height:44px; font-size:13px; }
    [data-mobile-page="asset-manager"] .asset-manager-root { grid-template-columns:minmax(0,1fr); }
    [data-mobile-page="asset-manager"] :is(.asset-panel,.asset-content,.asset-nav,.asset-detail) { min-width:0; }
    [data-mobile-page="asset-manager"] :is(.asset-btn,.asset-icon-btn,.asset-refresh-btn) { min-height:44px; min-width:44px; font-size:12px; }
    [data-mobile-page="asset-manager"] .asset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    [data-mobile-page="asset-manager"] .panel-head { flex-wrap:wrap; }
    .mobile-section-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:0 14px; background:var(--panel,#fff); color:var(--text,#172033); border:1px solid var(--line,#e2e8f0); border-radius:12px; font-size:14px; }
    [data-mobile-page="asset-manager"] .asset-manager-root.mobile-nav-collapsed .asset-nav { display:none; }

    /* Chat uses the visible viewport, including the space left above the keyboard. */
    [data-mobile-page="gpt-chat"] body, [data-mobile-page="gpt-chat"] .chat-shell, [data-mobile-page="gpt-chat"] .chat-main { height:var(--mobile-height,100dvh) !important; min-height:0; }
    [data-mobile-page="gpt-chat"] .topbar { min-height:60px; padding:8px 12px; }
    [data-mobile-page="gpt-chat"] .topbar-inner { gap:8px; }
    [data-mobile-page="gpt-chat"] :is(.action-btn,.rail-close,.send-btn,.attach-btn) { min-width:44px; min-height:44px; }
    [data-mobile-page="gpt-chat"] .rail-close { display:flex; }
    [data-mobile-page="gpt-chat"] .messages { padding-left:12px; padding-right:12px; overscroll-behavior:contain; }
    [data-mobile-page="gpt-chat"] .bubble { max-width:96%; font-size:15px; overflow-wrap:anywhere; }
    [data-mobile-page="gpt-chat"] .bubble pre { max-width:100%; overflow:auto; }
    [data-mobile-page="gpt-chat"] .composer-wrap { padding:6px 8px max(8px,env(safe-area-inset-bottom,0px)); }
    [data-mobile-page="gpt-chat"] .composer { max-height:min(45%,300px); width:100%; }
    [data-mobile-page="gpt-chat"] #messageInput { min-height:64px; max-height:130px; font-size:16px; }
    [data-mobile-page="gpt-chat"] :is(.chat-rail,.system-prompt-popover) { position:fixed; top:64px; left:10px; right:10px; width:auto; max-height:calc(var(--mobile-height,100dvh) - 84px); overflow:auto; }
    [data-mobile-page="gpt-chat"] .thread-delete { opacity:1; width:44px; height:44px; }

    /* Canvas: keep node tools labelled and give them their own scrollable row. */
    [data-mobile-page="canvas"] .topbar { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; left:10px; right:10px; }
    [data-mobile-page="canvas"] .canvas-nav { width:100%; min-width:0; max-width:none; }
    [data-mobile-page="canvas"] .toolbar { display:grid; grid-template-columns:44px minmax(0,1fr); width:100%; min-width:0; max-width:100%; gap:6px; }
    [data-mobile-page="canvas"] .toolbar .toolbar-toggle { width:44px; min-width:44px; height:44px; }
    [data-mobile-page="canvas"] .toolbar-fixed { min-width:0; max-width:100%; margin-left:0; justify-self:end; overflow-x:auto; overflow-y:hidden; touch-action:pan-x; }
    [data-mobile-page="canvas"] .toolbar-items { grid-column:1 / -1; order:3; width:100%; min-width:0; max-width:100%; display:flex; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overflow-y:hidden; padding:4px 0; touch-action:pan-x; }
    [data-mobile-page="canvas"] .toolbar-items .tool-btn { flex:0 0 auto; width:max-content; min-width:68px; height:44px; padding:0 12px; gap:6px; font-size:12px; white-space:nowrap; }
    [data-mobile-page="canvas"] .toolbar .tool-btn :is(svg,i,span) { flex-shrink:0; }
    [data-mobile-page="canvas"] .toolbar.collapsed .toolbar-items { display:none; }
    [data-mobile-page="canvas"] .toolbar :is(.toolbar-items,.toolbar-fixed) .tool-btn span { display:inline; }
    [data-mobile-page="canvas"] .toolbar-fixed .tool-btn { min-height:44px; min-width:44px; width:auto; padding:0 8px; font-size:12px; gap:4px; }
    [data-mobile-page="canvas"] .toolbar.collapsed { width:100%; grid-template-columns:44px minmax(0,1fr); }
    [data-mobile-page="canvas"] .tool-btn { min-height:44px; }
    [data-mobile-page="canvas"] :is(.canvas-delete,.canvas-card-edit,.canvas-pin-btn) { opacity:1; width:36px; height:36px; }
    [data-mobile-page="canvas"] .canvas-card-edit { right:48px; }
    [data-mobile-page="canvas"] .canvas-card-icon-row { padding-right:76px; min-height:36px; }
    [data-mobile-page="canvas"] .resize-handle { opacity:1; width:28px; height:28px; }
    [data-mobile-page="canvas"] .node-head { height:48px; }
    [data-mobile-page="canvas"] .workflow-transfer-panel { top:174px; max-height:calc(100dvh - 190px); }
    [data-mobile-page="canvas"] :is(.prompt-template-panel,.canvas-asset-panel) { max-width:calc(100vw - 20px); }
    /* A viewport-bound modal: media shrinks, prompt scrolls, actions stay visible. */
    [data-mobile-page="canvas"] .output-lightbox {
        height:var(--mobile-height,100dvh); padding:10px;
        padding-top:max(10px,env(safe-area-inset-top,0px));
        padding-bottom:max(10px,env(safe-area-inset-bottom,0px));
        overflow:hidden;
    }
    [data-mobile-page="canvas"] .output-lightbox-shell { width:100%; height:100%; max-height:100%; min-height:0; gap:8px; }
    [data-mobile-page="canvas"] .output-preview { width:100%; flex:1 1 0; height:0; min-height:0; border-radius:18px; touch-action:none; }
    [data-mobile-page="canvas"] .output-preview-bar { top:8px; left:8px; right:8px; }
    [data-mobile-page="canvas"] .preview-icon-btn { width:44px; height:44px; flex-shrink:0; }
    [data-mobile-page="canvas"] .output-resolution { max-width:calc(100% - 156px); }
    [data-mobile-page="canvas"] .output-prompt-panel { flex:0 0 auto; max-height:40%; min-height:0; overflow:hidden; box-sizing:border-box; gap:8px; }
    [data-mobile-page="canvas"] .output-prompt-text { flex:1 1 auto; min-height:0; width:100%; max-height:92px; overflow:auto; overflow-wrap:anywhere; overscroll-behavior:contain; touch-action:pan-y; }
    [data-mobile-page="canvas"] .output-prompt-actions { flex:0 0 auto; }
    [data-mobile-page="canvas"] .preview-text-btn { min-height:44px; }
    [data-mobile-page="canvas"] .node textarea { touch-action:pan-y; }
    :is(.picker-overlay,.modal-overlay,.rh-workflow-editor-overlay) { padding:10px !important; }
    :is(.picker-modal,.modal-panel,.rh-workflow-editor-modal) { max-width:100%; max-height:calc(var(--mobile-height,100dvh) - 20px); overflow:auto; }
}
@media (max-width:380px) {
    [data-mobile-page="canvas"] .toolbar-fixed .tool-btn { font-size:11px; padding:0 5px; gap:3px; }
    [data-mobile-page="api-settings"] .content-actions { gap:4px; }
}
@media (max-width:820px) {
    [data-mobile-page="api-settings"] .page-head { padding:0 4px 8px; }
    [data-mobile-page="api-settings"] .page-head .status:empty { display:none; }
    [data-mobile-page="api-settings"] .provider-list { flex-direction:row; max-height:none; height:auto; overflow-y:hidden; }
    [data-mobile-page="api-settings"] .provider-card { grid-template-columns:26px minmax(0,1fr); height:64px; padding:8px; }
    [data-mobile-page="api-settings"] .provider-card .provider-drag-handle { display:none; }
    [data-mobile-page="api-settings"] .provider-card .provider-protocol { display:none; }
    [data-mobile-page="api-settings"] .content-head { flex-direction:row !important; align-items:center !important; }
    [data-mobile-page="gpt-chat"] .composer { max-height:min(52dvh,320px); }
    [data-mobile-page="gpt-chat"] .model-picker-button { min-height:40px; }
}
@media (max-width:820px) {
    [data-mobile-page="api-settings"] .provider-list { min-height:0 !important; max-height:none !important; flex:0 0 auto !important; overflow-y:hidden !important; }
    [data-mobile-page="api-settings"] .provider-card-sortable { grid-template-columns:30px minmax(0,1fr) !important; cursor:pointer !important; }
    [data-mobile-page="api-settings"] .provider-side-meta { display:none; }
    [data-mobile-page="api-settings"] .content-head { flex-wrap:nowrap; gap:8px !important; }
    [data-mobile-page="api-settings"] .content-actions { width:auto !important; flex-wrap:nowrap !important; }
    [data-mobile-page="api-settings"] .sidebar { gap:8px; }
}
.mobile-smart-add { display:none; }
@media (max-width:820px) {
    [data-mobile-page="smart-canvas"] :is(.shell,.world,.image-node) { touch-action:none; }
    [data-mobile-page="smart-canvas"] :is(.composer,.prompt-input,textarea) { touch-action:pan-y; }
    [data-mobile-page="smart-canvas"] .smart-back { width:44px; height:44px; padding:0; justify-content:center; left:10px; top:10px; }
    [data-mobile-page="smart-canvas"] .smart-back span { display:none; }
    [data-mobile-page="smart-canvas"] :is(.asset-toggle,.smart-log-toggle,.smart-workflow-toggle) { width:70px; height:44px; padding:0 7px; font-size:12px; gap:4px; top:10px; }
    [data-mobile-page="smart-canvas"] :is(.asset-toggle,.smart-log-toggle,.smart-workflow-toggle) span { display:inline; }
    [data-mobile-page="smart-canvas"] .asset-toggle { right:10px; }
    [data-mobile-page="smart-canvas"] .smart-log-toggle { right:86px; }
    [data-mobile-page="smart-canvas"] .smart-workflow-toggle { right:162px; }
    [data-mobile-page="smart-canvas"] .smart-shortcut-toggle { display:none; }
    [data-mobile-page="smart-canvas"] .smart-title { top:64px; }
    [data-mobile-page="smart-canvas"] .mobile-smart-add { position:absolute; display:block; z-index:55; bottom:20px; left:12px; min-height:48px; padding:0 16px; border-radius:14px; background:var(--strong); color:var(--strong-text); border:1px solid var(--line); font-size:14px; box-shadow:0 5px 24px #0002; }
    [data-mobile-page="smart-canvas"] .create-menu { width:calc(100vw - 28px); max-height:calc(100dvh - 120px); overflow:auto; }
    [data-mobile-page="smart-canvas"] .node-actions button { min-width:36px; min-height:36px; opacity:1; }
}
@media (max-width:820px) {
    /* A visible drag handle outside the node avoids stealing text selection/scrolling. */
    [data-mobile-page="smart-canvas"] .image-node .node-head { display:flex; position:absolute; left:0; right:0; top:-44px; height:44px; border:1px solid var(--line); border-radius:12px 12px 0 0; background:var(--panel); touch-action:none; }
    [data-mobile-page="smart-canvas"] .image-node .node-title { display:block; }
    [data-mobile-page="smart-canvas"] .image-node .node-delete { opacity:1; pointer-events:auto; }
    [data-mobile-page="smart-canvas"] .floating-node-actions { display:none; }
    [data-mobile-page="smart-canvas"] .smart-node-floating-menu { top:-84px; }
}