/* v20 desktop layer. Load after all existing page styles and media-uploads.css.
   The generator keeps the viewer above the composer and jobs on the right. */
@media (min-width: 901px) {
  body.studio-shell {
    --nd-desktop-sidebar: clamp(14.375rem, 9vw, 18rem);
    --nd-desktop-top: 4.75rem;
    --nd-desktop-gutter: clamp(1.5rem, 2vw, 3rem);
    --nd-desktop-gap: clamp(1rem, 1.2vw, 2rem);
    --nd-chat-width: clamp(48rem, 55vw, 66rem);
    padding-left: var(--nd-desktop-sidebar);
  }

  body.studio-shell .studio-sidebar {
    width: var(--nd-desktop-sidebar);
    padding-inline: clamp(1rem, 1.2vw, 1.75rem);
  }

  body.studio-shell .side-nav.nav a { min-height: 3rem; font-size: .875rem; }
  body.studio-shell .top {
    height: var(--nd-desktop-top);
    min-height: var(--nd-desktop-top);
    padding: .75rem var(--nd-desktop-gutter);
  }

  body.studio-shell .main,
  body.studio-shell .admin-page {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding-inline: var(--nd-desktop-gutter);
  }

  body.studio-shell .footer { padding-inline: var(--nd-desktop-gutter); }
  body.studio-shell :is(.profile-grid, .admin-layout, .plans, .upscale-workspace) {
    gap: var(--nd-desktop-gap);
    min-width: 0;
  }
  body.studio-shell :is(.profile-grid, .admin-layout, .plans, .upscale-workspace) > * { min-width: 0; }
  body.studio-shell :is(.page-heading, .section-title, .plan-note) p { max-width: 75ch; }

  /* Content grids grow by adding useful cards, not by stretching thumbnails. */
  body.studio-shell :is(.nd-media-grid, .gallery) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(17rem, 20vw, 28rem)), 1fr));
    gap: var(--nd-desktop-gap);
  }
  body.studio-shell :is(.nd-media-card, .gallery > article) { min-width: 0; }

  body.studio-shell .plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  body.studio-shell .plan { padding: clamp(1.5rem, 2vw, 2.5rem); }
  body.studio-shell .plan > p { max-width: 55ch; }
  body.studio-shell .profile-grid > section { padding: clamp(1.5rem, 2vw, 2.5rem); }
  body.studio-shell .profile-grid :is(.note, .muted) { overflow-wrap: anywhere; }

  /* Viewport workspaces use the same real header height as the shell. */
  body.studio-shell[data-page="create"] .main {
    height: calc(100dvh - var(--nd-desktop-top));
    padding: 0;
  }
  body[data-page="create"] .gen-main {
    --nd-workspace-pad: clamp(.875rem, 1.2vw, 2rem);
    grid-template-columns: minmax(0, 1fr) clamp(7rem, 7.5vw, 15rem);
    grid-template-rows: minmax(9rem, 1fr) auto;
    grid-template-areas: "viewer rail" "composer rail";
    gap: var(--nd-desktop-gap);
    padding: var(--nd-workspace-pad);
  }
  body[data-page="create"] :is(.gen-feed, .gen-composer-wrap, .gen-history-rail) { min-width: 0; }
  body[data-page="create"] .gen-selected { width: 100%; max-width: none; }
  body[data-page="create"] .gen-history-rail { padding: .5rem; gap: .5rem; }
  body[data-page="create"] .gen-rail-tools :is(button, summary) { width: 2.75rem; height: 2.75rem; }
  body[data-page="create"] .gen-rail-head > span:first-child { font-size: .875rem; }
  body[data-page="create"] .gen-sheets { gap: .75rem; }
  body[data-page="create"] .gen-composer-wrap { max-height: 48dvh; }
  body[data-page="create"] .gen-composer { padding: clamp(.875rem, 1vw, 1.25rem); }
  body[data-page="create"] .nd-mention-editor {
    min-height: 7rem;
    height: clamp(7rem, 12dvh, 11rem);
    font-size: 1rem;
    line-height: 1.6;
  }
  body[data-page="create"] .nd-composer-expanded .nd-mention-editor { height: 24dvh; }
  body[data-page="create"] :is(.gen-selected-head h2, .gen-result-actions .btn) { font-size: .875rem; }
  body[data-page="create"] .gen-context-prompt { max-width: 100ch; }
  body[data-page="create"] .gen-result-actions .btn { min-height: 2.75rem; padding-inline: 1rem; }
  body[data-page="create"] .gen-composer-bar {
    grid-template-columns: 2.75rem auto minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
  }
  body[data-page="create"] :is(.gen-attach, .gen-library-button, .gen-settings-toggle, .gen-composer-bar .nd-paste-button) {
    height: 2.75rem;
    min-height: 2.75rem;
    font-size: .875rem;
  }
  body[data-page="create"] .gen-attach { width: 2.75rem; }
  body[data-page="create"] .gen-library-button { justify-self: start; }
  body[data-page="create"] .gen-settings-toggle { grid-column: 1 / 3; justify-self: start; max-width: 100%; }
  body[data-page="create"] .gen-settings-toggle .gen-model-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
  }
  body[data-page="create"] .gen-composer-bar #generate-btn {
    grid-column: 3;
    height: 2.75rem;
    min-height: 2.75rem;
    font-size: .9375rem;
  }
  body[data-page="create"] .gen-settings { width: clamp(22rem, 24vw, 30rem); }

  /* Upload rows retain their local scroll and existing controls. */
  body.studio-shell .nd-upload-list { min-width: 0; max-width: 100%; }
  body.studio-shell .nd-upload-item { flex-basis: clamp(16.25rem, 19vw, 23rem); }
  body.studio-shell .gen-asset-dialog {
    width: min(88vw, 112rem);
    height: min(84dvh, 70rem);
    min-width: 0;
    padding: clamp(1.25rem, 1.5vw, 2rem);
  }
  body.studio-shell .gen-asset-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--nd-desktop-gap);
  }

  /* Give the assistant room for tools and attachments, with bounded prose. */
  body.assistant-classic .assistant-workspace {
    height: calc(100dvh - var(--nd-desktop-top));
    min-height: 0;
  }
  body.assistant-classic .pane-transcript {
    padding: 1.5rem max(1.5rem, calc((100% - var(--nd-chat-width)) / 2));
  }
  body.assistant-classic .message { max-width: var(--nd-chat-width); }
  body.assistant-classic .message-body { max-width: 80ch; overflow-wrap: anywhere; }
  body.assistant-classic .message.user { max-width: min(86%, 75ch); }
  body.assistant-classic :is(.pane-composer, .pane-status) {
    width: calc(100% - 3rem);
    max-width: var(--nd-chat-width);
  }
  body.assistant-classic .pane-composer { padding: 1rem 1.25rem; }
  body.assistant-classic .pane-composer textarea { min-height: 4.5rem; }
  body.assistant-classic .pane-top { padding-inline: var(--nd-desktop-gutter); }

  /* Editing uses the viewport; form controls remain a comfortable width. */
  body.studio-shell .photo-overlay { padding: clamp(1rem, 2vw, 3rem); }

  body.studio-shell .nai-pricing-dialog { width: min(100%, 94rem); }
  body.studio-shell .nai-price-cards { gap: var(--nd-desktop-gap); }
}

