/* ===========================================================================
   UI infrastructure — Dock, Gallery, Toasts
   =========================================================================== */

/* --- Notifications --------------------------------------------------------- */
.toast-stack {
  position: fixed;
  top: 76px; right: 20px;
  z-index: 200;
  display: flex; flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 340px;
}
/* Cuando la Galería está abierta, mueve los toasts a la izquierda del panel */
body:has(.gallery-panel.is-open) .toast-stack { right: 740px; }
/* Cuando Style Vault está abierto (bottom sheet), igual */
body:has(.vault-sheet.is-open) .toast-stack { top: 76px; }
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 11px;
  position: relative;
  padding: 12px 36px 12px 13px;
  border: 1px solid;
  border-radius: 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.6);
  animation: toast-in .35s var(--ease);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px) scale(.96); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
.toast-bar {
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--toast-c);
  box-shadow: 0 0 8px var(--toast-c);
  border-radius: 2px;
}
.toast-icon {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--toast-c) 18%, transparent);
  color: var(--toast-c);
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--toast-c) 40%, transparent);
}
.toast-body { min-width: 0; flex: 1; }
.toast-title { font-size: 12.5px; color: var(--text-1); font-weight: 500; line-height: 1.3; }
.toast-text  { margin-top: 2px; font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.toast-close {
  position: absolute; top: 8px; right: 8px;
  border: 0; background: transparent;
  color: var(--text-4);
  width: 20px; height: 20px;
  border-radius: 5px; cursor: pointer;
}
.toast-close:hover { color: var(--text-1); background: rgba(255,255,255,0.04); }

/* --- Node Dock ------------------------------------------------------------- */
.dock {
  position: fixed;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 24;
  padding: 8px 8px 7px;
  background: rgba(15,15,15,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid #262626;
  border-radius: 16px;
  box-shadow:
    0 22px 50px -18px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.04);
  display: flex; flex-direction: column;
  gap: 6px;
  min-width: 580px;
}
.dock-kicker {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 0 6px;
}
.dock-items {
  display: flex; gap: 6px;
}
.dock-item {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid #1F1F1F;
  background: #0A0A0A;
  border-radius: 11px;
  color: var(--text-1);
  cursor: pointer;
  transition: all .2s var(--ease);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.dock-item::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--dock-c) 18%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity .25s;
}
.dock-item:hover { border-color: var(--dock-c); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0,0,0,0.7), 0 0 22px color-mix(in srgb, var(--dock-c) 30%, transparent); }
.dock-item:hover::before { opacity: 1; }
.dock-item.is-prompt { --dock-c: #6366F1; }
.dock-item.is-image  { --dock-c: #8B5CF6; }
.dock-item.is-video  { --dock-c: #10B981; }
.dock-item.is-note   { --dock-c: #F59E0B; }
.dock-item-icon {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.dock-item-meta { min-width: 0; position: relative; z-index: 1; }
.dock-item-label {
  font-size: 12.5px; font-weight: 500; color: var(--text-1);
  letter-spacing: -0.005em;
}
.dock-item-hint {
  margin-top: 2px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.dock-item-plus {
  margin-left: auto;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--dock-c) 18%, transparent);
  color: var(--dock-c);
  font-size: 14px;
  position: relative; z-index: 1;
}

/* --- Gallery Panel --------------------------------------------------------- */
.gallery-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  padding: 6px 11px;
  border-radius: 7px;
  font: 500 11.5px/1 "Geist", sans-serif;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.gallery-btn:hover { color: var(--text-1); border-color: rgba(139,92,246,0.55); }
.gallery-btn-count {
  font-size: 9.5px;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.35);
  color: var(--accent-3);
  border-radius: 4px;
  padding: 2px 5px;
}

.gallery-backdrop {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(0,0,0,0.55);
  animation: backdrop-in .2s ease;
}
.gallery-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  z-index: 38;
  width: 720px;
  max-width: calc(100vw - 60px);
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--line);
  box-shadow: 0 0 80px rgba(139,92,246,0.10);
  display: flex; flex-direction: column;
  transform: translate3d(100%, 0, 0);
  will-change: transform;
  transition: transform .42s var(--ease);
}
.gallery-panel.is-open { transform: translate3d(0, 0, 0); }

.gallery-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.gallery-title { font-size: 15px; font-weight: 500; color: var(--text-1); }
.gallery-kicker {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.gallery-filters {
  display: inline-flex; gap: 4px;
  background: rgba(167,139,250,0.06);
  border: 1px solid rgba(167,139,250,0.14);
  border-radius: 14px;
  padding: 4px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-theme="light"] .gallery-filters {
  background: rgba(124,58,237,0.05);
  border-color: rgba(124,58,237,0.14);
}
.gallery-filter {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .4s cubic-bezier(0.32,0.72,0,1);
}
.gallery-filter:hover { color: var(--text-1); background: rgba(167,139,250,0.07); }
.gallery-filter.is-active {
  background: linear-gradient(135deg, rgba(167,139,250,0.32), rgba(124,58,237,0.20));
  color: #fff;
  box-shadow:
    0 6px 16px -6px rgba(124,58,237,0.5),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 0 0 1px rgba(167,139,250,0.4);
}
html[data-theme="light"] .gallery-filter.is-active {
  background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(167,139,250,0.10));
  color: #4C1D95;
  box-shadow:
    0 6px 16px -6px rgba(124,58,237,0.32),
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 0 0 1px rgba(124,58,237,0.28);
}
.filter-count {
  font-size: 9.5px;
  background: rgba(124,58,237,0.25);
  border-radius: 6px;
  padding: 1px 6px;
  color: inherit;
  opacity: 0.9;
}
html[data-theme="light"] .filter-count { background: rgba(124,58,237,0.15); }

.gallery-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.gallery-empty {
  display: grid; place-items: center;
  height: 100%;
  text-align: center;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: all .2s var(--ease);
  animation: thumb-in .4s var(--ease);
}
html[data-theme="light"] .gallery-card {
  background: rgba(255,255,255,0.85);
  border-color: rgba(124,58,237,0.12);
  box-shadow: 0 2px 10px rgba(124,58,237,0.06);
}
html[data-theme="light"] .gallery-card:hover {
  border-color: rgba(124,58,237,0.5);
  box-shadow: 0 14px 28px -10px rgba(124,58,237,0.25), 0 0 22px rgba(124,58,237,0.12);
}
.gallery-card:hover {
  border-color: rgba(139,92,246,0.55);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(0,0,0,0.65), 0 0 22px rgba(139,92,246,0.18);
}
.gallery-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: #161616;
}
.gallery-video-tag,
.gallery-style-tag {
  position: absolute;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.gallery-video-tag {
  left: 8px; bottom: 8px;
  background: rgba(0,0,0,0.5);
  color: var(--text-1);
  border: 1px solid rgba(255,255,255,0.12);
}
.gallery-style-tag {
  right: 8px; top: 8px;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.45);
  color: #6EE7B7;
}
.gallery-meta { padding: 9px 11px; }
.gallery-meta-prompt {
  font-size: 11.5px;
  color: var(--text-1);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 33px;
}
.gallery-meta-row {
  margin-top: 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.gallery-model {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.32);
  color: var(--accent-3);
  border-radius: 4px;
  padding: 2px 6px;
}
.gallery-time {
  font-size: 9.5px;
  color: var(--text-4);
  letter-spacing: 0.08em;
}
.gallery-remove {
  position: absolute; top: 8px; left: 8px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-1);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s;
  backdrop-filter: blur(6px);
}
.gallery-card:hover .gallery-remove { opacity: 1; }
.gallery-remove:hover { background: rgba(239,68,68,0.45); }

