/* SalesVidGen — PX1: the pictures of a look book or storyboard are drawn a few at once, so each card says its own
   state (premiumScenesLive.js). Same language as the storyboard frames (premium-board.css): accent = being drawn (a
   slow light sweep over the frame), yellow = being checked, red = could not be drawn, muted dashed = waiting.
   A finished picture fades in once. App theme tokens only. */

/* The chip: words + a small spinner while the picture is drawn or checked. */
.pl-live { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; max-width: calc(100% - 1rem); white-space: normal; text-align: center; line-height: 1.25; }
.pl-live.is-waiting { color: var(--text-tertiary); font-weight: 600; }
.pl-live.is-working { color: var(--accent); }
.pl-live.is-checking, .pl-live.is-redrawing { color: var(--warning); }
.pl-live.is-failed { color: var(--error); }
.pl-spin { flex: none; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: plSpin 0.9s linear infinite; }
@keyframes plSpin { to { transform: rotate(360deg); } }

/* A new picture arrives: it develops in, once. */
.pl-fade { animation: plFade 0.7s var(--ease, ease-out) both; }
@keyframes plFade { from { opacity: 0; filter: saturate(0.2) brightness(1.15); } to { opacity: 1; filter: none; } }

/* ---------- Step ④ Use project photos: the plan's cards while the missing pictures are drawn ---------- */
.sa-plate.is-live .sa-pic { cursor: default; }
.sa-plate.is-live-waiting .sa-pic { border-color: var(--border-strong); background: transparent; }
.sa-plate.is-live-waiting .sa-pic img { opacity: 0.25; }
.sa-plate.is-live-working .sa-pic, .sa-plate.is-live-redrawing .sa-pic { border-style: solid; border-color: var(--accent); }
.sa-plate.is-live-working .sa-pic::after, .sa-plate.is-live-redrawing .sa-pic::after {
  content: ''; position: absolute; inset: -10% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, var(--accent-subtle) 46%, var(--bg-base) 50%, var(--accent-subtle) 54%, transparent 62%);
  opacity: 0.55; animation: plSweep 2.6s var(--ease, ease-in-out) infinite;
}
.sa-plate.is-live-checking .sa-pic { border-style: solid; border-color: var(--warning); }
.sa-plate.is-live-checking .sa-pic::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: var(--warning); box-shadow: 0 0 12px 2px var(--warning-bg); animation: plScan 1.8s linear infinite;
}
.sa-plate.is-live-failed .sa-pic { border: 1.5px solid var(--error); background: var(--error-bg); }
.sa-plate.is-live-failed .sa-pic img { opacity: 0.25; }
.sa-plate.is-live-done .sa-pic { border: 1.5px solid var(--accent); background: var(--bg-surface); }
.sa-plate.is-live-done .sa-pic img { opacity: 1; filter: none; }
.sa-plate.is-live-done .sa-tag { top: auto; bottom: 0.5rem; transform: translateX(-50%); }
.sa-pic .sa-tag { z-index: 1; }
.sa-plate.is-live .sa-change[disabled], .sa-pic[disabled] { opacity: 0.55; cursor: default; }
@keyframes plSweep { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
@keyframes plScan { from { top: 0; } to { top: calc(100% - 2px); } }

/* The whole set at a glance: the small frames follow the cards. */
.sa-live-sum { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.sa-cell.is-live-working .sa-cell-pic, .sa-cell.is-live-redrawing .sa-cell-pic { border-style: solid; border-color: var(--accent); animation: plPulse 1.6s ease-in-out infinite; }
.sa-cell.is-live-checking .sa-cell-pic { border-style: solid; border-color: var(--warning); }
.sa-cell.is-live-failed .sa-cell-pic { border: 1.5px solid var(--error); background: var(--error-bg); }
.sa-cell.is-live-done .sa-cell-pic { border: 1.5px solid var(--accent); }
.sa-cell.is-live-done .sa-cell-pic img { opacity: 1; filter: none; }
@keyframes plPulse { 50% { opacity: 0.6; } }

/* The look book plates (step ④) and the storyboard frames (step ⑤) keep their own chip boxes; the spinner sits in them. */
.sc-plate-state.pl-live, .bd-chip.pl-live { display: flex; }
.bd-chip.pl-live { display: inline-flex; max-width: calc(100% - 1rem); }

@media (prefers-reduced-motion: reduce) {
  .pl-spin { animation: none; border-right-color: currentColor; opacity: 0.6; }
  .pl-fade { animation: none; }
  .sa-plate .sa-pic::after { animation: none !important; display: none; }
  .sa-cell .sa-cell-pic { animation: none !important; }
}