/*
 * Yuanjing UI foundation
 * Presentation-only convergence layer. Keep workflow state and event behavior
 * in their owning modules; this file owns shared feel, focus and motion.
 */

html {
  color-scheme: light;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  background: var(--yj-surface-page);
  color: var(--yj-text-body);
}

:where(button, input, select, textarea, [role="button"], [tabindex]) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, [role="button"], a, input, select, textarea):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

:where(button, [role="button"]):not(:disabled):not([aria-disabled="true"]) {
  transition:
    transform var(--motion-instant) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
  touch-action: manipulation;
}

:where(button, [role="button"]):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(0.985);
}

:where(button, input, select, textarea):disabled,
:where([role="button"][aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: var(--control-disabled-opacity);
}

:where(input, select, textarea) {
  transition:
    color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

:where(input, select, textarea):not(:disabled):hover {
  border-color: var(--control-border-hover);
}

:where(input, textarea)::placeholder {
  color: var(--yj-text-muted);
  opacity: 0.78;
}

:where(.yj-btn, .generate-btn, .toolbar-btn, .key-btn, .vip-btn) {
  min-height: var(--yj-control-height-md);
  border-radius: var(--yj-radius-sm);
  font-weight: 650;
  letter-spacing: -0.005em;
}

:where(.card, .form-card, .result-card, .modal-content, .dialog-card) {
  border-color: var(--yj-border-default);
  box-shadow: var(--yj-shadow-1);
}

:where(.top-bar, .sidebar, .app-sidebar) {
  transition:
    width var(--motion-base) var(--ease-emphasized),
    transform var(--motion-base) var(--ease-emphasized),
    background-color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

:where(.modal, .dialog, .drawer, [role="dialog"]) {
  overscroll-behavior: contain;
}

:where(.toast, .notice-toast, .yj-toast) {
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--yj-shadow-2);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

:where([aria-busy="true"], .is-loading, .loading) {
  cursor: progress;
}

/* Result-side feature routing is a primary navigation control. */
#resultPanel > .commerce-mode-switch--result {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 42px !important;
  margin-bottom: 10px !important;
  padding: 4px !important;
  border: 1px solid var(--yj-border-default) !important;
  border-radius: 12px !important;
  background: #f1f5f9 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#resultPanel > .commerce-mode-switch--result > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#resultPanel > .commerce-mode-switch--result > button:hover,
#resultPanel > .commerce-mode-switch--result > button:focus-visible {
  border-color: #d8b4fe !important;
  background: #ffffff !important;
  color: #6d28d9 !important;
}

#resultPanel > .commerce-mode-switch--result > button.is-active {
  border-color: #7c3aed !important;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.18) !important;
}

/* Free-image creation: clearer hierarchy without changing generation behavior. */
body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-step-card {
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-step-card--prompt,
body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-step-card--model {
  border-color: #d9d3f7 !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-channel-section {
  padding: 7px 9px !important;
  background: #f8fafc !important;
  border-style: dashed !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-channel-section .step-title-row {
  margin-bottom: 5px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-channel-section .section-step-label {
  color: #475569 !important;
  font-weight: 600 !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-channel-section .step-leader,
body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-channel-section .required-star {
  display: none !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-channel-section .image-channel-row {
  grid-template-columns: repeat(2, minmax(0, 112px)) !important;
  justify-content: start !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-setting-select:disabled {
  color: #64748b !important;
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-resolution-section:has(.gpt-setting-select:disabled)
  .gpt-subfield-title::after {
  content: " · 当前模型自动设置";
  color: #94a3b8;
  font-size: 10px;
  font-weight: 500;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-gen-cost-hint,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-gen-cost-hint {
  display: block !important;
  min-height: 0 !important;
  margin: 6px 0 0 !important;
  padding: 6px 10px !important;
  border: 1px solid #ddd6fe !important;
  border-radius: 9px !important;
  background: #faf8ff !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Pseudo label stacked on live textContent and caused illegible flicker. */
body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-gen-cost-hint::before,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-gen-cost-hint::before {
  content: none !important;
  display: none !important;
}

/* Desktop dock owns the cost line; keep in-form hint from painting under the dock. */
body.has-desktop-generate-dock[data-app-feature="gpt-image"] #gpt-image-panel .gpt-gen-cost-hint,
body.has-desktop-generate-dock[data-app-feature="nano-banana"] #nano-banana-panel .gpt-gen-cost-hint,
body.has-desktop-generate-dock #gptGenCostHint,
body.has-desktop-generate-dock #nanoGenCostHint {
  display: none !important;
}

/* Empty result panel: keep recovery/history available, remove dead toolbar noise. */
body[data-app-feature="gpt-image"] #resultPanel.result-panel--case-only > #resultToolbar {
  min-height: 40px !important;
  height: 40px !important;
  padding-block: 4px 7px !important;
  margin-bottom: 4px !important;
  border-bottom-color: #eef2f7 !important;
}

body[data-app-feature="gpt-image"] #resultPanel.result-panel--case-only
  :is(#batchProcessBtn, #downloadAllBtn, #clearResultsBtn) {
  display: none !important;
}

body[data-app-feature="gpt-image"] #resultPanel.result-panel--case-only #generationHistoryBtn {
  min-height: 30px !important;
  height: 30px !important;
  padding-inline: 12px !important;
  border-color: #ddd6fe !important;
  background: #faf8ff !important;
  color: #6d28d9 !important;
  font-weight: 650 !important;
}

body[data-app-feature="gpt-image"] #resultPanel.result-panel--case-only .result-retention-notice {
  margin-left: auto !important;
}

body[data-app-feature="gpt-image"] #resultPanel.result-panel--case-only > .result-panel__title-row {
  margin-bottom: 6px !important;
}

#resultPanel.result-panel--case-only #resultGrid.case-wall-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 12px !important;
  height: auto !important;
  column-width: auto !important;
}

#resultPanel.result-panel--case-only #resultGrid.case-wall-grid > * {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  break-inside: avoid !important;
}

body[data-app-feature="gpt-image"] #resultPanel.result-panel--has-results > #resultToolbar {
  opacity: 1 !important;
}

/* Result cards: persistent actions docked at the top so they don't cover bottom copy. */
#resultPanel .result-card:not(.result-fail) .result-card-actions {
  position: absolute !important;
  inset: 6px 6px auto 6px !important;
  z-index: 14 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 32px !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
  opacity: 0.92 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

#resultPanel .result-card:not(.result-fail):hover .result-card-actions,
#resultPanel .result-card:not(.result-fail):focus-within .result-card-actions {
  opacity: 1 !important;
}

#resultPanel .result-card-actions .result-card-action-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 5px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #475569 !important;
  box-shadow: none !important;
  /* Hide button textContent; label comes from ::before[data-label] only. */
  font-size: 0 !important;
  line-height: 0 !important;
}

