/* FileNest batch image workspace.
   Benchmark-led product rule: multi-image Convert / Compress / Resize behaves like
   mature batch tools. The batch gets one shared settings panel plus a source queue;
   it does NOT carry a permanent single-image effect canvas. Single-image preview
   remains available through the base image preview stylesheet. */

/* In a multi-image job, remove the compact effect dock beside settings entirely.
   This prevents the fatal scroll obstruction / blank checkerboard failure and keeps
   the controls immediately usable at every viewport width. */
.image-preview-mobile:has(.preview-batch-strip) {
  display: none !important;
}

/* The main preview instance becomes the batch source queue. */
.image-preview-desktop:has(.preview-batch-strip) {
  display: block !important;
  order: 0 !important;
  position: static !important;
  top: auto !important;
  align-self: stretch !important;
  margin: 10px 0 14px !important;
}

.image-preview-desktop:has(.preview-batch-strip) .image-live-preview {
  container-type: inline-size;
  margin: 0;
  padding: clamp(8px, 1.3cqi, 14px);
  border-radius: 16px;
  box-shadow: var(--shadow-small);
}

/* Batch mode is a queue/review surface, not a hidden editor. */
.image-preview-desktop:has(.preview-batch-strip) .live-preview-grid,
.image-preview-desktop:has(.preview-batch-strip) .preview-warning {
  display: none !important;
}

.image-preview-desktop:has(.preview-batch-strip) .live-preview-heading {
  align-items: center;
  margin-bottom: 9px;
}

.image-preview-desktop:has(.preview-batch-strip) .live-preview-heading strong {
  font-size: 0;
}

.image-preview-desktop:has(.preview-batch-strip) .live-preview-heading strong::after {
  content: "Batch images";
  font-size: 13px;
}

html[lang^="zh"] .image-preview-desktop:has(.preview-batch-strip) .live-preview-heading strong::after {
  content: "批次图片";
}

.image-preview-desktop:has(.preview-batch-strip) .live-preview-heading small {
  font-size: 0;
}

.image-preview-desktop:has(.preview-batch-strip) .live-preview-heading small::after {
  content: "One set of options applies to the whole batch · processed results appear after running";
  font-size: 8px;
  line-height: 1.4;
}

html[lang^="zh"] .image-preview-desktop:has(.preview-batch-strip) .live-preview-heading small::after {
  content: "统一设置应用到整批图片 · 处理完成后逐张查看结果";
}

.image-preview-desktop:has(.preview-batch-strip) .preview-batch-count {
  min-width: 42px;
}

.image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip {
  --batch-card-min: 128px;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--batch-card-min)), 1fr)) !important;
  gap: clamp(5px, 1cqi, 9px);
  max-height: none;
  margin: 0;
  padding: 1px;
  overflow: visible !important;
  scroll-snap-type: none !important;
  overscroll-behavior: contain;
}

.image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip::before {
  display: none !important;
}

.image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip > button {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  padding: 4px;
  border-radius: 11px;
  scroll-snap-align: none !important;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 94px 126px;
}

.image-preview-desktop:has(.preview-batch-strip) .preview-batch-thumb {
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 8px;
}

.image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip > button > b {
  right: 5px;
  bottom: 5px;
  min-width: 18px;
  height: 18px;
  font-size: 8px;
}

/* More files means denser cards before it means a much longer page. */
.image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip:has(> button:nth-child(7)) {
  --batch-card-min: 112px;
}

.image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip:has(> button:nth-child(13)) {
  --batch-card-min: 98px;
  max-height: clamp(250px, 36vh, 410px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip:has(> button:nth-child(31)) {
  --batch-card-min: 86px;
  max-height: clamp(270px, 40vh, 460px);
}

.image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip:has(> button:nth-child(61)) {
  --batch-card-min: 78px;
  max-height: clamp(290px, 44vh, 500px);
}

/* Density follows the actual workspace width, including split-screen windows. */
@container (max-width: 520px) {
  .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip {
    --batch-card-min: 104px;
    gap: 6px;
  }
  .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip:has(> button:nth-child(7)) {
    --batch-card-min: 90px;
  }
  .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip:has(> button:nth-child(13)) {
    --batch-card-min: 80px;
    max-height: clamp(230px, 32vh, 290px);
  }
  .image-preview-desktop:has(.preview-batch-strip) .preview-batch-thumb {
    aspect-ratio: 16 / 10 !important;
  }
}

@container (min-width: 760px) {
  .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip { --batch-card-min: 146px; }
  .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip:has(> button:nth-child(7)) { --batch-card-min: 126px; }
  .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip:has(> button:nth-child(13)) { --batch-card-min: 110px; }
  .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip:has(> button:nth-child(31)) { --batch-card-min: 94px; }
}

@container (min-width: 1180px) {
  .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip { --batch-card-min: 164px; }
  .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip:has(> button:nth-child(7)) { --batch-card-min: 140px; }
  .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip:has(> button:nth-child(13)) { --batch-card-min: 118px; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 560px) {
    .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }
  @media (min-width: 561px) and (max-width: 960px) {
    .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  }
  @media (min-width: 961px) {
    .image-preview-desktop:has(.preview-batch-strip) .preview-batch-strip { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  }
}