/*
 * 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;
    min-width: 0;
    /* Beat the theme's 14px !important: iOS zooms smaller editable fields. */
    font-size: 16px !important;
  }

  body.create-page .input-panel .tabs {
    flex-wrap: wrap;
    overflow: visible;
  }

  body.create-page .input-panel .module-picker {
    max-width: 100%;
  }

  body.create-page .input-panel .module-picker-trigger {
    min-width: 0;
  }

  /* 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,
  body.create-page .settings-row > .setting-select-inline {
    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;
  }

  /* The 44x44 empty slot keeps only the plus tile on phones; the vertical
     side label would overflow the fixed-width control row. */
  body.home-page.create-page .home-input-panel .reference-side-label {
    display: none;
  }

  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: 16px !important;
  }

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

/* Landscape phones can cross the stacked-layout breakpoint while editing. */
@media (min-width: 769px) and (pointer: coarse) {
  body.create-page .input-panel .prompt-textarea,
  body.create-page .input-panel .media-mention-editor,
  body.home-page.create-page .home-input-panel #homePromptInput.prompt-textarea,
  body.home-page.create-page .home-input-panel #videoPromptInput.prompt-textarea {
    font-size: 16px !important;
  }
}