#resultPanel .result-card-actions .result-card-action-btn::before {
  overflow: hidden;
  font-size: 12px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#resultPanel .result-card-actions .result-card-action-btn[data-card-action="download"] {
  border-color: #7c3aed !important;
  background: #7c3aed !important;
  color: #ffffff !important;
}

#resultPanel .result-card-actions .result-card-action-btn[data-card-action="download"]:hover {
  background: #6d28d9 !important;
}

#resultPanel .result-card-actions .result-card-action-btn[data-card-action="download"][aria-busy="true"],
#resultPanel .result-card-actions .result-card-action-btn[data-card-action="download"].yj-btn-busy {
  background: #5b21b6 !important;
  border-color: #5b21b6 !important;
  color: #ffffff !important;
}

#resultPanel .result-card-actions .result-card-action-btn[data-card-action="download"][data-yj-download-state="done"] {
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

#resultPanel .result-card-actions .result-card-action-btn:is(
    [data-card-action="local-refine"],
    [data-card-action="reference"],
    [data-card-action="regenerate"]
  ) {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

#resultPanel .result-card-actions .result-card-action-btn[data-card-action="delete"] {
  border-color: transparent !important;
  background: transparent !important;
  color: #dc2626 !important;
}

#resultPanel .result-card-actions .result-card-action-btn[data-card-action="delete"]:hover {
  background: #fff1f2 !important;
  border-color: #fecaca !important;
}

