/*
 * Canonical desktop workbench shell geometry.
 *
 * The shared settings rail owns its outer width here. Feature styles may
 * arrange controls inside the rail or change the right-hand workspace, but
 * they must not redefine the task panel's first grid track.
 *
 * `!important` is transitional: legacy workstation rules still use it. The
 * focused contract tests keep this file last in the cascade until those rules
 * are migrated away.
 */

html:not([data-mobile-workbench="true"]) {
  --workbench-settings-rail-width: 500px;
  --workbench-column-gap: 28px;
  --workbench-settings-scrollport-compensation: 6px;
  --workbench-image-prompt-height: 150px;
  --workbench-prompt-action-right-inset: 12px;
  --workbench-prompt-action-bottom-inset: 4px;
  --workbench-prompt-action-footer-space: 8px;
  --workbench-primary-action-height: 56px;
}

/* The SPA reuses #settings-card across image tools. Borderless tools and the
 * refresh bootstrap can leave a transient currentColor surface, so animating
 * border/background into text-edit or colors briefly paints a dark frame.
 * Keep interaction motion, but commit structural surface colors in the same
 * frame as the feature switch. */
body.feature-focus-mode.workstation-feature-mode[data-active-feature="text-edit"]
  #settings-card,
body.feature-focus-mode.workstation-feature-mode[data-active-feature="colors"]
  #settings-card {
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.14s,
    opacity 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Desktop entry stays desktop at every window width; mobile is selector-scoped. */
@media all {
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]:not([data-active-feature="video-generate"]):not([data-active-feature="video-inspiration"]):not([data-active-feature="video-smart-create"]):not([data-active-feature="video-analysis"]):not([data-active-feature="video-remix"])
    #task-panel.task-panel {
    grid-template-columns:
      var(--workbench-settings-rail-width)
      minmax(0, 1fr) !important;
    column-gap: var(--workbench-column-gap) !important;
  }

  /* Every standard desktop image workbench uses the same primary generation
   * action height. Keep this late in the cascade so compact/detail feature
   * styles cannot silently compress one route's CTA. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]:not(.video-workspace-mode):not([data-active-feature^="video-"])
    #task-panel
    .settings-bottom-area
    #generate.create-button.full {
    box-sizing: border-box !important;
    height: var(--workbench-primary-action-height) !important;
    min-height: var(--workbench-primary-action-height) !important;
    max-height: var(--workbench-primary-action-height) !important;
  }

  /* Keep standard image-setting surfaces aligned with the upload surface.
   * Chromium reserves the native scrollbar plus its stable gutter inside the
   * scroll port. Compensate that reserved strip outside the settings surface
   * so cards and option grids keep the full upload-surface width. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]:not(.video-workspace-mode):not([data-active-feature^="video-"]):not([data-active-feature="detail-page"]):not([data-active-feature="image-to-psd"])
    .settings-scroll-area:has(> #settings-card) {
    justify-self: start !important;
    width: calc(100% + var(--workbench-settings-scrollport-compensation)) !important;
    max-width: calc(100% + var(--workbench-settings-scrollport-compensation)) !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* These shared image tools render #settings-card as a transparent structural
   * wrapper. Legacy inline padding therefore narrows every visible child even
   * though the wrapper itself already matches the upload surface. Remove only
   * that horizontal inset; keep each feature's vertical spacing and the real
   * padding inside framed option groups. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode:is(
      [data-active-feature="outpaint"],
      [data-active-feature="view-change"],
      [data-active-feature="text-edit"],
      [data-active-feature="colors"],
      [data-active-feature="buyer-try-on"],
      [data-active-feature="set-generate"],
      [data-active-feature="pattern-transfer"]
    )
    #task-panel
    .settings-scroll-area
    > #settings-card.settings-card {
    padding-inline: 0 !important;
  }

  /* Pattern transfer's prompt shell is also transparent. Its textarea should
   * share the upload-card edges without losing the existing vertical inset. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="pattern-transfer"]
    #task-panel
    .settings-scroll-area
    > .extra-prompt-box {
    padding-inline: 0 !important;
  }

  /* Ordinary image tools share the local-edit prompt geometry. Keep authoring
   * canvases and structured/read-only editors on their dedicated sizing rules. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]:not(.video-workspace-mode):not([data-active-feature^="video-"]):not([data-active-feature="free-generate"]):not([data-active-feature="detail-page"]):not([data-active-feature="image-to-psd"]):not([data-active-feature="reverse-prompt"]):not([data-active-feature="text-edit"])
    #task-panel
    .settings-column
    .extra-prompt-box
    > #extra-prompt {
    height: var(--workbench-image-prompt-height) !important;
    min-height: var(--workbench-image-prompt-height) !important;
    max-height: var(--workbench-image-prompt-height) !important;
  }

  /* Prompt actions are absolutely positioned against .extra-prompt-box, while
   * the textarea leaves a feature-owned footer below it. Normalize the visible
   * inset from the textarea edge without changing the field, button, or mobile
   * layouts. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode:is([data-active-feature="prompt-edit"], [data-active-feature="background"], [data-active-feature="flat-lay"], [data-active-feature="colors"], [data-active-feature="try-on"], [data-active-feature="clothes-on-model"], [data-active-feature="outpaint"], [data-active-feature="watermark-remove"], [data-active-feature="background-remove"], [data-active-feature="poster-design"], [data-active-feature="live-sticker"], [data-active-feature="pose-change"], [data-active-feature="outfit-recommend"])
    #task-panel
    .extra-prompt-box
    #prompt-optimize-button {
    right: var(--workbench-prompt-action-right-inset) !important;
    bottom: calc(
      var(--workbench-prompt-action-bottom-inset) +
        var(--workbench-prompt-action-footer-space)
    ) !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="flat-lay"]
    #task-panel
    .extra-prompt-box {
    --workbench-prompt-action-footer-space: 12px;
  }

  /* Text editing has two secondary OCR actions beside the section heading.
   * Keep them compact and text-only on desktop while leaving the mobile tap
   * targets, icons and every other feature untouched. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="text-edit"]
    .text-edit-head-actions {
    gap: 5px !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="text-edit"]
    .text-edit-head-actions
    > :is(.text-edit-recognize-button, .text-edit-delete-all-button) {
    box-sizing: border-box !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 12px !important;
    gap: 0 !important;
    font-size: 12px !important;
    font-weight: var(--aotu-type-medium, 500) !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="text-edit"]
    .text-edit-recognize-button {
    min-width: 80px !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="text-edit"]
    .text-edit-head-actions
    > :is(.text-edit-recognize-button, .text-edit-delete-all-button)
  > .lucide {
    display: none !important;
  }

  /* Print extraction already has its own rounded mode card. Remove the
   * duplicated desktop settings heading and rectangular backing surface. */
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="print-extract"]
    main.content-grid
    .task-panel
    .task-body
    .settings-scroll-area
    > #settings-card.settings-card
    > .settings-head {
    display: none !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="print-extract"]
    main.content-grid
    .task-panel
    .task-body
    .settings-scroll-area
    > #settings-card.settings-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="print-extract"]
    main.content-grid
    .task-panel
    .task-body
    .settings-scroll-area
    > #settings-card.settings-card::before,
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="print-extract"]
    main.content-grid
    .task-panel
    .task-body
    .settings-scroll-area
    > #settings-card.settings-card::after {
    content: none !important;
    display: none !important;
  }
}

