/* ═══ VFX ŠTÚDIO ═══════════════════════════════════════════════════════════
   Kostru (nb-page / nb-header / nb-studio / nb-controls / nb-sidebar) berieme
   z generátorov, takže #vfxView.video-tool-view dostane zo signature.css ten
   istý súvislý povrch s deliacimi čiarami — nie tri samostatné karty — a
   hlavička sedí na presne tú istú výšku ako v IMAGE, VIDEO a HUDBE.

   Tu je LEN to, čo je pre VFX naozaj vlastné: tretí stĺpec, scéna s deliacou
   čiarou pred/po, sloty zdrojov a dlaždice modelov.

   Dve pravidlá, ktoré držia layout pokojný:
   1. Scéna má pevný rozmer a klip sa do nej vkladá (object-fit: contain), takže
      9:16 aj 16:9 sedia do toho istého okna a nič sa nehýbe.
   2. Maska je v DOM VŽDY, aj keď ju model nepoužíva — len zhasne. Keby sa
      pridávala a odoberala, pravý stĺpec by pri prepnutí modelu poskočil.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tretí stĺpec navyše oproti generátorom. Selektor je zámerne o triedu
   špecifickejší než `.video-tool-view .nb-studio` v signature.css, ktorá sa
   načítava POSLEDNÁ a inak by tento grid prebila. */
.video-tool-view .nb-studio.vfx-studio {
  grid-template-columns: 470px minmax(0, 1fr) 250px;
  /* Nižšie než v generátoroch — pod ním ešte lemujú spodok dlaždice modelov,
     a obe veci sa majú zmestiť na jednu obrazovku bez rolovania. */
  height: calc(100vh - 320px);
  max-height: calc(100vh - 320px);
  min-height: 360px;
}
@media (min-width: 1101px) and (max-width: 1400px) {
  .video-tool-view .nb-studio.vfx-studio {
    grid-template-columns: 430px minmax(0, 1fr) 230px;
  }
}

.vfx-studio .nb-generate-btn { width: 100%; }
@media (max-width: 1100px) {
  .vfx-studio { grid-template-columns: 1fr; height: auto; max-height: none; }
}

/* Pravý stĺpec je posledný — čiara patrí naľavo od neho, nie napravo. */
.video-tool-view .nb-sidebar.vfx-sources {
  border-right: 0 !important;
  border-left: 1px solid rgba(255,255,255,0.075) !important;
  padding: 14px 25px 14px 20px;
  overflow-y: auto;
}