/* Failure cards expose one clear recovery route and keep fallbacks secondary. */
#resultPanel .result-card.result-fail {
  gap: 8px !important;
  padding: 18px 16px !important;
  border-radius: 12px !important;
}

#resultPanel .result-card.result-fail .fail-recover {
  width: min(100%, 280px) !important;
  margin-top: 4px !important;
}

#resultPanel .result-card.result-fail :is(.skeleton-retry-btn, .fail-recover-btn) {
  width: 100% !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

#resultPanel .result-card :is(
    .img-error-retry-btn,
    .img-error-recover-btn,
    .img-error-match-btn,
    .img-error-history-btn,
    .img-error-remove-btn
  ) {
  min-height: 34px !important;
  border-radius: 8px !important;
}

/* Keep channel switching secondary to the always-visible single-image retry. */
#resultPanel .result-card.result-fail .skeleton-retry-btn--secondary {
  background: #fff !important;
  color: #475569 !important;
  border: 1px solid #d8deea !important;
  box-shadow: none !important;
}

#resultPanel .result-card.result-fail .fail-retry-cost {
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

/* Upload states stay readable and actionable on compact thumbnails. */
body[data-app-feature="gpt-image"] #gpt-image-panel .upload-status-badge {
  max-width: calc(100% - 10px) !important;
  min-width: 0 !important;
  padding: 5px 7px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .upload-status-badge.uploading {
  min-width: min(92px, calc(100% - 10px)) !important;
  background: rgba(109, 40, 217, 0.92) !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .upload-status-badge.error.upload-retry-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  min-height: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: rgba(220, 38, 38, 0.94) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 4px 12px rgba(127, 29, 29, 0.2) !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel
  .upload-status-badge.error.upload-retry-control span:not(.yj-emoji) {
  display: inline !important;
  color: inherit !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel
  .upload-status-badge.error.upload-retry-control:hover {
  background: #b91c1c !important;
  transform: translateY(-1px);
}

body[data-app-feature="gpt-image"] #gpt-image-panel
  .upload-status-badge.error.upload-retry-control:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .uploaded-item.upload-error {
  border-color: #fca5a5 !important;
  background: #fff7f7 !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .uploaded-item.uploading {
  border-color: #c4b5fd !important;
}

/* Commerce uploads keep a compact success acknowledgement after progress ends. */
body[data-app-feature="main-image"] #panelStandard:not(.mode-matting) #uploadZone .upload-complete-badge,
body[data-app-feature="detail-page"] #panelStandard:not(.mode-matting) #uploadZone .upload-complete-badge {
  top: 4px !important;
  left: 4px !important;
  right: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 8px) !important;
  padding: 2px 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 5px !important;
  background: rgba(5, 150, 105, 0.92) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(6, 95, 70, 0.18) !important;
}

/* Detail-page screens are portrait deliverables; show the full composition in the wall. */
body[data-app-feature="detail-page"] #resultPanel #resultGrid .result-card:not(.result-fail) {
  aspect-ratio: 2 / 3 !important;
  max-width: none !important;
}

body[data-app-feature="detail-page"] #resultPanel #resultGrid .result-card:not(.result-fail) .result-card-media {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}

body[data-app-feature="detail-page"] #resultPanel #resultGrid .result-card:not(.result-fail) .result-img {
  object-fit: contain !important;
  transform: none !important;
}

#detailPageScreenMenu {
  max-height: min(56vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 720px) {
  body[data-app-feature="detail-page"] #resultToolbar:not(.batch-open) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body[data-app-feature="detail-page"] #resultToolbar:not(.batch-open) .result-toolbar__actions {
    flex: 0 0 max-content !important;
    width: max-content !important;
  }
}

/* 2026-07 transaction UX: keep the result surface focused and compact. */
#resultPanel > .commerce-mode-switch--result[hidden] {
  display: none !important;
}

#resultPanel .result-panel__scope {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

