/* Final responsive shell layer. The 900px breakpoint matches studio-shell.js.
   Legacy page skins load first; this file owns mobile geometry, not appearance. */
@media (max-width: 900px) {
  html body.studio-shell {
    --nd-sidebar-width: 0px;
    --nd-mobile-gutter: max(.75rem, env(safe-area-inset-left, 0px));
    width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0 !important;
  }

  html body.studio-shell > .top {
    flex: 0 0 auto;
    min-width: 0;
    height: auto;
    min-height: calc(4rem + env(safe-area-inset-top, 0px));
    padding: calc(.5rem + env(safe-area-inset-top, 0px)) max(.5rem, env(safe-area-inset-right, 0px)) .5rem max(.5rem, env(safe-area-inset-left, 0px));
    gap: .375rem;
  }
  html body.studio-shell > .main {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
  }
  html:not(.nd-context-child) body.studio-shell > .nd-context-host {
    top: var(--nd-shell-header-height, 4rem) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100%;
    min-width: 0;
  }
  html body.studio-shell :is(.menu-toggle, .menu-close) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    flex: 0 0 2.75rem;
    touch-action: manipulation;
  }

  html body.studio-shell #main-menu {
    top: var(--nd-viewport-top, 0px);
    bottom: auto;
    width: min(20rem, calc(100vw - 3rem)) !important;
    height: var(--nd-viewport-height, 100dvh);
    max-height: var(--nd-viewport-height, 100dvh);
    padding: max(.75rem, env(safe-area-inset-top, 0px)) .75rem max(.75rem, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }
  html body.studio-shell #main-menu .sidebar-head {
    flex: 0 0 auto;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
  }
  html body.studio-shell #main-menu .side-nav.nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    gap: .25rem;
    padding-block: .25rem;
  }
  html body.studio-shell #main-menu .side-nav.nav a {
    justify-content: flex-start;
    flex: 0 0 auto;
    min-height: 3rem;
    padding: .625rem .75rem;
    font-size: .9375rem;
  }
  html body.studio-shell #main-menu .nav-label {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    overflow: visible;
    white-space: normal;
  }
  html body.studio-shell #main-menu .sidebar-foot {
    flex: 0 0 auto;
    margin-top: .75rem;
    padding: .5rem .75rem 0;
  }
  html body.studio-shell #menu-scrim { inset: 0; }

  /* The toolbar stays above the generator's one vertical scrolling surface. */
  html body.studio-shell[data-page="create"] .nd-generation-toolbar {
    flex: 0 0 auto;
    min-height: 3.5rem;
    height: auto;
    padding-inline: .5rem;
    gap: .25rem;
  }
  html[data-theme] body.studio-shell[data-page="create"] .nd-generation-toolbar .gen-category-bar {
    padding-inline: 0;
    gap: .125rem;
  }
  html[data-theme] body.studio-shell[data-page="create"] .gen-category-bar [role="tab"] {
    min-height: 2.75rem;
    padding-inline: .375rem;
    font-size: .8125rem;
  }
  html body.studio-shell[data-page="create"] .gen-workbench {
    min-width: 0;
    min-height: 0;
    overscroll-behavior-y: contain;
    scroll-padding-block: .75rem;
  }
  html[data-theme] body.studio-shell[data-page="create"] .gen-composer-wrap .nd-mention-editor {
    min-height: 7rem;
    height: clamp(7rem, 16dvh, 10rem);
    max-height: 16rem;
    font-size: 1rem;
    line-height: 1.5;
  }
  html body.studio-shell[data-page="create"] .gen-composer-wrap {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html[data-theme] body.studio-shell[data-page="create"] .gen-settings {
    top: var(--nd-viewport-top, 0px);
    bottom: auto;
    height: var(--nd-viewport-height, 100dvh);
    max-height: var(--nd-viewport-height, 100dvh);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html body.studio-shell .nd-composer-dialog {
    padding-bottom: max(.5rem, env(safe-area-inset-bottom, 0px));
  }
}