/*
 * Create workspace desktop density.
 *
 * The original workspace was composed at a browser zoom close to 85%. Keep
 * that visual density in the page itself so 4K, 1440p and 1080p users see a
 * comparable working area without changing browser zoom. Narrow tablet and
 * mobile widths keep the stacked layout owned by input.css and studio.css.
 */
.create-page .image-upload-area {
  --reference-thumbnail-size: 76px;
}

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

  .create-page .input-panel {
    width: min(1292px, calc(100% - 32px));
    min-height: 360px;
    bottom: var(--input-panel-bottom);
    padding-block: 5px;
    border-radius: 12px;
  }

  .create-page .input-panel-content {
    min-height: 359px;
    margin-left: 76px;
    padding-top: 10px;
  }

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

  .create-page .media-mode-switcher {
    top: 15px;
    left: 12px;
    right: auto;
    bottom: auto;
    width: 62px;
    height: auto;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    transform: none;
  }

  .create-page .media-mode-btn {
    width: 62px;
    min-height: 43px;
    flex: 0 0 auto;
    padding-inline: 8px;
    font-size: 13px;
  }

  .create-page .media-mode-btn .ui-icon {
    width: 15px;
    height: 15px;
  }

  .create-page .composer-panel-header {
    min-height: 52px;
    padding: 12px 15px 7px;
  }

  .create-page .composer-panel-title {
    font-size: 15px;
  }

  .create-page .composer-panel-subtitle {
    margin-top: 3px;
    font-size: 10px;
  }

  .create-page .tabs {
    min-height: 44px;
    margin-inline: 15px;
    padding: 3px;
  }

  .create-page .tab-item {
    min-height: 36px;
    padding: 6px 16px;
    font-size: 13px;
  }

  .create-page .image-upload-area,
  .create-page .video-upload-area {
    padding-inline: 14px;
  }

  .create-page .image-upload-area {
    --reference-thumbnail-size: 64px;
    --reference-content-left-inset: 18px;
  }

  .create-page .upload-card,
  .create-page .video-upload-card {
    height: 70px;
    min-height: 70px;
    margin-top: 6px;
    padding: 12px;
  }

  .create-page .upload-card.has-images {
    padding: 2px 96px 2px 12px;
  }

  .create-page .upload-card.has-images .upload-controls {
    right: 12px;
  }

  .create-page .image-thumb-wrapper,
  .create-page .upload-card.has-images .image-thumb-wrapper,
  .create-page .video-upload-card .image-thumb-wrapper,
  .create-page .image-add-tile,
  .create-page .upload-card.has-images .image-add-tile {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }

  .create-page .btn-add-image {
    min-height: 34px;
    padding-inline: 13px;
    font-size: 12px;
  }

  .create-page .image-counter {
    min-height: 28px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .create-page .prompt-area,
  .create-page .video-prompt-area {
    padding: 12px 14px 0;
  }

  .create-page .prompt-textarea,
  .create-page .media-mention-editor {
    height: 108px;
    min-height: 108px;
    padding: 12px 58px 44px 13px;
    font-size: 15px;
  }

  .create-page .settings-row {
    gap: 8px;
    margin-top: 10px;
    padding: 6px 0;
  }

  .create-page .setting-select-inline,
  .create-page .model-selector-trigger,
  .create-page .create-select-trigger {
    height: 38px;
    min-height: 38px;
    padding-inline: 12px;
    font-size: 13px;
  }

  .create-page .btn-send {
    right: 14px;
    bottom: 8px;
    width: 38px;
    height: 38px;
  }

  .create-page .point-cost-preview {
    right: 62px;
    bottom: 12px;
    min-height: 30px;
    padding-inline: 11px;
    font-size: 11px;
  }

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

  .create-page .chat-container {
    max-width: 1292px;
    padding: 12px 20px 15px;
  }

  .create-page .chat-messages {
    max-width: 1216px;
    padding-top: 14px;
  }

  .create-page .message-group {
    gap: 10px;
    margin-bottom: 18px;
  }

  .create-page .message-avatar {
    width: 31px;
    height: 31px;
  }

  .create-page .task-card {
    min-height: 187px;
    padding: 17px;
  }

  .create-page .task-prompt {
    font-size: 13px;
  }

  .create-page .task-meta {
    gap: 6px;
    margin-top: 10px;
  }

  .create-page .task-meta-chip,
  .create-page .task-time-chip,
  .create-page .task-retention-chip {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 10px;
  }

  .create-page .task-edit-btn,
  .create-page .task-resend-btn,
  .create-page .task-action-btn {
    height: 30px;
    padding-inline: 12px;
    font-size: 11px;
  }

  .create-page .ai-result-image {
    max-height: clamp(136px, 19vh, 238px);
  }

  .create-page .ai-result-grid .ai-result-image,
  .create-page .ai-result-grid .ai-result-video {
    max-height: 306px;
  }
}

