/* Final video reference selector sizing; must stay in the last-loaded stylesheet. */
html body.client-body:has(.studio-shell.view-create) #app .studio-shell.view-create #taskForm.prompt-composer[data-composer-surface="create"]:not(.compact):not(.maximized) .composer-options.has-video-options > .reference-mode-select {
  flex-basis: 88px !important;
  width: 88px !important;
  min-width: 88px !important;
}

html body.client-body:has(.studio-shell.view-create) #app .studio-shell.view-create #taskForm.prompt-composer[data-composer-surface="create"] .reference-mode-select .custom-select-menu {
  width: 126px !important;
  min-width: 126px !important;
  max-width: 126px !important;
}

/* Match create-page toolbar controls to borderless home-page controls. */
html body.client-body:has(.studio-shell.view-create) #app .studio-shell.view-create #taskForm.prompt-composer[data-composer-surface="create"] .composer-options :is(.create-toolbar-pill, .custom-select-trigger),
html body.client-body:has(.studio-shell.view-create) #app .studio-shell.view-create #taskForm.prompt-composer[data-composer-surface="create"] .composer-options > .select-chip.custom-select {
  height: 30px !important;
  min-height: 30px !important;
  gap: 5px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #c9cdd3 !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
  letter-spacing: 0 !important;
}

html body.client-body:has(.studio-shell.view-create) #app .studio-shell.view-create #taskForm.prompt-composer[data-composer-surface="create"] .composer-options :is(.create-toolbar-pill, .custom-select-trigger):hover {
  background: rgba(255, 255, 255, .055) !important;
  border: 0 !important;
  color: #f1f3f6 !important;
}

html body.client-body:has(.studio-shell.view-create) #app .studio-shell.view-create #taskForm.prompt-composer[data-composer-surface="create"] .composer-options :is(.create-toolbar-pill[aria-expanded="true"], .custom-select-trigger[aria-expanded="true"]) {
  background: rgba(76, 159, 230, .10) !important;
  border: 0 !important;
  color: #e8f3ff !important;
}

html body.client-body:has(.studio-shell.view-create) #app .studio-shell.view-create #taskForm.prompt-composer[data-composer-surface="create"] .composer-options .create-toolbar-pill.create-optimize-pill[aria-pressed="true"] {
  border: 1px solid #58c9ff !important;
  background: linear-gradient(135deg, rgba(37, 139, 245, .55), rgba(67, 205, 220, .38)) !important;
  color: #f7fdff !important;
  box-shadow: 0 0 0 1px rgba(88, 201, 255, .36) !important, 0 0 18px rgba(44, 164, 255, .34) !important;
}

html body.client-body:has(.studio-shell.view-create) #app .studio-shell.view-create #taskForm.prompt-composer[data-composer-surface="create"] .composer-options :is(.create-toolbar-pill, .custom-select-trigger):focus-visible {
  outline: 2px solid rgba(76, 159, 230, .5) !important;
  outline-offset: 2px !important;
}

/* Generation mode and reference mode read as compact pills. Let these two
   controls shrink to their label plus chevron instead of carrying a fixed
   right-side gap; their popup menus keep their own readable width. */
html body.client-body #app .studio-shell .prompt-composer[data-composer-surface] :is(.generation-mode-select, .reference-mode-select) {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
}

html body.client-body #app .studio-shell .prompt-composer[data-composer-surface] :is(.generation-mode-select, .reference-mode-select) .custom-select-trigger {
  justify-content: flex-start !important;
  gap: 4px !important;
  padding-right: 4px !important;
  padding-left: 6px !important;
}

html body.client-body #app .studio-shell .prompt-composer[data-composer-surface] :is(.generation-mode-select, .reference-mode-select) .custom-select-chevron {
  margin-left: 0 !important;
}

/* Keep the full prompt toolbar visible when a model has a long display name.
   The model can ellipsize, while duration, @, price and submit stay in view. */
html body.client-body #app .studio-shell .prompt-composer[data-composer-surface] .composer-options {
  gap: 4px !important;
}

html body.client-body #app .studio-shell .prompt-composer[data-composer-surface] .composer-options > .create-model-pill {
  flex: 0 0 142px !important;
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
}

html body.client-body #app .studio-shell .prompt-composer[data-composer-surface] .composer-options > .create-model-pill .create-pill-label {
  min-width: 0 !important;
  max-width: 91px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}