#resultPanel .result-panel__scope > span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f3e8ff;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 750;
}

#resultPanel .result-retention-notice {
  width: auto;
  min-width: 0;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
}

#resultPanel .result-card-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 32px !important;
}

#resultPanel .result-card-more {
  position: relative;
  min-width: 0;
  height: 32px;
}

#resultPanel .result-card-actions.result-card-actions--two-rows > .result-card-action-btn[data-card-action="local-refine"] {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
}

#resultPanel .result-card-actions.result-card-actions--two-rows > .result-card-action-btn[data-card-action="download"] {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

#resultPanel .result-card-more > [data-result-more-toggle],
#resultPanel .result-card-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

#resultPanel .result-card-more > summary::-webkit-details-marker {
  display: none;
}

#resultPanel .result-card-more__menu,
body > .result-card-more__menu--portal {
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 80;
  display: none;
  width: 132px;
  gap: 4px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.2);
}

#resultPanel .result-card-more.is-open .result-card-more__menu,
#resultPanel .result-card-more[open] .result-card-more__menu {
  display: grid;
}

body > .result-card-more__menu--portal {
  display: grid;
  z-index: 10000;
}

body > .result-card-more__menu--portal .result-card-action-btn {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  cursor: pointer;
}

body > .result-card-more__menu--portal .result-card-action-btn::before,
body > .result-card-more__menu--portal .result-card-action-btn::after {
  content: none !important;
}

#resultPanel .result-card.result-card--more-open {
  overflow: visible !important;
  z-index: 50;
}

#resultPanel .result-card-more__menu .result-card-action-btn {
  height: 34px !important;
  min-height: 34px !important;
  justify-content: flex-start !important;
  padding-inline: 10px !important;
}

@media (min-width: 1024px) {
  body[data-generation-maintenance="partial"],
  body[data-generation-maintenance="on"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-generation-maintenance="partial"] > .page-container.app-container,
  body[data-generation-maintenance="on"] > .page-container.app-container {
    flex: 1 1 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack {
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack > .sidebar-nav {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .page-container.app-container > .sidebar.sidebar--stack > .sidebar-wallet {
    flex: 0 0 auto !important;
  }
}

:where(#mainImageScreenSection, #detailPageScreenSection) .main-image-screen-trigger,
:where(#mainImageScreenSection, #detailPageScreenSection) .main-image-screen-status {
  box-sizing: border-box;
  width: 100%;
}

/* Long-running generation remains explicit when the connection has dropped. */
#resultPanel .result-panel-loading-state.is-recovering {
  border: 1px solid #fde68a !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, #fffbeb, #ffffff 76%) !important;
}

#resultPanel .result-panel-loading-state.is-recovering .result-panel-loading-state__line {
  color: #92400e !important;
}

#resultPanel .result-panel-loading-state.is-recovering .result-panel-loading-state__sub {
  color: #78716c !important;
  white-space: normal !important;
}

#resultPanel .result-panel-loading-state.is-recovering .result-panel-loading-state__bar span {
  background: linear-gradient(90deg, #f59e0b, #8b5cf6) !important;
}

#resultPanel .result-panel-loading-state[data-loading-stage="return"]
  .result-panel-loading-state__steps [data-loading-stage="return"] {
  color: #0f766e !important;
}

@media (hover: hover) {
  #resultPanel .result-card:not(.result-fail) .result-card-actions {
    opacity: 0 !important;
    visibility: visible !important;
    transform: translateY(-4px) !important;
    pointer-events: none !important;
  }

  #resultPanel .result-card:not(.result-fail):hover .result-card-actions,
  #resultPanel .result-card:not(.result-fail):focus-within .result-card-actions,
  #resultPanel .result-card:not(.result-fail):has([data-card-action="download"][aria-busy="true"]) .result-card-actions,
  #resultPanel .result-card:not(.result-fail):has([data-card-action="download"][data-yj-download-state="done"]) .result-card-actions {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 720px) {
  #resultPanel > .commerce-mode-switch--result {
    display: flex !important;
    min-height: 42px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
  }

  #resultPanel > .commerce-mode-switch--result > button {
    flex: 0 0 auto !important;
    min-width: 72px !important;
    height: 34px !important;
    min-height: 34px !important;
    scroll-snap-align: start;
  }

  body[data-app-feature="gpt-image"] .feature-path-guide {
    gap: 2px !important;
    padding-inline: 7px !important;
  }

  body[data-app-feature="gpt-image"] .feature-path-guide__step {
    min-width: 0 !important;
    gap: 2px !important;
  }

  body[data-app-feature="gpt-image"] .feature-path-guide__dot {
    width: 16px !important;
    height: 16px !important;
  }

  body[data-app-feature="gpt-image"] .feature-path-guide__label {
    font-size: 9px !important;
  }

  body[data-app-feature="gpt-image"] .feature-path-guide__connector {
    min-width: 4px !important;
    max-width: 8px !important;
    margin-inline: 1px !important;
    flex: 1 1 6px !important;
  }

  body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-btn {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 6px !important;
    row-gap: 1px !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 6px 8px !important;
  }

  body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-btn .model-logo {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
  }

  body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-btn .model-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-btn .model-cost {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    width: auto !important;
    text-align: left !important;
    font-size: 10px !important;
  }

  body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-channel-section .step-inline-hint {
    max-width: 64% !important;
    white-space: normal !important;
    text-align: right !important;
    line-height: 1.25 !important;
  }

  body[data-app-feature="gpt-image"] #resultPanel.result-panel--case-only {
    padding-top: 14px !important;
  }

  #resultPanel.result-panel--case-only #resultGrid.case-wall-grid {
    gap: 9px !important;
  }

  #resultPanel .result-card:not(.result-fail) .result-card-actions {
    inset: 5px 5px auto 5px !important;
    grid-auto-rows: 36px !important;
    padding: 4px !important;
  }

  #resultPanel .result-card-actions .result-card-action-btn {
    height: 36px !important;
    min-height: 36px !important;
  }

  #resultPanel .result-panel-loading-state {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "steps"
      "bar"
      "line"
      "sub" !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  #resultPanel .result-panel-loading-state__steps {
    justify-content: space-between !important;
  }

  #resultPanel .result-panel-loading-state__line,
  #resultPanel .result-panel-loading-state__sub {
    white-space: normal !important;
  }
}