.gallery-download {
  position: absolute; top: 8px; left: 36px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-1);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  opacity: 0;
  transition: opacity .15s, background .15s;
  backdrop-filter: blur(6px);
}
.gallery-card:hover .gallery-download { opacity: 1; }
.gallery-download:hover { background: rgba(139,92,246,0.5); }

/* --- Galería: light mode visibilidad + esquinas curvas --- */
.gallery-remove, .gallery-download { border-radius: 10px; }
html[data-theme="light"] .gallery-remove,
html[data-theme="light"] .gallery-download {
  background: rgba(76,29,149,0.78);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
html[data-theme="light"] .gallery-remove:hover { background: rgba(220,38,38,0.85); }
html[data-theme="light"] .gallery-download:hover { background: rgba(124,58,237,0.9); }
html[data-theme="light"] .gallery-time { color: #6B5B8C; }
html[data-theme="light"] .gallery-model {
  background: rgba(124,58,237,0.10);
  border-color: rgba(124,58,237,0.3);
  color: #6D28D9;
}
html[data-theme="light"] .gallery-video-tag {
  background: rgba(76,29,149,0.75);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
.gallery-video-tag, .gallery-style-tag { border-radius: 8px; }

/* --- Connector temp edge (drag) ------------------------------------------- */
.temp-edge {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 6 6;
  animation: edge-dash 1s linear infinite;
  filter: url(#edgeGlow);
}

/* Highlight handles when a drag is in progress */
.is-connecting .nh {
  animation: handle-pulse 1.2s ease-in-out infinite;
}
@keyframes handle-pulse {
  0%, 100% { transform: translate(0, -50%) scale(1); }
  50%      { transform: translate(0, -50%) scale(1.25); }
}

/* ═══════════════════════════════════════════════════════════════
   Galería — Ensamblar vídeo (selección de escenas + preview final)
   ═══════════════════════════════════════════════════════════════ */
.gallery-assemble-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 0; border-radius: 12px;
  font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, rgba(167,139,250,0.30), rgba(124,58,237,0.20));
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(124,58,237,0.5), inset 0 1px 0 rgba(255,255,255,0.26), inset 0 0 0 1px rgba(167,139,250,0.4);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: all .4s cubic-bezier(0.32,0.72,0,1);
}
.gallery-assemble-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(124,58,237,0.65), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0 0 1px rgba(167,139,250,0.55); }
.gallery-assemble-btn.is-on { background: rgba(239,68,68,0.18); box-shadow: inset 0 0 0 1px rgba(239,68,68,0.45); color: #FCA5A5; }
html[data-theme="light"] .gallery-assemble-btn { color: #4C1D95; background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(167,139,250,0.10)); box-shadow: 0 6px 16px -6px rgba(124,58,237,0.32), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1px rgba(124,58,237,0.28); }

.gallery-assemble-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; margin: 0 16px 4px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(124,58,237,0.06));
  border: 1px solid rgba(167,139,250,0.22);
  font-size: 11px; color: var(--text-2);
}
html[data-theme="light"] .gallery-assemble-bar { background: rgba(124,58,237,0.05); border-color: rgba(124,58,237,0.16); color: #4C1D95; }
.gallery-assemble-go {
  padding: 7px 16px; border: 0; border-radius: 10px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: linear-gradient(135deg, #A78BFA, #7C3AED); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(124,58,237,0.6);
  transition: all .3s var(--ease);
}
.gallery-assemble-go:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(124,58,237,0.8); }
.gallery-assemble-go:disabled { opacity: 0.4; cursor: not-allowed; }

.gallery-card.is-selected { outline: 2px solid #A78BFA; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(167,139,250,0.18), 0 14px 28px -10px rgba(124,58,237,0.4); }
.gallery-sel-badge {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 8px; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #A78BFA, #7C3AED);
  box-shadow: 0 3px 10px -2px rgba(124,58,237,0.7), inset 0 1px 0 rgba(255,255,255,0.3);
}

.gallery-result-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; padding: 24px;
  background: rgba(8,8,13,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fade-in .25s var(--ease);
}
.gallery-result-card {
  width: min(440px, 92vw); max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 22px; background: var(--surface-1, #121218);
  border: 1px solid rgba(167,139,250,0.22);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7), 0 0 40px rgba(124,58,237,0.18);
}
html[data-theme="light"] .gallery-result-card { background: #fff; border-color: rgba(124,58,237,0.18); }
.gallery-result-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.gallery-result-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
.gallery-result-video { width: 100%; aspect-ratio: 9/16; max-height: 64vh; object-fit: contain; background: #000; }
.gallery-result-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; }
.gallery-result-meta { font-size: 10px; color: var(--text-3); }
.gallery-result-btn {
  padding: 8px 16px; border: 0; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 600;
  background: rgba(167,139,250,0.14); color: var(--text-1); box-shadow: inset 0 0 0 1px rgba(167,139,250,0.3);
  transition: all .2s var(--ease);
}
.gallery-result-btn:hover { background: rgba(167,139,250,0.22); }
.gallery-result-btn.primary { background: linear-gradient(135deg, #A78BFA, #7C3AED); color: #fff; box-shadow: 0 6px 16px -6px rgba(124,58,237,0.6); }
.gallery-result-error { padding: 18px; color: #FCA5A5; font-size: 12px; line-height: 1.5; word-break: break-word; }