/*
 * Phone composer layout
 *
 * The desktop composer uses an in-field send control. On a phone that makes
 * the prompt and the last controls compete for the same narrow corner, so
 * the mobile composition deliberately sequences the work instead:
 * prompt → specifications → cost and send action.
 */
@media (max-width: 768px) {
  body.create-page {
    --input-panel-height: 348px;
  }

  /* Keep a deliberate gutter on both edges instead of letting the desktop
     bottom sheet run flush to a phone's viewport.  The panel remains fluid,
     while the inset makes its right-most controls readable even in embedded
     mobile browsers with rounded edges or a narrow visible viewport. */
  body.create-page:not(.home-page) .input-panel {
    width: calc(100% - 24px);
  }

  body.create-page .input-panel,
  body.create-page .input-panel-content {
    max-height: 68vh;
    max-height: 68dvh;
  }

  body.create-page .prompt-area,
  body.create-page .video-prompt-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 6px;
    padding: 8px 12px 10px;
  }

  body.create-page .prompt-textarea,
  body.create-page .media-mention-editor {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 50px;
    min-height: 50px;
    padding: 9px 12px;
    font-size: 15px;
  }

  /* Two small, equal columns preserve a quick scan of model, ratio, quality
     and count without turning this into a horizontally scrolling toolbar. */
  body.create-page .settings-row {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
  }

  body.create-page .settings-row > .model-selector-wrapper,
  body.create-page .settings-row > .create-select-shell {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: none;
  }

  body.create-page .model-selector-trigger,
  body.create-page .create-select-trigger {
    height: 32px;
    min-height: 32px;
    padding-inline: 9px;
    border-radius: 7px;
    font-size: 12px;
  }

  /* The final row is a separate thumb-friendly action bar. This removes the
     send action from the text field while keeping its DOM contract intact. */
  body.create-page .prompt-area > .btn-send {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    align-self: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
  }

  body.create-page .point-cost-preview {
    position: static;
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    justify-self: start;
    min-height: 24px;
    margin: 0;
    padding: 2px 0;
    gap: 4px;
    font-size: 10px;
  }

  body.create-page .point-cost-preview strong {
    font-size: 12px;
  }

  /* The ratio menu is its own dense grid. Frames are clamped to a 44x28 box
     (aspect-ratio-preview.js) and the rows grow to 60px, keeping every one
     of the 15 ratios visible as a full, proportional frame. */
  body.create-page .create-select-shell.is-aspect-ratio-select .create-select-menu {
    width: min(240px, calc(100vw - 20px));
    min-width: min(200px, calc(100vw - 20px));
    max-height: min(320px, 64dvh);
    gap: 2px;
    padding: 4px;
  }

  body.create-page .create-select-shell.is-aspect-ratio-select .create-select-option {
    min-height: 60px;
    padding: 4px 3px;
    font-size: 11px;
  }

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

  body.create-page .create-select-shell.is-aspect-ratio-select .aspect-ratio-preview {
    width: 44px;
    height: 28px;
    flex: 0 0 28px;
  }

  body.create-page .create-select-shell.is-aspect-ratio-select .aspect-ratio-preview.is-auto .aspect-ratio-frame {
    width: 34px;
    height: 22px;
  }
}

@media (max-width: 380px) {
  body.create-page .prompt-area,
  body.create-page .video-prompt-area {
    padding-inline: 10px;
  }

  body.create-page .model-selector-trigger,
  body.create-page .create-select-trigger {
    padding-inline: 8px;
    font-size: 11.5px;
  }
}

/* The public home page shares the composer DOM but adds stronger placement
   rules for its workbench. Reassert the compact sequence here so its legacy
   in-field send affordance cannot win the mobile cascade. */
@media (max-width: 768px) {
  /* The home composer is in normal document flow (unlike /create/'s fixed
     sheet). It runs flush with the workbench column so its left and right
     edges align with the canvas strip above and the channel modules below,
     and its inner controls scale with the card; the panel's own 10-12px
     inner padding keeps those controls off the card edges. */
  body.home-page.create-page .home-input-panel {
    width: 100% !important;
    margin-inline: 0 !important;
  }

  body.home-page.create-page .home-input-panel .input-panel-content {
    padding-top: 40px;
  }

  body.home-page.create-page .home-input-panel .media-mode-switcher {
    top: 5px;
    left: 10px;
    right: 10px;
    height: 30px;
    padding: 3px;
    z-index: 10;
  }

  body.home-page.create-page .home-input-panel .media-mode-btn {
    min-height: 24px;
    padding-inline: 8px;
    font-size: 12px;
  }

  /* The empty reference slot is an auxiliary action on phones. Keep its
     visual footprint in step with the compact control grid, rather than
     letting its desktop-sized plus tile dominate the composer. */
  body.home-page.create-page .home-input-panel .image-upload-area {
    --reference-thumbnail-size: 44px;
    padding-inline: 12px;
  }

  body.home-page.create-page .home-input-panel .upload-card:not(.has-images) {
    height: 44px;
    min-height: 44px;
    margin-top: 2px;
    padding: 4px 6px;
  }

  body.home-page.create-page .home-input-panel .upload-card:not(.has-images) .upload-controls,
  body.home-page.create-page .home-input-panel .reference-add-button {
    width: 44px;
    height: 44px;
  }

  body.home-page.create-page .home-input-panel .reference-add-button {
    flex: 0 0 44px;
    border-radius: 6px;
  }

  body.home-page.create-page .home-input-panel .reference-add-button > .ui-icon {
    width: 18px;
    height: 18px;
  }

  body.home-page.create-page .home-input-panel #homePromptInput.prompt-textarea,
  body.home-page.create-page .home-input-panel #videoPromptInput.prompt-textarea {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: 50px;
    min-height: 50px;
    box-sizing: border-box;
    padding: 9px 12px;
    font-size: 15px;
  }

  body.home-page.create-page .home-input-panel .settings-row {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
  }

  body.home-page.create-page .home-input-panel .settings-row .create-select-shell,
  body.home-page.create-page .home-input-panel .settings-row .model-selector-wrapper,
  body.home-page.create-page .home-input-panel .settings-row .setting-select-inline {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: none;
  }

  body.home-page.create-page .home-input-panel .model-selector-trigger,
  body.home-page.create-page .home-input-panel .create-select-trigger {
    height: 32px;
    min-height: 32px;
    padding-inline: 9px;
    border-radius: 7px;
    font-size: 12px;
  }

  body.home-page.create-page .home-input-panel .prompt-area > .btn-send {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    align-self: center;
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 8px;
  }

  body.home-page.create-page .home-input-panel .point-cost-preview.home-settings-cost {
    position: static;
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    justify-self: start;
    min-height: 24px;
    margin: 0;
    padding: 2px 0;
    gap: 4px;
    font-size: 10px;
  }
}