@media (min-width: 821px) {
  .create-page .input-panel {
    width: min(1160px, calc(100% - 32px));
    min-height: 314px;
    padding-block: 0;
  }

  .create-page .input-panel-content,
  .create-page .image-composer-panel,
  .create-page .video-composer-panel {
    min-height: 313px;
  }

  .create-page .input-panel-content {
    padding-top: 3px;
  }

  .create-page .tabs {
    min-height: 39px;
    margin-top: 0;
  }

  .create-page .tab-item {
    min-height: 31px;
    padding-block: 4px;
  }

  .create-page .image-upload-area,
  .create-page .video-upload-area {
    padding-block: 0;
  }

  .create-page .image-upload-area .upload-card:not(.has-images) {
    width: 64px;
    min-width: 64px;
    height: 64px;
    min-height: 64px;
    margin-top: 4px;
    padding: 0;
  }

  .create-page .image-upload-area .upload-card:not(.has-images) .upload-controls {
    width: 64px;
    height: 64px;
  }

  .create-page .prompt-area,
  .create-page .video-prompt-area {
    padding-top: 8px;
  }

  .create-page .prompt-textarea,
  .create-page .media-mention-editor {
    height: 88px;
    min-height: 88px;
    padding-top: 10px;
    padding-bottom: 40px;
  }

  .create-page .settings-row {
    gap: 7px;
    margin-top: 7px;
    padding-block: 3px;
  }

  .create-page .setting-select-inline,
  .create-page .model-selector-trigger,
  .create-page .create-select-trigger {
    height: 34px;
    min-height: 34px;
  }

  .create-page .btn-send {
    bottom: 7px;
  }

  .create-page .point-cost-preview {
    bottom: 10px;
  }
}

@media (min-width: 821px) {
  .create-page {
    --input-panel-bottom: 59px;
  }

  .create-page .image-upload-area {
    padding-left: var(--reference-content-left-inset);
  }

  .create-page .image-upload-area .upload-card {
    padding-left: 0;
  }

  .create-page .input-panel,
  .create-page .input-panel-content,
  .create-page .image-composer-panel,
  .create-page .video-composer-panel {
    min-height: 285px;
  }

  .create-page .input-panel {
    min-height: 286px;
  }
}

/* Phones: the composer is a compact bottom sheet sized by its content.
   The specification row stays fully visible as a dense 2×2 grid of
   compact triggers, so the sheet must be allowed to grow past the old
   one-third cap — at 36dvh the resolution/count row was pushed below the
   screen edge and unreachable. The cap now only binds when references
   plus a long prompt make the form taller than 62% of the dynamic
   viewport; the content box then scrolls inside the sheet. Scoped to the
   create page only — the home page reuses this stylesheet but owns its
   own composer placement. */
