/* Geometry only: button-ui.css continues to own colors and availability. */
.site-shell.workspace-open .workspace :is(
  button.credit-action,
  button.generation-action,
  button.generation-cancel-action,
  button.workspace-primary-action,
  button.character-manager-generate,
  button.character-manager-retry
) {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
  transform: none !important;
  animation: none !important;
  transition: color 140ms ease, background-color 140ms ease,
    border-color 140ms ease, box-shadow 140ms ease !important;
}

/* Separate the changing estimate/status from the label. Two status lines are
   reserved before submission; longer messages can still grow without clipping. */
.site-shell.workspace-open .workspace button.credit-action {
  display: inline-grid;
  grid-template-columns: 16px minmax(0, 1fr) 16px;
  grid-template-rows: minmax(1.45em, auto) minmax(28px, auto);
  align-items: center;
  align-content: center;
  justify-content: stretch;
  gap: 3px 8px;
  width: min(100%, var(--generation-button-size, 22em));
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 7px 10px;
  white-space: normal !important;
  text-wrap: wrap;
}

.site-shell.workspace-open .workspace .action-with-cost[data-inline-primary="true"] > button.primary-action.credit-action {
  display: none;
}

.site-shell.workspace-open .workspace .prompt-storyboard-actions > button.credit-action {
  grid-template-columns: 16px minmax(0, 1fr) 16px;
  min-width: 0;
  flex: 0 0 auto;
}

/* Cancellation must not take width from a generation label or cost slot. */
.site-shell.workspace-open .workspace :is(.action-with-cost, .voice-toolbar-generate) {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.site-shell.workspace-open .workspace button.generation-cancel-action {
  width: 9em;
  min-width: 0;
  max-width: 100%;
  min-block-size: 36px;
  flex: 0 0 auto;
  overflow-wrap: anywhere;
  white-space: normal;
}

.site-shell.workspace-open .workspace :is(.stage-actions, .topic-assistant-actions, .voice-toolbar-generate) > button.generation-cancel-action {
  order: 99;
}

.site-shell.workspace-open .workspace button.credit-action > svg {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 16px;
  height: 16px;
  margin: 0;
  justify-self: center;
}

.site-shell.workspace-open .workspace button.credit-action > :is(.action-label, span) {
  grid-column: 2 / 4;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  min-block-size: 1.45em;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.45;
  text-align: left;
  white-space: normal !important;
}

.site-shell.workspace-open .workspace button.credit-action > .action-label:first-child {
  grid-column: 1 / 3;
}

.site-shell.workspace-open .workspace .prompt-storyboard-actions > button.credit-action > .action-label {
  grid-column: 2 / 4;
}

.site-shell.workspace-open .workspace button.credit-action > small {
  grid-column: 2 / 4;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-block-size: 28px;
  margin: 0;
  padding: 0 6px;
  overflow: visible;
  overflow-wrap: anywhere;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.45;
  text-align: left;
  text-overflow: clip;
  white-space: normal !important;
}

.site-shell.workspace-open .workspace button.credit-action > .action-label:first-child + small {
  grid-column: 1 / 3;
}

.site-shell.workspace-open .workspace .prompt-storyboard-actions > button.credit-action > small {
  grid-column: 2 / 4;
  width: 100%;
  min-block-size: 28px;
}

.site-shell.workspace-open .workspace button.credit-action > .action-direction-icon {
  grid-column: 3;
  grid-row: 1 / 3;
  margin: 0;
}

/* Reserve widths for the labels used by each workflow, rather than sizing
   every generation control to the longest label in the application. */
.site-shell.workspace-open .workspace .topic-assistant-actions > button.credit-action {
  --generation-button-size: 18em;
}

.site-shell.workspace-open .workspace .copy-stage-actions > .action-with-cost > button.credit-action {
  --generation-button-size: 32em;
}

.site-shell.workspace-open .workspace .copy-stage-actions > .action-with-cost {
  width: 352px;
  max-width: 100%;
  flex: 0 0 352px;
}

.site-shell.workspace-open .workspace .copy-stage-actions > .action-with-cost > button.credit-action {
  width: 100%;
}

.site-shell.workspace-open .workspace .prompt-storyboard-actions > button.credit-action,
.site-shell.workspace-open .workspace .voice-toolbar-generate > button.credit-action {
  --generation-button-size: 26em;
}

/* This parent used to size itself from its percentage-width child, making
   every change between estimated and measured progress resize both. */
.site-shell.workspace-open .workspace .voice-stage .voice-toolbar-generate {
  width: 286px;
  max-width: 100%;
  flex: 0 0 286px;
  grid-template-columns: minmax(0, 1fr);
}

.site-shell.workspace-open .workspace .voice-stage .voice-toolbar-generate > button.credit-action {
  width: 100%;
}

.site-shell.workspace-open .workspace button.character-manager-batch {
  --generation-button-size: 28em;
}

/* The character-identification button has an unwrapped text node. Explicit
   icon and cost positions leave the first row for that anonymous grid item. */
.site-shell.workspace-open .workspace .character-reference-empty > header > button.credit-action {
  grid-template-columns: 16px minmax(0, 1fr);
  text-align: left;
}

.site-shell.workspace-open .workspace .character-reference-empty > header > button.credit-action > small {
  grid-column: 2;
}

/* The single-image action has only three short labels and four cost variants.
   Keep its compact row stable, including before the first quote arrives. */
.site-shell.workspace-open .workspace .scene-card-meta {
  flex-wrap: wrap;
  container-type: inline-size;
}

.site-shell.workspace-open .workspace .scene-output-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}

