/**
 * previz.css — styling for the 2D PREVISUALISER "Looks" Studio tab (PZ-0.7).
 *
 * Epic PREVIZ (DEC-336 / DEC-342). Dark-only: reuses the Studio's existing dark
 * design tokens (--aif-*, --as-gold, --as-radius) declared on #ppcp-ai-studio in
 * ai-studio.css, so this stays visually consistent with the rest of the Studio
 * and needs no palette of its own. Only enqueued when the previz flag is on.
 *
 * Layout is a two-column picker/preview grid on desktop that COLLAPSES to a
 * single stacked column below 720px (mobile-responsive per the PZ-0.7 brief).
 * All controls meet the --as-tap (44px) touch-target floor the Studio uses.
 */

/* Scope everything under the panel id so nothing leaks into other tabs. */
#as-tab-previz .as-previz { max-width: 100%; }

/* Read-only balance chip — same gold treatment as the studio credits badge, but
   explicitly captioned "display only" (no debit happens on this surface). */
#as-tab-previz .as-previz-balance {
  align-items: center;
  background: rgba(200, 169, 110, 0.10);
  border: 1px solid var(--as-gold, #c8a96e);
  border-radius: 999px;
  color: var(--as-gold, #c8a96e);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  margin: 0 0 14px;
  padding: 6px 14px;
}
#as-tab-previz .as-previz-balance .as-hint {
  color: var(--aif-muted, #9AA3B5);
  font-weight: 400;
}

/* Two-column layout: picker (left) + preview (right). */
#as-tab-previz .as-previz-layout {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
}

/* ── Category filter ─────────────────────────────────────────────────────── */
#as-tab-previz .as-previz-cats,
#as-tab-previz .as-previz-aspects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
#as-tab-previz .as-previz-cat,
#as-tab-previz .as-previz-aspect {
  background: var(--aif-surface-2, #1E2535);
  border: 1px solid var(--aif-border, #2A3347);
  border-radius: var(--as-radius, 8px);
  color: var(--aif-text, #E8EAF0);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  min-height: var(--as-tap, 44px);
  padding: 8px 14px;
}
#as-tab-previz .as-previz-cat:hover,
#as-tab-previz .as-previz-aspect:hover {
  border-color: var(--as-gold, #c8a96e);
}
#as-tab-previz .as-previz-cat.active,
#as-tab-previz .as-previz-aspect.active {
  background: rgba(200, 169, 110, 0.14);
  border-color: var(--as-gold, #c8a96e);
  color: var(--as-gold, #c8a96e);
}

/* ── Pick-a-look grid ────────────────────────────────────────────────────── */
#as-tab-previz .as-previz-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
#as-tab-previz .as-previz-tile {
  background: var(--aif-surface, #161B24);
  border: 2px solid var(--aif-border, #2A3347);
  border-radius: var(--as-radius, 8px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  text-align: center;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
#as-tab-previz .as-previz-tile:hover {
  border-color: var(--as-gold, #c8a96e);
  transform: scale(1.02);
}
#as-tab-previz .as-previz-tile.selected {
  border-color: var(--as-gold, #c8a96e);
  box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.35);
}
#as-tab-previz .as-previz-tile-img {
  aspect-ratio: 1 / 1;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}
#as-tab-previz .as-previz-tile-label {
  color: var(--aif-text, #E8EAF0);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 6px;
}

/* ── Preview frame + before/after slider ─────────────────────────────────── */
#as-tab-previz .as-previz-frame {
  --previz-ratio: 1 / 1;               /* overridden by previz.js per aspect */
  background: var(--aif-base, #0D0F14);
  border: 1px solid var(--aif-border, #2A3347);
  border-radius: var(--as-radius, 8px);
  overflow: hidden;
  width: 100%;
}
#as-tab-previz .as-previz-stage {
  aspect-ratio: var(--previz-ratio);
  position: relative;
  width: 100%;
}
#as-tab-previz .as-previz-img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
/* The "after" layer covers the full stage; previz.js reveals its left portion
   with clip-path (inset from the right), so it stays pixel-aligned with the
   before layer and never squashes. */
#as-tab-previz .as-previz-after-wrap {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  /* initial reveal = 50%; JS syncs this to the slider on input + on load. */
  clip-path: inset(0 50% 0 0);
}
/* Vertical seam handle following the slider position. */
#as-tab-previz .as-previz-handle {
  background: var(--as-gold, #c8a96e);
  bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
}

#as-tab-previz .as-previz-slider-label {
  color: var(--aif-muted, #9AA3B5);
  display: block;
  font-size: 12px;
  margin: 12px 0 4px;
}
#as-tab-previz .as-previz-slider {
  accent-color: var(--as-gold, #c8a96e);
  width: 100%;
}
#as-tab-previz .as-previz-selection {
  margin-top: 10px;
  min-height: 1.2em;
}

/* ── Mobile: stack the columns; the after image must fill the full stage. ─── */
@media (max-width: 720px) {
  #as-tab-previz .as-previz-layout {
    grid-template-columns: 1fr;
  }
  #as-tab-previz .as-previz-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
}