@media (hover: none) {
  :where(button, [role="button"], a) {
    -webkit-user-select: none;
    user-select: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* Opt-in media feedback: each surface keeps its own requests and recovery. */
html body .yj-image-feedback > .yj-image-feedback__veil {
  position: absolute !important;
  inset: 0 !important;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  color: #667085;
  background: #eef1f6;
  font: 400 12px/1.5 system-ui, sans-serif;
  text-align: center;
}
html body .yj-image-feedback > .yj-image-feedback__veil[hidden] { display: none; }
html body .yj-image-feedback[data-image-feedback="loading"] > .yj-image-feedback__veil { animation: yj-image-feedback-breathe 1.8s ease-in-out infinite; }
html body .yj-image-feedback:is([data-image-feedback="loading"], [data-image-feedback="failed"]) img { visibility: hidden; }
.history-detail-image-preview { display: block; position: relative; }
.history-detail-image-preview:is([data-image-feedback="loading"], [data-image-feedback="failed"]) { min-height: 180px; }
.ops-canvas-image-lightbox__media { position: relative; min-width: min(70vw, 320px); }
.ops-canvas-image-lightbox__media:is([data-image-feedback="loading"], [data-image-feedback="failed"]) { min-height: min(240px, 55vh); }
html body .ops-canvas-card.yj-image-feedback:is([data-image-feedback="loading"], [data-image-feedback="failed"]) { aspect-ratio: 1; min-height: 120px; }
@keyframes yj-image-feedback-breathe { 0%, 100% { background-color: #f0f2f7; } 50% { background-color: #e1e7f0; } }
@media (prefers-reduced-motion: reduce) {
  html body .yj-image-feedback[data-image-feedback="loading"] > .yj-image-feedback__veil { animation: none !important; }
}