/*
 * Button hierarchy is deliberately loaded after the workbench theme rules.
 * The state classes describe affordance; disabled is reserved for a real
 * unavailable control, while a failed generation remains recoverable.
 */
.site-shell {
  --button-primary-bg: var(--ui-accent, var(--chrome-accent, var(--accent)));
  --button-primary-text: var(--ui-accent-ink, var(--signal-ink));
  --button-primary-border: var(--ui-accent, var(--chrome-accent, var(--accent)));
  --button-action-bg: color-mix(in srgb, var(--ui-accent, var(--chrome-accent, var(--accent))) 13%, var(--ui-surface-raised, var(--material-input, var(--surface))));
  --button-action-hover: color-mix(in srgb, var(--ui-accent, var(--chrome-accent, var(--accent))) 20%, var(--ui-surface-raised, var(--material-input, var(--surface))));
  --button-action-text: var(--ui-text, var(--text-primary));
  --button-action-border: color-mix(in srgb, var(--ui-accent, var(--chrome-accent, var(--accent))) 58%, var(--ui-edge, var(--studio-line)));
  --button-muted-bg: color-mix(in srgb, var(--ui-text, var(--text-primary)) 7%, var(--ui-surface, var(--material-canvas, var(--surface))));
  --button-muted-text: var(--ui-text-secondary, var(--text-secondary));
  --button-muted-border: color-mix(in srgb, var(--ui-edge, var(--studio-line)) 76%, var(--ui-surface, var(--material-canvas, var(--surface))));
  --button-danger: var(--ui-danger, var(--danger, #d96f78));
  --button-success: var(--ui-success, var(--success, #67c58a));
}

.site-shell :is(
  .primary-action,
  .project-primary-action,
  .workspace-primary-action,
  .nav-action,
  .generate-all-action,
  .workspace-generate-action,
  .creation-home-primary,
  .creation-home-nav-cta,
  .demo-action
):not(:disabled):not([aria-disabled='true']) {
  color: var(--button-primary-text) !important;
  background: var(--button-primary-bg) !important;
  border-color: var(--button-primary-border) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--button-primary-bg) 18%, transparent) !important;
  opacity: 1 !important;
}

.site-shell :is(
  .primary-action,
  .project-primary-action,
  .workspace-primary-action,
  .nav-action,
  .generate-all-action,
  .workspace-generate-action,
  .creation-home-primary,
  .creation-home-nav-cta,
  .demo-action
):not(:disabled):not([aria-disabled='true']):hover {
  background: color-mix(in srgb, var(--button-primary-bg) 86%, white) !important;
  border-color: var(--button-primary-bg) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--button-primary-bg) 24%, transparent) !important;
}

.site-shell.workspace-open .workspace :is(
  .secondary-action,
  .asset-upload,
  .workspace-step-button,
  .text-button,
  .icon-action,
  .mini-action,
  .task-inbox-button,
  .credits-button,
  .account-button,
  .ui-theme-trigger
):not(.generation-retry-action):not(.generation-recovery-action):not(:where(.danger-text-button, .danger-action)):not(:disabled):not([aria-disabled='true']) {
  color: var(--button-action-text) !important;
  background: var(--button-action-bg) !important;
  border-color: var(--button-action-border) !important;
  opacity: 1 !important;
}

.site-shell.workspace-open .workspace :is(
  .secondary-action,
  .asset-upload,
  .workspace-step-button,
  .text-button,
  .icon-action,
  .mini-action,
  .task-inbox-button,
  .credits-button,
  .account-button,
  .ui-theme-trigger
):not(.generation-retry-action):not(.generation-recovery-action):not(:where(.danger-text-button, .danger-action)):not(:disabled):not([aria-disabled='true']):hover {
  color: var(--ui-text, var(--text-primary)) !important;
  background: var(--button-action-hover) !important;
  border-color: var(--ui-accent, var(--chrome-accent, var(--accent))) !important;
}

/* Paid generation controls are actionable secondary CTAs. A failed state
   keeps the accent surface and adds a danger edge instead of looking disabled. */
.site-shell.workspace-open .workspace :is(
  .credit-action,
  .generation-action,
  .generation-retry-action,
  .generation-recovery-action
):not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']) {
  color: var(--button-action-text) !important;
  background: var(--button-action-bg) !important;
  border-color: var(--button-action-border) !important;
  opacity: 1 !important;
}

.site-shell.workspace-open .workspace :is(
  .credit-action,
  .generation-action,
  .generation-retry-action,
  .generation-recovery-action
):not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']):hover {
  background: var(--button-action-hover) !important;
  border-color: var(--ui-accent, var(--chrome-accent, var(--accent))) !important;
}