/* Hide the tab rail surface while preserving its geometry and button positions. */
.create-page .tabs {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Remove counter and cost surfaces without changing their layout boxes. */
.create-page .image-counter,
.create-page .point-cost-preview {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Keep the reference-upload control position while removing its empty chrome. */
.create-page .image-upload-area .upload-card {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.create-page .image-upload-area .upload-card:hover {
  background: transparent;
}

.create-page .image-upload-area .upload-card:not(.has-images) .upload-controls {
  height: var(--reference-thumbnail-size);
}

.create-page .image-upload-area .reference-add-button {
  position: relative;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  aspect-ratio: 1;
  flex: 0 0 auto;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  border: 1px dashed var(--rb-line) !important;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--rb-muted) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.create-page .image-upload-area .reference-add-button > .ui-icon {
  width: 50%;
  min-width: 20px;
  max-width: 26px;
  height: auto;
  margin: 0;
  stroke-width: 1.65;
  transition: color 160ms ease, transform 160ms ease;
}

.create-page .image-upload-area .reference-add-button:hover {
  border-style: solid !important;
  border-color: var(--rb-line-strong) !important;
  background: rgba(139, 92, 246, 0.12) !important;
  color: var(--rb-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.create-page .image-upload-area .reference-add-button:hover > .ui-icon {
  transform: scale(1.04);
}

.create-page .image-upload-area .reference-add-button:focus-visible {
  outline: 2px solid var(--rb-primary-3);
  outline-offset: 2px;
}

.create-page .image-upload-area .reference-add-button:active {
  transform: translateY(0) scale(0.98);
}

.create-page .image-upload-area .image-counter {
  visibility: hidden;
}

/* Short desktop screens need more room for results and task history. This is
   a reflowed density mode, not browser-style page scaling. */
@media (min-width: 821px) and (max-height: 960px) {
  .create-page {
    --input-panel-height: 306px;
    --input-panel-bottom: 27px;
  }

  .create-page .input-panel {
    bottom: var(--input-panel-bottom);
    min-height: 306px;
    border-radius: 12px;
  }

  .create-page .input-panel-content {
    min-height: 305px;
    margin-left: 68px;
  }

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

  .create-page .media-mode-switcher {
    top: 15px;
    left: 8px;
    width: 54px;
    gap: 4px;
  }

  .create-page .media-mode-btn {
    width: 54px;
    min-height: 38px;
    padding-inline: 6px;
    font-size: 12px;
  }

  .create-page .composer-panel-header {
    min-height: 44px;
    padding: 8px 12px 5px;
  }

  .create-page .composer-panel-title {
    font-size: 13px;
  }

  .create-page .composer-panel-subtitle {
    margin-top: 1px;
  }

  .create-page .tabs {
    min-height: 40px;
    margin-inline: 12px;
    padding: 2px;
  }

  .create-page .tab-item {
    min-height: 34px;
    padding: 5px 14px;
    font-size: 12px;
  }

  .create-page .image-upload-area,
  .create-page .video-upload-area {
    padding-inline: 12px;
  }

  .create-page .image-upload-area {
    --reference-thumbnail-size: 48px;
    --reference-content-left-inset: 14px;
  }

  .create-page .upload-card,
  .create-page .video-upload-card {
    height: 54px;
    min-height: 54px;
    margin-top: 5px;
    padding: 8px 10px;
  }

  .create-page .upload-card.has-images {
    padding: 2px 88px 2px 10px;
  }

  .create-page .image-thumb-wrapper,
  .create-page .upload-card.has-images .image-thumb-wrapper,
  .create-page .video-upload-card .image-thumb-wrapper,
  .create-page .image-add-tile,
  .create-page .upload-card.has-images .image-add-tile {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

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

  .create-page .prompt-textarea,
  .create-page .media-mention-editor {
    height: 82px;
    min-height: 82px;
    padding: 10px 52px 36px 12px;
    font-size: 15px;
  }

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

  .create-page .setting-select-inline,
  .create-page .model-selector-trigger,
  .create-page .create-select-trigger {
    height: 34px;
    min-height: 34px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .create-page .btn-send {
    right: 12px;
    bottom: 6px;
    width: 34px;
    height: 34px;
  }

  .create-page .point-cost-preview {
    right: 54px;
    bottom: 8px;
    min-height: 26px;
    padding-inline: 9px;
    font-size: 10px;
  }

  .create-page .chat-container {
    padding-top: 8px;
    padding-bottom: 10px;
  }
}

/* High-DPI laptops often expose only about 700 CSS pixels of browser height
   after Windows scaling and Chrome UI. Give that workspace its own compact
   composition instead of asking users to change system zoom. */
@media (min-width: 821px) and (max-height: 780px) {
  .create-page {
    --input-panel-height: 248px;
  }

  .create-page .input-panel {
    width: min(980px, calc(100% - 32px));
    min-height: 248px;
  }

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

  .create-page .input-panel-content {
    margin-left: 60px;
    padding-top: 8px;
  }

  .create-page .media-mode-switcher {
    top: 13px;
    left: 6px;
    width: 48px;
    gap: 3px;
  }

  .create-page .media-mode-btn {
    width: 48px;
    min-height: 34px;
    padding-inline: 4px;
  }

  .create-page .composer-panel-header {
    min-height: 38px;
    padding: 5px 10px 3px;
  }

  .create-page .composer-panel-subtitle {
    display: none;
  }

  .create-page .tabs {
    min-height: 38px;
    margin-inline: 10px;
  }

  .create-page .tab-item {
    min-height: 32px;
    padding: 5px 14px;
    font-size: 12px;
  }

  .create-page .image-upload-area,
  .create-page .video-upload-area {
    padding-inline: 10px;
  }

  .create-page .image-upload-area {
    --reference-thumbnail-size: 40px;
    --reference-content-left-inset: 12px;
  }

  .create-page .upload-card,
  .create-page .video-upload-card {
    height: 46px;
    min-height: 46px;
    margin-top: 3px;
    padding: 5px 8px;
  }

  .create-page .upload-card.has-images {
    padding: 2px 76px 2px 8px;
  }

  .create-page .image-thumb-wrapper,
  .create-page .upload-card.has-images .image-thumb-wrapper,
  .create-page .video-upload-card .image-thumb-wrapper,
  .create-page .image-add-tile,
  .create-page .upload-card.has-images .image-add-tile {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .create-page .prompt-area,
  .create-page .video-prompt-area {
    padding: 4px 10px 0;
  }

  .create-page .prompt-textarea,
  .create-page .media-mention-editor {
    height: 58px;
    min-height: 58px;
    padding: 8px 48px 29px 10px;
    font-size: 13px;
  }

  .create-page .settings-row {
    gap: 6px;
    margin-top: 4px;
    padding-block: 2px;
  }

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

  .create-page .btn-send {
    right: 10px;
    bottom: 4px;
    width: 32px;
    height: 32px;
  }

  .create-page .point-cost-preview {
    right: 48px;
    bottom: 5px;
    min-height: 24px;
  }

  .create-page .chat-container {
    max-width: 980px;
  }
}

/* Narrow tablet portrait and phone landscape: the select row nearly fills the
   panel, so the cost chip and the send button must leave the row instead of
   floating over the last select. */
@media (min-width: 769px) and (max-width: 960px) {
  .create-page {
    --input-panel-height: 292px;
  }

  .create-page .point-cost-preview {
    position: static;
    width: fit-content;
    margin: 8px 0 0 auto;
  }

  .create-page .btn-send {
    top: 14px;
    right: 14px;
    bottom: auto;
  }
}

@media (min-width: 769px) and (max-width: 820px) and (max-height: 480px) {
  .create-page {
    --input-panel-height: 360px;
  }

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

/* The composer height follows its active form after the redundant headers were removed. */
.create-page .input-panel {
  border: 0;
}

/* Keep task metadata and visible media on the prompt's left baseline. */
.create-page .task-card > .task-meta,
.create-page .task-card > .task-output,
.create-page .task-card > .task-status-footer {
  margin-left: 0;
  padding-left: 0;
}

.create-page .task-meta,
.create-page .ai-result-grid {
  justify-content: flex-start;
}

.create-page .task-output > .ai-result-frame,
.create-page .task-output > .ai-result-grid {
  margin-left: 0;
  margin-right: auto;
}

.create-page .task-output .ai-result-frame {
  justify-content: flex-start;
}

/* Composer density: empty reference space should not reserve a full row. */