@media (min-width: 1181px) {
  body.studio-shell .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-page="create"] .gen-composer-bar { grid-template-columns: 2.75rem auto auto minmax(0, 1fr) minmax(12rem, 20rem); }
  body[data-page="create"] .gen-settings-toggle,
  body[data-page="create"] .gen-composer-bar #generate-btn { grid-column: auto; }
  body.studio-shell .profile-grid { grid-template-columns: clamp(22rem, 32vw, 42rem) minmax(0, 1fr); }
  body[data-page="admin"] .admin-layout { grid-template-columns: clamp(16rem, 18vw, 24rem) minmax(0, 1fr); }
  body[data-page="admin"] .nda-main-grid { grid-template-columns: minmax(0, 1.8fr) minmax(20rem, 1fr); gap: var(--nd-desktop-gap); }
  body[data-page="admin"] .nda-cards { gap: var(--nd-desktop-gap); }
  body[data-page="admin"] .ndu-generation-layout { grid-template-columns: clamp(15rem, 20vw, 27rem) minmax(0, 1fr); }
  body[data-page="admin"] .ndu-job-list { max-height: min(70dvh, 60rem); }
  body[data-page="admin"] .ndu-player { max-height: 62dvh; }
  body[data-page="admin"] .ndu-player :is(video, img) { max-height: 62dvh; }
  body[data-page="admin"] .ndu-prompt { max-width: 100ch; }
  body.studio-shell .upscale-workspace { grid-template-columns: minmax(0, 1fr) clamp(20rem, 25vw, 30rem); }
  body.assistant-classic .assistant-workspace { grid-template-columns: clamp(14rem, 12vw, 22rem) minmax(0, 1fr); }
  body.assistant-classic .chat-library { padding: 1.25rem 1rem; }
}

@media (min-width: 1536px) {
  body[data-page="create"] .gen-frame-meta {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: .5rem .125rem .25rem;
    clip-path: none;
    overflow: visible;
    font-size: .75rem;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
  }
  body[data-page="create"] .gen-frame-order { top: .5rem; bottom: auto; left: .5rem; font-size: .75rem; }
  body[data-page="create"] .gen-settings-toggle .gen-config-summary { display: inline; font-size: .8125rem; }
  body[data-page="create"] .gen-ref-strip .ref { flex-basis: 6rem; width: 6rem; height: 4.5rem; }
  body.studio-shell .trends { gap: var(--nd-desktop-gap); }
  body.studio-shell .trend { height: clamp(20rem, 24vw, 38rem); }
}