/* v20 mobile layer. Load after page styles, media-uploads.css and studio-balance.css.
   Keep the existing DOM and controls; >=901px belongs to the desktop layer. */
@media (max-width: 900px) {
  body.studio-shell {
    --nd-mobile-head: calc(3.75rem + env(safe-area-inset-top, 0px));
    --nd-mobile-gutter: max(.75rem, env(safe-area-inset-left, 0px));
    padding-left: 0;
    font-size: 1rem;
  }

  /* Shared shell: one compact header, with the existing drawer as navigation. */
  body.studio-shell .top {
    box-sizing: border-box;
    height: var(--nd-mobile-head);
    min-height: var(--nd-mobile-head);
    padding: calc(.5rem + env(safe-area-inset-top, 0px)) max(.75rem, env(safe-area-inset-right, 0px)) .5rem var(--nd-mobile-gutter);
    gap: .5rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  body.studio-shell .top-context { flex: 1 1 auto; max-width: none; font-size: .875rem; min-width: 0; }
  body.studio-shell .top-context small { display: none; }
  body.studio-shell .top .userbar { min-width: 0; flex-shrink: 0; gap: .5rem; }
  body.studio-shell .top :is(.btn.small, .nd-balance-menu > summary) { min-height: 2.75rem; font-size: .8125rem; padding: .5rem .625rem; }
  body.studio-shell .top .avatar { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; }
  body.studio-shell :is(.menu-toggle, .menu-close, .nd-theme-toggle, .admin-shortcut) {
    width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; flex-shrink: 0;
  }
  body.studio-shell .studio-sidebar {
    top: var(--nd-viewport-top, 0px);
    bottom: auto;
    height: var(--nd-viewport-height, 100dvh);
    width: min(20rem, calc(100vw - 3rem));
    padding: max(.75rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: contain;
  }
  body.studio-shell .sidebar-head { gap: .5rem; margin-bottom: 1.25rem; }
  body.studio-shell .sidebar-caption { margin-bottom: .75rem; font-size: .625rem; }
  body.studio-shell .side-nav.nav { gap: .5rem; }
  body.studio-shell .side-nav.nav a { min-height: 3rem; padding: .75rem; font-size: .9375rem; }
  body.studio-shell .sidebar-foot { padding-top: 1.25rem; font-size: .75rem; }
  body.studio-shell .main { min-width: 0; width: 100%; padding: 1.25rem var(--nd-mobile-gutter) max(2rem, env(safe-area-inset-bottom, 0px)); }
  body.studio-shell .footer { gap: 1rem; flex-wrap: wrap; padding-inline: var(--nd-mobile-gutter); }
  body.studio-shell .nd-balance-panel {
    position: fixed;
    top: calc(var(--nd-viewport-top, 0px) + var(--nd-mobile-head) + .25rem);
    right: max(.75rem, env(safe-area-inset-right, 0px));
    width: min(21rem, calc(100vw - 1.5rem));
    max-height: calc(var(--nd-viewport-height, 100dvh) - var(--nd-mobile-head) - 1rem);
    overscroll-behavior: contain;
  }

  /* Targets are explicit so scrims, media stages and hidden bridge inputs retain their geometry. */
  body.studio-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]), select, textarea:not(.nd-mention-bridge), [contenteditable="true"]) {
    min-width: 0; max-width: 100%; font-size: 1rem;
  }
  body.studio-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]), select) { min-height: 2.75rem; }
  body.studio-shell :is(input, textarea, [contenteditable="true"]) { scroll-margin-block: 1rem; }

  /* Generator: result, horizontal recent jobs, then prompt, inside one vertical scroll. */
  body.studio-shell[data-page="create"] { height: var(--nd-viewport-height, 100dvh); display: flex; flex-direction: column; }
  body.studio-shell[data-page="create"] .main { display: flex; flex-direction: column; flex: 1; height: auto; min-height: 0; padding: 0; }
  body[data-page="create"] .gen-category-bar { height: 3rem; min-height: 3rem; flex-shrink: 0; padding: 0 var(--nd-mobile-gutter); gap: .25rem; }
  body[data-page="create"] .gen-category-bar [role="tab"] { min-height: 2.75rem; flex: 1 1 0; min-width: 0; padding: .5rem; font-size: .875rem; }
  body[data-page="create"] .gen-workbench { flex: 1; height: auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scroll-padding-block: .75rem; }
  body[data-page="create"] .gen-main {
    height: auto; min-height: 100%; overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: 'viewer' 'rail' 'composer';
    align-content: start; gap: .75rem;
    padding: .75rem var(--nd-mobile-gutter) max(.75rem, env(safe-area-inset-bottom, 0px));
  }
  body[data-page="create"] .gen-feed { overflow: visible; min-width: 0; padding: 0; container-type: normal; }
  body[data-page="create"] .gen-selected-head { flex-wrap: wrap; padding-bottom: .5rem; }
  body[data-page="create"] .gen-selected-head h2 { font-size: .875rem; }
  body[data-page="create"] .gen-selected-date { font-size: .75rem; white-space: normal; }
  body[data-page="create"] .gen-player-stage { width: 100%; min-height: 0; max-height: 24rem; aspect-ratio: 16 / 9; }
  body[data-page="create"] .gen-result-actions { gap: .5rem; }
  body[data-page="create"] .gen-result-actions .btn { flex: 1 1 7rem; min-height: 2.75rem; font-size: .8125rem; padding: .5rem .625rem; white-space: normal; }
  body[data-page="create"] .gen-empty { min-height: 10rem; padding: 1.5rem 1rem; }
  body[data-page="create"] .gen-empty p { font-size: .875rem; }
  body[data-page="create"] .gen-context summary { display: flex; align-items: center; min-height: 2.75rem; padding-block: .5rem; }
  body[data-page="create"] .gen-history-rail { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; grid-template-rows: auto auto; gap: .25rem .5rem; padding: .375rem; }
  body[data-page="create"] .gen-rail-head { grid-column: 1; grid-row: 1; flex-direction: row; justify-content: space-between; gap: .5rem; padding: 0 0 0 .375rem; min-width: 0; }
  body[data-page="create"] .gen-rail-head > span:first-child { font-size: .8125rem; }
  body[data-page="create"] .gen-rail-tools { flex-wrap: nowrap; gap: .5rem; margin-left: auto; }
  body[data-page="create"] .gen-rail-tools :is(button, summary) { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; }
  body[data-page="create"] .gen-rail-gallery { grid-column: 2; grid-row: 1; width: 2.75rem; height: 2.75rem; }
  body[data-page="create"] .gen-rail-search .gen-search { top: 3.5rem; right: .375rem; width: min(19rem, calc(100vw - 3rem)); }
  body[data-page="create"] .gen-sheets {
    grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: flex-start;
    width: 100%; min-width: 0; max-height: none; gap: .5rem; padding: .25rem;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: .25rem;
    scrollbar-width: thin; touch-action: pan-x pan-y pinch-zoom;
  }
  body[data-page="create"] .gen-frame { flex: 0 0 4rem; width: 4rem; scroll-snap-stop: normal; }
  body[data-page="create"] .gen-frame-media { width: 100%; aspect-ratio: 1; }
  body[data-page="create"] .gen-no-results { text-align: left; font-size: .8125rem; }
  body[data-page="create"] .gen-composer-wrap { max-height: none; overflow: visible; min-width: 0; padding: 0; }
  body[data-page="create"] .gen-composer { padding: .75rem; }
  body[data-page="create"] .nd-composer-grid { gap: .5rem; }
  body[data-page="create"] .nd-composer-tools { flex-wrap: wrap; gap: .5rem; }
  body[data-page="create"] .nd-composer-tool-grid { gap: .5rem; }
  body[data-page="create"] .nd-composer-tool { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; }
  body[data-page="create"] .nd-composer .gen-assistant { min-height: 2.75rem; font-size: .8125rem; padding: .5rem; }
  body[data-page="create"] .nd-mention-editor { min-height: 6rem; height: 6rem; max-height: 16rem; font-size: 1rem; line-height: 1.6; }
  body[data-page="create"] .nd-composer-expanded .nd-mention-editor { height: clamp(8rem, 30dvh, 18rem); max-height: 18rem; }
  body[data-page="create"] :is(.gen-prompt-meta, .gen-prompt-meta > span, .nd-composer-live, #availability) { font-size: .75rem; }
  body[data-page="create"] .gen-composer-price { font-size: 1rem; padding-block: .5rem; }
  body[data-page="create"] .gen-composer-bar { position: static; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; padding-top: .5rem; }
  body[data-page="create"] :is(.gen-attach, .gen-library-button, .gen-settings-toggle, .gen-composer-bar .nd-paste-button) { min-height: 2.75rem; height: auto; margin: 0; padding: .5rem; font-size: .8125rem; white-space: normal; }
  body[data-page="create"] .gen-attach { width: 2.75rem; height: 2.75rem; padding: 0; }
  body[data-page="create"] .gen-settings-toggle { grid-column: 1 / -1; justify-content: space-between; }
  body[data-page="create"] .gen-settings-toggle .gen-model-label { font-size: .875rem; }
  body[data-page="create"] .gen-settings-toggle .gen-settings-word { display: inline; font-size: .8125rem; }
  body[data-page="create"] .gen-composer-bar #generate-btn { grid-column: 1 / -1; min-height: 3rem; height: auto; width: 100%; margin: 0; font-size: 1rem; }
  body[data-page="create"] .gen-category-panel { min-height: 0; height: auto; flex: 1; padding: 1.25rem var(--nd-mobile-gutter); }

  /* Thumbnail handle and remove button have independent, unclipped touch areas. */
  body[data-page="create"] .nd-composer .gen-ref-strip.refs { gap: .75rem; padding: .25rem .125rem .75rem; }
  body[data-page="create"] .nd-composer .gen-ref-strip .ref { flex: 0 0 6rem; width: 6rem; height: 4.5rem; }
  body[data-page="create"] .nd-composer .ref .nd-ref-preview[data-ref-control] { width: 100%; height: 100%; min-height: 2.75rem; touch-action: pan-y pinch-zoom; }
  body[data-page="create"] .nd-composer .ref [data-remove] { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; top: 0; right: 0; border: .375rem solid transparent; font-size: 1rem; }
  body[data-page="create"] .nd-ref-heading { font-size: .8125rem; flex-wrap: wrap; gap: .25rem; }
  body[data-page="create"] .gen-settings {
    top: var(--nd-viewport-top, 0px); bottom: auto; height: var(--nd-viewport-height, 100dvh);
    width: min(24rem, calc(100vw - 1rem)); max-width: calc(100vw - 1rem);
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  body[data-page="create"] .gen-settings-head { position: sticky; top: 0; z-index: 2; flex-shrink: 0; padding: .75rem 1rem; background: var(--nd-panel); }
  body[data-page="create"] .gen-settings-head h2 { font-size: 1.125rem; }
  body[data-page="create"] .gen-settings-close { width: 2.75rem; height: 2.75rem; min-height: 2.75rem; }
  body[data-page="create"] .gen-settings-body { flex: 1 0 auto; overflow: visible; }
  body[data-page="create"] .gen-settings-foot { flex-shrink: 0; padding: 1rem; }
  body[data-page="create"] .gen-settings :is(select, .gen-ratios button) { font-size: 1rem; min-height: 2.75rem; }

  /* The whole media dialog scrolls, so tall controls never collapse its result rows. */
  body.studio-shell :is(.gen-asset-modal, .nai-pricing-modal, .modal) {
    top: var(--nd-viewport-top, 0px); bottom: auto; height: var(--nd-viewport-height, 100dvh);
    padding: max(.5rem, env(safe-area-inset-top, 0px)) max(.5rem, env(safe-area-inset-right, 0px)) max(.5rem, env(safe-area-inset-bottom, 0px)) max(.5rem, env(safe-area-inset-left, 0px));
  }
  body.studio-shell .gen-asset-dialog {
    width: 100%; height: 100%; max-height: 100%; min-height: 0; padding: .75rem;
    overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 4.5rem 7rem;
  }
  body.studio-shell .gen-asset-head { position: sticky; top: -.75rem; z-index: 5; margin: -.75rem -.75rem 0; padding: .75rem; background: var(--nd-panel); }
  body.studio-shell .gen-asset-head h2 { font-size: 1.125rem; margin-top: .25rem; }
  body.studio-shell .gen-asset-close { width: 2.75rem; height: 2.75rem; }
  body.studio-shell .gen-asset-controls { margin: .75rem 0; }
  body.studio-shell .gen-asset-filters { gap: .5rem; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding: .125rem 0; }
  body.studio-shell .gen-asset-filters .chip { flex-shrink: 0; font-size: .8125rem; padding: .5rem .75rem; }
  body.studio-shell .gen-asset-search-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  body.studio-shell .gen-asset-search-row #gen-asset-search { grid-column: 1 / -1; width: 100%; }
  body.studio-shell .gen-asset-search-row :is(select, .btn) { width: 100%; min-width: 0; min-height: 2.75rem; padding: .5rem; font-size: .875rem; white-space: normal; }
  body.studio-shell .gen-asset-search-row :is(input, select) { font-size: 1rem; }
  body.studio-shell .gen-asset-search-row .gen-asset-upload { font-size: .875rem !important; }
  body.studio-shell :is(.gen-asset-hint, #gen-asset-status, .nd-upload-hint) { font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
  body.studio-shell .gen-asset-grid { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; min-height: 6rem; overflow: visible; padding: .25rem 0 1rem; }
  body.studio-shell .gen-asset-card { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; }
  body.studio-shell .gen-asset-preview { width: 5rem; height: 5rem; aspect-ratio: 1; }
  body.studio-shell .gen-asset-card-body { min-width: 0; padding: .5rem .625rem; }
  body.studio-shell .gen-asset-card-body > strong { font-size: .875rem; }
  body.studio-shell .gen-asset-card-body > small { font-size: .75rem; margin-block: .25rem; }
  body.studio-shell .gen-asset-card-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
  body.studio-shell .gen-asset-card-actions :is(.btn, a, .gen-asset-choice) { min-height: 2.75rem; font-size: .8125rem; }
  body.studio-shell .gen-asset-card-actions > a { display: inline-flex; align-items: center; }
  body.studio-shell .gen-asset-choice { flex: 1 0 auto; gap: .5rem; }
  body.studio-shell .gen-asset-choice input { width: 1.25rem; height: 1.25rem; }
  body.studio-shell .gen-asset-foot { position: sticky; bottom: -.75rem; z-index: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 -.75rem -.75rem; padding: .75rem; background: var(--nd-panel); }
  body.studio-shell .gen-asset-foot > span { grid-column: 1 / -1; font-size: .8125rem; }
  body.studio-shell .gen-asset-foot .btn { min-height: 2.75rem; font-size: .875rem; padding: .5rem; white-space: normal; }
  body.studio-shell .gen-asset-foot #gen-asset-apply { grid-column: 2; margin: 0; }
  body.studio-shell .nd-upload-list { max-width: 100%; padding-block: .5rem; gap: .5rem; }
  body.studio-shell .nd-upload-item { flex-basis: min(19rem, 100%); gap: .5rem; padding: .625rem; }
  body.studio-shell .nd-upload-item strong { font-size: .8125rem; }
  body.studio-shell .nd-upload-item span { font-size: .75rem; }
  body.studio-shell .nd-upload-item button { min-width: 2.75rem; min-height: 2.75rem; padding: .5rem; font-size: .8125rem; }

  /* Native dialogs and pricing keep their own scroll and an always reachable close. */
  body.studio-shell :is(.nd-reference-dialog, .chat-history, .chat-settings) {
    top: var(--nd-viewport-top, 0px); bottom: auto;
    width: min(36rem, calc(100vw - 1rem));
    max-height: calc(var(--nd-viewport-height, 100dvh) - 1rem);
    margin: .5rem auto; overscroll-behavior: contain;
  }
  body.studio-shell .nd-reference-dialog { padding: .75rem; }
  body.studio-shell .nd-reference-dialog-head { position: sticky; top: -.75rem; z-index: 2; padding-block: .5rem; background: var(--nd-panel); }
  body.studio-shell .nd-reference-image { height: min(60dvh, 30rem); max-height: calc(var(--nd-viewport-height, 100dvh) - 9rem); }
  body.studio-shell .nd-reference-dialog-foot { flex-wrap: wrap; }
  body.studio-shell .nai-pricing-dialog { max-height: 100%; padding: 1rem; overscroll-behavior: contain; }
  body.studio-shell .nai-pricing-head { top: -1rem; margin: -1rem -1rem 1rem; padding: 1rem; }
  body.studio-shell .nai-pricing-close { width: 2.75rem; height: 2.75rem; }
  body.studio-shell .nai-pricing-intro { align-items: flex-start; flex-wrap: wrap; gap: .75rem; }
  body.studio-shell .nai-pricing-intro p { font-size: .875rem; }
  body.studio-shell .nai-price-cards { grid-template-columns: minmax(0, 1fr); }
  body.studio-shell .nai-price-card :is(p, li, small) { font-size: .875rem; }

  /* Assistant: messages own the flexible space; attachments never grow an unbounded row. */
  body.studio-shell.assistant-classic { height: var(--nd-viewport-height, 100dvh); display: flex; flex-direction: column; }
  body.studio-shell.assistant-classic .assistant-workspace { flex: 1; height: auto; min-height: 0; width: 100%; }
  body.studio-shell.assistant-classic :is(.desk, .chat-panes, .chat-pane) { min-width: 0; min-height: 0; }
  body.studio-shell.assistant-classic .pane-top { padding: .375rem .75rem; gap: .5rem; min-height: 3.5rem; }
  body.studio-shell.assistant-classic .pane-top .icon-button { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; }
  body.studio-shell.assistant-classic .pane-title { max-width: none; font-size: .9375rem; }
  body.studio-shell.assistant-classic .pane-transcript { min-height: 0; padding: 1rem; scroll-padding-block: 1rem; }
  body.studio-shell.assistant-classic .message { margin-bottom: 1.25rem; }
  body.studio-shell.assistant-classic .message.user { max-width: 92%; }
  body.studio-shell.assistant-classic .message-body { min-width: 0; font-size: 1rem; }
  body.studio-shell.assistant-classic .message-body :is(pre, table) { display: block; max-width: 100%; overflow-x: auto; }
  body.studio-shell.assistant-classic .message-body img { max-width: 100%; height: auto; }
  body.studio-shell.assistant-classic .pane-composer { width: calc(100% - 1.5rem); padding: .625rem; margin-top: .375rem; max-height: min(50dvh, 23rem); overflow-y: auto; overscroll-behavior: contain; }
  body.studio-shell.assistant-classic .pane-composer textarea { font-size: 1rem; min-height: 3rem; max-height: min(25dvh, 9rem); }
  body.studio-shell.assistant-classic .composer-actions { gap: .5rem; }
  body.studio-shell.assistant-classic .composer-hint { display: none; }
  body.studio-shell.assistant-classic .attachments { flex-wrap: nowrap; overflow-x: auto; gap: .75rem; padding: .25rem; }
  body.studio-shell.assistant-classic .attachment { flex: 0 0 5rem; }
  body.studio-shell.assistant-classic .attachment img { width: 5rem; height: 4.5rem; }
  body.studio-shell.assistant-classic .attachment button { width: 2.75rem; height: 2.75rem; top: 0; right: 0; font-size: 1rem; }
  body.studio-shell.assistant-classic .chat-footnote { font-size: .75rem; margin-bottom: max(.5rem, env(safe-area-inset-bottom, 0px)); }
  body.studio-shell.assistant-classic .chat-history { height: calc(var(--nd-viewport-height, 100dvh) - 1rem); }
  body.studio-shell.assistant-classic .chat-library { padding: .75rem; gap: .75rem; }
  body.studio-shell.assistant-classic .chat-library > :not(.conversation-list) { flex-shrink: 0; }
  body.studio-shell.assistant-classic .chat-library #chatSearch { font-size: 1rem; }
  body.studio-shell.assistant-classic .conversation-item { min-height: 3rem; }
  body.studio-shell.assistant-classic .chat-settings { overflow-y: auto; }
  body.studio-shell.assistant-classic .chat-settings-head { position: sticky; top: 0; z-index: 2; background: var(--nd-panel); }
  body.studio-shell.assistant-classic .chat-settings-tabs { overflow-x: auto; }
  body.studio-shell.assistant-classic .settings-panel .skill { min-height: 2.75rem; font-size: .875rem; }
  body.studio-shell.assistant-classic .chat-advanced summary { min-height: 2.75rem; padding-block: .625rem; }
  body.studio-shell.assistant-classic .queue-overview { max-height: 25dvh; overflow-y: auto; }

  /* The photo editor uses the same bounded modal rather than the layout viewport. */
  body.studio-shell .upscale-workspace { grid-template-columns: minmax(0, 1fr); }
  body.studio-shell :is(.upscale-source, .upscale-settings, .nd-media-library, .nd-media-tools, .nd-media-filters) { min-width: 0; }
  body.studio-shell :is(.upscale-source-head, .nd-media-tools, .nd-media-filters) { flex-wrap: wrap; }
  body.studio-shell .nd-media-item .actions { flex-wrap: wrap; gap: .5rem; }
  body.studio-shell .nd-media-item .actions :is(.btn, .nd-media-download) { min-height: 2.75rem; }

  /* Profile and admin: constrain content at the source; tables scroll in their panels. */
  body.studio-shell :is(.profile-grid, .profile-grid > section, .admin-layout, .admin-detail, #admin-body, .nda, .ndu, fieldset) { min-width: 0; max-width: 100%; }
  body.studio-shell .profile-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  body.studio-shell .profile-grid > section { padding: 1rem; }
  body.studio-shell .profile-top > div { min-width: 0; overflow-wrap: anywhere; }
  body.studio-shell .profile-grid :is(.muted, .note, summary, .field > span) { font-size: .875rem; }
  body.studio-shell .profile-grid summary { min-height: 2.75rem; padding-block: .625rem; }
  body.studio-shell .profile-grid .btn { white-space: normal; }
  body.studio-shell .ledger { table-layout: fixed; font-size: .875rem; }
  body.studio-shell .ledger td { overflow-wrap: anywhere; }
  body.studio-shell .ledger td:last-child { width: 38%; white-space: normal; }
  body.studio-shell .ledger small { font-size: .75rem; }
  body.studio-shell[data-page="admin"] .admin-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  body.studio-shell[data-page="admin"] .admin-layout > aside { max-height: 18rem; overflow-y: auto; }
  body.studio-shell[data-page="admin"] .admin-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: .5rem; padding: .5rem; }
  body.studio-shell[data-page="admin"] .admin-tabs .chip { flex: 0 0 auto; font-size: .875rem; white-space: nowrap; }
  body.studio-shell[data-page="admin"] :is(.admin-detail fieldset, .admin-settings > details, .admin-settings > .notice) { padding: 1rem; }
  body.studio-shell[data-page="admin"] :is(.row, .admin-extra, .ndu-heading, .ndu-pagination, .nda-toolbar, .nda-pagination) { flex-wrap: wrap; }
  body.studio-shell[data-page="admin"] .row > .field { flex: 1 1 12rem; }
  body.studio-shell[data-page="admin"] :is(.check, .ndu-check) { min-height: 2.75rem; }
  body.studio-shell[data-page="admin"] :is(.nda-table-scroll, .nda-panel, .ndu-section) { max-width: 100%; min-width: 0; }
  body.studio-shell[data-page="admin"] .nda-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  body.studio-shell[data-page="admin"] .ndu-manage-grid,
  body.studio-shell[data-page="admin"] .ndu-access-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  body.studio-shell[data-page="admin"] :is(.ndu-player, .ndu-player video, .ndu-player img) { min-height: 0; max-width: 100%; }
  body.studio-shell[data-page="admin"] .ndu-result-actions .ndu-button { flex: 1 1 9rem; }
  body.studio-shell[data-page="admin"] .ndu form > .ndu-button { justify-self: stretch; }

  html[data-keyboard-open="true"] body[data-page="create"] .gen-player-stage { max-height: 12rem; }
  html[data-keyboard-open="true"] body.assistant-classic .chat-footnote { display: none; }
  html[data-keyboard-open="true"] body.assistant-classic .pane-composer { margin-bottom: max(.375rem, env(safe-area-inset-bottom, 0px)); max-height: 55%; }
  html[data-keyboard-open="true"] body.assistant-classic .pane-composer textarea { min-height: 2.75rem; max-height: min(22dvh, 7rem); }
}

/* Wider touch screens keep the same flow, with roomier rows rather than a desktop rail. */
@media (min-width: 600px) and (max-width: 900px) {
  body.studio-shell { --nd-mobile-gutter: max(1.25rem, env(safe-area-inset-left, 0px)); }
  body[data-page="create"] .gen-frame { flex-basis: 4.5rem; width: 4.5rem; }
  body[data-page="create"] .gen-composer-bar { grid-template-columns: 2.75rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
  body[data-page="create"] .gen-settings-toggle { grid-column: auto; }
  body.studio-shell .gen-asset-dialog { max-width: 48rem; }
  body.studio-shell .gen-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.studio-shell .gen-asset-search-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.studio-shell .gen-asset-search-row #gen-asset-search { grid-column: 1 / -1; }
  body.studio-shell .nai-price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Short landscape/keyboard viewports keep actions reachable through normal panel scroll. */
@media (max-width: 900px) and (max-height: 500px) {
  body[data-page="create"] .gen-player-stage { max-height: 15rem; }
  body[data-page="create"] .gen-settings-body { flex-grow: 0; }
  body.studio-shell .gen-asset-head .eyebrow { display: none; }
  body.studio-shell .gen-asset-foot > span:empty { display: none; }
  body.studio-shell.assistant-classic .pane-top { min-height: 2.75rem; padding-block: 0; }
  body.studio-shell.assistant-classic .pane-composer { padding-block: .25rem; }
  body.studio-shell.assistant-classic .pane-composer textarea { min-height: 2.75rem; }
  body.studio-shell.assistant-classic .chat-footnote { display: none; }
}