/* Fashion detail content is intentionally unframed. Its former horizontal
 * padding narrowed all six controls even though every control already filled
 * its own grid track. Let the two-column grids use the same usable width as
 * the upload surface; framed detail/style sections keep their own padding. */
/* Desktop entry stays desktop at every window width; mobile is selector-scoped. */
@media all {
  html:is([data-industry="fashion"], :not([data-industry])):not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="detail-page"]
    #task-panel
    #detail-page-basic-selects.detail-content-settings {
    padding-inline: 0 !important;
  }
}

/* Xiaohongshu has only two meaningful output counts. Keep the real shared
 * count controls, but present them directly below the upload surface instead
 * of compressing them into the sticky footer's compact selector. */
/* Desktop entry stays desktop at every window width; mobile is selector-scoped. */
@media all {
  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .xhs-generate-count-host {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 12px !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .xhs-generate-count-host[hidden] {
    display: none !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .xhs-generate-count-host
    .generate-count-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .xhs-generate-count-host
    .print-count-select {
    display: none !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .xhs-generate-count-host
    .generate-count-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    color: #5d50df !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .xhs-generate-count-host
    .generate-count-label
    small {
    overflow: hidden !important;
    color: #8b93a7 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .xhs-generate-count-host
    .generate-count-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .xhs-generate-count-host
    .count-option {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .settings-bottom-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .settings-bottom-area
    > #generate-count-box {
    display: none !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .settings-bottom-area
    > .generate-action-row {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html:not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature="xiaohongshu"]
    #task-panel
    .settings-bottom-area
    #generate.create-button.full {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}