/* cignyl-sftp 20260824 */
/* ------------------------------------------- */
/* v2 Thumbnail Gallery (thumbnail strip/grid) */
/* ------------------------------------------- */

.v2-theme .v2-thumbnail-gallery {
  /* CSS variables are set on the root by JS */
  --v2-thumbnail-gallery-visible-rows: 2;
  --v2-thumbnail-gallery-thumb-size: 96px;
  --v2-thumbnail-gallery-min-thumb-width: 96px;
  --v2-thumbnail-gallery-columns: 4;

  --v2-thumbnail-gallery-gap: var(--v2-space-sm);
  --v2-thumbnail-gallery-radius: var(--radius);
  /* Small inset so selection/focus chrome isn't clipped by the scroll container. */
  --v2-thumbnail-gallery-pad: 3px;
}

.v2-theme .v2-thumbnail-gallery__scroll {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--v2-thumbnail-gallery-pad);

  /* clamp by visible rows using thumb-size (squares) + gap
     max-height = (rows * (thumb + gap)) - gap
     (so 1 row => thumb) */
  max-height: calc(
    (var(--v2-thumbnail-gallery-visible-rows) * (var(--v2-thumbnail-gallery-thumb-size) + var(--v2-thumbnail-gallery-gap))) -
    var(--v2-thumbnail-gallery-gap) +
    (var(--v2-thumbnail-gallery-pad) * 2)
  );

  /* Row clamp changes can animate (enabled after init via ready token). */
  transition: none;
}

.v2-theme .v2-thumbnail-gallery--ready-true .v2-thumbnail-gallery__scroll {
  transition: max-height 200ms ease;
}

.v2-theme .v2-thumbnail-gallery--height-fixed .v2-thumbnail-gallery__scroll {
  /* Lock to the visible-rows clamp height so filtering doesn't collapse the container. */
  height: calc(
    (var(--v2-thumbnail-gallery-visible-rows) * (var(--v2-thumbnail-gallery-thumb-size) + var(--v2-thumbnail-gallery-gap))) -
    var(--v2-thumbnail-gallery-gap) +
    (var(--v2-thumbnail-gallery-pad) * 2)
  );
  max-height: none;
}

.v2-theme .v2-thumbnail-gallery--height-animate .v2-thumbnail-gallery__scroll {
  /* JS sets --v2-thumbnail-gallery-scroll-height to animate between content heights. */
  height: var(--v2-thumbnail-gallery-scroll-height, auto);
  max-height: none;
  transition: none;
}

.v2-theme .v2-thumbnail-gallery--ready-true.v2-thumbnail-gallery--height-animate .v2-thumbnail-gallery__scroll {
  transition: height 200ms ease;
}

.v2-theme .v2-thumbnail-gallery__grid {
  display: grid;
  gap: var(--v2-thumbnail-gallery-gap);
  justify-content: space-evenly;
  align-content: start;
}

/* fixed: exact columns, square thumbs sized to container (JS sets --thumb-size) */
.v2-theme .v2-thumbnail-gallery--layout-fixed .v2-thumbnail-gallery__grid {
  grid-template-columns: repeat(var(--v2-thumbnail-gallery-columns), var(--v2-thumbnail-gallery-thumb-size));
}

/* auto: fixed thumb size, columns vary by available width */
.v2-theme .v2-thumbnail-gallery--layout-auto .v2-thumbnail-gallery__grid {
  grid-template-columns: repeat(auto-fill, var(--v2-thumbnail-gallery-thumb-size));
}

.v2-theme .v2-thumbnail-gallery__thumb {
  width: var(--v2-thumbnail-gallery-thumb-size);
  height: var(--v2-thumbnail-gallery-thumb-size);
  box-sizing: border-box;
  padding: 0;
  border-radius: calc(var(--v2-thumbnail-gallery-radius) - 2px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
  cursor: pointer;
  overflow: hidden;
  display: block;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.v2-theme .v2-thumbnail-gallery__thumb:focus-visible {
  outline: none;
  border-color: hsl(var(--primary));
  background: hsl(var(--background));
  box-shadow:
    0 0 0 1px hsl(var(--primary)),
    0 1px 2px hsl(var(--foreground) / 0.08);
}

.v2-theme .v2-thumbnail-gallery__thumb[data-state="active"] {
  /* Match the v2 input/textarea focus chrome (thin accent + subtle elevation). */
  border-color: hsl(var(--primary));
  background: hsl(var(--background));
  box-shadow:
    0 0 0 1px hsl(var(--primary)),
    0 1px 2px hsl(var(--foreground) / 0.08);
}

.v2-theme .v2-thumbnail-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.v2-theme .v2-thumbnail-gallery__empty {
  margin-top: var(--v2-space-sm);
  font-size: 0.875rem;
  line-height: 1.35;
  color: hsl(var(--muted-foreground));
  text-align: center;
  padding: var(--v2-space-md);
  border: 1px dashed hsl(var(--border));
  border-radius: var(--v2-thumbnail-gallery-radius);
}

.v2-theme .v2-thumbnail-gallery--disabled-true {
  opacity: 0.6;
  pointer-events: none;
}