/* Compatibility for shared desktop detail galleries across all industries.
 * Keep the existing translucent pills, but avoid a backdrop filter per label
 * and action. The affected Chromium 122 browser still needs visual validation.
 */
html:not([data-mobile-workbench="true"])
  body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]
  #detail-page-latest-panel
  .detail-page-latest-frame:not(.is-draft):not(.is-running):not(.is-failed)
  :is(.detail-page-latest-unit-summary, .detail-preview-regenerate-button) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Thin, theme-aware frames for actual image results. Structural preview panels stay unframed. */
html:not([data-mobile-workbench="true"]) {
  --image-result-card-border: rgba(157, 167, 197, 0.58);
  --image-result-card-border-hover: rgba(111, 126, 171, 0.68);
}

html[data-theme="dark"]:not([data-mobile-workbench="true"]) {
  --image-result-card-border: rgba(104, 110, 124, 0.42);
  --image-result-card-border-hover: rgba(126, 136, 158, 0.58);
}

@media (min-width: 981px) {
  /* Shared recent-work cards: covers queued, generating, failed, and completed states. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    > .wrinkle-latest-panel
    > .wrinkle-latest-grid
    > .wrinkle-latest-card {
    box-sizing: border-box !important;
    border: 1px solid var(--image-result-card-border) !important;
  }

  /* Completed media uses the same 3:4 thumbnail frame as every other card state. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    > .wrinkle-latest-panel
    > .wrinkle-latest-grid
    > .wrinkle-latest-card:not(.wrinkle-running-card):not(.is-failed):not(.is-media-load-failed):has(
      .wrinkle-latest-thumb > img.is-loaded
    ) {
    align-self: start !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    > .wrinkle-latest-panel
    > .wrinkle-latest-grid
    > .wrinkle-latest-card:not(.wrinkle-running-card):not(.is-failed):not(.is-media-load-failed):has(
      .wrinkle-latest-thumb > img.is-loaded
    )
    :is(.wrinkle-latest-open, .wrinkle-latest-thumb) {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    > .wrinkle-latest-panel
    > .wrinkle-latest-grid
    > .wrinkle-latest-card:not(.wrinkle-running-card):not(.is-failed):not(.is-media-load-failed):has(
      .wrinkle-latest-thumb > img.is-loaded
    )
    .wrinkle-latest-thumb
    > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Loading and delivery-failure states keep the same fixed thumbnail geometry. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    > .wrinkle-latest-panel
    > .wrinkle-latest-grid
    > .wrinkle-latest-card:is(.is-media-loading, .is-media-load-failed) {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    cursor: default !important;
    background:
      radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.95), transparent 30%),
      linear-gradient(145deg, #f7f8fc, #edf1f8 48%, #f9fafc) !important;
  }

  /* Keep a stable frame until the image supplies real media. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    > .wrinkle-latest-panel
    > .wrinkle-latest-grid
    > .wrinkle-latest-card:is(.is-media-loading, .is-media-load-failed) {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }

  /* Detail-page outputs have their own renderer, but use the same 3:4 preview
   * contract. Draft configuration cards stay tall enough to remain editable. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]:not([data-pet-detail-generation-mode="plan"])
    #detail-page-latest-panel
    .detail-page-latest-list {
    display: flex !important;
    flex-flow: row wrap !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
  }

  /* Draft editors participate in the same wrapping row as generated cards.
   * Their inherited width:100% otherwise consumes the entire flex row. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]:not([data-pet-detail-generation-mode="plan"])
    #detail-page-latest-panel
    .detail-page-latest-frame.is-draft {
    flex: 0 1 320px !important;
    width: 100% !important;
    min-width: 280px !important;
    max-width: 320px !important;
    align-self: start !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]:not([data-pet-detail-generation-mode="plan"])
    #detail-page-latest-panel
    .detail-page-latest-frame:not(.is-draft) {
    align-self: start !important;
    display: block !important;
    flex: 0 1 320px !important;
    width: 100% !important;
    min-width: 280px !important;
    max-width: 320px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]:not([data-pet-detail-generation-mode="plan"])
    #detail-page-latest-panel
    .detail-page-latest-frame:not(.is-draft)
    > :is(.detail-page-latest-card, .detail-preview-progress-panel) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]:not([data-pet-detail-generation-mode="plan"])
    #detail-page-latest-panel
    .detail-page-latest-frame:not(.is-draft)
    .detail-page-latest-card
    :is(img, .work-image-empty) {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]:not([data-pet-detail-generation-mode="plan"])
    #detail-page-latest-panel
    .detail-page-latest-frame:not(.is-draft):is(.is-running, .is-failed)
    .detail-card-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    .wrinkle-latest-card:is(.is-media-loading, .is-media-load-failed)
    :is(.wrinkle-latest-open, .wrinkle-latest-thumb) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: default !important;
    background: transparent !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    .wrinkle-latest-card.is-media-loading
    .wrinkle-latest-state.is-image-loading {
    padding: 14px;
    color: #667085;
    background: transparent !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    .wrinkle-latest-card.is-media-loading
    .wrinkle-latest-state.is-image-loading
    .lucide {
    width: 28px;
    height: 28px;
    padding: 7px;
    border-radius: 999px;
    color: #8290ad;
    background: rgba(255, 255, 255, 0.76);
    animation: spin 1s linear infinite;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    .wrinkle-latest-card.is-media-loading
    .wrinkle-latest-state.is-image-loading
    strong {
    color: #667085;
    font-size: 12px;
    font-weight: 500;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    .wrinkle-latest-card.is-media-load-failed
    .wrinkle-latest-state.is-load-failed {
    padding: 14px;
    color: #2f3748;
    background: transparent !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    .wrinkle-latest-card.is-media-load-failed
    .wrinkle-latest-state.is-load-failed
    .lucide {
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 999px;
    color: #6f86bd;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 20px rgba(77, 96, 128, 0.08);
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    .wrinkle-latest-card.is-media-load-failed
    .wrinkle-latest-state.is-load-failed
    strong {
    color: #2f3748;
    font-size: 13px;
    font-weight: 500;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    .wrinkle-latest-card.is-media-load-failed
    .wrinkle-latest-state.is-load-failed
    small {
    color: #667085;
    font-size: 11px;
    font-weight: 500;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    #preview-canvas
    #detail-page-latest-panel
    > .wrinkle-latest-panel
    > .wrinkle-latest-grid
    > .wrinkle-latest-card:is(:hover, :focus-within) {
    border-color: var(--image-result-card-border-hover) !important;
  }

  /* Single-image tools get a frame only while generating or when real media is present. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode:is(
      [data-active-feature="repair"],
      [data-active-feature="outpaint"],
      [data-active-feature="view-change"],
      [data-active-feature="text-edit"],
      [data-active-feature="pattern-transfer"]
    )
    #preview-canvas.generating
    > #preview-frame,
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode:is(
      [data-active-feature="repair"],
      [data-active-feature="outpaint"],
      [data-active-feature="view-change"],
      [data-active-feature="text-edit"],
      [data-active-feature="pattern-transfer"]
    )
    #preview-frame:has(> #preview-image:not([hidden]):not([data-preview-kind="empty"])) {
    box-sizing: border-box !important;
    border: 1px solid var(--image-result-card-border) !important;
  }

  /* Local edit shows the image and mask only, without a full-width frame. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="local-edit"]
    #preview-canvas > #preview-frame {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* The PSD tool owns a separate result surface rather than the shared preview frame. */
  html:not([data-mobile-workbench="true"])
    body.image-to-psd-active
    .image-to-psd-preview-surface.has-image {
    box-sizing: border-box;
    border: 1px solid var(--image-result-card-border);
    border-radius: 10px;
  }
}

/* Detail toolbar: the count uses the same neutral pill as Clear Records.
 * Keep it a status span rather than introducing a nonfunctional button. */
html body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]
  #detail-page-latest-panel .detail-page-latest-toolbar > :is(span, button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(218, 223, 237, 0.96) !important;
  border-radius: 999px !important;
  color: #656d81 !important;
  background: #fff !important;
  font-size: var(--aotu-type-helper-size) !important;
  font-weight: var(--aotu-type-medium) !important;
  line-height: var(--aotu-type-helper-leading) !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]
  #detail-page-latest-panel .detail-page-latest-toolbar > :is(span, button) {
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #dce6f7 !important;
  background: #20242d !important;
}

@media (min-width: 1600px) {
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]:not([data-pet-detail-generation-mode="plan"])
    #detail-page-latest-panel
    .detail-page-latest-frame:not(.is-draft) {
    flex: 0 0 calc((100% - 60px) / 6) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}