/* Desktop geometry has one owner. Important declarations in this named layer
 * outrank the historical unlayered !important rules, including lazy feature
 * styles. Only geometry is owned here: themes, interactions and mobile remain
 * in their existing stylesheets. No page zoom or transform scaling is used. */
/* Visibility has priority over layout, including late-loaded legacy rules. */
@layer workbench-visibility, workbench-scrollbars, desktop-fixed-rails;
@layer workbench-visibility {
  /* Keep the editor visible while its saved state is restored. JS makes the
   * editor inert so an unfinished restore cannot overwrite new input. */
  body.image-feature-draft-pending #task-panel :is(.upload-column, .settings-column),
  body.image-feature-draft-pending #free-input-panel {
    visibility: visible !important;
    opacity: 1 !important;
  }
  .task-heading-copy > .feature-draft-loading-status:not([hidden]) {
    display: flex !important;
    position: static !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0 !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
  }
  .feature-draft-loading-status button {
    padding: 3px 8px;
    border: 1px solid #aabfff;
    border-radius: 6px;
    background: transparent;
    color: #5578e6;
    font: inherit;
    cursor: pointer;
  }
  .app-layout [hidden]:not([hidden="until-found"]),
  .app-layout [data-feature-disabled="true"] {
    display: none !important;
  }
}

