/* Homepage placement only. The component's DOM and visual rules come directly
   from the existing Create workspace stylesheets loaded immediately before this file. */
body.home-page.create-page .home-input-panel {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
}

/* Cost is a generation specification, so it belongs with the model and output
   settings rather than floating over the prompt area. */
body.home-page.create-page .home-input-panel .settings-row .home-settings-cost {
  position: static;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
}

/* Tool tabs without output specifications (upscaler / ultra upscale)
   hide their settings selects; keep the row box in place so the
   cost chip stays visible while the selects hide with it. */
body.home-page.create-page .home-input-panel .image-composer-panel.module-upscaler #imageGenSettings,
body.home-page.create-page .home-input-panel .image-composer-panel.module-image_ultra_upscale #imageGenSettings,
body.home-page.create-page .home-input-panel .image-composer-panel.module-image_cutout #imageGenSettings {
  visibility: visible;
  opacity: 1;
}

body.home-page.create-page .home-input-panel .image-composer-panel.module-upscaler #imageGenSettings > .model-selector-wrapper,
body.home-page.create-page .home-input-panel .image-composer-panel.module-upscaler #imageGenSettings > select,
body.home-page.create-page .home-input-panel .image-composer-panel.module-image_ultra_upscale #imageGenSettings > .model-selector-wrapper,
body.home-page.create-page .home-input-panel .image-composer-panel.module-image_ultra_upscale #imageGenSettings > select,
body.home-page.create-page .home-input-panel .image-composer-panel.module-image_cutout #imageGenSettings > .model-selector-wrapper,
body.home-page.create-page .home-input-panel .image-composer-panel.module-image_cutout #imageGenSettings > select {
  visibility: hidden;
}

/* 动漫转真人 follows the GPT-Image-2.5 Ext chain with a fixed model: keep
   the row alive so the cost chip stays visible and hide the model dropdown.
   The size / resolution selects are CreateSelectMenu shells (the visible
   UI is the shell, the native select is display:none), so hiding them by
   targeting the native select does nothing — the resolution select is
   instead hidden through its native `hidden` attribute in home/composer.js
   (the shell follows via CreateSelectMenu.sync). Size / count stay usable;
   the offline preview is quoted at the fixed 2K tier and the create page
   offers the full resolution choice with the authoritative quote. */
body.home-page.create-page .home-input-panel .image-composer-panel.module-image_anime_to_real #imageGenSettings > .model-selector-wrapper {
  visibility: hidden;
}