/* ── hlavička ── */
.vfx-bc-strong { color: #9b7cff; }
.vfx-how {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.vfx-how:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.15); }
.vfx-how-q {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* ── zámer (ľavý panel) ──
   Sekcia rastie, takže CTA dosadne na spodok panelu a nezostane nad ním diera. */
.vfx-intent-section { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.vfx-hint { border-left-color: rgba(224,163,58,0.55); }
.vfx-intent-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(44px, 1fr);
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.075);
}
.vfx-intent {
  position: relative;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.075);
  background: transparent;
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.vfx-intent:nth-child(2n) { border-left: 1px solid rgba(255,255,255,0.075); }
/* Nepárny posledný riadok radšej roztiahneme, než by visel v polovici. */
.vfx-intent:last-child:nth-child(odd) { grid-column: 1 / -1; }
.vfx-intent:hover { background: rgba(255,255,255,0.03); color: #fff; }
.vfx-intent[aria-pressed="true"] {
  background: rgba(0,212,170,0.09);
  color: var(--accent, #00d4aa);
  font-weight: 600;
}
.vfx-intent[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent, #00d4aa);
}
.vfx-prompt { height: 138px; min-height: 138px; }

/* ── scéna ── */
.vfx-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 22px;
  overflow: hidden;
}
.vfx-canvas {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  border-radius: 10px;
  /* šachovnica = plocha, do ktorej sa klip vkladá; drží pevný rozmer */
  background: repeating-conic-gradient(#0d0f13 0% 25%, #0a0c10 0% 50%) 50% / 18px 18px;
}
.vfx-media {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  touch-action: none;
}
.vfx-media.is-ready { cursor: ew-resize; }
.vfx-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 9:16 dostane bočné pruhy, 16:9 vyplní — okno sa nemení */
  display: block;
  background: #000;
}
.vfx-media .vfx-after { clip-path: inset(0 0 0 var(--vfx-split, 58%)); }
.vfx-tag {
  position: absolute;
  top: 9px;
  font-size: 9px;
  letter-spacing: 0.15em;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(0,0,0,0.68);
}
.vfx-tag--l { left: 9px; color: rgba(255,255,255,0.6); }
.vfx-tag--r { right: 9px; color: var(--accent, #00d4aa); }
.vfx-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--vfx-split, 58%);
  width: 2px;
  background: var(--accent, #00d4aa);
  transform: translateX(-1px);
  box-shadow: 0 0 14px rgba(0,212,170,0.55);
}
.vfx-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent, #00d4aa);
  color: #04201a;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(0,0,0,0.5);
}
.vfx-media:focus-visible { outline: 2px solid var(--accent, #00d4aa); outline-offset: 3px; }

/* prázdna scéna — ikona, veta, a rovno tlačidlo pod ňou */
.vfx-empty { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 24px; }
.vfx-empty-title { font-size: 15px; color: rgba(255,255,255,0.72); font-weight: 600; }
.vfx-empty-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 11px;
  border: none;
  background: var(--accent, #00d4aa);
  color: #03211b;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.vfx-empty-btn:hover { transform: translateY(-2px); }

.vfx-transport {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 2px 0;
  flex: none;
}
.vfx-play {
  width: 27px; height: 27px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent;
  color: #e9eaef;
  cursor: pointer;
  font-size: 10px;
}
.vfx-play:disabled { opacity: 0.35; cursor: not-allowed; }
.vfx-track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1); position: relative; }
.vfx-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent, #00d4aa); border-radius: 2px; }
.vfx-tc { font-size: 11px; color: rgba(255,255,255,0.45); font-variant-numeric: tabular-nums; }

/* ── zdroje (pravý stĺpec) ── */
.vfx-lab {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.34);
  margin: 0 0 10px;
  font-weight: 700;
}
.vfx-slot {
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.012);
  margin-bottom: 9px;
  cursor: pointer;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.vfx-slot:hover { border-color: rgba(0,212,170,0.45); }
.vfx-slot.is-filled { border-style: solid; background: rgba(255,255,255,0.03); }
/* Zhasnutý slot NEMIZNE — miesto si drží, aby layout pri prepnutí modelu neposkočil. */
.vfx-slot.is-off { opacity: 0.32; cursor: not-allowed; }
.vfx-slot.is-off:hover { border-color: rgba(255,255,255,0.14); }
.vfx-slot-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.vfx-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); flex: none; }
.vfx-slot.is-filled .vfx-dot { background: var(--accent, #00d4aa); }
.vfx-slot.is-need .vfx-dot { background: #e0a33a; }
.vfx-slot-m { font-size: 10.5px; color: rgba(255,255,255,0.36); margin-top: 6px; line-height: 1.5; }
.vfx-slot-thumb { margin-top: 8px; border-radius: 6px; overflow: hidden; height: 78px; background: #000; }
.vfx-slot-thumb > img,
.vfx-slot-thumb > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vfx-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 9px; }
.vfx-mode {
  font: inherit;
  font-size: 11px;
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
}
.vfx-mode[aria-pressed="true"] { background: rgba(155,124,255,0.16); border-color: #9b7cff; color: #cbbcff; }
.vfx-mode:disabled { cursor: not-allowed; }
.vfx-mode small { display: block; font-size: 9px; color: rgba(255,255,255,0.3); }

/* ── dlaždice modelov — presne na šírku okna scény ── */
.vfx-rack {
  width: calc(100% + 50px);
  margin: 0 -25px;
  padding: 16px 25px 0;
  border-top: 1px solid rgba(255,255,255,0.075);
}
@media (max-width: 1100px) {
  .vfx-rack { width: 100%; margin: 0; padding: 16px 0 0; }
}
.vfx-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vfx-tile {
  position: relative;
  text-align: left;
  font: inherit;
  color: #e9eaef;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.022);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 122px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.vfx-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 82% 6%, var(--vfx-glow, rgba(0,212,170,0.2)) 0%, transparent 62%);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.vfx-tile:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(255,255,255,0.2); }
.vfx-tile[aria-pressed="true"] { border-color: var(--accent, #00d4aa); background: rgba(0,212,170,0.07); }
.vfx-tile[aria-pressed="true"]::before { opacity: 1; }
.vfx-tile:disabled { opacity: 0.3; cursor: not-allowed; }
.vfx-tile:disabled::before { opacity: 0; }
.vfx-tile-role {
  font-size: 9px;
  letter-spacing: 0.11em;
  color: rgba(255,255,255,0.34);
  text-transform: uppercase;
  position: relative;
  font-weight: 700;
}
.vfx-tile-nm { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; position: relative; }
.vfx-tile-sub { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.45; flex: 1; position: relative; }
.vfx-tile-foot { font-size: 10.5px; color: rgba(255,255,255,0.34); position: relative; font-variant-numeric: tabular-nums; }
.vfx-rec {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 8px;
  letter-spacing: 0.11em;
  padding: 3px 6px;
  border-radius: 3px;
  background: var(--accent, #00d4aa);
  color: #03211b;
  font-weight: 800;
}

/* ── uvítacie okno ── */
.vfx-back {
  position: fixed;
  inset: 0;
  background: rgba(3,4,7,0.84);
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 22px;
}
.vfx-modal {
  width: min(580px, 100%);
  background: #15171c;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,0.7);
}
.vfx-modal-vid { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vfx-modal-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vfx-modal-b { padding: 20px 22px 22px; }
.vfx-modal-b h2 { font-size: 20px; margin: 0 0 8px; letter-spacing: -0.01em; }
.vfx-modal-b > p { margin: 0 0 15px; color: rgba(255,255,255,0.55); font-size: 13.5px; }
.vfx-steps { display: grid; gap: 9px; margin-bottom: 18px; }
.vfx-step { display: flex; gap: 10px; font-size: 13px; align-items: flex-start; line-height: 1.5; }
.vfx-step i { font-style: normal; color: var(--accent, #00d4aa); font-size: 11px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.vfx-modal-f { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vfx-modal-f small { color: rgba(255,255,255,0.34); font-size: 11.5px; }
.vfx-modal-f .nb-generate-btn { padding: 10px 24px; }

@media (max-width: 1100px) {
  .vfx-stage { padding: 14px 0; min-height: 420px; }
  .video-tool-view .nb-sidebar.vfx-sources {
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.075) !important;
    padding: 16px 2px;
  }
  .vfx-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .vfx-tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vfx-tile, .vfx-chip, .vfx-slot, .vfx-how, .vfx-empty-btn { transition: none; }
}