/*
 * CMENG Button System
 * 只统一按钮的视觉等级和状态，不修改尺寸、位置与布局。
 */

:root {
  --button-primary: #5c56e8;
  --button-primary-hover: #4943cf;
  --button-primary-pressed: #3f3aad;
  --button-primary-soft: #efefff;
  --button-ink: #343641;
  --button-muted: #707481;
  --button-border: #dedfe8;
  --button-border-hover: #c5c2ef;
  --button-surface: #ffffff;
  --button-surface-soft: #f7f7fa;
  --button-danger: #bd4650;
  --button-danger-hover: #a93742;
  --button-danger-soft: #fff1f2;
  --button-shadow: 0 6px 18px rgba(35, 36, 54, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
  --button-shadow-hover: 0 10px 26px rgba(45, 42, 91, .13), inset 0 1px 0 rgba(255, 255, 255, .95);
  --button-shadow-primary: 0 10px 24px rgba(92, 86, 232, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
}

button,
.button,
.upload-button,
.asset-upload-button {
  -webkit-font-smoothing: antialiased;
  transition:
    color .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    opacity .16s ease,
    transform .16s ease;
}

button:disabled,
.button:disabled,
button[aria-disabled="true"],
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .52;
  box-shadow: none;
  transform: none;
}

/* 主操作：每个区域最重要的下一步 */
.button-primary,
.asset-upload-button,
.asset-preview-download,
.workflow-run-all,
.workflow-card-actions button:first-child,
.task-job-actions button:last-child {
  color: #fff;
  border-color: var(--button-primary);
  background: var(--button-primary);
  box-shadow: var(--button-shadow-primary);
  font-weight: 760;
}

.button-primary:hover:not(:disabled),
.asset-upload-button:hover,
.asset-preview-download:hover,
.workflow-run-all:hover:not(:disabled),
.workflow-card-actions button:first-child:hover:not(:disabled),
.task-job-actions button:last-child:hover:not(:disabled) {
  color: #fff;
  border-color: var(--button-primary-hover);
  background: var(--button-primary-hover);
  box-shadow: 0 13px 30px rgba(73, 67, 207, .3), inset 0 1px 0 rgba(255, 255, 255, .24);
  transform: translateY(-1px);
}

.button-primary:active:not(:disabled),
.asset-upload-button:active,
.asset-preview-download:active,
.workflow-run-all:active:not(:disabled),
.workflow-card-actions button:first-child:active:not(:disabled),
.task-job-actions button:last-child:active:not(:disabled) {
  border-color: var(--button-primary-pressed);
  background: var(--button-primary-pressed);
  box-shadow: 0 5px 14px rgba(63, 58, 173, .22), inset 0 1px 2px rgba(25, 23, 79, .18);
  transform: none;
}

.direct-generate b {
  color: #fff;
  background: var(--button-primary);
  box-shadow: var(--button-shadow-primary);
}

.direct-generate:hover:not(:disabled) b {
  background: var(--button-primary-hover);
  box-shadow: 0 13px 30px rgba(73, 67, 207, .3), inset 0 1px 0 rgba(255, 255, 255, .24);
  transform: translateY(-1px);
}

.direct-generate:active:not(:disabled) b {
  background: var(--button-primary-pressed);
  box-shadow: 0 5px 14px rgba(63, 58, 173, .22);
  transform: none;
}

.direct-generate.is-busy b,
.direct-generate:disabled b,
.workflow-run-all:disabled {
  color: #fff;
  background: #a8a9b5;
  box-shadow: none;
  opacity: .9;
  transform: none;
}

/* 次级操作：重要但不是当前唯一下一步 */
.button-secondary {
  color: #4540b4;
  border-color: #cfccf4;
  background: var(--button-primary-soft);
  box-shadow: 0 5px 16px rgba(92, 86, 232, .08), inset 0 1px 0 rgba(255, 255, 255, .82);
  font-weight: 720;
}

.button-secondary:hover:not(:disabled) {
  color: #fff;
  border-color: var(--button-primary);
  background: var(--button-primary);
  box-shadow: var(--button-shadow-primary);
  transform: translateY(-1px);
}

.mode-button {
  color: #fff;
  border-color: #292a34;
  background: #292a34;
  box-shadow: 0 7px 20px rgba(27, 28, 39, .15), inset 0 1px 0 rgba(255, 255, 255, .12);
  font-weight: 720;
}

.mode-button:hover:not(:disabled) {
  color: #fff;
  border-color: #3c3d49;
  background: #3c3d49;
  box-shadow: 0 10px 24px rgba(27, 28, 39, .2);
  transform: translateY(-1px);
}

/* 普通操作：保持安静，悬停时才强调 */
.button-ghost,
.task-history-button,
.new-generation-session,
.generation-session-entry > footer button,
.generation-session-entry > footer a,
.task-job-card > footer button,
.task-job-actions a,
.task-job-actions button,
.asset-detail-toolbar button,
.asset-detail-footer button,
.task-history-header button,
.confirm-choice-actions button,
.workflow-card-actions button,
.workflow-editor-toolbar > button,
.workflow-editor-toolbar > div button,
.workflow-asset-picker-card header button,
.workflow-zoom-controls button {
  color: var(--button-ink);
  border-color: var(--button-border);
  background: var(--button-surface);
  box-shadow: var(--button-shadow);
}

.button-ghost:hover:not(:disabled),
.task-history-button:hover:not(:disabled),
.new-generation-session:hover:not(:disabled),
.generation-session-entry > footer button:hover:not(:disabled),
.generation-session-entry > footer a:hover,
.task-job-card > footer button:hover:not(:disabled),
.task-job-actions a:hover,
.task-job-actions button:hover:not(:disabled),
.asset-detail-toolbar button:hover:not(:disabled),
.asset-detail-footer button:hover:not(:disabled),
.task-history-header button:hover:not(:disabled),
.confirm-choice-actions button:hover:not(:disabled),
.workflow-card-actions button:hover:not(:disabled),
.workflow-editor-toolbar > button:hover:not(:disabled),
.workflow-editor-toolbar > div button:hover:not(:disabled),
.workflow-asset-picker-card header button:hover:not(:disabled),
.workflow-zoom-controls button:hover:not(:disabled) {
  color: #403ab4;
  border-color: var(--button-border-hover);
  background: #f5f4ff;
  box-shadow: var(--button-shadow-hover);
  transform: translateY(-1px);
}

.button-ghost:active:not(:disabled),
.task-history-button:active:not(:disabled),
.new-generation-session:active:not(:disabled),
.generation-session-entry > footer button:active:not(:disabled),
.generation-session-entry > footer a:active,
.task-job-actions a:active,
.task-job-actions button:active:not(:disabled),
.asset-detail-toolbar button:active:not(:disabled),
.asset-detail-footer button:active:not(:disabled),
.confirm-choice-actions button:active:not(:disabled),
.workflow-card-actions button:active:not(:disabled),
.workflow-editor-toolbar > button:active:not(:disabled),
.workflow-editor-toolbar > div button:active:not(:disabled) {
  background: #ecebfa;
  box-shadow: inset 0 1px 3px rgba(50, 46, 111, .1);
  transform: none;
}

/* 参数、模型与筛选按钮 */
.creation-type-pill,
.tool-pill,
.tool-select,
.direct-audio,
.model-picker-trigger,
.image-spec-trigger,
.reference-trigger {
  color: #484b57;
  border-color: var(--button-border);
  background: #fafafd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.creation-type-pill:hover,
.tool-pill:hover,
.tool-select:hover,
.direct-audio:hover,
.model-picker-trigger:hover,
.image-spec-trigger:hover,
.reference-trigger:hover,
.model-picker.open .model-picker-trigger,
.image-spec-picker.open .image-spec-trigger,
.reference-picker.open .reference-trigger {
  color: #403ab4;
  border-color: var(--button-border-hover);
  background: #f3f2ff;
  box-shadow: 0 6px 18px rgba(92, 86, 232, .1);
}

.creation-type-menu button,
.model-menu-item,
.image-ratio-options button,
.image-spec-segments button,
.reference-menu button,
.generation-session-menu button,
.asset-filter-group button,
.asset-view-tabs button,
.inspiration-head button {
  box-shadow: none;
  transition: color .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.creation-type-menu button:hover,
.model-menu-item:hover,
.image-ratio-options button:hover,
.image-spec-segments button:hover,
.reference-menu button:hover,
.generation-session-menu button:hover,
.asset-filter-group button:hover,
.asset-view-tabs button:hover,
.inspiration-head button:hover {
  color: #403ab4;
  background: #f2f1ff;
}

.creation-type-menu button.selected,
.model-menu-item.selected,
.image-ratio-options button.selected,
.image-spec-segments button.selected,
.reference-menu button.selected {
  color: #403ab4;
  border-color: #cbc8f3;
  background: var(--button-primary-soft);
  box-shadow: inset 3px 0 0 var(--button-primary);
}

.asset-filter-group button.active,
.asset-view-tabs button,
.inspiration-head button.active {
  color: #403ab4;
  border-color: #cbc8f3;
  background: var(--button-primary-soft);
  box-shadow: inset 0 -2px 0 var(--button-primary);
}

/* 图标按钮：删除、关闭、缩放与画布工具 */
.icon-button,
.direct-reference button,
.direct-audio-reference button,
.generation-session-more,
.library-card-preview .asset-delete,
.asset-detail-close,
.workflow-editor-toolbar > button,
.workflow-node-rail > button,
.workflow-node-head button,
.workflow-zoom-controls button,
.workflow-log-panel header button {
  transition: color .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, opacity .14s ease, transform .14s ease;
}

.icon-button:hover:not(:disabled),
.direct-reference button:hover:not(:disabled),
.direct-audio-reference button:hover:not(:disabled),
.generation-session-more:hover:not(:disabled),
.asset-detail-close:hover:not(:disabled),
.workflow-editor-toolbar > button:hover:not(:disabled),
.workflow-node-head button:hover:not(:disabled),
.workflow-zoom-controls button:hover:not(:disabled) {
  color: #403ab4;
  border-color: #d0cdf4;
  background: #f1f0ff;
  box-shadow: 0 5px 14px rgba(92, 86, 232, .09);
}

.workflow-node-rail > button:hover,
.workflow-node-rail > button.active {
  color: #fff;
  background: var(--button-primary);
  box-shadow: 0 8px 20px rgba(92, 86, 232, .22);
}

/* 画布中的大入口和素材按钮 */
.workflow-template-row > button,
.workflow-asset-picker-grid > button {
  color: var(--button-ink);
  border-color: var(--button-border);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--button-shadow);
}

.workflow-template-row > button:hover,
.workflow-asset-picker-grid > button:hover {
  color: #403ab4;
  border-color: var(--button-border-hover);
  background: #fff;
  box-shadow: var(--button-shadow-hover);
  transform: translateY(-1px);
}

.workflow-node-menu button:hover,
.workflow-quick-node-menu > button:hover {
  color: #403ab4;
  background: #f2f1ff;
}

/* 防止容器的普通按钮规则盖住主操作 */
.asset-detail-footer .asset-preview-download,
.workflow-editor-toolbar .workflow-run-all,
.workflow-card-actions button:first-child,
.task-job-actions button:last-child:not(.danger) {
  color: #fff;
  border-color: var(--button-primary);
  background: var(--button-primary);
  box-shadow: var(--button-shadow-primary);
}

.asset-detail-footer .asset-preview-download:hover,
.workflow-editor-toolbar .workflow-run-all:hover:not(:disabled),
.workflow-card-actions button:first-child:hover:not(:disabled),
.task-job-actions button:last-child:not(.danger):hover:not(:disabled) {
  color: #fff;
  border-color: var(--button-primary-hover);
  background: var(--button-primary-hover);
  box-shadow: 0 13px 30px rgba(73, 67, 207, .3), inset 0 1px 0 rgba(255, 255, 255, .24);
  transform: translateY(-1px);
}

.asset-detail-footer .asset-preview-edit {
  color: #fff;
  border-color: #5d52e8;
  background: #6257ef;
  box-shadow: 0 9px 22px rgba(98, 87, 239, .2);
}

.asset-detail-footer .asset-preview-edit:hover:not(:disabled) {
  color: #fff;
  border-color: #4f45dc;
  background: #554ae5;
}

.asset-detail-toolbar .asset-preview-favorite {
  color: #8b6512;
  border-color: #ead9aa;
  background: #fffaf0;
}

.asset-detail-toolbar .asset-preview-favorite.is-favorite {
  color: #fff;
  border-color: #d79a1d;
  background: #d79a1d;
  box-shadow: 0 8px 20px rgba(215, 154, 29, .2);
}

/* 危险操作：只在最终确认按钮上使用实心红色 */
.generation-session-menu button.danger,
.generation-session-entry > footer button.danger,
.task-job-actions button.danger,
.icon-button.danger {
  color: var(--button-danger);
  border-color: #efd1d4;
  background: #fff9f9;
  box-shadow: none;
}

.generation-session-menu button.danger:hover,
.generation-session-entry > footer button.danger:hover,
.task-job-actions button.danger:hover,
.icon-button.danger:hover {
  color: var(--button-danger-hover);
  border-color: #e9bcc1;
  background: var(--button-danger-soft);
  box-shadow: 0 6px 16px rgba(189, 70, 80, .09);
}

.confirm-choice-actions #confirmChoiceYes {
  color: #fff;
  border-color: var(--button-danger);
  background: var(--button-danger);
  box-shadow: 0 9px 22px rgba(189, 70, 80, .22), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.confirm-choice-actions #confirmChoiceYes:hover:not(:disabled) {
  color: #fff;
  border-color: var(--button-danger-hover);
  background: var(--button-danger-hover);
  box-shadow: 0 12px 28px rgba(169, 55, 66, .27);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  button,
  .button,
  .upload-button,
  .asset-upload-button {
    transition-duration: .01ms !important;
  }
}