@media (min-width: 821px) {
  body.home-page.create-page .home-input-panel {
    min-height: 0 !important;
  }

  body.home-page.create-page .home-input-panel .input-panel-content {
    min-height: 0 !important;
    margin-left: 76px;
  }

  body.home-page.create-page .home-input-panel .image-composer-panel,
  body.home-page.create-page .home-input-panel .video-composer-panel {
    min-height: 0 !important;
  }

  body.home-page.create-page .home-input-panel .tabs {
    padding: 8px 16px 0;
  }

  body.home-page.create-page .home-input-panel .tab-item {
    padding: 5px 12px;
    font-size: 12px;
  }

  body.home-page.create-page .home-input-panel .image-upload-area {
    padding: 0 16px;
  }

  body.home-page.create-page .home-input-panel .upload-card {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
  }

  /* Video panel regions align with the image panel so the composer box
     keeps the same size when switching modes. */
  body.home-page.create-page .home-input-panel .video-upload-area {
    padding: 0 16px;
  }

  body.home-page.create-page .home-input-panel .video-upload-card {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    height: auto;
    min-height: 64px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
  }

  body.home-page.create-page .home-input-panel #videoPromptInput.prompt-textarea {
    display: block;
    grid-row: auto;
    grid-column: auto;
    width: 100%;
    min-height: 88px !important;
    height: 88px !important;
    padding: 12px 156px 48px 14px !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03)) !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    resize: vertical;
  }

  body.home-page.create-page .home-input-panel .video-prompt-area {
    position: relative;
    padding: 8px 16px 12px;
  }

  body.home-page.create-page .home-input-panel .video-send-btn {
    right: 28px;
    bottom: 81px;
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 12px;
  }

  /* Same chip geometry as the Create page so both composers read identically.
     The chip sits in-flow at the end of the settings row (see the
     .home-settings-cost rules above), so no absolute positioning is needed. */
  body.home-page.create-page .home-input-panel .video-point-cost-preview {
    min-height: 36px;
    padding: 0 14px;
    gap: 6px;
    font-size: 13px;
  }

  body.home-page.create-page .home-input-panel .prompt-area {
    position: relative;
    padding: 8px 16px 12px;
  }

  body.home-page.create-page .home-input-panel #homePromptInput.prompt-textarea {
    display: block;
    grid-row: auto;
    grid-column: auto;
    width: 100%;
    min-height: 88px !important;
    height: 88px !important;
    padding: 12px 156px 48px 14px !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03)) !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    resize: vertical;
  }

  body.home-page.create-page .home-input-panel .btn-send {
    right: 28px;
    bottom: 81px;
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 12px;
  }

  body.home-page.create-page .home-input-panel .point-cost-preview {
    min-height: 36px;
    padding: 0 14px;
    gap: 6px;
    font-size: 13px;
  }

  body.home-page.create-page .home-input-panel .point-cost-preview strong {
    font-size: 16px;
  }

  body.home-page.create-page .home-input-panel .settings-row {
    display: flex;
    gap: 8px;
    min-height: 50px;
    margin-top: 8px;
    padding: 6px 8px;
    overflow-x: auto;
    border-radius: 12px;
  }

  /* Keep the model dropdown and custom select menus visible above the row
     (the row scrolls horizontally, which would otherwise clip them). */
  body.home-page.create-page .home-input-panel .settings-row.has-open-select,
  body.home-page.create-page .home-input-panel .settings-row.has-open-model {
    position: relative;
    z-index: 40;
    overflow: visible;
  }

  body.home-page.create-page .home-input-panel .create-select-shell {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    flex: 0 0 112px;
  }

  body.home-page.create-page .home-input-panel .create-select-trigger {
    min-height: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 12px;
  }

  body.home-page.create-page .home-input-panel .model-selector-wrapper {
    min-width: 174px;
  }

  body.home-page.create-page .home-input-panel .model-selector-trigger,
  body.home-page.create-page .home-input-panel .setting-select-inline {
    min-height: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 12px;
  }

  body.home-page.create-page .home-input-panel .setting-select-inline {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    padding-inline: 10px;
  }

  body.home-page.create-page .home-input-panel .settings-row .home-settings-cost {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    gap: 6px;
    font-size: 13px;
  }

  body.home-page.create-page .home-input-panel .settings-row .home-settings-cost strong {
    font-size: 16px;
  }
}

/* Phones and narrow tablets: the workbench composer stacks the same way as
   the create page — mode row on top, 2×2 specification grid, cost and send
   out of the way of the selects. */
@media (max-width: 820px) {
  body.home-page.create-page .home-input-panel {
    min-height: 0;
    border-radius: 16px 16px 12px 12px;
  }

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

  /* One stable sheet size on phones: the video row keeps the image row's
     geometry. The video panel previously inherited studio.css's 374px
     min-height (missed by the override above) and its upload card stayed at
     the desktop 64px, so switching 图片/视频 changed the composer height. */
  body.home-page.create-page .home-input-panel .tabs {
    min-height: 44px;
  }

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

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

  body.home-page.create-page .home-input-panel .media-mode-switcher {
    top: 10px;
    left: 12px;
    right: 12px;
    bottom: auto;
    width: auto;
    height: 44px;
    flex-direction: row;
    padding: 5px;
  }

  body.home-page.create-page .home-input-panel #homePromptInput.prompt-textarea {
    height: 96px;
    min-height: 96px;
    padding: 12px 64px 12px 14px;
  }

  body.home-page.create-page .home-input-panel .btn-send,
  body.home-page.create-page .home-input-panel .video-send-btn {
    top: 14px;
    right: 14px;
    bottom: auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  body.home-page.create-page .home-input-panel .settings-row {
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px;
    padding: 8px;
  }

  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: 1 1 calc(50% - 4px);
  }
}