.site-shell.workspace-open .workspace .scene-output-heading strong,
.site-shell.workspace-open .workspace .storyboard-image-filters button {
  font-variant-numeric: lining-nums tabular-nums;
}

.site-shell.workspace-open .workspace .storyboard-image-filters button > small {
  display: inline-block;
  min-width: 3ch;
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
}

.site-shell.workspace-open .workspace .scene-card-meta > button.scene-image-action {
  display: inline-grid;
  grid-template-columns: 14px minmax(0, 1fr) 5em;
  align-items: center;
  gap: 6px;
  width: 15em;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  flex: 0 0 auto;
  padding: 5px 9px;
  contain: paint;
  white-space: normal !important;
}

.site-shell.workspace-open .workspace .scene-card-meta > button.scene-image-action > .action-label {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.45;
  white-space: normal !important;
}

.site-shell.workspace-open .workspace .scene-card-meta > button.scene-image-action > .scene-image-cost {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin-left: 0;
  padding-left: 6px;
  overflow-wrap: anywhere;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.45;
  text-align: center;
  white-space: normal !important;
}

@container (max-width: 180px) {
  .site-shell.workspace-open .workspace .scene-card-meta > button.scene-image-action {
    grid-template-columns: 14px minmax(0, 1fr);
    grid-template-rows: minmax(1.45em, auto) minmax(15px, auto);
    width: 100%;
  }

  .site-shell.workspace-open .workspace .scene-card-meta > button.scene-image-action > svg {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .site-shell.workspace-open .workspace .scene-card-meta > button.scene-image-action > .action-label {
    grid-column: 2;
    grid-row: 1;
  }

  .site-shell.workspace-open .workspace .scene-card-meta > button.scene-image-action > .scene-image-cost {
    grid-column: 2;
    grid-row: 2;
    padding-left: 0;
    border-left: 0;
    text-align: left;
  }
}

/* The dock removes the topic price node while busy. Reserve its row even
   when that node is absent, so the label and adjacent controls stay put. */
.site-shell.workspace-open .workspace button.workspace-primary-action {
  display: inline-grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 3px 7px;
  width: 22em;
  min-width: 0;
  flex: 0 1 22em;
}

.site-shell.workspace-open .workspace button.workspace-primary-action > svg {
  grid-column: 1;
  grid-row: 1;
  width: 17px;
  height: 17px;
  margin: 0;
}

.site-shell.workspace-open .workspace button.workspace-primary-action > span {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  min-width: 0;
  min-block-size: 2.8em;
  align-items: center;
  justify-content: center;
  overflow-wrap: anywhere;
  line-height: 1.4;
  white-space: normal;
}

.site-shell.workspace-open.workspace-stage--topic .workspace button.workspace-primary-action {
  grid-template-rows: minmax(2.8em, auto) minmax(20px, auto);
}

.site-shell.workspace-open .workspace button.workspace-primary-action > .workspace-action-cost {
  grid-column: 2;
  grid-row: 2;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: normal;
}

.site-shell.workspace-open .workspace .voice-generation-toolbar > button.generation-action {
  width: min(100%, 16em);
  min-height: 42px;
  flex: 0 1 16em;
}

/* Keep the progress fill, but stop sweeping/shimmering the button surface.
   The existing busy-icon animation is the only repeating loading motion. */
.site-shell.workspace-open .workspace button.generation-action::before,
.site-shell.workspace-open .workspace button.generation-action::after {
  animation: none !important;
}

.site-shell.workspace-open .workspace button.generation-action::before {
  transition: none !important;
}

.site-shell.workspace-open .workspace button.generation-action.is-indeterminate::before {
  opacity: 0;
}

.site-shell.workspace-open .workspace :is(button.credit-action, button.workspace-primary-action)::after,
.site-shell.workspace-open .workspace button.generation-action::after {
  display: none !important;
}

.site-shell.workspace-open .workspace :is(button.credit-action, button.generation-action, button.workspace-primary-action) > svg {
  transform-box: fill-box;
  transform-origin: center;
}

.site-shell.workspace-open .workspace :is(button.credit-action, button.generation-action, button.workspace-primary-action) > .action-direction-icon {
  animation: none !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .site-shell.workspace-open .workspace .scene-output-heading strong {
    min-height: 2.8em;
    line-height: 1.4;
  }

  .site-shell.workspace-open .workspace button.credit-action,
  .site-shell.workspace-open .workspace .prompt-storyboard-actions > button.credit-action {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .site-shell.workspace-open .workspace .copy-stage-actions > .action-with-cost {
    grid-column: 1 / -1;
    width: 100%;
    flex-basis: auto;
  }

  .site-shell.workspace-open .workspace .copy-stage-actions > button.credit-action {
    grid-column: 1 / -1;
  }

  .site-shell.workspace-open .workspace .character-manager-source-controls {
    flex-wrap: wrap;
  }

  .site-shell.workspace-open .workspace .voice-toolbar-generate > button.credit-action {
    flex: 0 0 auto;
  }

  .site-shell.workspace-open .workspace .voice-stage .voice-toolbar-generate {
    width: 100%;
    flex-basis: 100%;
  }

  .site-shell.workspace-open .workspace button.workspace-primary-action {
    width: 100%;
    min-width: 0;
  }

  .site-shell.workspace-open .workspace .workspace-action-controls {
    min-width: 0;
    max-width: 100%;
  }

  .site-shell.workspace-open .workspace .workspace-action-controls > .generation-cancel-action {
    grid-column: 1 / -1;
    width: auto;
    justify-self: end;
  }

  .site-shell.workspace-open .workspace .workspace-action-controls > button.workspace-primary-action {
    grid-column: 2;
    grid-row: 1;
  }
}