@layer desktop-fixed-rails {
  html:not([data-mobile-workbench="true"]) {
    --desktop-navigation-width: 220px;
    --desktop-minimum-width: 1440px;
    --workbench-settings-rail-width: 500px !important;
    --workbench-column-gap: 28px !important;
    overflow-x: auto !important;
  }

  html:not([data-mobile-workbench="true"]) body:not(.buyer-tryon-public-body) {
    min-width: var(--desktop-minimum-width) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html:not([data-mobile-workbench="true"]) .app-layout {
    display: grid !important;
    grid-template-columns: var(--desktop-navigation-width) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-width: var(--desktop-minimum-width) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  html:not([data-mobile-workbench="true"]) .main-area {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-template-rows: 56px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar {
    position: sticky !important;
    top: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: var(--desktop-navigation-width) !important;
    min-width: var(--desktop-navigation-width) !important;
    max-width: var(--desktop-navigation-width) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 18px 14px 16px !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    transition: none !important;
    border: 0 !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar::after {
    content: none;
  }

  html:not([data-mobile-workbench="true"]) .content-grid {
    box-sizing: border-box !important;
    border: 1px solid rgba(111, 122, 145, 0.1) !important;
    border-top-left-radius: 16px !important;
  }

  html[data-theme="dark"]:not([data-mobile-workbench="true"]) .content-grid {
    border-color: var(--aotu-dark-line, rgba(255, 255, 255, 0.07)) !important;
  }

  html:not([data-theme="dark"]):not([data-mobile-workbench="true"]) body.feature-focus-mode .main-area,
  html:not([data-theme="dark"]):not([data-mobile-workbench="true"])
    body.feature-focus-mode.workstation-feature-mode[data-active-feature]
    .main-area.main-area {
    background: #f1f4f9 !important;
    background-image: none !important;
  }

  html:not([data-theme="dark"]):not([data-mobile-workbench="true"])
    body:not(.feature-focus-mode):not(.library-focus-mode):not(.works-focus-mode)
    .main-area.main-area {
    background: #f1f4f9 !important;
    background-image: none !important;
  }

  html:not([data-mobile-workbench="true"]) #desktop-sidebar-toggle {
    display: none !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .brand {
    display: flex !important;
    grid-row: 1 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 16px 6px 8px !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .brand-logo {
    width: 160px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .brand-logo img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .side-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-row: 2 !important;
    align-content: start !important;
    gap: 4px !important;
    padding: 2px 3px 8px 0 !important;
    overflow: hidden auto !important;
    scrollbar-width: thin !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .side-nav > .nav-group:not(.nav-video-standalone):not(.nav-infinite-canvas-standalone):not(.nav-video-workspace) {
    gap: 3px !important;
    padding: 0 4px 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-width: 0 !important;
    border-radius: 0 !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-sublist {
    display: grid !important;
    gap: 3px !important;
    padding: 0 !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .side-nav :is(.nav-primary[data-nav-target], .nav-sublist a) {
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
    gap: 9px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .side-nav :is(.nav-primary[data-nav-target], .nav-sublist a):not(.active):not(:hover):not(:focus-visible) {
    background: transparent !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-sublist a:is(.active, :hover, :focus-visible) {
    background: rgba(123, 97, 255, 0.08) !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar :is(.nav-sublist a, .nav-primary[data-nav-target]) .lucide {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:not([data-mobile-workbench="true"]) .sidebar .nav-video-standalone {
    width: 100% !important;
    max-width: none !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-media-mode-switch {
    grid-template-rows: 46px 42px !important;
    gap: 8px !important;
    width: 100% !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-media-mode-option {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 10px !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border-radius: 11px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-media-mode-option-canvas {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    font-size: 15px !important;
    font-weight: 650 !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-media-mode-icon { display: block !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-media-mode-label-full { display: inline !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-media-mode-label-compact { display: none !important; }

  html:not([data-mobile-workbench="true"]) .sidebar .nav-video-workspace {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 10px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-video-workspace-item:not([hidden]) {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    place-items: center stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    gap: 10px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-video-workspace-copy { display: grid !important; gap: 2px !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-video-workspace-copy strong { font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-video-workspace-copy small { font-size: 10px !important; font-weight: 400 !important; line-height: 1.2 !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-video-workspace-icon { width: 34px !important; height: 34px !important; margin: 0 !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .nav-video-workspace-icon .lucide { width: 19px !important; height: 19px !important; }

  html:not([data-mobile-workbench="true"]) .sidebar-footer-stack { grid-row: 3 !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .works-card {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 20px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 64px !important;
    padding: 10px 11px !important;
    gap: 9px !important;
  }
  html:not([data-mobile-workbench="true"]) .sidebar .works-card > span { display: grid !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .works-icon { width: 40px !important; height: 40px !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .works-icon .lucide { width: 20px !important; height: 20px !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .works-card strong { font-size: 16px !important; line-height: 1.2 !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .works-card small { font-size: 12px !important; font-weight: 500 !important; line-height: 1.3 !important; margin-top: 3px !important; }
  html:not([data-mobile-workbench="true"]) .sidebar .works-arrow { display: block !important; width: 20px !important; height: 20px !important; }

  /* One desktop header, including below the legacy 980/760px breakpoints.
   * Keep shortcuts complete; horizontal scrolling belongs to the document. */
  html:not([data-mobile-workbench="true"]) .topbar {
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 6px 32px !important;
    gap: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  html:not([data-mobile-workbench="true"]) .topbar .top-library-tabs {
    display: flex !important;
    flex: 1 0 auto !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    min-width: max-content !important;
    gap: 10px !important;
    padding: 0 !important;
    overflow: clip !important;
  }
  html:not([data-mobile-workbench="true"]) .topbar .top-library-tabs > :is(button, .top-infinite-canvas-entry):not([hidden]),
  html:not([data-mobile-workbench="true"]) .topbar .top-library-tabs :is(.industry-select-button, .language-switcher-button) {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: 122px !important;
    min-width: 122px !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 14px !important;
    gap: 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 14px !important;
  }
  html:not([data-mobile-workbench="true"]) .topbar .top-library-tabs > #topbar-template-marketplace-entry:not([hidden]) {
    width: auto !important;
    min-width: 118px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 15px !important;
    gap: 7px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
  }
  html:not([data-mobile-workbench="true"]) .topbar .top-library-tabs :is(.industry-select, .language-switcher) {
    flex: 0 0 auto !important;
  }
  html:not([data-mobile-workbench="true"]) .topbar .top-library-tabs .industry-select-button {
    width: auto !important;
  }
  html:not([data-mobile-workbench="true"]) .topbar .top-library-tabs .lucide {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
  }
  html:not([data-mobile-workbench="true"]) .topbar .top-library-tabs :is(.industry-select-button, .language-switcher-button) .lucide:last-child {
    width: 13px !important;
    height: 13px !important;
    flex-basis: 13px !important;
  }
  html:not([data-mobile-workbench="true"]) .topbar .top-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
  }

  /* Fixed horizontal geometry; the existing independently scrolling middle
   * section and non-shrinking footer still handle short laptop windows. */
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .content-grid {
    display: block !important;
    /* Match the video rail's measured outside spacing: 15px below the
     * topbar, 9px after navigation, and 14px above the viewport bottom. */
    padding: 15px 6px 14px 9px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) :is(.workspace, #task-panel) {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) #task-panel {
    position: relative !important;
    grid-template-columns: var(--workbench-settings-rail-width) minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) 126px !important;
    row-gap: 0 !important;
    column-gap: 6px !important;
  }
  /* The divider belongs to the fixed settings track, never the fluid preview. */
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) #task-panel::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: calc(var(--workbench-settings-rail-width) + 4px) !important;
    right: auto !important;
    top: 18px !important;
    bottom: 18px !important;
    width: 1px !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--workbench-divider-paint, linear-gradient(180deg, transparent 0%, rgba(166, 153, 220, 0.92) 18%, rgba(166, 153, 220, 0.62) 82%, transparent 100%)) !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }
  html[data-theme="dark"]:not([data-mobile-workbench="true"]) {
    --workbench-divider-paint: linear-gradient(180deg, transparent 0%, rgba(151, 185, 255, 0.24) 18%, rgba(151, 185, 255, 0.24) 82%, transparent 100%);
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .preview-column::before {
    content: none !important;
    display: none !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .task-body:not([hidden]) {
    display: contents !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) :is(.task-heading, .upload-column, .settings-column) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .task-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-row: 1 !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .upload-column { grid-row: 2 !important; }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .settings-column {
    display: grid !important;
    grid-row: 3 / 5 !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px 22px 0 !important;
    border: 0 !important;
    gap: 12px !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .settings-scroll-area {
    /* Move the scrollport through the rail's right padding, while keeping
     * controls aligned with the upload and fixed footer above/below it. */
    width: calc(100% + 22px) !important;
    box-sizing: border-box !important;
    max-width: none !important;
    padding-right: 16px !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden auto !important;
  }
  /* Recolor controls stay together; spare rail height belongs below them. */
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode[data-active-feature="colors"] #task-panel .settings-scroll-area {
    align-content: start !important;
    align-items: start !important;
    grid-template-rows: none !important;
    grid-auto-rows: max-content !important;
    row-gap: 12px !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode[data-active-feature="colors"] #task-panel .settings-scroll-area > :is(.extra-prompt-box, #settings-card) {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    margin-block: 0 !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .preview-column {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .preview-card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .task-recent-panel {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode[data-active-feature="detail-page"] .preview-column {
    grid-row: 1 / 5 !important;
  }
  /* PSD intentionally combines upload and settings in one column. */
  html:not([data-mobile-workbench="true"]) body.image-to-psd-active #task-panel {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    row-gap: 14px !important;
  }
  html:not([data-mobile-workbench="true"]) body.image-to-psd-active .settings-column { grid-row: 2 / 4 !important; }
  html:not([data-mobile-workbench="true"]) body.image-to-psd-active .preview-column { grid-row: 1 / 3 !important; }
  html:not([data-mobile-workbench="true"]) body.image-to-psd-active .task-recent-panel { grid-row: 3 !important; }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .task-heading {
    padding: 18px 22px 10px !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .task-heading h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  /* Every image workbench keeps its feature introduction below the title,
   * matching the existing video header hierarchy. */
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .task-heading #preview-subtitle {
    display: block !important;
    margin: 7px 0 0 !important;
    color: #7d8799 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  html[data-theme="dark"]:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .task-heading #preview-subtitle {
    color: #a0aec3 !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .upload-column {
    padding: 4px 22px 16px !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .settings-bottom-area {
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    align-self: end !important;
    row-gap: 12px !important;
    padding-bottom: 0 !important;
  }

  /* Text editing has count and resolution only. No empty ratio column should
   * reappear when the old 761px footer layout stops matching. */
  html:not([data-mobile-workbench="true"]) body[data-active-feature="text-edit"] .settings-bottom-area {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
  }
  html:not([data-mobile-workbench="true"]) body[data-active-feature="text-edit"] .generate-count-section {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html:not([data-mobile-workbench="true"]) body[data-active-feature="text-edit"] .generation-resolution-section {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  /* A narrow desktop viewport still has a 500px settings rail. Do not switch
   * its footer to the legacy phone layout at 760px. Actual mobile is excluded. */
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .settings-bottom-area {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
    transform: none !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .settings-bottom-area :is(#generate-count-box, .generate-action-row) {
    display: contents !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .settings-bottom-area :is(#free-bottom-ratio-section, #set-ratio-section):not([hidden]) {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .settings-bottom-area .generate-count-section {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .settings-bottom-area .generation-resolution-section {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode):is(.has-no-image-ratio-control, [data-active-feature="text-edit"], [data-active-feature="detail-page"]) .settings-bottom-area {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode):is(.has-no-image-ratio-control, [data-active-feature="text-edit"]) .settings-bottom-area .generate-count-section {
    grid-column: 1 !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode):is(.has-no-image-ratio-control, [data-active-feature="text-edit"], [data-active-feature="detail-page"]) .settings-bottom-area .generation-resolution-section {
    grid-column: 2 !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) .settings-bottom-area #generate {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }
  html:not([data-mobile-workbench="true"]) body[data-active-feature="detail-page"] .settings-bottom-area :is(.generate-count-section, .detail-bottom-options) {
    display: none !important;
  }
  html:not([data-mobile-workbench="true"]) body.workstation-feature-mode:not(.video-workspace-mode) #generate:not([hidden]) {
    display: flex !important;
    font-size: 14px !important;
  }
  html:not([data-mobile-workbench="true"]) body[data-active-feature="detail-page"] :is(.pet-detail-content-settings-actions, .detail-reference-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Video and audio tools share the image settings width, plus their
   * existing 15px combined outer margins. */
  html:not([data-mobile-workbench="true"]) body.video-workspace-mode:not(.works-focus-mode) :is(.content-grid, .workspace, #task-panel) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html:not([data-mobile-workbench="true"]) body.video-workspace-mode #video-free-workspace {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  html:not([data-mobile-workbench="true"]) :is(.video-free-shell, .video-analysis-shell, .media-download-shell) {
    display: grid !important;
    grid-template-columns: calc(var(--workbench-settings-rail-width) + 15px) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  html:not([data-mobile-workbench="true"]) :is(.video-free-settings-panel, .video-analysis-source, .media-download-source) {
    width: var(--workbench-settings-rail-width) !important;
    height: calc(100dvh - 85px) !important;
    min-height: 0 !important;
    margin: 15px 6px 4px 9px !important;
    padding: 22px 22px 18px !important;
    overflow: hidden !important;
  }
  html:not([data-mobile-workbench="true"]) .speech-synthesis-shell {
    grid-template-columns: calc(var(--workbench-settings-rail-width) + 15px) minmax(0, 1fr) !important;
  }
  html:not([data-mobile-workbench="true"]) .speech-synthesis-settings {
    width: var(--workbench-settings-rail-width) !important;
  }

  /* The result container, not the screen's physical resolution, owns columns.
   * Large windows retain eight columns. Narrow windows keep useful card sizes. */
  html:not([data-mobile-workbench="true"]) #detail-page-latest-panel > .wrinkle-latest-panel {
    container-type: inline-size !important;
  }
  html:not([data-mobile-workbench="true"]) #detail-page-latest-panel > .wrinkle-latest-panel > .wrinkle-latest-grid {
    --desktop-latest-columns: 8 !important;
    grid-template-columns: repeat(var(--desktop-latest-columns), minmax(0, 1fr)) !important;
    grid-auto-rows: max-content !important;
    align-self: start !important;
    height: max-content !important;
    max-height: none !important;
  }
  @container (max-width: 1679px) {
    html:not([data-mobile-workbench="true"]) #detail-page-latest-panel > .wrinkle-latest-panel > .wrinkle-latest-grid { --desktop-latest-columns: 6 !important; }
  }
  @container (max-width: 1259px) {
    html:not([data-mobile-workbench="true"]) #detail-page-latest-panel > .wrinkle-latest-panel > .wrinkle-latest-grid { --desktop-latest-columns: 5 !important; }
  }
  @container (max-width: 1049px) {
    html:not([data-mobile-workbench="true"]) #detail-page-latest-panel > .wrinkle-latest-panel > .wrinkle-latest-grid { --desktop-latest-columns: 4 !important; }
  }
  @container (max-width: 839px) {
    html:not([data-mobile-workbench="true"]) #detail-page-latest-panel > .wrinkle-latest-panel > .wrinkle-latest-grid { --desktop-latest-columns: 3 !important; }
  }
  @container (max-width: 629px) {
    html:not([data-mobile-workbench="true"]) #detail-page-latest-panel > .wrinkle-latest-panel > .wrinkle-latest-grid { --desktop-latest-columns: 2 !important; }
  }

}

/* The fixed desktop rail stays full width below the old compact breakpoint.
 * Keep the assistant anchor on the same geometry as the full-width task card. */
@layer desktop-fixed-rails {
  html:not([data-mobile-workbench="true"]) body .sidebar .ai-assistant-sidebar-slot.is-active {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html:not([data-mobile-workbench="true"]) body .ai-operation-assistant.ai-assistant-global-entry.has-sidebar-launcher-anchor .ai-assistant-launcher {
    grid-template-columns: auto minmax(0, 1fr) !important;
    justify-items: stretch !important;
    gap: 10px !important;
    width: var(--ai-assistant-sidebar-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--ai-assistant-sidebar-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 12px !important;
    border-radius: var(--ai-assistant-sidebar-radius) !important;
  }

  html:not([data-mobile-workbench="true"]) body .ai-operation-assistant.ai-assistant-global-entry.has-sidebar-launcher-anchor .ai-assistant-launcher-copy {
    display: grid !important;
  }
}

@layer desktop-fixed-rails {
  html:not([data-mobile-workbench="true"]) body[data-active-feature="free-generate"] #task-panel .settings-bottom-area {
    grid-template-rows: auto auto auto !important;
  }
  html:not([data-mobile-workbench="true"]) body[data-active-feature="free-generate"] #task-panel .settings-bottom-area #inline-model-section {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  html:not([data-mobile-workbench="true"]) body[data-active-feature="free-generate"] #task-panel .settings-bottom-area :is(#free-bottom-ratio-section, .generate-count-section, .generation-resolution-section) {
    grid-row: 2 !important;
  }
  html:not([data-mobile-workbench="true"]) body[data-active-feature="free-generate"] #task-panel .settings-bottom-area #generate {
    grid-row: 3 !important;
  }
}

/* Final visual boundary: the uploader is a complete card on detail and
 * buyer-show routes, rather than the open-ended top of the settings rail. */
@media (min-width: 981px) {
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode:is([data-active-feature="detail-page"], [data-active-feature="buyer-show"]) #task-panel .upload-column,
  html:not([data-mobile-workbench="true"]) body.feature-focus-mode.workstation-feature-mode:is([data-active-feature="detail-page"], [data-active-feature="buyer-show"]) #task-panel #product-upload {
    border-bottom: 1px solid #efeff8 !important;
    border-radius: 22px !important;
  }
}