@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;
  }

  /* Match the image reference slot so switching media modes keeps the
     composer shell at the same height. */
  .create-page .video-upload-card {
    height: 64px;
    min-height: 64px;
    margin-top: 4px;
  }

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

  /* Box height matches the canvas image-gen panel prompt
     (.is-image-generation-panel .canvas-panel-prompt, min-height 124px). */
  .create-page .prompt-textarea,
  .create-page .media-mention-editor {
    height: 124px;
    min-height: 124px;
    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;
  }

  /* Model trigger slot keeps its original 150px (2026-10 rollback: the
     collapsed pill stays in the four-column rhythm with the other selects);
     only the expanded dropdown is widened. */
  .create-page #modelSelectorWrapper {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    flex-basis: 150px;
  }

  /* Expanded model dropdown keeps the 310px width (2026-10 resize, was
     250px) even though the trigger is 150px: the one-line 11px description
     (longest 21 CJK chars ≈231px + 32px name indent) and the full option
     names need the room. It anchors to the trigger's left edge (base
     `left: 0`) and extends rightward past the wrapper, so `right: 0` must
     go. */
  .create-page .model-dropdown-inline {
    width: 310px;
    right: auto;
  }

  .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;
  }
}

/* 输入窗口整体密度（用户参考图：浏览器 67% 缩放下的观感，实测面板 773x203）。
   1160x294 的面板在 1920 级 CSS 视口下占 60% 宽 / 29% 高，明显偏大；这里用
   zoom 等比缩放整块面板——文字、按钮、下拉、提及弹层一起缩，语义等同浏览器
   缩放，而不是只缩外框。按视口分档，让面板始终约占视口宽 40%：
     <=2000px  -> 0.67 (777x198)
     2001-2600 -> 0.85 (986x250)
     >2600px   -> 不缩放，保持原始 1160x294
   首页复用同一 DOM，但它的 composer 由 home-create-composer.css 接管，
   所以用 :not(.home-page) 排除。 */
@media (min-width: 821px) and (max-width: 2000px) {
  body.create-page:not(.home-page) .input-panel {
    zoom: 0.67;
  }
}

@media (min-width: 2001px) and (max-width: 2600px) {
  body.create-page:not(.home-page) .input-panel {
    zoom: 0.85;
  }
}

/* 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;
    /* The image reference tooltip must not create a horizontal scrollbar;
       that scrollbar adds 15px to the image mode only. */
    overflow-x: hidden;
    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 (31px, the compact size from
     the video composer). Both rows host 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),
  body.create-page:not(.home-page) .video-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;
  }

  /* The desktop 20px expanded-list mark would crowd the 24px compact
     rows; shrink it with the sheet. The desc is hidden below, so the logo
     spans only the single name row (no empty second grid row). */
  body.create-page:not(.home-page) .model-option-inline .model-option-logo {
    width: 14px;
    height: 14px;
    grid-row: 1;
  }

  /* Two-line small print stays hidden in the compact phone sheet: the 24px
     rows plus the hard menu cap keep the model list a scannable thin strip. */
  body.create-page:not(.home-page) .model-option-inline .model-option-desc {
    display: none;
  }

  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. The chips
     and the re-edit button are auxiliary metadata chrome, so they drop to
     caption density and the button keeps only its own footprint instead of
     the full-width bar the stacked header would otherwise stretch. */
  body.create-page:not(.home-page) .task-prompt {
    font-size: 14px;
    line-height: 1.55;
  }

  body.create-page:not(.home-page) .task-card-header {
    gap: 8px;
  }

  body.create-page:not(.home-page) .task-meta {
    gap: 5px;
    margin-top: 8px;
  }

  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: 18px;
    padding: 1px 7px;
    font-size: 10px;
    line-height: 1.4;
  }

  /* 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: 26px;
    min-height: 26px;
    padding: 0 10px;
    font-size: 11px;
  }

  /* The stacked header stretches its actions to the card width; keep the
     compact button at its own content width so it no longer reads as a
     full-width bar above the chips. */
  body.create-page:not(.home-page) .task-card-actions .task-edit-btn,
  body.create-page:not(.home-page) .task-card-actions .task-segment-chip {
    align-self: flex-start;
    width: auto;
  }

  body.create-page:not(.home-page) .task-segment-chip {
    min-height: 26px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* 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);
  }
}