@media (max-width: 768px) {
  body.create-page:not(.home-page) {
    --input-panel-height: 320px;
  }

  body.create-page:not(.home-page) .input-panel {
    min-height: 0;
    max-height: 62vh;
    max-height: 62dvh;
  }

  body.create-page:not(.home-page) .input-panel-content,
  body.create-page:not(.home-page) .image-composer-panel,
  body.create-page:not(.home-page) .video-composer-panel {
    min-height: 0;
  }

  body.create-page:not(.home-page) .input-panel-content {
    margin-left: 0;
    padding-top: 40px;
    padding-bottom: 4px;
    max-height: 62vh;
    max-height: 62dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Mode switcher row. z-index must beat .input-panel-content (z 5): on
     phones the switcher docks inside the panel top, where the content box
     (with its top padding) covers it and would otherwise swallow taps. */
  body.create-page:not(.home-page) .media-mode-switcher {
    top: 5px;
    left: 10px;
    right: 10px;
    bottom: auto;
    height: 30px;
    padding: 3px;
    z-index: 10;
  }

  body.create-page:not(.home-page) .media-mode-btn {
    min-height: 24px;
    padding: 0 8px;
    font-size: 12px;
  }

  body.create-page:not(.home-page) .media-mode-btn > .ui-icon {
    width: 12px;
    height: 12px;
  }

  /* Tool tabs row */
  body.create-page:not(.home-page) .tabs {
    margin: 0 10px;
    padding: 5px 10px 0;
    gap: 6px;
    overflow-x: auto;
  }

  body.create-page:not(.home-page) .tab-item {
    min-height: 24px;
    padding: 3px 10px;
    font-size: 12px;
  }

  /* Keep the two tool-tab rows the same height (the video row's 31px is the
     reference, the compact size from the video composer). The image row
     hosts the module-picker pill, which is naturally 11px taller; without
     this the sheet changes size every time 图片/视频 is toggled. */
  body.create-page:not(.home-page) .tabs {
    min-height: 31px;
  }

  body.create-page:not(.home-page) .image-composer-panel .tabs:has(.module-picker) {
    padding: 1px 10px 0 !important;
  }

  body.create-page:not(.home-page) .module-picker-trigger {
    min-height: 26px;
  }

  /* Reference upload strip */
  body.create-page:not(.home-page) .image-upload-area {
    --reference-thumbnail-size: 38px;
    padding: 0 12px;
  }

  body.create-page:not(.home-page) .video-upload-area {
    padding: 0 12px;
  }

  body.create-page:not(.home-page) .upload-card,
  body.create-page:not(.home-page) .video-upload-card {
    height: 38px;
    min-height: 38px;
    margin-top: 2px;
    padding: 6px;
  }

  body.create-page:not(.home-page) .upload-card.has-images,
  body.create-page:not(.home-page) .video-upload-card.has-images {
    height: auto;
    min-height: 48px;
    padding: 6px 96px 6px 10px;
  }

  body.create-page:not(.home-page) .image-thumb-wrapper,
  body.create-page:not(.home-page) .upload-card.has-images .image-thumb-wrapper,
  body.create-page:not(.home-page) .video-upload-card .image-thumb-wrapper,
  body.create-page:not(.home-page) .image-add-tile,
  body.create-page:not(.home-page) .upload-card.has-images .image-add-tile {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  body.create-page:not(.home-page) .upload-card.has-images .image-thumb-wrapper {
    margin-right: -19px;
  }

  /* Remove button: the coarse-pointer 44px target from studio.css is sized
     for 44px thumbnails; on the compact strip it would swallow the whole
     tile. Keep a corner-anchored button that fits the 38px tile. */
  body.create-page:not(.home-page) .remove-btn {
    width: 24px;
    height: 24px;
    top: -8px;
    right: -8px;
    font-size: 13px;
    opacity: 1;
    transform: none;
  }

  /* Prompt area */
  body.create-page:not(.home-page) .prompt-area,
  body.create-page:not(.home-page) .video-prompt-area {
    padding-top: 8px;
  }

  body.create-page:not(.home-page) .prompt-textarea,
  body.create-page:not(.home-page) .media-mention-editor {
    height: 52px;
    min-height: 52px;
    padding: 8px 52px 8px 12px;
    font-size: 14px;
  }

  body.create-page:not(.home-page) .prompt-area > .btn-send {
    top: 10px;
    right: 12px;
  }

  body.create-page:not(.home-page) .btn-send {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  body.create-page:not(.home-page) .point-cost-preview {
    min-height: 20px;
    margin-top: 5px;
    padding: 2px 8px;
    gap: 4px;
    font-size: 10px;
  }

  body.create-page:not(.home-page) .point-cost-preview strong {
    font-size: 11px;
  }

  body.create-page:not(.home-page) .point-cost-icon {
    font-size: 11px;
  }

  /* Specification row: always visible as a dense 2×2 grid. studio.css
     owns the 50%-wide flex basis; this block only trims heights, fonts
     and spacing so the row costs two short rows instead of two tall ones. */
  body.create-page:not(.home-page) .settings-row {
    margin-top: 4px;
    padding: 0;
    gap: 6px;
  }

  body.create-page:not(.home-page) .model-selector-trigger,
  body.create-page:not(.home-page) .create-select-trigger {
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  /* The wash placeholders are plain .setting-select-inline spans (not
     CreateSelectMenu shells), so the compact trigger sizes above never reach
     them. Clamp them to the trigger height or the wash module's grid rows
     stay at the desktop 44px and the sheet grows by 30px. */
  body.create-page:not(.home-page) .settings-row .wash-setting-spacer {
    height: 30px;
    min-height: 30px;
  }

  /* Expanded option lists must scale with the compact sheet: desktop 44px
     rows with 14px type made a 6-option popover cover the whole panel and
     swallow the switcher, tabs and prompt. Rows are denser than the 30px
     triggers and every menu is hard-capped so the open list stays a thin
     strip instead of a screen-covering wall. */
  body.create-page:not(.home-page) .model-option-inline {
    min-height: 24px;
    padding: 4px 10px;
    font-size: 11.5px;
    line-height: 1.25;
  }

  body.create-page:not(.home-page) .create-select-option {
    min-height: 24px;
    padding: 0 10px;
    font-size: 11.5px;
  }

  body.create-page:not(.home-page) .model-dropdown-inline,
  body.create-page:not(.home-page) .create-select-menu {
    padding: 4px;
    max-height: min(156px, 40vh);
    max-height: min(156px, 40dvh);
    overflow-y: auto;
  }

  body.create-page:not(.home-page) .create-select-shell.is-aspect-ratio-select .create-select-menu {
    width: min(240px, calc(100vw - 24px));
    min-width: min(200px, calc(100vw - 24px));
    /* The phone composer's content box scrolls and only ~184px of it sits
       above the trigger, so the 15 cells reflow into 4 rows of 4 (42px).
       The whole grid fits without scrolling and is never clipped by the
       sheet's top edge — no ratio hidden, nothing cut off. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: min(184px, 60vh);
    max-height: min(184px, 60dvh);
    gap: 2px;
  }

  body.create-page:not(.home-page) .create-select-shell.is-aspect-ratio-select .create-select-option {
    min-height: 42px;
    padding: 2px 3px;
    font-size: 11px;
  }

  body.create-page:not(.home-page) .create-select-shell.is-aspect-ratio-select .create-select-option-content {
    gap: 3px;
  }

  /* Scoped to the ratio shell so these beat the home-page rules in
     create-mobile-composer.css (one class fewer there); the grid frames are
     clamped to a 32x20 box on phones (aspect-ratio-preview.js follows the
     same 768px breakpoint), so every ratio still renders as a full frame. */
  body.create-page:not(.home-page) .create-select-shell.is-aspect-ratio-select .aspect-ratio-preview {
    width: 32px;
    height: 20px;
    flex: 0 0 20px;
  }

  body.create-page:not(.home-page) .create-select-shell.is-aspect-ratio-select .aspect-ratio-preview.is-auto .aspect-ratio-frame {
    width: 28px;
    height: 18px;
  }

  /* Result cards are the primary content on phones: the prompt, metadata
     chips and action buttons scale down from the desktop reading size so a
     long prompt does not dominate the sheet above the composer. */
  body.create-page:not(.home-page) .task-prompt {
    font-size: 14px;
    line-height: 1.55;
  }

  body.create-page:not(.home-page) .task-meta-chip,
  body.create-page:not(.home-page) .task-time-chip,
  body.create-page:not(.home-page) .task-retention-chip {
    min-height: 24px;
    padding: 3px 9px;
    font-size: 12px;
  }

  /* min-height must be overridden too: studio-shell.css pins these buttons
     at 36px on the create page, which would silently keep them tall. */
  body.create-page:not(.home-page) .task-edit-btn,
  body.create-page:not(.home-page) .task-resend-btn {
    height: 30px;
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px;
  }
}

/* Short phones (640px tall or less): one more density step so the
   sheet stays close to a third of the viewport. */
@media (max-width: 768px) and (max-height: 640px) {
  body.create-page:not(.home-page) .input-panel-content {
    padding-top: 38px;
    padding-bottom: 4px;
  }

  body.create-page:not(.home-page) .media-mode-switcher {
    top: 4px;
    height: 28px;
    padding: 2px;
  }

  body.create-page:not(.home-page) .media-mode-btn {
    min-height: 22px;
    padding: 0 6px;
    font-size: 11.5px;
  }

  body.create-page:not(.home-page) .media-mode-btn > .ui-icon {
    width: 11px;
    height: 11px;
  }

  body.create-page:not(.home-page) .tabs {
    padding-top: 4px;
  }

  body.create-page:not(.home-page) .tab-item {
    min-height: 22px;
    padding: 2px 10px;
  }

  body.create-page:not(.home-page) .image-upload-area {
    --reference-thumbnail-size: 34px;
  }

  body.create-page:not(.home-page) .upload-card,
  body.create-page:not(.home-page) .video-upload-card {
    height: 34px;
    min-height: 34px;
    margin-top: 2px;
    padding: 5px;
  }

  body.create-page:not(.home-page) .image-thumb-wrapper,
  body.create-page:not(.home-page) .upload-card.has-images .image-thumb-wrapper,
  body.create-page:not(.home-page) .video-upload-card .image-thumb-wrapper,
  body.create-page:not(.home-page) .image-add-tile,
  body.create-page:not(.home-page) .upload-card.has-images .image-add-tile {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  body.create-page:not(.home-page) .remove-btn {
    width: 22px;
    height: 22px;
    top: -7px;
    right: -7px;
    font-size: 12px;
  }

  body.create-page:not(.home-page) .prompt-area,
  body.create-page:not(.home-page) .video-prompt-area {
    padding-top: 6px;
  }

  body.create-page:not(.home-page) .prompt-textarea,
  body.create-page:not(.home-page) .media-mention-editor {
    height: 44px;
    min-height: 44px;
  }

  body.create-page:not(.home-page) .point-cost-preview {
    min-height: 18px;
    margin-top: 4px;
    padding: 1px 7px;
  }

  body.create-page:not(.home-page) .point-cost-preview strong {
    font-size: 10.5px;
  }

  body.create-page:not(.home-page) .settings-row {
    margin-top: 4px;
    gap: 5px;
  }

  body.create-page:not(.home-page) .model-selector-trigger,
  body.create-page:not(.home-page) .create-select-trigger {
    height: 28px;
    min-height: 28px;
  }

  body.create-page:not(.home-page) .settings-row .wash-setting-spacer {
    height: 28px;
    min-height: 28px;
  }

  body.create-page:not(.home-page) .model-option-inline {
    min-height: 24px;
    padding: 4px 10px;
  }

  body.create-page:not(.home-page) .create-select-option {
    min-height: 24px;
  }

  body.create-page:not(.home-page) .model-dropdown-inline,
  body.create-page:not(.home-page) .create-select-menu {
    max-height: min(140px, 38vh);
    max-height: min(140px, 38dvh);
  }
}