.site-shell.workspace-open .workspace :is(
  .generation-retry-action,
  .generation-recovery-action,
  .generation-action.is-error
):not(:disabled):not([aria-disabled='true']) {
  border-color: color-mix(in srgb, var(--ui-danger, var(--danger, #d96f78)) 68%, var(--ui-accent, var(--chrome-accent, var(--accent)))) !important;
  box-shadow: inset 3px 0 0 var(--ui-danger, var(--danger, #d96f78)), 0 4px 12px color-mix(in srgb, var(--ui-danger, var(--danger, #d96f78)) 10%, transparent) !important;
}

.site-shell.workspace-open .workspace :is(
  .generation-retry-action,
  .generation-recovery-action,
  .generation-action.is-error
):not(:disabled):not([aria-disabled='true']):hover {
  background: color-mix(in srgb, var(--button-danger) 10%, var(--button-action-hover)) !important;
  border-color: var(--ui-danger, var(--danger, #d96f78)) !important;
}

.site-shell.workspace-open .workspace :is(
  .generation-action.is-running,
  .generation-action[aria-busy='true'],
  .generation-retry-action[aria-busy='true'],
  .generation-recovery-action[aria-busy='true']
) {
  color: var(--button-action-text) !important;
  background: color-mix(in srgb, var(--ui-accent, var(--chrome-accent, var(--accent))) 18%, var(--ui-surface-raised, var(--material-input, var(--surface)))) !important;
  border-color: color-mix(in srgb, var(--ui-accent, var(--chrome-accent, var(--accent))) 78%, var(--ui-edge, var(--studio-line))) !important;
  opacity: 1 !important;
  cursor: progress !important;
}

.site-shell.workspace-open .workspace :is(
  .generation-action.is-complete,
  .generation-action.is-complete[aria-busy='false']
) {
  border-color: color-mix(in srgb, var(--button-success) 64%, var(--ui-edge, var(--studio-line))) !important;
  box-shadow: inset 3px 0 0 var(--button-success) !important;
}

/* Only a real disabled state gets the neutral layer. Running generation
   buttons stay vivid even when the native button is disabled for protection. */
.site-shell :is(button, .asset-upload)[disabled]:not([aria-busy='true']),
.site-shell :is(button, .asset-upload)[aria-disabled='true']:not([aria-busy='true']) {
  color: var(--button-muted-text) !important;
  background: var(--button-muted-bg) !important;
  border-color: var(--button-muted-border) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  filter: none !important;
}

.site-shell.workspace-open .workspace :is(
  .generation-action.is-running,
  .generation-action[aria-busy='true']
):disabled {
  color: var(--button-action-text) !important;
  background: color-mix(in srgb, var(--ui-accent, var(--chrome-accent, var(--accent))) 18%, var(--ui-surface-raised, var(--material-input, var(--surface)))) !important;
  border-color: color-mix(in srgb, var(--ui-accent, var(--chrome-accent, var(--accent))) 78%, var(--ui-edge, var(--studio-line))) !important;
  opacity: 1 !important;
  cursor: progress !important;
}

.site-shell :is(button, .asset-upload):focus-visible {
  outline: 2px solid var(--ui-accent, var(--chrome-accent, var(--accent))) !important;
  outline-offset: 2px;
}

.site-shell :is(.primary-action, .secondary-action, .generation-action, .generation-retry-action, .generation-recovery-action, .workspace-primary-action) {
  min-height: 36px;
  border-radius: var(--studio-radius-sm, 6px);
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .site-shell.workspace-open .workspace :is(
    .primary-action,
    .secondary-action,
    .credit-action,
    .generation-action,
    .generation-retry-action,
    .generation-recovery-action,
    .workspace-primary-action
  ) {
    max-width: 100%;
    white-space: normal;
  }
}

/* Keep recoverable failures visibly distinct from an ordinary actionable
   generation button even when older generation rules are present. */
.site-shell.workspace-open .workspace button.generation-action.is-error:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']),
.site-shell.workspace-open .workspace button.generation-retry-action:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']),
.site-shell.workspace-open .workspace button.generation-recovery-action:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']),
.site-shell.workspace-open .workspace .stage-status-strip:is(.failed, .paused) .stage-status-actions > button.secondary-action:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']),
.site-shell.workspace-open .workspace .task-failure > button.secondary-action:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']),
.site-shell.workspace-open .workspace .task-list article:is(.failed, .paused) > button.mini-action:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']) {
  color: var(--button-action-text) !important;
  background: var(--button-action-bg) !important;
  border-color: var(--button-danger) !important;
  box-shadow: inset 3px 0 0 var(--button-danger), 0 4px 12px color-mix(in srgb, var(--button-danger) 12%, transparent) !important;
  opacity: 1 !important;
}

.site-shell.workspace-open .workspace button.generation-action.is-error:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']):hover,
.site-shell.workspace-open .workspace button.generation-retry-action:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']):hover,
.site-shell.workspace-open .workspace button.generation-recovery-action:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']):hover,
.site-shell.workspace-open .workspace .stage-status-strip:is(.failed, .paused) .stage-status-actions > button.secondary-action:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']):hover,
.site-shell.workspace-open .workspace .task-failure > button.secondary-action:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']):hover,
.site-shell.workspace-open .workspace .task-list article:is(.failed, .paused) > button.mini-action:not(.primary-action):not(.workspace-primary-action):not(:disabled):not([aria-disabled='true']):hover {
  color: var(--button-action-text) !important;
  background: color-mix(in srgb, var(--button-danger) 10%, var(--button-action-hover)) !important;
  border-color: var(--button-danger) !important;
}

.site-shell.workspace-open .workspace :is(button, .asset-upload)[aria-busy='true'] {
  opacity: 1 !important;
  cursor: progress !important;
  filter: none !important;
}